/* ═══════════════════════════════════════════════════════════
   KTS — Karachi Transport Service
   Everything animated here is transform/opacity only, so it
   stays on the compositor and never touches layout.
   ═══════════════════════════════════════════════════════════ */

/* ── type scale ───────────────────────────────────────────── */
.mega{
  font-family:var(--f-disp);font-weight:800;
  font-size:clamp(2.2rem,6.2vw,5.4rem);line-height:.92;letter-spacing:-.035em;
  text-transform:uppercase;
}
.mega .it,.big em,.mega--c .it{
  font-style:italic;font-weight:700;
  color:transparent;-webkit-text-stroke:1.5px var(--amb);
  text-transform:none;letter-spacing:-.02em;
}
.mega .line{display:block;overflow:hidden}
.mega .w{display:inline-block;transform:translate3d(0,110%,0) rotate(4deg);will-change:transform}
.is-lit .mega .w{transform:none;transition:transform .95s var(--ease)}
.is-lit .mega .line:nth-child(2) .w{transition-delay:.09s}
.mega--c{text-align:center}

.big{
  font-family:var(--f-disp);font-weight:800;
  font-size:clamp(2rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.03em;
  text-transform:uppercase;margin:.5rem 0 3rem;
}
.big--c{text-align:center}
.big em{display:inline-block}

.eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ash);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;
}
.eyebrow--c{justify-content:center}
.eyebrow b{width:26px;height:1px;background:var(--amb);display:block}
.sub{margin-top:1.6rem;color:var(--ash);font-size:clamp(.85rem,1.5vw,1rem);letter-spacing:.02em}
.sub--c{text-align:center}

.tag{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--amb);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;
}
.tag--c{justify-content:center}
.tag b{width:34px;height:1px;background:var(--amb);display:block;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.is-lit .tag b{transform:scaleX(1)}

.wrap{width:min(1180px,90vw);margin-inline:auto}
.wrap--wide{width:min(1480px,93vw)}

/* ── cursor: a headlight, not a pointer ───────────────────── */
@media (hover:hover) and (pointer:fine){
  body,a,button{cursor:none}
  #beam{
    position:fixed;top:0;left:0;z-index:150;pointer-events:none;
    width:520px;height:520px;margin:-260px 0 0 -260px;
    opacity:0;transition:opacity .4s var(--ease);
    will-change:transform;
  }
  #beam i{
    display:block;width:100%;height:100%;border-radius:50%;
    background:radial-gradient(circle,var(--amb-soft) 0%,transparent 62%);
    transform:scale(1);transition:transform .5s var(--ease);
  }
  #dot{
    position:fixed;top:0;left:0;z-index:151;pointer-events:none;
    width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
    background:var(--amb);box-shadow:0 0 12px var(--amb);
    opacity:0;transition:opacity .4s var(--ease),width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease);
    will-change:transform;
  }
  body.cursor-on #beam,body.cursor-on #dot{opacity:1}
  body.cursor-hot #dot{width:44px;height:44px;margin:-22px 0 0 -22px;background:transparent;
    border:1px solid var(--amb);box-shadow:none}
  body.cursor-hot #beam i{transform:scale(1.5)}
}
@media not all and (hover:hover){ #beam,#dot{display:none} }

/* ── HUD / nav ────────────────────────────────────────────── */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.4rem clamp(1rem,3vw,2.4rem);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hud.is-stuck{
  background:rgba(6,6,7,.72);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:rgba(237,233,226,.08);padding-block:.9rem;
}
.hud__logo{display:flex;align-items:center;gap:.75rem}
.hud__logo svg{width:34px;height:34px;flex:none;transition:transform .7s var(--ease)}
.hud__logo:hover svg{transform:rotate(-90deg) scale(1.06)}
.hud__wm{display:flex;flex-direction:column;line-height:1}
.hud__wm b{font-family:var(--f-disp);font-weight:800;font-size:15px;letter-spacing:.16em}
.hud__wm em{font-style:normal;font-size:7px;letter-spacing:.24em;color:var(--ash);
  text-transform:uppercase;margin-top:3px}

.hud__nav{display:flex;gap:.4rem}
.hud__nav a{
  position:relative;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);padding:.5rem .85rem;transition:color .35s var(--ease);
}
.hud__nav a::before{
  content:attr(data-idx);position:absolute;top:-2px;left:.85rem;
  font-size:7px;color:var(--amb);opacity:0;transform:translateY(3px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.hud__nav a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:1px;
  background:var(--amb);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.hud__nav a:hover,.hud__nav a.is-here{color:var(--bone)}
.hud__nav a:hover::before,.hud__nav a.is-here::before{opacity:1;transform:none}
.hud__nav a:hover::after,.hud__nav a.is-here::after{transform:scaleX(1);transform-origin:0 50%}

.hud__right{display:flex;align-items:center;gap:1.2rem}

.hud__tel{display:flex;align-items:center;gap:.5rem;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--amb);position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--amb);
  animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}

