/*
|--------------------------------------------------------------------------
| Models lineup — flowing page background (reusable, greyscale)
|--------------------------------------------------------------------------
| Used by the Models menu pages: /models plus the Classic, Kronos, Metis and
| Ultra lineup pages. Apply the class to the content <main> only — the page
| header is intentionally left untouched:
|
|     <main class="main models-flow-bg"> … </main>
|
| Replaces the alternating .dark-bg / .light-bg section bands with one
| continuous neutral (black → grey → near‑black) gradient:
|   • a soft light spill at the very top echoes the header image above and
|     blends the header edge smoothly into the content,
|   • it eases through charcoal greys down to near‑black at the bottom so it
|     melts into the (dark, transparent) footer.
| Kept dark throughout so the translucent .option cards stay legible.
*/

/*
|--------------------------------------------------------------------------
| Models header — bottom strips
|--------------------------------------------------------------------------
| Two stacked rows pinned to the header bottom, mirroring the service hero:
|   • .models-header__lineup — the four model wordmarks, styled like the
|     service brand strip (.service-hero__brands): soft bottom gradient + blur.
|   • .models-header__stats — lineup stats, styled like the service proof
|     strip (.service-hero__why): frosted-glass panel with layered translucent
|     background, inset top highlight + drop shadow, strong blur and a top
|     accent hairline, with evenly-divided stat cells.
*/
.models-header-img {
  position: relative;
  /* The four-van lineup photo — wide banner on desktop, portrait crop on mobile
     (classic_models.png) — so all four vans stay in frame at every aspect.
     Dark base fills any letterboxing. (Model pages set their own bg inline, so
     this only applies to models.php.) */
  background-image:
    repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
    url(/assets/images/models/desktop-all-models-0.png);
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .models-header-img {
    background-image:
      repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
      url(/assets/images/models/mobile-all-models-0.png);
    background-position:
      center,
      center 32%;
  }
}

/* Vertical fade-to-dark at the foot of the hero. Reuses the header's existing
   full-bleed overlay (.header::after, z-index 1 — above the photo, below the
   title and the Van Models lineup) and just gives it a gradient: clear through
   the upper hero, then darkening from well above the Van Models strip down to the
   content's top colour at the header's bottom edge, so the photo melts seamlessly
   into the content below. Anchored in rem from the bottom so it tracks the
   (fixed-offset) lineup regardless of viewport height.
   The end colour (#101013) matches the first stop of .models-flow-bg's gradient —
   keep the two in sync. The top stop is that same colour at alpha 0 (not the
   `transparent` keyword, which is transparent black) so the ramp is a clean
   alpha fade with no grey shift. */
.models-header-img::after {
  /* How far up from the bottom the fade reaches (lowered on mobile below); also
     scales the light-spill height so the two track together. */
  --hero-fade-start: 26rem;
  background:
    /* Re-create .models-flow-bg's top light-spill (its radial layer), mirrored to
       the header's BOTTOM, so the header bottom and the content top carry the
       exact same tint at the seam. That spill (~+5% white at centre) is what made
       a flat #101013 end look too dark against the content. */
    radial-gradient(
      125% var(--hero-fade-start) at 50% 100%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 72%
    ),
    /* Base ramp up to the content's top colour. */
    linear-gradient(
        to top,
        #101013 0%,
        #101013 2rem,
        rgba(16, 16, 19, 0) var(--hero-fade-start)
      );
}

/* The hero is much shorter on phones, so the same reach darkens too big a share
   of the photo — start the fade lower (closer to the bottom) on mobile. */
@media (max-width: 768px) {
  .models-header-img::after {
    --hero-fade-start: 18rem;
  }
}

/* Hero panel parity — the title box is positioned to match the home hero's
   .header-box exactly: vertically centered and left-inset. The base .header
   already supplies the grid layout, the 6vw left inset and the full (100vh)
   height, so no layout overrides are needed here (the .models-header-img rule
   above only owns the background). The panel itself is centered via align-self
   below; the hero's fixed vh height keeps it tall enough for the docked card
   strip (.models-intro__grid--docked) to overlap its lower edge. */
.models-header-img .header-title {
  /* Identical to the home hero's .header-box: vertically centered, left-inset
     (via the header's 6vw padding), same panel padding / max-width / margin /
     background / radius. */
  position: relative;
  z-index: 2;
  grid-column: 1 / 3;
  align-self: center;
  justify-self: stretch;
  display: block;
  text-align: left;
  max-width: 45rem;
  margin: 0;
  padding: 3rem 4rem;
  background: var(--c5);
  border-radius: var(--border-r);
}

.models-header-img .header-title h1 {
  position: relative;
  margin: 0;
  padding-bottom: clamp(0.9rem, 1.35vw, 1.15rem);
  /* Match the home hero title (.header-box h1): 5rem / weight 300 / white,
     stepping to 4rem ≤1200px and 2.5rem ≤600px (steps below). */
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.052em;
  text-transform: uppercase;
  color: var(--theme-text-strong);
  text-shadow: var(--theme-shadow-title);
}

/* Home hero title size steps (mirror .header-box h1's 1200px / 600px breakpoints). */
@media (max-width: 1200px) {
  .models-header-img .header-title h1 {
    font-size: 4rem;
  }
}

@media (max-width: 600px) {
  .models-header-img .header-title h1 {
    font-size: 2.5rem;
  }
}

/* Red line anchored to the bottom-left of the title (service hero recipe). */
.models-header-img .header-title h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(6rem, 10vw, 9rem);
  height: 0.24rem;
  border-radius: var(--theme-radius-pill);
  background: linear-gradient(
    90deg,
    var(--theme-accent) 0%,
    var(--theme-accent-deep) 58%,
    transparent 100%
  );
  box-shadow: 0 10px 24px var(--theme-accent-box-24);
}

.models-hero__lead {
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  max-width: 46rem;
  /* Type styling matches the home hero's .header-box p: 1.5rem / 2.6rem line /
     0.06rem tracking / weight 300 / white (--c4). The text-shadow is kept so it
     stays legible over the translucent black panel (which lets the sky show
     through at ~50%). */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.6rem;
  letter-spacing: 0.06rem;
  color: var(--c4);
  /* text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 2px 14px rgba(0, 0, 0, 0.5); */
}

/* Home's .header-box p steps down to 1.3rem at this width — mirror it. */
@media (max-width: 1200px) {
  .models-hero__lead {
    font-size: 1.3rem;
  }
}

