/* ─────────────────────────────────────────────────────────────────────────
   Dabboussi Motors — house layer over the Modernist design system.
   Token values are the ones documented in the design handoff.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --color-bg: #e7eaf1;
  --color-surface: #ffffff;
  --color-text: #161b23;
  --color-divider: #cdd4e0;
  --color-accent: #3d6fd0;
  --color-accent-100: #eef3fc;
  --color-accent-200: #d8e3f8;
  --color-accent-300: #b6caf2;
  --color-accent-400: #7a9ee0;
  --color-accent-500: #3d6fd0;
  --color-accent-600: #3260b8;
  --color-accent-700: #274c94;
  --color-accent-800: #1d3a72;
  --color-accent-900: #142850;
  --color-accent-2: #3d6fd0;
  --color-accent-2-500: #3d6fd0;
  --color-accent-2-700: #274c94;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --edge: clamp(20px, 5vw, 72px);
  --lead: 28px;
  --nav-h: 60px;         /* remeasured from the real nav by site.js */

  /* dark grounds */
  --dark-1: #0c1b23;   /* featured band, stats, render backdrop outer */
  --dark-2: #0a1720;   /* lineup ground, sticky filter fill */
  --dark-3: #16232d;   /* render backdrop inner */
  --ink-dark: #f4f6f9; /* ink on dark */

  --ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-image: cubic-bezier(0.16, 0.84, 0.24, 1);
}

/* ── System overrides ──────────────────────────────────────────────────── */

.btn-primary,
.nav a.btn-primary { color: var(--color-bg); box-shadow: 0 6px 18px rgba(61, 111, 208, 0.22); }
.btn, .input, .tag, .seg, .seg-opt, select { border-radius: 999px; }
.card {
  border-radius: 20px;
  border: 1px solid var(--color-divider);
  box-shadow: 0 1px 2px rgba(22, 27, 35, 0.05), 0 12px 32px rgba(22, 27, 35, 0.06);
  overflow: hidden;
}
.table th, .table td { border-color: var(--color-divider); }
.hr { height: 1px; background: var(--color-divider); border: 0; max-width: 1240px; margin: 0 auto; }
.nav { border-bottom: 1px solid var(--color-divider); }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  text-wrap: pretty;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  min-height: 100vh;
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
button { font: inherit; }
img { display: block; }

/* ── Shared layout primitives ──────────────────────────────────────────── */

/* full-bleed background, content aligned to the same 1240px measure */
.bleed { padding-inline: max(var(--edge), calc((100% - 1240px) / 2 + var(--edge))); }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--edge); }

.on-dark { background: var(--dark-1); color: var(--ink-dark); }

.stage {
  display: block;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 55%, var(--dark-3) 0%, var(--dark-1) 78%);
}
.stage img { width: 100%; height: 100%; object-fit: contain; }

/* A render frame owns its own proportions (and clamps to the viewport), so the
   stage must fill it rather than keep the photograph's ratio — otherwise the
   image overflows the frame and the car sits off-centre inside it. */
.render > .stage { position: absolute; inset: 0; }
.stage img.cover { object-fit: cover; }

/* honest placeholder where the dealer's photography has not arrived yet */
.stage.is-empty { display: grid; place-items: center; }
.stage.is-empty::after {
  content: "Photograph to come";
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 249, 0.38);
}
.credit {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 10px; letter-spacing: 0.02em;
  color: rgba(244, 246, 249, 0.5);
}
.credit:hover { color: rgba(244, 246, 249, 0.8); }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg);
  transition: box-shadow 260ms ease;
}
.nav.is-scrolled {
  box-shadow: 0 1px 0 var(--color-divider), 0 18px 40px rgba(22, 27, 35, 0.10);
}
.nav-brand { letter-spacing: -0.01em; }
.nav a, .nav button.linklike { white-space: nowrap; }
.nav button.linklike {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: inherit; font-size: 14px; padding: 0;
}
.nav button.linklike:hover { color: var(--color-accent); }

/* ── Hero (ruled — the shipped default) ────────────────────────────────── */

.hero-ruled { max-width: 1240px; margin: 0 auto; padding: calc(3.5 * var(--lead)) var(--edge) calc(2.5 * var(--lead)); }
.hero-rule {
  width: 72px; height: 2px; background: var(--color-accent);
  transform-origin: left center; margin: 0 0 18px;
}
.hero-eyebrow {
  display: block; font-size: 13px; line-height: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 14px;
}
.hero-ruled h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6.2vw, 84px); line-height: 1.06; letter-spacing: -0.024em;
  margin: 0 0 0 -0.058em; max-width: 22ch;
}
.hero-ruled h1 span { display: block; }
.hero-lede {
  font-size: 17px; line-height: var(--lead); max-width: 58ch;
  margin: calc(1.5 * var(--lead)) 0 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--lead); }
.hero-actions .btn { white-space: nowrap; }

/* ── Hero (coast — the shipped hero) ─────────────────────────────────────

   The hero was the one band on this page that opted out of what the rest of
   it does: type on flat grey, half the width empty, no photograph, while
   every other band is a dark ground with photography carrying it.

   It now does both, in the page's own order. Everywhere else — the featured
   tiles, the lineup cards, the Avatr pair — a photograph sits in its own
   frame beside ruled type, never behind it. So the display type takes the
   full measure on the dark ground and the photograph takes the full width
   beneath it, the two divided by the system's 2px rule. Nothing overlays
   the subject, so nothing needs a scrim to stay legible, and the headline
   gets the whole 1240px measure it needs to run at hero scale.

   The band is cut by the fold on purpose: the photograph continues past it. */