/* ── button ───────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-grid;place-items:center;
  padding:.85rem 1.7rem;border:1px solid rgba(237,233,226,.22);border-radius:2px;
  overflow:hidden;isolation:isolate;will-change:transform;
  transition:border-color .4s var(--ease),transform .25s var(--ease);
}
.btn__fill{
  position:absolute;inset:0;z-index:-1;background:var(--amb);
  transform:translate3d(0,101%,0);transition:transform .55s var(--ease-io);
}
.btn__label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:color .4s var(--ease)}
.btn__label em{font-style:normal;display:inline-block;transition:transform .45s var(--ease)}
.btn:hover{border-color:var(--amb)}
.btn:hover .btn__fill{transform:none}
.btn:hover .btn__label{color:#000}
.btn:hover .btn__label em{transform:translateX(6px)}
.btn--big{padding:1.3rem 3rem}
.btn--big .btn__label{font-size:12px;letter-spacing:.26em}

/* ── speedometer scroll gauge ─────────────────────────────── */
.speedo{
  position:fixed;right:clamp(1rem,2.4vw,2rem);bottom:clamp(1rem,2.4vw,2rem);z-index:99;
  width:66px;height:66px;display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.speedo.is-on{opacity:1;transform:none}
.speedo svg{position:absolute;inset:0;width:100%;height:100%}
#speedoArc{transition:stroke-dashoffset .18s linear}
.speedo b{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1;
  margin-top:-4px}
.speedo i{position:absolute;bottom:14px;font-size:6px;letter-spacing:.14em;color:var(--ash);
  font-style:normal}

/* ═══════════════════════════════════════════════════════════
   ACT I — THE INGRESS
   ═══════════════════════════════════════════════════════════ */
.ingress{position:relative}
.ingress__rail{height:520vh}                 /* the scroll budget for the whole flight */
.ingress__view{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 62%,#12141a 0%,#070809 55%,#040405 100%);
}

/* ── THE HORIZON.
      Everything in the stage agrees on one number: --hz. The perspective
      vanishing point, every layer's scale origin, the skyline's footing and
      the road's far edge all resolve to the same line, which is the only
      reason the scene reads as one place instead of four stacked pictures. */
.stage{
  --hz:56%;
  position:absolute;inset:0;
  perspective:1000px;              /* must match PERSP in main.js */
  perspective-origin:50% var(--hz);
  transform-style:preserve-3d;
}
.world{
  position:absolute;inset:0;transform-style:preserve-3d;
  will-change:transform;
}
.lyr{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transform-origin:50% var(--hz);  /* scale about the horizon, never the box centre */
  will-change:transform;
}

/* ── sky ── */
.sky__grad{position:absolute;inset:0;
  background:linear-gradient(180deg,#05070c 0%,#080c14 26%,#141620 44%,#2b2020 52%,#5a3418 56%,#2a1a12 60%,#0a0a0c 72%,#070809 100%)}
.sky__sun{
  position:absolute;left:50%;top:56%;width:min(46vw,680px);aspect-ratio:1;
  transform:translate(-50%,-62%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,50,.55) 0%,rgba(255,90,20,.18) 34%,transparent 62%);
}
.sky__haze{position:absolute;left:0;right:0;top:50%;height:14%;
  background:linear-gradient(180deg,transparent,rgba(120,64,26,.4),transparent)}

/* ── skyline: stands ON the horizon ── */
.skyline{position:absolute;left:50%;bottom:44%;width:150%;max-width:none;height:auto;
  transform:translateX(-50%)}
.glints rect{animation:glint 4s steps(2) infinite}
.glints rect:nth-child(2n){animation-duration:6s;animation-delay:-2s}
.glints rect:nth-child(3n){animation-duration:5s;animation-delay:-1s}
@keyframes glint{0%,60%{opacity:.55}61%,100%{opacity:.1}}
/* ── the road: a real plane laid into the floor, hinged at the bottom
      of the screen so its far edge lands exactly on --hz. It is NOT
      scale-compensated — the rotateX already does the depth work, and
      scaling a 300vh plane is how you lose your frame budget. ── */
.road{
  position:absolute;left:50%;bottom:0;
  width:170vw;height:300vh;
  transform:translateX(-50%) rotateX(84deg);
  transform-origin:50% 100%;
  transform-style:flat;   /* children are all 2D within the plane; flat is cheaper */
}
.road__tarmac{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,#1a1d24 0%,#141117 30%,#0e0f13 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 200px,transparent 200px 400px);
  /* dissolve the far end into the dusk haze so the plane's end
     is never a visible seam against the skyline */
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%);
}
/* The markings scroll by TRANSFORM, not background-position. Animating
   background-position repaints the layer every frame; translating a
   pre-drawn stripe is pure compositing. The mask lives on this wrapper so
   it stays put while the stripes move underneath it. */
.road__marks{
  position:absolute;inset:0;overflow:hidden;
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%);
}
.road__lane{
  position:absolute;left:50%;top:-300px;bottom:0;width:18px;
  background:repeating-linear-gradient(180deg,var(--amb) 0 90px,transparent 90px 300px);
  opacity:.85;
  animation:rushLane 1.1s linear infinite;
}
.road__edge{
  position:absolute;top:-120px;bottom:0;width:8px;
  background:repeating-linear-gradient(180deg,rgba(237,233,226,.7) 0 60px,transparent 60px 120px);
  opacity:.35;
  animation:rushEdge 1.1s linear infinite;
}
.road__edge--l{left:30%}
.road__edge--r{right:30%}
/* each stripe travels exactly ONE period, or it visibly jumps on loop —
   the lane repeats every 300px, the edges every 120px, so they cannot
   share a keyframe */
@keyframes rushLane{
  from{transform:translate3d(-50%,0,0)}
  to  {transform:translate3d(-50%,300px,0)}
}
@keyframes rushEdge{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(0,120px,0)}
}

/* ── the car: parked on the horizon, so it grows out of the
      vanishing point rather than sliding down the screen ── */
.car{position:absolute;left:50%;top:56%;transform:translate(-50%,-52%);
  width:min(92vw,900px)}
/* NO filters on the car. The rig scales this element to ~10× the viewport
   during the breach; a drop-shadow or blur here forces Chrome to
   re-rasterise and blur a surface of that size every single frame, which
   measured as the single largest cost in the whole scene. The radial
   gradients below are pure compositing and cost nothing at any scale. */
.car svg{width:100%;height:auto}
.car__pool{
  position:absolute;left:50%;bottom:-6%;width:120%;height:70px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,var(--amb-soft) 0%,transparent 70%);
}
.lamp-bar{animation:lampWake 3s var(--ease) infinite alternate}
@keyframes lampWake{0%{opacity:.75}100%{opacity:1}}
.lamp-glow{animation:lampWake 3s var(--ease) infinite alternate-reverse}

