/* Native scrolling lifts an opaque dark section over the sticky hero. */
html .hero-scroll, html.motion-enabled .hero-scroll { height: auto !important; position: relative; }
html .hero-scroll > .hero { position: sticky; top: 0; }
.hero-statement { position: relative; z-index: 5; min-height: 0; margin-top: 0; padding: clamp(100px,11.111111vw,160px) max(8.333333vw, calc((100vw - 1440px) / 2)) 0; background: var(--black); }
.hero-statement::before { content: none; }
.hero-statement-inner { width: 100%; max-width: none; margin-inline: auto; text-align: center; }
.hero-statement .eyebrow { color:#E9C79E; margin:0 0 48px; }
.hero-statement h1 { margin:0; font:700 clamp(44px,10vw,144px)/.916667 Arturm,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
@media(max-width:760px) { .hero-statement { padding:100px 30px 80px; min-height:80svh; } .hero-statement h1 { font-size:clamp(32px,8.5vw,64px); line-height:1; letter-spacing:.02em; } }
@media(prefers-reduced-motion:reduce) { html .hero-scroll > .hero { position:relative; } }

/* Figma 124:705: one continuous gradient over the three-line heading. */
.hero-statement h1 { background-image: linear-gradient(-62.9958457deg,#fff 77.452%,#E9C79E 96.31%); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
/* Figma 125:732: paragraph follows the heading with 160px desktop separation. */
body .studio-section { position:relative; z-index:5; background:var(--black); margin:0; padding:clamp(80px,11.111111vw,160px) var(--section-gutter) 75px; }
body .studio-section .studio-description { max-width:none; margin:0 auto; font:400 clamp(32px,4.166667vw,60px)/1.133333 Arturm,sans-serif; letter-spacing:.02em; color:rgba(255,255,255,.96); }
@media(max-width:760px) { .hero-statement { min-height:0; padding-bottom:0; } body .studio-section { padding:72px var(--section-gutter) 64px; } body .studio-section .studio-description { font-size:clamp(28px,6.5vw,40px); line-height:1.2; } }

/* Solid section background; gradient is reserved for heading lettering. */
.hero-statement, body .studio-section { background: var(--black); background-image: none; }
.hero-statement::before, .hero-statement::after, body .studio-section::before, body .studio-section::after { content: none; }
/* Reset legacy studio heading rules: the Figma paragraph has no first-line indent. */
body .studio-section.page-section { width:100%; max-width:none; margin:0; box-sizing:border-box; container-type:normal; }
body .studio-section #studio-title.studio-description { width:100%; max-width:none; margin:0 auto; padding:0; text-indent:0; text-align:left; white-space:normal; overflow-wrap:normal; text-wrap:wrap; font:400 clamp(32px,4.166667vw,60px)/1.133333 Arturm,sans-serif; letter-spacing:.02em; color:rgba(255,255,255,.96); }
@media(max-width:760px){body .studio-section #studio-title.studio-description{font-size:clamp(28px,6.5vw,40px);line-height:1.2;}}

/* Shared bounds keep the statement and studio copy on the same grid. */
body .hero-statement,
body .studio-section.page-section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  padding-inline: max(8.333333vw, calc((100vw - 1440px) / 2));
}
@media (max-width: 760px) {
  body .hero-statement,
  body .studio-section.page-section {
    padding-inline: clamp(20px, 5.56vw, 24px);
  }
}

/* Compact facts and coordinated, one-time scroll entrances. */
body .stats article {
  min-height: 0;
  padding: clamp(32px, 2.8vw, 40px);
  gap: 24px;
  align-content: start;
}
body .hero-statement [data-reveal],
body .studio-section .studio-description[data-reveal] {
  transition: opacity 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1);
  --reveal-travel: 28px;
}
body .hero-statement .eyebrow[data-reveal] { --reveal-travel: 12px; }
body .hero-statement h1.is-visible { transition-delay: 100ms; }
body .stats article[data-reveal].is-visible { transition-delay: 0ms; }
body .stats article[data-reveal-step="1"].is-visible { transition-delay: 100ms; }
body .stats article[data-reveal-step="2"].is-visible { transition-delay: 200ms; }
@media (prefers-reduced-motion: reduce) {
  body .hero-statement [data-reveal],
  body .studio-section .studio-description[data-reveal],
  body .stats article[data-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Keep the three authored lines intact while fitting their shared width. */
.hero-statement h1 { white-space: nowrap; }
@media (max-width: 760px) { body .stats article { padding: 28px; gap: 20px; } }