/* A pinned scene: native scroll position controls the video timeline. */
.hero { min-height: calc(var(--hero-stage-height, 100svh) + clamp(900px, 180svh, 1800px)); display: block; overflow: visible; background: var(--ink); }
.hero__stage { position: sticky; top: 0; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; perspective: 1400px; background: var(--ink); }
/* Display the complete source frame, capped at its native resolution.
   Keep the film below the fixed navigation and outside all perspective transforms. */
.hero__depth { position: absolute; inset: 92px 0 84px auto; width: min(100%, 1280px); max-height: 720px; margin-block: auto; display: grid; place-items: center; background: #070806; }
.hero__poster, .hero__video { position: relative; grid-area: 1 / 1; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 1280px; max-height: 720px; object-fit: contain; object-position: center; }
.hero__video { opacity: 0; transition: opacity 200ms ease; }
.hero.has-video .hero__video { opacity: 1; }
.hero__wash { pointer-events: none; background: linear-gradient(90deg, rgba(3,5,3,.78), rgba(3,5,3,.45) 35%, rgba(3,5,3,.03) 65%), linear-gradient(0deg, #070806 0%, rgba(7,8,6,.2) 24%, transparent 65%, rgba(7,8,6,.38)); }
.hero__content { width: 100%; padding: max(130px, 19svh) var(--pad) max(110px, 16svh); transform: translate3d(var(--type-x, 0px), var(--type-y, 0px), 0); will-change: transform; }
.hero__intro { animation: invitation-enter 1.4s var(--ease) both; }
.hero h1 { max-width: none; font-size: clamp(64px, 7.4vw, 142px); line-height: .95; letter-spacing: -.055em; }
.hero h1 span { white-space: nowrap; }
.hero h1 span:last-child { margin-left: .15em; -webkit-text-stroke: 1px rgba(240,234,220,.92); }
.hero__statement { max-width: 380px; width: 100%; margin: 2rem 0 0; color: #d5d1c5; font-size: clamp(14px, 1.08vw, 17px); }
.hero__join { display: inline-flex; align-items: center; gap: 2rem; margin-top: 1.7rem; min-height: 44px; border-bottom: 1px solid rgba(226,189,117,.65); color: var(--ivory); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.hero__join span { color: var(--gold-bright); font-size: 20px; transition: transform .3s ease; }
.hero__join:hover span { transform: translate(3px,-3px); }
.hero__scroll { position: absolute; z-index: 4; bottom: 28px; left: var(--pad); display: flex; align-items: center; gap: 16px; min-height: 44px; font-size: 9px; letter-spacing: .23em; text-decoration: none; text-transform: uppercase; color: #d5d1c5; }
.hero__scroll-line { width: 64px; height: 1px; background: rgba(226,189,117,.25); transform-origin: left; }
.hero__scroll-line::after { content: ''; display: block; height: 100%; background: var(--gold-bright); transform-origin: left; transform: scaleX(var(--scroll-line, .12)); }
.hero :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; }
.hero__exit { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: var(--ink); opacity: var(--exit-opacity, 0); }
.hero.is-still .hero__depth, .hero.is-still .hero__content { transform: none; will-change: auto; }
.hero.is-still .hero__intro { animation: none; }
.hero.is-still .hero__exit { opacity: 0; }
@keyframes invitation-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .hero { min-height: calc(var(--hero-stage-height, 100svh) + clamp(600px, 120svh, 1100px)); }
  .hero__depth { inset: 92px 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; }
  .hero__content { padding-top: calc(92px + 56.25vw + 24px); padding-bottom: 120px; }
  .hero h1 { font-size: clamp(43px, 9.6vw, 78px); }
  .hero__wash { background: none; }
  .hero__statement { max-width: 330px; }
}
@media (max-width: 520px) {
  .hero__content { padding-top: calc(92px + 56.25vw + 24px); padding-bottom: 115px; }
  .hero h1 { font-size: clamp(34px, 10.2vw, 54px); }
  .hero__statement { font-size: 13px; margin-top: 1.5rem; }
  .hero__join { margin-top: 1rem; font-size: 9px; }
  .hero .kicker { font-size: 9px; margin-bottom: 1.25rem; }
  .hero__scroll-line { width: 26px; }
  .hero__scroll { gap: 10px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { min-height: 100svh; }
  .hero__stage { position: relative; }
  .hero__depth, .hero__content { transform: none !important; will-change: auto; }
  .hero__intro { animation: none; }
  .hero__exit { display: none; }
}