/* ── Model lineup headers (Classic / Kronos / Metis / Ultra) ──────────────
   These pages place the logo + sliding tagline images in .models-header-title
   inside a full-height .header. m072224.css centers .header-title; the base
   .header grid (6vw inset, full height, vertical centering) is left intact so
   the title panel lands in the exact same spot as the home hero's .header-box —
   vertically centered and left-inset. The stats strip stays docked at the
   bottom (.models-header__footer is absolutely positioned, independent of the
   header's centering). */
.header .header-title.models-header-title {
  /* Box position/metrics identical to the home hero's .header-box; stays a grid
     internally to stack the logo above the sliding tagline list. */
  position: relative;
  z-index: 2;
  grid-column: 1 / 3;
  align-self: center;
  /* Size the panel to its content (logo + tagline) rather than a fixed 45rem box,
     kept start-aligned within the hero's left inset. */
  justify-self: start;
  text-align: left;
  max-width: max-content;
  margin: 0;
  padding: 3rem 4rem;
  background: var(--c5);
  border-radius: var(--border-r);
  justify-items: start;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.header .models-header-title__logo,
.header .models-header-title__tagline {
  justify-self: start;
}

/* Tablet / mobile: at ≤1200px the base .header drops to a 2-row grid with zero
   padding (see m072224.css), exactly as the home hero does — so mirror the home
   .header-box's response here: span both rows, stay vertically centered, and
   sit in a 90%-wide panel with a 5% gutter in place of the 6vw inset. Applies to
   both the models.php hero and the lineup-page headers so they track home. */
@media only screen and (max-width: 1200px) {
  .models-header-img .header-title,
  .header .header-title.models-header-title {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 90%;
    margin: 5%;
  }

  /* The lineup title is content-width on desktop (max-content, above); on mobile
     it should fill the width instead — so undo that cap and the 5% gutter. */
  .header .header-title.models-header-title {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

.models-header-title__logo {
  /* Sized by height so the four model logos (very different aspect ratios) read
     at a consistent size; width follows the artwork. */
  height: clamp(2.1rem, 4.2vw, 3.6rem);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* The Metis logo is far more compact (~3.15:1) than the wide wordmarks, so it
   needs extra height to read at a comparable size. */
.models-header-title__logo--metis {
  height: clamp(3.5rem, 7vw, 6rem);
}

.models-header-title__tagline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: start;
  gap: clamp(0.85rem, 1.8vw, 1.5rem);
}

.models-header-title__tagline img {
  display: block;
  width: clamp(11rem, 26vw, 17rem);
  height: auto;
}

.models-header-title__tagline li {
  opacity: 0;
  transform: translateX(-2.5rem);
  animation: modelsHeaderSlideIn 0.55s forwards;
}

.models-header-title__tagline li:nth-child(1) {
  animation-delay: 0.2s;
}

.models-header-title__tagline li:nth-child(2) {
  animation-delay: 0.55s;
}

.models-header-title__tagline li:nth-child(3) {
  animation-delay: 0.9s;
}

@keyframes modelsHeaderSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .models-header-title__tagline li {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.models-header__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Row 1 — model wordmarks, styled as the frosted panel (.models-header__stats look) */
.models-header__lineup {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.55rem, 2.75vw, 2.5rem) clamp(0.9rem, 2vw, 1.5rem);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 6, 8, 0.72) 0%,
      rgba(255, 255, 255, 0.092) 60%,
      rgba(255, 255, 255, 0.096),
      100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 -12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(24px) saturate(160%) brightness(0.88);
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(0.88);
}

.models-header__lineup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.05) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.models-header__model {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.models-header__logo {
  display: block;
  width: clamp(5rem, 20vw, 16rem);
  height: auto;
  object-fit: contain;
  opacity: 0.78;
  transform: translateZ(0);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.models-header__model:hover .models-header__logo {
  opacity: 1;
  transform: translateY(-3px);
}

/* Row 2 — lineup stats. Surface matches the navbar (.navbar): the same glass
   background, blur and shadow tokens (--nav-surface-*) so the docked strip
   reads as the same material as the nav. */
.models-header__stats {
  position: relative;
  z-index: 2;
  padding: clamp(1.55rem, 2.75vw, 2.5rem) clamp(0.9rem, 2vw, 1.5rem);
  background: var(--nav-surface-bg);
  box-shadow: var(--nav-surface-shadow);
  backdrop-filter: var(--nav-surface-blur);
  -webkit-backdrop-filter: var(--nav-surface-blur);
}

.models-header__stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.05) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.models-header__stat-row {
  display: flex;
  align-items: stretch;
  width: min(100%, 90rem);
  margin: 0 auto;
}

.models-header__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
  padding: 0.55rem clamp(0.65rem, 1.25vw, 1.05rem);
  /* Match the service hero's .service-hero__why-stat: a pill that lights up on
     hover with the flanking dividers fading. */
  border: 1px solid transparent;
  border-radius: 100vmax;
  transition:
    border-color 0.22s ease,
    background-color 0.22s ease;
}

.models-header__stat + .models-header__stat::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 55%;
  background: var(--theme-surface-white-08);
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.models-header__stat:hover {
  border-color: rgba(255, 255, 255, 0.07);
  background-color: rgba(255, 255, 255, 0.03);
}

.models-header__stat:hover::before,
.models-header__stat:hover + .models-header__stat::before {
  opacity: 0;
}

.models-header__stat strong {
  display: block;
  font-size: clamp(1.3rem, 1.75vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--theme-text-strong);
  text-align: center;
}

.models-header__stat span {
  display: block;
  font-size: clamp(0.75rem, 0.875vw, 0.85rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--theme-text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
}

/* Drivetrain value separator — a thin, muted divider between configurations
   (e.g. AWD | 4x4) so it reads lighter than the bold value either side of it. */
.models-header__sep {
  font-style: normal;
  font-weight: 300;
  color: var(--theme-text-muted);
  margin: 0 0.32em;
}

/* Capacity cells (seats / sleeps) reuse the standard stat strong+span styling —
   the icon stands in for the value, sized down a touch so it optically matches
   the numeric stats beside it, and tinted the same white as the other values. */
.models-header__stat strong .fa-solid {
  font-size: 0.82em;
  color: var(--theme-text-strong);
}

/* Seats / sleeps figure — emphasised within the label so the count stands out. */
.models-header__stat span b {
  font-size: 1.45em;
  font-weight: 800;
  color: var(--theme-text-strong);
}

/* Chassis cell: rather than a single (misleading) count, list each chassis
   platform as its own value/label pair — the wheelbase options sit on top as
   the emphasised value, with the platform name (Sprinter / Transit) as the
   muted label below. Models on both chassis show both pairs stacked. */
/* Chassis cells: each chassis platform gets its own stat cell — the wheelbase
   options as the value (capped a touch smaller than the single-number stats so
   the longer "148" / 148" EL" string fits its column), the brand as the label.
   The name inherits the standard label style from .models-header__stat span. */
.models-header__stat--chassis .models-header__chassis-size {
  font-size: clamp(0.88rem, 1.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--theme-text-strong);
}

@media (max-width: 700px) {
  .models-header__stat--chassis .models-header__chassis-size {
    white-space: normal;
  }
}

/* Stack into a 3-column grid on narrow screens so the six stats stay legible. */
@media (max-width: 700px) {
  .models-header__stat-row {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.6rem;
  }
  .models-header__stat {
    flex: 0 0 33.333%;
  }
  /* Drop the divider that would land at the start of the second row. */
  .models-header__stat:nth-child(3n + 1)::before {
    display: none;
  }
  /* Keep "AWD | 4x4" on one line in the narrow 3-up cell, with the separator
     spacing tightened a touch so the value fits. */
  .models-header__stat strong {
    white-space: nowrap;
  }
  .models-header__sep {
    margin: 0 0.22em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .models-header__logo {
    transition: none;
  }
  .models-header__model:hover .models-header__logo {
    transform: none;
  }
}

/* Smooth-scroll the lineup logos to their model section (paired with the
   scroll-margin-top offset below that controls where each section lands). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Deep-link offset (/models#kronos …): the family anchors now sit on the first
   card of each family inside the single lineup grid, so just clear the fixed nav
   (+ a small gap) when one is jumped to. */
.models-flow-bg .s-options--lineup .option[id] {
  scroll-margin-top: calc(var(--nav-h, 3.3rem) + 1rem);
}

.models-flow-bg {
  background-color: #020203;
  background-image:
    /* light spilling down from the header image — soft, neutral, no hard seam */
    radial-gradient(
      125% 32% at 50% 0%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 72%
    ),
    /* greyscale vertical flow: dark charcoal under the header → black at the footer */
    linear-gradient(180deg, #101013 0%, #0a0a0c 34%, #060607 68%, #020203 100%);
  background-repeat: no-repeat;
}

/* The flowing background now owns the page color — strip the per-section
   dark-bg / light-bg bands so the gradient reads as one continuous surface.
   Also sets a tighter, consistent section rhythm: one clamp (replacing the old
   stepped 5rem / 4rem padding) so the gap between sections scales smoothly and
   reads less spacious. --s-pad-y is reused by the scroll offset above. */
.models-flow-bg .s-options {
  /* The vertical gap between two sections is two of these (one section's bottom
     padding + the next's top) — so set it to HALF the horizontal card gap
     (.option-wrapper gap, clamp(1rem,1.6vw,1.6rem)). The space between stacked
     sections then equals the space between cards in a row. The first section's
     top and the last's bottom are reopened to a roomier value just below. */
  --s-pad-y: clamp(0.5rem, 0.8vw, 0.8rem);
  padding: var(--s-pad-y) clamp(1rem, 2vw, 2rem);
  background: none;
  background-color: transparent;
}

/* Keep breathing room where the card grid meets the docked lineup above and the
   footer below; only the boundaries between sections tighten to the card gap. */
.models-flow-bg .s-options:first-of-type {
  padding-top: clamp(2.25rem, 3.5vw, 3.25rem);
}
.models-flow-bg .s-options:last-of-type {
  padding-bottom: clamp(2.25rem, 3.5vw, 3.25rem);
}

/* Section logo (.h2-title) → cards gap: tie it to the section rhythm (--s-pad-y,
   inherited from .s-options) so it's identical across every section and
   breakpoint. The section's own top padding owns the space ABOVE the logo, so the
   logo's own top margin is dropped (it added an inconsistent 4rem only on mobile). */
.models-flow-bg .h2-title {
  margin: 0 auto var(--s-pad-y, 3rem) auto;
}

/*
|--------------------------------------------------------------------------
| Option cards — glassy surface + hover lift (Models pages only)
|--------------------------------------------------------------------------
*/

/* Center the model cards and wrap every row symmetrically. The base grid
   (repeat(auto-fit, minmax(200px, 20rem))) sized cards to FILL in busy sections
   (Classic's 4) but CAPPED them at 20rem in light ones (Kronos's 2) — so card
   widths differed between sections — and orphaned any wrapped card to the LEFT.
   Flexbox keeps every card a uniform width and centers each row, including a row
   that wraps. (Also the positioning context for the ::before light pool below.) */
.s-options .option-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1rem, 1.6vw, 1.6rem);
  max-width: 86rem; /* fits a 4-card row (4 × 20rem + gaps); centers on wider screens */
  margin-inline: auto;
}

/* Uniform card width in every section (no grow/shrink, so a 2-card row and a
   4-card row use identically sized cards). min(20rem, 100%) collapses each card
   to a single full-width column once the row is narrower than one card. */
.s-options .option-wrapper .option {
  flex: 0 0 min(20rem, 100%);
}

/* Tablet: a tidy two-up (an odd card on the last row still centres). The
   0.8rem subtracted covers the row gap so two cards + the gap make 100%. */
@media (max-width: 768px) {
  .s-options .option-wrapper .option {
    flex-basis: calc(50% - 0.8rem);
  }
}

/* Phone: single full-width column. */
@media (max-width: 600px) {
  .s-options .option-wrapper .option {
    flex-basis: 100%;
  }
}

/* models.php lineup only (.s-options--lineup; the per-family selector pages and
   the detail cross-sell use a plain .s-options). All 11 cards live in one wrapper
   and flow as a single continuous grid, so a family with fewer cards (Kronos's 2)
   packs straight onto the row after the previous family instead of starting fresh
   and leaving a gap. auto-fill keeps a consistent column track + gap. */
.models-flow-bg .s-options--lineup .option-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  justify-content: start;
}

/* "Model Lineup" heading above the lineup card grid (a copy of the intro's "Van
   Models" heading, divider rods and all) — cap it to the card grid's width and
   centre it so its rods line up with the cards below. Scoped to the card view so
   the compare view's "Compare Models" heading spans its own (wider) table. */
.models-flow-bg .s-options--lineup [data-lineup-cards] .models-intro__heading {
  max-width: 86rem;
  margin-inline: auto;
}

/* Same-size cards. The van renders are all near-square but their ratios vary
   (≈1.09–1.17), so at a fixed width their heights — and everything below them —
   differed. Give every render an identical image box (9:8, `contain` so the whole
   van shows and is never cropped or distorted), lay the card out as a flex column
   that stretches to its row's tallest card, and pin the CTA to the bottom. With
   the rest of a card already identical (title, price, six specs, CTA), this makes
   every card the same height with its rows aligned. */
.s-options .option {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.s-options .option img:not(.corner-logo):not(.option-title-logo):not(.option-title-num) {
  aspect-ratio: 9 / 8;
  height: auto;
  object-fit: contain;
}

.s-options .option button {
  margin-top: auto;
}

.s-options .option-wrapper::before {
  content: "";
  position: absolute;
  inset: -2.5rem -1.5rem;
  background: radial-gradient(
    62% 55% at 50% 42%,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0) 72%
  );
  pointer-events: none;
  z-index: 0;
}

/* Glassy card surface: subtle diagonal sheen, hairline border, soft elevation. */
.s-options .option {
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.028) 46%,
    rgba(255, 255, 255, 0.015) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 40px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

/* Only the main van render zooms — leave the corner brand badge in place.
   The render may be wrapped in an `a.option-media` link (option-card-link.js),
   so target it by descendant rather than direct child. */
.s-options .option img:not(.corner-logo):not(.option-title-logo):not(.option-title-num) {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-options .option:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.045) 46%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 30px 60px rgba(0, 0, 0, 0.6);
}

