/* ============================================================
   OV XCLUSIVE CARS — page styles
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink-980);
  color: var(--text-hi);
  font-family: var(--font-ui);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1360px; margin: 0 auto; padding: 0 64px; }
.section { position: relative; }

/* ============ Garage backdrop (fleet → contact) ============
   One fixed garage still behind the lower half of the page. Sits above the
   black body background but below all section content. GSAP ramps opacity
   from ~0.4 (fleet) to ~0.8 (contact); base opacity 0 so it's invisible
   through the hero + showroom until the scroll trigger fades it in. */
.garage-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background:
    linear-gradient(180deg, rgba(6,6,7,.80) 0%, rgba(6,6,7,.56) 40%, rgba(6,6,7,.74) 100%),
    url("../assets/video/hero-garage-poster.jpg") center 42% / cover no-repeat;
  filter: saturate(104%) contrast(102%);
  will-change: opacity;
}
/* lift every section's content above the backdrop so text/cards stay crisp */
.fleet > .wrap, .exp > .wrap, .pricing > .wrap, .contact > .wrap { position: relative; z-index: 1; }

/* film grain + faint silver vignette atmosphere */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 78% -10%, var(--accent-08), transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 110%, rgba(255,255,255,.05), transparent 60%);
  mix-blend-mode: screen;
}
.grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .06;
}

/* ============ Nav ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 80px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  background: linear-gradient(180deg, rgba(6,6,7,.85), rgba(6,6,7,0));
  transition: background var(--dur-quick), backdrop-filter var(--dur-quick), border-color var(--dur-quick);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(8,8,9,.78); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav.is-dimmed { opacity: .12; pointer-events: none; }

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img.logo { height: 64px; width: auto; display: block; }
.brand .mark {
  width: 40px; height: 26px; flex-shrink: 0;
}
.brand .word { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand .word b {
  font: 800 16px/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
}
.brand .word b .ov { color: var(--accent); }
.brand .word span {
  font: 600 7.5px/1 var(--font-ui); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--accent); padding-left: 1px;
}

.navlinks { display: flex; gap: 38px; align-items: center; }
.navlink {
  font: 600 11.5px/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase;
  color: #FFFFFF; padding: 6px 0; position: relative; cursor: pointer;
  text-decoration: none; background: none; border: none;
  transition: color var(--dur-quick) var(--ease-sweep);
}
.navlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-quick) var(--ease-sweep);
}
.navlink:hover { color: var(--text-hi); }
.navlink:hover::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-phone {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  font: 500 12px/1 var(--font-ui); letter-spacing: 0.06em; color: var(--text-hi);
  white-space: nowrap; transition: color var(--dur-quick);
}
.nav-phone svg { width: 14px; height: 14px; stroke: var(--accent); }
.nav-phone:hover { color: var(--accent-bright); }

.lang {
  display: flex; align-items: center; border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden; height: 30px;
}
.lang button {
  appearance: none; border: none; background: none; cursor: pointer;
  font: 600 10px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-low); padding: 0 9px; height: 100%;
  transition: color var(--dur-micro), background var(--dur-micro);
}
.lang button + button { border-left: 1px solid var(--line); }
.lang button:hover { color: var(--text-hi); }
.lang button.is-on { color: var(--accent-ink); background: var(--accent); }

/* ============ Burger + mobile menu ============ */
.nav-burger {
  display: none; position: relative; z-index: 70;
  width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  appearance: none; background: none; border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--text-hi); transition: transform 280ms var(--ease-lux), opacity 200ms; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 58; padding: 108px 28px 40px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(6,6,7,.96); backdrop-filter: blur(18px);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity 280ms var(--ease-lux), transform 280ms var(--ease-lux);
}
body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; transform: none; }
body.menu-open { overflow: hidden; }
.mobile-menu .navlink { font-size: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .nav-phone { display: flex; padding: 18px 0 6px; font-size: 15px; }
.mobile-menu .btn--wa { margin-top: 18px; width: 100%; }

/* ============ Reveal utility (base = visible, motion is enhancement) ============ */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-in { animation: heroUp 0.8s var(--ease-lux) forwards; }
  .reveal.is-in[data-d="1"] { animation-delay: 0.09s; }
  .reveal.is-in[data-d="2"] { animation-delay: 0.18s; }
  .reveal.is-in[data-d="3"] { animation-delay: 0.27s; }
  .reveal.is-in[data-d="4"] { animation-delay: 0.36s; }
  .reveal.is-in[data-d="5"] { animation-delay: 0.45s; }
}

/* ============ HERO (shared) ============ */
.hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; }
.hero-stage { position: absolute; inset: 0; z-index: 0; }
.hero-stage .glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 64% 42%, #18181d 0%, var(--ink-980) 72%);
}
.hero-photo { position: absolute; inset: 0; }
.hero-photo image-slot { position: absolute; inset: 0; }

/* scroll-scrubbed garage canvas: full-bleed cover. The frame sequence is drawn
   with object-fit:cover math in JS, so the element itself just fills the stage. */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: 0.9;            /* video sits at 90% per spec */
  filter: saturate(106%) contrast(104%);
  will-change: opacity;
}
/* <video> is the reduced-motion / no-JS fallback: hidden while the canvas
   drives the scrub, shown (and auto-playing) only when JS opts it in. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  opacity: 0.9;
  filter: saturate(106%) contrast(104%);
  display: none;
}
.hero[data-heromode="video"] .hero-canvas { display: none; }
.hero[data-heromode="video"] .hero-video  { display: block; }
/* fallback look while the garage clip isn't present yet: a dark spotlit
   stage so the hero never reads as empty (mirrors the brand vignette). */
#heroMedia {
  background:
    radial-gradient(ellipse 60% 70% at 60% 30%, #1c1c22 0%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 120%, var(--accent-08), transparent 55%),
    var(--ink-980);
}

.hero-eyebrow { display: flex; align-items: center; gap: 16px; }
.hero-eyebrow .ln { width: 0; height: 1px; background: var(--accent); transition: width 900ms var(--ease-inout) 300ms; }
.is-loaded .hero-eyebrow .ln { width: 52px; }

