/* ==========================================================================
   AMAZING MOTORS — Car model page
   Loaded only on /cars/*.html, on top of style.css.
   ========================================================================== */

/* The studio assets (spin frames, colour shots) are shot on white, so their
   stage stays light in BOTH themes — otherwise a white box appears on dark.
   The rim shots are on black, so their tiles stay dark. Both are deliberate. */
:root {
  --stage-1: #F2F2F5;
  --stage-2: #DCDCE2;
  --stage-ink: #0F0F13;
  --tile-dark: #0E0E11;
}

/* --------------------------------------------------------------------------
   1. MODEL HERO
   -------------------------------------------------------------------------- */
.model-hero {
  position: relative;
  padding-block-start: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem));
  padding-block-end: clamp(2rem, 5vw, 3rem);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,29,37,.10), transparent 60%),
    var(--bg);
  overflow: hidden;
}

.model-hero__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-5);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.model-hero__titles { flex: 1 1 22ch; }

.model-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: var(--sp-2);
}
html[lang="ar"] .model-brand { letter-spacing: normal; text-transform: none; }

.model-title { font-size: clamp(2.5rem, 6.5vw, 4.5rem); line-height: .98; }
.model-sub {
  margin-block-start: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-lg);
  max-width: 52ch;
  text-wrap: pretty;
}

.badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.badge--brand { border-color: transparent; background: rgba(255,29,37,.13); color: var(--brand-ink); }