.s-options .option:hover img:not(.corner-logo):not(.option-title-logo):not(.option-title-num) {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .s-options .option,
  .s-options .option img:not(.corner-logo):not(.option-title-logo):not(.option-title-num) {
    transition: none;
  }
  .s-options .option:hover {
    transform: none;
  }
  .s-options .option:hover img:not(.corner-logo):not(.option-title-logo):not(.option-title-num) {
    transform: none;
  }
}

/* Option-title model logos: the wordmark image stands in for the model NAME (the
   variant number stays as text, e.g. [Classic logo] 144). Sized per-mark — in em,
   relative to the 1.5rem title — to read at the text's size, and kept within the
   title line so the cards don't grow taller. (Excluded from the van-render img
   rules above via :not(.option-title-logo); the gap before the number is the
   inline space in the markup.) These heights are the spot to fine-tune per mark. */
.option-title .option-title-logo {
  display: inline-block;
  width: auto; /* override base .option img { width: 100% } so the mark keeps its aspect */
  max-width: 100%;
  margin: 0;
  padding: 0;
  position: relative; /* lets `top` fine-tune each mark's vertical position */
  vertical-align: middle;
}
/* Sized so each mark's glyph frames the number like Ultra (the reference), with a
   per-mark `top` nudge to settle the baseline. Tuned against screenshots. */