.hero h1 {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 1.05; letter-spacing: -0.015em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
@supports (-webkit-text-stroke: 1px white) {
  .hero h1 em {
    color: transparent;
    -webkit-text-stroke: 0.045em var(--text-hi);
  }
}
/* overflow:hidden masks the lineUp reveal, but it clips at the padding edge —
   and the outlined word's ink runs past its advance width (the italic's lean at
   cap height, the outer half of the 0.045em stroke, the negative tracking). A
   word ending in a top-heavy letter — the Y of "EXTRAORDINARY", the E of
   "AUSSERGEWÖHNLICHE" — lost that arm. Inline padding buys the mask ~0.26em of
   slack on both sides; the matching negative margin keeps the box's contribution
   to the shrink-to-fit h1 (and to centred hero variants) exactly as it was. */
.hero h1 .ln {
  display: block; overflow: hidden;
  padding: 0.08em 0.26em 0.04em;
  margin-inline: -0.26em;
}
.hero h1 .ln + .ln { margin-top: 0.05em; }
.hero h1 .ln > i { display: inline-block; font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .is-loaded .hero h1 .ln > i { animation: lineUp 1s var(--ease-lux) forwards; }
  .is-loaded .hero h1 .ln:nth-child(1) > i { animation-delay: 0.15s; }
  .is-loaded .hero h1 .ln:nth-child(2) > i { animation-delay: 0.28s; }
}
@keyframes lineUp { from { transform: translateY(115%); } to { transform: none; } }

.hero-sub { font: 300 17px/1.7 var(--font-ui); color: var(--text-mid); letter-spacing: 0.02em; max-width: 440px; }
.hero-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.hero-stats { display: flex; gap: 52px; }
.hero-stat .v { font: 600 40px/1 var(--font-display); }
.hero-stat .v small { font: 600 11px var(--font-ui); letter-spacing: 0.08em; color: var(--accent); margin-left: 5px; }
.hero-stat .k { font: 600 9.5px var(--font-ui); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-low); margin-top: 8px; }

/* fade-in helpers for hero content blocks (base = visible, motion is enhancement) */
.hero-fade { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .is-loaded .hero-fade { animation: heroUp 0.8s var(--ease-lux) forwards; }
  .is-loaded .hero-fade[data-d="1"] { animation-delay: 0.55s; }
  .is-loaded .hero-fade[data-d="2"] { animation-delay: 0.7s; }
  .is-loaded .hero-fade[data-d="3"] { animation-delay: 0.85s; }
  .is-loaded .hero-fade[data-d="4"] { animation-delay: 1s; }
}
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.scrollcue { position: absolute; right: 48px; bottom: 40px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scrollcue .txt { writing-mode: vertical-rl; font: 600 9px var(--font-ui); letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-low); }
.scrollcue .ln { width: 1px; height: 50px; background: linear-gradient(180deg, var(--accent), transparent); animation: cue 2.2s var(--ease-inout) infinite; }
@keyframes cue { 0% { transform: scaleY(.3); transform-origin: top; } 50% { transform: scaleY(1); } 100% { transform: scaleY(.3); transform-origin: bottom; } }

/* one shared content structure — CSS rearranges it per [data-hero] */
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 64px; display: flex; flex-direction: column; gap: 28px; }
.hero-photo { position: absolute; inset: 0; z-index: 0; transition: width 600ms var(--ease-lux), opacity 600ms var(--ease-sweep), right 600ms var(--ease-lux); }
.hero-photo image-slot { position: absolute; inset: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; transition: background 500ms var(--ease-sweep); }

/* --- MONOLITH (centered) --- */
.hero[data-hero="monolith"] { align-items: center; text-align: center; }
.hero[data-hero="monolith"] .hero-inner { align-items: center; padding-top: 96px; }
.hero[data-hero="monolith"] .hero-eyebrow { justify-content: center; }
.hero[data-hero="monolith"] h1 { font-size: clamp(56px, 9.5vw, 150px); }
.hero[data-hero="monolith"] .hero-sub { max-width: 560px; }
.hero[data-hero="monolith"] .hero-cta { justify-content: center; }
.hero[data-hero="monolith"] .hero-stats { justify-content: center; margin-top: 14px; }
.hero[data-hero="monolith"] .hero-photo { opacity: .42; }
.hero[data-hero="monolith"] .hero-scrim { background: radial-gradient(ellipse 64% 62% at 50% 50%, rgba(6,6,7,.45), rgba(6,6,7,.93) 76%); }

/* --- SPLIT (editorial) --- */
.hero[data-hero="split"] { align-items: center; }
.hero[data-hero="split"] .hero-inner { align-items: flex-start; text-align: left; padding-top: 110px; }
.hero[data-hero="split"] .hero-inner > * { max-width: 560px; }
.hero[data-hero="split"] h1 { font-size: clamp(46px, 6.4vw, 108px); }
.hero[data-hero="split"] .hero-photo { left: auto; right: 0; width: 50%; opacity: 1; }
.hero[data-hero="split"] .hero-scrim { background: linear-gradient(90deg, rgba(6,6,7,1) 28%, rgba(6,6,7,.2) 52%, rgba(6,6,7,0) 64%); }

/* --- FULLBLEED (cinematic) --- */
.hero[data-hero="fullbleed"] { align-items: flex-end; }
.hero[data-hero="fullbleed"] .hero-inner { align-items: flex-start; text-align: left; padding-bottom: 88px; padding-top: 120px; }
.hero[data-hero="fullbleed"] .hero-sub { max-width: 480px; }
.hero[data-hero="fullbleed"] h1 { font-size: clamp(46px, 6.4vw, 108px); }
.hero[data-hero="fullbleed"] .hero-photo { opacity: 1; }
.hero[data-hero="fullbleed"] .hero-scrim { background: linear-gradient(180deg, rgba(6,6,7,.5) 0%, rgba(6,6,7,.04) 36%, rgba(6,6,7,.95) 100%); }

