/* Homepage chapters. */

/* 01 Statement */
.statement-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:40px}
.statement .eyebrow{grid-column:1/span 3;align-self:start;padding-top:1.2em}
.statement-title{grid-column:4/-1;font-size:clamp(46px,7.2vw,128px)}
.statement-text{grid-column:4/-1;margin-top:clamp(24px,4vw,56px);font-size:clamp(24px,2.6vw,42px);line-height:1.2;letter-spacing:-.03em}
.statement-text em{color:var(--slate)}
.statement-aside{grid-column:4/-1;display:grid;grid-template-columns:minmax(120px,220px) minmax(0,44ch) auto;gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(32px,5vw,80px);padding-top:40px;border-top:1px solid var(--line)}
.statement-aside img{width:100%;opacity:.9}
.statement-aside p{color:var(--muted);font-size:15.5px;line-height:1.8}
@media(max-width:1100px){.statement-aside{grid-template-columns:120px 1fr}.statement-aside .btn-row{grid-column:1/-1}}
@media(max-width:900px){.statement .eyebrow,.statement-title,.statement-text,.statement-aside{grid-column:1/-1}}

/* Logos */
.logos{padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--line);overflow:hidden}
.logos-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 48px;margin-bottom:clamp(40px,5vw,64px)}
.logos-head h2{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.03em}
.logos-head p{max-width:42ch;color:var(--muted);font-size:15px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 42s linear infinite}
.marquee img{height:clamp(44px,4.4vw,64px);width:auto;max-width:190px;margin-right:clamp(56px,7vw,120px);object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.62;mix-blend-mode:multiply;transition:opacity .4s ease,filter .4s ease}
.marquee img:hover{opacity:1;filter:none}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:32px;padding-inline:var(--gutter)}.marquee{-webkit-mask-image:none;mask-image:none}.marquee img[aria-hidden]{display:none}}

/* 02 Benefits */
.benefit-list{border-top:1px solid var(--line-strong)}
.benefit-row{position:relative;isolation:isolate;display:grid;grid-template-columns:72px minmax(0,1.15fr) minmax(0,1fr) 48px;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(28px,3.6vw,52px) clamp(12px,2vw,28px);border-bottom:1px solid var(--line-strong);transition:color .6s var(--ease-out)}
.benefit-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);transform:scaleY(0);transform-origin:bottom;transition:transform .75s var(--ease-io)}
.benefit-row:hover::before,.benefit-row:focus-visible::before{transform:none;transform-origin:top}
.benefit-row:hover,.benefit-row:focus-visible{color:var(--mist)}
.benefit-row h3{font-size:clamp(28px,3.5vw,58px);line-height:1.04;letter-spacing:-.045em;transition:transform .75s var(--ease-out)}
.benefit-row:hover h3,.benefit-row:focus-visible h3{transform:translateX(14px)}
.benefit-row p{color:var(--muted);max-width:34ch;transition:color .6s ease}
.benefit-row:hover p,.benefit-row:focus-visible p{color:#c4d0da}
.benefit-row:hover .index-num,.benefit-row:focus-visible .index-num{color:var(--teal-glow)}
.benefit-arrow{justify-self:end;font-size:30px;line-height:1;transition:transform .6s var(--ease-out)}
.benefit-row:hover .benefit-arrow{transform:translate(4px,-4px) rotate(0)}
.preview-float{position:fixed;left:0;top:0;z-index:60;width:clamp(240px,21vw,340px);aspect-ratio:4/5;overflow:hidden;pointer-events:none;opacity:0;scale:.7;transform:translate(calc(var(--x,0px) - 50%),calc(var(--y,0px) - 50%));transition:opacity .45s ease,scale .7s var(--ease-out);background:var(--navy)}
.preview-float.is-visible{opacity:1;scale:1}
.preview-float img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.2s var(--ease-out)}
.preview-float.is-visible img{transform:none}
@media(hover:none),(pointer:coarse){.preview-float{display:none}}
@media(max-width:760px){.benefit-row{grid-template-columns:44px 1fr 32px;row-gap:10px}.benefit-row p{grid-column:2/3}.benefit-arrow{grid-row:1;grid-column:3}}

