:root {
  --ink: #f4f7fb;
  --muted: #a9b3c1;
  --night: #05070b;
  --panel: #0b1017;
  --blue: #17a8ff;
  --blue-2: #83ddff;
  --gold: #ffb15a;
  --line: rgba(255,255,255,.14);
  --content-max: 1180px;
  --pad: max(clamp(20px, 4vw, 60px), calc((100vw - var(--content-max)) / 2));
  --radius: clamp(18px, 2vw, 30px);
  --header-h: 78px;
  --exploded-progress: 0;
  --story-morph: 0;
  --prologue-opacity: 1;
  --exploded-title-opacity: 0;
  --story-ui-opacity: 0;
  --story-exit: 0;
  --sequence-progress: 0;
  --flow-progress: 0;
  --flow-final-overlay-opacity: 1;
  --gallery-progress: 0;
  --gallery-scale: 1;
  --gallery-scrim-opacity: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; color: var(--ink); background: var(--night); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 12px 18px; background: #fff; color: #000; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.scroll-meter { position: fixed; z-index: 150; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.08); }
.scroll-meter span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--blue),var(--blue-2)); transform: scaleX(0); transform-origin: 0 50%; }

.site-header { position: fixed; z-index: 120; left: 0; right: 0; top: 0; min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px var(--pad); transition: background .35s ease, border-color .35s ease, transform .35s ease; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(5,7,11,.78); border-color: rgba(255,255,255,.09); backdrop-filter: blur(18px); }
.site-header.hidden-head { transform: translateY(-105%); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 11px; font-weight: 900; line-height: .9; letter-spacing: .17em; }
.brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.site-header nav { display: flex; align-items: center; gap: clamp(15px,3vw,38px); }
.site-header nav a { text-decoration: none; color: rgba(255,255,255,.78); font-weight: 750; font-size: 13px; letter-spacing: .035em; }
.site-header nav a:hover { color: #fff; }
.site-header .nav-book { padding: 11px 18px; border: 1px solid rgba(131,221,255,.45); border-radius: 999px; background: rgba(23,168,255,.12); color: #fff; }
.menu-toggle { display: none; color: #fff; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; }

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + 30px) var(--pad) clamp(118px,15vh,170px); }
.hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -1px; height: 20vh; background: linear-gradient(0deg,#07090d 0%,rgba(7,9,13,.78) 28%,transparent 100%); pointer-events: none; }
.hero-media, .hero-wash { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 54%; transform: scale(1.04); animation: hero-in 2.2s cubic-bezier(.18,.84,.2,1) both; }
.hero-wash { z-index: 1; background: linear-gradient(90deg,rgba(3,5,8,.93) 0%,rgba(3,5,8,.54) 43%,rgba(3,5,8,.12) 75%), linear-gradient(0deg,rgba(3,5,8,.95),transparent 48%,rgba(3,5,8,.34)); }
.hero-copy { position: relative; width: min(760px,100%); margin-inline: auto; margin-left: var(--pad); }
.eyebrow, .chapter-number { margin: 0 0 18px; color: var(--blue-2); font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.hero h1 { margin: 0; font-size: clamp(52px,8vw,124px); line-height: .8; letter-spacing: -.071em; font-weight: 950; text-wrap: balance; }
.hero h1 span { display: block; }
.hero h1 span:last-child { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.72); }
.hero-deck { width: min(630px,100%); margin: 26px 0 0; color: rgba(255,255,255,.82); font-size: clamp(17px,1.45vw,22px); line-height: 1.48; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-weight: 850; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #00101a; background: linear-gradient(135deg,var(--blue-2),var(--blue)); box-shadow: 0 14px 45px rgba(23,168,255,.22); }
.button-ghost { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(5,7,11,.28); backdrop-filter: blur(10px); }
.hero-facts { position: absolute; left: var(--pad); right: var(--pad); bottom: 25px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.24); padding-top: 18px; color: rgba(255,255,255,.64); font-size: 12px; letter-spacing: .04em; }
.hero-facts span { display: flex; gap: 8px; }
.hero-facts strong { color: #fff; }
.hero-facts small { color: inherit; font: inherit; }
.reveal-on-load > * { opacity: 0; transform: translateY(22px); animation: copy-in .9s .35s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal-on-load > *:nth-child(2) { animation-delay: .48s; }
.reveal-on-load > *:nth-child(3) { animation-delay: .62s; }
.reveal-on-load > *:nth-child(4) { animation-delay: .74s; }

.chapter-dark, .cape-gallery { background: #0b0d10; }
.story-sequence { position: relative; margin-top: -1px; padding: 14vh var(--pad); background: #070a0f; }
.story-sticky { position: relative; max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px,5vw,72px); align-items: center; isolation: isolate; background: radial-gradient(circle at 50% 44%,rgba(18,91,132,.13),transparent 47%),linear-gradient(180deg,#07090d 0%,#0a1017 58%,#08131c 100%); }
.story-sticky::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: var(--sequence-progress); background: radial-gradient(circle at 50% 45%,rgba(31,152,219,.11),transparent 42%); }
.story-stage { position: relative; z-index: 2; width: 100%; aspect-ratio: 4/3; overflow: hidden; border: 1px solid rgba(131,221,255,.14); border-radius: var(--radius); background: #020408; box-shadow: 0 34px 100px rgba(0,0,0,.48); opacity: 1; transform-origin: 0 0; }
.story-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: calc(1 - var(--story-exit)); background: radial-gradient(circle at 51% 52%,transparent 48%,rgba(2,4,8,.18) 100%),linear-gradient(0deg,rgba(2,4,8,.2),transparent 34%); }
.story-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transform: none; image-rendering: auto; }
.story-stage .explosion-frame { z-index: 0; }
.story-stage .explosion-frame[data-key="0"] { opacity: 1; }
.story-stage .mesh-morph-fallback { z-index: 1; opacity: 1; }
.story-stage .mesh-morph-canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; background: #05080b; }
.story-stage.morph-ready .mesh-morph-canvas { opacity: 1; }
.prologue-copy { position: relative; z-index: 4; max-width: 700px; opacity: 1; }
.prologue-copy h2, .carbon h2, .powertrain h2, .section-heading h2, .booking h2, .epilogue h2 { margin: 0; font-size: clamp(38px,4.6vw,72px); line-height: .94; letter-spacing: -.052em; text-wrap: balance; }
.display-line { margin: 22px 0 0; color: var(--blue-2); font-size: clamp(25px,3.6vw,55px); line-height: 1.02; letter-spacing: -.045em; font-weight: 850; }
.body-large { margin: 30px 0 0; max-width: 690px; color: var(--muted); font-size: clamp(17px,1.6vw,23px); line-height: 1.62; }
.timeline { position: relative; z-index: 4; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 5vh; border-top: 1px solid rgba(255,255,255,.22); opacity: 1; }
.timeline div { min-height: clamp(72px,9vh,94px); padding: 14px 24px 8px 0; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.12); }
.timeline div + div { padding-left: 24px; }
.timeline strong { font-size: clamp(24px,2.7vw,40px); letter-spacing: -.055em; }
.timeline span { color: var(--muted); font-size: 13px; }
.scan-lines { display: none; }
.exploded-title { position: absolute; z-index: 4; left: var(--pad); top: clamp(18px,3vh,32px); width: min(560px,70vw); opacity: var(--exploded-title-opacity); transform: translateY(calc((1 - var(--exploded-title-opacity)) * 18px)); will-change: opacity,transform; }
.exploded-title h2 { margin: 0; font-size: clamp(34px,4.1vw,60px); line-height: .9; letter-spacing: -.058em; }
.part-hotspots { position: absolute; z-index: 5; left: var(--story-stage-left,var(--pad)); top: var(--story-stage-top,0); width: var(--story-stage-width,calc(100vw - var(--pad) - var(--pad))); height: var(--story-stage-height,75vw); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease,visibility 0s linear .3s; }
.part-hotspots.active { opacity: var(--story-ui-opacity,1); visibility: visible; transition-delay: 0s; }
.part-hotspot { position: absolute; transform: translate(-50%,-50%); pointer-events: none; }
.part-hotspots.active .part-hotspot { pointer-events: auto; }
.part-hotspot button { position: relative; z-index: 2; width: clamp(30px,2.45vw,38px); height: clamp(30px,2.45vw,38px); display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.92); border-radius: 50%; color: #02111b; background: rgba(131,221,255,.94); box-shadow: 0 0 0 5px rgba(23,168,255,.12),0 9px 26px rgba(0,0,0,.4); font-size: 11px; font-weight: 950; cursor: pointer; transition: transform .2s ease,background .2s ease,box-shadow .2s ease; }
.part-hotspot button::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(131,221,255,.34); border-radius: inherit; transition: transform .2s ease,border-color .2s ease; }
.part-hotspot button:hover,
.part-hotspot button:focus-visible,
.part-hotspot button[aria-expanded="true"] { transform: scale(1.08); background: #fff; box-shadow: 0 0 0 7px rgba(23,168,255,.18),0 12px 32px rgba(0,0,0,.48); }
.part-hotspot button:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 5px; }
.part-hotspot button:hover::after,
.part-hotspot button:focus-visible::after,
.part-hotspot button[aria-expanded="true"]::after { transform: scale(1.12); border-color: rgba(131,221,255,.72); }
.hotspot-card,
.part-popover { position: absolute; z-index: 3; left: calc(100% + 14px); top: 50%; width: min(270px,28vw); padding: 13px 15px 14px; border: 1px solid rgba(131,221,255,.3); border-radius: 12px; color: var(--ink); background: rgba(4,11,18,.88); box-shadow: 0 18px 48px rgba(0,0,0,.42); backdrop-filter: blur(15px); opacity: 0; visibility: hidden; transform: translate(8px,-50%) scale(.98); transform-origin: 0 50%; pointer-events: none; transition: opacity .18s ease,transform .18s ease,visibility 0s linear .18s; }
.part-popover[hidden] { display: block; }
.hotspot-card strong,
.part-popover strong { display: block; color: var(--blue-2); font-size: 11px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.hotspot-card p,
.part-popover p { margin: 7px 0 0; color: rgba(244,247,251,.76); font-size: 12px; line-height: 1.48; }
.part-hotspot:focus-within :is(.hotspot-card,.part-popover),
.part-hotspot.is-open :is(.hotspot-card,.part-popover),
.part-hotspot button[aria-expanded="true"] ~ :is(.hotspot-card,.part-popover),
:is(.hotspot-card,.part-popover).open { opacity: 1; visibility: visible; transform: translate(0,-50%) scale(1); transition-delay: 0s; }
.hotspot-life { left: 44%; top: 44%; }
.hotspot-drive { left: 59%; top: 55%; }
.hotspot-battery { left: 44%; top: 62%; }
.hotspot-front,
.hotspot-edrive { left: 71%; top: 49%; }
.hotspot-rear,
.hotspot-engine { left: 25%; top: 43%; }
.hotspot-drive :is(.hotspot-card,.part-popover),
:is(.hotspot-front,.hotspot-edrive) :is(.hotspot-card,.part-popover) { left: auto; right: calc(100% + 14px); transform: translate(-8px,-50%) scale(.98); transform-origin: 100% 50%; }
.hotspot-drive:focus-within :is(.hotspot-card,.part-popover),
:is(.hotspot-front,.hotspot-edrive):focus-within :is(.hotspot-card,.part-popover),
.hotspot-drive.is-open :is(.hotspot-card,.part-popover),
:is(.hotspot-front,.hotspot-edrive).is-open :is(.hotspot-card,.part-popover),
.hotspot-drive button[aria-expanded="true"] ~ :is(.hotspot-card,.part-popover),
:is(.hotspot-front,.hotspot-edrive) button[aria-expanded="true"] ~ :is(.hotspot-card,.part-popover) { transform: translate(0,-50%) scale(1); }
.hotspot-battery :is(.hotspot-card,.part-popover) { left: 50%; top: auto; bottom: calc(100% + 14px); transform: translate(-50%,8px) scale(.98); transform-origin: 50% 100%; }
.hotspot-battery:focus-within :is(.hotspot-card,.part-popover),
.hotspot-battery.is-open :is(.hotspot-card,.part-popover),
.hotspot-battery button[aria-expanded="true"] ~ :is(.hotspot-card,.part-popover) { transform: translate(-50%,0) scale(1); }
@media (hover: hover) {
  .part-hotspot:hover :is(.hotspot-card,.part-popover) { opacity: 1; visibility: visible; transform: translate(0,-50%) scale(1); transition-delay: 0s; }
  .hotspot-drive:hover :is(.hotspot-card,.part-popover),
  :is(.hotspot-front,.hotspot-edrive):hover :is(.hotspot-card,.part-popover) { transform: translate(0,-50%) scale(1); }
  .hotspot-battery:hover :is(.hotspot-card,.part-popover) { transform: translate(-50%,0) scale(1); }
}
.exploded-caption { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; justify-content: space-between; gap: 20px; padding-top: 0; opacity: var(--story-ui-opacity); }
.exploded-caption span { font-size: 13px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.exploded-caption b { color: rgba(255,255,255,.5); font-size: 10px; font-weight: 600; }

html:not(.story-motion) .exploded-title,
html:not(.story-motion) .part-hotspots,
html:not(.story-motion) .exploded-caption,
html:not(.story-motion) .scan-lines { display: none; }
.story-motion .story-sequence { height: 720vh; padding: 0; }
.story-motion .story-sticky { position: sticky; top: 0; height: 100svh; max-width: none; margin: 0; display: block; overflow: hidden; }
.story-motion .story-stage { position: absolute; width: auto; aspect-ratio: auto; will-change: transform,border-radius,opacity; }
.story-motion .prologue-copy { position: absolute; left: var(--story-copy-left,var(--pad)); top: var(--story-copy-top,13vh); width: var(--story-copy-width,min(560px,42vw)); opacity: var(--prologue-opacity); transform: translateY(calc((1 - var(--prologue-opacity)) * -26px)); will-change: opacity,transform; }
.story-motion .timeline { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(14px,2.4vh,28px); margin: 0; opacity: var(--prologue-opacity); transform: translateY(calc((1 - var(--prologue-opacity)) * 20px)); will-change: opacity,transform; }
.story-motion .exploded-title { display: block; left: max(var(--pad),var(--story-stage-side,var(--pad))); right: max(var(--pad),var(--story-stage-side,var(--pad))); width: auto; max-width: 560px; }
.story-motion .part-hotspots { display: block; }
.story-motion .exploded-caption { display: flex; left: max(var(--pad),var(--story-stage-side,var(--pad))); right: max(var(--pad),var(--story-stage-side,var(--pad))); top: var(--story-caption-top,auto); bottom: auto; }

.carbon { position: relative; min-height: 104svh; margin-top: -1px; display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 50px; padding: 18vh var(--pad) 12vh; overflow: hidden; background: radial-gradient(circle at 20% 60%,rgba(0,141,223,.18),transparent 35%),linear-gradient(180deg,#08131c 0%,#102331 34%,#0c1c28 70%,#08131c 100%); }
.carbon-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(131,221,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(131,221,255,.3) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,transparent 3%,#000 36%,transparent 96%); transform: perspective(500px) rotateX(58deg) scale(1.55) translateY(16%); transform-origin: 50% 100%; }
.carbon-copy { position: relative; z-index: 1; max-width: 890px; }
.carbon-stat { position: relative; z-index: 1; justify-self: end; border-left: 2px solid var(--blue); padding: 18px 0 18px 22px; display: flex; flex-direction: column; }
.carbon-stat strong { font-size: clamp(26px,3.2vw,48px); letter-spacing: -.05em; }
.carbon-stat span { color: var(--blue-2); font-size: clamp(18px,2vw,28px); }

.powertrain { position: relative; max-width: none; min-height: 124svh; margin: -1px 0 0; padding: clamp(145px,18vh,210px) var(--pad); display: grid; grid-template-columns: minmax(0,.94fr) minmax(420px,1.06fr); align-items: center; gap: clamp(40px,5vw,82px); overflow: hidden; border-radius: 0; background: radial-gradient(circle at 75% 44%,rgba(255,255,255,.34),transparent 31%),linear-gradient(180deg,#08131c 0%,#aaa9a7 13%,#c8c0b4 24%,#c8c0b4 77%,#25282c 91%,#020306 100%); color: #111318; }
.powertrain-media { min-width: 0; height: min(72svh,760px); overflow: hidden; border-radius: var(--radius); box-shadow: 0 34px 90px rgba(8,12,18,.28); }
.powertrain-media img { width: 100%; height: 112%; object-fit: cover; object-position: 50% center; transform: translateY(var(--parallax,0)); }
.powertrain-copy { min-width: 0; max-width: 650px; align-self: center; padding: clamp(26px,3.2vw,58px) 0; }
.powertrain h2 { font-size: clamp(38px,3.8vw,60px); }
.powertrain .chapter-number { color: #0a6fae; }
.big-number { display: flex; align-items: flex-end; gap: 18px; margin: 0 0 26px; }
.big-number span { font-size: clamp(88px,9vw,148px); line-height: .7; letter-spacing: -.09em; font-weight: 950; }
.big-number small { margin-bottom: 5px; font-size: 12px; font-weight: 900; letter-spacing: .22em; }
.powertrain .body-large { color: #484c54; }
.spec-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 36px; background: rgba(0,0,0,.2); border: 1px solid rgba(0,0,0,.2); }
.spec-row span { min-width: 0; min-height: 110px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.48); }
.spec-row strong { font-size: clamp(22px,2.4vw,34px); letter-spacing: -.05em; }
.spec-row small { color: #555b64; }
.fine-print { color: #636975; font-size: 11px; }

.drive { position: relative; height: 280vh; margin-top: -1px; background: #020306; }
.drive-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.drive-exterior, .drive-road { position: absolute; inset: 0; }
.drive-exterior img, .drive-road img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drive-exterior img { object-position: 61% 52%; transform: scale(calc(1 + var(--drive-progress) * 2.8)); transform-origin: 62% 42%; filter: brightness(calc(1 - var(--drive-progress) * .55)); }
.drive-road { opacity: clamp(0,calc((var(--drive-progress) - .48) * 3.1),1); clip-path: circle(calc(var(--drive-progress) * 130%) at 58% 42%); }
.drive-road img { object-position: center 50%; transform: scale(calc(1.16 - var(--drive-progress) * .16)); }
.drive-sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(1,3,6,.9),rgba(1,3,6,.16) 62%),linear-gradient(0deg,#0b0d10 0%,rgba(1,3,6,.75) 13%,transparent 42%); }
.drive-copy { position: absolute; z-index: 3; left: var(--pad); top: 50%; width: min(700px,82vw); transform: translateY(-50%); opacity: clamp(0,calc(1 - var(--drive-progress) * 2.4),1); }
.drive-copy h2 { margin: 0; font-size: clamp(42px,5.8vw,88px); line-height: .88; letter-spacing: -.055em; }
.drive-copy p:last-child { max-width: 580px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.55; }
.drive-prompt { position: absolute; z-index: 3; right: var(--pad); bottom: 32px; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: calc(1 - var(--drive-progress)); }

.chapter-flow { position: relative; height: 720vh; margin-top: -1px; background: #05080b; }
.chapter-flow-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #05080b; }
.flow-motion .chapter-flow { z-index: 2; margin-top: calc(-100svh - 1px); }
.flow-motion .chapter-flow:not(.flow-active) { background: transparent; pointer-events: none; }
.flow-motion .chapter-flow-sticky { visibility: hidden; }
.flow-motion .chapter-flow.flow-active .chapter-flow-sticky { visibility: visible; }
.flow-beat { position: absolute; inset: 0; z-index: var(--flow-layer,1); pointer-events: none; }
.flow-beat:nth-child(1) { --flow-layer: 1; }
.flow-beat:nth-child(2) { --flow-layer: 2; }
.flow-beat:nth-child(3) { --flow-layer: 3; }
.flow-beat:nth-child(4) { --flow-layer: 4; }
.flow-media { position: absolute; inset: 0; overflow: hidden; background: #05080b; clip-path: inset(var(--flow-top,0%) var(--flow-right,0%) var(--flow-bottom,0%) var(--flow-left,0%) round var(--flow-radius,0px)); will-change: clip-path; }
.flow-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--flow-object-position,center center); transform: scale(var(--flow-image-scale,1)); will-change: transform; }
.flow-beat-base .flow-media img { object-position: center center; }
.flow-beat-engine .flow-media img { object-position: 52% 53%; }
.flow-beat-drive .flow-media img { object-position: 61% 52%; }
.flow-beat:nth-child(4) .flow-media img { object-position: center 50%; }
.flow-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(2,5,9,.84) 0%,rgba(2,5,9,.28) 48%,rgba(2,5,9,.06) 76%),linear-gradient(0deg,rgba(2,5,9,.72),transparent 42%,rgba(2,5,9,.22)); }
.flow-beat-base .flow-media::after { background: none; }
.flow-beat-engine .flow-media::after { background: linear-gradient(90deg,rgba(2,5,9,.08) 0%,rgba(2,5,9,.3) 48%,rgba(2,5,9,.88) 100%),linear-gradient(0deg,rgba(2,5,9,.66),transparent 50%); }
.flow-beat-cape .flow-media::after { opacity: var(--flow-final-overlay-opacity); }
.flow-copy { position: absolute; z-index: 20; top: 50%; width: min(680px,calc(100vw - var(--pad) - var(--pad))); isolation: isolate; opacity: var(--flow-copy-opacity,0); transform: translate3d(0,calc(-50% + var(--flow-copy-shift,26px)),0); will-change: opacity,transform; pointer-events: auto; }
.flow-copy::before { content: ""; position: absolute; z-index: -1; inset: -52px -70px; background: radial-gradient(ellipse at 42% 50%,rgba(2,5,9,.84) 0%,rgba(2,5,9,.56) 42%,transparent 72%); pointer-events: none; }
.flow-copy-left { left: var(--pad); }
.flow-copy-right { right: var(--pad); }
.flow-copy h2 { margin: 0; font-size: clamp(38px,4.8vw,76px); line-height: .91; letter-spacing: -.055em; text-wrap: balance; }
.flow-copy .body-large { max-width: 620px; color: rgba(255,255,255,.76); font-size: clamp(16px,1.35vw,21px); line-height: 1.55; }
.flow-copy .display-line { font-size: clamp(24px,3.2vw,50px); }
.flow-stat { margin-top: 30px; padding-left: 18px; display: flex; flex-direction: column; border-left: 2px solid var(--blue); }
.flow-stat strong { font-size: clamp(25px,3vw,44px); letter-spacing: -.05em; }
.flow-stat span { color: var(--blue-2); font-size: clamp(17px,1.8vw,26px); }
.chapter-flow .big-number { color: #fff; }
.chapter-flow .big-number span { font-size: clamp(82px,8vw,136px); }
.chapter-flow .spec-row { margin-top: 28px; background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.2); }
.chapter-flow .spec-row span { min-height: 96px; padding: 15px; background: rgba(4,8,13,.7); }
.chapter-flow .spec-row strong { color: #fff; font-size: clamp(21px,2.2vw,32px); }
.chapter-flow .spec-row small { color: rgba(255,255,255,.68); }
.chapter-flow .fine-print { color: rgba(255,255,255,.58); }

.cape-gallery, .social-story { position: relative; margin-top: -1px; padding: 12vh var(--pad); }
.cape-gallery { min-height: 190svh; padding: 0 var(--pad) 12vh; overflow: visible; isolation: isolate; background: #0b0d10; }
.flow-motion .cape-gallery { z-index: 3; margin-top: calc(-100svh - 1px); }
.flow-motion .cape-gallery:not(.gallery-active) { background: transparent; pointer-events: none; }
.gallery-bridge { position: sticky; z-index: 0; top: 0; height: 100svh; margin-left: calc(0px - var(--pad)); margin-right: calc(0px - var(--pad)); overflow: hidden; background: #05080b; }
.flow-motion .cape-gallery:not(.gallery-active) .gallery-bridge { visibility: hidden; }
.gallery-bridge img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; transform: scale(var(--gallery-scale)); transform-origin: center; will-change: transform; }
.gallery-bridge::after { content: ""; position: absolute; inset: 0; opacity: var(--gallery-scrim-opacity); background: linear-gradient(0deg,#0b0d10 0%,rgba(11,13,16,.68) 24%,rgba(11,13,16,.08) 68%,transparent 100%); pointer-events: none; }
.section-heading { max-width: 920px; margin-bottom: 65px; }
.section-heading > p:last-child { max-width: 650px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.photo-ribbon { position: relative; z-index: 1; max-width: 1120px; margin: 14vh auto 0; display: grid; grid-template-columns: 1fr .82fr 1.28fr .82fr; gap: 12px; align-items: end; }
.photo-ribbon figure { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: #111; }
.photo-ribbon figure:nth-child(1), .photo-ribbon figure:nth-child(4) { aspect-ratio: .72; }
.photo-ribbon figure:nth-child(2) { aspect-ratio: .68; margin-bottom: 8vh; }
.photo-ribbon figure:nth-child(3) { aspect-ratio: 1.22; margin-bottom: 15vh; }
.photo-ribbon img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.photo-ribbon figure:hover img { transform: scale(1.045); }
.photo-ribbon figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 9px; background: rgba(0,0,0,.62); font-size: 9px; font-weight: 900; letter-spacing: .16em; }

.social-story { padding-top: 20vh; background: linear-gradient(180deg,#0b0d10 0%,#ded8cf 16vh,#d2ccc1 100%); color: #0b0d11; }
.social-story .chapter-number { color: #0479bd; }
.social-story .section-heading > p:last-child { color: #565d66; }
.social-cards { max-width: 1120px; margin-inline: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.social-card { min-width: 0; padding: 12px 12px 24px; color: #0b0d11; background: #fff; text-decoration: none; border: 1px solid rgba(0,0,0,.12); transition: transform .3s ease, box-shadow .3s ease; }
.social-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(22,28,38,.15); }
.card-media { position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden; margin-bottom: 18px; background: #111; }
.social-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.social-card:hover img { transform: scale(1.035); }
.card-media em { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; display: grid; place-items: center; padding-left: 2px; border-radius: 50%; color: #fff; background: rgba(4,8,13,.76); border: 1px solid rgba(255,255,255,.48); backdrop-filter: blur(8px); font-size: 12px; font-style: normal; }
.social-card span { color: #0878b8; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.social-card h3 { margin: 8px 0 22px; font-size: clamp(24px,2.8vw,42px); letter-spacing: -.045em; }
.social-card b { font-size: 12px; }
.profile-links { display: grid; grid-template-columns: 1fr 1fr; margin-top: 38px; border-top: 1px solid rgba(0,0,0,.22); }
.profile-links a { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.22); }
.profile-links a + a { padding-left: 24px; border-left: 1px solid rgba(0,0,0,.22); }

.booking { position: relative; margin-top: -1px; padding: 20vh var(--pad) 12vh; display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(45px,5vw,76px); overflow: hidden; background: linear-gradient(180deg,#d2ccc1 0%,#0a141d 15vh,#0a141d 100%); }
.booking-visual { position: absolute; inset: 0; opacity: .13; }
.booking-visual::after { content: ""; position: absolute; inset: 0; background: #06101a; mix-blend-mode: multiply; }
.booking-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
.booking-intro, .booking-panel { position: relative; z-index: 1; }
.booking-intro { max-width: 420px; }
.booking-panel { width: 100%; max-width: 760px; justify-self: end; }
.booking-intro { align-self: start; position: sticky; top: 120px; }
.booking-intro > p:not(.chapter-number) { color: var(--muted); font-size: 18px; line-height: 1.55; }
.booking-intro dl { margin-top: 40px; border-top: 1px solid var(--line); }
.booking-intro dl div { display: flex; justify-content: space-between; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.booking-intro dt { font-weight: 900; }
.booking-intro dd { margin: 0; color: var(--muted); }
.booking-panel { background: rgba(9,15,23,.84); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: clamp(18px,3.2vw,42px); backdrop-filter: blur(16px); }
.request-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 30px; }
.request-tabs button { min-height: 48px; border: 1px solid var(--line); border-radius: 999px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.035); cursor: pointer; }
.request-tabs button.active { color: #00101a; background: var(--blue-2); border-color: var(--blue-2); font-weight: 900; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.form-grid label, .tracker label { display: flex; flex-direction: column; gap: 8px; }
.form-grid label > span, .tracker label > span { color: rgba(255,255,255,.74); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.form-grid .wide { grid-column: 1 / -1; }
.hidden { display: none !important; }
.form-grid input, .form-grid textarea, .tracker input { width: 100%; color: #fff; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 13px 14px; outline: none; }
.form-grid input { min-height: 48px; }
.form-grid textarea { resize: vertical; }
.form-grid input:focus, .form-grid textarea:focus, .tracker input:focus { border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(23,168,255,.12); }
.form-grid input[type="date"] { color-scheme: dark; }
.honeypot { position: absolute; left: -9999px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; color: var(--muted); font-size: 13px; }
.consent input { margin-top: 3px; }
.submit { width: 100%; border: 0; }
.submit[disabled] { opacity: .46; cursor: not-allowed; }
.form-note, .form-message, .availability { font-size: 12px; line-height: 1.5; }
.form-note { color: rgba(255,255,255,.44); text-align: center; }
.form-message:empty, .availability:empty { display: none; }
.form-message, .availability { padding: 12px 14px; border-radius: 8px; }
.form-message.error, .availability.booked { color: #ffc2c2; background: rgba(255,70,70,.12); border: 1px solid rgba(255,90,90,.24); }
.form-message.success, .availability.available { color: #bfffe1; background: rgba(27,207,132,.1); border: 1px solid rgba(27,207,132,.24); }
.availability.checking { color: var(--blue-2); background: rgba(23,168,255,.1); }
.tracker { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.tracker h3 { margin: 0; font-size: 22px; }
.tracker .chapter-number { margin-bottom: 5px; }
.tracker .button { min-height: 48px; }
.tracker-result { grid-column: 1 / -1; margin: 0; }
.tracker-result:empty { display: none; }

.epilogue { position: relative; min-height: 92svh; display: grid; place-items: center; overflow: hidden; text-align: center; }
.epilogue > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; filter: brightness(.35); transform: scale(1.03); }
.epilogue > div { position: relative; z-index: 1; padding: var(--pad); }
.epilogue p { color: var(--blue-2); font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.epilogue h2 { max-width: 850px; margin-bottom: 30px; }

.site-footer { display: grid; grid-template-columns: .6fr 1.25fr .7fr; gap: 32px; padding: 60px var(--pad); align-items: start; background: #020306; border-top: 1px solid var(--line); }
.site-footer > p { margin: 0; max-width: 600px; color: rgba(255,255,255,.47); font-size: 12px; line-height: 1.65; }
.site-footer nav { display: flex; justify-content: flex-end; gap: 20px; }
.site-footer nav a { color: rgba(255,255,255,.7); font-size: 12px; text-decoration: none; }
.site-footer details { grid-column: 2 / 4; color: rgba(255,255,255,.42); font-size: 11px; }
.site-footer summary { cursor: pointer; }
.site-footer details p { max-width: 760px; line-height: 1.7; }

.story-reveal { opacity: 1; transform: none; }
.motion-ready .story-reveal { opacity: 0; transform: translateY(38px); transition: opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1); }
.motion-ready .story-reveal.in-view { opacity: 1; transform: none; }

html:not(.flow-motion) .chapter-flow { height: auto; }
html:not(.flow-motion) .chapter-flow-sticky { position: relative; height: auto; overflow: visible; }
html:not(.flow-motion) .flow-beat { position: relative; min-height: 100svh; }
html:not(.flow-motion) .flow-media { clip-path: none; visibility: visible !important; }
html:not(.flow-motion) .flow-copy { top: auto; right: auto; bottom: 9vh; left: var(--pad); opacity: 1; transform: none; }
html:not(.flow-motion) .gallery-bridge { position: relative; }

@keyframes hero-in { from { transform: scale(1.12); filter: brightness(.55); } to { transform: scale(1.04); filter: brightness(1); } }
@keyframes copy-in { to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  :root { --header-h: 68px; }
  .site-header { padding-block: 10px; }
  .menu-toggle { display: block; }
  .site-header nav { position: absolute; top: 64px; left: var(--pad); right: var(--pad); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; background: rgba(5,7,11,.96); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 25px 70px rgba(0,0,0,.5); }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 15px; }
  .site-header .nav-book { margin-top: 4px; text-align: center; }
  .story-motion .story-sequence { height: 610vh; }
  .story-sticky { grid-template-columns: 1fr; }
  .story-motion .timeline { display: none; }
  .prologue-copy h2 { font-size: clamp(38px,6.4vw,58px); }
  .prologue-copy .display-line { font-size: clamp(26px,4.8vw,42px); }
  .prologue-copy .body-large { margin-top: 20px; font-size: clamp(16px,2vw,19px); line-height: 1.5; }
  .chapter-flow { height: 640vh; }
  .flow-copy { width: min(620px,calc(100vw - var(--pad) - var(--pad))); }
  .timeline { bottom: 16px; }
  .carbon { grid-template-columns: 1fr; }
  .carbon-stat { justify-self: start; }
  .powertrain { min-height: auto; grid-template-columns: 1fr; gap: 0; padding-block: 16vh; }
  .powertrain-media { height: clamp(420px,68svh,720px); }
  .powertrain-copy { max-width: 720px; padding: clamp(44px,7vh,74px) 0 9vh; }
  .booking { grid-template-columns: 1fr; }
  .booking-intro { position: relative; top: 0; }
  .tracker { grid-template-columns: 1fr 1fr; }
  .tracker > div { grid-column: 1 / -1; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer nav { justify-content: flex-start; }
  .site-footer details { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  :root { --pad: 18px; }
  .brand img { width: 38px; height: 38px; }
  .hero { min-height: 100svh; padding-bottom: 140px; }
  .hero-media img { object-position: 63% 50%; }
  .hero-wash { background: linear-gradient(0deg,rgba(3,5,8,.98) 0%,rgba(3,5,8,.52) 54%,rgba(3,5,8,.1) 100%); }
  .hero-copy { margin-left: 0; }
  .hero h1 { font-size: clamp(46px,15vw,68px); line-height: .84; }
  .hero-deck { font-size: 16px; }
  .hero-actions .button { flex: 1 1 100%; }
  .hero-facts { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; }
  .hero-facts span { display: block; white-space: nowrap; }
  .hero-facts small { display: none; }
  .story-motion .story-sequence { height: 560vh; }
  .story-stage img { object-position: center center; }
  .story-stage::after { background: linear-gradient(0deg,rgba(2,4,8,.28),transparent 57%,rgba(2,4,8,.12)); }
  .prologue-copy h2 { font-size: clamp(30px,9.2vw,40px); line-height: .96; }
  .prologue-copy .chapter-number { margin-bottom: 10px; }
  .prologue-copy .display-line { margin-top: 12px; font-size: clamp(23px,7vw,30px); }
  .prologue-copy .body-large { margin-top: 14px; font-size: 15px; line-height: 1.45; }
  .timeline { display: none; }
  .exploded-title { top: 66px; left: 18px; width: calc(100vw - 36px); }
  .exploded-title h2 { font-size: clamp(30px,9vw,38px); }
  .part-hotspot button { width: 32px; height: 32px; font-size: 10px; }
  .hotspot-card,
  .part-popover { width: min(220px,calc(100vw - 44px)); padding: 11px 12px 12px; }
  .hotspot-card p,
  .part-popover p { font-size: 11px; line-height: 1.42; }
  .hotspot-life { left: 43%; top: 43%; }
  .hotspot-drive { left: 60%; top: 55%; }
  .hotspot-battery { left: 45%; top: 64%; }
  .hotspot-front,
  .hotspot-edrive { left: 72%; top: 50%; }
  .hotspot-rear,
  .hotspot-engine { left: 24%; top: 44%; }
  .hotspot-life :is(.hotspot-card,.part-popover) { left: 50%; top: auto; bottom: calc(100% + 13px); transform: translate(-50%,8px) scale(.98); transform-origin: 50% 100%; }
  .hotspot-life:focus-within :is(.hotspot-card,.part-popover),
  .hotspot-life.is-open :is(.hotspot-card,.part-popover),
  .hotspot-life button[aria-expanded="true"] ~ :is(.hotspot-card,.part-popover) { transform: translate(-50%,0) scale(1); }
  .part-hotspot :is(.hotspot-card,.part-popover) { left: 50%; right: auto; top: auto; bottom: calc(100% + 13px); transform: translate(-50%,8px) scale(.98); transform-origin: 50% 100%; }
  .part-hotspot:focus-within :is(.hotspot-card,.part-popover),
  .part-hotspot.is-open :is(.hotspot-card,.part-popover),
  .part-hotspot button[aria-expanded="true"] ~ :is(.hotspot-card,.part-popover) { transform: translate(-50%,0) scale(1); }
  .hotspot-engine :is(.hotspot-card,.part-popover) { left: 0; transform: translate(0,8px) scale(.98); }
  .hotspot-engine:focus-within :is(.hotspot-card,.part-popover),
  .hotspot-engine.is-open :is(.hotspot-card,.part-popover),
  .hotspot-engine button[aria-expanded="true"] ~ :is(.hotspot-card,.part-popover) { transform: translate(0,0) scale(1); }
  .hotspot-edrive :is(.hotspot-card,.part-popover) { left: auto; right: 0; transform: translate(0,8px) scale(.98); }
  .hotspot-edrive:focus-within :is(.hotspot-card,.part-popover),
  .hotspot-edrive.is-open :is(.hotspot-card,.part-popover),
  .hotspot-edrive button[aria-expanded="true"] ~ :is(.hotspot-card,.part-popover) { transform: translate(0,0) scale(1); }
  @media (hover: hover) {
    .part-hotspot:hover :is(.hotspot-card,.part-popover) { transform: translate(-50%,0) scale(1); }
    .hotspot-engine:hover :is(.hotspot-card,.part-popover),
    .hotspot-edrive:hover :is(.hotspot-card,.part-popover) { transform: translate(0,0) scale(1); }
  }
  .exploded-caption { bottom: 18px; flex-direction: column; gap: 4px; }
  .carbon { min-height: 100svh; padding-block: 12vh 9vh; }
  .powertrain { padding: 14vh 18px; }
  .powertrain-media { height: max(340px,54svh); border-radius: 18px; }
  .powertrain-copy { padding: 44px 4px 9vh; }
  .powertrain h2 { font-size: clamp(34px,10.2vw,48px); }
  .big-number { gap: 12px; }
  .big-number span { font-size: clamp(78px,29vw,112px); }
  .spec-row { grid-template-columns: 1fr; }
  .spec-row span { min-height: 76px; flex-direction: row; align-items: center; }
  .drive { height: 235vh; }
  .drive-exterior img { object-position: 60% center; }
  .drive-copy h2 { font-size: 50px; }
  .drive-copy p:last-child { font-size: 14px; }
  .chapter-flow { height: 560vh; }
  .flow-copy { top: auto; right: 18px; bottom: max(26px,env(safe-area-inset-bottom)); left: 18px; width: auto; transform: translate3d(0,var(--flow-copy-shift,26px),0); }
  .flow-copy::before { inset: -42px -24px; background: radial-gradient(ellipse at 50% 100%,rgba(2,5,9,.92) 0%,rgba(2,5,9,.66) 56%,transparent 82%); }
  .flow-media::after,
  .flow-beat-engine .flow-media::after { background: linear-gradient(0deg,rgba(2,5,9,.94) 0%,rgba(2,5,9,.7) 30%,rgba(2,5,9,.12) 70%,transparent 100%); }
  .flow-beat-base .flow-media::after { background: none; }
  .flow-copy h2 { font-size: clamp(34px,10vw,48px); }
  .flow-copy .display-line { margin-top: 12px; font-size: clamp(22px,7vw,31px); }
  .flow-copy .body-large { margin-top: 16px; font-size: 15px; line-height: 1.45; }
  .flow-stat { margin-top: 18px; }
  .flow-beat-engine .flow-copy { bottom: 20px; }
  .flow-beat-engine .body-large { display: none; }
  .chapter-flow .big-number { margin-bottom: 16px; }
  .chapter-flow .big-number span { font-size: clamp(70px,24vw,104px); }
  .chapter-flow .spec-row { margin-top: 16px; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .chapter-flow .spec-row span { min-height: 68px; padding: 10px 8px; flex-direction: column; align-items: flex-start; }
  .chapter-flow .spec-row strong { font-size: 20px; }
  .chapter-flow .spec-row small { font-size: 9px; }
  .chapter-flow .fine-print { display: none; }
  .social-story { padding-block: 10vh; }
  .cape-gallery { padding: 0 18px 10vh; }
  .photo-ribbon { margin-top: 10vh; }
  .photo-ribbon { grid-template-columns: 1fr 1fr; }
  .photo-ribbon figure:nth-child(n) { margin-bottom: 0; aspect-ratio: .73; }
  .photo-ribbon figure:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 1.18; }
  .social-cards { grid-template-columns: 1fr; }
  .card-media { aspect-ratio: 1.05; }
  .profile-links { grid-template-columns: 1fr; }
  .profile-links a + a { padding-left: 0; border-left: 0; }
  .booking { padding-block: 11vh; }
  .request-tabs { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .tracker { grid-template-columns: 1fr; }
  .tracker > div { grid-column: auto; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer details { grid-column: auto; }
}

@media (max-width: 680px) and (max-height: 740px) {
  .flow-copy { bottom: max(16px,env(safe-area-inset-bottom)); }
  .flow-copy h2 { font-size: clamp(30px,8.8vw,40px); }
  .flow-beat-base .flow-copy .body-large,
  .flow-beat-base .flow-stat { display: none; }
  .chapter-flow .big-number span { font-size: clamp(62px,20vw,86px); }
  .chapter-flow .spec-row span { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .story-reveal { opacity: 1; transform: none; }
  .story-sequence { height: auto; padding: clamp(88px,11vh,130px) var(--pad) clamp(70px,9vh,110px); }
  .story-sticky { position: relative; height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,70px); overflow: visible; }
  .story-stage { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 4/3; border-radius: var(--radius) !important; }
  .prologue-copy { position: relative; inset: auto; width: auto; align-self: center; opacity: 1; transform: none; }
  .timeline { position: relative; inset: auto; grid-column: 1 / -1; margin-top: 20px; opacity: 1; transform: none; }
  .exploded-title,.part-hotspots,.exploded-caption,.scan-lines { display: none; }
  .explosion-frame { opacity: 0 !important; transform: none !important; }
  .explosion-frame[data-key="0"] { opacity: 1 !important; }
  .mesh-morph-canvas { display: none !important; }
  .chapter-flow { height: auto; }
  .chapter-flow-sticky { position: relative; height: auto; overflow: visible; }
  .flow-beat { position: relative; min-height: 100svh; }
  .flow-media { clip-path: none !important; visibility: visible !important; }
  .flow-media img { transform: none !important; }
  .flow-copy { top: auto; right: auto; bottom: 9vh; left: var(--pad); opacity: 1 !important; transform: none !important; }
  .gallery-bridge { position: relative; }
  .drive-exterior { opacity: 0; }
  .drive-road { opacity: 1; clip-path: none; }
  .drive-road img { transform: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .story-sticky { grid-template-columns: 1fr; }
  .flow-beat { min-height: max(100svh,720px); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .story-motion .story-sequence { height: auto; padding: clamp(70px,14vh,96px) var(--pad); }
  .story-motion .story-sticky { position: relative; top: auto; height: auto; max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,70px); overflow: visible; }
  .story-motion .story-sticky::before,
  .story-motion .story-stage::after { display: none; }
  .story-motion .story-stage { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 4/3; opacity: 1 !important; transform: none !important; border-radius: var(--radius) !important; }
  .story-motion .prologue-copy { position: relative; inset: auto; width: auto; align-self: center; opacity: 1; transform: none; }
  .story-motion .prologue-copy h2 { font-size: clamp(25px,4.8vw,38px); }
  .story-motion .prologue-copy .display-line { margin-top: 12px; font-size: clamp(19px,3.4vw,28px); }
  .story-motion .prologue-copy .body-large { display: none; }
  .story-motion .timeline, .story-motion .exploded-title, .story-motion .part-hotspots, .story-motion .exploded-caption { display: none; }
  .story-motion .explosion-frame { opacity: 0 !important; }
  .story-motion .explosion-frame[data-key="0"] { opacity: 1 !important; }
  .story-motion .mesh-morph-canvas,
  .story-motion .mesh-morph-fallback { display: none !important; }
  .flow-motion .chapter-flow { height: auto; margin-top: -1px; background: #05080b; }
  .flow-motion .chapter-flow-sticky { position: relative; height: auto; overflow: visible; visibility: visible !important; }
  .flow-motion .flow-beat { position: relative; min-height: max(100svh,560px); }
  .flow-motion .flow-media { clip-path: none !important; visibility: visible !important; }
  .flow-motion .flow-copy { top: 50%; bottom: auto; opacity: 1 !important; transform: translateY(-50%) !important; }
  .flow-motion .flow-copy .body-large,
  .flow-motion .flow-copy .fine-print,
  .flow-motion .flow-stat { display: none; }
  .flow-motion .chapter-flow .big-number { margin-bottom: 12px; }
  .flow-motion .chapter-flow .big-number span { font-size: clamp(66px,12vw,98px); }
  .flow-motion .chapter-flow .spec-row { margin-top: 12px; }
  .flow-motion .chapter-flow .spec-row span { min-height: 62px; }
  .flow-motion .cape-gallery { margin-top: -1px; background: #0b0d10; }
  .flow-motion .gallery-bridge { position: relative; visibility: visible !important; }
}

/* v8 — rigid photographic sequence and contained chapter handoffs */
:root {
  --handoff-opacity: 0;
  --story-caption-opacity: 0;
}

.engineering-scan,
.handoff-copy { display: none; }

.story-motion .story-sequence {
  height: 820vh;
  padding: 0;
  background: #071019;
}

.story-motion .story-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  max-width: none;
  margin: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 42%,rgba(22,116,174,.16),transparent 35%),
    radial-gradient(circle at 18% 70%,rgba(34,68,92,.17),transparent 33%),
    linear-gradient(135deg,#071019 0%,#0a1620 48%,#05090e 100%);
}

.story-motion .story-sticky::before {
  z-index: 0;
  inset: 0;
  opacity: .7;
  background:
    linear-gradient(rgba(131,221,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(131,221,255,.025) 1px,transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 50%,#000,transparent 76%);
}

.story-motion .story-stage {
  position: absolute;
  z-index: 2;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgba(131,221,255,.2);
  background: #05080b;
  box-shadow: 0 38px 100px rgba(0,0,0,.48),0 0 0 1px rgba(0,0,0,.16);
  transform: none !important;
  transform-origin: center;
  will-change: left,top,width,height,border-radius;
}

.story-motion .story-stage::after {
  z-index: 12;
  opacity: 1;
  background:
    radial-gradient(circle at 52% 50%,transparent 57%,rgba(1,4,8,.17) 100%),
    linear-gradient(0deg,rgba(1,4,8,.12),transparent 34%);
}

.story-motion .frame-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #05080b;
}

.story-motion .story-stage .explosion-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1 !important;
  visibility: hidden;
  transform: none !important;
  filter: none !important;
  image-rendering: auto;
  backface-visibility: hidden;
  will-change: clip-path;
}

.story-motion .story-stage .explosion-frame.is-visible { visibility: visible; }

.story-motion .engineering-scan {
  --scan-x: 0%;
  position: absolute;
  z-index: 14;
  top: -8%;
  bottom: -8%;
  left: var(--scan-x);
  display: block;
  width: 2px;
  opacity: 0;
  transform: translateX(-1px) skewX(-8deg);
  background: rgba(215,247,255,.92);
  box-shadow:
    0 0 7px 1px rgba(131,221,255,.92),
    0 0 24px 5px rgba(23,168,255,.58),
    -9px 0 28px rgba(23,168,255,.28);
  pointer-events: none;
}

.story-motion .engineering-scan.is-active { opacity: .88; }

.story-motion .prologue-copy,
.story-motion .handoff-copy {
  position: absolute;
  z-index: 4;
  max-width: 540px;
  transform: translateY(-50%);
  will-change: opacity,transform;
}

.story-motion .prologue-copy {
  display: block;
  opacity: var(--prologue-opacity);
  transform: translateY(calc(-50% - ((1 - var(--prologue-opacity)) * 18px)));
}

.story-motion .handoff-copy {
  display: block;
  opacity: var(--handoff-opacity);
  transform: translateY(calc(-50% + ((1 - var(--handoff-opacity)) * 22px)));
  pointer-events: none;
}

.story-motion .handoff-copy h2 {
  margin: 0;
  font-size: clamp(36px,4.25vw,66px);
  line-height: .93;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.story-motion .handoff-copy .display-line {
  margin-top: 18px;
  font-size: clamp(23px,2.8vw,42px);
}

.story-motion .handoff-copy .body-large {
  margin-top: 22px;
  font-size: clamp(15px,1.25vw,19px);
  line-height: 1.52;
}

.story-motion .handoff-copy .flow-stat { margin-top: 22px; }

.story-motion .timeline {
  z-index: 4;
  opacity: var(--prologue-opacity);
}

.story-motion .exploded-title {
  z-index: 4;
  left: var(--story-stage-left,var(--pad));
  right: auto;
  top: max(78px,calc(var(--story-stage-top,100px) - 66px));
  width: var(--story-stage-width,700px);
  max-width: none;
  opacity: var(--exploded-title-opacity);
  transform: translateY(calc((1 - var(--exploded-title-opacity)) * 14px));
  pointer-events: none;
}

.story-motion .exploded-title h2 {
  font-size: clamp(31px,3.45vw,52px);
}

.story-motion .exploded-caption {
  z-index: 4;
  left: var(--story-stage-left,var(--pad));
  right: auto;
  top: var(--story-caption-top,auto);
  width: var(--story-stage-width,700px);
  bottom: auto;
  padding-top: 0;
  opacity: var(--story-caption-opacity);
}

.story-motion .exploded-caption::before { display: none; }

.story-motion .part-hotspots {
  display: block;
  z-index: 7;
  opacity: 0;
}

.story-motion .part-hotspots.active { opacity: var(--story-ui-opacity,1); }

.story-motion .part-hotspots.active .part-hotspot button {
  animation: hotspot-electric 1.75s ease-in-out infinite;
}

.story-motion .part-hotspots.active .part-hotspot:nth-child(2) button { animation-delay: .12s; }
.story-motion .part-hotspots.active .part-hotspot:nth-child(3) button { animation-delay: .24s; }
.story-motion .part-hotspots.active .part-hotspot:nth-child(4) button { animation-delay: .36s; }
.story-motion .part-hotspots.active .part-hotspot:nth-child(5) button { animation-delay: .48s; }

@keyframes hotspot-electric {
  0%,100% { box-shadow: 0 0 0 5px rgba(23,168,255,.11),0 9px 26px rgba(0,0,0,.4),0 0 13px rgba(23,168,255,.22); }
  45% { box-shadow: 0 0 0 7px rgba(23,168,255,.2),0 9px 26px rgba(0,0,0,.4),0 0 25px rgba(131,221,255,.76); }
  50% { box-shadow: 0 0 0 4px rgba(23,168,255,.14),0 9px 26px rgba(0,0,0,.4),0 0 8px rgba(131,221,255,.48); }
}

/* The next chapters remain bounded image-and-copy compositions. */
.flow-motion .chapter-flow {
  z-index: auto;
  height: 470vh;
  margin-top: -1px;
  background: #08131c;
  pointer-events: auto;
}

.flow-motion .chapter-flow:not(.flow-active) {
  background: #08131c;
  pointer-events: auto;
}

.flow-motion .chapter-flow-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  visibility: visible;
  background:
    radial-gradient(circle at 14% 30%,rgba(27,120,171,.15),transparent 34%),
    linear-gradient(145deg,#08131c 0%,#0b1923 52%,#070c12 100%);
}

.flow-motion .flow-beat {
  position: absolute;
  inset: 0;
  width: min(1180px,calc(100% - (2 * var(--pad))));
  max-width: 1180px;
  height: 100%;
  margin-inline: auto;
  padding: calc(var(--header-h) + 26px) 0 32px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  align-items: center;
  gap: clamp(34px,5vw,72px);
}

.flow-motion .flow-beat::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: var(--beat-tone-opacity,0);
  background: radial-gradient(circle at 74% 45%,rgba(24,125,184,.11),transparent 36%);
  pointer-events: none;
}

.flow-motion .flow-media {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(131,221,255,.14);
  background: #05080b;
  box-shadow: 0 32px 92px rgba(0,0,0,.42);
  will-change: clip-path;
}

.flow-motion .flow-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}

.flow-motion .flow-media::after {
  background: linear-gradient(0deg,rgba(2,5,9,.17),transparent 42%);
}

.flow-motion .flow-copy {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: auto;
  max-width: 540px;
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity,transform;
}

.flow-motion .flow-copy::before { display: none; }

.flow-motion .flow-beat-drive .flow-media {
  grid-column: 2;
}

.flow-motion .flow-beat-drive .flow-media img { object-position: center; }

.flow-motion .flow-beat-drive .flow-copy { grid-column: 1; }

.flow-motion .flow-copy h2 {
  font-size: clamp(36px,4.2vw,64px);
  line-height: .93;
}

.flow-motion .flow-copy .body-large {
  margin-top: 22px;
  font-size: clamp(15px,1.25vw,19px);
  line-height: 1.52;
}

.flow-motion .chapter-flow .big-number { margin-bottom: 22px; }
.flow-motion .chapter-flow .big-number span { font-size: clamp(76px,7vw,116px); }
.flow-motion .chapter-flow .spec-row { margin-top: 22px; }
.flow-motion .chapter-flow .spec-row span { min-height: 82px; padding: 12px; }
.flow-motion .chapter-flow .fine-print { margin-bottom: 0; }

.flow-motion .cape-gallery {
  z-index: auto;
  min-height: auto;
  margin-top: -1px;
  padding: 4vh var(--pad) 12vh;
  background: #0b0d10;
  pointer-events: auto;
}

.flow-motion .cape-gallery:not(.gallery-active) {
  background: #0b0d10;
  pointer-events: auto;
}

.gallery-bridge { display: none !important; }
.flow-motion .photo-ribbon { margin-top: 0; }

/* Static and reduced-motion fallback keeps the same contained visual language. */
html:not(.flow-motion) .chapter-flow {
  height: auto;
  padding: clamp(76px,10vh,120px) var(--pad);
  background: #08131c;
}

html:not(.story-motion) .handoff-copy {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: block;
  max-width: 900px;
  margin-top: clamp(58px,9vh,96px);
  padding-top: clamp(42px,7vh,76px);
  border-top: 1px solid rgba(131,221,255,.18);
}

html:not(.story-motion) .handoff-copy h2 {
  margin: 0;
  font-size: clamp(36px,4.3vw,66px);
  line-height: .93;
  letter-spacing: -.052em;
}

html:not(.flow-motion) .chapter-flow-sticky {
  display: grid;
  gap: clamp(72px,12vh,130px);
}

html:not(.flow-motion) .flow-beat {
  position: relative;
  inset: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  gap: clamp(32px,5vw,70px);
  align-items: center;
}

html:not(.flow-motion) .flow-media {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  visibility: visible !important;
}

html:not(.flow-motion) .flow-copy {
  position: relative;
  inset: auto;
  width: auto;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .story-motion .story-sequence { height: 760vh; }

  .story-motion .story-stage { box-shadow: 0 24px 66px rgba(0,0,0,.48); }

  .story-motion .prologue-copy,
  .story-motion .handoff-copy {
    max-width: none;
    transform: translateY(0);
  }

  .story-motion .prologue-copy {
    transform: translateY(calc((1 - var(--prologue-opacity)) * -14px));
  }

  .story-motion .handoff-copy {
    transform: translateY(calc((1 - var(--handoff-opacity)) * 16px));
  }

  .story-motion .prologue-copy h2,
  .story-motion .handoff-copy h2 {
    font-size: clamp(28px,8vw,40px);
    line-height: .95;
  }

  .story-motion .prologue-copy .display-line,
  .story-motion .handoff-copy .display-line {
    margin-top: 10px;
    font-size: clamp(20px,5.8vw,27px);
  }

  .story-motion .prologue-copy .body-large,
  .story-motion .handoff-copy .body-large {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.42;
  }

  .story-motion .handoff-copy .flow-stat { display: none; }

  .story-motion .exploded-title {
    left: var(--pad);
    right: var(--pad);
    top: max(72px,calc(var(--story-stage-top,82px) - 52px));
    width: auto;
  }

  .story-motion .exploded-title .chapter-number { margin-bottom: 5px; }
  .story-motion .exploded-title h2 { font-size: clamp(26px,7.6vw,34px); }

  .story-motion .exploded-caption {
    left: var(--pad);
    right: var(--pad);
    width: auto;
    gap: 3px;
  }

  .story-motion .exploded-caption b { display: none; }

  .flow-motion .chapter-flow { height: 500vh; }

  .flow-motion .flow-beat {
    width: calc(100% - 36px);
    padding: calc(var(--header-h) + 18px) 0 max(22px,env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 18px;
  }

  .flow-motion .flow-media,
  .flow-motion .flow-beat-drive .flow-media {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 4 / 3;
  }

  .flow-motion .flow-copy,
  .flow-motion .flow-beat-drive .flow-copy {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }

  .flow-motion .flow-copy h2 { font-size: clamp(29px,8vw,39px); }
  .flow-motion .flow-copy .body-large { margin-top: 10px; font-size: 14px; line-height: 1.42; }
  .flow-motion .flow-beat-engine .body-large { display: none; }
  .flow-motion .chapter-flow .big-number { margin-bottom: 10px; }
  .flow-motion .chapter-flow .big-number span { font-size: clamp(62px,20vw,88px); }
  .flow-motion .chapter-flow .spec-row { margin-top: 12px; }
  .flow-motion .chapter-flow .spec-row span { min-height: 58px; padding: 8px; }
  .flow-motion .chapter-flow .spec-row strong { font-size: 18px; }
  .flow-motion .chapter-flow .spec-row small { font-size: 8px; }
  .flow-motion .chapter-flow .fine-print { display: none; }

  html:not(.flow-motion) .flow-beat {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 760px) and (max-height: 740px) {
  .story-motion .prologue-copy .body-large,
  .story-motion .handoff-copy .body-large { display: none; }
  .story-motion .prologue-copy .display-line,
  .story-motion .handoff-copy .display-line { font-size: clamp(18px,5.2vw,24px); }
  .flow-motion .flow-media,
  .flow-motion .flow-beat-drive .flow-media { max-height: 42svh; }
}

@media (prefers-reduced-motion: reduce), (max-height: 560px) and (orientation: landscape) {
  .engineering-scan { display: none !important; }
  .flow-motion .chapter-flow,
  .flow-motion .cape-gallery { margin-top: -1px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-load > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