/* ============ Section header ============ */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.sec-head .t { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.0; letter-spacing: -0.01em; }
.sec-head .t em { font-style: normal; color: var(--accent); }
.sec-head .lead { font: 300 14px/1.7 var(--font-ui); color: var(--text-low); max-width: 320px; letter-spacing: 0.02em; }
.sec-num { font: 600 10px var(--font-ui); letter-spacing: 0.3em; color: var(--text-faint); }

/* ============ FLEET ============ */
.fleet { padding: 130px 0 40px; }
/* minmax(0,1fr), not 1fr: a card's nowrap content (WhatsApp CTA labels)
   must never set a min width that props a column open */
.fleet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 64px; }
.car-card { display: flex; flex-direction: column; }
.car-card .lx-card-media { aspect-ratio: 16 / 10; background: radial-gradient(ellipse 70% 60% at 50% 70%, #1a1a1f, #0c0c0e 75%); }
.car-card image-slot { position: absolute; inset: 0; }
.car-card .badge { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 600 9.5px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 2px; background: rgba(8,8,9,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong); color: var(--text-hi);
}
.chip.is-red { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.is-unavail { background: rgba(150,26,32,.24); border-color: rgba(222,80,86,.42); color: #E8A0A4; }
/* small "currently unavailable" note under a pricing-card title */
.price-unavail { font: 600 9px var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #D98287; margin-top: -12px; }
/* static placeholder image for cars without a slider yet */
.car-media-static { position: absolute; inset: 0; }
.car-media-static img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car-body { padding: 30px 34px 34px; display: flex; flex-direction: column; gap: 18px; }
.car-marque { font: 600 10px var(--font-ui); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-low); }
.car-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 34px; line-height: 1; }
.car-color { display: inline-flex; align-items: center; gap: 9px; font: 400 12px var(--font-ui); letter-spacing: 0.04em; color: var(--text-mid); }
.car-color .dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line-strong); }
/* minmax(0,1fr): long labels (Höchstgeschwindigkeit) must not set a
   min-content floor that props the card — and the page — open on phones */
.car-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; border: 1px solid var(--line); background: var(--line); margin-top: 4px; }
.car-spec { background: var(--ink-900); padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.car-spec .v { font: 600 22px/1 var(--font-display); color: var(--text-hi); }
.car-spec .v small { font: 600 10px var(--font-ui); color: var(--accent); margin-left: 3px; }
.car-spec .k { font: 600 8.5px var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-low); hyphens: auto; overflow-wrap: break-word; }
.car-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 4px; }
.car-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 20px; margin-left: auto; }
.car-price { display: flex; align-items: baseline; gap: 6px; }
.car-price .from { font: 600 9.5px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); }
.car-price .amt { font: 600 30px/1 var(--font-display); }
.car-price .per { font: 400 11px var(--font-ui); letter-spacing: 0.1em; color: var(--text-low); text-transform: uppercase; }

/* three-up cards are ~⅓ narrower than the old two-up layout: tighten
   padding and type so the specs row and the longest nowrap CTA label
   ("Vraag aan via WhatsApp") still fit at the 1025px lower bound */
@media (min-width: 1025px) {
  .car-body { padding: 26px 26px 30px; }
  .car-name { font-size: 28px; }
  .car-spec { padding: 14px 12px; }
  .car-spec .v { font-size: 20px; }
  .car-price .amt { font-size: 26px; }
  .car-actions { gap: 14px; }
  .car-actions .btn--wa { padding: 0 18px; font-size: 10.5px; letter-spacing: 0.12em; gap: 9px; }
}

/* fleet photo slider — one shot at a time */
.car-slider { position: absolute; inset: 0; }
.car-slider-track { position: absolute; inset: 0; }
.car-shot { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 520ms var(--ease-lux); }
.car-shot.is-active { opacity: 1; visibility: visible; }
.car-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* portrait/tall source (e.g. GTI cockpit): show the whole frame instead of cropping a sliver */
.car-shot--tall img { object-fit: contain; background: radial-gradient(ellipse 70% 60% at 50% 60%, #1a1a1f, #0c0c0e 78%); }
.car-shot figcaption { display: none; }
.car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: rgba(8,8,9,.55); backdrop-filter: blur(8px);
  color: var(--text-hi); opacity: 0; transition: opacity 280ms var(--ease-lux), background 200ms, border-color 200ms;
}
.car-arrow svg { width: 18px; height: 18px; }
.car-arrow--prev { left: 14px; }
.car-arrow--next { right: 14px; }
.car-card:hover .car-arrow, .car-slider:focus-within .car-arrow { opacity: 1; }
.car-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.car-arrow:focus-visible { opacity: 1; outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.car-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; display: flex; justify-content: center; gap: 7px; }
.car-dot {
  width: 7px; height: 7px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.18); transition: all 220ms var(--ease-lux);
}
.car-dot.is-on { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.car-count {
  position: absolute; top: 16px; right: 18px; z-index: 4;
  font: 600 10px var(--font-ui); letter-spacing: 0.14em; color: var(--text-hi);
  padding: 5px 9px; border-radius: 2px; background: rgba(8,8,9,.55); backdrop-filter: blur(6px);
}
.car-count .cur { color: var(--accent-bright); }
@media (hover: none) { .car-arrow { opacity: 1; } }

/* ============ Fleet brand filter ============ */
.fleet-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.fbtn {
  appearance: none; cursor: pointer;
  font: 600 10.5px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-low); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 20px;
  transition: color 200ms var(--ease-lux), background 200ms var(--ease-lux), border-color 200ms var(--ease-lux);
}
.fbtn:hover { color: var(--text-hi); }
.fbtn.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.fbtn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.car-card.is-filtered-out { display: none; }
/* collapsed fleet: cards beyond the first two rows are hidden until "Show more" */
.car-card.is-collapsed { display: none; }

/* ============ Fleet "Show more" ============ */
.fleet-more-wrap { display: flex; justify-content: center; margin-top: 48px; }
.fleet-more { display: inline-flex; align-items: center; gap: 12px; }
.fleet-more[hidden] { display: none; }
.fleet-more .lbl-less { display: none; }
.fleet-more.is-expanded .lbl-more { display: none; }
.fleet-more.is-expanded .lbl-less { display: inline; }
.fleet-more-ic { position: relative; z-index: 1; width: 16px; height: 16px; transition: transform 300ms var(--ease-lux); }
.fleet-more.is-expanded .fleet-more-ic { transform: rotate(180deg); }

/* ============ 3D showroom canvas ============ */
#ov3d { position: absolute; inset: 0; z-index: 1; }
html.no-3d #ov3d { display: none; }

/* ============ Image-sequence showroom (canvas) ============ */
#srCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: none; background: #0a0a0b; }
.stage[data-srmode="video"] #srCanvas { display: block; }
.stage[data-srmode="video"] #ov3d { display: none; }
.stage[data-srmode="video"] { background: #0a0a0b; cursor: default; }
.stage[data-srmode="video"] .turntable { display: none; }
.stage[data-srmode="video"] .caryaw { display: none; }
/* legibility scrims top + bottom over the bright video */
.stage[data-srmode="video"]::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,9,.7) 0%, rgba(8,8,9,0) 22%, rgba(8,8,9,0) 62%, rgba(8,8,9,.78) 100%);
}
/* hide the 2D fallback visuals once the 3D engine is live */
.caryaw .car-ghost, .caryaw image-slot, .stage .turntable { display: none; }
html.no-3d .caryaw .car-ghost { display: block; }
html.no-3d .caryaw image-slot { display: block; }
html.no-3d .stage .turntable { display: block; }
.carrig { pointer-events: none; }

/* ============ SHOWROOM (360° modal) ============ */
.showroom-wrap { height: 100%; position: relative; }
.stage {
  position: relative; height: 100%; overflow: hidden;
  background: radial-gradient(ellipse 60% 46% at 50% 62%, #161619 0%, var(--ink-980) 78%);
  cursor: grab; touch-action: none;
}
.stage.is-dragging { cursor: grabbing; }

/* ---- 360° modal shell ---- */
.sr-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; }
.sr-modal[hidden] { display: none; }
.sr-modal-backdrop {
  position: absolute; inset: 0; background: rgba(4,4,5,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 320ms ease;
}
.sr-modal.is-open .sr-modal-backdrop { opacity: 1; }
.sr-modal-dialog {
  position: relative; width: min(1200px, 94vw); height: min(760px, 88vh);
  border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden;
  background: #0a0a0b; box-shadow: 0 40px 120px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(16px);
  transition: opacity 320ms ease, transform 360ms var(--ease-lux, cubic-bezier(.2,.7,.2,1));
}
.sr-modal.is-open .sr-modal-dialog { opacity: 1; transform: none; }
.sr-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 12;
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(10,10,11,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text-mid); cursor: pointer;
  transition: color var(--dur-micro), border-color var(--dur-micro), background var(--dur-micro);
}
.sr-modal-close:hover { color: #fff; border-color: var(--accent); background: rgba(22,22,24,.8); }
.sr-modal-close svg { width: 20px; height: 20px; }

/* top controls: 360° label left · car switch centre · close right */
.sr-modal .stage-head { top: 18px; left: 22px; right: auto; text-align: left; opacity: 1; }
.sr-modal .car-switch { top: 15px; }

/* drag hint pill — fades out on first interaction */
.sr-hint {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 7;
  font: 600 10px var(--font-ui); letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-low); padding: 8px 16px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: rgba(8,8,9,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: none; opacity: 1; transition: opacity 420ms ease;
}
.sr-hint.is-hidden { opacity: 0; }

body.sr-open { overflow: hidden; }

.stage-head { position: absolute; top: 11vh; left: 0; right: 0; text-align: center; z-index: 4; transition: opacity 400ms; }
.stage-head .lab { margin-bottom: 12px; }
.stage-head .t { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 30px; }

/* car selector */
.car-switch { position: absolute; top: 15vh; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 2px; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; background: rgba(8,8,9,.5); backdrop-filter: blur(8px); }
.car-switch button {
  appearance: none; border: none; background: none; cursor: pointer;
  font: 600 11px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mid); padding: 12px 22px; transition: color var(--dur-micro), background var(--dur-micro);
}
.car-switch button.is-on { color: var(--accent-ink); background: var(--accent); }

.carrig { position: absolute; left: 50%; top: 53%; width: min(62vw, 960px); aspect-ratio: 2.1/1; transform: translate(-50%, -50%); z-index: 3; }
.caryaw { width: 100%; height: 100%; position: relative; will-change: transform, filter; display: grid; place-items: center; }
.caryaw image-slot { position: absolute; inset: 6% 2%; }
.car-ghost { position: absolute; inset: 10% 4%; opacity: .9; }
.car-ghost img { width: 100%; height: 100%; object-fit: contain; }
.car-ghost .hint { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); font: 500 10px var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }

/* turntable disc */
.turntable { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); width: 92%; height: 26%; z-index: 2; pointer-events: none; }
.turntable .shadow { position: absolute; inset: 0; background: radial-gradient(ellipse at center 35%, rgba(0,0,0,.7), transparent 66%); }
.turntable svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.turntable .ring { fill: none; stroke: var(--accent-35); stroke-width: 1; }
.turntable .ticks { stroke: var(--accent); stroke-width: 1.4; opacity: .6; }

/* HUD */
.hud { position: absolute; bottom: 40px; left: 48px; display: flex; align-items: center; gap: 20px; z-index: 6; }
.dial { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; }
.dial .inner { position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--accent-35); }
.dial .needle { position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: var(--accent); transform-origin: left center; }
.hud .deg { font: 600 34px/1 var(--font-display); min-width: 92px; }
.hud .frame { font: 600 9px var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-low); margin-top: 6px; }
.hud-right { position: absolute; bottom: 40px; right: 48px; text-align: right; z-index: 6; }
.hud-right .mode { font: 500 11px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); margin-bottom: 10px; transition: color var(--dur-quick); }
.hud-right .bar { width: 200px; height: 1px; background: var(--line-strong); position: relative; margin-left: auto; }
.hud-right .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); width: 0; }

