/* ════════════════════════════════════════════════════════════════════════
   SITE.CSS — Public-facing dealer site
   Light editorial aesthetic. Multi-dealer themable.
   Replaces main.css + premium.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────── */
/* 1. FONTS — Fontshare CDN (free, no key needed)                        */
/* ───────────────────────────────────────────────────────────────────── */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&f[]=cabinet-grotesk@500,700,800,900&display=swap');

/* ───────────────────────────────────────────────────────────────────── */
/* 2. DESIGN TOKENS                                                      */
/* These are the fallback defaults. themeStyles() (PHP) emits a second   */
/* :root block AFTER this stylesheet that overrides the dealer-tinted    */
/* values (--primary-*, --neutral-*, etc).                               */
/* ───────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces — warm off-white editorial palette */
  --bg:               #fafaf9;
  --bg-elevated:      #ffffff;
  --bg-muted:         #f5f5f4;
  --bg-tinted:        var(--primary-50, #f4f7fb);

  /* Foreground — warm near-black, never pure */
  --fg:               #1c1917;
  --fg-strong:        #0c0a09;
  --fg-muted:         #57534e;
  --fg-subtle:        #78716c;
  --fg-faint:         #a8a29e;

  /* Borders — warm grays */
  --border:           #e7e5e4;
  --border-strong:    #d6d3d1;
  --border-subtle:    #f5f5f4;

  /* Accent — derived from dealer primary */
  --accent:           var(--primary-500, #1a73e8);
  --accent-hover:     var(--primary-600, #1464cc);
  --accent-active:    var(--primary-700, #154e98);
  --accent-fg:        var(--on-primary, #ffffff);
  --accent-soft:      var(--primary-50, #f4f7fb);
  --accent-soft-fg:   var(--primary-700, #154e98);

  /* Semantic — fixed across dealers */
  --success:          #16a34a;
  --warning:          #ea580c;
  --error:            #dc2626;

  /* Focus ring */
  --ring:             var(--accent);
  --ring-offset:      var(--bg);

  /* Shadows — tinted, layered, never neon */
  --shadow-xs:  0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm:  0 1px 2px rgba(28, 25, 23, 0.04),
                0 2px 6px rgba(28, 25, 23, 0.04);
  --shadow-md:  0 1px 2px rgba(28, 25, 23, 0.04),
                0 8px 24px rgba(28, 25, 23, 0.06);
  --shadow-lg:  0 1px 2px rgba(28, 25, 23, 0.04),
                0 24px 48px -8px rgba(28, 25, 23, 0.12);
  --shadow-xl:  0 1px 2px rgba(28, 25, 23, 0.04),
                0 40px 80px -16px rgba(28, 25, 23, 0.16);

  /* Radii — zero everywhere: sharp, architectural */
  --r-xs:   0px;
  --r-sm:   0px;
  --r-md:   0px;
  --r-lg:   0px;
  --r-xl:   0px;
  --r-2xl:  0px;
  --r-pill: 0px;

  /* Secondary accent — from themeStyles(); fallback warm gold */
  --secondary:      var(--secondary-500, #d97706);
  --secondary-soft: var(--secondary-50,  #fffbeb);
  --secondary-fg:   var(--on-secondary,  #ffffff);

  /* Spacing — 4-based, semantic */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    20px;
  --s-6:    24px;
  --s-8:    32px;
  --s-10:   40px;
  --s-12:   48px;
  --s-16:   64px;
  --s-20:   80px;
  --s-24:   96px;
  --s-32:   128px;

  /* Motion */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:       180ms;
  --t-base:       300ms;
  --t-slow:       600ms;

  /* Typography */
  --font-display: 'Cabinet Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans:    'Satoshi', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Container widths */
  --w-content:    1440px;
  --w-narrow:     960px;
  --w-prose:      65ch;

  /* Z-index scale */
  --z-base:       1;
  --z-sticky:     50;
  --z-dropdown:   100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-toast:      400;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 2b. DARK THEME                                                        */
/* Auto (OS prefers-color-scheme) unless overridden by data-theme, plus  */
/* an explicit data-theme="dark" for the manual toggle (theme-toggle.js).*/
/* Reuses the dealer's own primary/neutral scale from themeStyles() so   */
/* every dealer gets a dark theme tinted to their brand, not a fixed one.*/
/* This block must stay in THIS file, after :root above — themeStyles()' */
/* inline <style> block loads before this stylesheet in every page head, */
/* so an unconditional rule here always wins the cascade over it.       */
/* ───────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:               var(--neutral-900, #121113);
    --bg-elevated:      var(--neutral-800, #1c1b1e);
    --bg-muted:         var(--neutral-800, #1c1b1e);
    --bg-tinted:        var(--primary-900, #241f0d);

    --fg:               var(--neutral-50,  #f2efe9);
    --fg-strong:        #ffffff;
    --fg-muted:         var(--neutral-300, #b6b0a8);
    --fg-subtle:        var(--neutral-400, #8f8a82);
    --fg-faint:         var(--neutral-500, #635e58);

    --border:           var(--neutral-700, #302f33);
    --border-strong:    var(--neutral-600, #45434a);
    --border-subtle:    var(--neutral-800, #1c1b1e);

    --accent-soft:      var(--primary-900, #241f0d);
    --accent-soft-fg:   var(--primary-200, #ffd633);

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg:  0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 56px -8px rgba(0, 0, 0, 0.55);
    --shadow-xl:  0 1px 2px rgba(0, 0, 0, 0.5), 0 40px 88px -16px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --bg:               var(--neutral-900, #121113);
  --bg-elevated:      var(--neutral-800, #1c1b1e);
  --bg-muted:         var(--neutral-800, #1c1b1e);
  --bg-tinted:        var(--primary-900, #241f0d);

  --fg:               var(--neutral-50,  #f2efe9);
  --fg-strong:        #ffffff;
  --fg-muted:         var(--neutral-300, #b6b0a8);
  --fg-subtle:        var(--neutral-400, #8f8a82);
  --fg-faint:         var(--neutral-500, #635e58);

  --border:           var(--neutral-700, #302f33);
  --border-strong:    var(--neutral-600, #45434a);
  --border-subtle:    var(--neutral-800, #1c1b1e);

  --accent-soft:      var(--primary-900, #241f0d);
  --accent-soft-fg:   var(--primary-200, #ffd633);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 56px -8px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 1px 2px rgba(0, 0, 0, 0.5), 0 40px 88px -16px rgba(0, 0, 0, 0.6);
}

/* ───────────────────────────────────────────────────────────────────── */
/* 3. RESET + BASE                                                       */
/* ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  font-variant-ligatures: common-ligatures;
  overflow-x: hidden; /* prevent horizontal scroll from any overflowing child */
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol { list-style: none; padding: 0; margin: 0; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* ───────────────────────────────────────────────────────────────────── */
/* 4. FOCUS RINGS — keyboard-visible only                                */
/* ───────────────────────────────────────────────────────────────────── */

*:focus { outline: none; }

*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 0;
}

/* Custom focus for the card link (no outline jitter) */
a.v-card:focus-visible,
button.v-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--ring-offset),
    0 0 0 5px var(--ring),
    var(--shadow-md);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 5. TYPOGRAPHY                                                         */
/* ───────────────────────────────────────────────────────────────────── */

.display-xl,
.display-lg,
.display-md,
.display-sm {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}

.display-xl { font-size: clamp(48px, 7vw, 88px); letter-spacing: -0.035em; }
.display-lg { font-size: clamp(40px, 5.5vw, 64px); letter-spacing: -0.03em; }
.display-md { font-size: clamp(32px, 4vw, 48px); }
.display-sm { font-size: clamp(24px, 3vw, 36px); line-height: 1.1; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h1 { font-size: clamp(32px, 4vw, 48px); }
h2 { font-size: clamp(28px, 3.2vw, 40px); }
h3 { font-size: clamp(22px, 2.2vw, 28px); }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin: 0; }
p + p { margin-top: 1em; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft-fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--secondary, var(--accent));
}

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: var(--w-prose);
}

.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

.mono { font-family: var(--font-mono); font-feature-settings: 'zero', 'ss01'; }

/* ───────────────────────────────────────────────────────────────────── */
/* 6. LAYOUT HELPERS                                                     */
/* ───────────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.container-narrow {
  width: 100%;
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.section {
  padding-block: var(--s-20);
}

.section-sm {
  padding-block: var(--s-12);
}

/* Secondary-tinted section background */
.section--secondary {
  background: var(--secondary-soft);
  border-block: 1px solid color-mix(in srgb, var(--secondary) 15%, transparent);
}

@media (max-width: 768px) {
  .container, .container-narrow { padding-inline: var(--s-4); }
  .section { padding-block: var(--s-16); }
  .section-sm { padding-block: var(--s-10); }
}

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

/* Stack utility */
.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-8 > * + * { margin-top: var(--s-8); }
.stack-12 > * + * { margin-top: var(--s-12); }

/* Flex helpers */
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }
.gap-12 { gap: var(--s-12); }

/* ───────────────────────────────────────────────────────────────────── */
/* 7. BUTTONS                                                            */
/* ───────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 0;
  transition: all var(--t-base) var(--ease-out);
  white-space: nowrap;
  user-select: none;
  border: 1px solid transparent;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--btn-primary-bg, var(--fg-strong));
  color: var(--btn-primary-fg, var(--bg));
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--accent-fg);
}

.btn-accent {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn-accent:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--fg-strong);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--fg-strong);
}
.btn-ghost:hover {
  background: var(--bg-muted);
}

.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 18px 28px; font-size: 16px; }

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 0;
}

.btn-block { width: 100%; }

/* Arrow that nudges on hover */
.btn .arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* ───────────────────────────────────────────────────────────────────── */
/* 8. FORMS                                                              */
/* ───────────────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.005em;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 15px;
  color: var(--fg-strong);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--fg-faint);
}

.textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.help { font-size: 12px; color: var(--fg-muted); }
.field-error { font-size: 12px; color: var(--error); }

/* Star-rating picker — pure CSS, no JS. Radios render 5..1 in DOM order with
   flex-direction:row-reverse so they display 1..5 left-to-right; the
   general-sibling combinator lights up the checked star and everything
   visually to its left (later in DOM, due to the reversal). */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  width: fit-content;
}
.star-rating input { position: absolute; opacity: 0; pointer-events: none; }
.star-rating label {
  font-size: 30px;
  line-height: 1;
  color: var(--border-strong, #d6d3d1);
  cursor: pointer;
  transition: color var(--t-fast, 150ms) var(--ease-out, ease);
}
.star-rating input:checked ~ label { color: #f59e0b; }
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f59e0b; }

/* ───────────────────────────────────────────────────────────────────── */
/* 9. ICONS                                                              */
/* ───────────────────────────────────────────────────────────────────── */

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 32px; height: 32px; }

/* ───────────────────────────────────────────────────────────────────── */
/* 10. REVEAL ON SCROLL — used by reveal.js                              */
/* ───────────────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--d1 { transition-delay: 80ms; }
.reveal--d2 { transition-delay: 160ms; }
.reveal--d3 { transition-delay: 240ms; }
.reveal--d4 { transition-delay: 320ms; }
.reveal--d5 { transition-delay: 400ms; }

/* ════════════════════════════════════════════════════════════════════════
   COMPONENTS
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────── */
/* 11. NAVIGATION                                                        */
/* ───────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(250, 250, 249, 0.72);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

.nav.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(250, 250, 249, 0.92);
}

.nav__inner {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding: 14px var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.nav__brand img {
  height: var(--logo-h, 32px);
  width: auto;
  object-fit: contain;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav__link {
  position: relative;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg-muted);
  border-radius: 0;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.nav__link:hover {
  color: var(--fg-strong);
  background: var(--bg-muted);
}

.nav__link[aria-current="page"] {
  color: var(--fg-strong);
  background: var(--bg-muted);
}

.nav__cta-group {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

.nav__phone {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-strong);
  padding: 6px 10px;
  border-radius: 0;
  transition: background var(--t-fast) var(--ease-out);
}
.nav__phone:hover { background: var(--bg-muted); }

.nav__burger {
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--fg-strong);
  border-radius: 0;
}

.nav__burger:hover { background: var(--bg-muted); }

/* Day / night toggle — desktop nav bar + mobile drawer head (theme-toggle
   wiring lives in nav.php's inline script) */
.nav__theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg-strong);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.nav__theme-toggle:hover { background: var(--bg-muted); border-color: var(--border-strong); }

.theme-icon--moon { display: none; }
:root[data-theme="dark"] .theme-icon--sun  { display: none; }
:root[data-theme="dark"] .theme-icon--moon { display: block; }

.drawer__head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

@media (max-width: 920px) {
  .nav__links, .nav__phone { display: none; }
  .nav__burger { display: inline-flex; }
  /* A custom logo height is set for the desktop bar and isn't guaranteed to
     fit the much narrower mobile bar alongside the CTA button + hamburger —
     cap it regardless of the dealer's configured height. */
  .nav__brand img { height: min(var(--logo-h, 32px), 40px); }
  /* The CTA button is redundant here — the drawer the hamburger opens already
     has the same "Get in touch" button in its footer — and on a narrow phone
     screen, keeping both it and a taller logo in one row is what pushes the
     hamburger button past the viewport edge, where it's clipped invisible by
     body's overflow-x:hidden rather than just becoming scrollable. */
  .nav__cta-group > a.btn { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer__head {
  padding: 14px var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.drawer__body {
  padding: var(--s-8) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.drawer__link {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  padding: var(--s-3) 0;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.drawer.is-open .drawer__link {
  opacity: 1;
  transform: translateX(0);
}

.drawer.is-open .drawer__link:nth-child(1) { transition-delay: 80ms; }
.drawer.is-open .drawer__link:nth-child(2) { transition-delay: 140ms; }
.drawer.is-open .drawer__link:nth-child(3) { transition-delay: 200ms; }
.drawer.is-open .drawer__link:nth-child(4) { transition-delay: 260ms; }
.drawer.is-open .drawer__link:nth-child(5) { transition-delay: 320ms; }

.drawer__foot {
  margin-top: auto;
  padding: var(--s-8) var(--s-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Lock body scroll when drawer is open */
body.no-scroll { overflow: hidden; }

/* ───────────────────────────────────────────────────────────────────── */
/* 12. HERO                                                              */
/* ───────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-top: var(--s-16);
  padding-bottom: var(--s-24);
  overflow: hidden;
}

/* Subtle dot-grid texture — low opacity so it never competes */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
  display: grid;
  grid-template-columns: 54% 1fr;
  gap: var(--s-16);
  align-items: center;
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-10); padding-inline: var(--s-6); }
  .hero { padding-top: var(--s-12); padding-bottom: var(--s-16); }
}

.hero__content { display: flex; flex-direction: column; gap: var(--s-5); }

/* H1 inside the hero gets weight 900 + tighter tracking */
.hero__content .display-xl {
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero__cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

.hero__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--accent-soft);
  box-shadow: 0 2px 4px rgba(28,25,23,0.04),
              0 16px 48px -8px rgba(28,25,23,0.16),
              0 40px 80px -20px rgba(28,25,23,0.08);
}

.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Left-edge fade: blends image into background. Add .no-fade class to disable. */
.hero__visual:not(.no-fade)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              var(--bg) 0%,
              color-mix(in srgb, var(--bg) 40%, transparent) 25%,
              transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Bottom vignette */
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              transparent 55%,
              rgba(28, 25, 23, 0.22) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Hero floating stat chips */
.hero__chip {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(28,25,23,0.12), 0 1px 3px rgba(28,25,23,0.06);
  border: 1px solid rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: 0.01em;
}

.hero__chip--tl { top: 20px; left: 20px; }
.hero__chip--br {
  bottom: 20px; right: 20px;
  background: color-mix(in srgb, var(--secondary, var(--accent)) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--secondary-fg, var(--accent-fg));
  border-color: transparent;
}

.hero__chip-dot {
  width: 7px;
  height: 7px;
  background: var(--success);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-soft 2.4s var(--ease-in-out) infinite;
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  50%       { opacity: 0.8; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

/* ── Hero segmented search ──────────────────────────────── */

/* Micro-label row above the grid */
.hs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}

.hs-header__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.hs-header__count {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--fg-subtle);
}

.hs-header__count strong {
  color: var(--accent);
  font-weight: 700;
}

/* One flat surface — gap:1px on accent-colored parent = hairline dividers.
   Accent top stripe anchors the form visually to the brand. */
.hs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 1px;
  background: var(--border-strong);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--accent);
  box-shadow: 0 4px 20px rgba(28,25,23,0.08),
              0 1px 4px rgba(28,25,23,0.04);
}

/* Each filter column — min 56px so touch targets pass the 44px rule */
.hs-seg {
  background: var(--bg-elevated);
  padding: 14px var(--s-4) 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 56px;
  transition: background var(--t-fast) var(--ease-out);
  cursor: pointer;
}

.hs-seg:hover     { background: var(--bg-muted); }
.hs-seg:focus-within { background: var(--bg-muted); }

/* Active — inset top stripe makes the selected state unmistakable */
.hs-seg.is-active {
  background: var(--accent-soft);
  box-shadow: inset 0 2px 0 var(--accent);
}
.hs-seg.is-active:hover { background: var(--accent-soft); }

.hs-seg__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease-out);
}

.hs-seg.is-active .hs-seg__label { color: var(--accent); }

/* Borderless native select flush to the segment */
.hs-seg__sel {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  padding-right: 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  width: 100%;
  outline: none;
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-seg.is-active .hs-seg__sel {
  color: var(--accent-soft-fg);
  font-weight: 600;
}

/* Submit — uppercase, lifts on hover for tactile feel */
.hs-submit {
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  padding: 0 var(--s-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  min-width: 100px;
  transition: background var(--t-fast) var(--ease-out),
              transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}

.hs-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(28,25,23,0.16);
}

.hs-submit:active {
  background: var(--accent-active);
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.hs-submit.is-loading {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.hs-submit svg { flex-shrink: 0; }

/* Browse-all + phone — clean inline row with arrow link */
.hs-browse {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-subtle);
}

.hs-browse a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.hs-browse a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.hs-browse a svg { transition: transform var(--t-fast) var(--ease-out); }
.hs-browse a:hover svg { transform: translateX(2px); }

.hs-browse__sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border-strong);
}

/* ── Mobile: 2×2 grid, search spans full width ─────────── */
@media (max-width: 640px) {
  .hs-grid { grid-template-columns: 1fr 1fr; }
  .hs-submit {
    grid-column: 1 / -1;
    padding: var(--s-4) var(--s-6);
    font-size: 13px;
  }
  .hs-seg { padding: var(--s-3) var(--s-3) 10px; min-height: 52px; }
  .hs-header { margin-bottom: var(--s-1); }
}

/* ═══════════════════════════════════════════════════════
   HERO VARIANT: SLIDESHOW
   ═══════════════════════════════════════════════════════ */

.hero-ss { position: relative; }

.hero-ss__stage {
  position: relative;
  width: 100%;
  height: 68vh;
  min-height: 460px;
  max-height: 700px;
  overflow: hidden;
  background: var(--fg-strong);
}

.hero-ss__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
  will-change: opacity;
}

.hero-ss__slide.is-active { opacity: 1; }

/* Two-tone gradient overlay — bottom to top for text legibility */
.hero-ss__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 9, 11, 0.75) 0%,
    rgba(9, 9, 11, 0.18) 55%,
    rgba(9, 9, 11, 0.06) 100%
  );
  pointer-events: none;
}