.model-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   2. HEADLINE STAT STRIP
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}
.stat { background: var(--bg); padding: var(--sp-5) var(--sp-4); text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
html[lang="ar"] .stat__num { font-family: var(--font-ar); line-height: 1.3; }
.stat__num small { font-size: .5em; font-weight: 600; color: var(--text-2); margin-inline-start: .15em; }
.stat__label {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
html[lang="ar"] .stat__label { font-size: var(--fs-sm); letter-spacing: normal; text-transform: none; }

/* --------------------------------------------------------------------------
   3. 360 SPIN VIEWER
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 25%, var(--stage-1), var(--stage-2));
  border: 1px solid var(--border);
}
.stage--tall { aspect-ratio: 1220 / 686; }

.spin__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;      /* let vertical scroll through, capture horizontal */
  cursor: grab;
}
.spin.is-dragging .spin__img { cursor: grabbing; }

.spin__hint {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.spin.is-touched .spin__hint { opacity: 0; }
.spin__hint span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(15,15,19,.78);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.spin__hint .icon { inline-size: 18px; block-size: 18px; }

/* Loading progress */
.spin__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--sp-3);
  justify-items: center;
  background: var(--stage-1);
  color: var(--stage-ink);
  transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.spin.is-ready .spin__loader { opacity: 0; visibility: hidden; }
.spin__bar {
  inline-size: min(220px, 50vw);
  block-size: 4px;
  border-radius: var(--r-pill);
  background: rgba(15,15,19,.14);
  overflow: hidden;
}
.spin__bar i { display: block; block-size: 100%; inline-size: 0%; background: var(--brand-cta); transition: inline-size 120ms linear; }
.spin__pct { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Manual rotate buttons — keyboard/assistive alternative to dragging */
.spin__nav {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: var(--sp-4);
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.spin__nav button {
  pointer-events: auto;
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(15,15,19,.18);
  background: rgba(255,255,255,.8);
  color: var(--stage-ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.spin__nav button:hover { background: #fff; }
.spin__nav .icon { inline-size: 20px; block-size: 20px; }

/* --------------------------------------------------------------------------
   4. SWATCH PICKERS (exterior colour, interior trim)
   -------------------------------------------------------------------------- */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-block-start: var(--sp-5);
}
.swatch {
  position: relative;
  inline-size: 48px; block-size: 48px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 2px solid var(--border-strong);
  background: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.swatch i {
  position: absolute;
  inset: 4px;
  border-radius: var(--r-pill);
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: var(--brand); }
.swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand);
  opacity: .45;
}

.swatch-name {
  margin-block-start: var(--sp-4);
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. INTERIOR CONFIGURATOR
   -------------------------------------------------------------------------- */
.seg {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.seg button {
  min-block-size: 44px;
  padding-inline: var(--sp-5);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
html[lang="ar"] .seg button { font-size: var(--fs-base); }
.seg button[aria-pressed="true"] { background: var(--brand-cta); color: #fff; }
.seg button:not([aria-pressed="true"]):hover { color: var(--text); background: var(--surface-3); }

.config__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: center;
  margin-block-end: var(--sp-5);
}

/* --------------------------------------------------------------------------
   6. RIM TILES (shot on black — tiles stay dark in both themes)
   -------------------------------------------------------------------------- */
.rims { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); }
.rim {
  background: var(--tile-dark);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-align: center;
}
.rim img { inline-size: 100%; max-inline-size: 320px; margin-inline: auto; aspect-ratio: 1; object-fit: contain; }
.rim__label { margin-block-start: var(--sp-3); color: #E6E6EA; font-weight: 600; }
.rim__meta { color: #9A9AA4; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   7. GALLERY
   -------------------------------------------------------------------------- */
.gal__filters { display: flex; justify-content: center; margin-block-end: var(--sp-6); }
.gal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-4);
}
.gal__item {
  position: relative;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.gal__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.gal__item:hover img { transform: scale(1.05); }
.gal__item[hidden] { display: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6,6,8,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-inline-size: 100%; max-block-size: 82vh; border-radius: var(--r-md); }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  inline-size: 52px; block-size: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
}
.lightbox__close { inset-block-start: clamp(1rem,3vw,2rem); inset-inline-end: clamp(1rem,3vw,2rem); }
.lightbox__prev  { inset-inline-start: clamp(.5rem,2vw,2rem); }
.lightbox__next  { inset-inline-end:   clamp(.5rem,2vw,2rem); }
.lightbox__count {
  position: absolute;
  inset-block-end: clamp(1rem,3vw,2rem);
  color: #C9C9D2;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.lightbox .icon { inline-size: 22px; block-size: 22px; }

/* --------------------------------------------------------------------------
   8. SPECIFICATION TABLE
   -------------------------------------------------------------------------- */
.specs { display: grid; gap: var(--sp-4); max-width: 60rem; margin-inline: auto; }

.specgroup { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; }
.specgroup__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-block-size: 64px;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
}
html[lang="ar"] .specgroup__btn { font-family: var(--font-ar); text-transform: none; font-size: var(--fs-lg); }
.specgroup__btn .icon { inline-size: 22px; block-size: 22px; flex: none; color: var(--text-2); transition: transform var(--dur) var(--ease-out); }
.specgroup__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }

.specgroup__panel { display: none; padding: 0 var(--sp-5) var(--sp-5); }
.specgroup__panel.is-open { display: block; }

.specrow {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--border);
}
@media (min-width: 620px) { .specrow { grid-template-columns: 1fr 1.2fr; align-items: baseline; } }
.specrow__k { color: var(--text-2); font-size: var(--fs-sm); }
html[lang="ar"] .specrow__k { font-size: var(--fs-base); }
.specrow__v { font-weight: 600; font-variant-numeric: tabular-nums; text-wrap: pretty; }

.spec-note {
  max-width: 60rem;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-3);
  font-size: var(--fs-sm);
}
html[lang="ar"] .spec-note { font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   9. ENQUIRY BAND
   -------------------------------------------------------------------------- */
.enquire {
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255,29,37,.14), transparent 65%),
    var(--surface);
  text-align: center;
}
.enquire .btn { min-inline-size: 220px; }
.enquire__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-block-start: var(--sp-6); }

/* --------------------------------------------------------------------------
   10. MODEL SWITCHER
   -------------------------------------------------------------------------- */
.otherlinks { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.otherlink {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
html[lang="ar"] .otherlink { font-size: var(--fs-base); }
.otherlink:hover { color: var(--text); border-color: var(--text-2); }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: var(--sp-5);
}
.crumbs a { color: var(--text-2); display: inline-flex; align-items: center; min-block-size: 44px; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { opacity: .6; }
[dir="rtl"] .crumbs .sep { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   10b. EDITORIAL BANNER BANDS
   Full-bleed wide image with a headline over it. Text here sits on photography
   under a scrim, so it stays light in BOTH themes — same rule as the hero.
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  display: grid;
  align-items: end;
  min-block-size: clamp(360px, 46vh, 520px);
  overflow: hidden;
  color: #FFFFFF;
}

/* Band height is driven by ASPECT, not viewport height, so a studio photo is
   not cropped to a letterbox slot. Match the modifier to the source shape:
   --hero  ≈ 4:3 / 5:4 sources (studio three-quarter shots)
   --wide  ≈ 16:9 sources (side profiles)
   default = detail close-ups, which crop happily. */
.band--hero { aspect-ratio: 16 / 10; min-block-size: 400px; }
.band--wide { aspect-ratio: 16 / 9;  min-block-size: 340px; }

/* Positive stacking only — negative z-index puts media behind the element's
   own background and breaks the moment a background is added. */
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 52%;   /* studio cars sit slightly below centre */
}
.band__media--top img    { object-position: center 25%; }
.band__media--bottom img { object-position: center 75%; }

.band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(8,8,10,.90) 0%, rgba(8,8,10,.62) 38%, rgba(8,8,10,.22) 70%, rgba(8,8,10,.30) 100%);
}
/* Light-backdrop photos (studio shots on white) need the opposite treatment */
.band--onlight { color: #0F0F13; }
.band--onlight .band__scrim {
  background: linear-gradient(to top,
    rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 40%, rgba(255,255,255,.15) 75%, transparent 100%);
}

.band__body { position: relative; z-index: 2; padding-block: clamp(2rem, 5vw, 3.5rem); }
.band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  color: #FF5A60;
}
.band--onlight .band__eyebrow { color: #C20A11; }
html[lang="ar"] .band__eyebrow { letter-spacing: normal; text-transform: none; }

.band__title {
  font-size: clamp(1.9rem, 4.6vw, 3.25rem);
  line-height: 1.02;
  max-width: 20ch;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.band--onlight .band__title { text-shadow: none; }
html[lang="ar"] .band__title { line-height: 1.3; }

.band__text {
  margin-block-start: var(--sp-4);
  max-width: 48ch;
  font-size: var(--fs-lg);
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.band--onlight .band__text { color: #3A3A44; text-shadow: none; }

/* Figure band — typography only, for stories with no photography behind them */
.band--figures {
  min-block-size: 0;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(255,29,37,.16), transparent 62%),
    #0E0E12;
  color: #FFFFFF;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.band--figures .band__title { text-shadow: none; }
.band--figures .band__text  { color: #B9B9C4; text-shadow: none; }

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-5);
  margin-block-start: clamp(2rem, 4vw, 3rem);
}
.figure__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html[lang="ar"] .figure__num { font-family: var(--font-ar); line-height: 1.25; }
.figure__num small { font-size: .45em; font-weight: 600; color: #B9B9C4; margin-inline-start: .2em; }
.figure__label {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: #B9B9C4;
}

/* --------------------------------------------------------------------------
   10bb. INSIDE GRID (larger cabin views, for models without a trim switcher)
   -------------------------------------------------------------------------- */
.inside__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--sp-4);
}
.inside__item {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
}
.inside__item img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.inside__item:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   10c. ANGLE STEPPER (for models with only a handful of studio angles)
   -------------------------------------------------------------------------- */
.angles__dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-block-start: var(--sp-5);
}
.angles__dot {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.angles__dot[aria-pressed="true"] { background: var(--brand-cta); border-color: transparent; color: #fff; }
.angles__dot:not([aria-pressed="true"]):hover { color: var(--text); border-color: var(--text-2); }

/* --------------------------------------------------------------------------
   11. MOBILE REFINEMENTS
   Measured at 375px: the gallery was 6398px tall (44% of the whole page) as a
   single column, and the wheel tiles stacked to 1169px. Both are tightened
   here; nothing below changes the desktop layout.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* Gallery: two square thumbnails per row instead of one 4:3 block.
     24 items go from ~6400px of scroll to ~2100px. */
  .gal__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .gal__item {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
  }

  /* Wheels: side by side rather than two tall stacked tiles */
  .rims { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .rim { padding: var(--sp-4) var(--sp-3); }
  .rim__label { font-size: var(--fs-sm); }
  .rim__meta  { font-size: var(--fs-xs); }

  /* The 360 viewer is the centrepiece — let it run edge to edge so the car
     renders as large as possible without cropping the frames. */
  .model-hero .stage--tall {
    margin-inline: calc(var(--gutter) * -1);
    inline-size: calc(100% + var(--gutter) * 2);
    border-radius: 0;
    border-inline: 0;
  }
  .spin__nav { inset-inline: var(--sp-2); }
  .spin__nav button { inline-size: 44px; block-size: 44px; }

  /* Colour and interior stages also gain a little width */
  .swatches { gap: var(--sp-2); }
  .swatch { inline-size: 44px; block-size: 44px; }

  /* Trim vertical rhythm so the page is not endless */
  .section { padding-block: clamp(3rem, 8vw, 4rem); }
  .section-head { margin-bottom: 2rem; }
  .stats { margin-block-start: var(--sp-5); }
  .stat { padding: var(--sp-4) var(--sp-3); }

  .specgroup__panel { padding-inline: var(--sp-4); }
  .specrow { padding-block: var(--sp-3); }

  .enquire__actions .btn { inline-size: 100%; }

  /* On a phone the aspect modifiers would make bands very tall, so cap them
     and let the crop do the work instead. */
  .band { min-block-size: clamp(300px, 46vh, 380px); }
  .band--hero { aspect-ratio: auto; min-block-size: clamp(400px, 62vh, 520px); }
  .band--wide { aspect-ratio: auto; min-block-size: clamp(300px, 44vh, 380px); }
  .band__title { font-size: clamp(1.6rem, 7vw, 2.1rem); max-width: 16ch; }
  .band__text  { font-size: var(--fs-base); }
  .figures { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

/* Very narrow phones: the seating toggle labels are long in both languages */
@media (max-width: 380px) {
  .seg button { padding-inline: var(--sp-3); font-size: var(--fs-xs); }
  html[lang="ar"] .seg button { font-size: var(--fs-sm); }
}

/* With autospin removed, the hint is the only cue that the viewer is
   interactive — give it a gentle pulse until first touch. */
@keyframes spinHintPulse {
  0%, 100% { transform: translateY(0);    opacity: .92; }
  50%      { transform: translateY(-3px); opacity: 1; }
}
.spin:not(.is-touched) .spin__hint span { animation: spinHintPulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .gal__item:hover img { transform: none; }
  .swatch:hover { transform: none; }
  .spin:not(.is-touched) .spin__hint span { animation: none; }
}

/* --------------------------------------------------------------------------
   12. VIDEO BANNER
   The source clip is very large, so it is never preloaded. The poster carries
   the page until the visitor chooses to play.
   -------------------------------------------------------------------------- */
.band--video .band__media { background: #08080A; }
.band--video video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.vplay {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 64px;
  padding-inline: var(--sp-6) var(--sp-6);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--r-pill);
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.vplay:hover { background: rgba(217,7,15,.85); border-color: transparent; transform: translate(-50%,-50%) scale(1.04); }
.vplay .icon { inline-size: 22px; block-size: 22px; }
.band--video.is-playing .vplay { display: none; }

/* Once playing, drop the scrim so the footage is not muddied */
.band--video.is-playing .band__scrim {
  background: linear-gradient(to top, rgba(8,8,10,.85) 0%, rgba(8,8,10,.35) 30%, transparent 60%);
}

.vnote {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-4);
  z-index: 3;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.6);
}
.band--video.is-playing .vnote { display: none; }

/* --------------------------------------------------------------------------
   13. SPLIT FEATURE — image beside copy, for pictures too small to go full-bleed
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; } }
.split--flip .split__media { order: 2; }

.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
}
.split__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.split__copy p { color: var(--text-2); font-size: var(--fs-lg); margin-top: var(--sp-4); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   14. BANDS ON MOBILE
   A 1500x820 press shot forced into a 375x357 overlay slot loses ~60% of the
   picture and the car gets sliced. On phones the bands stop being overlays and
   become image-then-text, so the photograph is seen whole and the copy sits on
   a proper surface. The video hero keeps its overlay — that one is the hero.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .band:not(.band--video) {
    display: block;
    min-block-size: 0;
    aspect-ratio: auto;
    color: var(--text);
    background: var(--surface);
  }
  .band:not(.band--video) .band__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
  }
  .band:not(.band--video) .band__media img { object-position: center center; }
  .band:not(.band--video) .band__scrim { display: none; }

  .band:not(.band--video) .band__body {
    padding-block: clamp(1.75rem, 6vw, 2.5rem);
  }
  .band:not(.band--video) .band__title {
    color: var(--text);
    text-shadow: none;
    max-width: 20ch;
  }
  .band:not(.band--video) .band__text {
    color: var(--text-2);
    text-shadow: none;
  }
  .band:not(.band--video) .band__eyebrow { color: var(--brand-ink); }

  /* Figures read better as a 2x2 block under the photo */
  .band:not(.band--video) .figure__num   { color: var(--text); }
  .band:not(.band--video) .figure__label { color: var(--text-2); }

  /* The video hero: give it real height and keep the title legible */
  .band--video { min-block-size: clamp(440px, 68vh, 560px); }
}

/* Phones in landscape have very little height — do not let the hero swallow it */
@media (max-width: 900px) and (orientation: landscape) {
  .band--video { min-block-size: 92vh; }
}

/* --------------------------------------------------------------------------
   15. HEADER LEGIBILITY OVER A HERO BAND
   The header floats over the hero with white text. Some hero photos are studio
   shots that are almost white along the top, which dropped the navigation to
   3.4:1. This darkens ONLY the strip the header occupies, so the picture itself
   is untouched.
   -------------------------------------------------------------------------- */
.band--hero::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: calc(var(--header-h) + 72px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,6,8,.78) 0%, rgba(6,6,8,.45) 55%, rgba(6,6,8,0) 100%);
}

/* ==========================================================================
   16. ADAMAS DESIGN PASS  —  scoped to .model--v2
   Every rule below is scoped to `.model--v2`, which only cars/rox-adamas.html
   carries. The other six model pages are untouched. To roll this out, add the
   class to their <main> and give them their own range figures.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16a. HERO LOCKUP
   The hero was four stacked paragraphs of equal weight. This makes it one
   typographic object: a ruled brand label, the name at display size, and the
   tagline. The range sentence moved out — the range ladder below tells it
   better, and repeating it here made the hero do two jobs at once.
   -------------------------------------------------------------------------- */
/* Wide enough that the tagline sets on one line and the two buttons sit side
   by side; the name is what governs the visual width, not this cap. */
.model--v2 .hero-mark { max-inline-size: min(42ch, 100%); }

.model--v2 .hero-mark__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-block-end: var(--sp-4);
}
.model--v2 .hero-mark__brand::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(to right, rgba(255,255,255,.55), rgba(255,255,255,0));
}
html[dir="rtl"] .model--v2 .hero-mark__brand::after {
  background: linear-gradient(to left, rgba(255,255,255,.55), rgba(255,255,255,0));
}
html[lang="ar"] .model--v2 .hero-mark__brand { letter-spacing: normal; }