/* ── CABIN ── */
/* NB: nothing here ever animates opacity. .cabin is the preserve-3d root for
   the interior — fading it flattens every layer's depth. The cabin is cut in
   on the breach flash instead (see main.js). */
.cabin{position:absolute;inset:0;transform-style:preserve-3d;visibility:hidden}
.cabsvg{position:absolute;inset:0;width:100%;height:100%}
/* A portrait phone slices this landscape cabin down to viewBox x 512–928,
   which cuts the chauffeur (who must sit right-of-centre — right-hand drive)
   clean off the edge. So squeeze the SVG's CONTENT, not the layer: a CSS
   transform never shrinks the element's box, so squeezing the .cab layer
   left bare strips down both sides, and un-clipping the SVG to hide them
   made Chrome rasterise the shell's whole −700…2140 fill (frames went from
   33ms to 116ms under throttle). Scaling the inner group keeps the raster
   bounded to the layer and costs nothing. */
.cabg{transform-box:view-box;transform-origin:720px 450px}
.ambline{
  filter:drop-shadow(0 0 10px var(--amb));
  animation:breathe 5s var(--ease) infinite alternate;
}
@keyframes breathe{0%{opacity:.5}100%{opacity:1}}
.needle-arc{filter:drop-shadow(0 0 6px var(--amb));
  transform-box:fill-box;transform-origin:0 50%}
.wiper{animation:wipe 7s var(--ease) infinite}
@keyframes wipe{0%,72%{opacity:0}76%{opacity:1}100%{opacity:0}}
.chauffeur{animation:drive 6s var(--ease) infinite alternate}
@keyframes drive{0%{transform:translateX(0)}100%{transform:translateX(-5px)}}

/* stage overlays */
.breach{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,#fff 0%,var(--amb) 26%,transparent 62%);
  mix-blend-mode:screen;
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 42%,rgba(0,0,0,.72) 100%);
}
#motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.7}

/* ── ingress titles ── */
.ingress__ui{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  padding:0 6vw}
.tt{
  grid-area:1/1;text-align:left;
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  will-change:transform,opacity;
}
.tt--2,.tt--3{text-align:center}
/* The cabin reveal is the payoff shot — the type is the caption, not the
   subject. It gets out of the way of the seats, the chauffeur and the glass. */
.tt--2 .mega,.tt--3 .mega{font-size:clamp(1.7rem,4.3vw,3.6rem)}
.tt--3{align-self:start;padding-top:12vh}
.tt.is-on{opacity:1;transform:none}
.tt.is-on .w{transform:none;transition:transform .95s var(--ease)}
.tt .w{display:inline-block;transform:translate3d(0,110%,0) rotate(4deg)}
.tt.is-on .line:nth-child(2) .w{transition-delay:.08s}
.tt--1{max-width:min(90vw,1000px);justify-self:start}

.scroll-cue{margin-top:2.6rem;width:22px;height:36px;border:1px solid rgba(237,233,226,.24);
  border-radius:12px;position:relative}
.scroll-cue i{position:absolute;left:50%;top:7px;width:2px;height:7px;border-radius:2px;
  background:var(--amb);transform:translateX(-50%);animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{transform:translate(-50%,0);opacity:0}30%{opacity:1}70%{transform:translate(-50%,14px);opacity:0}100%{opacity:0}}

/* telemetry */
.telem{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:center;gap:clamp(1.4rem,5vw,4rem);
  padding:1.1rem 6vw;border-top:1px solid rgba(237,233,226,.07);
  background:linear-gradient(180deg,transparent,rgba(6,6,7,.6));
  opacity:0;transform:translateY(100%);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.telem.is-on{opacity:1;transform:none}
.telem span{display:flex;flex-direction:column;gap:.35rem;text-align:center}
.telem b{font-size:8px;letter-spacing:.3em;color:var(--ash)}
.telem i{font-style:normal;font-size:12px;letter-spacing:.12em;color:var(--amb);
  font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════
   ACT II — MANIFESTO
   ═══════════════════════════════════════════════════════════ */
.mani{position:relative;padding:0 0 clamp(6rem,12vw,11rem);background:var(--obsidian);z-index:2}
.mani__marq{
  overflow:hidden;border-block:1px solid rgba(237,233,226,.08);
  padding:1.5rem 0;margin-bottom:clamp(5rem,10vw,9rem);
  background:var(--ink);
}
.marq__row{display:flex;width:max-content;will-change:transform}
.marq__row span{
  font-family:var(--f-disp);font-weight:800;font-size:clamp(1.6rem,4vw,3.2rem);
  letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(237,233,226,.28);
  padding-right:2rem;
}
.marq__row b{color:var(--amb);-webkit-text-stroke:0;margin:0 1.6rem;font-size:.5em;
  vertical-align:middle}

.reveal-copy{
  font-size:clamp(1.15rem,2.5vw,2.05rem);line-height:1.5;letter-spacing:-.015em;
  font-weight:300;max-width:26ch;max-width:min(100%,30em);
}
.reveal-copy .ch{color:rgba(237,233,226,.14);transition:color .5s var(--ease)}
.reveal-copy .ch.is-on{color:var(--bone)}

.mani__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:2.5rem;margin-top:clamp(3.5rem,7vw,6rem);
  padding-top:2.6rem;border-top:1px solid rgba(237,233,226,.08);
}
.mini b{display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.04em;color:var(--amb);line-height:1}
.mini i{display:block;margin-top:.6rem;font-style:normal;font-size:.85rem;color:var(--ash);
  line-height:1.5}

/* ═══════════════════════════════════════════════════════════
   ACT III — THE FLEET (pinned horizontal)
   ═══════════════════════════════════════════════════════════ */
.fleet{position:relative;background:var(--ink);z-index:2}
.fleet__rail{height:460vh}
.fleet__view{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:1.6rem;
  padding-top:3.5rem}
.fleet__view::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 100%,var(--amb-soft),transparent 70%);
}
.fleet__head{padding-inline:clamp(1.4rem,5vw,4rem);position:relative;z-index:2;text-align:center}
.fleet__head .big{margin-bottom:1rem;font-size:clamp(1.6rem,3.6vw,2.8rem)}
.fleet__hint{display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.fleet__hint i{width:16px;height:1px;background:var(--amb);animation:hint 2s var(--ease) infinite}
@keyframes hint{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}

.track{
  display:flex;gap:clamp(1rem,2vw,1.8rem);
  padding-inline:clamp(1.4rem,10vw,10rem);
  will-change:transform;position:relative;z-index:2;
}
.card{
  position:relative;flex:none;
  width:clamp(300px,32vw,430px);
  padding:1.4rem 1.5rem 1.4rem;
  border:1px solid rgba(237,233,226,.09);border-radius:3px;
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.005));
  transform-style:preserve-3d;
  transition:border-color .5s var(--ease),background .5s var(--ease);
  overflow:hidden;
  /* column + margin-top:auto on the rate is what keeps every price on the
     same baseline when a name like "Mercedes-Benz S-Class" wraps to two
     lines and "Lexus LX 600" doesn't */
  display:flex;flex-direction:column;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--amb-soft),transparent 65%);
  transition:opacity .45s var(--ease);
}
.card:hover{border-color:rgba(200,161,90,.4)}
.card:hover::before{opacity:1}
.card__tier{
  position:absolute;top:1.4rem;right:1.4rem;font-size:8px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amb);padding:.3rem .55rem;
  border:1px solid rgba(200,161,90,.3);border-radius:2px;
}
.card__no{font-family:var(--f-disp);font-weight:800;font-size:11px;letter-spacing:.2em;
  color:var(--ash)}
