/* Full-bleed, viewport-sized four-scene introduction. */
.cinema-hero{position:relative;width:100%;max-width:none;height:calc(100svh - 76px);min-height:560px;aspect-ratio:auto;overflow:hidden;background:#0c0c13;isolation:isolate}
.cinema-hero .cinema-slide{position:absolute;inset:0;margin:0;overflow:hidden}
.cinema-slide:after{display:none}
.cinema-slide picture{display:block;position:absolute;inset:0}
.cinema-hero .cinema-slide picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.cinema-slide picture:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#070b13b8 0%,#070b1360 34%,transparent 65%),linear-gradient(0deg,#070b1390,transparent 30%)}
.cinema-copy{position:absolute;z-index:2;left:6vw;top:50%;transform:translateY(-50%);width:52%;color:white;text-shadow:0 3px 30px #0005}
.cinema-kicker{font-size:clamp(12px,1vw,20px);letter-spacing:.13em;font-weight:600;margin:0 0 25px;color:#f2eee8}
.cinema-copy h1,.cinema-copy h2{font-size:clamp(40px,4.3vw,112px);line-height:1.2;letter-spacing:-.055em;font-weight:800;margin:0;word-break:keep-all}
.cinema-copy em{font-style:normal;color:#c5f58d}
.cinema-copy .cinema-sub{font-size:clamp(18px,1.6vw,34px);line-height:1.65;margin:30px 0 0;color:#fff;word-break:keep-all}
.cinema-hero .hero-slide-controls{left:6vw;bottom:34px;z-index:5;gap:12px}
.cinema-hero .hero-slide-controls button{width:38px;height:38px;background:#0a0c1350}
.cinema-hero .hero-slide-controls button.is-active{background:#b8f16b;color:#162008}
.cinema-scroll{position:absolute;z-index:5;bottom:38px;right:6vw;color:#fff;text-decoration:none;font-size:14px;letter-spacing:.06em;display:flex;align-items:center;gap:20px}
.cinema-scroll span{font-size:24px}
.cinema-proof{background:radial-gradient(ellipse at 90% 30%,#3b3148,#11121c 70%)}
.cinema-hero .cinema-proof .proof-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;filter:blur(3px);mask-image:linear-gradient(90deg,transparent,#000)}
.cinema-proof .cinema-copy{width:43%}
.cinema-proof .cinema-copy h2{font-size:clamp(36px,3.6vw,92px)}
.cinema-period{margin-top:28px;font-size:clamp(12px,.9vw,20px);letter-spacing:.12em;color:#d0c7db}
.cinema-evidence{position:absolute;right:4vw;top:50%;transform:translateY(-50%);width:48%;z-index:1;box-shadow:0 35px 100px #0006;border:1px solid #ffffff25;background:#111118}
.evidence-topline{padding:12px 18px;color:#f0e9f8;display:flex;align-items:center;gap:9px;font-size:14px;background:#282331}
.evidence-topline i{width:6px;height:6px;background:#ef8297;border-radius:50%}.evidence-topline span{margin-left:auto}
.cinema-hero .cinema-evidence img{display:block;width:100%;height:auto;object-fit:contain}
.cinema-hero .cinema-evidence .cinema-filmstrip{border-top:8px solid #111118}
.cinema-no{background:radial-gradient(ellipse at 75% 100%,#44304e 0%,#201726 38%,#0e0d15 80%)}
.no-atmosphere{position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 16%,#dfc3ef08 16.1%,transparent 16.2% 32%)}
.cinema-no .cinema-copy{top:12%;transform:none;width:88%;text-align:center}
.cinema-no .cinema-copy h2{font-size:clamp(34px,3.1vw,80px)}
.cinema-three{position:absolute;inset:43% 6vw 15%;display:grid;grid-template-columns:repeat(3,1fr);color:white;text-align:center}
.cinema-three>div{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;border-right:1px solid #ffffff20}
.cinema-three>div:last-child{border-right:0}.no-index{font-size:14px;color:#b4a2bf;letter-spacing:.15em;margin-bottom:10px}
.cinema-three p{font-size:clamp(22px,2vw,50px);margin:0;line-height:1.3;font-weight:600}.cinema-three small{position:absolute;top:0;font-size:clamp(11px,.9vw,20px);color:#cfbfd7}
.cinema-three b{font-size:clamp(80px,9vw,220px);font-family:Georgia,serif;line-height:1.15;font-weight:400;letter-spacing:-.06em;color:#c5f58d;text-shadow:0 5px 55px #b8f16b28}
.cinema-intro{max-width:1400px}.cinema-intro .hero-final{display:grid;grid-template-columns:1fr 1fr;gap:20px 60px}.cinema-intro .hero-final h2{font-size:clamp(28px,2.6vw,44px);grid-column:1;grid-row:1/3;margin:0}.cinema-intro .full-auto-intro{margin:0}.cinema-intro .hero-feature-cards{grid-column:1/-1;margin:10px 0 0}.cinema-intro .hero-discover{grid-column:1/-1}.cinema-intro .hero-phone{margin-top:20px}.cinema-intro .story-note{font-size:14px;color:#aaa4b2;line-height:1.8}
@media(min-aspect-ratio:24/9){.cinema-copy h1,.cinema-copy h2{font-size:min(4.3vw,12vh)}.cinema-copy .cinema-sub{font-size:min(1.6vw,4vh)}.cinema-proof .cinema-copy h2{font-size:min(3.6vw,11vh)}.cinema-evidence{width:min(47vw,100vh);right:8vw}.cinema-no .cinema-copy h2{font-size:min(3.1vw,9vh)}.cinema-three b{font-size:min(9vw,25vh)}.cinema-three p{font-size:min(2vw,5vh)}}
@media(max-width:1000px) and (min-width:701px){.cinema-copy{left:5vw;width:65%}.cinema-copy h1,.cinema-copy h2{font-size:46px}.cinema-proof .cinema-copy{width:42%}.cinema-proof .cinema-copy h2{font-size:33px}.cinema-proof .cinema-sub{font-size:22px}}
@media(max-width:700px){.cinema-hero{height:calc(100svh - 66px);min-height:620px}.cinema-copy{left:7%;width:86%;top:10%;transform:none}.cinema-copy h1,.cinema-copy h2{font-size:clamp(30px,7.5vw,48px)}.cinema-kicker{font-size:14px;letter-spacing:.06em;margin-bottom:17px}.cinema-copy .cinema-sub{font-size:17px;margin-top:19px}.cinema-slide picture:after{background:linear-gradient(180deg,#080b13a8,transparent 65%),linear-gradient(0deg,#080b13a8,transparent 25%)}.cinema-hero .cinema-slide picture img{object-position:center}.cinema-hero .hero-slide-controls{left:7%;bottom:27px;gap:8px}.cinema-hero .hero-slide-controls button{width:30px;height:30px;font-size:14px}.cinema-scroll{right:7%;bottom:27px;font-size:14px;gap:7px}.cinema-scroll span{font-size:20px}.cinema-proof .cinema-copy{width:86%;top:7%}.cinema-proof .cinema-copy h2{font-size:32px}.cinema-proof .cinema-sub{font-size:21px;margin-top:14px}.cinema-period{margin-top:12px;font-size:14px}.cinema-evidence{width:86%;right:7%;top:auto;bottom:100px;transform:none}.evidence-topline{font-size:14px;padding:7px 10px}.cinema-no .cinema-copy{top:8%;text-align:left}.cinema-no .cinema-copy h2{font-size:30px}.cinema-three{inset:35% 7% 15%;display:flex;flex-direction:column;gap:10px}.cinema-three>div{flex:1;display:grid;grid-template-columns:24px 1fr 90px;border-right:0;border-bottom:1px solid #ffffff20;text-align:left;gap:12px}.cinema-three>div:last-child{border-bottom:0}.no-index{margin:0;font-size:14px}.cinema-three p{font-size:22px}.cinema-three b{font-size:64px}.cinema-three small{top:4px;left:36px;font-size:14px}.cinema-intro .hero-final{display:block}.cinema-intro .hero-final h2{margin-bottom:24px}.cinema-intro .hero-feature-cards{margin-top:24px}}

/* Keep photographic drift alive through the exit to avoid a scale reset between scenes. */
.cinema-hero .cinema-slide{transition:none;opacity:0;z-index:0}
.cinema-hero .cinema-slide.is-leaving{opacity:1;z-index:1;pointer-events:none;animation:cinema-depart 1.35s cubic-bezier(.22,.61,.36,1) both}
.cinema-hero .cinema-slide.is-active{opacity:1;z-index:2;animation:cinema-reveal 1.35s cubic-bezier(.76,0,.24,1) both}
.cinema-hero .cinema-slide:is(.is-active,.is-leaving) picture img{animation:cinema-drift 8.4s ease-out both;transform-origin:65% 50%}
.cinema-hero.is-paused .cinema-slide:is(.is-active,.is-leaving) picture img{animation-play-state:paused}
@keyframes cinema-reveal{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes cinema-depart{from{transform:translateX(0)}to{transform:translateX(-2%)}}
@keyframes cinema-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.cinema-hero .cinema-slide.is-active,.cinema-hero .cinema-slide.is-leaving,.cinema-hero .cinema-slide:is(.is-active,.is-leaving) picture img{animation:none;transform:none;clip-path:none}}

/* v176: clear comparison and readable qualifier, without item numbers. */
.cinema-three small{font-size:clamp(18px,1.5vw,34px);color:#f0e8f5;font-weight:600;top:2%}
@media(min-aspect-ratio:24/9){.cinema-three small{font-size:min(1.5vw,4vh)}}
@media(max-width:700px){.cinema-three>div{grid-template-columns:1fr 90px;gap:12px}.cinema-three small{font-size:16px;left:0;top:0}.cinema-no .cinema-copy h2{font-size:clamp(26px,7vw,30px)}}

/* v177: larger original frame and a fast leaf-through of real archive thumbnails. */
.cinema-proof .cinema-copy{width:37%;left:5vw}
.cinema-proof .cinema-copy h2{font-size:clamp(34px,3.25vw,86px)}
.cinema-evidence{width:55%;right:2.5vw}

.archive-gallery{padding:14px 0 0;background:linear-gradient(115deg,#221d2d,#12131b);overflow:hidden}
.archive-gallery-label{display:flex;align-items:center;justify-content:space-between;padding:0 22px 12px;gap:16px;font-size:clamp(11px,.95vw,19px);color:#c8bbd3}
.archive-gallery-label strong{font-weight:650;color:#f6f0fb}
.archive-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.archive-track{display:flex;width:max-content;gap:12px;padding:0 12px 12px}
.archive-record-group{display:flex;gap:12px}
.archive-record{position:relative;width:clamp(130px,11vw,210px);aspect-ratio:1/1;flex:none;overflow:hidden;border:1px solid #ffffff20;border-radius:5px;background:#0f0f0f;box-shadow:0 5px 12px #0003}
.cinema-hero .cinema-evidence .archive-record img{position:absolute;width:653.333%;height:auto;max-width:none;left:var(--crop-left);top:-33.333%}
.cinema-proof.is-active .archive-track{animation:archive-flow 18s linear infinite}
.cinema-hero.is-paused .archive-track{animation-play-state:paused}
@keyframes archive-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* A distinct entrance for each scene, with a shared quiet exit. */
.cinema-hero .cinema-slide.is-leaving{animation:cinema-soft-exit 1.35s ease both}
.cinema-hero .cinema-family.is-active{animation:cinema-arrive 1.6s cubic-bezier(.2,.65,.3,1) both}
.cinema-hero .cinema-proof.is-active{animation:cinema-rise 1.35s cubic-bezier(.76,0,.24,1) both}
.cinema-hero .cinema-auto.is-active{animation:cinema-reveal 1.35s cubic-bezier(.76,0,.24,1) both}
.cinema-hero .cinema-no.is-active{animation:cinema-iris 1.4s cubic-bezier(.65,0,.25,1) both}
@keyframes cinema-soft-exit{from{opacity:1}to{opacity:.4}}
@keyframes cinema-arrive{from{opacity:0;transform:scale(1.065);filter:blur(4px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes cinema-rise{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes cinema-iris{from{clip-path:ellipse(0% 80% at 50% 50%)}to{clip-path:ellipse(80% 100% at 50% 50%)}}
@media(min-aspect-ratio:24/9){.cinema-evidence{width:min(55vw,113vh);right:3.5vw}.cinema-proof .cinema-copy h2{font-size:min(3.25vw,10vh)}.archive-record{width:min(11vw,19vh)}}
@media(max-width:1000px) and (min-width:701px){.cinema-proof .cinema-copy h2{font-size:30px}.archive-record{width:110px}}
@media(max-width:700px){.cinema-proof .cinema-copy{width:86%;left:7%;top:6%}.cinema-proof .cinema-copy h2{font-size:30px}.cinema-proof .cinema-sub{font-size:19px}.cinema-evidence{width:92%;right:4%;bottom:85px}.archive-gallery{padding-top:9px}.archive-gallery-label{font-size:14px;padding:0 12px 8px;gap:8px}.archive-record{width:100px}.archive-track,.archive-record-group{gap:8px}.archive-track{padding:0 8px 8px}}
@media(max-width:700px) and (max-height:780px){.cinema-hero{min-height:710px}}
@media(prefers-reduced-motion:reduce){.cinema-hero .cinema-slide.is-active,.cinema-hero .cinema-slide.is-leaving,.cinema-proof.is-active .archive-track{animation:none;transform:none;filter:none;clip-path:none}}

/* Give the archive statement equal emphasis so scene two reads as a complete thought. */
.cinema-proof .cinema-copy .cinema-sub{font-size:clamp(34px,3.25vw,86px);font-weight:800;line-height:1.2;letter-spacing:-.055em;margin-top:18px}
@media(min-aspect-ratio:24/9){.cinema-proof .cinema-copy .cinema-sub{font-size:min(3.25vw,10vh)}}
@media(max-width:1000px) and (min-width:701px){.cinema-proof .cinema-copy .cinema-sub{font-size:30px}}
@media(max-width:700px){.cinema-proof .cinema-copy h2,.cinema-proof .cinema-copy .cinema-sub{font-size:clamp(24px,6.8vw,30px)}.cinema-proof .cinema-copy .cinema-sub{margin-top:14px}}

/* Modestly enlarge the family and Full Auto supporting copy below the title hierarchy. */
.cinema-family .cinema-copy .cinema-sub,.cinema-auto .cinema-copy .cinema-sub{font-size:clamp(22px,2vw,42px);font-weight:600;line-height:1.5;margin-top:30px}
@media(min-aspect-ratio:24/9){.cinema-family .cinema-copy .cinema-sub,.cinema-auto .cinema-copy .cinema-sub{font-size:min(2vw,5vh)}}
@media(max-width:700px){.cinema-family .cinema-copy .cinema-sub,.cinema-auto .cinema-copy .cinema-sub{font-size:20px;margin-top:19px}}

/* Scene four continues the photographic story and explains each difference. */
.cinema-no .cinema-copy{left:6vw;top:50%;transform:translateY(-50%);width:51%;text-align:left}
.cinema-no .cinema-copy h2{font-size:clamp(34px,3.6vw,88px)}
.cinema-no picture:after{background:linear-gradient(90deg,#080b13b8 0%,#080b1360 43%,transparent 76%),linear-gradient(0deg,#080b1380,transparent 25%)}
.cinema-differences{list-style:none;padding:0;margin:clamp(24px,3vh,40px) 0 0;display:grid;gap:clamp(14px,2.2vh,25px);max-width:720px}
.cinema-differences li{padding-left:18px;border-left:2px solid #c5f58d99}
.cinema-differences li{display:block;font-size:clamp(20px,1.65vw,38px);font-weight:400;line-height:1.35;letter-spacing:-.035em;color:#f7f8f5;word-break:keep-all}
.cinema-differences span{display:block;margin-top:5px;font-size:clamp(15px,1.15vw,25px);line-height:1.5;color:#e1ded7;word-break:keep-all}
@media(min-aspect-ratio:24/9){.cinema-no .cinema-copy h2{font-size:min(3.6vw,10vh)}.cinema-differences{margin-top:3vh;gap:2vh}.cinema-differences li{font-size:min(1.65vw,4.5vh)}.cinema-differences span{font-size:min(1.15vw,3.2vh)}}
@media(max-width:1000px) and (min-width:701px){.cinema-no .cinema-copy{width:58%;left:5vw}.cinema-no .cinema-copy h2{font-size:36px}.cinema-differences li{font-size:20px}.cinema-differences span{font-size:15px}}
@media(max-width:700px){.cinema-no .cinema-copy{left:7%;top:8%;width:86%;transform:none}.cinema-no .cinema-copy h2{font-size:clamp(28px,7.2vw,40px)}.cinema-hero .cinema-no picture img{object-position:75% 50%}.cinema-no picture:after{background:linear-gradient(180deg,#080b13eb 0%,#080b13c9 40%,#080b1340 75%,#080b1380)}.cinema-differences{margin-top:27px;gap:20px}.cinema-differences li{padding-left:12px}.cinema-differences li{font-size:18px}.cinema-differences span{font-size:14px;margin-top:4px}}

/* Highlight only the three comparison keywords. */
.cinema-differences li strong{font:inherit;font-weight:800;color:#c5f58d}

/* Lead scene two with the theme, then the supporting record and footage. */
.evidence-frame{position:relative}
.cinema-proof .proof-theme{margin:0 0 26px;color:#fff;font-size:clamp(64px,6.4vw,160px);font-weight:900;line-height:1;letter-spacing:-.055em;white-space:nowrap}
.cinema-proof .proof-theme strong{color:#c5f58d;font-weight:900;margin-left:.08em}
@media(min-aspect-ratio:24/9){.cinema-proof .proof-theme{font-size:min(6.4vw,18vh);margin-bottom:3vh}}
@media(max-width:1000px) and (min-width:701px){.cinema-proof .proof-theme{font-size:64px;margin-bottom:22px}}
@media(max-width:700px){
 .cinema-hero .cinema-proof{display:flex;flex-direction:column;padding:28px 4% 85px;gap:20px}
 .cinema-proof .cinema-copy{position:relative;left:auto;top:auto;transform:none;width:100%;padding:0 3%;flex:none}
 .cinema-proof .proof-theme{font-size:clamp(46px,12vw,64px);margin-bottom:16px}
 .cinema-proof .cinema-evidence{position:relative;inset:auto;transform:none;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}
 .cinema-proof .evidence-frame{flex:1;min-height:0}
 .cinema-hero .cinema-proof .evidence-frame img{width:100%;height:100%;object-fit:contain}
 .cinema-proof .evidence-topline,.cinema-proof .archive-gallery{flex:none}
}

/* Emphasize the promise in the first scene without changing its scale. */
.cinema-family .cinema-sub .freedom-highlight{font:inherit;font-weight:800;color:#c5f58d}

/* Keep the relaxed driver visible above the mobile copy. */
@media(max-width:700px){
 .cinema-auto .cinema-copy{top:auto;bottom:100px;transform:none}
 .cinema-auto picture:after{background:linear-gradient(180deg,#080b1326 0%,transparent 35%,#080b1373 58%,#080b13d9 100%)}
}

/* Identify the video archive with one YouTube mark. */
.archive-gallery-label strong{display:inline-flex;align-items:center;gap:8px}
.archive-youtube-logo{display:block;width:28px;height:20px;flex:none}
@media(max-width:700px){.archive-gallery-label strong{gap:5px}.archive-youtube-logo{width:22px;height:16px}}

/* The entire evidence panel opens the trading archive. */
a.cinema-evidence{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.cinema-evidence:focus-visible{outline:3px solid #c5f58d;outline-offset:5px}