.model--v2 .hero-mark__name {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 8.5rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-shadow: 0 4px 40px rgba(0,0,0,.5);
  margin: 0;
}
/* Barlow Condensed has no Arabic glyphs, and Alexandria is a much wider face —
   Arabic needs a smaller size and real line-height or the name clips. */
html[lang="ar"] .model--v2 .hero-mark__name {
  font-family: var(--font-ar);
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: 1.25;
  letter-spacing: normal;
}

.model--v2 .hero-mark__tag {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid rgba(255,255,255,.22);
  font-size: clamp(1.05rem, 1.9vw, 1.375rem);
  font-weight: 500;
  color: rgba(255,255,255,.9);
  text-wrap: balance;
}

.model--v2 .hero-mark__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

/* --------------------------------------------------------------------------
   16b. THE RANGE LADDER  —  the page's signature element
   The Adamas is a range-extended EV, so its one genuinely unusual number is
   the gap between 235 km on battery and 1226 km with the extender running.
   Four identical stat boxes flattened that into trivia. This draws it to
   scale instead: the bar IS the ratio.
   The extender portion is hatched rather than just a different colour, so the
   split still reads without colour vision (WCAG 1.4.1).
   -------------------------------------------------------------------------- */
.model--v2 .range {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.model--v2 .range__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}
.model--v2 .range__title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
}
html[lang="ar"] .model--v2 .range__title { letter-spacing: normal; text-transform: none; }
.model--v2 .range__unit { font-size: var(--fs-sm); color: var(--text-3); }