.hero-coast { background: var(--dark-1); color: var(--ink-dark); }
.hero-coast-copy {
  max-width: 1240px; margin: 0 auto;
  padding: calc(2.5 * var(--lead)) var(--edge) calc(2 * var(--lead));
}
.hero-coast .hero-rule { background: var(--ink-dark); width: 96px; margin-bottom: 20px; }
.hero-coast h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 5.6vw, 76px); line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 0 -0.058em; color: #ffffff;
}
.hero-coast h1 span { display: block; }
.hero-coast .hero-lede {
  font-size: 16.5px; line-height: var(--lead); max-width: 58ch;
  margin: calc(1.1 * var(--lead)) 0 0;
  color: rgba(244, 246, 249, 0.82);
}
.hero-coast .hero-actions { margin-top: calc(1.1 * var(--lead)); }
.hero-coast .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); }
.hero-coast .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.hero-credential {
  font-size: 13px; line-height: 20px; letter-spacing: 0.02em;
  margin: calc(1.25 * var(--lead)) 0 0; padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  color: rgba(244, 246, 249, 0.76);
  max-width: 58ch;
}

/* The photograph's own band, on the rule. */
.hero-coast-shot {
  position: relative; width: 100%; overflow: hidden;
  height: clamp(300px, 46vh, 520px);
  border-top: 2px solid var(--color-divider);
  background: var(--dark-3);
}
.hero-coast-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%;
}

/* The one authored arrival on the page. The rule draws, the headline is
   revealed line by line — the page's existing two moves — and then the
   photograph's band opens from the rule downward while the frame settles out
   of its own motion, so the dust is still travelling as the page lands.
   The image is fully opaque from the first frame; only the band that holds
   it is clipped, so a failed script can never leave the hero blank. */
@media (prefers-reduced-motion: no-preference) {
  .hero-coast .hero-rule { animation: dm-wipe 720ms var(--ease-enter) both; }
  .hero-coast h1 span:nth-child(1) { animation: dm-line 900ms 180ms var(--ease-enter) both; }
  .hero-coast h1 span:nth-child(2) { animation: dm-line 900ms 300ms var(--ease-enter) both; }
  .hero-coast h1 span:nth-child(3) { animation: dm-line 900ms 420ms var(--ease-enter) both; }
  .hero-coast .hero-lede { animation: dm-rise 680ms 600ms var(--ease-enter) both; }
  .hero-coast .hero-actions { animation: dm-rise 680ms 700ms var(--ease-enter) both; }
  .hero-coast .hero-credential { animation: dm-rise 680ms 800ms var(--ease-enter) both; }
  .hero-coast-shot { animation: dm-band 760ms 520ms var(--ease-enter) both; }
  .hero-coast-shot img { animation: dm-settle 2400ms 520ms var(--ease-image) both; }
}
@keyframes dm-band { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dm-settle { from { transform: scale(1.09); } to { transform: none; } }

@media (max-width: 720px) {
  .hero-coast-shot { height: clamp(220px, 34vh, 340px); }
}

/* Hero (bleed — alternate, switch with data-hero="bleed" on <body>) */
.hero-bleed { position: relative; width: 100%; height: min(78vh, 720px); overflow: hidden; }
/* .shot is also the configurator's 96px gallery thumbnail, further down this
   file; without these resets that rule wins and the hero photograph collapses
   to a thumbnail. Scoped here so the gallery is untouched. */
.hero-bleed .shot {
  position: absolute; inset: -2%;
  width: auto; aspect-ratio: auto; opacity: 1;
  border: 0; background: none; cursor: default;
}
.hero-bleed .shot img { width: 100%; height: 100%; object-fit: cover; }
.hero-bleed .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(32,30,29,0.86) 0%, rgba(32,30,29,0.55) 55%, rgba(32,30,29,0.1) 100%);
}
.hero-bleed .copy {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  max-width: 1240px; margin: 0 auto; padding: 0 var(--edge) calc(2 * var(--lead));
  pointer-events: none; overflow: hidden; color: var(--color-bg);
}
.hero-bleed h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 6vw, 78px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--color-bg); margin: 0 0 0 -0.058em; max-width: 20ch;
}
.hero-bleed h1 span { display: block; }
.hero-bleed .hero-eyebrow { color: var(--color-bg); }
.hero-bleed .hero-actions { pointer-events: auto; }

/* ── Featured three ────────────────────────────────────────────────────── */

.featured { background: var(--dark-1); color: var(--ink-dark); padding-block: calc(2 * var(--lead)) calc(2.5 * var(--lead)); }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.tile {
  appearance: none; cursor: pointer; padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 16px;
  background: transparent; border: 0; color: var(--ink-dark);
}
.tile .stage {
  position: relative; aspect-ratio: 4 / 3; border-radius: 20px;
  background: radial-gradient(120% 90% at 50% 50%, var(--dark-3) 0%, var(--dark-1) 76%);
}
.tile .stage img { transition: transform 620ms var(--ease-image); }
.tile:hover .stage img { transform: scale(1.06); }
.tile-body { display: flex; flex-direction: column; gap: 6px; }
.tile-kind { font-size: 14px; line-height: 20px; color: rgba(244, 246, 249, 0.7); }
.tile-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: 1.1; letter-spacing: -0.02em;
}
.tile-price { font-size: 14px; color: rgba(244, 246, 249, 0.8); }
/* ── Featured three — the depth stage ────────────────────────────────────

   A camera push, not a filmstrip: the car that is leaving travels back into
   depth and goes soft while the one arriving comes from further back still
   and lands face-on, and the marque's name is revealed on dm-line — the same
   move the headline uses — as its car settles. One car forward at a time, so
   the band gives the whole width to the thing being shown.

   The blur is the one costly property here. It is bounded to the outgoing and
   parked frames only, which are already fading out, and dropped entirely on
   narrow screens and on machines that report few cores. The forward car never
   carries a filter, so its preserve-3d context is never flattened. */