.card__art{
  position:relative;margin:.9rem 0 1rem;transform:translateZ(46px);
  transition:transform .6s var(--ease);
}
.card:hover .card__art{transform:translateZ(70px)}

/* DEFAULT: the built-in studio render (instant, no network) */
.card__art .carphoto{display:block;width:100%;height:auto}
/* Real photo loads hidden; revealed on load. Fixed height (not aspect-ratio)
   so the whole card — including the price — always fits inside the pinned
   100svh fleet viewport on desktop; object-fit crops cleanly. */
.card__photo{
  display:none;width:100%;height:clamp(168px,15vw,206px);object-fit:cover;
  border-radius:5px;background:#0d0f13;
  box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(237,233,226,.06);
}
.card__art.hasphoto .card__photo{display:block}
.card__art.hasphoto .carphoto{display:none}
.card__art.hasphoto::after{               /* bottom gradient, only over a photo */
  content:"";position:absolute;left:0;right:0;bottom:0;height:44%;border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,transparent,rgba(6,6,7,.5));pointer-events:none;
}

/* colour swatch labels the render's paint; a real photo speaks for itself */
.card__swatch{
  position:absolute;left:0;bottom:2px;
  display:flex;align-items:center;gap:.4rem;
  font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);
}
.card__swatch::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--amb);box-shadow:0 0 0 1px rgba(237,233,226,.2)}
.card__art.hasphoto .card__swatch{display:none}
.card__name{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.25rem,2vw,1.55rem);
  letter-spacing:-.02em;line-height:1.05;transform:translateZ(30px);
  min-height:2.5em}   /* reserve name (up to 2 lines) + the alias */
.card__alias{display:block;font-family:var(--f-body);font-weight:300;font-style:italic;
  font-size:.76rem;letter-spacing:.02em;color:var(--amb);margin-top:.35rem;text-transform:none}
.card__desc{margin-top:.7rem;font-size:.8rem;line-height:1.55;color:var(--ash);
  transform:translateZ(20px);min-height:3.7em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__specs{
  display:flex;gap:1.4rem;margin-top:1rem;padding-top:.9rem;
  border-top:1px solid rgba(237,233,226,.08);transform:translateZ(16px);
}
.card__specs div{display:flex;flex-direction:column;gap:.25rem}
.card__specs b{font-size:7px;letter-spacing:.24em;color:var(--ash);text-transform:uppercase}
.card__specs i{font-style:normal;font-size:.9rem;color:var(--bone);font-variant-numeric:tabular-nums}
.card__rate{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:auto;padding-top:.9rem;
  transform:translateZ(16px);
}
.card__rate s{text-decoration:none;font-size:9px;letter-spacing:.2em;color:var(--ash);
  text-transform:uppercase}
.card__rate u{text-decoration:none;font-family:var(--f-disp);font-weight:800;font-size:1.2rem;
  color:var(--amb);letter-spacing:-.02em}

.fleet__prog{position:absolute;left:clamp(1.4rem,10vw,10rem);right:clamp(1.4rem,10vw,10rem);
  bottom:2.6rem;height:1px;background:rgba(237,233,226,.1);z-index:2}
.fleet__prog i{display:block;height:100%;background:var(--amb);transform:scaleX(0);
  transform-origin:0 50%;box-shadow:0 0 10px var(--amb)}

/* ═══════════════════════════════════════════════════════════
   ACT IV — FEEL IT
   ═══════════════════════════════════════════════════════════ */
.feel{position:relative;padding:clamp(6rem,12vw,11rem) 0;background:var(--obsidian);z-index:2}
.feel__body{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,4rem);
  align-items:start}

