.hero-scroll{position:relative;--film-top:110px;--film-height:690px;--film-distance:1600px;height:calc(var(--film-height) + var(--film-distance));background:#080e1c}
.hero-scroll>.hero-film{position:sticky;top:var(--film-top);height:var(--film-height);min-height:0;width:100%;overflow:hidden;isolation:isolate}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;background:#080e1c}
.hero-film:after{background:linear-gradient(90deg,#050b18e8 0%,#07101fbd 27%,#050c1825 61%,#070d1708),linear-gradient(0deg,#060913c9,transparent 30%)}
.hero-film>.hero-copy{padding:30px 6%;width:57%;max-width:900px}
.hero-film h1{font-size:clamp(54px,5.5vw,84px)}
.hero-film .hero-caption{font-size:8px;bottom:34px}
.hero-film .scroll-cue{bottom:34px}
.hero-film>.film-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;padding:0;background:#ffffff0c;overflow:hidden}
.film-progress>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#dec18b,#a895ff);transform:scaleX(0);transform-origin:left}
.film-static{height:var(--film-height)}.film-static>.hero-film{position:relative;top:0}
.film-static .film-progress,.film-static .scroll-cue{display:none}
@media(max-width:800px){
 .hero-scroll{--film-top:94px;--film-height:750px;--film-distance:1300px}
 .hero-scroll>.hero-film{align-items:flex-start}
 .hero-film>.hero-copy{padding:32px 6% 260px;width:100%;max-width:none}
 .hero-film h1{font-size:clamp(42px,12.8vw,58px);margin:22px 0}
 .hero-film p{font-size:12px;line-height:1.65;margin-bottom:0}
 .hero-film .actions{margin-top:20px}.hero-film .button{font-size:10px;padding:11px 13px}
 .hero-film .hero-footnote{font-size:8px;margin-top:18px}
 .hero-video{top:auto;bottom:0;height:53%;object-position:center}
 .hero-film:after{background:linear-gradient(0deg,#060913c9 0%,transparent 17%,#060d1805 33%,#070e1caa 51%,#080e1c 70%)}
 .hero-film>.hero-caption{font-size:6px;right:6%;bottom:25px;max-width:170px}.hero-caption strong{font-size:9px}
 .hero-film>.scroll-cue{font-size:7px;bottom:25px}.hero-film .hero-index{display:none}
}
@media(max-height:670px) and (min-width:801px){.hero-film h1{font-size:55px}.hero-film .hero-copy{padding-top:20px;padding-bottom:30px}.hero-film .hero-footnote{margin-top:16px}.hero-film .hero-index{top:20px}.hero-film .hero-caption,.hero-film .scroll-cue{bottom:20px}}