/* 03 Audience */
.audience-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:clamp(32px,4vw,56px);border-top:1px solid var(--line-strong)}
.audience-tabs [role=tab]{position:relative;display:flex;align-items:baseline;gap:16px;min-height:72px;padding:22px 24px 22px 0;text-align:left;font-size:clamp(18px,1.7vw,26px);letter-spacing:-.025em;color:var(--muted);transition:color .4s ease}
.audience-tabs [role=tab]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.audience-tabs [role=tab]:hover{color:var(--ink)}
.audience-tabs [role=tab][aria-selected=true]{color:var(--ink)}
.audience-tabs [role=tab][aria-selected=true]::before{transform:none}
.audience-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.audience-panel:focus-visible{outline-offset:8px}
.audience-panel:not([hidden]){animation:panel-in .9s var(--ease-out)}
.audience-panel:not([hidden]) .audience-media img{animation:kenburns 2.2s var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:translateY(18px)}}
@keyframes kenburns{from{transform:scale(1.14)}}
.audience-media{margin:0;aspect-ratio:16/11}
.media--particles{background:var(--navy)}
.media--particles img{object-fit:contain!important;transform:scale(1.15)}
.audience-cards{display:grid;grid-template-rows:1fr 1fr;border-top:1px solid var(--line-strong)}
.audience-cards article{display:grid;align-content:space-between;gap:20px;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line-strong)}
.audience-cards p{color:var(--muted);max-width:40ch;margin-top:14px}
@media(max-width:900px){.audience-panel{grid-template-columns:1fr}.audience-tabs{grid-template-columns:1fr}.audience-tabs [role=tab]{min-height:60px;padding:16px 0;border-bottom:1px solid var(--line)}.audience-tabs [role=tab]::before{top:auto;bottom:-1px}}

/* 04 Feature — the film expands to full bleed as it is scrolled into place. */
.feature{position:relative}
.feature-stage{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden}
html.motion-ready .feature{height:230svh}
html.motion-ready .feature-stage{position:sticky;top:0;height:100svh}
.feature-media{position:absolute;inset:0;background:var(--navy);clip-path:inset(var(--clip-y,0%) var(--clip-x,0%));will-change:clip-path}
.feature-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;transform:scale(var(--media-scale,1))}
@media(min-width:901px){.feature-video{left:18%}}
.feature-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,0) 72%)}
.feature-copy{position:relative;z-index:2;display:grid;gap:28px;justify-items:start;opacity:var(--copy-o,1);transform:translateY(var(--copy-y,0px))}
.feature-copy .h2{max-width:11ch}
.feature-copy .lead{max-width:38em}
@media(max-width:760px){.feature-shade{background:linear-gradient(0deg,rgba(0,0,0,.95) 20%,rgba(0,0,0,.35) 100%)}.feature-stage{align-items:end;padding-bottom:64px}}

/* 05 Process — horizontal sequence when pinned, a grid otherwise. */
.process{position:relative;background:var(--paper);padding-block:var(--section-y);overflow:hidden}
.process-head{display:grid;gap:24px;margin-bottom:clamp(48px,5vw,72px)}
.process-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.process-card{position:relative;display:grid;align-content:start;gap:18px;padding:clamp(22px,2.2vw,32px);border:1px solid var(--line);background:var(--paper);transition:border-color .5s ease,background-color .5s ease}
.process-card:hover{border-color:var(--line-strong);background:var(--wash)}
.process-card-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.process-step{font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.process-card img{width:62%;max-width:230px;margin:16px 0 4px;transition:transform 1s var(--ease-out)}
.process-card:hover img{transform:translateY(-6px)}
.process-card p{color:var(--muted);font-size:15px}
.process-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;margin-top:40px}
.process-foot p{color:var(--muted);font-size:14px}
.process-progress{display:none;position:relative;flex:0 0 min(40%,420px);height:1px;background:var(--line)}
.process-progress span{position:absolute;inset:0;background:var(--navy);transform-origin:left;transform:scaleX(var(--p,0))}
.process.is-pinned{padding-block:0}
.process.is-pinned .process-pin{height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--header-h) + 12px) 28px}
.process.is-pinned .process-head{margin-bottom:clamp(28px,3.5vw,48px)}
.process.is-pinned .process-track{display:flex;width:max-content;max-width:none;margin:0;gap:24px;will-change:transform}
.process.is-pinned .process-card{width:clamp(360px,31vw,500px);flex:none}
.process.is-pinned .process-progress{display:block}
@media(max-height:820px){.process.is-pinned .process-card img{width:40%;margin-block:4px 0}.process.is-pinned .process-head .h2{font-size:clamp(34px,3.6vw,56px)}}
@media(max-width:1100px){.process-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.process-track{grid-template-columns:1fr}}