/* Full-bleed films lead the experience; products follow the final chapter. */
:root{--header-h:82px;--film-height:calc(100svh - var(--header-h))}
.header{height:var(--header-h);background:var(--cream)}
.header .brand img{max-height:59px;width:148px}
.announcement{min-height:30px;font-size:9px}
html{scroll-padding-top:var(--header-h)}
.film-journey{position:relative;background:var(--green)}
.chapter-anchor{position:absolute;top:calc(var(--chapter-index)*var(--film-height));pointer-events:none}
.film-stage{position:relative;overflow:hidden;background:var(--green)}
.film-panel{height:var(--film-height);min-height:580px;position:relative;overflow:hidden;color:var(--cream);isolation:isolate}
.film-background,.film-shade{position:absolute;inset:0;z-index:-1}
.film-background{overflow:hidden;background:var(--green)}
.film-shade,.film-signature{pointer-events:none}
.chapter-video{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);will-change:transform}
.film-shade{background:linear-gradient(90deg,color-mix(in srgb,var(--green) 92%,transparent) 0%,color-mix(in srgb,var(--green) 72%,transparent) 27%,color-mix(in srgb,var(--green) 22%,transparent) 58%,transparent 85%),linear-gradient(0deg,color-mix(in srgb,var(--green) 76%,transparent),transparent 28%)}
.chapter-copy{position:absolute;left:6%;top:45%;transform:translateY(-50%);width:min(52%,770px);z-index:2}
.chapter-copy .eyebrow{color:var(--yellow);letter-spacing:.17em;font-size:11px;font-weight:700;margin-bottom:28px}
.chapter-number{border:1px solid color-mix(in srgb,var(--yellow) 60%,transparent);border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:0}
.chapter-copy h1,.chapter-copy h2{font-size:clamp(58px,6.3vw,100px);line-height:1.03;font-weight:750;letter-spacing:-.055em;text-wrap:balance}
.chapter-copy h1 em,.chapter-copy h2 em{color:var(--yellow);line-height:1.1;font-weight:400}
.chapter-description{font-size:17px;line-height:1.7;max-width:440px;margin:27px 0 29px;text-wrap:pretty}
.chapter-copy .button{font-size:14px;padding:15px 24px;gap:30px}
.film-signature{position:absolute;right:5%;top:38px;writing-mode:vertical-rl;font-size:10px;letter-spacing:.12em;display:flex;align-items:center;gap:18px;color:var(--cream);text-shadow:0 1px 10px var(--green)}
.film-signature>span{font-size:37px;color:var(--yellow)}
.film-bottom{display:none}
.film-journey.enhanced{height:calc((var(--chapters) + 1)*var(--film-height))}
.enhanced .film-stage{position:sticky;top:var(--header-h);height:var(--film-height);min-height:580px}
.enhanced .film-panel{position:absolute;inset:0;height:100%;min-height:0;opacity:0;pointer-events:none;will-change:opacity;z-index:1}
.enhanced .film-panel.is-current{pointer-events:auto;z-index:2}
.enhanced .film-bottom{position:absolute;bottom:28px;left:6%;right:5%;display:flex;gap:7%;align-items:end;justify-content:space-between;z-index:5;color:var(--cream)}
.chapter-navigation{display:flex;gap:22px;flex:1;max-width:760px}
.chapter-link{flex:1;min-width:0;opacity:.58;transition:opacity .3s}
.chapter-link:hover,.chapter-link.is-active{opacity:1}
.chapter-track{height:2px;background:color-mix(in srgb,var(--cream) 38%,transparent);display:block;overflow:hidden;margin-bottom:13px}
.chapter-track i{display:block;height:100%;width:0;background:var(--yellow);transition:width .18s linear}
.chapter-link-label{font-size:11px;display:flex;gap:12px;align-items:center;white-space:nowrap;letter-spacing:.01em}
.chapter-link-label b{font-size:9px;color:var(--yellow);font-weight:500}
.film-actions{display:flex;gap:23px;align-items:center}
.film-scroll-cue{font-size:9px;letter-spacing:.14em;display:flex;gap:15px;align-items:center;white-space:nowrap}
.film-scroll-cue>span{font-size:22px}
#journey-play{width:42px;height:42px;border-radius:50%;color:var(--cream);border:1px solid color-mix(in srgb,var(--cream) 65%,transparent);background:transparent;font-size:17px;line-height:1}
#journey-play:hover{color:var(--green);background:var(--yellow);border-color:var(--yellow)}
.film-panel:not(.is-current) .chapter-copy{pointer-events:none}
.film-journey:not(.enhanced) .film-panel .chapter-copy{pointer-events:auto}
.film-journey:not(.enhanced) .chapter-anchor{position:static}
.film-journey:not(.enhanced) .chapter-video{transform:none}
.film-journey:not(.enhanced) .chapter-copy{top:40%}
.film-journey:not(.enhanced) .chapter-video[controls]{position:relative;z-index:1}
.ticker{padding:15px 5%;font-size:20px;gap:30px;background:var(--yellow);color:var(--green)}
.ticker b{font-size:26px}
@media(min-width:1600px){.chapter-copy{left:max(6%,calc((100vw - 1450px)/2))}}
@media(max-width:1050px){.chapter-copy{width:58%;left:5%}.chapter-copy h1,.chapter-copy h2{font-size:clamp(55px,6.5vw,76px)}.chapter-navigation{gap:13px}.film-scroll-cue{display:none}.film-bottom{gap:25px!important}.chapter-link-label{font-size:10px;gap:6px}.chapter-description{max-width:370px;font-size:16px}}
@media(max-width:760px){:root{--header-h:72px}.announcement{font-size:7px;letter-spacing:.06em}.header .brand img{width:122px;max-height:52px}.header nav{top:72px}.film-panel,.enhanced .film-stage{min-height:570px}.chapter-copy{left:6%;width:88%;top:auto;bottom:120px;transform:none}.chapter-copy h1,.chapter-copy h2{font-size:clamp(45px,10.7vw,65px);line-height:1.04;max-width:550px}.chapter-copy h1 em,.chapter-copy h2 em{line-height:1.07}.chapter-copy .eyebrow{font-size:9px;margin-bottom:18px;letter-spacing:.1em}.chapter-number{height:26px;width:26px;font-size:8px}.chapter-description{font-size:14px;line-height:1.65;max-width:350px;margin:20px 0 22px}.chapter-copy .button{font-size:12px;padding:13px 20px}.film-shade{background:linear-gradient(0deg,color-mix(in srgb,var(--green) 97%,transparent) 0%,color-mix(in srgb,var(--green) 80%,transparent) 33%,color-mix(in srgb,var(--green) 18%,transparent) 76%,transparent)}.chapter-video{object-position:62% center}.film-signature{top:25px;right:6%;font-size:8px;gap:10px}.film-signature>span{font-size:27px}.enhanced .film-bottom{bottom:25px;left:6%;right:6%;align-items:center;gap:18px!important}.chapter-navigation{gap:10px}.chapter-link-label{font-size:0;justify-content:space-between;min-height:13px}.chapter-link-label b{font-size:10px}.chapter-link.is-active .chapter-link-label{font-size:9px}.chapter-link{flex:1}.chapter-link.is-active{flex:2.6}.chapter-track{margin-bottom:10px}.film-actions{gap:0}#journey-play{height:36px;width:36px;font-size:14px}.film-journey:not(.enhanced) .chapter-copy{top:auto;bottom:90px}.film-journey:not(.enhanced) .film-panel{height:100svh}.ticker{font-size:17px}}
@media(max-height:650px) and (min-width:761px){.chapter-copy{top:43%;}.chapter-copy h1,.chapter-copy h2{font-size:55px}.chapter-copy .eyebrow{margin-bottom:15px}.chapter-description{margin:15px 0 20px;font-size:15px}.enhanced .film-stage,.film-panel{min-height:490px}}
@media(prefers-reduced-motion:reduce){.chapter-video{transform:none!important}}

/* Native touch scrolling drives the same chapter progress as desktop scrolling. */
.film-journey{touch-action:pan-y pinch-zoom}
@media(max-width:760px){
 :root{--film-height:calc(100svh - var(--header-h) - 30px)}
 .film-panel,.enhanced .film-stage{min-height:560px}
 .film-background{height:58%;bottom:auto}
 .chapter-video{object-position:center;transform:scale(1.015)}
 .film-journey .film-shade{background:linear-gradient(0deg,var(--green) 0%,var(--green) 40%,color-mix(in srgb,var(--green) 88%,transparent) 51%,color-mix(in srgb,var(--green) 15%,transparent) 74%,transparent 100%)}
 .chapter-copy{left:6%;width:88%;bottom:96px}
 .chapter-copy h1,.chapter-copy h2{font-size:clamp(38px,9.6vw,62px);line-height:1.06}
 .chapter-copy .eyebrow{margin-bottom:14px;font-size:9px;line-height:1.5}
 .chapter-copy .chapter-description{font-size:15px;line-height:1.6;margin:16px 0 20px;max-width:40ch}
 .chapter-copy .button{font-size:13px;min-height:46px;padding:12px 20px}
 .enhanced .film-bottom{bottom:max(14px,env(safe-area-inset-bottom));gap:12px!important}
 .chapter-navigation{gap:9px}.chapter-link{min-height:44px;padding-top:7px}
 .chapter-link-label{white-space:normal;line-height:1.3;align-items:start;gap:5px}
 #journey-play{width:44px;height:44px;flex-shrink:0}
 .film-journey:not(.enhanced) .chapter-copy{bottom:40px}
}
@media(max-width:760px) and (max-height:700px){
 .chapter-copy{bottom:84px}.chapter-copy h1,.chapter-copy h2{font-size:clamp(35px,9vw,50px)}
 .chapter-copy .eyebrow{margin-bottom:10px}.chapter-copy .chapter-description{font-size:14px;margin:12px 0 16px}
}