/* The track ------------------------------------------------------------- */
.model--v2 .range__track {
  position: relative;
  display: flex;
  block-size: clamp(56px, 9vw, 76px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-3);
}

.model--v2 .range__seg {
  position: relative;
  /* Width is set inline from the real figures so the bar is always to scale. */
  transform-origin: left center;
}
html[dir="rtl"] .model--v2 .range__seg { transform-origin: right center; }

/* Battery: solid, bright — this is the part that runs on electricity alone. */
.model--v2 .range__seg--battery {
  background: linear-gradient(180deg, #FFFFFF 0%, #D6D9E4 100%);
}
/* Extender: hatched — reserve capacity, not battery. Deliberately quiet. This
   segment is 81% of the bar, so at full brand red it swamped the page and read
   as a hazard stripe. The texture carries the meaning; the colour only tints. */
.model--v2 .range__seg--extender {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,90,96,.42) 0 2px,
      rgba(255,255,255,.05) 2px 9px
    ),
    var(--surface-3);
}
[data-theme="light"] .model--v2 .range__seg--battery {
  background: linear-gradient(180deg, #2B2B33 0%, #4A4A57 100%);
}
[data-theme="light"] .model--v2 .range__seg--extender {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(194,10,17,.40) 0 2px,
      rgba(0,0,0,.04) 2px 9px
    ),
    var(--surface-3);
}

/* The split marker ------------------------------------------------------ */
.model--v2 .range__split {
  position: absolute;
  inset-block: 0;
  inline-size: 2px;
  background: var(--bg);
  z-index: 2;
}

/* Legend ----------------------------------------------------------------- */
.model--v2 .range__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-block-start: var(--sp-5);
}
.model--v2 .range__item { min-inline-size: 0; }

.model--v2 .range__key {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
html[lang="ar"] .model--v2 .range__key {
  font-size: var(--fs-sm); letter-spacing: normal; text-transform: none;
}
.model--v2 .range__chip {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 3px;
  flex: none;
}
.model--v2 .range__chip--battery { background: #FFFFFF; }
.model--v2 .range__chip--extender {
  background: repeating-linear-gradient(-45deg, rgba(255,90,96,.75) 0 2px, rgba(255,255,255,.06) 2px 5px), var(--surface-3);
}
[data-theme="light"] .model--v2 .range__chip--battery { background: #2B2B33; }
[data-theme="light"] .model--v2 .range__chip--extender {
  background: repeating-linear-gradient(-45deg, rgba(194,10,17,.7) 0 2px, rgba(0,0,0,.05) 2px 5px), var(--surface-3);
}

.model--v2 .range__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-block-start: var(--sp-2);
}
html[lang="ar"] .model--v2 .range__num { font-family: var(--font-ar); line-height: 1.3; }
.model--v2 .range__num small {
  font-size: .38em;
  font-weight: 600;
  color: var(--text-2);
  margin-inline-start: .2em;
}
.model--v2 .range__note {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   16c. SECONDARY FIGURES
   The remaining three numbers, deliberately quieter than the range ladder so
   the page has one focal point rather than four competing ones.
   -------------------------------------------------------------------------- */
.model--v2 .figs {
  display: grid;
  /* 140px keeps two figures side by side at 375px rather than dropping to a
     single tall column. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-5);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--border);
}
/* On a page with no range ladder this row carries the section alone, so it is
   set larger and gets a closing rule to give it a defined block. */
.model--v2 .figs--lead {
  margin-block-start: 0;
  padding-block: var(--sp-6);
  border-block-end: 1px solid var(--border);
}
.model--v2 .figs--lead .fig__num { font-size: clamp(2rem, 4vw, 2.75rem); }

.model--v2 .figs__lede {
  max-inline-size: 62ch;
  margin-block-end: var(--sp-5);
  font-size: var(--fs-lg);
  color: var(--text-2);
  text-wrap: pretty;
}
/* Leopard 7 publishes no figures, so the lede is the whole section. On its own
   it read as orphaned text — this gives it the same closing rule the figure
   row would have provided. */
.model--v2 .figs__lede:last-child {
  margin-block-end: 0;
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid var(--border);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--text);
}

.model--v2 .fig__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html[lang="ar"] .model--v2 .fig__num { font-family: var(--font-ar); line-height: 1.3; }
.model--v2 .fig__num small {
  font-size: .5em; font-weight: 600; color: var(--text-2); margin-inline-start: .15em;
}
.model--v2 .fig__label {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
html[lang="ar"] .model--v2 .fig__label {
  font-size: var(--fs-sm); letter-spacing: normal; text-transform: none;
}

/* --------------------------------------------------------------------------
   16d. MOTION
   Two additions only: children of a `.reveal--seq` group come in one after
   another instead of together, and the range bar draws itself to scale.
   Both are cause-and-effect — the bar drawing IS the measurement being taken.
   Everything stands down under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
html.js .model--v2 .reveal--seq > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms var(--ease-out) var(--seq-delay, 0ms),
    transform 520ms var(--ease-out) var(--seq-delay, 0ms);
}
html.js .model--v2 .reveal--seq.is-in > * { opacity: 1; transform: none; }

/* The bar starts collapsed and grows to its real width. scaleX keeps this on
   the compositor — animating `width` would relayout every frame. */
html.js .model--v2 .range__seg { transform: scaleX(0); }
html.js .model--v2 .range__track { transition: none; }
html.js .model--v2 .range.is-in .range__seg {
  transform: scaleX(1);
  transition: transform 900ms var(--ease-out);
}
html.js .model--v2 .range.is-in .range__seg--extender { transition-delay: 260ms; }

html.js .model--v2 .range__split { opacity: 0; }
html.js .model--v2 .range.is-in .range__split {
  opacity: 1;
  transition: opacity 300ms linear 900ms;
}

/* Press feedback. Pointer devices already get hover; touch had no press state
   at all, which is what made the configurator feel unresponsive on a phone. */
.model--v2 .swatch,
.model--v2 .seg__btn,
.model--v2 .gal__item { transition: transform 120ms var(--ease-out); }
.model--v2 .swatch:active,
.model--v2 .seg__btn:active,
.model--v2 .gal__item:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  html.js .model--v2 .reveal--seq > *,
  html.js .model--v2 .range__seg,
  html.js .model--v2 .range__split {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .model--v2 .swatch:active,
  .model--v2 .seg__btn:active,
  .model--v2 .gal__item:active { transform: none; }
}

/* --------------------------------------------------------------------------
   16e. SMALL SCREENS
   -------------------------------------------------------------------------- */
/* Once the film is playing the shared scrim drops to transparent above 60%,
   which is fine on a tall desktop hero. On a phone the hero is short, so the
   headline sits in that clear zone — and the film's own ROX logo landed right
   behind "ADAMAS". Narrow screens keep a scrim across the full height. */
@media (max-width: 700px) {
  .model--v2 .band--video .band__scrim,
  .model--v2 .band--video.is-playing .band__scrim {
    background: linear-gradient(to top,
      rgba(8,8,10,.94) 0%, rgba(8,8,10,.82) 40%, rgba(8,8,10,.58) 72%, rgba(8,8,10,.46) 100%);
  }
}

/* --------------------------------------------------------------------------
   16f. BREADCRUMBS IN A HERO
   These used to carry an inline `color:rgba(255,255,255,.72)`, which won over
   the stylesheet everywhere — including the stacked mobile layout, where the
   band sits on a light surface and the crumbs measured 1.08:1. The inline
   styles are gone; light text is now applied only where the crumbs are
   genuinely over photography, and the theme tokens take over otherwise.
   -------------------------------------------------------------------------- */
.model--v2 .band--video .crumbs { color: rgba(255,255,255,.72); }
.model--v2 .band--video .crumbs a { color: rgba(255,255,255,.9); }
.model--v2 .band--video .crumbs a:hover { color: #FFFFFF; }

/* A photo hero is an overlay above 700px and a stacked block below it. */
@media (min-width: 701px) {
  .model--v2 .band--hero .crumbs { color: rgba(255,255,255,.72); }
  .model--v2 .band--hero .crumbs a { color: rgba(255,255,255,.9); }
  .model--v2 .band--hero .crumbs a:hover { color: #FFFFFF; }
}

/* Photo heroes stack on mobile (section 14): the picture becomes a block and
   the text sits below it on a theme surface, with the scrim switched off. The
   lockup's light-on-photo colours have to become theme colours there, or the
   brand label and tagline drop to 1.09:1 on a light background. */
@media (max-width: 700px) {
  .model--v2 .band:not(.band--video) .hero-mark__brand { color: var(--text); }
  .model--v2 .band:not(.band--video) .hero-mark__brand::after {
    background: linear-gradient(to right, var(--border-strong), transparent);
  }
  html[dir="rtl"] .model--v2 .band:not(.band--video) .hero-mark__brand::after {
    background: linear-gradient(to left, var(--border-strong), transparent);
  }
  .model--v2 .band:not(.band--video) .hero-mark__name { text-shadow: none; }
  .model--v2 .band:not(.band--video) .hero-mark__tag {
    color: var(--text-2);
    border-block-start-color: var(--border);
  }
}

@media (max-width: 560px) {
  .model--v2 .range { padding: var(--sp-5) var(--sp-4); }
  .model--v2 .range__legend { grid-template-columns: 1fr; gap: var(--sp-4); }
  .model--v2 .range__track { block-size: 48px; }
  .model--v2 .hero-mark__tag { font-size: 1.05rem; }
}