.zstage { position: relative; }
.zframe {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 46%;
}
.zslide {
  grid-area: 1 / 1;
  transform-style: preserve-3d;
  transition:
    transform 900ms var(--ease-image),
    opacity 520ms ease,
    filter 620ms ease;
}
/* Only while the band is actually on screen, so three promoted layers are not
   held for a section nobody has scrolled to. */
.zstage.is-live .zslide { will-change: transform, opacity; }
.zframe { display: grid; }
.zslide.is-instant { transition: none; }

.zslide.is-current {
  transform: translateZ(0) scale(1);
  opacity: 1; filter: none;
  pointer-events: auto; z-index: 2;
}
.zslide.is-back {
  transform: translateZ(-900px) scale(1);
  opacity: 0; pointer-events: none; z-index: 0;
}
.zslide.is-out {
  transform: translateZ(-460px) scale(1);
  opacity: 0; pointer-events: none; z-index: 1;
}
@media (min-width: 720px) {
  .zstage:not(.no-blur) .zslide.is-back { filter: blur(12px); }
  .zstage:not(.no-blur) .zslide.is-out { filter: blur(8px); }
}

.zslide .stage { aspect-ratio: 21 / 9; }

/* The marque, set on its own plane behind the car. */
.zbrand {
  display: block; align-self: start;
  transform: translateZ(-170px); transform-origin: left center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 4.2vw, 62px); line-height: 1.05; letter-spacing: -0.035em;
  text-transform: uppercase; color: #ffffff;
  pointer-events: none;
}
.zslide.is-current .zbrand { animation: dm-line 760ms 200ms var(--ease-enter) both; }

.zcontrols {
  display: flex; align-items: center; gap: 10px;
  margin-top: calc(0.75 * var(--lead));
}
.zdots { display: flex; align-items: center; gap: 8px; margin-inline: 6px; }
.zplay { margin-left: auto; }
.zdot {
  appearance: none; cursor: pointer; padding: 0;
  width: 44px; height: 44px; border: 0; background: transparent;
  outline-offset: 2px; position: relative;
}
.zdot::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 34px; height: 2px; transform: translate(-50%, -50%);
  background: rgba(244, 246, 249, 0.3);
  transition: background 200ms ease;
}
.zdot:hover::after { background: rgba(244, 246, 249, 0.6); }
.zdot[aria-pressed="true"]::after { background: var(--ink-dark); }
.zbtn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent; color: var(--ink-dark);
  outline-offset: 2px;
  transition: background 180ms ease, border-color 180ms ease;
}
.zbtn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.55); }

/* Reduced motion gets the band as a row: all three cars, nothing travelling,
   nothing to pause. The controls would drive an animation that never runs, so
   they are not shown. */
@media (prefers-reduced-motion: reduce) {
  .zframe {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px; perspective: none;
  }
  .zslide, .zslide.is-current, .zslide.is-back, .zslide.is-out {
    grid-area: auto; transform: none; opacity: 1; filter: none;
    pointer-events: auto; transition: none; will-change: auto;
  }
  .zslide .stage { aspect-ratio: 4 / 3; }
  .zbrand { position: static; transform: none; font-size: 20px; margin-bottom: 4px; }
  .zslide.is-current .zbrand { animation: none; }
  .zcontrols { display: none; }
}

.footnote {
  font-size: 11px; line-height: 18px; margin: calc(1.5 * var(--lead)) 0 0;
  max-width: 96ch; color: rgba(244, 246, 249, 0.55);
}

/* ── Stats ─────────────────────────────────────────────────────────────── */

.stats { background: var(--dark-1); color: var(--ink-dark); padding-block: calc(2.5 * var(--lead)); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: calc(1.5 * var(--lead)) var(--lead); }
.stat-figure {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; color: #ffffff;
  margin: 0 0 0 -0.045em; font-feature-settings: 'tnum' 1;
}
.stat-label {
  font-size: 14.5px; line-height: 21px; color: rgba(244, 246, 249, 0.72);
  margin: 14px 0 0; max-width: 26ch;
}

/* ── Lineup ──────────────────────────────────────────────────────────────

   A showroom floor, not a list: the range sits on the light ground with the
   photographs doing the work, divided by the system's 2px rules. Zero radius
   throughout — the grid gap IS the border, so rules run unbroken across the
   whole floor instead of every card carrying its own outline. */

