/* A single scroll-controlled entrance. The rest of the homepage is unchanged. */
.hero-film{position:relative;height:var(--film-height,100svh);overflow-anchor:none;background:#000}
.hero-film[data-mode="active"],.hero-film[data-mode="ending"]{height:calc(var(--film-height,100svh)*5);min-height:0}
.film-stage{position:sticky;top:0;height:var(--film-height,100svh);overflow:hidden;isolation:isolate;background:#000}
.film-visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none}
.film-video{opacity:0}
.hero-film.is-ready:not([data-mode="compact"]) .film-video{opacity:1}
.film-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,15,36,.66),rgba(3,15,36,.24) 48%,transparent 78%);opacity:var(--film-copy,1);pointer-events:none}
.film-copy{position:absolute;z-index:2;top:22%;left:5%;width:51%;max-width:780px;color:#fff;opacity:var(--film-copy,1);transform:translate3d(0,calc(var(--film-copy-shift,0)*1px),0)}
.film-copy h1{font:300 clamp(52px,5.35vw,96px)/1.01 var(--font-display);letter-spacing:-.035em;margin:0 0 24px;text-wrap:balance;text-shadow:0 2px 28px #06152c33}
.film-copy p{font:400 clamp(14px,1.05vw,17px)/1.7 var(--font-text);max-width:440px;margin:0 0 25px;color:#f8fbff;text-shadow:0 1px 12px #05132e55}
.film-copy .pill{font-size:13px;color:#122334}
.film-bottom{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;gap:24px;color:white;z-index:3;font:400 12px/1.5 var(--font-text)}
.film-guidance{display:flex;align-items:center;gap:18px;opacity:var(--film-copy,1)}
.film-progress{display:block;width:85px;height:1px;background:#ffffff55;overflow:hidden}
.film-progress i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(var(--film-progress,0));transform-origin:left}
.film-control{color:#fff;border:0;border-bottom:1px solid #ffffff66;padding:9px 0;background:transparent;cursor:pointer;font:inherit;min-height:44px;white-space:nowrap}
.film-control:hover{border-color:#fff}
.film-control:focus-visible,.film-copy a:focus-visible{outline:2px solid #fff;outline-offset:6px}
.hero-film[data-mode="compact"] .film-skip,.hero-film[data-mode="compact"] .film-guidance{display:none}
.hero-film[data-mode="compact"] .film-bottom{justify-content:flex-end}
.film-blackout,.film-paper{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0}
.film-blackout{background:#000}
.hero-film[data-mode="ending"] .film-blackout{opacity:1}
.film-paper{z-index:5;background:var(--paper,#eeefeb);opacity:var(--film-exit,0)}
.hero-film[data-mode="ending"] .film-bottom{visibility:hidden}
.home-page:has(.hero-film)>.nav{background:none}
.home-page:has(.hero-film)>.nav>.wordmark{color:#fff;text-shadow:0 1px 16px #06152c66}
.home-page.film-pinned>.nav{position:fixed}
.home-page.film-pinned>.nav>.wordmark{opacity:var(--intro-nav,1)}
.film-adjusting,.film-adjusting *{scroll-behavior:auto!important;overflow-anchor:none!important}
.film-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:801px) and (max-height:760px){
 .film-copy{top:23%;width:52%}
 .film-copy h1{font-size:clamp(48px,5.05vw,76px);margin-bottom:18px}
 .film-copy p{font-size:14px;line-height:1.6;max-width:420px;margin-bottom:19px}
}
@media(max-width:800px){
 .film-visual{object-fit:contain;object-position:center 77%}
 .film-scrim{background:linear-gradient(#071025 0%,#071025e6 28%,#07102500 57%)}
 .film-copy{top:130px;left:7%;width:86%;max-width:520px}
 .film-copy h1{font-size:clamp(41px,7.3vw,62px);line-height:1.02;margin-bottom:17px}
 .film-copy p{font-size:13px;line-height:1.65;max-width:360px;margin-bottom:18px}
 .film-copy .pill{font-size:12px;padding:13px 20px}
 .film-bottom{left:7%;right:7%;font-size:11px;bottom:max(18px,env(safe-area-inset-bottom))}
 .film-guidance{gap:12px}.film-progress{width:45px}
}
@media(max-width:800px) and (max-height:700px){
 .film-copy{top:130px}.film-copy h1{font-size:40px}
 .film-copy p{font-size:12px;line-height:1.55;max-width:320px}
 .film-visual{object-position:center 86%}
}
@media(max-width:800px) and (max-height:600px){.film-copy p{display:none}}

@media(orientation:landscape) and (max-height:500px){
 .film-copy{top:26%;width:55%;left:5%}
 .film-copy h1{font-size:clamp(34px,5vw,52px);margin-bottom:18px}
 .film-copy p{display:none}.film-visual{object-fit:cover;object-position:center}
 .film-scrim{background:linear-gradient(100deg,#03102499,transparent 75%)}
}