/* ============ EXPERIENCE ============ */
.exp { padding: 140px 0 120px; }
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border: 1px solid var(--line); }
.exp-cell { padding: 54px 40px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; position: relative; transition: background var(--dur-quick); }
.exp-cell:first-child { border-left: none; }
.exp-cell:hover { background: var(--ink-900); }
.exp-cell .n { font: 600 30px var(--font-display); color: var(--accent); }
.exp-cell .et { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 22px; line-height: 1.1; }
.exp-cell .eb { font: 300 14px/1.7 var(--font-ui); color: var(--text-mid); letter-spacing: 0.02em; }
.exp-icon { width: 30px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1.4; }

/* ============ PRICING ============ */
.pricing { padding: 20px 0 130px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.price-card { border: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-900), var(--ink-950)); padding: 40px 36px; display: flex; flex-direction: column; gap: 22px; position: relative; transition: border-color var(--dur-quick), transform var(--dur-quick); }
.price-card:hover { border-color: var(--accent-35); transform: translateY(-5px); }
.price-card.is-feat { border-color: var(--accent-35); box-shadow: var(--shadow-deep); }
.price-card .feat-tag { position: absolute; top: -1px; right: 28px; background: var(--accent); color: var(--accent-ink); font: 600 9px var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 14px; }
.price-card .term { font: 600 11px var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-mid); }
.price-card .amt { display: flex; align-items: baseline; gap: 6px; }
.price-card .amt b { font: 700 56px/1 var(--font-display); }
.price-card .amt .cur { font: 600 26px var(--font-display); color: var(--accent); }
.price-card .amt .per { font: 400 12px var(--font-ui); color: var(--text-low); letter-spacing: 0.06em; }
.price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.price-card li { display: flex; gap: 11px; align-items: flex-start; font: 300 13.5px/1.5 var(--font-ui); color: var(--text-mid); }
.price-card li svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }
.price-card .btn { margin-top: auto; }
.price-note { margin-top: 36px; display: flex; align-items: center; gap: 12px; justify-content: center; font: 400 12.5px var(--font-ui); color: var(--text-low); letter-spacing: 0.04em; }
.price-note b { color: var(--text-hi); font-weight: 600; }

/* Per-car rate cards (24h / 48h / weekend) */
.price-grid--cars { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.price-grid--cars .price-card { padding: 32px 24px; gap: 20px; }
.price-grid--cars .rate-list .rate-amt { font-size: 24px; }
/* five cards only fit side by side on wide screens; below that go 3 + 2 */
@media (max-width: 1380px) {
  .price-grid--cars { grid-template-columns: repeat(3, 1fr); }
}
.price-grid--cars .term { color: var(--text-hi); font: 600 12.5px var(--font-ui); letter-spacing: 0.1em; line-height: 1.35; text-transform: none; min-height: 2.7em; }
.rate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.rate-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font: inherit; color: inherit; }
.rate-list li:first-child { padding-top: 0; }
.rate-list li:last-child { border-bottom: none; padding-bottom: 0; }
.rate-list .rate-term { font: 400 12px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); }
.rate-list .rate-amt { font: 700 26px/1 var(--font-display); color: var(--text-hi); white-space: nowrap; }
.rate-list .rate-amt .cur { font: 600 15px var(--font-display); color: var(--accent); margin-right: 2px; }
.price-grid--cars .is-feat .rate-list .rate-amt { color: var(--accent-bright); }

/* ============ Rates filter + sort toolbar ============ */
.rate-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 48px; }
.rate-toolbar + .price-grid { margin-top: 28px; }
.rate-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.rate-sort { display: flex; align-items: center; gap: 12px; }
.rate-sort-lab { font: 600 10.5px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); }
.rate-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.segbtn {
  appearance: none; cursor: pointer;
  font: 600 10.5px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-low); background: transparent; border: none; padding: 10px 18px;
  transition: color 200ms var(--ease-lux), background 200ms var(--ease-lux);
}
.segbtn + .segbtn { border-left: 1px solid var(--line-strong); }
.segbtn:hover { color: var(--text-hi); }
.segbtn.is-on { color: var(--accent-ink); background: var(--accent); }
.segbtn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.price-card.is-hidden { display: none; }
@media (max-width: 600px) {
  .rate-toolbar { flex-direction: column; align-items: stretch; }
  .rate-seg { width: 100%; }
  .segbtn { flex: 1 1 0; text-align: center; }
}

/* ============ CONTACT / BOOKING ============ */
.contact { padding: 0 0 0; }
.contact-inner { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--line); }
.contact-l { padding: 72px 60px; display: flex; flex-direction: column; gap: 40px; }
.contact-l .ct { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(32px, 4vw, 54px); line-height: 1; }
.contact-l .ct em { font-style: normal; color: var(--accent); }
.contact-detail { display: flex; flex-direction: column; gap: 24px; }
.cd-row { display: flex; gap: 16px; align-items: flex-start; text-decoration: none; }
.cd-row .ic { width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; transition: border-color var(--dur-quick), background var(--dur-quick); }
.cd-row .ic svg { width: 17px; height: 17px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.cd-row:hover .ic { border-color: var(--accent); background: var(--accent-12); }
.cd-row .lbl { font: 600 9.5px var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-low); }
.cd-row .val { font: 400 16px var(--font-ui); color: var(--text-hi); margin-top: 4px; letter-spacing: 0.01em; }

.contact-r { padding: 72px 60px; background: var(--ink-900); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font: 600 10px var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-low); }
.field input, .field select, .field textarea {
  height: 52px; padding: 0 16px; background: var(--ink-850); color: var(--text-hi);
  border: 1px solid var(--line); border-bottom: 1px solid var(--line-strong);
  font: 300 15px var(--font-ui); letter-spacing: 0.02em; outline: none;
  transition: border-color var(--dur-quick), background var(--dur-quick); border-radius: 0;
}
.field textarea { height: 96px; padding: 14px 16px; resize: none; font-family: var(--font-ui); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--accent); background: var(--ink-800); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============ Date-range picker ============ */
#dateRange { position: relative; }