.option-title-logo--classic {
  height: 0.75em;
  /* bottom: 1px; */
}
.option-title-logo--kronos {
  height: 0.8em;
  /* bottom: 0px; */
}
.option-title-logo--ultra {
  height: 1.05em;
  top: 3px;
}
.option-title-logo--metis {
  height: 1.05em;
  bottom: 3px;
}

/* Keep the wordmark + number icon on a single line. */
.s-options .option-title {
  white-space: nowrap;
}

/* Variant-number icon (144 / 148 / 148 EL / 170) beside the wordmark — replaces
   the old text number. The PNGs are cropped tight to the digits, so the rendered
   height IS the digit height: match it to the wordmark glyph height for a
   consistent pairing. Centred on the line beside the mark (tune `height` for
   size, `top`/`bottom` to fine-tune vertical alignment). */
.option-title .option-title-num {
  display: inline-block;
  width: auto; /* override base .option img { width: 100% } */
  height: 0.8em;
  margin-left: 0.22em;
  padding: 0 0.5rem; /* override base .option img { padding: 0 1rem } — tighter for the number */
  vertical-align: middle;
  position: relative;
}

/* The variant number beside the wordmark (e.g. 144 / 170) — give it a heavier
   weight than the base .option-title (400) so it reads with the bold marks.
   The number sits inside an <a>, which the universal `* { font-weight: 300 }`
   targets directly — a direct match beats inheritance, so the title's weight
   never reaches it. Set it on the anchor itself to win. */
.s-options .option-title,
.s-options .option-title a {
  font-weight: 450;
}

/* ── Option-card body type (Models pages) ─────────────────────────────────
   Re-balanced under the branded logo title: the price, the "not included"
   caption and the spec list all inherited an undefined size before, reading flat.
   Give them a clear hierarchy — a prominent white price, a small muted caption,
   and a soft, evenly-spaced spec list (white → soft → muted on the dark glass). */
.s-options .option .option-p-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--theme-text-strong);
  margin-bottom: 0.2rem;
}

.s-options .option .vni {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-transform: none;
  color: var(--theme-text-muted);
  margin: 0 0 1.15rem;
}

.s-options .option .model-atts {
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.s-options .option .model-atts li {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--theme-text-soft);
}

/* The chassis/platform spec (Mercedes Sprinter / Ford Transit) — set apart from
   the feature specs as a small, muted, uppercase platform label. Targeted by an
   explicit class rather than :first-child so the chassis pages (whose specs have
   no platform line, since the page already is one chassis) don't mislabel their
   first feature. The class is added to the chassis <li> on the model/parent/
   cross-sell cards where that line exists. */
.s-options .option .model-atts li.model-att-chassis {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-muted);
}

/*
|--------------------------------------------------------------------------
| Models intro — lineup overview (tagline + four-model summary)
|--------------------------------------------------------------------------
| Sits directly below the header, on the flowing background's top light
| spill. A large "Freedom by Design" tagline + lead paragraph frame the
| lineup's design-and-craftsmanship story, followed by a concise four-up
| summary of the Classic, Kronos, Metis and Ultra platforms.
*/
.models-intro {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6rem) 1.5rem clamp(0.5rem, 2vw, 1.5rem);
}