.feel__surface{
  position:relative;aspect-ratio:4/3.1;border-radius:4px;overflow:hidden;
  border:1px solid rgba(237,233,226,.1);
  isolation:isolate;
}
.surf__skin{position:absolute;inset:0;transition:background .8s var(--ease),background-size .8s var(--ease)}
.surf__stitch{position:absolute;inset:0;opacity:.7;transition:opacity .6s var(--ease)}
.surf__gloss{
  position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);mix-blend-mode:soft-light;
}
.feel__surface:hover .surf__gloss{opacity:1}
.surf__meta{position:absolute;left:1.6rem;bottom:1.5rem;right:1.6rem;z-index:2}
.surf__meta b{display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:-.02em}
.surf__meta i{display:block;margin-top:.4rem;font-style:normal;font-size:.82rem;
  color:rgba(237,233,226,.7);max-width:44ch;line-height:1.55}
.surf__touch{
  position:absolute;top:1.4rem;right:1.6rem;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(237,233,226,.45);z-index:2;
  transition:opacity .5s var(--ease);
}
.feel__surface:hover .surf__touch{opacity:0}
.feel__surface::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7));
}

/* material skins — pure CSS, zero image bytes */
[data-mat="nappa"] .surf__skin{
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.05) 0 1px,transparent 1.5px) 0 0/9px 9px,
    radial-gradient(circle at 70% 70%,rgba(0,0,0,.4) 0 1.5px,transparent 2px) 4px 4px/9px 9px,
    linear-gradient(140deg,#7d5c42,#4a3528 60%,#2e2018);
}
/* diamond quilt, not graph paper — two opposed diagonals is what a
   Nappa seat actually does, and it costs the same as a grid */