/* Text anchored bottom-left */
.hero-ss__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--s-12);
}

.hero-ss__text-inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.hero-ss__eyebrow { color: rgba(250,250,249,0.65); }
.hero-ss__eyebrow::before { background: rgba(250,250,249,0.45); }

.hero-ss__h1 {
  color: #fafaf9;
  max-width: 18ch;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.97;
}

/* Navigation dots */
.hero-ss__dots {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--s-2);
  z-index: 2;
}

.hero-ss__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250,250,249,0.35);
  border: none;
  cursor: pointer;
  /* Invisible padding for 44px touch target */
  padding: 18px 8px;
  margin: -18px -8px;
  box-sizing: content-box;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.hero-ss__dot:hover    { background: rgba(250,250,249,0.65); }
.hero-ss__dot.is-active {
  background: #fafaf9;
  transform: scale(1.4);
}

/* Search section below the stage */
.hero-ss__search-bar {
  background: var(--bg);
  padding: var(--s-8) 0 var(--s-10);
  border-bottom: 1px solid var(--border);
}

.hero-ss__search-inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
}

@media (max-width: 640px) {
  .hero-ss__stage { height: 55vh; min-height: 360px; }
  .hero-ss__text-inner { padding-inline: var(--s-4); }
  .hero-ss__search-inner { padding-inline: var(--s-4); }
}