.lineup {
  --color-bg: #0b1e38;        /* the floor */
  --color-surface: #13294a;   /* the cards standing on it */
  --color-text: #eaf1fb;      /* ink on both */
  --color-divider: #27476f;   /* the 2px rules */
  --color-accent: #7a9ee0;    /* accents lift on a dark ground */
  --color-accent-100: #1b3559;
  --color-accent-300: #3a6099;
  --color-accent-700: #a8c6f2;

  background: var(--color-bg); color: var(--color-text);
  padding-block: calc(3 * var(--lead));
}
.lineup h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 calc(0.5 * var(--lead)) -0.02em;
}
.lineup-intro {
  font-size: 15.5px; line-height: var(--lead); max-width: 58ch;
  margin: 0 0 calc(0.5 * var(--lead));
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* Vehicles photograph best on white, whatever the ground around them. */
.lineup .stage { background: #ffffff; }
.lineup .stage.is-empty::after { color: rgba(22, 27, 35, 0.6); }

/* ── Filters ── body style is the primary axis, so it reads as tabs on a rule;
      brand and order are secondary controls on the line below. */

.filters {
  position: sticky; top: var(--nav-h); z-index: 12;
  display: flex; flex-direction: column; gap: 0;
  padding: 0; margin: 0 0 calc(1.25 * var(--lead));
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.filter-row { display: flex; flex-wrap: wrap; gap: 0; }
.filter-row.split {
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--color-divider);
}

.tab {
  appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 15px;
  padding: 16px 26px 14px 0; margin-right: 26px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  outline-offset: 2px; white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.tab:hover { color: var(--color-text); }
.tab[aria-pressed="true"] {
  color: var(--color-text); border-bottom-color: var(--color-accent);
  font-weight: 600; margin-bottom: -2px;
}
.tab .count {
  font-size: 12.5px; margin-left: 7px; vertical-align: 2px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-feature-settings: 'tnum' 1;
}
.tab.is-empty { opacity: 0.4; }

.pill {
  appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 14px;
  padding: 10px 16px; margin-right: 8px; min-height: 44px; border-radius: 0;
  outline-offset: 2px; white-space: nowrap;
  border: 1px solid var(--color-divider); background: transparent; color: var(--color-text);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pill:hover { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.pill[aria-pressed="true"] {
  border-color: var(--color-text); background: var(--color-text); color: var(--color-bg);
}
.pill.is-empty { opacity: 0.4; }
.pill .count { opacity: 0.6; font-feature-settings: 'tnum' 1; }

.filter-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.result-count {
  font-size: 14px; font-feature-settings: 'tnum' 1;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.sort-btn {
  appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 14px;
  padding: 10px 16px; min-height: 44px; border-radius: 0; border: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text); outline-offset: 2px; white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}
.sort-btn:hover { background: var(--color-accent-100); border-color: var(--color-accent-300); }

/* ── Flagship ── one model gets the width of the page when its brand is chosen. */

.flagship {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  background: var(--color-surface); border: 2px solid var(--color-divider);
  border-radius: 0; overflow: hidden; margin: 0 0 calc(1.25 * var(--lead));
}
.flagship .stage {
  position: relative; min-height: 320px; aspect-ratio: 16 / 10;
  background: #ffffff; padding: 18px;
}
.flagship .stage img { object-fit: contain; }
.flagship-body {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(24px, 3vw, 44px); border-left: 2px solid var(--color-divider);
}
.flagship-kicker { font-size: 14px; color: var(--color-accent-700); }
.flagship h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin: 0;
}
.flagship p {
  font-size: 15.5px; line-height: var(--lead); margin: 0; max-width: 46ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.flagship .tag-outline { white-space: nowrap; }
.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-was {
  font-size: 15px; text-decoration: line-through;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.price-now {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 30px; font-feature-settings: 'tnum' 1;
}
.price-note { font-size: 14px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* ── The floor ── a grid whose 2px gaps are the dividers. */

/* The rules belong to the cards, not to the container: a grid whose background
   shows through its gaps paints any unoccupied cell as a full-size slab. */
.rows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0; background: transparent;
  border-top: 2px solid var(--color-divider);
  border-left: 2px solid var(--color-divider);
}
.mcard {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; flex-direction: column; gap: 0;
  padding: 0; border-radius: 0;
  border: 0 solid var(--color-divider); border-right-width: 2px; border-bottom-width: 2px;
  background: var(--color-surface); color: var(--color-text);
  transition: background 200ms ease;
}
.mcard:hover, .mcard:focus-visible { background: var(--color-accent-100); }
.mcard .stage { position: relative; aspect-ratio: 16 / 10; padding: 14px 14px 0; }
.mcard .stage img { transition: transform 620ms var(--ease-image); }
.mcard:hover .stage img { transform: scale(1.04); }

.mcard-id { display: flex; flex-direction: column; gap: 4px; padding: 4px 22px 18px; min-width: 0; }
.mcard-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2vw, 30px); line-height: 1.08; letter-spacing: -0.025em;
}
.mcard-meta {
  font-size: 14.5px; line-height: 21px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* Three figures a buyer actually compares, ruled apart. */
.mcard-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-top: auto; border-top: 1px solid var(--color-divider);
}
.mcard-specs .cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px 12px 22px; min-width: 0;
  border-left: 1px solid var(--color-divider);
}
.mcard-specs .cell:first-child { border-left: 0; }
.mcard-specs .v {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 20px; font-feature-settings: 'tnum' 1;
}
.mcard-specs .k {
  font-size: 12px; line-height: 16px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.mcard-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 14px 22px 18px; border-top: 1px solid var(--color-divider);
}
.mcard-price { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.mcard-price .was {
  font-size: 13.5px; text-decoration: line-through; font-feature-settings: 'tnum' 1;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.mcard-price .now {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; font-feature-settings: 'tnum' 1;
}
.mcard-cue {
  font-size: 13.5px; color: var(--color-accent-700);
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.mcard:hover .mcard-cue, .mcard:focus-visible .mcard-cue { border-bottom-color: var(--color-accent); }

.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 40px 0 44px; border-top: 2px solid var(--color-divider);
}
.empty-state p { font-size: 17px; line-height: 26px; margin: 0; max-width: 40ch; }
.ghost-pill {
  appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 14px;
  padding: 11px 20px; border-radius: 0; border: 1px solid var(--color-text);
  background: transparent; color: var(--color-text); white-space: nowrap;
}
.ghost-pill:hover { background: var(--color-text); color: var(--color-bg); }

/* ── Inline configurator ───────────────────────────────────────────────── */

.configure { background: var(--dark-1); color: var(--ink-dark); padding-block: calc(3 * var(--lead)) calc(3.5 * var(--lead)); }
.configure-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 calc(1.5 * var(--lead)); }
.configure-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -0.025em; color: #ffffff;
}
.open-config {
  appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 30px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; color: var(--ink-dark); white-space: nowrap;
}
.configure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; align-items: start; }
.render {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, var(--dark-3) 0%, var(--dark-1) 74%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.configure-panel { display: flex; flex-direction: column; gap: 22px; }
.panel-meta { font-size: 14px; line-height: 20px; color: rgba(244, 246, 249, 0.72); }
.configure-panel h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.025em; margin: 0;
}
.panel-blurb { font-size: 15.5px; line-height: 25px; margin: 0; max-width: 48ch; color: rgba(244, 246, 249, 0.78); }
.step-label { font-size: 14px; color: rgba(244, 246, 249, 0.7); }
.stack { display: flex; flex-direction: column; gap: 12px; }

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch {
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer; padding: 0;
  outline-offset: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: transform 200ms var(--ease-enter), box-shadow 200ms ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { border-color: #ffffff; }

.trim {
  appearance: none; cursor: pointer; text-align: left; font-family: var(--font-body);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
  border-radius: 16px; color: var(--ink-dark);
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04);
  transition: background 180ms ease, border-color 180ms ease;
}
.trim[aria-pressed="true"] { border-color: #ffffff; background: rgba(255, 255, 255, 0.14); }
.trim-name { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 246, 249, 0.75); }
.trim-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trim-price .now { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.trim-price .was { font-size: 13px; text-decoration: line-through; color: rgba(244, 246, 249, 0.65); }

.total {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px;
}
.total .now { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 32px; font-feature-settings: 'tnum' 1; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── After-sales ───────────────────────────────────────────────────────── */

.service { max-width: 1240px; margin: 0 auto; padding: calc(3 * var(--lead)) var(--edge) calc(2.5 * var(--lead)); }
.service h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 var(--lead) -0.02em; max-width: 26ch;
}
.service-row {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--lead) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.5 * var(--lead)) 0;
}
.service-row + .service-row { border-top: 1px solid var(--color-divider); }
.service-row h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--lead); letter-spacing: -0.01em; margin: 0;
}
.service-row p {
  font-size: 15.5px; line-height: var(--lead); margin: 0; max-width: 52ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ── About ─────────────────────────────────────────────────────────────── */

.about {
  max-width: 1240px; margin: 0 auto;
  padding: calc(2.5 * var(--lead)) var(--edge) calc(3 * var(--lead));
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--lead) clamp(24px, 5vw, 96px); align-items: center;
}
.about h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.015em;
  margin: 0 0 var(--lead) -0.02em;
}
.about p {
  font-size: 15.5px; line-height: var(--lead); margin: 0 0 var(--lead); max-width: 48ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.about p:last-child { margin-bottom: 0; }
.about figure { margin: 0; width: 100%; aspect-ratio: 951 / 665; }
.about figure img { width: 100%; height: 100%; object-fit: cover; }

/* ── Showrooms ─────────────────────────────────────────────────────────── */

.locations { max-width: 1240px; margin: 0 auto; padding: calc(2.5 * var(--lead)) var(--edge) calc(3 * var(--lead)); }
.locations h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.015em;
  margin: 0 0 calc(1.5 * var(--lead)) -0.02em;
}
.locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--lead); }
.location { border-top: 1px solid var(--color-divider); padding-top: 14px; }
.location h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; line-height: 1.2; margin: 12px 0 10px; }
.location p { font-size: 15px; line-height: var(--lead); margin: 0 0 10px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.location .phone { margin: 0; font-feature-settings: 'tnum' 1; }
.location .hours { font-size: 14px; line-height: 20px; margin: 10px 0 0; color: color-mix(in srgb, var(--color-text) 68%, transparent); }

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact { background: var(--color-text); color: var(--color-bg); }
.contact-inner { max-width: 1240px; margin: 0 auto; padding: calc(3 * var(--lead)) var(--edge); }
.contact h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.015em;
  margin: 0 0 calc(1.5 * var(--lead)) -0.058em;
}
.contact h2 span { display: block; }
.contact form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); max-width: 880px; }
.contact label { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.contact .input { color: var(--color-text); }
.contact .form-actions { grid-column: 1 / -1; display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.contact .btn-ghost { color: var(--color-bg); border-color: var(--color-bg); white-space: nowrap; }
.contact .call { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.contact .call-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Which showroom this enquiry will reach, named under the island chooser so
   the routing is visible rather than implied. */
.form-hint {
  grid-column: 1 / -1; margin: -4px 0 0;
  font-size: 13.5px; line-height: 20px;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
}
/* Native appearance is kept on purpose: the platform's own disclosure arrow is
   the thing that says "this opens", and stripping it left a control that read
   as a text field. Only the room it needs is added. */
.contact select.input { cursor: pointer; padding-right: 6px; }
.contact .thanks { max-width: 60ch; }
.contact .thanks p:first-child { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; line-height: 1.2; margin: 0 0 12px; }
.contact .thanks p + p { font-size: 15.5px; line-height: var(--lead); margin: 0 0 var(--lead); }
.form-error { grid-column: 1 / -1; font-size: 14px; color: #ffb4a8; margin: 0; }

/* ── Footer ────────────────────────────────────────────────────────────── */

footer.site {
  max-width: 1240px; margin: 0 auto; padding: calc(2 * var(--lead)) var(--edge);
  font-size: 13px; line-height: var(--lead);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
}

/* ── Full-page configurator ────────────────────────────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: var(--dark-1); color: var(--ink-dark); overflow-y: auto;
}
.overlay[hidden] { display: none; }
.overlay-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(20px, 3vw, 44px);
  background: rgba(5, 7, 10, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.back-btn {
  appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: var(--ink-dark); white-space: nowrap;
}
.overlay-now { font-size: 15px; color: rgba(244, 246, 249, 0.88); }
.overlay-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.overlay-price .was { font-size: 14px; text-decoration: line-through; color: rgba(244, 246, 249, 0.65); }
.overlay-price .now { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; font-feature-settings: 'tnum' 1; }

.overlay-body { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 44px) 64px; display: flex; flex-direction: column; gap: 40px; }
.overlay-head { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; }
.overlay-head h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 6vw, 92px); line-height: 1; letter-spacing: -0.03em; margin: 0;
}
.overlay-head p { font-size: 17px; line-height: 28px; max-width: 62ch; margin: 0; color: rgba(244, 246, 249, 0.82); }

.brand-pill {
  appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 18px; border-radius: 999px;
  outline-offset: 2px; border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05); color: rgba(244, 246, 249, 0.88);
}
.brand-pill[aria-pressed="true"] { border-color: #ffffff; background: rgba(255, 255, 255, 0.16); color: #ffffff; }

.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.rail-item {
  appearance: none; cursor: pointer; text-align: left; flex: 0 0 auto; min-width: 182px;
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px;
  font-family: var(--font-body); scroll-snap-align: start; outline-offset: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05);
  color: rgba(244, 246, 249, 0.92);
  transition: border-color 160ms ease, background 160ms ease;
}
.rail-item[aria-pressed="true"] { border-color: #ffffff; background: #ffffff; color: var(--dark-1); }
.rail-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; letter-spacing: -0.01em; }
.rail-body { font-size: 13.5px; opacity: 0.72; }
.rail-price { font-size: 14px; font-feature-settings: 'tnum' 1; }

.overlay .render {
  aspect-ratio: 4 / 3; max-height: 74vh; border-radius: 28px;
  background: radial-gradient(120% 90% at 50% 45%, var(--dark-3) 0%, var(--dark-1) 72%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.swatch-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.swatch-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; }
.swatch-cell span { font-size: 11px; line-height: 14px; text-align: center; color: rgba(244, 246, 249, 0.75); }

.overlay-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: start; }
.spec-row {
  display: flex; gap: 16px; justify-content: space-between; padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 15px;
}
.spec-row .label { color: rgba(244, 246, 249, 0.68); }
.spec-row .value { text-align: right; }
.equipment {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px; margin: 0; padding: 0 0 0 18px;
}
.equipment li { font-size: 15px; line-height: 22px; color: rgba(244, 246, 249, 0.86); }

.summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 24px clamp(20px, 3vw, 32px); border-radius: 24px;
  background: var(--dark-2); border: 1px solid rgba(255, 255, 255, 0.12);
}
.summary-line { display: flex; flex-direction: column; gap: 6px; }
.summary-line .what { font-size: 14px; color: rgba(244, 246, 249, 0.72); }
.summary-line .now { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 34px; line-height: 1.05; }
.summary-line .was { font-size: 16px; text-decoration: line-through; color: rgba(244, 246, 249, 0.65); }

body.is-locked { overflow: hidden; }

/* ── Motion ────────────────────────────────────────────────────────────── */

@keyframes dm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dm-line {
  from { clip-path: inset(0 0 108% 0); transform: translateY(0.2em); }
  to   { clip-path: inset(-25% -25% -25% 0); transform: none; }
}
@keyframes dm-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dm-swap { from { opacity: 0; transform: translateX(-26px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes dm-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

.hero-ruled .hero-rule   { animation: dm-wipe 720ms var(--ease-enter) both; }
.hero-ruled .hero-eyebrow{ animation: dm-rise 620ms 120ms var(--ease-enter) both; }
.hero-ruled h1 span:nth-child(1) { animation: dm-line 900ms 180ms var(--ease-enter) both; }
.hero-ruled h1 span:nth-child(2) { animation: dm-line 900ms 300ms var(--ease-enter) both; }
.hero-ruled h1 span:nth-child(3) { animation: dm-line 900ms 420ms var(--ease-enter) both; }
.hero-ruled .hero-lede   { animation: dm-rise 700ms 560ms var(--ease-enter) both; }
.hero-ruled .hero-actions{ animation: dm-rise 700ms 680ms var(--ease-enter) both; }

.hero-bleed .shot         { animation: dm-kenburns 26s ease-out both; }
.hero-bleed .hero-rule    { animation: dm-wipe 760ms var(--ease-enter) both; }
.hero-bleed .hero-eyebrow { animation: dm-rise 640ms 140ms var(--ease-enter) both; }
.hero-bleed h1 span:nth-child(1) { animation: dm-line 940ms 220ms var(--ease-enter) both; }
.hero-bleed h1 span:nth-child(2) { animation: dm-line 940ms 360ms var(--ease-enter) both; }
.hero-bleed .hero-actions { animation: dm-rise 700ms 540ms var(--ease-enter) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-ruled *, .hero-bleed *, .hero-coast * { animation: none !important; }
  .tile .stage img, .mcard .stage img, .swatch, .mcard, .nav, .pill, .tab, .sort-btn, .trim, .rail-item { transition: none; }

  /* Nothing is held back under reduced motion, so the map is simply drawn and
     the configurator simply arrives. Less movement, not a page that never
     finishes — and never a part left invisible waiting for an animation. */
  .map-panel.map-drawn *,
  .overlay.is-entering .overlay-bar,
  .overlay.is-entering .overlay-body { animation: none !important; }
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .rows { grid-template-columns: minmax(0, 1fr); }
  .flagship-body { border-left: 0; border-top: 2px solid var(--color-divider); }
  .tab { padding-right: 18px; margin-right: 18px; }
  .service-row { grid-template-columns: minmax(0, 1fr); }

  /* The sticky bar must not eat the viewport it is filtering. Each control row
     keeps to one line and scrolls sideways, the way .rail already does, instead
     of wrapping into a block that pins half the screen. */
  .filter-row:not(.split) { flex-wrap: nowrap; overflow-x: auto; }
  .filter-row.split > .filter-row { min-width: 0; }
}

/* Below this the brand pills and the count/order pair stop fitting on one line
   together; give each the full width rather than squeezing the pills into a
   scroller too narrow to show there is more than one brand. */
@media (max-width: 720px) {
  .filter-row.split > .filter-row { flex: 1 1 100%; }
  .filter-meta { flex: 1 1 100%; justify-content: space-between; }
}

/* ── Odds and ends ─────────────────────────────────────────────────────── */

.stage { position: relative; }
.nav { flex-wrap: wrap; row-gap: 8px; }

.locations-lede {
  font-size: 15.5px; line-height: var(--lead); max-width: 58ch; margin: 14px 0 0;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.about-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.about-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--radius-lg);
}
.about-figure figcaption {
  font-size: 13.5px; line-height: 20px; max-width: 46ch;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* ── Avatr ───────────────────────────────────────────────────────────────

   The marque's own palette, rebound for this section only: brand graphite
   (#35363a, taken from the supplied brandmark artwork) over a deeper ground,
   white ink, and a platinum accent in place of the house blue. Nothing
   outside this section inherits it. */

.avatr {
  --color-bg: #1b1d21;
  --color-surface: #35363a;
  --color-text: #f2f3f5;
  --color-divider: #4b4d53;
  --color-accent: #cfd4dc;
  --color-accent-100: #2a2c31;
  --color-accent-300: #5d616a;
  --color-accent-700: #dfe3e9;

  background: var(--color-bg); color: var(--color-text);
  padding-block: calc(3 * var(--lead));
}
.avatr-head {
  display: grid; grid-template-columns: 196px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
  padding-bottom: calc(1.5 * var(--lead));
  border-bottom: 2px solid var(--color-divider);
}
.avatr-mark { display: block; width: 196px; height: auto; }
.avatr-words { display: flex; flex-direction: column; gap: 14px; }
.avatr h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 0 -0.02em; max-width: 24ch;
}
.avatr-words p {
  font-size: 16px; line-height: 28px; margin: 0; max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.avatr-models {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0; margin-top: calc(1.5 * var(--lead));
  border-left: 2px solid var(--color-divider);
}
.avatr-card {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; flex-direction: column; padding: 0; border-radius: 0;
  border: 0 solid var(--color-divider); border-right-width: 2px;
  border-top-width: 2px; border-bottom-width: 2px;
  background: transparent; color: var(--color-text);
  transition: background 200ms ease;
}
.avatr-card:hover, .avatr-card:focus-visible { background: var(--color-accent-100); }
.avatr-card .stage { aspect-ratio: 16 / 10; background: var(--color-surface); padding: 16px 16px 0; }
.avatr-card .stage img { transition: transform 620ms var(--ease-image); }
.avatr-card:hover .stage img { transform: scale(1.04); }
.avatr-id { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 16px; }
.avatr-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.06; letter-spacing: -0.025em;
}
.avatr-body { font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.avatr-blurb {
  font-size: 15px; line-height: 25px; margin: 0; padding: 0 24px 18px; max-width: 46ch;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.avatr-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: auto; border-top: 2px solid var(--color-divider); }
.avatr-figures .cell { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 24px; border-left: 1px solid var(--color-divider); }
.avatr-figures .cell:first-child { border-left: 0; }
.avatr-figures .v { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; font-feature-settings: 'tnum' 1; }
.avatr-figures .k { font-size: 12px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.avatr-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 24px 20px; border-top: 1px solid var(--color-divider); }
.avatr-price { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.avatr-price .was { font-size: 13.5px; text-decoration: line-through; font-feature-settings: 'tnum' 1; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.avatr-price .now { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 23px; font-feature-settings: 'tnum' 1; }
.avatr-cue { font-size: 13.5px; color: var(--color-accent-700); border-bottom: 1px solid transparent; white-space: nowrap; }
.avatr-card:hover .avatr-cue, .avatr-card:focus-visible .avatr-cue { border-bottom-color: var(--color-accent); }

@media (max-width: 720px) {
  .avatr-head { grid-template-columns: minmax(0, 1fr); }
  .avatr-models { grid-template-columns: minmax(0, 1fr); }
}

/* Paint chooser and the car's own photographs, side by side on one rule. */
.paint-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px; align-items: start;
}
.gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.configure-panel .shot { width: 72px; }
.gallery-label { font-size: 13px; color: rgba(244, 246, 249, 0.62); }
.gallery-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.shot {
  appearance: none; cursor: pointer; padding: 0; border-radius: 0;
  width: 96px; aspect-ratio: 3 / 2; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.22); background: #fff;
  transition: border-color 160ms ease, opacity 160ms ease;
  outline-offset: 2px; opacity: 0.78;
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot:hover { opacity: 1; border-color: rgba(255, 255, 255, 0.5); }
.shot[aria-pressed="true"] { opacity: 1; border-color: #fff; }

/* Where the dealer's photography has not arrived yet, on a light ground. */
.placeholder {
  width: 100%;
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
  display: grid; place-items: center;
}
.placeholder::after {
  content: attr(data-label);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
}

/* ── Locator map ─────────────────────────────────────────────────────────
   Drawn by assets/map.js from Natural Earth geometry. Until it loads the
   panel keeps its placeholder label, so there is never a broken frame. */
.map-panel.map-ready {
  --map-sea: #dde3ee;
  --map-land: #ffffff;
  --map-line: var(--color-divider);
  --map-pin: var(--color-accent);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: none;
  overflow: hidden;
  display: block;
}
.map-panel.map-ready::after { content: none; }
.map-panel svg { display: block; width: 100%; height: 100%; }
.map-panel .map-island {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; letter-spacing: -0.02em; fill: var(--color-text);
}
.map-panel .map-city { font-size: 16px; fill: color-mix(in srgb, var(--color-text) 62%, transparent); }
.map-panel .map-sea-label {
  font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  fill: color-mix(in srgb, var(--color-text) 38%, transparent);
}
.map-panel .map-scale {
  font-size: 13px; fill: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-feature-settings: "tnum" 1;
}
@media (max-width: 720px) {
  .map-panel .map-island { font-size: 40px; }
  .map-panel .map-city { font-size: 26px; }
  .map-panel .map-sea-label, .map-panel .map-scale { font-size: 22px; }
}

/* ── The map draws itself ────────────────────────────────────────────────

   The one authored moment on the page, and it belongs to this section: the
   showrooms are three dots in the Caribbean, so the map plants them rather
   than presenting them finished. Ground first, then each leader line drawn up
   out of the sea, the pin landing on it, and the island named — the hero's own
   two moves (a rule that draws, a line that reveals) spoken in the map's
   grammar. It runs once, on arrival, and never again.

   Until .map-drawn lands the parts are held at their start state; map.js adds
   that class on intersection, or immediately when motion is reduced or
   IntersectionObserver is missing, so the map is never stuck invisible. */

@media (prefers-reduced-motion: no-preference) {
  .map-panel.map-ready .map-land-path,
  .map-panel.map-ready .map-leader,
  .map-panel.map-ready .map-pin-dot,
  .map-panel.map-ready .map-pin-ring,
  .map-panel.map-ready .map-island,
  .map-panel.map-ready .map-city,
  .map-panel.map-ready .map-sea-label,
  .map-panel.map-ready .map-bar { opacity: 0; }
}

.map-panel.map-drawn .map-land-path {
  animation: dm-map-land 640ms var(--ease-enter) both;
}
.map-panel.map-drawn .map-sea-label {
  animation: dm-map-fade 520ms 200ms var(--ease-enter) both;
}
.map-panel.map-drawn .map-leader {
  stroke-dasharray: 1; opacity: 1;
  animation: dm-map-draw 420ms calc(360ms + var(--beat, 0ms)) var(--ease-enter) both;
}
.map-panel.map-drawn .map-pin-dot,
.map-panel.map-drawn .map-pin-ring {
  transform-box: fill-box; transform-origin: center;
  animation: dm-map-pin 380ms calc(290ms + var(--beat, 0ms)) var(--ease-enter) both;
}
.map-panel.map-drawn .map-pin-ring {
  animation-name: dm-map-ring;
  animation-delay: calc(430ms + var(--beat, 0ms));
}
.map-panel.map-drawn .map-island,
.map-panel.map-drawn .map-city {
  transform-box: fill-box;
  animation: dm-map-name 460ms calc(640ms + var(--beat, 0ms)) var(--ease-enter) both;
}
.map-panel.map-drawn .map-city { animation-delay: calc(700ms + var(--beat, 0ms)); }
.map-panel.map-drawn .map-bar {
  transform-box: fill-box; transform-origin: left center;
  animation: dm-map-bar 440ms 980ms var(--ease-enter) both;
}

@keyframes dm-map-land { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dm-map-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-map-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dm-map-pin  { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes dm-map-ring { from { opacity: 0; transform: scale(0.35); } to { opacity: 0.5; transform: none; } }
@keyframes dm-map-name { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(-30% -30% -30% -30%); } }
@keyframes dm-map-bar  { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }

/* ── The configurator arrives ────────────────────────────────────────────
   Opening it replaces the whole view. One short move says the page was
   replaced rather than reloaded; re-renders inside it (paint, level) are
   untouched, so only the arrival is animated. */

.overlay.is-entering .overlay-bar { animation: dm-rise 300ms var(--ease-enter) both; }
.overlay.is-entering .overlay-body { animation: dm-overlay-in 420ms 60ms var(--ease-enter) both; }
@keyframes dm-overlay-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }