/* FOCAL ATL hero: the scroll-scrubbed film and its designed still. The five static gates below are
   character-for-character the same list hero.js decides on. */
.f-hero{position:relative;height:550vh;background:var(--stage);color:var(--text-primary)}
.f-hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--stage)}
.f-hero__poster,.f-hero__still{position:absolute;inset:0;background-size:cover;background-position:62% center;background-repeat:no-repeat}
.f-hero__still{display:none}
.f-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;opacity:0;transition:opacity var(--d-slow) var(--ease-out);transform:translateZ(0);will-change:transform;pointer-events:none}
.f-hero__stage.video-ready .f-hero__video{opacity:1}
.f-hero__stage.video-failed .f-hero__video{display:none}
.f-hero__scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,12,0) 35%,rgba(10,10,12,.62) 100%)}
.f-hero__scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,13,.55),rgba(13,13,13,0) 35%)}

/* Bands */
.f-hero__bands{position:absolute;inset:0}
.f-band{position:absolute;inset:0;display:flex;align-items:center;padding:6rem var(--gutter) 5rem;opacity:0;pointer-events:none;text-shadow:var(--tshadow);--k:0}
.f-band .f-btn{text-shadow:none;pointer-events:auto}
.f-band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 60% 70% at 24% 52%,rgba(5,5,10,.70) 0%,rgba(5,5,10,.46) 46%,rgba(5,5,10,0) 76%)}
.f-band--2::before,.f-band--3::before{background:radial-gradient(ellipse 58% 66% at 24% 52%,rgba(5,5,10,.62) 0%,rgba(5,5,10,.4) 46%,rgba(5,5,10,0) 76%)}
.f-band--4::before{background:radial-gradient(ellipse 60% 70% at 26% 54%,rgba(5,5,10,.66) 0%,rgba(5,5,10,.44) 46%,rgba(5,5,10,0) 76%)}
/* The transformation film opens on a bright bare wall. Bands 1 to 3 add a left-lane scrim (the reading lane) that
   fades out toward the right, so the wall stays visible while the words stay readable over the worst frame. */
.f-band--1::after,.f-band--2::after,.f-band--3::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(.35 + .65*var(--k,1));background:linear-gradient(90deg,rgba(8,8,12,.86) 0%,rgba(8,8,12,.78) 38%,rgba(8,8,12,.5) 58%,rgba(8,8,12,.12) 78%,rgba(8,8,12,0) 100%)}
.f-band--2::after,.f-band--3::after{background:linear-gradient(90deg,rgba(8,8,12,.72) 0%,rgba(8,8,12,.6) 36%,rgba(8,8,12,.3) 56%,rgba(8,8,12,0) 76%)}
.f-band__inner{z-index:1}
.f-band__inner{position:relative;width:100%;max-width:var(--container);margin-inline:auto}
.f-band--1 .f-band__inner{display:grid;gap:clamp(1.25rem,2.5vw,2rem);max-width:min(var(--container),100%)}
.f-hero__kicker{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem 1.4rem;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.32em;font-size:var(--t-label);color:var(--text-secondary)}
.f-hero__brand{color:var(--text-primary);font-weight:500}
.f-hero__desc{font-family:var(--font-mono);letter-spacing:.24em;color:var(--focal-bronze)}
.f-hero__title{font-family:var(--font-display);font-weight:300;font-size:var(--t-hero);line-height:1;letter-spacing:var(--track-hero);text-transform:uppercase;max-width:14ch}
.f-hero__lede{font-size:var(--t-lede);line-height:1.5;color:var(--text-secondary);max-width:52ch}
.f-hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.5rem}
.f-band__num{display:block;font-family:var(--font-display);font-weight:200;font-size:clamp(3.5rem,8vw,8rem);line-height:.9;color:var(--focal-bronze);letter-spacing:-.02em;margin-bottom:1rem}
.f-band__title{position:relative;font-family:var(--font-display);font-weight:300;font-size:clamp(3rem,9vw,9.5rem);line-height:.95;letter-spacing:.16em;text-transform:uppercase;max-width:10ch}
.f-band__line{margin-top:1.25rem;font-family:var(--font-body);font-size:clamp(1.15rem,1.8vw,1.6rem);color:var(--text-secondary);max-width:30ch;opacity:var(--kl,1)}
.f-hero__settle{display:grid;gap:1.5rem;justify-items:start;margin-top:clamp(1.5rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line-strong);max-width:36rem}
.f-hero__statement{font-family:var(--font-display);font-weight:400;font-size:clamp(1rem,1.4vw,1.25rem);letter-spacing:.22em;text-transform:uppercase;color:var(--text-primary)}

/* Split text primitives (created by hero.js) */
.f-split{display:inline}
.f-split .w{display:inline-block;white-space:nowrap}
.f-split .c{display:inline-block}
.f-split--soft{position:absolute;inset:0;filter:blur(10px);pointer-events:none}

/* Entrances, all transform + opacity, driven by the band's --k */
.f-band--rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.35em))}
.f-band--rise .f-hero__lede{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.f-band--rise .f-hero__ctas{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.f-band--rise .f-hero__kicker{--kk:clamp(0,var(--k,0)*3,1);opacity:var(--kk)}
.f-band--blur .f-split .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc)}
.f-band--blur .f-split--soft{opacity:calc(1 - var(--k,0))}
.f-band--blur .f-split--soft .c{opacity:1}
.f-band--drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-28px))}
.f-band--settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.3em))}
.f-band--2 .f-band__num,.f-band--3 .f-band__num,.f-band--4 .f-band__num{--kn:clamp(0,var(--k,0)*2.5,1);opacity:var(--kn);transform:translateX(calc((1 - var(--kn))*-12px))}
.f-band--2 .f-band__line,.f-band--3 .f-band__line,.f-band--4 .f-band__line{--kl:clamp(0,(var(--k,0) - .5)*3,1);opacity:var(--kl);transform:translateY(calc((1 - var(--kl))*10px))}
.f-band--settle .f-hero__settle{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
.f-band--settle .f-hero__settle .f-btn{--kb:clamp(0,(var(--k,0) - .8)*5,1);opacity:var(--kb)}

/* Hairline grid rides the settle band */
.f-hero__grid{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--d-slow) var(--ease-out);max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);display:flex;justify-content:space-between}
.f-hero__grid i{width:1px;height:100%;background:linear-gradient(to bottom,transparent,rgba(184,138,70,.35) 30%,rgba(184,138,70,.35) 70%,transparent)}
.f-hero__bands:has(.f-band--4.is-active)+.f-hero__grid{opacity:1}

/* Scroll cue and loading ring */
.f-hero__cue{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);display:grid;justify-items:center;gap:.6rem;color:var(--focal-bronze);opacity:1;transition:opacity var(--d-base) var(--ease-out)}
.f-hero__cue.is-hidden{opacity:0}
.f-hero__ring{width:44px;height:44px;transform:rotate(-90deg);transition:opacity var(--d-base) var(--ease-out)}
.f-hero__ring.is-hidden{opacity:0;position:absolute}
.f-hero__chevron{width:44px;height:44px;display:grid;place-items:center;animation:f-cue 2.6s var(--ease-in-out) infinite -1s}
.f-hero__chevron svg{width:20px;height:20px}
.f-hero__ring:not(.is-hidden)+.f-hero__chevron{display:none}
.f-hero__cue-label{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--text-tertiary)}
@keyframes f-cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
@media (max-height:560px){.f-hero__cue{display:none}}