/* ═══════════════════════════════════════════════════════
   HERO VARIANT: CINEMATIC (CENTERED)
   ═══════════════════════════════════════════════════════ */

.hero-cx {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Video background — same treatment as bg image but rendered as <video> */
.hero-cx__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The parallax layer — slightly oversized so translateX/Y don't expose edges */
.hero-cx__bg {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  background-color: var(--fg-strong);
  will-change: transform;
}

.hero-cx__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 11, var(--cx-opacity, 0.45));
  pointer-events: none;
}

.hero-cx__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
  padding-block: var(--s-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-10);
  text-align: center;
}

.hero-cx__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.hero-cx__eyebrow { color: rgba(250,250,249,0.65); }
.hero-cx__eyebrow::before { background: rgba(250,250,249,0.45); }

.hero-cx__h1 {
  color: #fafaf9;
  max-width: 20ch;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.97;
}

.hero-cx__lede {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: rgba(250,250,249,0.7);
  max-width: 52ch;
}

/* Search — white surface floating over dark bg */
.hero-cx__search {
  width: 100%;
  max-width: 680px;
}

/* Override hs-header text for dark hero */
.hero-cx__hs-header .hs-header__label  { color: rgba(250,250,249,0.5); }
.hero-cx__hs-header .hs-header__count  { color: rgba(250,250,249,0.4); }
.hero-cx__hs-header .hs-header__count strong { color: rgba(250,250,249,0.9); }

/* Override browse links for dark hero */
.hero-cx__browse                  { color: rgba(250,250,249,0.45); }
.hero-cx__browse a                { color: rgba(250,250,249,0.65); border-color: rgba(250,250,249,0.3); }
.hero-cx__browse a:hover          { color: #fafaf9; border-color: rgba(250,250,249,0.7); }
.hero-cx__browse .hs-browse__sep  { background: rgba(250,250,249,0.2); }

/* Animated scroll indicator at the bottom */
.hero-cx__scroll {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cx-scroll-bob 2.2s var(--ease-in-out) infinite;
}

.hero-cx__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(250,250,249,0.55), transparent);
}

@keyframes cx-scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

@media (max-width: 768px) {
  .hero-cx__inner  { padding-inline: var(--s-4); gap: var(--s-8); }
  .hero-cx__search { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────── */
/* Page hero (smaller, used on inventory/about/contact) */
.page-hero {
  padding-top: var(--s-12);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--border);
}

.page-hero__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ───────────────────────────────────────────────────────────────────── */
/* 13. MARQUEE — trust strip                                             */
/* ───────────────────────────────────────────────────────────────────── */

/* ── Trust stats strip ──────────────────────────────────── */

.trust-strip {
  border-block: 1px solid var(--border);
  background: var(--bg-elevated);
}

.trust-strip__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
  display: flex;
  align-items: stretch;
}

.trust-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--s-5) var(--s-4);
  text-align: center;
  transition: background var(--t-fast) var(--ease-out);
}

.trust-stat:hover { background: var(--bg-muted); }

.trust-stat__num {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 5px;
}

.trust-stat__num svg { color: var(--accent); width: 16px; height: 16px; }

.trust-stat__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Thin vertical dividers between stats */
.trust-strip__div {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  align-self: stretch;
  margin-block: var(--s-3);
}

@media (max-width: 640px) {
  .trust-strip__inner {
    flex-wrap: wrap;
    padding-inline: var(--s-4);
  }
  .trust-stat { flex: 1 1 50%; min-width: 0; padding: var(--s-5) var(--s-3); }
  .trust-strip__div { display: none; }
}

/* ── Makes marquee — refined, slower, from real stock ───── */

.marquee {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
  overflow: hidden;
  position: relative;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  width: max-content;
  /* --marquee-duration is set by the block renderer (slow=40s, normal=25s, fast=15s) */
  animation: marquee var(--marquee-duration, 25s) linear infinite;
}

.marquee__item {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}

.marquee__item:hover {
  color: var(--accent);
}

/* Thin accent dot separator */
.marquee__sep {
  width: 4px;
  height: 4px;
  background: var(--accent);
  opacity: 0.4;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee__track { animation-play-state: paused; }

/* Gradient fade at edges */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 1;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg-muted), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg-muted), transparent); }

/* ───────────────────────────────────────────────────────────────────── */
/* 14. SECTION HEADERS                                                   */
/* ───────────────────────────────────────────────────────────────────── */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-10);
  max-width: var(--w-narrow);
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}

.section-head--split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-12);
  align-items: end;
  max-width: 100%;
}

.section-head--split .section-head__title-block {
  display: flex; flex-direction: column; gap: var(--s-3);
}

@media (max-width: 768px) {
  .section-head--split { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 15. VEHICLE CARD (.v-card)                                            */
/* Single canonical card. Whole card is the link.                        */
/* ───────────────────────────────────────────────────────────────────── */

.v-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

@media (max-width: 1024px) {
  .v-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .v-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

.v-card {
  display: flex;
  flex-direction: column;
  background: var(--c-card-bg, var(--bg-elevated));
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              border-top-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
  box-shadow: var(--shadow-xs);
}

.v-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  border-top-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

.v-card:active {
  transform: translateY(-1px) scale(0.998);
}

/* Media */
.v-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--bg-muted);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.v-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 500ms var(--ease-out);
}

.v-card:hover .v-card__media img {
  transform: scale(1.02);
}

.v-card__media--empty {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Badges */
.v-card__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.v-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.v-badge--hot   { background: var(--accent); color: var(--accent-fg); }
.v-badge--new   { background: rgba(28, 25, 23, 0.92); color: #fafafa; }
.v-badge--sale  { background: var(--warning); color: #ffffff; }

/* Body */
.v-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  text-align: var(--c-card-align, left);
}

/* Year label — colour + size controlled by card style settings */
.v-card__meta {
  display: flex;
  align-items: center;
  justify-content: var(--c-card-justify, flex-start);
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-card-year, var(--secondary, var(--fg-subtle)));
  font-size: var(--c-card-year-size, 12px);
}

.v-card__sep { opacity: 0.4; }

.v-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-card-title, var(--fg-strong));
  line-height: 1.1;
  margin: 0;
}

.v-card__trim {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spec chips (transmission / fuel / mileage) */
.v-card__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--c-card-justify, flex-start);
  gap: 14px;
  font-size: 13px;
  color: var(--c-card-spec, var(--fg-muted));
}

.v-card__specs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.v-card__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v-card__price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.v-card__price-block {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.v-card__price-original {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-faint);
  text-decoration: line-through;
  margin-bottom: 4px;
}

.v-card__price {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--c-card-price, var(--fg-strong));
  letter-spacing: -0.03em;
}

.v-card__price--sale { color: var(--warning); }

.v-card__price-poa {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
}

.v-card__view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-card-view, var(--secondary, var(--accent)));
  white-space: nowrap;
  transition: gap var(--t-base) var(--ease-out);
}

.v-card:hover .v-card__view {
  gap: 8px;
}

.v-card__view svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sold state */
.v-card--sold .v-card__media { filter: grayscale(0.7) brightness(0.95); }
.v-card--sold::after {
  content: 'SOLD';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--error);
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 28px;
  border: 3px solid var(--error);
  border-radius: 0;
  pointer-events: none;
  z-index: 3;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 16. BENTO GRID — for featured vehicles                                */