/* trigger that replaces the native date input */
.date-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 52px; padding: 0 16px;
  background: var(--ink-850); color: var(--text-hi);
  border: 1px solid var(--line); border-bottom: 1px solid var(--line-strong);
  font: 300 15px var(--font-ui); letter-spacing: 0.02em; text-align: left;
  cursor: pointer; border-radius: 0; appearance: none;
  transition: border-color var(--dur-quick), background var(--dur-quick);
}
.date-trigger:hover { background: var(--ink-800); }
.date-trigger:focus-visible { outline: none; border-bottom-color: var(--accent); background: var(--ink-800); }
.date-trigger[aria-expanded="true"] { border-bottom-color: var(--accent); background: var(--ink-800); }
.date-trigger.is-empty .date-trigger__val { color: var(--text-low); }
.date-trigger svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--text-low); stroke-width: 1.5; transition: stroke var(--dur-quick); }
.date-trigger:hover svg, .date-trigger[aria-expanded="true"] svg { stroke: var(--accent); }

/* the calendar popover */
.cal-pop {
  position: absolute; top: calc(100% + 10px); z-index: 30;
  width: 300px; padding: 16px;
  background: linear-gradient(180deg, var(--ink-900), var(--ink-950));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-deep);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur-quick) var(--ease-lux), transform var(--dur-quick) var(--ease-lux);
}
.cal-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font: 600 13px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-hi); }
.cal-nav {
  width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: 2px;
  color: var(--text-mid); cursor: pointer; transition: border-color var(--dur-micro), color var(--dur-micro), background var(--dur-micro);
}
.cal-nav:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-08); }
.cal-nav svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; }

.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
.cal-dow span { text-align: center; font: 600 10px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-low); padding: 4px 0; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cell {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: none; border: none; border-radius: 2px;
  font: 400 13px var(--font-ui); color: var(--text-hi); cursor: pointer;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.cal-cell.is-pad { cursor: default; }
.cal-cell:not(.is-disabled):not(.is-pad):hover { background: var(--ink-700); }
.cal-cell.is-disabled { color: var(--text-faint); cursor: not-allowed; }
.cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-cell.is-in { background: var(--accent-12); color: var(--text-hi); border-radius: 0; }
.cal-cell.is-sel { background: var(--accent); color: var(--accent-ink); }
.cal-cell.is-from { border-radius: 2px 0 0 2px; }
.cal-cell.is-to { border-radius: 0 2px 2px 0; }
.cal-cell.is-from.is-to { border-radius: 2px; }

.cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cal-summary { font: 400 12px var(--font-ui); letter-spacing: 0.04em; color: var(--text-mid); }
.cal-clear { background: none; border: none; cursor: pointer; font: 600 10px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); padding: 4px 0; transition: color var(--dur-micro); }
.cal-clear:hover { color: var(--accent-bright); }

@media (max-width: 560px) {
  .cal-pop { width: calc(100vw - 48px); left: 0 !important; }
}
.form-msg { font: 400 13px var(--font-ui); color: var(--accent-bright); letter-spacing: 0.02em; min-height: 18px; }