.models-intro__eyebrow {
  /* Sits as the label directly above the lineup grid: a generous gap below
     the lead paragraph, a small gap down to the cards. */
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 1.25rem;
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* Neutral grey to match the navbar's light text — not the red eyebrow tint. */
  color: var(--theme-text-muted);
}

.models-intro__title {
  margin: 0 auto;

  /* max-width: 16ch; */
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--theme-text-strong);
  text-shadow: var(--theme-shadow-title);
}

.models-intro__title::after {
  content: "";
  display: block;
  /* Matches the service hero's title rule (.service-hero__title::after in
     header-hero.css): a left-anchored accent → deep gradient bar that trails
     off to transparent, with a soft red glow. */
  width: clamp(6rem, 10vw, 9rem);
  height: 0.24rem;
  margin: 1rem 0 0 0;
  border-radius: var(--theme-radius-pill);
  background: linear-gradient(
    90deg,
    var(--theme-accent) 0%,
    var(--theme-accent-deep) 58%,
    transparent 100%
  );
  box-shadow: 0 10px 24px var(--theme-accent-box-24);
}

.models-intro__lead {
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  /* max-width: 46rem; */
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--theme-text-muted);
}

.models-intro__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  /* Top spacing now comes from the eyebrow label above. */
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Docked variant: the grid is pulled up so its card tops overlap into the
   hero's lower strip (over the photo); the bodies reveal on scroll. It stays a
   single row of four at every width — the cards shrink to fit, then collapse to
   a logo-only strip on small screens (see the max-width: 768px block) — so the
   lineup always reads inside the hero instead of dropping behind it. */
/* The "Van Models" heading + the docked grid pull up into the hero together so
   the heading stays centered above the logos. Dock depth tracks the (shrinking)
   card top — plus the heading's height — so only the heading + logos overlap
   into the hero, never the descriptions. */
.models-intro__lineup {
  max-width: 88rem;
  margin: clamp(-9.5rem, -9.8vw, -6rem) auto 0;
  /* padding: 0 clamp(0.6rem, 2vw, 1.5rem); */
  position: relative;
  z-index: 10000;
}

.models-intro__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  margin: 0 0 clamp(0.85rem, 1.7vw, 1.35rem);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2em;
  color: var(--theme-text-strong);
}

/* Flanking rules as glass rods: a vertical gloss (bright top → dim core → faint
   base) masked to fade out to transparent at the outer ends, and clip-tapered so
   they also narrow from the inner (text) end out. Each pseudo flexes to fill its
   half so the label stays centered. */
.models-intro__heading::before,
.models-intro__heading::after {
  content: "";
  flex: 1 1 auto;
  height: 4px;
  /* Wedge: full height at the inner (text) end, narrowing to ~2px at the outer
     end. This is the left rule; the right rule mirrors it below. */
  -webkit-clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 75%);
  clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 75%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.15) 45%,
    rgba(255, 255, 255, 0.3) 100%
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
  mask-image: linear-gradient(to right, transparent, #000);
}

.models-intro__heading::after {
  -webkit-clip-path: polygon(0% 0%, 100% 25%, 100% 75%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 25%, 100% 75%, 0% 100%);
  -webkit-mask-image: linear-gradient(to left, transparent, #000);
  mask-image: linear-gradient(to left, transparent, #000);
}

.models-intro__grid--docked {
  /* One value drives both, so the left/right edge insets always match the gap
     between cards. */
  --docked-gap: clamp(0.25rem, 0.55vw, 0.7rem);
  grid-template-columns: repeat(4, 1fr);
  gap: var(--docked-gap);
  padding-inline: var(--docked-gap);
  margin: 0;
}

/* Same glass card surface + hover lift as the .option cards below
   (.s-options .option). */
.models-intro__model {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(0.95rem, 2.6vw, 2.6rem) clamp(0.8rem, 1.9vw, 2rem);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.028) 46%,
    rgba(255, 255, 255, 0.015) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 40px rgba(0, 0, 0, 0.45);
  /* No backdrop-filter in the top state, so the hover lift (transform) stays
     smooth — backdrop-filter + transform on the same element twitched the
     logos (worst on the wide Classic mark). The frosted blur is only applied
     once scrolled, where the cards no longer lift (see the scrolled :hover). */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.55s ease,
    box-shadow 0.55s ease,
    background 0.55s ease,
    -webkit-backdrop-filter 0.55s ease,
    backdrop-filter 0.55s ease;
}

.models-intro__model:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.045) 46%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 30px 60px rgba(0, 0, 0, 0.6);
}

/* Scroll-in state: once the lineup leaves the hero, the cards settle into a
   darker, heavily-blurred frosted glass over the page background. Toggled by
   the scroll observer in models.php. */
.models-intro__grid--scrolled .models-intro__model {
  background: linear-gradient(
    160deg,
    rgba(24, 24, 27, 0.55) 0%,
    rgba(12, 12, 14, 0.5) 100%
  );
  border-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  backdrop-filter: blur(28px) saturate(125%);
}

.models-intro__grid--scrolled .models-intro__model:hover {
  /* Frosted cards brighten + deepen their shadow on hover but do NOT lift —
     transforming a backdrop-filter element is what caused the hover glitch. */
  transform: none;
  background: linear-gradient(
    160deg,
    rgba(34, 34, 38, 0.62) 0%,
    rgba(18, 18, 20, 0.55) 100%
  );
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 26px 54px rgba(0, 0, 0, 0.6);
}

/* Intro entrance — on first load (at the top of the page) the "Van Models" heading
   (its text and flanking dividers) rises and fades in first, then the lineup cards
   cascade in left→right beneath it, on the same easing as the cards' other motion.
   A calmer, more deliberate settle than the old hover-state pulse — no colour flash.
   Desktop + motion-safe only; the script in models.php adds
   .models-intro__lineup--intro, and only when the page loads at the top (so the
   entrance transform never animates over a scrolled, backdrop-filtered card).
   fill-mode `backwards` applies the start state before each element's turn but does
   NOT hold a transform afterwards, so the resting :hover lift still works. The
   dividers are the heading's ::before/::after, so they fade and rise with it. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .models-intro__lineup--intro .models-intro__heading,
  .models-intro__lineup--intro .models-intro__model {
    animation: modelsIntroRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .models-intro__lineup--intro .models-intro__heading {
    animation-delay: 0s;
  }
  .models-intro__lineup--intro .models-intro__model:nth-child(1) {
    animation-delay: 0.13s;
  }
  .models-intro__lineup--intro .models-intro__model:nth-child(2) {
    animation-delay: 0.26s;
  }
  .models-intro__lineup--intro .models-intro__model:nth-child(3) {
    animation-delay: 0.39s;
  }
  .models-intro__lineup--intro .models-intro__model:nth-child(4) {
    animation-delay: 0.52s;
  }
}

@keyframes modelsIntroRise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.models-intro__model-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Neutral grey to match the navbar's light text — not the red eyebrow tint. */
  color: var(--theme-text-muted);
}