/* First card spans 2 columns on desktop                                 */
/* ───────────────────────────────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

.bento > :nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.bento > :nth-child(1) .v-card__media { aspect-ratio: 16 / 11; }
.bento > :nth-child(1) .v-card__title { font-size: 28px; }
.bento > :nth-child(1) .v-card__price { font-size: 28px; }

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > :nth-child(1) { grid-column: span 2; grid-row: auto; }
  .bento > :nth-child(1) .v-card__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento > :nth-child(1) { grid-column: auto; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 17. PROCESS — sticky scroll story                                     */
/* ───────────────────────────────────────────────────────────────────── */

.process {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-20);
  align-items: start;
}

.process__sticky {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.process__steps {
  display: flex;
  flex-direction: column;
}

/* Editorial steps — no boxes, just hairline dividers + ghost numbers */
.process__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border);
  background: transparent;
  border-radius: 0;
  align-items: start;
  transition: border-top-color var(--t-base) var(--ease-out);
}

.process__step:last-child {
  border-bottom: 1px solid var(--border);
}

.process__step:hover {
  border-top-color: var(--accent);
  box-shadow: none;
}

/* Ghost outline numbers — premium editorial technique */
.process__num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: none;
  width: auto;
  height: auto;
  display: block;
  padding-top: 4px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border-strong);
  transition: -webkit-text-stroke-color var(--t-base) var(--ease-out);
}

.process__step:hover .process__num {
  -webkit-text-stroke-color: var(--accent);
}

.process__step h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}

.process__step p {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin-top: 0;
}

@media (max-width: 920px) {
  .process { grid-template-columns: 1fr; gap: var(--s-10); }
  .process__sticky { position: static; }
  .process__step { grid-template-columns: 44px 1fr; gap: var(--s-4); }
  .process__num { font-size: 36px; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 18. PULL QUOTE                                                        */
/* ───────────────────────────────────────────────────────────────────── */

/* Left-aligned editorial pull quote — accent left bar, no centered cliché */
.quote {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-left: var(--s-8);
  border-left: 4px solid var(--accent);
}

/* Hide the big decorative " — the border does the job cleanly */
.quote__mark { display: none; }

.quote__body {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.28;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
}

.quote__attr {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-direction: row;
}

.quote__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-strong);
}

.quote__role {
  font-size: 13px;
  color: var(--fg-muted);
}

.quote__attr::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--fg-faint);
  flex-shrink: 0;
}

/* Review grid — unified surface via gap:1px, not separate cards */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--s-10);
}

.review {
  padding: var(--s-5);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: none;
  border-radius: 0;
  transition: background var(--t-fast) var(--ease-out);
}

.review:hover { background: var(--bg-muted); }

.review__stars {
  display: inline-flex;
  gap: 2px;
  color: #d97706;  /* amber — warm gold, not harsh yellow */
}

.review__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg);
  flex: 1;
}

.review__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: var(--s-1);
}

/* ───────────────────────────────────────────────────────────────────── */
/* 19. SPLIT FEATURE — finance + trade-in                                */
/* ───────────────────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
}

.split__card {
  position: relative;
  padding: var(--s-10);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
}

.split__card--accent {
  background: var(--fg-strong);
  color: #fafafa;
}

.split__card--muted {
  background: var(--bg-muted);
  color: var(--fg-strong);
  border: 1px solid var(--border);
}

.split__card h3 {
  color: inherit;
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 8px;
}

.split__card p {
  color: inherit;
  opacity: 0.78;
  font-size: 15px;
  max-width: 28ch;
}

.split__card .btn {
  align-self: flex-start;
  margin-top: var(--s-6);
}

.split__card--accent .btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.split__card--accent .btn-primary:hover {
  background: var(--accent-hover);
}

/* Precise geometric corner — not a blob */
.split__card--accent::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 140px;
  height: 140px;
  background: var(--accent);
  opacity: 0.22;
  transform: rotate(12deg);
  pointer-events: none;
}

@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; }
  .split__card { padding: var(--s-8); min-height: 280px; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 20. CTA STRIP                                                         */
/* ───────────────────────────────────────────────────────────────────── */

.cta-strip {
  padding: var(--s-16) var(--s-8);
  background: var(--fg-strong);
  color: #fafafa;
  position: relative;
  overflow: hidden;
}

/* Dot-grid texture — mirrors the hero for page-level coherence */
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(250,250,249,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

.cta-strip__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-12);
}

.cta-strip__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.cta-strip h2 {
  color: inherit;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cta-strip p {
  color: rgba(250, 250, 249, 0.65);
  font-size: 16px;
  max-width: 44ch;
}

.cta-strip__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex-shrink: 0;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .cta-strip__inner {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .cta-strip__actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .cta-strip { padding: var(--s-12) var(--s-6); }
}

/* (duplicate ::before removed — dot-grid version above is used) */

.cta-strip .btn-accent {
  font-size: 16px;
  padding: 18px 32px;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 21. FOOTER                                                            */
/* ───────────────────────────────────────────────────────────────────── */

.footer {
  /* No margin-top: page-builder sections already pad themselves top and
     bottom, and this block has its own padding-top below. An extra outer
     margin here was redundant whitespace most of the time, and broke full-
     bleed colour sections (e.g. a dark closing CTA banner) meeting the
     footer — the page's actual background would show through the gap
     between two sections that were meant to read as one continuous block. */
  padding-block: var(--s-16) var(--s-6);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}

.footer__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-6);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-10);
}

@media (max-width: 920px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
@media (max-width: 540px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--s-8); }
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
}

.footer__brand:hover { opacity: 0.75; }

.footer__logo {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__tag {
  color: var(--fg-muted);
  font-size: 15px;
  max-width: 32ch;
  line-height: 1.5;
}

.footer__col h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  margin-bottom: var(--s-4);
}

.footer__col a, .footer__col li {
  color: var(--fg);
  font-size: 14.5px;
  line-height: 2.0;
  transition: color var(--t-fast) var(--ease-out);
}

.footer__col a:hover {
  color: var(--accent);
}

.footer__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  padding: 4px 0;
}

.footer__contact .icon {
  color: var(--fg-subtle);
  width: 16px; height: 16px;
}

.footer__bottom {
  max-width: var(--w-content);
  margin: var(--s-12) auto 0;
  padding: var(--s-6) var(--s-6) 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 13px;
  color: var(--fg-subtle);
  flex-wrap: wrap;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 22. INVENTORY PAGE                                                    */
/* ───────────────────────────────────────────────────────────────────── */

/* Compact hero for interior pages */
.page-hero--sm { min-height: 0; padding: var(--s-12) 0 var(--s-8); }
.page-hero--sm h1 { font-size: clamp(28px, 4vw, 40px); }

/* ── Full-bleed sidebar + content layout ── */
.inv {
  display: grid;
  /* --sb-w is set/cleared by JS for collapse animation; default 300px */
  grid-template-columns: var(--sb-w, 300px) 1fr;
  /* NO align-items:start here — grid cells must stretch so sticky works */
  border-top: 1px solid var(--border);
  min-height: calc(100dvh - 180px); /* fill below hero */
  transition: grid-template-columns 320ms var(--ease-out);
}

/* Right sidebar — reorder items, flip border */
.inv--sb-right {
  grid-template-columns: 1fr var(--sb-w, 300px);
}
.inv--sb-right .inv__filters {
  order: 2;
  border-right: none;
  border-left: 1px solid var(--border);
}
.inv--sb-right .inv__main {
  order: 1;
}
/* Flip the collapse chevron for right sidebar */
.inv--sb-right .inv__sb-collapse svg {
  transform: rotate(180deg);
}
/* Flip the expand chevron for right sidebar */
.inv--sb-right .inv__sb-expand svg {
  transform: rotate(180deg);
}

/* Inside sidebar: column count driven by --inv-cols CSS variable (set from PHP/admin) */
@media (min-width: 921px) {
  .inv .v-grid {
    grid-template-columns: repeat(var(--inv-cols, 3), 1fr);
  }
}

@media (max-width: 920px) {
  .inv { grid-template-columns: 1fr; border-top: none; }
  .inv .v-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .inv .v-grid { grid-template-columns: 1fr; }
}

/* Mobile bar strip — shown only on small screens, sticky below nav */
.inv-mobile-strip {
  display: none;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: rgba(250,250,249,0.9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  position: sticky;
  top: 72px;   /* matches nav height */
  z-index: var(--z-sticky);
}
@media (max-width: 920px) {
  .inv-mobile-strip { display: block; }
}

/* Backdrop overlay behind the sidebar drawer on mobile */
.inv-drawer-backdrop {
  display: none;
}
@media (max-width: 920px) {
  .inv-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: rgba(12, 10, 9, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease-out);
  }
  .inv-drawer-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Mobile bar (filter open + view toggle) ── */
.inv-mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.inv-mobile-bar__right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Filter count badge */
.inv-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* ── Sidebar ── */
.inv__filters {
  /* Sticky full-height panel */
  position: sticky;
  top: 72px;           /* below nav */
  height: calc(100dvh - 72px);
  overflow-x: hidden;  /* clips content during collapse animation */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;

  /* Appearance: flush panel, right border only */
  background: var(--c-sb-bg, var(--bg-elevated));
  border-right: 1px solid var(--border);
  transition: border-color 320ms var(--ease-out);
}

/* When collapsed: hide the border so there's no 1px ghost line */
.inv--sb-collapsed .inv__filters {
  border-right-color: transparent;
}
.inv--sb-right.inv--sb-collapsed .inv__filters {
  border-left-color: transparent;
}

.inv__filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 2;
}

.inv__filters-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}

