/* Seven type sizes across the homepage, including the animated SVG labels:
   12, 14, 16, 24, 32, 40 and 72px. */
body.homepage {
  --home-type-xs: 12px;
  --home-type-sm: 14px;
  --home-type-body: 16px;
  --home-type-title: 24px;
  --home-type-subhead: 32px;
  --home-type-heading: 40px;
  --home-type-display: 72px;
  font-family: Roboto, sans-serif !important;
}

body.homepage .hero h1 { font-size: var(--home-type-display) !important; }
body.homepage .hero-thesis { font-size: var(--home-type-title) !important; }
body.homepage .audience-intro h2 { font-size: var(--home-type-heading) !important; }
body.homepage .audience-list h3 { font-size: var(--home-type-title) !important; }
body.homepage .audience-list p { font-size: var(--home-type-body) !important; }
body.homepage .price-table .price { font-size: var(--home-type-heading) !important; }
body.homepage .price-table .price.price-text { font-size: var(--home-type-body) !important; }
body.homepage .service-map-stage--circle .service-map-button { font-size: var(--home-type-sm) !important; }
body.homepage .service-map-stage--circle .service-map-detail h3 { font-size: var(--home-type-body) !important; }
body.homepage .service-map-stage--circle .service-map-detail :is(p, a) { font-size: var(--home-type-sm) !important; }
body.homepage .folder-animation-service-row text {
  font-size: var(--home-type-sm) !important;
  transform: scale(.36);
  transform-box: fill-box;
  transform-origin: left center;
}

@media (max-width: 720px) {
  body.homepage .hero h1 { font-size: var(--home-type-heading) !important; }
  body.homepage .audience-intro h2 { font-size: var(--home-type-subhead) !important; }
  body.homepage .audience-list h3 { font-size: var(--home-type-body) !important; }
  body.homepage .audience-list p { font-size: var(--home-type-sm) !important; }
  body.homepage .service-map-stage--circle .service-map-detail :is(p, a) { font-size: var(--home-type-xs) !important; }
  body.homepage .folder-animation-service-row text { transform: scale(.54); }
  body.homepage .projects-grid {
    display: flex;
    gap: 16px;
    margin-inline: -20px;
    padding: 14px 20px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  body.homepage .project-card {
    flex: 0 0 min(82vw, 330px);
    margin-top: 0;
    scroll-snap-align: start;
  }
  body.homepage .project-card + .project-card { margin-top: 0; }
  body.homepage .project-card figure,
  body.homepage .project-card--five figure,
  body.homepage .project-card--four figure { margin: 0; aspect-ratio: 4 / 3; }
}