/* The model name is shown as its wordmark logo. Each SVG is cropped tight to
   its glyphs (no built-in whitespace), so a single uniform height renders all
   four at the same letter scale and the margins below give consistent padding.
   The size is capped so the widest wordmark (Classic) still fits four-across. */
.models-intro__model-name {
  /* Fixed-height row sized to the tallest logo, with logos bottom-aligned so
     every wordmark's baseline sits on the same horizontal line across cards —
     and so the description below stays aligned regardless of logo height. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(1.08rem, 2.27vw, 2.16rem);
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.95rem);
}

/* The wordmark is wrapped in a link to its model page. Hug the logo tightly so
   the surrounding layout is unchanged (it bottom-aligns like the bare img did). */
.models-intro__model-logo-link {
  display: inline-flex;
  align-items: flex-end;
}

/* Per-wordmark heights. The marks are custom fonts at different intrinsic
   scales, so each is tuned to read at a comparable size. Classic is the
   widest wordmark — it stays smaller because it's capped by the card width
   (max-width below); the rest are sized taller to match. */
.models-intro__model-logo {
  display: block;
  height: clamp(1.08rem, 1.84vw, 1.35rem);
  width: auto;
  max-width: 100%;
}

.models-intro__model-logo--kronos,
.models-intro__model-logo--ultra {
  height: clamp(1.35rem, 2.27vw, 2rem);
}

/* Metis is lowercase, so it needs the most height to read at the same size. */
.models-intro__model-logo--metis {
  height: clamp(1.62rem, 2.7vw, 2.38rem);
}

.models-intro__model-desc {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--theme-text-soft);
}

/* Lifestyle hook — the "reason to buy" line. Separated by a hairline and set
   in italic so it reads as an aspirational pull-quote distinct from the
   factual description above. */
.models-intro__model-life {
  margin: 1.1rem 0 clamp(1.4rem, 2.2vw, 1.85rem);
  padding-top: 0.95rem;
  border-top: 1px solid var(--theme-border-soft);
  font-size: 0.92rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--theme-text-muted);
}

.models-intro__model-life-label {
  display: block;
  margin-bottom: 0.35rem;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-text-link-accent);
}

/* Explore CTA — pinned to the bottom of each card so the buttons line up
   across the row regardless of copy length. */
.models-intro__model-cta {
  margin-top: auto;
  width: 100%;
}

/* Small screens: four full cards no longer fit in the hero strip, so the docked
   lineup collapses to a logos-only block — "Van Models" centered above a 2×2
   grid of wordmarks, each linking to its model page. The full model detail
   lives in the sections below. */
@media (max-width: 768px) {
  /* -8.4rem (vs -8rem) pulls the lineup up an extra ~0.4rem to absorb the taller
     logos below, so the docked grid's bottom edge — and the gap from it down to
     the screen bottom — stays put as the logos scale up. */
  .models-intro__lineup {
    margin: -8.4rem auto 0;
  }

  /* Heading centered above the grid; a soft shadow keeps it legible where it
     overlaps the photo, above the frosted band. */
  .models-intro__heading {
    margin-bottom: clamp(0.7rem, 3vw, 1.1rem);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  /* Mid-sized screens: all four wordmarks on one line as a segmented control —
     four equal columns whose button-segments fill flush (no gap) and are split by
     hairline dividers. Falls back to a 2-up grid on small phones (≤520px). */
  .models-intro__grid--docked {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: stretch;
    align-items: stretch;
    column-gap: 0;
    row-gap: clamp(0.9rem, 4vw, 1.6rem);
    padding: clamp(0.7rem, 2.4vw, 1.25rem) clamp(0.5rem, 1.8vw, 1rem);
    margin-top: 0;
    /* Match the desktop lineup cards' glass: the same translucent-white gradient
       as .models-intro__model and — like the desktop top state — no backdrop blur,
       so the mobile docked band reads as the same surface as the desktop version. */
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.075) 0%,
      rgba(255, 255, 255, 0.028) 46%,
      rgba(255, 255, 255, 0.015) 100%
    );
    box-shadow: var(--nav-surface-shadow);
  }

  /* Each model is a button-like segment: it lights up on hover/press (the service
     hero's .service-hero__why-stat recipe) and shows a pressed state. The band
     supplies the shared glass surface; segments sit flush, split by dividers. */
  .models-intro__grid--docked .models-intro__model {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color 0.22s ease,
      background-color 0.22s ease,
      transform 0.18s ease,
      box-shadow 0.22s ease;
  }

  /* Hairline divider between adjacent segments (service hero recipe). */
  .models-intro__grid--docked
    .models-intro__model
    + .models-intro__model::before {
    content: "";
    position: absolute;
    left: -0.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: var(--theme-surface-white-08);
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  /* Lit state — hover, press, or while that model's panel is open. */
  .models-intro__grid--docked .models-intro__model:hover,
  .models-intro__grid--docked .models-intro__model:active,
  .models-intro__grid--docked .models-intro__model.is-active {
    border-color: rgba(255, 255, 255, 0.09);
    background-color: rgba(255, 255, 255, 0.04);
  }

  /* Dividers flanking the lit segment fade out (service hero recipe). */
  .models-intro__grid--docked .models-intro__model:hover::before,
  .models-intro__grid--docked
    .models-intro__model:hover
    + .models-intro__model::before,
  .models-intro__grid--docked .models-intro__model:active::before,
  .models-intro__grid--docked
    .models-intro__model:active
    + .models-intro__model::before,
  .models-intro__grid--docked .models-intro__model.is-active::before,
  .models-intro__grid--docked
    .models-intro__model.is-active
    + .models-intro__model::before {
    opacity: 0;
  }

  /* Pressed — a clear "pushed in" feel on tap. */
  .models-intro__grid--docked .models-intro__model:active {
    transform: scale(0.96);
    background-color: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
  }

  /* Swap Metis (3rd in the DOM) and Ultra (4th) on mobile, so the strip reads
     Classic · Kronos · Ultra · Metis (and they fill the bottom 2-up row in that
     order). Visual only — the DOM order is unchanged, so desktop is untouched. */
  .models-intro__grid--docked .models-intro__model:nth-child(3) {
    order: 4;
  }
  .models-intro__grid--docked .models-intro__model:nth-child(4) {
    order: 3;
  }

  .models-intro__grid--docked .models-intro__model-desc,
  .models-intro__grid--docked .models-intro__model-life,
  .models-intro__grid--docked .models-intro__model-cta {
    display: none;
  }

  /* Fill the segment so the link (the tap target) covers the whole button. */
  .models-intro__grid--docked .models-intro__model-name {
    flex: 1;
    width: 100%;
    height: auto;
    margin: 0;
    align-items: stretch;
    justify-content: center;
  }

  /* The link fills the segment and carries the padding, so the entire button is a
     tap target; it centres the wordmark + the +/− toggle. */
  .models-intro__grid--docked .models-intro__model-logo-link {
    flex: 1;
    display: flex;
    align-items: center;
    /* Push the wordmark and the +/− toggle to opposite edges — as much space
       between them as the (equal-width) button allows. */
    justify-content: space-between;
    padding: clamp(0.55rem, 2.2vw, 0.95rem) clamp(0.3rem, 1.2vw, 0.6rem);
  }

  /* Four-across sizing: Classic (widest) sets the cap; the others scale up
     proportionally so all read at a comparable size. vw-based so they shrink with
     the viewport, and max-width:100% caps each to its column so nothing overflows
     if a mark would otherwise be too wide. The ≤520px block below restores the
     larger 2-up sizes for small phones. */
  .models-intro__grid--docked .models-intro__model-logo {
    height: clamp(0.5rem, 1.7vw, 0.85rem);
    max-width: 100%;
  }

  .models-intro__grid--docked .models-intro__model-logo--kronos,
  .models-intro__grid--docked .models-intro__model-logo--ultra {
    height: clamp(0.68rem, 2.3vw, 1.15rem);
  }

  .models-intro__grid--docked .models-intro__model-logo--metis {
    height: clamp(0.78rem, 2.6vw, 1.3rem);
  }
}