.inv__filters-close {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  color: var(--fg-muted);
}
.inv__filters-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* Desktop sidebar collapse button (shown in sidebar header) */
.inv__sb-collapse {
  /* Visible at every width — on mobile this is the drawer's close button, on
     desktop it collapses the sidebar to the floating dock. Same action, two
     icons (see below), swapped per breakpoint since neither reads right in
     the other context (a chevron doesn't say "close" in a fullscreen overlay,
     an X doesn't say "collapse to the edge" in an inline column). */
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  color: var(--fg-muted);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  flex-shrink: 0;
}
.inv__sb-collapse:hover {
  background: var(--bg-muted);
  color: var(--fg-strong);
}
.inv__sb-collapse svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
.inv__sb-collapse .sb-collapse-icon--mobile { display: none; }
@media (max-width: 920px) {
  .inv__sb-collapse .sb-collapse-icon--desktop { display: none; }
  .inv__sb-collapse .sb-collapse-icon--mobile  { display: block; }
}

/* ─── Expand tab — visible in main area when sidebar is collapsed ─────── */
/*
 * Design notes:
 *  • background: --accent  →  impossible to miss, no animation needed to spot it
 *  • display: flex + width: fit-content  →  block-level so position:sticky fires
 *  • box-shadow ring uses rgba() not var(--accent)→transparent, which avoids
 *    the grey-fade interpolation bug in older Chrome/Edge builds
 */
.inv__sb-expand {
  display: none;                       /* shown via media query below */
  width: fit-content;
  position: sticky;
  top: calc(72px + var(--s-4));
  z-index: 5;
  align-self: start;

  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 14px;

  background: var(--accent);           /* solid accent — obvious at a glance */
  color: var(--accent-fg);
  border: none;

  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: var(--s-4);

  animation:
    sb-breathe 2.6s ease-in-out         infinite,
    sb-ring    2.2s ease-out      0.6s  infinite;

  transition: background var(--t-fast) var(--ease-out);
}

.inv__sb-expand:hover {
  background: var(--accent-hover);
  animation-play-state: paused;
}

.inv__sb-expand svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-out);
}
.inv__sb-expand:hover svg {
  transform: translateX(3px);
}

/*
 * Breathe — 15% scale is obvious on any button size.
 * transform-origin defaults to center so the button expands
 * symmetrically — text moves with it, confirming it's "alive".
 */
@keyframes sb-breathe {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.15); }
}

/*
 * Sonar ring — accent-coloured halo expands outward and fades.
 *
 * color-mix(in srgb, var(--accent) 50%, transparent) produces
 * the accent at half opacity without any grey-shift. Supported in
 * Chrome 111+, Edge 111+, Firefox 113+ (all evergreen since 2023).
 *
 * Fallback for older browsers: the rgba(0,0,0,…) layer still fires,
 * giving a dark grey ring that's clearly visible on any background.
 */
@keyframes sb-ring {
  0% {
    box-shadow:
      0 0 0  0   rgba(0, 0, 0, 0.22),
      0 0 0  0   color-mix(in srgb, var(--accent) 55%, transparent);
  }
  70% {
    box-shadow:
      0 0 0 18px rgba(0, 0, 0, 0),
      0 0 0 22px color-mix(in srgb, var(--accent)  0%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 18px rgba(0, 0, 0, 0),
      0 0 0 22px color-mix(in srgb, var(--accent)  0%, transparent);
  }
}

/* Show expand button when sidebar is collapsed (desktop only) */
@media (min-width: 921px) {
  .inv--sb-collapsed .inv__sb-expand { display: flex; }
}

/* Right sidebar — button floats to the right of the content area */
.inv--sb-right .inv__sb-expand {
  margin-left: auto;
}

.inv__clear-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.inv__clear-link:hover { text-decoration: underline; }

.inv__filter-form {
  padding: 0 22px 24px;
}

/* Mobile: sidebar becomes full-screen slide-in drawer */
@media (max-width: 920px) {
  .inv__filters {
    position: fixed;
    inset: 0;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform 320ms var(--ease-out);
    overflow-y: auto;
    border-right: none;
  }
  .inv__filters.is-open {
    transform: translateX(0);
  }
  .inv__filters-close { display: flex; }
}

/* ── Collapsible filter sections ── */
.filter-section {
  border-bottom: 1px solid var(--border);
  padding: 2px 0;
}
.filter-section:last-of-type { border-bottom: none; }

.filter-section__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 12px 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-align: left;
}
.filter-section__head:hover { color: var(--fg-strong); }

.filter-chevron {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--ease-out);
  flex-shrink: 0;
}

.filter-section.is-closed .filter-chevron {
  transform: rotate(-90deg);
}

.filter-section__body {
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-section.is-closed .filter-section__body {
  display: none;
}

/* ── Individual filter group ── */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 150ms;
}

.filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ── Body type chips ── */
.body-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.body-chip-wrap input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.body-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1.5px solid var(--c-sb-btn, var(--border));
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-sb-btn, var(--fg-muted));
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  transition: all 150ms var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.body-chip:hover {
  border-color: var(--c-sb-hover, var(--fg-muted));
  color: var(--c-sb-hover, var(--fg-strong));
}
.body-chip--any { font-size: 12px; color: var(--fg-faint); }

.body-chip-wrap input[type="radio"]:checked + .body-chip {
  background: var(--c-sb-active, var(--fg-strong));
  border-color: var(--c-sb-active, var(--fg-strong));
  color: var(--bg);
  font-weight: 600;
}

/* ── Radio pills (transmission, fuel) ── */
.radio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.radio-pills > div {
  display: contents;
}

.radio-pills input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.radio-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1.5px solid var(--c-sb-btn, var(--border));
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-sb-btn, var(--fg-muted));
  cursor: pointer;
  transition: all 150ms var(--ease-out);
  white-space: nowrap;
}
.radio-pill:hover {
  border-color: var(--c-sb-hover, var(--fg-muted));
  color: var(--c-sb-hover, var(--fg-strong));
}

.radio-pills input[type="radio"]:checked + .radio-pill {
  background: var(--c-sb-active, var(--fg-strong));
  border-color: var(--c-sb-active, var(--fg-strong));
  color: var(--bg);
  font-weight: 600;
}

/* ── Range pair (year / price inputs) ── */
.range-pair {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.range-pair .input { flex: 1; min-width: 0; }
.range-sep {
  font-size: 14px;
  color: var(--fg-faint);
  flex-shrink: 0;
}

/* ── Price preset buttons ── */
.price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.price-preset {
  padding: 5px 10px;
  background: none;
  border: 1.5px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}
.price-preset:hover { border-color: var(--fg-muted); color: var(--fg-strong); }
.price-preset.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-soft-fg);
  font-weight: 600;
}

/* ── Feature chips ── */
.feature-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feature-cat__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.feat-chip-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.feat-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1.5px solid var(--c-sb-btn, var(--border));
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-sb-btn, var(--fg-muted));
  cursor: pointer;
  transition: all 150ms;
}
.feat-chip:hover {
  border-color: var(--c-sb-hover, var(--fg-muted));
  color: var(--c-sb-hover, var(--fg-strong));
}

.feat-chip-wrap input[type="checkbox"]:checked + .feat-chip {
  background: var(--c-sb-active, var(--fg-strong));
  border-color: var(--c-sb-active, var(--fg-strong));
  color: var(--bg);
  font-weight: 600;
}

/* ── Active filter chips — removable pills at top of sidebar ── */
.filter-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 22px 6px;
}

.filter-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 10px;
  background: var(--accent-soft);
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-soft-fg);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms var(--ease-out),
              border-color 150ms var(--ease-out),
              color 150ms var(--ease-out);
  white-space: nowrap;
}

.filter-active-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.filter-active-chip__x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.55;
}

.filter-active-chip:hover .filter-active-chip__x {
  opacity: 1;
}

/* Active indicator dot on section headers */
.fs-active-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 5px;
  border-radius: 0 !important;
  flex-shrink: 0;
}

/* Count badges inside filter option chips */
.body-chip__count,
.radio-pill-count,
.feat-chip__count {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: var(--fg-faint);
  margin-left: 3px;
  flex-shrink: 0;
}

/* Count inherits inverted colour when parent chip is selected */
.body-chip-wrap input[type="radio"]:checked + .body-chip .body-chip__count,
.radio-pills input[type="radio"]:checked + .radio-pill .radio-pill-count,
.feat-chip-wrap input[type="checkbox"]:checked + .feat-chip .feat-chip__count {
  color: var(--bg);
  opacity: 0.65;
}

/* Apply arrow button (year / price range) */
.range-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  align-self: stretch;
  background: var(--fg-strong);
  color: var(--bg);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms var(--ease-out);
}

.range-apply:hover {
  background: var(--accent);
}

.range-apply svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Brief loading cursor while filter navigation fires */
body.is-filtering { cursor: progress; }

/* ── Main content area ── */
.inv__main {
  padding: var(--s-6) var(--s-8) var(--s-20);
  min-width: 0; /* prevent grid blowout */
}

.inv__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.inv__count {
  font-size: 14px;
  color: var(--fg-muted);
}
.inv__count strong {
  color: var(--fg-strong);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 15px;
}

.inv__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* View toggle */
.inv__view-toggle {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 3px;
}

.inv__view-btn {
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--fg-faint);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease-out);
}
.inv__view-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
}
.inv__view-btn:hover { color: var(--fg-strong); }
.inv__view-btn.is-active {
  background: var(--fg-strong);
  color: var(--bg);
}

/* ── List view ── */
.v-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v-list-item {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  transition: border-top-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.v-list-item:hover {
  border-top-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.v-list-item__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-muted);
}
.v-list-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.v-list-item__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

.v-list-item__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary, var(--fg-subtle));
}

.v-list-item__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  line-height: 1.1;
}

.v-list-item__trim {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
}

.v-list-item__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.v-list-item__specs span::before {
  content: '';
}

.v-list-item__price {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  border-left: 1px solid var(--border);
  gap: 8px;
  min-width: 160px;
}

.v-list-item__price-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--fg-strong);
}

.v-list-item__poa {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
}

.v-list-item__view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.v-list-item__view svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 860px) {
  .v-list-item { grid-template-columns: 160px 1fr; }
  .v-list-item__price {
    grid-column: span 2;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .v-list-item { grid-template-columns: 120px 1fr; }
}

/* Empty state */
.empty {
  padding: var(--s-20) var(--s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
  background: var(--bg-muted);
  display: grid;
  place-items: center;
  color: var(--fg-subtle);
}

/* Pagination */
.pager {
  margin-top: var(--s-12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.pager a, .pager span {
  min-width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: all var(--t-fast) var(--ease-out);
}

.pager a:hover {
  border-color: var(--border-strong);
  color: var(--fg-strong);
}

.pager .is-current {
  background: var(--fg-strong);
  color: var(--bg);
  border-color: var(--fg-strong);
}

/* Infinite scroll loader — three bouncing dots */
.scroll-loader {
  display: none; /* shown via JS */
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: var(--s-8) 0;
}
.scroll-loader.is-visible { display: flex; }
.scroll-loader__dot {
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 0;
  animation: scroll-bounce 0.6s var(--ease-out) infinite alternate;
}
.scroll-loader__dot:nth-child(2) { animation-delay: 0.15s; }
.scroll-loader__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes scroll-bounce {
  from { transform: translateY(0);    opacity: 0.35; }
  to   { transform: translateY(-8px); opacity: 1; }
}

.scroll-sentinel {
  height: 1px;
  margin-top: var(--s-5);
}

/* End-of-results marker */
.scroll-end {
  display: none;
  text-align: center;
  padding: var(--s-8) 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.scroll-end.is-visible { display: block; }

/* ───────────────────────────────────────────────────────────────────── */
/* 23. VEHICLE DETAIL                                                    */
/* ───────────────────────────────────────────────────────────────────── */

.vd {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-10);
  margin-top: var(--s-8);
}

@media (max-width: 920px) {
  .vd { grid-template-columns: 1fr; gap: var(--s-8); }
}

.vd__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0; /* allow this grid column to shrink below its content's natural width so .vd__thumbs can scroll instead of overflowing the page */
}

.vd__hero-img {
  aspect-ratio: 16 / 11;
  background: var(--accent-soft);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  /* Reveals arrows on hover (desktop) */
  --arrow-op: 0;
}

.vd__hero-img:hover { --arrow-op: 1; }

.vd__hero-img img {
  width: 100%; height: 100%;
  object-fit: contain;   /* show full vehicle, no cropping */
  background: var(--bg-muted);
  cursor: zoom-in;
  transition: opacity 120ms ease-out;
}

/* Prev / Next arrow buttons */
.vd__gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(9,9,11,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fafaf9;
  border: 1px solid rgba(255,255,255,0.12);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  /* Hidden on desktop until hover; always visible on touch */
  opacity: var(--arrow-op, 0);
}

.vd__gallery-arrow:hover  { background: rgba(9,9,11,0.80); }
.vd__gallery-arrow:active { transform: translateY(-50%) scale(0.93); }

.vd__gallery-arrow--prev { left: var(--s-3); }
.vd__gallery-arrow--next { right: var(--s-3); }

/* Touch devices: always show arrows */
@media (pointer: coarse) {
  .vd__hero-img { --arrow-op: 1; }
}

.vd__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-2);
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px; /* keep scrollbar clear of thumb border */
}

.vd__thumb {
  flex: 0 0 auto;
  width: clamp(64px, 11vw, 88px);
  aspect-ratio: 4 / 3;
  background: var(--accent-soft);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.65;
  scroll-snap-align: start;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.vd__thumb.is-active { opacity: 1; }
.vd__thumb:hover { opacity: 1; transform: scale(1.02); }
.vd__thumb img { width: 100%; height: 100%; object-fit: cover; }

.vd__info {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

@media (max-width: 920px) {
  .vd__info { position: static; }
}

.vd__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.vd__price strong {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  line-height: 1;
}

.vd__price-monthly {
  font-size: 14px;
  color: var(--fg-muted);
}

.vd__quick-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--bg-muted);
  border-radius: 0;
  font-size: 14px;
}

.vd__quick-specs > div { display: flex; gap: 8px; align-items: center; }
.vd__quick-specs strong { color: var(--fg-strong); font-weight: 600; }
.vd__quick-specs .icon { color: var(--fg-subtle); }

.vd__cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.vd__cta-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

/* Full spec table — no boxy cards */
.vd-specs {
  margin-top: var(--s-16);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}

.vd-specs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.vd-specs__row dt {
  color: var(--fg-muted);
  font-weight: 500;
}

.vd-specs__row dd {
  color: var(--fg-strong);
  font-weight: 600;
  text-align: right;
  margin: 0;
}

@media (max-width: 768px) {
  .vd-specs { grid-template-columns: 1fr; }
}

/* ─── VD action buttons ───────────────────────────────────────────── */
.vd__action-btns {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.vd__action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

@media (max-width: 400px) {
  .vd__action-row { grid-template-columns: 1fr; }
}

/* ─── VD banners ──────────────────────────────────────────────────── */
.vd__success-banner,
.vd__error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
  margin-bottom: var(--s-2);
}

.vd__success-banner {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success);
}

.vd__error-banner {
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-color: color-mix(in srgb, var(--error) 30%, transparent);
  color: var(--error);
}

/* ─── VD share row ────────────────────────────────────────────────── */
.vd__share {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.vd__share-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  flex-shrink: 0;
}

.vd__share-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  font-size: 0;        /* kill any stray text */
  flex-shrink: 0;
}

.share-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.share-btn:active { transform: scale(0.94); }

/* Copied state for copy-link button */
.share-btn.copied {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.vd__share-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 var(--s-1);
  flex-shrink: 0;
}

/* ─── VD modal system ─────────────────────────────────────────────── */
.vd-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  align-items: flex-end;     /* panel slides up from bottom on mobile */
  justify-content: center;
}

.vd-modal.is-open {
  display: flex;
}

@media (min-width: 640px) {
  .vd-modal { align-items: center; }
}

.vd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.vd-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  width: 100%;
  max-width: 540px;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
}

@media (max-width: 639px) {
  .vd-modal__panel {
    max-height: 94dvh;
    border-bottom: none;
  }
}

.vd-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 2;
}

.vd-modal__head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.015em;
  margin: 0;
}

.vd-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.vd-modal__close:hover {
  background: var(--bg-muted);
  color: var(--fg);
}

.vd-modal__body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow-y: auto;
}

.vd-modal__vehicle {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.vd-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.vd-modal__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

@media (max-width: 480px) {
  .vd-modal__grid2 { grid-template-columns: 1fr; }
}

/* Finance tab switcher */
.vd-modal__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--s-2);
}

.vd-modal__tab {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-muted);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.vd-modal__tab:last-child { border-right: none; }

.vd-modal__tab.is-active {
  background: var(--accent);
  color: var(--accent-fg);
}

.vd-modal__tab:hover:not(.is-active) {
  background: var(--bg-elevated);
  color: var(--fg);
}

/* Confirmation / notice banner inside modal */
.vd-modal__notice {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--fg);
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Success message inside modal */
.vd-modal__success {
  padding: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}

/* Error message inside modal */
.vd-modal__error {
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
}

/* Section divider label inside modal (Income / Expenses groups) */
.vd-modal__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-top: var(--s-2);
}

/* Live affordability indicator */
.vd-modal__affordability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--success) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 22%, transparent);
  gap: var(--s-3);
}

.vd-modal__afford-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-muted);
}

.vd-modal__afford-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--success);
}

.vd-modal__afford-value.is-negative {
  color: var(--error);
}

/* Print is handled by /vehicle-brochure — no print styles needed in site.css */

/* ───────────────────────────────────────────────────────────────────── */
/* 24. ABOUT PAGE                                                        */
/* ───────────────────────────────────────────────────────────────────── */

.zigzag {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}

.zigzag__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}

.zigzag__row:nth-child(even) .zigzag__media { order: -1; }

.zigzag__media {
  aspect-ratio: 4 / 3;
  background: var(--accent-soft);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.zigzag__media img { width: 100%; height: 100%; object-fit: cover; }

.zigzag__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (max-width: 768px) {
  .zigzag__row { grid-template-columns: 1fr; gap: var(--s-6); }
  .zigzag__row:nth-child(even) .zigzag__media { order: 0; }
}

/* Team grid (no boxy cards) */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-8);
}