[data-mat="nappa"] .surf__stitch{
  opacity:.5;
  background:
    repeating-linear-gradient(58deg,transparent 0 76px,rgba(232,205,146,.5) 76px 78px),
    repeating-linear-gradient(-58deg,transparent 0 76px,rgba(232,205,146,.5) 76px 78px);
}
[data-mat="alcantara"] .surf__skin{
  background:
    repeating-linear-gradient(58deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px),
    repeating-linear-gradient(-58deg,rgba(0,0,0,.25) 0 2px,transparent 2px 5px),
    linear-gradient(140deg,#3a3f4a,#1a1c22 65%,#0e1014);
}
[data-mat="alcantara"] .surf__stitch{
  background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(237,233,226,.06) 44px 46px);
}
[data-mat="walnut"] .surf__skin{
  background:
    repeating-linear-gradient(96deg,rgba(0,0,0,.32) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(88deg,rgba(255,220,160,.09) 0 2px,transparent 2px 13px),
    radial-gradient(ellipse 60% 120% at 30% 40%,rgba(0,0,0,.4),transparent 60%),
    radial-gradient(ellipse 40% 90% at 74% 66%,rgba(0,0,0,.35),transparent 60%),
    linear-gradient(120deg,#8a5a2c,#5c3a1c 55%,#3a2414);
}
[data-mat="walnut"] .surf__stitch{opacity:.18;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 40%)}
[data-mat="carbon"] .surf__skin{
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,#22252b 0 25%,#0f1114 0 50%) 0 0/16px 16px,
    linear-gradient(140deg,#3d4048,#0a0b0d 70%);
}
[data-mat="carbon"] .surf__stitch{opacity:.3;
  background:radial-gradient(ellipse 70% 50% at 40% 30%,rgba(255,255,255,.12),transparent 60%)}

.feel__side{display:flex;flex-direction:column;gap:2.4rem}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.sw{display:flex;flex-direction:column;gap:.55rem;align-items:center;padding:.7rem .3rem;
  border:1px solid rgba(237,233,226,.09);border-radius:2px;
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.sw i{width:100%;aspect-ratio:1;border-radius:2px;
  background:linear-gradient(140deg,var(--b),var(--a));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sw span{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  transition:color .4s var(--ease)}
.sw:hover{border-color:rgba(200,161,90,.4);transform:translateY(-3px)}
.sw.is-on{border-color:var(--amb)}
.sw.is-on span{color:var(--bone)}

.amb__label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.amb__label b{color:var(--amb)}
.amb__note{font-size:.78rem;color:var(--ash);margin-top:.35rem;opacity:.65}
.amb__chips{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}
.chip{width:30px;height:30px;border-radius:50%;background:var(--c);position:relative;
  transition:transform .4s var(--ease)}
.chip::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--c);opacity:0;transform:scale(.7);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.chip:hover{transform:scale(1.12)}
.chip.is-on::after{opacity:1;transform:none}

.meters{display:flex;flex-direction:column;gap:1.5rem}
.meter{display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;align-items:baseline}
.meter b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.meter u{text-decoration:none;font-family:var(--f-disp);font-weight:800;font-size:1.1rem;
  color:var(--amb);font-variant-numeric:tabular-nums;justify-self:end}
.meter u small{font-size:.6em;opacity:.7}
.meter i{grid-column:1/-1;display:block;height:2px;background:rgba(237,233,226,.09);
  border-radius:2px;overflow:hidden;order:3}
.meter s{display:block;height:100%;background:var(--amb);text-decoration:none;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.4s var(--ease);box-shadow:0 0 10px var(--amb)}
.meter.is-on s{transform:scaleX(var(--p,1))}
.meter em{grid-column:1/-1;order:4;font-style:normal;font-size:.74rem;color:var(--ash);
  opacity:.72;margin-top:.15rem}

/* ═══════════════════════════════════════════════════════════
   ACT V — THE CITY
   ═══════════════════════════════════════════════════════════ */
.city{position:relative;padding:clamp(6rem,12vw,11rem) 0;background:var(--ink);z-index:2}
.city__body{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(2rem,4vw,4rem);
  align-items:center}
.citymap{position:relative}
.citymap svg{width:100%;height:auto;overflow:visible}
.coast{stroke:var(--amb);stroke-width:1.5;opacity:.5;
  stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.4s var(--ease)}
.is-lit .coast{stroke-dashoffset:0}
.sea{fill:var(--amb);opacity:.045}
.grid path{fill:none;stroke:rgba(237,233,226,.12);stroke-width:1;
  stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s var(--ease)}
.is-lit .grid path{stroke-dashoffset:0}
.is-lit .grid path:nth-child(2){transition-delay:.1s}
.is-lit .grid path:nth-child(3){transition-delay:.2s}
.is-lit .grid path:nth-child(4){transition-delay:.3s}
.route{filter:drop-shadow(0 0 8px var(--amb));stroke-dasharray:var(--rl,900);
  stroke-dashoffset:var(--rl,900);transition:stroke-dashoffset 1.6s var(--ease)}
.is-lit .route{stroke-dashoffset:0}
/* tight glow only — a wide one turns the car silhouette into a blob */
.car-dot{filter:drop-shadow(0 0 5px rgba(200,161,90,.5));opacity:0;transition:opacity .5s var(--ease)}
.car-halo{opacity:0}
.is-lit .car-dot{opacity:1}
.node{cursor:pointer}
.node circle{fill:var(--bone);transition:fill .4s var(--ease),r .4s var(--ease)}
.node .ring{fill:none;stroke:var(--amb);stroke-width:1;opacity:.4;
  transform-box:fill-box;transform-origin:center;animation:ring 3s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.node text{fill:var(--ash);font-size:8px;letter-spacing:.16em;font-family:var(--f-body);
  transition:fill .4s var(--ease)}
.node:hover circle:first-child{fill:var(--amb)}
.node:hover text{fill:var(--bone)}
.node.is-active circle:first-child{fill:var(--amb)}
.node.is-active text{fill:var(--bone)}
.sea-label{fill:var(--amb);opacity:.3;font-size:11px;letter-spacing:.5em;
  font-family:var(--f-body);text-anchor:middle}

/* ── arrival theatre: runway, jet, contrail, status board ── */
.runway rect{fill:rgba(237,233,226,.06);stroke:rgba(237,233,226,.18);stroke-width:1}
.runway__dash{stroke:var(--amb);stroke-width:1.5;stroke-dasharray:6 9;opacity:.55}
.runway__beacon{fill:var(--amb);animation:beacon 1.4s var(--ease) infinite}
@keyframes beacon{0%,100%{opacity:.25}50%{opacity:1}}
.contrail{stroke:#cfe0ff;stroke-width:1.5;opacity:0;stroke-linecap:round}
.plane{filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.plane__strobe{animation:strobe 1s steps(2) infinite}
@keyframes strobe{0%{opacity:1}50%{opacity:.1}}
.map-status{
  position:absolute;top:1rem;left:1rem;z-index:5;
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .9rem;border:1px solid rgba(200,161,90,.34);border-radius:2px;
  background:rgba(6,6,7,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
}
.map-status i{width:7px;height:7px;border-radius:50%;background:var(--amb);position:relative;flex:none}
.map-status i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--amb);
  animation:pulse 1.8s var(--ease) infinite}
.map-status b{color:var(--amb);font-weight:700}
.map-status span{color:var(--ash)}
.map-status.swap{opacity:0;transform:translateY(-4px)}
.map-status{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.citymap__tip{
  position:absolute;pointer-events:none;padding:.45rem .8rem;border-radius:2px;
  background:var(--obsidian);border:1px solid rgba(200,161,90,.34);
  font-size:10px;letter-spacing:.12em;white-space:nowrap;
  opacity:0;transform:translate(-50%,-140%) scale(.9);
  transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:5;
}
.citymap__tip.is-on{opacity:1;transform:translate(-50%,-160%) scale(1)}

.city__side{display:flex;flex-direction:column;gap:2rem}
.routes{display:flex;flex-direction:column;gap:.5rem}
.route-btn{
  display:flex;flex-direction:column;gap:.25rem;text-align:left;padding:.9rem 1rem;
  border:1px solid rgba(237,233,226,.09);border-radius:2px;position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.route-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--amb);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .45s var(--ease)}
.route-btn b{font-size:.9rem;font-weight:400}
.route-btn i{font-style:normal;font-size:.72rem;color:var(--ash);letter-spacing:.1em}
.route-btn:hover{border-color:rgba(200,161,90,.34);transform:translateX(4px)}
.route-btn.is-on{border-color:rgba(200,161,90,.4)}
.route-btn.is-on::before{transform:scaleY(1)}
.city__note{font-size:.82rem;line-height:1.7;color:var(--ash);padding-top:1.4rem;
  border-top:1px solid rgba(237,233,226,.08)}

/* ═══════════════════════════════════════════════════════════
   ACT VI — THE STANDARD
   ═══════════════════════════════════════════════════════════ */
.assure{position:relative;padding:clamp(6rem,12vw,10rem) 0;background:var(--obsidian);z-index:2}
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:2.5rem;margin:2rem 0 clamp(4rem,8vw,7rem)}
.ctr b{display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--amb);font-variant-numeric:tabular-nums}
.ctr i{display:block;margin-top:.7rem;font-style:normal;font-size:.8rem;color:var(--ash);
  line-height:1.5}
.pledges{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:rgba(237,233,226,.08);border:1px solid rgba(237,233,226,.08)}
.pledge{background:var(--obsidian);padding:2rem 1.8rem;position:relative;
  transition:background .5s var(--ease)}
.pledge:hover{background:var(--ink)}
.pledge span{color:var(--amb);font-size:.6rem;display:block;margin-bottom:1rem}
.pledge b{display:block;font-size:1rem;font-weight:400;line-height:1.35;letter-spacing:-.01em}
.pledge i{display:block;margin-top:.7rem;font-style:normal;font-size:.8rem;color:var(--ash);
  line-height:1.6}

/* ═══════════════════════════════════════════════════════════
   ACT VII — WORD OF MOUTH
   ═══════════════════════════════════════════════════════════ */
.reviews{position:relative;padding:clamp(6rem,12vw,10rem) 0;background:var(--ink);z-index:2;
  overflow:hidden}
.rev__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;margin-bottom:clamp(2.6rem,4.8vw,3.6rem)}
.rev__head .big{margin-bottom:0}
.rev__score{display:flex;align-items:center;gap:.7rem;flex-shrink:0;
  padding:.9rem 1.3rem;border:1px solid rgba(237,233,226,.14);border-radius:2px;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.rev__score:hover{border-color:var(--amb);transform:translateY(-3px);
  box-shadow:0 16px 40px -18px var(--amb-soft)}
.rev__g{width:22px;height:22px;flex:none}
.rev__score b{font-family:var(--f-disp);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
/* the rating stars fill like the meters in the cabin section — a dim row
   underneath, a gold row on top revealed by a widening clip as it enters view */
.rev__stars{position:relative;display:inline-block;font-size:.9rem;letter-spacing:.06em;line-height:1}
.rev__stars-bg{color:rgba(237,233,226,.16)}
.rev__stars-fg{position:absolute;left:0;top:0;overflow:hidden;width:0;white-space:nowrap;
  color:var(--amb);transition:width 1.5s var(--ease)}
.js-count.is-on .rev__stars-fg{width:var(--fill,98%)}
.rev__score i{font-style:normal;font-size:.72rem;color:var(--ash);letter-spacing:.04em;
  white-space:nowrap}

/* the track: no scrollbar, no manual drag — it auto-scrolls with the page,
   same mechanic as the manifesto marquee (JS mirrors the review set once
   for a seamless loop, then reads scroll position into a translateX).
   Edge-masked so cards fade out rather than hard-clip against the wrap.
   Two layers, same split as .mani__marq/.marq__row: .revwrap holds the
   clip + mask at a fixed spot, .revtrack is the row that actually slides —
   putting overflow:hidden on the element being translated would drag the
   clip boundary along with it and leave a gap where the row used to sit. */
.revwrap{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.revtrack{display:flex;gap:1.1rem;width:max-content;will-change:transform;
  padding:.4rem .2rem 1.6rem}
/* reveal wrapper: owns the scroll-in transform, so the JS-driven pointer
   tilt on .revcard (below) never has to fight a CSS transition on the
   same property — exactly the split the fleet cards use, just explicit */
.revcell{flex:none;width:min(82vw,360px);
  opacity:0;transform:translate3d(0,46px,0) rotate(1.4deg);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.revtrack.is-in .revcell{opacity:1;transform:none}
.revtrack.is-in .revcell:nth-child(2){transition-delay:.08s}
.revtrack.is-in .revcell:nth-child(3){transition-delay:.16s}
.revtrack.is-in .revcell:nth-child(4){transition-delay:.24s}
.revtrack.is-in .revcell:nth-child(5){transition-delay:.32s}
.revtrack.is-in .revcell:nth-child(6){transition-delay:.4s}
.revcard{
  --ac:var(--amb);
  position:relative;height:100%;background:var(--obsidian);
  border:1px solid rgba(237,233,226,.08);padding:1.8rem 1.6rem;
  border-radius:3px;display:flex;flex-direction:column;gap:1.1rem;
  transform-style:preserve-3d;overflow:hidden;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.revcard:hover{border-color:rgba(200,161,90,.4);box-shadow:0 24px 60px -24px rgba(0,0,0,.65)}
.revcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(200,161,90,.16),transparent 65%);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--ac) 24%, transparent),transparent 65%);
  transition:opacity .45s var(--ease)}
.revcard:hover::before{opacity:1}
.revcard__quote{
  position:absolute;top:-.5rem;right:.7rem;font-family:var(--f-disp);font-weight:800;
  font-size:5rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--ac);
  opacity:.28;pointer-events:none;transform:translateZ(6px)}
.revcard header{position:relative;z-index:1;display:flex;align-items:center;gap:.8rem;
  transform:translateZ(20px)}
.revcard__ava{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(200,161,90,.2);
  background:color-mix(in srgb, var(--ac) 22%, transparent);
  color:var(--ac);font-family:var(--f-disp);font-weight:800;font-size:.95rem}
.revcard header div{flex:1;min-width:0}
.revcard header b{display:block;font-size:.86rem;font-weight:400;letter-spacing:.01em}
.revcard header i{display:block;margin-top:.2rem;font-style:normal;font-size:.72rem;color:var(--ash)}
.revcard__stars{color:var(--ac);font-size:.72rem;letter-spacing:.05em;flex:none}
.revcard p{position:relative;z-index:1;font-size:.84rem;line-height:1.7;color:var(--ash);
  transform:translateZ(12px);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}

.rev__more{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;
  font-size:.82rem;letter-spacing:.04em;color:var(--amb);
  border-bottom:1px solid rgba(200,161,90,.35);padding-bottom:.3rem;
  transition:border-color .35s var(--ease),gap .35s var(--ease)}
.rev__more:hover{border-color:var(--amb);gap:.8rem}
.rev__more em{font-style:normal}

/* ═══════════════════════════════════════════════════════════
   ACT VIII — RESERVE
   ═══════════════════════════════════════════════════════════ */
.book{position:relative;padding:clamp(6rem,12vw,11rem) 0;background:var(--ink);
  overflow:hidden;z-index:2}
.book__glow{
  position:absolute;left:50%;top:-10%;width:min(120vw,1200px);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,var(--amb-soft) 0%,transparent 60%);
  filter:blur(30px);
}
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2rem;
  max-width:900px;margin-inline:auto;position:relative}