/* The designed still hero (the two static gates, identical to hero.js: landscape phones and reduced motion) */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .f-hero{height:auto}
  .f-hero__stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
  .f-hero__poster,.f-hero__video,.f-hero__cue,.f-hero__grid{display:none}
  .f-hero__still{display:block}
  .f-hero__scrim{background:linear-gradient(to top,rgba(13,13,13,.92) 0%,rgba(13,13,13,.72) 45%,rgba(13,13,13,.25) 100%)}
  .f-hero__scrim::after{display:none}
  .f-hero__bands{position:relative;inset:auto;width:100%}
  .f-band{position:relative;inset:auto;opacity:1!important;pointer-events:auto;padding:7.5rem var(--gutter) 3.5rem;--k:1}
  .f-band::before{display:none}
  .f-band--2,.f-band--3,.f-band--4{display:none}
  .f-band--1 .f-hero__ctas{flex-direction:column;align-items:stretch}
  .f-band--1 .f-hero__ctas .f-btn{width:100%}
  .f-split .w,.f-split .c,.f-hero__lede,.f-hero__ctas,.f-hero__kicker{opacity:1!important;transform:none!important}
}
/* JS-decided static mode mirrors the CSS so a live gate flip never leaves a half state */
.f-hero--static{height:auto}
.f-hero--static .f-hero__stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
.f-hero--static .f-hero__poster,.f-hero--static .f-hero__video,.f-hero--static .f-hero__cue,.f-hero--static .f-hero__grid{display:none}
.f-hero--static .f-hero__still{display:block}
.f-hero--static .f-hero__bands{position:relative;inset:auto;width:100%}
.f-hero--static .f-band{position:relative;inset:auto;opacity:1!important;pointer-events:auto;padding:7.5rem var(--gutter) 3.5rem;--k:1}
.f-hero--static .f-band::before{display:none}
.f-hero--static .f-band--2,.f-hero--static .f-band--3,.f-hero--static .f-band--4{display:none}
.f-hero--static .f-split .w,.f-hero--static .f-split .c,.f-hero--static .f-hero__lede,.f-hero--static .f-hero__ctas,.f-hero--static .f-hero__kicker{opacity:1!important;transform:none!important}
@media (min-width:1024px){
  .f-hero--static .f-band{padding-top:9rem;padding-bottom:5rem}
}
@media (max-width:430px){
  .f-hero__title{font-size:clamp(2.2rem,11vw,3rem);letter-spacing:.08em}
  .f-band__title{letter-spacing:.1em}
}

/* Phones and portrait tablets scrub the film too (the three mobile gates, identical to hero.js), with a portrait crop,
   a shorter journey and captions anchored to the bottom over a bottom scrim. The film is 4.6 MB and streams behind the ring. */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse){
  .f-hero:not(.f-hero--static){height:380vh}
  .f-hero:not(.f-hero--static) .f-hero__video{object-position:58% center}
  .f-hero:not(.f-hero--static) .f-hero__poster{background-position:58% center}
  .f-hero:not(.f-hero--static) .f-band{align-items:flex-end;padding:5.5rem var(--gutter) 5.25rem}
  .f-hero:not(.f-hero--static) .f-band::before{display:none}
  .f-hero:not(.f-hero--static) .f-band--1::after,.f-hero:not(.f-hero--static) .f-band--2::after,.f-hero:not(.f-hero--static) .f-band--3::after,.f-hero:not(.f-hero--static) .f-band--4::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(.45 + .55*var(--k,1));background:linear-gradient(to top,rgba(8,8,12,.94) 0%,rgba(8,8,12,.78) 38%,rgba(8,8,12,.28) 66%,rgba(8,8,12,0) 100%)}
  .f-hero:not(.f-hero--static) .f-hero__title{font-size:clamp(2.1rem,9.6vw,3.4rem);letter-spacing:.08em;max-width:100%}
  .f-hero:not(.f-hero--static) .f-hero__lede{font-size:1rem;max-width:38ch}
  .f-hero:not(.f-hero--static) .f-hero__ctas{flex-direction:column;align-items:stretch}
  .f-hero:not(.f-hero--static) .f-hero__ctas .f-btn{width:100%}
  .f-hero:not(.f-hero--static) .f-band__num{font-size:3rem;margin-bottom:.5rem}
  .f-hero:not(.f-hero--static) .f-band__title{font-size:clamp(2.6rem,13vw,4.5rem);letter-spacing:.12em}
  .f-hero:not(.f-hero--static) .f-band__line{font-size:1.05rem;margin-top:.9rem}
  .f-hero:not(.f-hero--static) .f-hero__settle{max-width:100%;margin-top:1.25rem;padding-top:1rem}
  .f-hero:not(.f-hero--static) .f-hero__cue{bottom:1rem}
  .f-hero:not(.f-hero--static) .f-hero__grid{display:none}
  .f-hero:not(.f-hero--static) .f-hero__scrim::after{background:linear-gradient(to top,rgba(13,13,13,.5),rgba(13,13,13,0) 45%)}
}