/* Small phones: four-across gets too tight, so fall back to the 2-up grid — marks
   right-aligned (Metis under Classic, Ultra under Kronos) and sized larger for
   tapping, with the roomier container/internal padding restored. */
@media (max-width: 520px) {
  .models-intro__grid--docked {
    grid-template-columns: 1fr 1fr;
    /* Separate, filled buttons (with a gap) on phones, so the segmented dividers
       are dropped below. */
    justify-items: stretch;
    column-gap: clamp(0.5rem, 3vw, 1.2rem);
    row-gap: clamp(0.6rem, 3vw, 1.1rem);
    padding: clamp(0.9rem, 3.5vw, 1.5rem) clamp(0.6rem, 2.5vw, 1.2rem);
  }

  .models-intro__grid--docked
    .models-intro__model
    + .models-intro__model::before {
    display: none;
  }

  .models-intro__grid--docked .models-intro__model-logo-link {
    padding: clamp(0.6rem, 3vw, 1rem) clamp(0.4rem, 2vw, 0.8rem);
  }

  .models-intro__grid--docked .models-intro__model-logo {
    height: clamp(0.8rem, 3.75vw, 1.45rem);
  }

  .models-intro__grid--docked .models-intro__model-logo--kronos,
  .models-intro__grid--docked .models-intro__model-logo--ultra {
    height: clamp(1rem, 5.16vw, 1.95rem);
  }

  .models-intro__grid--docked .models-intro__model-logo--metis {
    height: clamp(1.1rem, 5.86vw, 2.2rem);
  }
}

/* ── Mobile tap-to-expand model info ──────────────────────────────────────
   The docked strip stays a logos-only 2×2 nav; tapping a wordmark reveals that
   model's description + "Best for" (+ Explore CTA) in a panel beneath the strip.
   The panel's content is cloned (by the script in models.php) from the model's
   own card body — which is present in the DOM but hidden on mobile — so the copy
   lives in exactly one place. Enhancement only: with JS off the wordmarks remain
   plain links to each model page. */
.models-intro__reveal {
  display: none;
}