.f{display:flex;flex-direction:column;gap:.5rem;position:relative}
.f--full{grid-column:1/-1}
.f label{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);
  transition:color .4s var(--ease)}
.f input,.f select{
  padding:.85rem 0;border-bottom:1px solid rgba(237,233,226,.16);
  font-size:.95rem;font-weight:300;
  transition:border-color .4s var(--ease);
}
.f select{cursor:pointer}
.f select option{background:var(--ink);color:var(--bone)}
.f input::placeholder{color:rgba(139,143,152,.5)}
.f input:focus,.f select:focus{outline:none;border-bottom-color:var(--amb)}
.f:focus-within label{color:var(--amb)}
.f input:invalid:not(:placeholder-shown){border-bottom-color:rgba(255,59,107,.6)}
.form__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-top:1.4rem}
.form__note{font-size:.76rem;color:var(--ash);max-width:34ch;line-height:1.6}
.form__ok{grid-column:1/-1;font-size:.85rem;color:var(--amb);letter-spacing:.06em;
  min-height:1.4em;opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.form__ok.is-on{opacity:1;transform:none}

/* ── footer ── */
.foot{background:var(--obsidian);padding:clamp(4rem,8vw,7rem) 0 2rem;
  border-top:1px solid rgba(237,233,226,.08);position:relative;z-index:2}
.foot__top{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,6rem);
  padding-bottom:4rem}
