/* Midnight editorial direction: scroll controls the scene, never the wheel. */
:root{--maxw:1440px;--pad:clamp(22px,4vw,64px);--ink:#f4f3ee;--muted:#a7abb5}
body{background:#08090b;background-image:none}
html{scroll-padding-top:88px}
.page-progress{position:fixed;inset:0 0 auto;height:3px;z-index:90;pointer-events:none}
.page-progress i{display:block;width:100%;height:100%;background:#ff293e;transform:scaleX(var(--page-progress,0));transform-origin:left}
header.nav{padding-top:18px;padding-bottom:18px;background:linear-gradient(#08090bb0,transparent)}
.nav-links a{font-size:14px;letter-spacing:.04em}
.brand{font-size:14px}.brand img{width:32px;height:32px}
.btn{border-radius:5px;font-family:'Space Grotesk',sans-serif;font-size:15px;letter-spacing:.06em;min-height:56px;box-shadow:none}
.btn-primary{background:#f02b3c}.btn-primary:hover{background:#ff4252;box-shadow:0 8px 32px #f02b3c33}
.scene-label{font-size:12px;letter-spacing:.16em;line-height:1.5;font-weight:600;text-transform:uppercase}
.hero{padding:0;display:block;min-height:100svh;overflow:visible;background:#08090b}
.hero-stage{height:100svh;min-height:620px;position:relative;overflow:hidden;isolation:isolate}
.motion-ready .hero{height:185svh}.motion-ready .hero-stage{position:sticky;top:0}
.hero-media{position:absolute;inset:0;clip-path:inset(var(--hero-inset,21%) var(--hero-side,4%) 12%);overflow:hidden;z-index:-2;background:#121722}
.hero-media :is(img,video){width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 60%;transform:translate3d(var(--mouse-x,0px),var(--mouse-y,0px),0) scale(var(--hero-scale,1.04));will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#08090b66 0%,transparent 45%,#08090bc9 85%,#08090b)}
.hero-heading{position:absolute;top:15%;left:var(--pad);right:var(--pad);transform:translateY(var(--hero-title-y,0px));opacity:var(--hero-title-opacity,1);pointer-events:none}
.hero-heading>.scene-label{display:block;margin-bottom:22px}
.hero h1{font-family:'Unbounded',sans-serif;font-size:clamp(38px,10.4vw,170px);line-height:1.08;letter-spacing:-.07em;color:#f4f3ee;background:none;text-shadow:0 3px 35px #0005}
.hero-kicker{display:flex;justify-content:space-between;margin-top:16px;font-size:12px;letter-spacing:.2em;font-weight:600}
.hero-bottom{position:absolute;bottom:8%;left:var(--pad);right:var(--pad);display:flex;align-items:center;gap:30px;opacity:var(--hero-bottom-opacity,1);transform:translateY(var(--hero-bottom-y,0px))}
.hero-bottom p{font-size:16px;letter-spacing:.08em;line-height:1.4;margin-right:auto}
.hero-scroll{font-size:14px;display:flex;gap:18px;align-items:center;min-height:48px}
.hero-scroll span{font-size:24px}
.hero-outro{position:absolute;top:35%;left:var(--pad);opacity:var(--hero-outro-opacity,0);transform:translateY(var(--hero-outro-y,40px));pointer-events:none}
.hero-outro>span{font-size:12px;letter-spacing:.18em}.hero-outro strong{display:block;font:800 clamp(54px,10vw,148px)/.95 'Unbounded',sans-serif;letter-spacing:-.065em;margin-top:20px}
.hero-outro em{font-style:normal;color:#ff3547}
.scene-meter{position:absolute;bottom:24px;left:var(--pad);right:var(--pad);font-size:12px;letter-spacing:.12em;display:flex;align-items:center;gap:18px;color:#bdc1cb}
.scene-meter i{height:1px;flex:1;background:linear-gradient(90deg,#f6384b calc(var(--hero-progress,0)*100%),#ffffff40 0)}
section:not(.hero){padding:110px 0}.sec-head{text-align:left;margin-bottom:46px}
.sec-head .m-stripe{margin:0 0 24px}.eyebrow{font-size:12px;letter-spacing:.15em;color:#ff5866}
h2.section-title{font-size:clamp(34px,6.7vw,96px);line-height:1.08;letter-spacing:-.065em;margin:20px 0}
.section-title em{font-style:normal;color:#737985}
.reveal{transform:translateY(36px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.75,.2,1);transition-delay:var(--reveal-delay,0ms)}
.fuel{background:#101115;border-top:1px solid #ffffff14;border-radius:32px 32px 0 0}
.fuel>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px 60px;align-items:center}
.fuel .sec-head{margin:0}.fuel .section-title{font-size:clamp(30px,4vw,64px)}
.fuel-hero-img{border-radius:10px;margin:0;max-height:600px;object-fit:contain;box-shadow:none;background:#08090c}
.benefits{grid-column:1/-1;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #ffffff25;margin:25px 0 0}
.benefit{border:0;border-bottom:1px solid #ffffff25;border-radius:0;background:none;padding:32px 20px 32px 0}
.benefit h3{font-size:15px}.benefit p{font-size:16px}.benefit .ic{margin-bottom:22px}
.spec-bar{grid-column:1/-1;margin:0;justify-content:flex-start;font-size:12px}
.game{background:#08090b}.game .sec-head>p{margin:0!important;font-size:18px!important;max-width:40ch!important}
.drive-story{position:relative;height:auto;margin:50px 0 40px;--drive-scale:1;--drive-pan:0%}
.drive-stage{position:relative;height:85svh;min-height:590px;overflow:hidden;background:#101520;border-radius:12px;isolation:isolate}
.motion-ready .drive-story{height:235svh}.motion-ready .drive-stage{position:sticky;top:80px;height:calc(100svh - 100px)}
.drive-stage .night-drive{position:absolute;inset:0;border:0;border-radius:0;margin:0;z-index:-2}
.drive-stage .night-drive img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transform:scale(var(--drive-scale)) translateX(var(--drive-pan));object-position:50% 50%;will-change:transform}
.drive-stage .night-drive:after{background:linear-gradient(90deg,#03070ed9,transparent 85%),linear-gradient(0deg,#03070ee6,transparent 80%)}
.drive-top{position:absolute;top:30px;left:36px;right:36px;display:flex;justify-content:space-between;gap:20px}
.drive-top a{font-size:14px;white-space:nowrap}
.drive-chapters{position:absolute;top:92px;left:36px;display:flex;gap:8px;flex-wrap:wrap}
.drive-chapters button{border:1px solid #ffffff60;border-radius:30px;padding:12px 16px;background:#090d1690;color:#eee;font:500 12px 'Space Grotesk',sans-serif;cursor:pointer;min-height:44px}
.drive-chapters button[aria-pressed="true"]{background:#f12c3c;border-color:#f12c3c}
.drive-caption{position:absolute;left:36px;right:36px;bottom:52px;max-width:680px}
.drive-caption h3{font:800 clamp(38px,6.8vw,96px)/1.02 'Unbounded',sans-serif;letter-spacing:-.06em;margin:16px 0 22px}
.drive-caption p{font-size:18px;max-width:33ch;color:#d0d4df;line-height:1.5;margin-bottom:24px}
.drive-caption .btn{min-height:48px}.drive-caption.swap{animation:chapter-enter .4s ease both}
@keyframes chapter-enter{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:none}}
.drive-counter{position:absolute;right:36px;bottom:45px;display:flex;gap:8px;align-items:baseline;font-size:14px;color:#c8cbd1}
.drive-counter b{font:500 65px/1 'Space Grotesk',sans-serif;color:#fff}
.drive-progress{position:absolute;inset:auto 0 0;height:3px;background:#ffffff22}.drive-progress i{display:block;height:100%;background:#f42c3d;transform:scaleX(var(--drive-progress,0));transform-origin:left}
.drive-guide{background:#101216;border-radius:6px}.guide-controls button{font-size:14px}#guide-copy{font-size:16px;min-height:92px}
.game-frame{aspect-ratio:16/10;border-radius:8px;scroll-margin-top:90px}.game-tools{justify-content:flex-end}.fs-btn{font-size:14px}
.gallery{background:#15161b;overflow:hidden}.gallery .section-title{font-size:clamp(60px,10vw,140px)}
.gallery-controls p{font-size:16px}.gallery-controls{margin-bottom:28px}
.gallery .scroller{max-width:none;width:100%;padding:48px var(--pad) 65px;gap:30px;perspective:1600px;scroll-padding-inline:var(--pad);cursor:grab;touch-action:pan-x pan-y}
.gallery .scroller.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.gallery .shot{flex-basis:clamp(260px,33vw,500px);border-radius:8px;transform:translateY(var(--card-rise,0px)) rotate(var(--card-tilt,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .25s;box-shadow:0 28px 45px #0005}
.gallery .shot:nth-child(1){--card-tilt:-4deg}.gallery .shot:nth-child(2){--card-tilt:3deg;--card-rise:28px}.gallery .shot:nth-child(3){--card-tilt:-2deg}
.gallery .shot:hover,.gallery .shot:focus-visible{transform:translateY(-12px) rotate(0);border-color:#ff5866}
.gallery .shot img{pointer-events:none}.gallery .wide{margin-top:42px;border-radius:8px;max-width:850px;margin-left:auto;margin-right:auto}
footer{padding-top:100px;padding-bottom:55px;text-align:left;background:#ef2b3c;color:#0b0b0c;border:0}
footer>img{margin-left:0}footer .f-title{font-size:clamp(34px,10vw,155px);letter-spacing:-.07em;line-height:1.15}
footer .f-tag,footer .legal{color:#19191ee0}footer .f-tag{font-size:14px}footer .legal{font-size:12px;margin-left:0!important;max-width:65ch!important}
footer .ig-follow{background:#0c0d11;color:#fff;box-shadow:none;border-radius:5px;font:600 14px 'Space Grotesk',sans-serif}
.age-card{border-radius:10px}.age-card .fine{color:#9ca1ae;font-size:12px}
@media(max-width:767px){
  header.nav{padding-top:12px;padding-bottom:12px}.brand{font-size:11px}.brand img{width:24px;height:24px}.nav-links a{font-size:12px;padding:9px 8px;letter-spacing:0}
  .hero-stage{min-height:620px}.motion-ready .hero{height:160svh}.hero-heading{top:19%}.hero h1{font-size:10.2vw;letter-spacing:-.07em}.hero-heading>.scene-label{font-size:11px;margin-bottom:20px}.hero-kicker{font-size:10px;letter-spacing:.1em}
  .hero-media{clip-path:inset(var(--hero-inset,21%) var(--hero-side,4%) 12%)}.hero-media :is(img,video){object-position:52% 50%}
  .hero-bottom{flex-wrap:wrap;gap:16px;bottom:10%}.hero-bottom p{width:100%;font-size:14px}.hero-bottom .btn{font-size:13px;padding:0 18px}.hero-scroll{font-size:12px;gap:10px}
  section:not(.hero){padding:72px 0}.fuel>.wrap{grid-template-columns:1fr;gap:28px}.fuel .section-title{font-size:clamp(30px,8vw,48px)}.benefits{grid-template-columns:1fr 1fr}.benefit{padding:24px 16px 24px 0}.benefit h3{font-size:13px}.benefit p{font-size:15px}
  .motion-ready .drive-story{height:195svh}.motion-ready .drive-stage{top:68px;height:calc(100svh - 90px)}.drive-stage{min-height:550px}.drive-top{top:24px;left:22px;right:22px}.drive-top .scene-label{max-width:17ch;font-size:11px}.drive-top a{font-size:12px}
  .drive-chapters{top:86px;left:22px;right:22px;gap:5px}.drive-chapters button{font-size:10px;padding:9px 10px}.drive-caption{left:22px;right:22px;bottom:45px}.drive-caption h3{font-size:clamp(36px,10vw,65px)}.drive-caption p{font-size:16px;max-width:26ch}.drive-counter{right:22px;bottom:30px}.drive-counter b{font-size:35px}.drive-counter span{font-size:11px}
  .game-frame{aspect-ratio:9/16}.guide-controls button{font-size:12px}#guide-copy{min-height:135px;padding:18px;font-size:15px}.gallery .shot{flex-basis:78%;--card-tilt:0deg!important;--card-rise:0px!important}.gallery .scroller{gap:16px;padding-top:15px;padding-bottom:25px}.gallery-controls p{max-width:24ch;font-size:14px}.gallery .wide{margin-top:20px}
}
@media(max-height:650px) and (min-width:768px){.hero-stage{min-height:540px}.drive-stage{min-height:520px}.drive-caption h3{font-size:48px}.drive-chapters{top:70px}.hero-heading{top:16%}.hero-bottom{bottom:9%}}
@media(prefers-reduced-motion:reduce){.motion-ready .hero,.motion-ready .drive-story{height:auto}.motion-ready .hero-stage,.motion-ready .drive-stage{position:relative;top:auto}.hero-outro{display:none}.hero-media :is(img,video),.drive-stage .night-drive img{transform:none;will-change:auto}.hero-heading,.hero-bottom{transform:none;opacity:1}.hero-media{clip-path:inset(21% 4% 12%)}.gallery .shot{transform:none!important}.drive-caption.swap{animation:none}.scene-meter i{background:#ffffff50}}

/* Scrub the actual campaign footage; the poster stays underneath while loading. */
.hero-media video[data-scroll-video]{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;transition:opacity .25s ease}
.hero-media video[data-scroll-video].video-ready{opacity:1}
.hero-media video[data-scroll-video].video-failed{opacity:0}
@media(prefers-reduced-motion:reduce){.hero-media video[data-scroll-video]{display:none}}

/* One viewport-fixed scene remains behind every section of the website. */
body{isolation:isolate;background:#08090b}
.site-video-background{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#08090b}
.site-video-background img,.site-video-background video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.site-video-background video{opacity:0;transition:opacity .25s ease}
.site-video-background video.video-ready{opacity:1}
.site-video-background video.video-failed{opacity:0}
.site-video-background:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05060980,#05060933 65%,#05060955)}
.hero,.fuel,.game,.gallery,footer{background:transparent}
.hero-shade{background:linear-gradient(180deg,#08090b30,transparent 55%,#08090b45)}
.fuel{border-radius:0}.fuel .sec-head,.game .sec-head,.gallery .sec-head{filter:drop-shadow(0 2px 10px #0009)}
.benefits{background:#090c126b;backdrop-filter:blur(5px);padding:0 18px}
.drive-stage{background:#080b122b;border:1px solid #ffffff24}
.drive-stage .night-drive{display:none}
.drive-caption{text-shadow:0 2px 18px #000b}
.drive-guide{background:#0b101ac9;backdrop-filter:blur(8px)}
.section-title em{color:#bdc2cd}
footer{background:#090b124d;border-top:1px solid #ffffff25;color:var(--ink)}
footer .f-tag,footer .legal{color:#d3d6dd}footer .ig-follow{background:#ef2b3c}
@media(prefers-reduced-motion:reduce){.site-video-background video{display:none}}

/* Masked word entrances: layout stays stable while the lettering rises into view. */
.heading-word{display:inline-block;overflow:clip;vertical-align:bottom;padding:.12em .07em .16em;margin:-.12em -.07em -.16em}
.heading-ink{display:inline-block;transform:translateY(115%) rotate(3deg);opacity:0}
.heading-entered .heading-ink{animation:heading-arrive .85s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--word-delay,0ms)}
@keyframes heading-arrive{from{transform:translateY(115%) rotate(3deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.heading-motion .heading-ink{animation:none;transform:none;opacity:1}}

/* Image entrances use individual transforms, preserving the existing hover zoom. */
.image-motion{opacity:0;translate:0 32px;scale:1.045;clip-path:inset(0 0 12% 0)}
.image-motion.image-entered{animation:artwork-arrive 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--image-delay,0ms)}
@keyframes artwork-arrive{from{opacity:0;translate:0 32px;scale:1.045;clip-path:inset(0 0 12% 0)}to{opacity:1;translate:0 0;scale:1;clip-path:inset(0)}}
.gallery :is(.shot,.wide):focus-visible .image-motion{animation:none;opacity:1;translate:none;scale:1;clip-path:none}
@media(prefers-reduced-motion:reduce){.image-motion{animation:none!important;opacity:1;translate:none;scale:1;clip-path:none}}