@media (max-width: 768px) {
  /* On open, the script scrolls the lineup to the top of the viewport; this
     scroll-margin-top keeps it clear of the fixed navbar, so the logos land just
     under the nav with the expanded panel visible below. */
  .models-intro__lineup {
    scroll-margin-top: calc(var(--nav-h, 3.3rem) + 0.6rem);
  }

  /* Tap affordance — a small plus after each wordmark that collapses to a minus
     when that model's panel is open. Drawn as two thin bars (background
     gradients), so the vertical bar can animate its height to 0 for a smooth
     + → − morph while the horizontal bar stays. */
  /* A thin, slightly larger + (lighter weight = subtler, clearer shape = more
     obvious) that collapses to a minus when open. flex:none keeps it fixed; the
     link's space-between pushes it to the far edge from the wordmark. */
  .models-intro__grid--docked .models-intro__model-logo-link::after {
    content: "";
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    color: var(--theme-text-muted);
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1.25px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.25px 100% no-repeat;
    transition:
      background-size 0.3s ease,
      color 0.3s ease;
  }

  .models-intro__grid--docked
    .models-intro__model.is-active
    .models-intro__model-logo-link::after {
    color: var(--theme-text-strong);
    /* Collapse the vertical bar to the centre → a minus. */
    background-size:
      100% 1.25px,
      1.25px 0;
  }

  /* Reveal panel — full width, directly beneath the strip; animates open. */
  .models-intro__reveal {
    display: block;
    max-width: 36rem;
    margin: 0 auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.38s ease,
      opacity 0.3s ease,
      margin-top 0.38s ease;
  }

  .models-intro__reveal.is-open {
    max-height: 34rem;
    opacity: 1;
    margin-top: clamp(0.7rem, 3vw, 1.1rem);
  }

  /* Dark glass card matching the lineup's scrolled state — solid enough to read
     without leaning on backdrop-filter (which the docked band above already
     owns). */
  .models-intro__reveal-inner {
    padding: clamp(1.15rem, 5vw, 1.7rem) clamp(1.2rem, 5vw, 1.6rem);
    background: linear-gradient(
      160deg,
      rgba(24, 24, 27, 0.96) 0%,
      rgba(12, 12, 14, 0.94) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 18px 40px rgba(0, 0, 0, 0.5);
    text-align: left;
  }

  /* Model name heading inside the panel (taken from the wordmark's alt text). */
  .models-intro__reveal-name {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--theme-text-strong);
  }

  /* The cloned desc / life / cta keep their existing card-body styling; nudge the
     full-width CTA a touch below the "Best for" block. */
  .models-intro__reveal .models-intro__model-cta {
    margin-top: 0.4rem;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .models-intro__reveal,
  .models-intro__grid--docked .models-intro__model-logo-link::after {
    transition: none;
  }
}

/* Phone — at ≤600px the model title panel is a full-bleed band pinned to the
   TOP of the hero (square corners, no side gutter). Placed after the ≤768 docked
   rules above so it wins on source order. */
@media only screen and (max-width: 600px) {
  /* Phone: the title panel sits as a full-bleed band pinned to the TOP of the
     hero (just below the fixed navbar) — square corners, edge to edge. The
     "Van Models" strip (models.php) docks up into the hero's lower edge via the
     ≤768 rule below, and the lineup stats strip stays docked at the bottom, so
     the band owns the top and nothing else needs reserving. */
  .models-header-img .header-title,
  .header .header-title.models-header-title {
    align-self: start;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 100%;
    margin: 0;
    /* Top padding clears the fixed navbar (--nav-h) so the title clears it;
       bottom padding matches the home hero band. */
    padding: calc(var(--nav-h, 3.3rem) + 1.5rem) 1rem 2.5rem;
    border-radius: 0;
    /* Solid black under the navbar fading down to the panel's usual translucent
       black (--c5) at the band's lower edge, so it dissolves into the hero photo
       below instead of ending on a hard line. */
    background: linear-gradient(180deg, #000 0%, var(--c5) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .models-intro__model {
    transition: none;
  }
  .models-intro__model:hover {
    transform: none;
  }
}

.bi-classic {
  background-image:
    repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
    url(/assets/images/models/classic/desktop-classic-models.png);
  background-size: cover;
  background-position:
    center,
    center 32%;
}

.bi-kronos {
  background-image:
    repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
    url(/assets/images/models/kronos/desktop-kronos-models.png);
  background-size: cover;
  background-position:
    center,
    center 32%;
}

.bi-metis {
  background-image:
    repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
    url(/assets/images/models/metis/desktop-metis-models.png);
  background-size: cover;
  background-position: center;
}

.bi-ultra {
  background-image:
    repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
    url(/assets/images/models/ultra/desktop-ultra-models.png);
  background-size: cover;
  background-position: center;
}

/* Banner art direction — portrait crops on mobile.
   The .bi-* banners above use a wide (desktop-) landscape crop. On a narrow,
   tall viewport `cover` scales that crop way up and the vans get pushed out of
   frame, so swap each to its portrait crop at the site's mobile breakpoint.
   Only background-image changes — `cover` + center carry over, so each crop
   still scales fluidly within the header. Mapping:
     classic → classic_models.png · kronos/metis/ultra → vertical-<model>-models.png
   (No `mobile-` files exist; the portrait crops are the de-facto mobile art —
   classic_models.png is already the classic mobile image used up top.) */
@media (max-width: 768px) {
  .bi-classic {
    background-image:
      repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
      url(/assets/images/models/classic/classic_models.png);
  }

  .bi-kronos {
    background-image:
      repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
      url(/assets/images/models/kronos/mobile-kronos-models.png);
    background-position: bottom, bottom;
  }

  .bi-metis {
    background-image:
      repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
      url(/assets/images/models/metis/vertical-metis-models.png);
    background-position: top;
  }

  .bi-ultra {
    background-image:
      repeating-radial-gradient(transparent, rgba(0, 0, 0, 0.593)),
      url(/assets/images/models/ultra/mobile-ultra-models.png);
    background-position: bottom, bottom;
  }
}

/* ------------------------------------------------------------------
 *  models.php "here to help" contact prompt — a centred glass panel
 *  beneath the lineup/compare section inviting buyers to reach out.
 * ------------------------------------------------------------------ */
.s-models-help {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem) clamp(3rem, 6vw, 5rem);
}

.models-help {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.models-help__tag {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c1);
}

.models-help__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.2;
  color: var(--theme-text-strong, #fff);
}

.models-help__desc {
  max-width: 54ch;
  margin: 0 auto 1.75rem;
  color: var(--c3);
  line-height: 1.6;
  font-size: 1rem;
}

.models-help__cta {
  display: inline-flex;
}

/* ------------------------------------------------------------------
 *  Family-page series intro — an expanded version of the models.php
 *  lineup card (tagline + description + "Best for"), shown under the
 *  header on classic/kronos/metis/ultra (includes/series-intro.php).
 * ------------------------------------------------------------------ */
.s-series-intro {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 2vw, 2rem) clamp(2.75rem, 5.5vw, 4.5rem);
}

/* Two-column feature: family render + copy. */
.series-intro {
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.series-intro__media img {
  display: block;
  width: 100%;
  height: auto;
}

.series-intro__copy {
  text-align: left;
}

/* Main title — the service page h1 treatment (.service-hero__title): light weight,
   strong white, tight tracking. */
.series-intro__title {
  margin: 0 0 1.1rem;
  color: var(--theme-text-strong, #fff);
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-transform: none;
}

.series-intro__desc {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--theme-text-soft);
}

.series-intro__desc:last-of-type {
  margin-bottom: 0;
}

.series-intro__life {
  display: block;
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--theme-border-soft);
  font-size: 0.95rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--theme-text-muted);
}

.series-intro__life-label {
  display: block;
  margin-bottom: 0.4rem;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-text-link-accent);
}

/* Stack on tablet/phone: render above the copy. */
@media (max-width: 768px) {
  .series-intro {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 4vw, 2rem);
  }

  .series-intro__media {
    max-width: 28rem;
    margin: 0 auto;
  }
}

/* Lineup heading above a family page's variant cards — same rod-divider title
   (.models-intro__heading) + description (.compare-intro) as the compare section. */
.s-options .lineup-head {
  max-width: 86rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}