.team__member {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.team__avatar {
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
}

.team__avatar img { width: 100%; height: 100%; object-fit: cover; }

.team__avatar-fallback {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-soft-fg);
  letter-spacing: -0.02em;
}

.team__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}

.team__role {
  font-size: 13.5px;
  color: var(--fg-muted);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--secondary), var(--border));
}

.timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(var(--s-10) * -1 + 1px);
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--secondary);
  border: 2px solid var(--secondary);
}

.timeline__year {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary, var(--accent-soft-fg));
}

.timeline__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.015em;
}

.timeline__body {
  font-size: 15px;
  color: var(--fg-muted);
  max-width: 60ch;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 25. CONTACT PAGE                                                      */
/* ───────────────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-10);
  margin-top: var(--s-8);
}

@media (max-width: 920px) {
  .contact { grid-template-columns: 1fr; }
}

.contact__map {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact__form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (max-width: 768px) {
  .contact__map { aspect-ratio: 16 / 11; }
  .contact__form { padding: var(--s-6); }
}

.contact__info {
  margin-top: var(--s-12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
}

.contact__info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--s-3);
  border-right: 1px solid var(--border);
}

.contact__info-item:last-child { border-right: none; }

.contact__info-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.contact__info-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-strong);
}

@media (max-width: 720px) {
  .contact__info { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .contact__info-item:nth-child(even) { border-right: none; }
}
@media (max-width: 420px) {
  .contact__info { grid-template-columns: 1fr; }
  .contact__info-item { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: var(--s-3); }
  .contact__info-item:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 26. UTILITIES                                                         */
/* ───────────────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }


/* ═══ ZERO RADIUS GLOBAL LOCK — overrides everything ═══ */
*, *::before, *::after { border-radius: 0 !important; }

/* ══════════════════════════════════════════════════════════
   VEHICLE GALLERY LIGHTBOX
   ══════════════════════════════════════════════════════════ */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(9,9,11,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.lb-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lb-img-wrap {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img-wrap img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  transition: opacity 150ms ease-out;
}
.lb-img-wrap img.is-loading { opacity: 0; }

/* Close button */
.lb-close {
  position: fixed;
  top: 16px; right: 20px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fafafa;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms;
  line-height: 1;
  border-radius: 0 !important;
}
.lb-close:hover { background: rgba(255,255,255,0.22); }

/* Prev / Next */
.lb-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 64px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fafafa;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms, opacity 150ms;
  border-radius: 0 !important;
}
.lb-nav:hover { background: rgba(255,255,255,0.22); }
.lb-nav.is-hidden { opacity: 0; pointer-events: none; }
.lb-nav--prev { left: 16px; }
.lb-nav--next { right: 16px; }

/* Counter */
.lb-counter {
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}

/* Thumbnail strip in lightbox */
.lb-thumbs {
  position: fixed;
  bottom: 44px; left: 50%; transform: translateX(-50%);
  display: flex;
  gap: 6px;
  max-width: 90vw;
  overflow-x: auto;
  padding: 4px;
}
.lb-thumb {
  width: 52px; height: 38px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity 150ms, border-color 150ms;
  flex-shrink: 0;
}
.lb-thumb.is-active {
  opacity: 1;
  border-color: #fafafa;
}
.lb-thumb:hover { opacity: 0.8; }

/* ============================================================================
   Page Builder Blocks
   ============================================================================ */

/* Block zone */
.pb-zone {
  width: 100%;
}
.pb-empty-zone {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--s-8) var(--s-4);
}
.pb-empty-hint {
  border: 2px dashed var(--border);
  padding: var(--s-6);
  text-align: center;
  font-size: 13px;
  color: var(--fg-muted);
}

/* Individual block wrapper */
.pb-block {
  position: relative;
}

/* Edit-mode block control bar — sits INSIDE the block at the top.
   No absolute positioning above the block boundary, so moving the mouse
   up to click the buttons never leaves the hover zone. */
.pb-block-bar {
  width: 100%;
  height: 32px;
  background: #1f6feb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 500;
  opacity: 0;
  transition: opacity 120ms;
  pointer-events: none;
  user-select: none;
  /* Drag handle cursor on the bar itself */
  cursor: grab;
}
.pb-block-bar:active { cursor: grabbing; }
.pb-block:hover .pb-block-bar,
.pb-block.pb-dragging .pb-block-bar {
  opacity: 1;
  pointer-events: all;
}
/* Drag-over target highlight */
.pb-block.pb-drag-over {
  outline: 2px dashed #1f6feb;
  outline-offset: 2px;
}
.pb-block-type {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pb-block-actions { display: flex; gap: 4px; }
.pb-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
  border-radius: 3px;
  transition: background .12s;
}
.pb-btn:hover { background: rgba(255,255,255,.3); }
.pb-delete:hover { background: #da3633; }

/* Block content styles */
.pb-heading {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: var(--s-6) var(--s-4) var(--s-2);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}

.pb-paragraph {
  max-width: var(--w-prose);
  margin-inline: auto;
  padding: var(--s-4) var(--s-4);
  font-size: 16px;
  line-height: 1.8;
  color: var(--fg);
}

.pb-image {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
}
.pb-image img {
  width: 100%;
  height: auto;
  display: block;
}
.pb-image figcaption {
  font-size: 12px;
  color: var(--fg-muted);
  text-align: center;
  margin-top: var(--s-2);
}
.pb-image-placeholder {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: var(--s-10) var(--s-4);
  border: 2px dashed var(--border);
  text-align: center;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 14px;
}
.pb-image-placeholder:hover { border-color: #1f6feb; color: #1f6feb; }

.pb-button-wrap {
  display: flex;
  justify-content: center;
  padding: var(--s-6) var(--s-4);
}

.pb-divider {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
  border: none;
}
.pb-divider--line { border-top: 1px solid var(--border); }
.pb-divider--thick { border-top: 3px solid var(--border); }
.pb-divider--accent { border-top: 3px solid var(--accent); }

.pb-spacer--sm { height: var(--s-4); }
.pb-spacer--md { height: var(--s-10); }
.pb-spacer--lg { height: var(--s-16); }
.pb-spacer--xl { height: var(--s-24, 96px); }

/* Grid layouts */
.pb-grid {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
  display: grid;
  gap: var(--s-6);
}
.pb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pb-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .pb-grid-2, .pb-grid-3 { grid-template-columns: 1fr; }
}

.pb-col-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--s-2);
  color: var(--fg);
}
.pb-col-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg);
  margin: 0;
}

/* ── Flexible Columns block ───────────────────────────────────── */
.pb-columns {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
  display: grid;
  gap: var(--s-6);
  /* grid-template-columns set inline from weights */
}
@media (max-width: 768px) {
  .pb-columns { grid-template-columns: 1fr !important; }
}
/* Width control shown in edit mode */
.pb-col-weight-wrap {
  margin-top: var(--s-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pb-col-weight-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1f6feb;
  font-weight: 700;
}
.pb-col-weight {
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #1f6feb;
  background: rgba(31,111,235,.08);
  color: #1f6feb;
  cursor: pointer;
}
.pb-col-add-bar {
  max-width: var(--w-content);
  margin: var(--s-2) auto var(--s-4);
  padding: 0 var(--s-4);
  display: flex;
  gap: 8px;
}

/* ── Section block ────────────────────────────────────────────── */
.pb-section {
  width: 100%;
}
.pb-section--sm { padding: var(--s-6)  var(--s-4); }
.pb-section--md { padding: var(--s-10) var(--s-4); }
.pb-section--lg { padding: var(--s-16) var(--s-4); }
.pb-section--xl { padding: var(--s-24, 96px) var(--s-4); }

.pb-section-inner {
  max-width: var(--w-content);
  margin: 0 auto;
}
.pb-section-heading {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: var(--s-3);
  color: inherit;
  line-height: 1.1;
}
.pb-section-sub {
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto var(--s-6);
  color: inherit;
  opacity: .85;
}
.pb-section-btn-wrap {
  margin-top: var(--s-4);
}
.pb-section-url-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: .5;
  cursor: text;
}
.pb-section-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed rgba(127,127,127,.3);
  font-size: 11px;
  font-weight: 600;
}
.pb-section-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  opacity: .7;
}
.pb-section-controls input[type=color] {
  width: 28px; height: 22px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}
.pb-section-controls select {
  font-size: 11px;
  padding: 2px 4px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(127,127,127,.4);
  color: inherit;
  cursor: pointer;
}

/* ── HTML / Embed block ───────────────────────────────────────── */
.pb-html {
  max-width: var(--w-content);
  margin: var(--s-4) auto;
  padding: 0 var(--s-4);
}
.pb-html-wrap {
  max-width: var(--w-content);
  margin: var(--s-4) auto;
  padding: 0 var(--s-4);
}
.pb-html-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 8px;
}
.pb-html-label {
  font-size: 11px;
  font-weight: 700;
  color: #1f6feb;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pb-html-editor {
  border: 1px solid #1f6feb;
  background: #0d1117;
  padding: 0;
  margin-bottom: 8px;
}
.pb-html-ta {
  width: 100%;
  min-height: 160px;
  background: #0d1117;
  color: #e6edf3;
  border: none;
  padding: 12px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  display: block;
}
.pb-html-actions {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: #161b22;
  border-top: 1px solid #30363d;
}
.pb-html-preview { line-height: 1.6; }
.pb-html-empty {
  color: #8b949e;
  font-size: 13px;
  padding: var(--s-4) 0;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   Page Builder section wrappers (edit mode only)
   ───────────────────────────────────────────────────────────── */
.pb-section-wrap {
  position: relative;
}

/* Drag handle bar
   Display is controlled by JavaScript (mouseenter/mouseleave with delay)
   NOT by CSS :hover — this prevents the bar from disappearing mid-move. */
.pb-section-wrap .pb-drag-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: #1f6feb;
  display: none;           /* JS sets to flex on hover */
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 999;
  cursor: grab;
  user-select: none;
  border-radius: 0;
}
.pb-section-wrap .pb-drag-bar:active { cursor: grabbing; }
/* Always show bar on selected section */
.pb-section-wrap.pb-selected .pb-drag-bar { display: flex !important; }
/* Dim section while dragging */
.pb-section-wrap.pb-dragging { opacity: .5; }