/* ============ FOOTER ============ */
footer { position: relative; z-index: 2; background: var(--ink-980); border-top: 1px solid var(--line); padding: 56px 0 40px; margin-top: 120px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.foot-brand .word b { font: 800 22px var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.foot-brand img.logo { height: 60px; width: auto; display: block; margin-bottom: 4px; }
.foot-brand .word b .ov { color: var(--accent); }
.foot-brand .tag { font: 300 14px/1.6 var(--font-ui); color: #fff; max-width: 280px; margin-top: 14px; letter-spacing: 0.02em; }
.foot-cols { display: flex; gap: 72px; }
.foot-col h5 { font: 600 10.5px var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.foot-col a { display: block; font: 400 14.5px var(--font-ui); color: #fff; text-decoration: none; margin-bottom: 11px; letter-spacing: 0.02em; transition: color var(--dur-micro); }
.foot-col a:hover { color: var(--accent-bright); }
.foot-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--line); font: 400 11px var(--font-ui); letter-spacing: 0.1em; color: #fff; text-transform: uppercase; }
.foot-copy { font-size: 12px; }
.foot-rights { display: flex; align-items: center; gap: 9px; text-align: right; }
.foot-rights .sep { color: var(--line-strong); }
.foot-credit a { color: #fff; text-decoration: none; transition: color var(--dur-micro); }
.foot-credit a:hover { color: var(--accent-bright); }
.foot-fine { margin-top: 18px; font: 400 10px var(--font-ui); letter-spacing: 0.05em; color: var(--text-low); opacity: .68; }

/* ============ WhatsApp float ============
   Fixed chat button, bottom-right. Fades out (via .is-dimmed, toggled by the
   showroom tick alongside the nav) so it never sits on top of the 360° HUD. */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 55;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  transition: transform var(--dur-quick) var(--ease-lux), box-shadow var(--dur-quick), opacity var(--dur-quick);
}
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 24px rgba(37,211,102,.35);
}
.wa-float.is-dimmed { opacity: 0; pointer-events: none; }

/* Draggable (js/wa-drag.js): touch-action none so a touch-drag moves the
   button instead of scrolling the page; no transform/transition while
   tracking the finger, then an eased snap to the nearest side edge */
.wa-float { touch-action: none; -webkit-user-select: none; user-select: none; }
.wa-float.is-dragging, .wa-float.is-dragging:hover {
  transform: none; transition: none; cursor: grabbing;
}
.wa-float.is-snapping {
  transition: left var(--dur-quick) var(--ease-lux), top var(--dur-quick) var(--ease-lux);
}

/* ============ Tweaks panel (vanilla) ============ */
.twk { position: fixed; right: 18px; bottom: 18px; z-index: 2147483646; width: 264px; display: none; flex-direction: column;
  background: rgba(14,14,16,.86); backdrop-filter: blur(20px) saturate(150%); color: var(--text-hi);
  border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  font-family: var(--font-ui); overflow: hidden; }
.twk.is-open { display: flex; }
.twk-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px 13px 16px; cursor: move; border-bottom: 1px solid var(--line); }
.twk-hd b { font: 600 12px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.twk-x { appearance: none; border: none; background: none; color: var(--text-low); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.twk-x:hover { background: rgba(255,255,255,.08); color: var(--text-hi); }
.twk-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.twk-sect { font: 600 9.5px var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-low); }
.twk-row { display: flex; flex-direction: column; gap: 8px; }
.twk-seg { display: flex; gap: 2px; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.twk-seg button { flex: 1; appearance: none; border: none; background: none; cursor: pointer; font: 600 10px var(--font-ui); letter-spacing: 0.04em; color: var(--text-mid); padding: 9px 4px; transition: color var(--dur-micro), background var(--dur-micro); text-transform: capitalize; }
.twk-seg button.is-on { color: var(--accent-ink); background: var(--accent); }
.twk-chips { display: flex; gap: 8px; }
.twk-chip { flex: 1; height: 38px; border-radius: 6px; border: 1px solid var(--line-strong); cursor: pointer; position: relative; transition: transform var(--dur-micro); }
.twk-chip:hover { transform: translateY(-2px); }
.twk-chip.is-on { box-shadow: 0 0 0 2px var(--text-hi); }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .wrap, .hero-inner { padding-left: 32px; padding-right: 32px; }
  .nav { padding: 0 24px; }
  .navlinks, .nav .nav-phone { display: none; }
  .nav-burger { display: flex; }
  /* minmax(0,1fr), not 1fr: a card's nowrap content (e.g. the WhatsApp
     CTA label) must never set a min width that props the page open */
  .fleet-grid, .price-grid, .exp-grid, .contact-inner { grid-template-columns: minmax(0, 1fr); }
  .price-grid--cars { grid-template-columns: repeat(2, 1fr); }
  .exp-cell { border-left: none; border-top: 1px solid var(--line); }
  .exp-cell:first-child { border-top: none; }
  .contact-r { border-left: none; border-top: 1px solid var(--line); }
  .hero[data-hero="split"] .hero-inner { flex-direction: column; }
  .hero[data-hero="split"] .hero-col-r { min-height: 42vh; width: 100%; }
  .car-switch { top: 13vh; }
  .hud, .hud-right { transform: scale(.82); transform-origin: bottom; }
  .hud { left: 18px; } .hud-right { right: 18px; }
}

/* ============ SHOWROOM — tablet / mobile ============ */
@media (max-width: 760px) {
  /* full-screen 360° modal on phones */
  .sr-modal-dialog { width: 100vw; height: 100vh; height: 100dvh; border: none; border-radius: 0; }
  .sr-modal .car-switch { top: 54px; max-width: calc(100vw - 24px); overflow-x: auto; }
  .sr-hint { bottom: 84px; }

  /* widen the fallback car rig on small screens */
  .carrig { width: min(86vw, 560px); top: 50%; }

  .stage-head .t { font-size: 22px; }
  .stage-head .lab { margin-bottom: 8px; }

  .car-switch button { padding: 10px 16px; font-size: 10px; letter-spacing: 0.1em; }

  /* HUD: smaller dial, no fixed-width number, narrower progress bar */
  .hud { left: 16px; bottom: 22px; gap: 12px; transform: scale(.9); transform-origin: bottom left; }
  .dial { width: 46px; height: 46px; }
  .hud .deg { font-size: 26px; min-width: 0; }
  .hud .frame { font-size: 8px; letter-spacing: 0.16em; }
  .hud-right { right: 16px; bottom: 22px; transform: scale(.9); transform-origin: bottom right; }
  .hud-right .bar { width: 120px; }
  .hud-right .mode { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 8px; }
}

@media (max-width: 600px) {
  .wrap, .hero-inner { padding-left: 20px; padding-right: 20px; }
  /* scale the headline with the viewport so the longest word fits:
     "Außergewöhnliche" measures ~10.8em in Saira 700, so it needs
     font-size ≤ (100vw − 40px padding) / 10.8 — with a little slack */
  .hero[data-hero] h1 { font-size: clamp(24px, 9.2vw - 4px, 46px); }
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .wa-float svg { width: 30px; height: 30px; }
  .hero-stats { gap: 26px; flex-wrap: wrap; }
  .hero-stat .v { font-size: 30px; }
  .hero[data-hero="fullbleed"] .hero-inner { padding-bottom: 64px; }
  .foot-cols { gap: 40px; flex-wrap: wrap; }
  .foot-top { flex-direction: column; }
  .foot-bot { flex-direction: column; gap: 12px; align-items: flex-start; }
  .foot-rights { text-align: left; }
  .scrollcue { display: none; }
  .price-grid--cars { grid-template-columns: 1fr; }

  /* single-column, thumb-friendly cards & sections */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sec-head .lead { max-width: none; }
  .fleet { padding: 90px 0 30px; }
  .fleet-grid { gap: 24px; margin-top: 44px; }
  .car-body { padding: 22px 20px 26px; }
  .car-name { font-size: 27px; }
  .car-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .car-actions { margin-left: 0; width: 100%; }
  .car-actions .btn { flex: 1 1 auto; }
  .exp { padding: 100px 0 70px; }
  .exp-cell { padding: 36px 22px; }
  .pricing { padding: 10px 0 90px; }
  .price-card .btn { width: 100%; }
  .price-note { text-align: center; }
  .contact-l, .contact-r { padding: 44px 22px; }
  .field-row { grid-template-columns: 1fr; }
  #dateRange { grid-template-columns: 1fr 1fr; }
}

/* ============ HERO — portrait phones & tablets ============
   The garage plate is 16:9. Cover-cropping it into a 100vh portrait hero left
   only the middle ~30% of the frame visible — all aisle and ceiling, both cars
   pushed off screen — and the bottom-aligned copy ended up under the WhatsApp
   float. Upright screens get the media as a full-width band tucked under the
   nav instead: on an exactly-16:9 box (56.25vw) cover() crops nothing, so the
   whole garage reads. The band's lower edge is masked away and the copy hangs
   off it, well clear of the foot of the screen. */
@media (max-width: 900px) and (orientation: portrait) {
  #heroMedia {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 56%, rgba(0,0,0,.6) 78%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 56%, rgba(0,0,0,.6) 78%, transparent 100%);
  }
  .hero-canvas, .hero-video { opacity: 1; }   /* small band, so no dimming */

  /* the band fades itself out — the scrim only needs to keep the nav legible */
  .hero[data-hero="fullbleed"] .hero-scrim {
    background: linear-gradient(180deg, rgba(6,6,7,.6) 0%, rgba(6,6,7,0) 24%, rgba(6,6,7,0) 100%);
  }
  /* margin-bottom:auto beats align-items:flex-end — copy hangs off the band
     rather than sitting at the bottom of the screen */
  .hero[data-hero="fullbleed"] .hero-inner { margin-bottom: auto; padding-top: 0; }
}

@media (max-width: 600px) and (orientation: portrait) {
  /* the 28vh cap only bites on short phones, where it trims ceiling and floor
     — never the cars — to keep the band clear of the copy */
  #heroMedia { inset: 78px 0 auto; height: min(56.25vw, 28vh); height: min(56.25vw, 28svh); }

  /* Second term = "leave 450px for the copy": on short screens it wins and
     lifts the block, so the German stats row (the tallest of the four
     languages) never falls off the bottom — the eyebrow then lands on the
     band's faded tail, which reads fine. svh, not vh: with the URL bar shown
     the visible screen is shorter than 100vh. Plain-vh line is the fallback. */
  .hero[data-hero="fullbleed"] .hero-inner {
    gap: 22px;
    margin-top: min(calc(78px + min(56.25vw, 28vh) + 5vh), calc(100vh - 450px));
    margin-top: min(calc(78px + min(56.25vw, 28svh) + 5svh), calc(100svh - 450px));
    padding-bottom: 24px;
  }
  .hero .hero-sub { font-size: 16px; }   /* .hero-sub is reused in contact — scope it */
  .hero-stat .k { letter-spacing: 0.2em; }
}

@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
  #heroMedia { inset: 84px 0 auto; height: min(56.25vw, 42vh); height: min(56.25vw, 42svh); }
  .hero[data-hero="fullbleed"] .hero-inner {
    margin-top: min(calc(84px + min(56.25vw, 42vh) + 5vh), calc(100vh - 470px));
    margin-top: min(calc(84px + min(56.25vw, 42svh) + 5svh), calc(100svh - 470px));
    padding-bottom: 32px;
  }
}

@media (max-width: 400px) {
  /* both hero CTAs on one row — a wrapped second row costs ~37px of a hero
     that also has to fit the band, the headline and the stats */
  .hero-cta { gap: 14px; }
  .hero-cta .btn { height: 50px; padding: 0 18px; font-size: 10.5px; letter-spacing: 0.1em; }
}

@media (max-width: 360px) {
  /* compact card + form CTAs so the longest labels ("Vraag aan via
     WhatsApp", "Aanvraag versturen") still fit inside a 320px viewport */
  .car-actions .btn, .contact .btn { height: 50px; padding: 0 20px; font-size: 10.5px; letter-spacing: 0.1em; gap: 9px; }
}

/* ============ SHOWROOM — small / portrait phones ============ */
@media (max-width: 430px) {
  .carrig { width: 92vw; }
  .stage-head .t { font-size: 19px; }

  /* stack the dial above the readout so neither clips the screen edge */
  .hud { gap: 9px; transform: scale(.84); }
  .dial { width: 40px; height: 40px; }
  .hud .deg { font-size: 22px; }

  .hud-right { transform: scale(.84); }
  .hud-right .bar { width: 96px; }

  .car-switch button { padding: 9px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scrollcue .ln { animation: none; }
  .hero h1 .ln > i { transform: none; transition: none; }
}

/* ============ Preloader ============
   Branded veil over the page while the critical assets warm up.
   JS (app.js) drives the bar/counter and lifts the veil; the delayed
   preloaderRelease animation is a pure-CSS failsafe so a dead script
   can never trap the visitor behind it. */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 70% 55% at 50% 44%, #141419 0%, var(--ink-980) 78%) var(--ink-980);
  transition: transform 950ms var(--ease-inout), visibility 0s 950ms;
  animation: preloaderRelease 600ms ease 10s forwards;
}
.preloader.is-exit { transform: translateY(-101%); visibility: hidden; }
body.is-booting { overflow: hidden; }
@keyframes preloaderRelease { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.preloader-inner {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 28px;
  animation: heroUp 1s var(--ease-lux) both;
  transition: opacity 420ms var(--ease-sweep), transform 420ms var(--ease-lux);
}
.preloader.is-done .preloader-inner { opacity: 0; transform: translateY(-16px); }

.preloader-mark { position: relative; margin-bottom: 46px; }
.preloader-mark img {
  height: clamp(84px, 13vw, 118px); width: auto;
  filter: drop-shadow(0 0 38px rgba(255, 255, 255, 0.12));
}
/* light sweep, masked to the logo glyphs */
.preloader-mark::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.75) 50%, transparent 66%) no-repeat;
  background-size: 260% 100%;
  -webkit-mask: url('../assets/fa-logo-white.png') center / contain no-repeat;
          mask: url('../assets/fa-logo-white.png') center / contain no-repeat;
  animation: preSheen 2.6s var(--ease-inout) 600ms infinite;
}
@keyframes preSheen {
  0%   { background-position: 130% 0; }
  55%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}

.preloader-track {
  width: min(320px, 64vw); height: 1px;
  background: var(--accent-12);
  position: relative; overflow: hidden;
}
.preloader-track i {
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.preloader-foot {
  width: min(320px, 64vw);
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; gap: 20px;
}
.preloader-label {
  font: 600 9px/1.4 var(--font-ui);
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--text-low);
}
.preloader-pct {
  font: 600 13px/1 var(--font-display);
  letter-spacing: 0.06em; color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.preloader-pct small { font: 600 9px var(--font-ui); color: var(--text-low); margin-left: 3px; }

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: opacity 400ms ease, visibility 0s 400ms; }
  .preloader.is-exit { transform: none; opacity: 0; }
  .preloader-inner { animation: none; }
  .preloader-mark::after { display: none; }
}