.foot__logo{display:flex;align-items:flex-start;gap:1rem}
.foot__logo svg{width:44px;height:44px;flex:none}
.foot__logo b{font-family:var(--f-disp);font-weight:800;font-size:12px;letter-spacing:.2em;
  line-height:1.7}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem}
.foot__cols h4{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--amb);
  margin-bottom:1.1rem;font-weight:400}
.foot__cols a,.foot__cols span{display:block;font-size:.82rem;color:var(--ash);
  margin-bottom:.6rem;line-height:1.6;transition:color .35s var(--ease),transform .35s var(--ease)}
.foot__cols a:hover{color:var(--bone);transform:translateX(4px)}
.foot__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding-top:1.8rem;border-top:1px solid rgba(237,233,226,.08);
  font-size:10px;letter-spacing:.16em;color:var(--ash);text-transform:uppercase}
.foot__made{color:var(--amb);opacity:.7}
.foot__up{transition:color .35s var(--ease)}
.foot__up:hover{color:var(--amb)}

/* ── scroll-reveal primitive ── */
[data-lift]{opacity:0;transform:translate3d(0,34px,0);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-lift].is-lit{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .feel__body,.city__body{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
}
@media (max-width:820px){
  .hud__nav{display:none}
  .hud__tel{display:none}
  /* mobile HUD: just the logo + Reserve; drop the full wordmark for room */
  .hud{gap:.6rem;padding-inline:1rem}
  .hud__wm em{display:none}
  .stage{perspective:640px}
  .ingress__rail{height:400vh}
  .fleet__rail{height:380vh}
  .form{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .speedo{width:54px;height:54px}
  .tt--1{justify-self:center;text-align:center}
  .tt--1 .eyebrow{justify-content:center}
  .tt--1 .scroll-cue{margin-inline:auto}
  .car{width:130vw}
  .telem{gap:1.2rem;padding-inline:1rem}
  /* pull the chauffeur and both headrests back inside the portrait crop */
  .cabg{transform:scaleX(.74)}
  /* Portrait slices the cabin to viewBox x 512–928. The rear screen would
     survive only as a stranded fragment, so it goes — the telemetry strip
     already carries the same information on small screens. */
  .rearscreen{display:none}

  /* REVIEWS on a phone: the horizontal marquee hides text behind the edge
     mask and never holds still, so drop it entirely for a readable vertical
     stack. Full-width cards, full review text, and each one rises + fades in
     as it scrolls into view (JS toggles .is-in per card). */
  .revwrap{overflow:visible;mask-image:none;-webkit-mask-image:none}
  .revtrack{transform:none !important;flex-direction:column;width:auto;
    gap:1.1rem;padding:.2rem 0 0}
  .revcell{width:100%;
    opacity:0;transform:translate3d(0,42px,0) scale(.965);
    transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .revcell.is-in{opacity:1;transform:none}
  .revcard{height:auto;padding:1.7rem 1.5rem;
    border-left:2px solid color-mix(in srgb, var(--ac) 55%, transparent)}
  /* nothing is off-screen now, so show the whole review, not a clamped tease */
  .revcard p{-webkit-line-clamp:unset;line-clamp:unset;-webkit-box-orient:unset;display:block}
  .revcard__quote{font-size:4.2rem;opacity:.22}
}
@media (max-width:520px){
  .mani__grid{gap:1.8rem}
  .card{width:min(84vw,340px)}
  .foot__bar{justify-content:center;text-align:center}
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — the site still tells the whole story,
   it just stops moving. Nothing is hidden from anyone.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  /* Don't dismantle the stage — just stop it. The p=0 frame (dusk skyline,
     road to the vanishing point, headlights on the horizon) is already a
     finished hero, and JS never writes a transform in this mode, so every
     layer simply rests at its authored position. Taking the perspective away
     was what collapsed the road and threw the car under the nav. */
  .ingress__rail{height:auto}
  .ingress__view{position:relative;height:100svh}
  .cabin{display:none}
  .tt{opacity:1;transform:none}
  .tt--2,.tt--3{display:none}
  .tt .w{transform:none}
  .telem{opacity:1;transform:none}
  .fleet__rail{height:auto}
  .fleet__view{position:relative;height:auto;padding:6rem 0}
  .track{transform:none !important;flex-wrap:wrap;justify-content:center}
  .marq__row{transform:none !important}
  .reveal-copy .ch{color:var(--bone)}
  [data-lift]{opacity:1;transform:none}
  .meter s{transform:scaleX(var(--p,1))}
  .revcell{opacity:1;transform:none}
  .rev__stars-fg{width:var(--fill,98%)}
  /* no auto-scroll to drive it and nothing to drag, so lay every review out
     at once instead of clipping the ones a marquee would have carried past */
  .revwrap{overflow:visible;mask-image:none;-webkit-mask-image:none}
  .revtrack{transform:none !important;width:auto;flex-wrap:wrap;justify-content:center}
  #beam,#dot,.scroll-cue{display:none}
  body,a,button{cursor:auto}
}