/* Highlight selected section */
.pb-section-wrap.pb-selected {
  outline: 2px solid #1f6feb;
  outline-offset: -2px;
}
.pb-section-wrap:hover:not(.pb-selected) {
  outline: 1px dashed #1f6feb88;
  outline-offset: -1px;
}

/* Drag bar internals */
.pb-drag-label {
  font-size: 11px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 6px;
}
.pb-drag-icon { opacity: .7; font-size: 13px; cursor: grab; }
.pb-drag-actions { display: flex; gap: 3px; }
.pb-drag-btn {
  background: rgba(255,255,255,.15); border: none; color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 7px;
  cursor: pointer; border-radius: 3px; transition: background .1s;
}
.pb-drag-btn:hover { background: rgba(255,255,255,.3); }
.pb-drag-btn.pb-del:hover { background: #da3633; }

/* Ghost/chosen states for SortableJS */
.pb-sortable-ghost   { opacity: .3; background: #1f6feb22 !important; }
.pb-sortable-chosen  { box-shadow: 0 0 0 2px #1f6feb; }
.pb-sortable-drag    { opacity: .9; }

/* ── Hero vehicle slideshow overlay info ───────────────────────── */
.hero-ss__vehicle-info {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 40px 48px; text-decoration: none; color: #fff;
  z-index: 3;
}
.hero-ss__vehicle-inner {
  max-width: 480px;
}
.hero-ss__vehicle-year {
  display: block; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.7); margin-bottom: 6px;
}
.hero-ss__vehicle-name {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -.03em; margin: 0 0 6px; line-height: 1.1;
  color: #fff;
}
.hero-ss__vehicle-variant {
  display: block; font-size: 14px; color: rgba(255,255,255,.75);
  margin-bottom: 12px;
}
.hero-ss__vehicle-price {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700;
  color: #fff; margin-bottom: 20px; letter-spacing: -.01em;
}
.hero-ss__vehicle-cta {
  display: inline-block; padding: 11px 28px;
  background: var(--accent, #1a73e8); color: #fff;
  font-weight: 700; font-size: 14px; letter-spacing: .03em;
  transition: opacity .15s;
}
.hero-ss__vehicle-info:hover .hero-ss__vehicle-cta { opacity: .85; }

/* ── Hero browse link hover effects ───────────────────────────── */
@keyframes pulse-breathing {
  0%,100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(var(--accent-rgb,26,115,232),.4); }
  50%      { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(var(--accent-rgb,26,115,232),0); }
}
.hs-hover-pulse { animation: pulse-breathing 2.5s ease-in-out infinite; }
.hs-hover-lift  { transition: transform .2s; }
.hs-hover-lift:hover { transform: translateY(-2px); }
.hs-hover-glow:hover { box-shadow: 0 4px 16px rgba(0,0,0,.2); }

/* ── Block tree layout helpers ─────────────────────────────────── */
@media (max-width: 768px) {
  .pb-stack-mobile { grid-template-columns: 1fr !important; }
}
.pb-columns { width: 100%; }
.pb-tree-block {
  position: relative;
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition: outline-color .15s;
  /* Fill grid cell height so vehicle showcase / column children display correctly */
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Direct children of .pb-tree-block fill it when it's a grid cell */
.pb-columns > .pb-tree-block { flex: 1; }
.pb-columns > .pb-tree-block > * { flex: 1; min-height: 0; }
body.pb-edit-active .pb-tree-block:hover {
  outline-color: rgba(59,130,246,.45);
}
.pb-tree-block--selected {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 0px;
}
body.pb-edit-active .pb-tree-block:hover > .pb-block-edit-label {
  display: flex;
}
.pb-block-edit-label {
  display: none;
  position: absolute;
  top: 0; left: 0;
  z-index: 9000;
  background: #3b82f6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-bottom-right-radius: 4px;
  pointer-events: none;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pb-btn { display: inline-block; font-weight: 700; text-decoration: none; cursor: pointer; transition: opacity .15s, transform .15s; }
.pb-btn:hover { opacity: .85; }

/* ── Always-on button animation effects ────────────────────────────────── */

/* Breathing glow — gentle pulsing shadow, great for primary CTAs */
.btn-fx-breathe {
  animation: btn-breathe 2.8s ease-in-out infinite;
}
@keyframes btn-breathe {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-soft, rgba(26,115,232,.45)); }
  50%     { box-shadow: 0 0 0 10px transparent; }
}

/* Shimmer — light sweep across the face of the button */
.btn-fx-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-fx-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  animation: btn-shimmer 2.4s linear infinite;
}
@keyframes btn-shimmer {
  0%   { left: -75%; }
  100% { left: 125%; }
}

/* Subtle bounce — gentle up/down, keeps button lively without being annoying */
.btn-fx-bounce {
  animation: btn-bounce 1.6s ease-in-out infinite;
}
@keyframes btn-bounce {
  0%,100% { transform: translateY(0); }
  45%     { transform: translateY(-4px); }
}

/* ── Inventory floating dock — appears when sidebar is collapsed ─── */
.inv-float-dock {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--fg, #0c0a09);
  color: var(--bg, #fafaf9);
  padding: 11px 20px;
  border-radius: 100px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.inv-float-dock__label { opacity: .85; }
.inv-float-dock__chips { font-size: 12px; opacity: .7; }
.inv-float-dock__btn {
  background: var(--accent, #1a73e8);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s;
}
.inv-float-dock__btn:hover { opacity: .85; }

/* The float dock is JS-shown (inline style) only after the sidebar is
   explicitly collapsed on desktop — but on mobile the sidebar starts closed
   by default (it's a fixed slide-out drawer there, see .inv__filters below),
   so the dock needs to be the visible entry point from first load, not only
   after some other action. !important is what it takes to win over that
   inline style at this specific breakpoint. */
@media (max-width: 920px) {
  .inv-float-dock { display: flex !important; }
}

/* Attention pulse — scale + glow combo, strongest draw for urgent CTAs */
.btn-fx-attention {
  animation: btn-attention 1.4s ease-in-out infinite;
}
@keyframes btn-attention {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0 var(--accent-soft, rgba(26,115,232,.5)); }
  50%     { transform: scale(1.04); box-shadow: 0 0 0 8px transparent; }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-fx-breathe, .btn-fx-bounce, .btn-fx-attention { animation: none; }
  .btn-fx-shimmer::after { animation: none; left: 125%; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* VEHICLE CARD HOVER ANIMATIONS — page-builder "Hover animation" setting */
/* (Vehicles / Inventory Grid blocks). One effect class per card, chosen  */
/* by the dealer; .vcard-fx--tilt's transform is driven by JS (site      */
/* interactions script) since it tracks cursor position.                 */
/* ───────────────────────────────────────────────────────────────────── */
.vcard-fx {
  transition: transform 340ms cubic-bezier(.22,1,.36,1), box-shadow 340ms cubic-bezier(.22,1,.36,1);
}

.vcard-fx--lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.28);
}

.vcard-fx--zoom img { transition: transform 520ms cubic-bezier(.22,1,.36,1); }
.vcard-fx--zoom:hover img { transform: scale(1.08); }
.vcard-fx--zoom:hover { box-shadow: 0 16px 32px -12px rgba(0,0,0,.2); }

.vcard-fx--glow:hover {
  box-shadow: 0 0 0 2px var(--accent, #1a73e8),
              0 20px 40px -14px color-mix(in srgb, var(--accent, #1a73e8) 45%, transparent);
}

/* Tilt: box-shadow eases via CSS; the rotate/scale transform itself is set
   directly by JS on mousemove for continuous cursor tracking, so its own
   transition is faster (120ms) to feel responsive rather than laggy. */
.vcard-fx--tilt { transition: transform 120ms ease-out, box-shadow 340ms ease-out; }
.vcard-fx--tilt:hover { box-shadow: 0 28px 56px -18px rgba(0,0,0,.32); }
.vcard-fx--tilt img { transition: transform 220ms ease-out; }

/* Touch devices have no cursor to hover with, so :hover rules (including the
   JS-driven tilt, which the site interactions script skips entirely there)
   never trigger — without this a card on a phone would feel completely
   inert. A tap-and-hold press gives real tactile feedback instead. */
@media (hover: none) {
  .vcard-fx:active { transform: scale(0.97); box-shadow: 0 10px 24px -10px rgba(0,0,0,.24); }
  .vcard-fx--zoom:active img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .vcard-fx,
  .vcard-fx--zoom img,
  .vcard-fx--tilt img { transition: none !important; }
  .vcard-fx--lift:hover,
  .vcard-fx--tilt { transform: none !important; }
}