/* ==========================================================================
   London Short Term Cars — Design System
   Palette: "Capital" — navy, bus red and Big Ben gold. Distinct from both
   Cocoon Vehicles (navy/yellow) and the Short Car Leases sibling brand
   (indigo/mint).
   Author: High Heel Creative
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — "bus red", the primary action colour */
  --brand-50:  #fdecee;
  --brand-100: #fad0d5;
  --brand-200: #f2a3ac;
  --brand-300: #e5717e;
  --brand-400: #d7434f;
  --brand-500: #cf2836;
  --brand-600: #c6162d;   /* primary */
  --brand-700: #9a0f21;
  --brand-800: #740c1a;
  --brand-900: #530a15;

  /* Accent — Big Ben gold, used for EV cues, highlights, "included" ticks */
  --accent-100: #faf1d7;
  --accent-300: #ecd48c;
  --accent-400: #dcbb5a;
  --accent-500: #c9a227;
  --accent-700: #997b1c;
  --accent-900: #5c4a10;

  /* Ink & neutrals — Underground navy */
  --ink:       #0a1937;
  --ink-2:     #10213f;
  --ink-3:     #1c2d4e;
  --text:      #131c30;
  --muted:     #545c74;
  --muted-2:   #767f96;
  --line:      #e3e6f0;
  --line-2:    #eef0f6;
  --mist:      #f5f6fb;
  --mist-2:    #fafbfe;
  --white:     #ffffff;

  /* Signals */
  --success:   #0a7d55;
  --success-bg:#e7f8f1;
  --warn:      #8a5a00;
  --warn-bg:   #fff5e0;
  --danger:    #a52130;
  --whatsapp:  #25d366;
  --whatsapp-d:#128c7e;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --step-1:  clamp(1.18rem, 1.11rem + 0.34vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.28rem + 0.68vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.45rem + 1.20vw, 2.45rem);
  --step-4:  clamp(2.05rem, 1.60rem + 2.10vw, 3.25rem);
  --step-5:  clamp(2.45rem, 1.70rem + 3.40vw, 4.30rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 4.5rem;   --sp-10: 6rem;    --sp-11: 8rem;

  /* Shape */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px;  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(14, 17, 41, 0.06), 0 1px 3px rgba(14, 17, 41, 0.05);
  --sh-2: 0 4px 10px rgba(14, 17, 41, 0.06), 0 2px 6px rgba(14, 17, 41, 0.04);
  --sh-3: 0 14px 34px rgba(14, 17, 41, 0.09), 0 4px 12px rgba(14, 17, 41, 0.05);
  --sh-4: 0 28px 64px rgba(14, 17, 41, 0.14), 0 8px 20px rgba(14, 17, 41, 0.06);
  --sh-brand: 0 12px 30px rgba(198, 22, 45, 0.24);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 480ms;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --wrap-wide: 1400px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Deliberately NOT `scroll-behavior: smooth` here. On the root it also
     animates scroll restoration and focus-driven scrolling, which is how a
     plain link click ends up gliding to the bottom of the page. Smooth
     scrolling is applied per-interaction in site.js instead. */
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); letter-spacing: -0.032em; }
h2 { font-size: var(--step-4); letter-spacing: -0.028em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

strong, b { font-weight: 650; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

small { font-size: var(--step--1); }

button { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* --------------------------------------------------------------------------
   3. Accessibility primitives
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-4);
  z-index: 9999;
  padding: 0.85rem 1.35rem;
  background: var(--ink);
  color: var(--white);
  font-weight: 650;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); }
.wrap--wide { width: min(100% - 2.5rem, var(--wrap-wide)); }

@media (max-width: 600px) {
  .wrap, .wrap--narrow, .wrap--wide { width: calc(100% - 2rem); }
}

.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.section--loose { padding-block: clamp(4rem, 9vw, 8rem); }
.section--mist { background: var(--mist); }
.section--mist-2 { background: var(--mist-2); }
.section--ink { background: var(--ink); color: rgba(255,255,255,0.82); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--white); }
.section--ink a { color: var(--accent-300); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: clamp(1.5rem, 3vw, 3rem); }
.grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(1.75rem, 4vw, 4rem); }

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.center { text-align: center; }
.measure { max-width: 68ch; }
.measure-narrow { max-width: 56ch; }
.center .measure, .center .measure-narrow { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--sp-3);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.section--ink .eyebrow { color: var(--accent-400); }

.lede { font-size: var(--step-1); color: var(--muted); line-height: 1.55; }
.section--ink .lede { color: rgba(255,255,255,0.78); }

.text-muted { color: var(--muted); }
.text-sm { font-size: var(--step--1); }
.text-xs { font-size: var(--step--2); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-600);
  --btn-fg: var(--white);
  --btn-bd: var(--brand-600);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

/* Any icon inside a button is sized relative to the label. Without this an
   SVG carrying no width/height attribute defaults to 300x150px. */
.btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}
.btn--lg svg { width: 1.2em; height: 1.2em; }
.btn--sm svg { width: 1.1em; height: 1.1em; }

/* Same guard for icons in inline links and list items */
.link-arrow svg,
.topbar__list svg,
.footer__contact svg { flex: 0 0 auto; }

.btn--primary { box-shadow: var(--sh-brand); }
.btn--primary:hover { --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); box-shadow: 0 16px 38px rgba(154,15,33,0.34); }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--secondary:hover { --btn-bd: var(--brand-600); --btn-fg: var(--brand-700); background: var(--brand-50); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,0.42); }
.btn--ghost:hover { --btn-bd: var(--white); background: rgba(255,255,255,0.12); }

.btn--accent { --btn-bg: var(--accent-500); --btn-fg: var(--ink); --btn-bd: var(--accent-500); }
.btn--accent:hover { --btn-bg: var(--accent-400); --btn-bd: var(--accent-400); }

.btn--wa { --btn-bg: var(--whatsapp); --btn-fg: #05271a; --btn-bd: var(--whatsapp); }
.btn--wa:hover { --btn-bg: #1fbe5b; --btn-bd: #1fbe5b; }

.btn--sm { min-height: 42px; padding: 0.5rem 1.1rem; font-size: var(--step--1); }
.btn--lg { min-height: 58px; padding: 0.95rem 2rem; font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.center .btn-row { justify-content: center; }

@media (max-width: 460px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 650;
  text-decoration: none;
  color: var(--brand-700);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--t) var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Header & navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,0.72);
  font-size: var(--step--1);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 42px; flex-wrap: wrap;
}
.topbar a { color: rgba(255,255,255,0.88); text-decoration: none; }
.topbar a:hover { color: var(--accent-300); text-decoration: underline; }
.topbar__list { display: flex; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.topbar__list li { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.topbar__note { display: flex; align-items: center; gap: 0.45rem; }
.topbar__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-500);
  box-shadow: 0 0 0 0 rgba(201,162,39,0.6);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201,162,39,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(201,162,39,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}
@media (max-width: 800px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 900;
  /* Near-opaque at all times, not just once scrolled ("is-stuck"). The
     homepage hero sits directly beneath this header and is now a full-height
     dark video background — a more transparent header let that darkness
     bleed through the blur and made the dark nav-link text unreadable
     against it. A touch of translucency plus blur still reads as "glass"
     without sacrificing contrast. */
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--sh-2); background: rgba(255,255,255,0.99); }

.nav {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 40px; height: 40px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display); font-weight: 750; font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.16rem);
  letter-spacing: -0.03em; color: var(--ink);
}
.brand__tag { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }

.nav__list {
  display: flex; align-items: center; gap: 0.15rem;
  margin: 0 auto 0 var(--sp-3); padding: 0; list-style: none;
}
.nav__list > li { margin: 0; position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  color: var(--text); font-weight: 550; font-size: 0.95rem;
  text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--brand-700); background: var(--brand-50); }
.nav__link[aria-current="page"] { color: var(--brand-700); font-weight: 650; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
  height: 2px; border-radius: 2px; background: var(--brand-600);
}
.nav__caret { width: 10px; height: 10px; transition: transform var(--t) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  z-index: 60;
  min-width: 480px;
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.nav__panel[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.nav__panel-grid li { margin: 0; }
.nav__panel-link {
  display: block; padding: 0.65rem 0.8rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--text);
  transition: background var(--t-fast) var(--ease);
}
.nav__panel-link:hover { background: var(--mist); color: var(--brand-700); }
.nav__panel-link strong { display: block; font-size: 0.95rem; font-weight: 650; color: var(--ink); }
.nav__panel-link span { display: block; font-size: var(--step--1); color: var(--muted); line-height: 1.4; margin-top: 1px; }
.nav__panel-foot {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  font-size: var(--step--1);
}

.nav__actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.nav__toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); cursor: pointer;
}
.nav__toggle span {
  position: relative; display: block; width: 20px; height: 2px;
  border-radius: 2px; background: var(--ink);
  transition: background var(--t-fast) var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  border-radius: 2px; background: var(--ink);
  transition: transform var(--t) var(--ease), top var(--t) var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__list, .nav__actions .btn--desktop { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav { min-height: 68px; }
  :root { --header-h: 68px; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 890;
  padding: var(--sp-5) 0 var(--sp-9);
  background: var(--white);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer__group { border-bottom: 1px solid var(--line-2); }
.drawer__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: 1rem 0.25rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 650; color: var(--ink);
  text-align: left; text-decoration: none;
}
.drawer__summary .nav__caret { width: 12px; height: 12px; color: var(--muted); }
.drawer__summary[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.drawer__panel { display: none; padding: 0 0 var(--sp-4) 0.25rem; }
.drawer__panel[data-open="true"] { display: block; animation: fadeUp var(--t) var(--ease); }
.drawer__panel a {
  display: block; padding: 0.6rem 0; color: var(--text); text-decoration: none; font-size: 0.98rem;
}
.drawer__panel a:hover { color: var(--brand-700); }
.drawer__actions { display: grid; gap: 0.6rem; margin-top: var(--sp-5); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem);
  background: var(--ink);
  color: rgba(255,255,255,0.8);
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 720px) {
  /* A full 100vh is too tall on small phones once the on-screen keyboard /
     browser chrome is accounted for — settle for "most of the screen"
     instead of forcing a scroll to reach the fold. */
  .hero { min-height: 82vh; }
}
.hero::before {
  /* Just the accent-colour blobs now, not a solid base — .hero already has
     background: var(--ink) as the solid fallback (used when the video is
     hidden by @media prefers-reduced-motion / narrow-viewport, or hasn't
     loaded yet), and this class is only ever used on the video-backed
     homepage hero, so there is no other case to cover here. */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1000px 520px at 12% -10%, rgba(154,15,33,0.4), transparent 62%),
    radial-gradient(760px 460px at 88% 8%, rgba(201,162,39,0.16), transparent 60%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
}
.hero h1 { color: var(--white); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero--simple .hero__inner { grid-template-columns: minmax(0,1fr); max-width: 860px; }
.hero__lede { font-size: var(--step-1); color: rgba(255,255,255,0.8); max-width: 56ch; }

/* Background video (homepage hero only). Sits behind the existing gradient
   and grid-pattern overlays (z-index -4) so the brand tint and text remain
   legible over any footage. Hidden on narrow viewports and when the visitor
   has requested reduced motion, since an autoplaying video adds weight and
   distraction neither group benefits from — the gradient background alone
   covers those cases. */
.hero__video {
  position: absolute; inset: 0; z-index: -4;
  overflow: hidden;
  background: var(--ink);
}
.hero__video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(10,25,55,.58) 0%, rgba(15,20,50,.5) 55%, rgba(10,20,48,.62) 100%);
}
.hero__video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;      /* 16:9 */
  min-height: 100%; min-width: 177.78vh; /* 16:9 fallback so it always covers */
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
.hero .eyebrow { color: var(--accent-400); }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
}

.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.14);
  list-style: none; padding-left: 0;
}
.hero__trust li {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0; font-size: var(--step--1); color: rgba(255,255,255,0.78);
}
.hero__trust svg { color: var(--accent-400); flex-shrink: 0; }

/* Hero side card */
.hero__card {
  padding: clamp(1.35rem, 2.5vw, 2rem);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-4);
}
.hero__card h2 { font-size: var(--step-2); color: var(--white); }

/* Quick-pick tiles inside hero */
.quickpick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.quickpick li { margin: 0; }
.quickpick a {
  display: flex; flex-direction: column; gap: 0.15rem;
  min-height: 82px; padding: 0.85rem 0.95rem;
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-md);
  background: rgba(255,255,255,0.05);
  color: var(--white); text-decoration: none;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.quickpick a:hover { transform: translateY(-3px); background: rgba(255,255,255,0.12); border-color: var(--accent-400); color: var(--white); }
.quickpick strong { color: var(--white); font-size: 0.98rem; font-weight: 650; }
.quickpick span { font-size: var(--step--2); color: rgba(255,255,255,0.66); line-height: 1.35; }

/* --------------------------------------------------------------------------
   9. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(2.25rem, 5vw, 4rem);
  background: linear-gradient(165deg, #0e1129 0%, #1a2049 60%, #141838 100%);
  color: rgba(255,255,255,0.8);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(720px 380px at 82% 0%, rgba(220,187,90,0.16), transparent 60%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); max-width: 20ch; }
.page-hero .lede { color: rgba(255,255,255,0.78); max-width: 62ch; }
.page-hero .eyebrow { color: var(--accent-400); }

/* Breadcrumbs */
.crumbs { margin-bottom: var(--sp-4); font-size: var(--step--1); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: 0.35rem; color: rgba(255,255,255,0.6); }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,0.35); }
.crumbs a { color: rgba(255,255,255,0.82); text-decoration: none; }
.crumbs a:hover { color: var(--accent-300); text-decoration: underline; }
.crumbs [aria-current="page"] { color: rgba(255,255,255,0.6); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--brand-200); }
.card h3 { font-size: var(--step-1); }
.card > :last-child { margin-top: auto; }
.card__body > :last-child { margin-bottom: 0; }

.card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-700);
}
.card__icon svg { width: 24px; height: 24px; }
.card--accent .card__icon { background: var(--accent-100); color: var(--accent-900); }

.card__link { position: absolute; inset: 0; border-radius: inherit; text-indent: -9999px; overflow: hidden; }
.card__link:focus-visible { outline-offset: -3px; }

.card--feature {
  background: linear-gradient(160deg, var(--brand-600), var(--brand-800));
  border-color: transparent; color: rgba(255,255,255,0.85);
}
.card--feature h3, .card--feature h4 { color: var(--white); }
.card--feature .card__icon { background: rgba(255,255,255,0.14); color: var(--white); }
.card--feature a { color: var(--accent-300); }

/* Stat cards */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-4); }
.stat { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.stat__num { display: block; font-family: var(--font-display); font-size: var(--step-3); font-weight: 750; color: var(--brand-700); letter-spacing: -0.03em; line-height: 1; }
.stat__label { display: block; margin-top: 0.4rem; font-size: var(--step--1); color: var(--muted); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* --------------------------------------------------------------------------
   11. Answer box / key facts (AI citation blocks)
   -------------------------------------------------------------------------- */
.answer {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--brand-200);
  border-left: 5px solid var(--brand-600);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--brand-50), var(--white));
}
.answer__label {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--font-display); font-size: var(--step--2); font-weight: 750;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--brand-700);
}
.answer p { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.answer p:last-child { margin-bottom: 0; }

.keyfacts { margin: 0; padding: 0; }
.keyfacts dl { display: grid; grid-template-columns: minmax(140px, 30%) minmax(0, 1fr); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.keyfacts dt {
  padding: 0.85rem 1rem; background: var(--mist);
  font-weight: 650; font-size: var(--step--1); color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.keyfacts dd {
  margin: 0; padding: 0.85rem 1rem; font-size: var(--step--1);
  border-bottom: 1px solid var(--line);
}
.keyfacts dt:nth-last-of-type(1), .keyfacts dd:nth-last-of-type(1) { border-bottom: 0; }
@media (max-width: 560px) {
  .keyfacts dl { grid-template-columns: minmax(0,1fr); }
  .keyfacts dt { border-bottom: 0; }
}

/* Callout */
.callout {
  padding: 1.1rem 1.35rem;
  border-radius: var(--r-md);
  background: var(--mist);
  border-left: 4px solid var(--brand-400);
  font-size: var(--step--1);
}
.callout--accent { background: var(--success-bg); border-left-color: var(--success); }
.callout--warn { background: var(--warn-bg); border-left-color: #d99500; color: var(--warn); }
.callout strong { color: inherit; }

/* VRM quote tool: number-plate-styled registration field */
.vrm-tool {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(10,20,48,0.08));
}
.vrm-tool h3 { margin: 0 0 .35rem; }
.vrm-tool > p { margin: 0 0 1.1rem; color: var(--text-muted); }
.vrm-tool__form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.vrm-plate {
  display: flex;
  align-items: stretch;
  height: 3.25rem;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #0a0a0a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  flex: 0 0 auto;
}
.vrm-plate__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  background: #003399;
  color: #fff;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
}
.vrm-plate__input {
  width: 11.5rem;
  border: 0;
  background: #ffd633;
  color: #0a0a0a;
  font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
  padding: 0 .5rem;
}
.vrm-plate__input:focus { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.vrm-plate__input::placeholder { color: rgba(10,10,10,0.4); letter-spacing: .06em; }
@media (max-width: 480px) {
  .vrm-plate__input { width: 9.5rem; font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   12. Tick lists & pills
   -------------------------------------------------------------------------- */
.ticks { list-style: none; margin: 0 0 1.1em; padding: 0; display: grid; gap: 0.6rem; }
.ticks li { position: relative; margin: 0; padding-left: 2rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.28em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1129' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ticks--two { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 640px) { .ticks--two { grid-template-columns: minmax(0,1fr); } }

.crosses { list-style: none; margin: 0 0 1.1em; padding: 0; display: grid; gap: 0.6rem; }
.crosses li { position: relative; margin: 0; padding-left: 2rem; color: var(--muted); }
.crosses li::before {
  content: ""; position: absolute; left: 0; top: 0.28em;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e9ecf3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545c74' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pills li { margin: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); color: var(--text);
  font-size: var(--step--1); font-weight: 550; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
a.pill:hover { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-700); }
.pill--accent { background: var(--accent-100); border-color: transparent; color: var(--accent-900); font-weight: 650; }
.pill--brand { background: var(--brand-50); border-color: transparent; color: var(--brand-800); font-weight: 650; }
.pill--ev { background: var(--success-bg); border-color: transparent; color: var(--success); font-weight: 650; }

/* --------------------------------------------------------------------------
   13. Accordions (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.accordion__item + .accordion__item { border-top: 1px solid var(--line); }
.accordion__btn {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  width: 100%; padding: 1.15rem 1.35rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 650; color: var(--ink);
  text-align: left; line-height: 1.4;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.accordion__btn:hover { background: var(--mist); color: var(--brand-700); }
.accordion__btn[aria-expanded="true"] { color: var(--brand-700); }
.accordion__sign {
  position: relative; flex-shrink: 0;
  width: 24px; height: 24px; margin-top: 2px;
  border-radius: 50%; background: var(--brand-50);
}
.accordion__sign::before, .accordion__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2px; border-radius: 2px; background: var(--brand-700);
  transform: translate(-50%, -50%);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.accordion__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__btn[aria-expanded="true"] .accordion__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel-inner { padding: 0 1.35rem 1.3rem; color: var(--muted); }
.accordion__panel-inner > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Steps / process
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.steps--row { grid-template-columns: repeat(4, minmax(0,1fr)); }
.step {
  position: relative; counter-increment: step;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 750;
  color: var(--brand-300); letter-spacing: -0.03em; line-height: 1;
}
.step h3 { font-size: var(--step-1); }
.step p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) { .steps--row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .steps--row { grid-template-columns: minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   15. Comparison table
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.table-scroll table { min-width: 640px; }
.data-table caption { padding: 1rem 1.25rem; text-align: left; font-size: var(--step--1); color: var(--muted); border-bottom: 1px solid var(--line); }
.data-table th, .data-table td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; font-size: var(--step--1); }
.data-table thead th {
  position: sticky; top: 0;
  background: var(--mist); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  border-bottom: 1px solid var(--line);
}
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--mist-2); }
.data-table tbody th { font-weight: 650; color: var(--ink); }
.data-table .yes { color: var(--success); font-weight: 650; }
.data-table .no { color: var(--muted-2); }

/* --------------------------------------------------------------------------
   16. Showroom (vehicle listing)
   -------------------------------------------------------------------------- */
.showroom { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: start; }
@media (max-width: 1000px) { .showroom { grid-template-columns: minmax(0,1fr); } }

.filters {
  position: sticky; top: calc(var(--header-h) + 1rem);
  padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  box-shadow: var(--sh-1);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
}
@media (max-width: 1000px) {
  .filters { position: static; max-height: none; display: none; }
  .filters[data-open="true"] { display: block; }
}

.filters__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.filters__head h2 { margin: 0; font-size: var(--step-1); }

.fgroup { border-top: 1px solid var(--line-2); padding-top: var(--sp-4); margin-top: var(--sp-4); }
.fgroup:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.fgroup > legend, .fgroup__title {
  display: block; width: 100%; padding: 0 0 var(--sp-3);
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.fgroup fieldset { border: 0; margin: 0; padding: 0; }
.fgroup__scroll { max-height: 224px; overflow-y: auto; padding-right: 4px; }

/* A facet that is waiting on another choice — currently Model, which needs a
   manufacturer first. Shown rather than hidden so the option is discoverable. */
.fgroup--waiting > legend { opacity: 0.55; }
.fgroup__hint {
  margin: 0; padding: 0.5rem 0.7rem;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: var(--mist-2);
  color: var(--muted-2); font-size: var(--step--2); line-height: 1.4;
}

.check { display: flex; align-items: center; gap: 0.6rem; padding: 0.32rem 0; cursor: pointer; font-size: 0.93rem; }
.check input {
  width: 18px; height: 18px; flex-shrink: 0; margin: 0;
  accent-color: var(--brand-600); cursor: pointer;
}
.check span { flex: 1; }
.check__count { color: var(--muted-2); font-size: var(--step--2); font-variant-numeric: tabular-nums; }
.check:hover { color: var(--brand-700); }

.field { display: block; margin-bottom: var(--sp-3); }
.field > span { display: block; margin-bottom: 0.35rem; font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.input, .select {
  width: 100%; min-height: 46px; padding: 0.6rem 0.85rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--text); font: inherit; font-size: 0.95rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); outline: none; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545c74' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px;
  padding-right: 2.4rem;
}
textarea.input { min-height: 120px; resize: vertical; padding-top: 0.7rem; }

.range-row { display: flex; align-items: center; gap: 0.6rem; }
.range-row .input { text-align: center; }
input[type="range"] { width: 100%; accent-color: var(--brand-600); }

.showroom__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
}
.showroom__count { font-family: var(--font-display); font-weight: 650; color: var(--ink); }
.showroom__count b { color: var(--brand-700); font-variant-numeric: tabular-nums; }
.showroom__bar .select { width: auto; min-width: 210px; }
.showroom__spacer { margin-left: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.55rem 0.35rem 0.8rem;
  border: 1px solid var(--brand-200); border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-800);
  font-size: var(--step--1); font-weight: 600;
}
.chip button {
  display: grid; place-items: center;
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(198,22,45,0.13); color: var(--brand-800);
  cursor: pointer; line-height: 1; font-size: 0.85rem;
  transition: background var(--t-fast) var(--ease);
}
.chip button:hover { background: var(--brand-600); color: var(--white); }

.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }

.vcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.vcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--brand-200); }

.vcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden; }
.vcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--t-slow) var(--ease); }
.vcard:hover .vcard__media img { transform: scale(1.045); }
.vcard__badges { position: absolute; top: 0.65rem; left: 0.65rem; display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: calc(100% - 1.3rem); }
.badge {
  padding: 0.22rem 0.55rem; border-radius: var(--r-xs);
  background: var(--ink); color: var(--white);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.badge--accent { background: var(--accent-500); color: var(--ink); }
.badge--brand { background: var(--brand-600); }
.badge--stock { background: var(--success); }
.badge--preorder { background: #8a5a00; }

.vcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.15rem; }
.vcard__make { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-700); }
.vcard__title { margin: 0.2rem 0 0.15rem; font-size: 1.06rem; line-height: 1.25; }
.vcard__derivative { margin: 0 0 0.75rem; font-size: var(--step--1); color: var(--muted); line-height: 1.4; }

.vcard__specs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.vcard__specs li {
  margin: 0; padding: 0.2rem 0.5rem;
  border-radius: var(--r-xs); background: var(--mist);
  font-size: 0.72rem; color: var(--muted); font-weight: 550;
}

.vcard__options { display: block; margin-top: 0.7rem; font-size: var(--step--2); color: var(--muted); }
.vcard__options span { display: block; margin-bottom: 0.2rem; font-weight: 600; color: var(--text); }
.vcard__options select {
  width: 100%; padding: 0.45rem 0.6rem; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--white); font-size: var(--step--1); color: var(--text);
}
.vcard__options select:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 1px; }
.vcard__price { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--line-2); }
.vcard__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.vcard__amount { font-family: var(--font-display); font-size: clamp(1.22rem, 1.05rem + 0.7vw, 1.55rem); font-weight: 750; color: var(--ink); letter-spacing: -0.03em; }
.vcard__amount sup { font-size: 0.62em; font-weight: 650; top: -0.5em; }
.vcard__per { font-size: var(--step--1); color: var(--muted); }
.vcard__meta { margin-top: 0.3rem; font-size: var(--step--2); color: var(--muted-2); }
.vcard__actions { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-top: 0.9rem; }
.vcard__wa {
  display: grid; place-items: center; width: 46px;
  border: 2px solid var(--whatsapp); border-radius: var(--r-pill); background: var(--whatsapp);
  color: #05271a; text-decoration: none;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.vcard__wa:hover { background: #1fbe5b; transform: translateY(-2px); color: #05271a; }
.vcard__wa svg { width: 20px; height: 20px; }

/* Lead time — deliberately loud, because it is the thing that most often
   changes a customer's mind. */
.vcard__lead {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.85rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-xs);
  background: #fdf0f1;
  color: #b3202f;
  font-size: var(--step--2); font-weight: 700;
  line-height: 1.3;
}
.vcard__lead::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

/* Full deal details — a distinct footer strip across the bottom of the card,
   separated from the primary actions so it reads as secondary. */
.vcard__details {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: auto;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--line);
  background: var(--mist-2);
  color: var(--muted);
  font-size: var(--step--2); font-weight: 650;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.vcard__details:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}
.vcard__details svg { flex: 0 0 auto; }

.showroom__empty, .showroom__status {
  padding: var(--sp-7) var(--sp-5); text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--mist-2);
}
.showroom__empty h3 { font-size: var(--step-1); }

.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.skeleton {
  height: 372px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--mist) 30%, var(--line-2) 50%, var(--mist) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite linear;
}
@keyframes shimmer { to { background-position: -220% 0; } }

.filters-toggle { display: none; }
@media (max-width: 1000px) {
  .filters-toggle { display: inline-flex; }
}
/* Table view (the pricelist) always shows the toggle and starts collapsed,
   at every viewport width — with 8+ filter groups rendered full-width above
   the table (rather than in a sidebar), leaving them open by default pushed
   the table itself below the fold. */
.showroom--table .filters-toggle { display: inline-flex; }

/* --------------------------------------------------------------------------
   16b. Pricelist table view
   -------------------------------------------------------------------------- */

/* Table view: the pricelist needs the full page width, so the filter panel
   sits above the results rather than in a 296px sidebar. */
.showroom--table { grid-template-columns: minmax(0, 1fr); }
/* In table view, #showroom > div > .vehicle-grid holds exactly one child —
   the .table-scroll wrapper around the pricelist table — but .vehicle-grid
   is still the same auto-fill card grid used everywhere else
   (minmax(276px, 1fr)). With a single item and no explicit span, that grid
   only gave the table one ~300px column track and left the rest of the row
   empty. Table view needs a plain single full-width column instead. */
.showroom--table .vehicle-grid { display: block; }

/* Compact mode — the homepage "available right now" showcase. No filter
   panel, no VAT/sort bar, no pagination: just a fixed-size grid of cards.
   8 on desktop; CSS (not JS) trims it to 4 on tablet and mobile so the
   count still reacts correctly if the window is resized. */
.showroom--compact { grid-template-columns: minmax(0, 1fr); }
.showroom--compact .vehicle-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .showroom--compact .vehicle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .showroom--compact .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showroom--compact .vehicle-grid .vcard:nth-child(n+5) { display: none; }
}
@media (max-width: 520px) {
  .showroom--compact .vehicle-grid { grid-template-columns: minmax(0, 1fr); }
}
.showroom--table .filters {
  position: static;
  max-height: none;
  overflow: visible;
  margin-bottom: var(--sp-4);
  display: none;                      /* collapsed until "Show filters" is clicked */
}
.showroom--table .filters[data-open="true"] { display: block; }
.showroom--table .filters [data-facets] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.showroom--table .fgroup { margin: 0; }
.showroom--table .fgroup__scroll { max-height: 13rem; overflow-y: auto; }

.pricelist-scroll { max-height: none; }
/* No min-width: the table fills the page and only scrolls on small screens,
   where the media queries below drop the least useful columns first. */
.pricelist { width: 100%; font-size: var(--step--1); table-layout: auto; }
.pricelist th, .pricelist td { padding: 0.7rem 0.85rem; vertical-align: middle; }
.pricelist tbody tr:nth-child(even) { background: var(--mist-2); }
.pricelist tbody tr:hover { background: var(--brand-50); }
.pl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-price { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--step-0); }
.pl-derivative { max-width: 22ch; color: var(--muted); }
.pl-sub { color: var(--muted-2); font-size: var(--step--2); }
.pl-actions { white-space: nowrap; text-align: right; }
.pl-detail {
  display: inline-block; margin-left: 0.45rem;
  color: var(--muted); font-size: var(--step--2); font-weight: 600;
  text-decoration: none;
}
.pl-detail:hover { color: var(--brand-700); text-decoration: underline; }
.pricelist .badge { font-size: 0.64rem; }

/* Shed columns in order of least usefulness rather than forcing a scroll.
   Column order is now: 1 Vehicle, 2 Derivative, 3 Contract (+ mileage),
   4 Monthly (+ initial payment), 5 Fuel (+ transmission), 6 Availability,
   7 Actions. Vehicle, Contract, Monthly and Actions survive to the
   smallest screen — everything else is one glance away via "Details". */
@media (max-width: 1100px) {
  .pricelist thead th:nth-child(2), .pricelist td:nth-child(2) { display: none; }  /* derivative */
}
@media (max-width: 820px) {
  .pricelist thead th:nth-child(5), .pricelist td:nth-child(5) { display: none; }  /* fuel */
}
@media (max-width: 640px) {
  .pricelist thead th:nth-child(6), .pricelist td:nth-child(6) { display: none; }  /* availability */
  .pricelist th, .pricelist td { padding: 0.6rem 0.5rem; }
}

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); }
.form__row--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 820px) { .form__row--three { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) {
  .form__row, .form__row--three { grid-template-columns: minmax(0,1fr); }
}

/* The hidden attribute must win over any display rule. Without this, hiding a
   .form__row (display:grid) silently does nothing. */
[hidden] { display: none !important; }
.form label > span { display: block; margin-bottom: 0.35rem; font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.form .req { color: var(--danger); }
.form__consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--step--1); color: var(--muted); }
.form__consent input { margin-top: 0.25rem; width: 18px; height: 18px; accent-color: var(--brand-600); flex-shrink: 0; }
.form__note { font-size: var(--step--2); color: var(--muted-2); }
.hp { position: absolute; left: -9999px; opacity: 0; }

.form__status {
  margin: 0.85rem 0 0; padding: 0.75rem 1rem;
  border-radius: var(--r-sm); background: var(--mist);
  font-size: var(--step--1); color: var(--muted);
}
.form__status--error {
  background: #fdf0f1; color: #7d1d29;
  border-left: 4px solid var(--danger);
}

/* Chosen vehicle summary above an enquiry form */
.chosen-vehicle {
  position: relative;
  margin-bottom: var(--sp-5);
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--brand-200);
  border-left: 5px solid var(--brand-600);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--brand-50), var(--white));
}
.chosen-vehicle__label {
  margin: 0 0 0.2rem;
  font-family: var(--font-display); font-size: var(--step--2); font-weight: 750;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-700);
}
.chosen-vehicle__name {
  margin: 0; font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 700; color: var(--ink); line-height: 1.25;
}
.chosen-vehicle__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0.7rem 0 0; padding: 0; list-style: none;
}
.chosen-vehicle__meta li {
  margin: 0; padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill); background: var(--white);
  border: 1px solid var(--brand-200);
  font-size: var(--step--2); font-weight: 600; color: var(--brand-800);
}
.chosen-vehicle__clear {
  margin-top: 0.8rem; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: var(--step--1); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.chosen-vehicle__clear:hover { color: var(--brand-700); }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(140deg, var(--brand-700) 0%, var(--brand-900) 55%, #10143a 100%);
  color: rgba(255,255,255,0.84);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 340px at 88% 110%, rgba(220,187,90,0.22), transparent 62%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .cta-band__inner { grid-template-columns: minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   19. Logos / marquee
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(2rem, 5vw, 4rem); width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex; align-items: center;
  font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 700;
  color: var(--muted-2); letter-spacing: -0.01em; white-space: nowrap;
  opacity: 0.72; transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
}
.marquee__item:hover { opacity: 1; color: var(--brand-700); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --------------------------------------------------------------------------
   20. Related links / TOC
   -------------------------------------------------------------------------- */
.toc {
  position: sticky; top: calc(var(--header-h) + 1.25rem);
  padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--mist-2);
}
.toc h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: var(--sp-3); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a {
  display: block; padding: 0.5rem 0 0.5rem 1.6rem; position: relative;
  font-size: 0.93rem; color: var(--text); text-decoration: none; line-height: 1.4;
  border-left: 2px solid var(--line); margin-left: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0.6rem; color: var(--muted-2); font-size: 0.72rem; top: 0.68rem; }
.toc a:hover, .toc a.is-active { color: var(--brand-700); border-left-color: var(--brand-600); }
@media (max-width: 1000px) { .toc { position: static; } }

.prose > h2 { margin-top: 2.2em; padding-top: 0.2em; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.8em; }
.prose > :last-child { margin-bottom: 0; }
.prose img { border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.66); padding-block: clamp(3rem, 6vw, 4.5rem) var(--sp-6); font-size: var(--step--1); }
.site-footer h2, .site-footer h3 { color: var(--white); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); }
@media (max-width: 960px) { .footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer__top { grid-template-columns: minmax(0,1fr); } }

.footer__brand .brand__name { color: var(--white); }
.footer__brand .brand__tag { color: rgba(255,255,255,0.5); }
.footer__col h3 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: var(--sp-4); color: rgba(255,255,255,0.92); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer__col li { margin: 0; }
.footer__col a { color: rgba(255,255,255,0.66); text-decoration: none; }
.footer__col a:hover { color: var(--accent-300); text-decoration: underline; }

.footer__contact { display: grid; gap: 0.7rem; margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; }
.footer__contact svg { flex-shrink: 0; margin-top: 3px; color: var(--accent-400); }
.footer__contact a { color: var(--white); text-decoration: none; font-weight: 600; }
.footer__contact a:hover { color: var(--accent-300); }

.footer__newsletter-bar {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer__newsletter #mc_embed_signup input[type=email] {
  border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06); color: #fff; padding: .6rem .8rem; max-width: 320px;
}
.footer__newsletter #mc_embed_signup .button {
  background: var(--brand-600); border: none; border-radius: var(--r-sm); color: #fff;
  padding: .6rem 1.2rem; font-weight: 600; cursor: pointer; margin-top: .6rem;
}
.footer__newsletter #mc_embed_signup .button:hover { background: var(--brand-700); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-top: clamp(2rem, 4vw, 3.25rem); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--step--2); color: rgba(255,255,255,0.5);
}
.footer__bottom a { color: rgba(255,255,255,0.72); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.footer__legal li { margin: 0; }
.footer__disclaimer { margin-top: var(--sp-5); font-size: var(--step--2); color: rgba(255,255,255,0.64); line-height: 1.6; }

/* --------------------------------------------------------------------------
   22. Floating WhatsApp
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 800;
  display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0;
  border-radius: 50%;
  background: var(--whatsapp); color: #05271a;
  text-decoration: none; box-shadow: 0 8px 24px rgba(18,140,126,0.34);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.04); color: #05271a;
  box-shadow: 0 14px 32px rgba(18,140,126,0.42);
}
.wa-float svg { width: 26px; height: 26px; }
@media (max-width: 520px) {
  .wa-float { width: 48px; height: 48px; right: 0.9rem; bottom: 0.9rem; }
  .wa-float svg { width: 24px; height: 24px; }
}

/* --------------------------------------------------------------------------
   22b. Dark surfaces — anything sitting on ink, hero or CTA backgrounds
   --------------------------------------------------------------------------
   Several base rules hard-code dark colours (strong, .crosses li, .text-muted).
   On a dark section those render near-invisible. These overrides fix every
   element that can legitimately appear on a dark background.
   -------------------------------------------------------------------------- */
.section--ink,
.hero,
.page-hero,
.cta-band {
  --on-dark: rgba(255, 255, 255, 0.86);
  --on-dark-muted: rgba(255, 255, 255, 0.68);
}

/* Bold text defaults to near-black — force it light */
.section--ink :is(strong, b),
.hero :is(strong, b),
.page-hero :is(strong, b),
.cta-band :is(strong, b) { color: var(--white); }

/* Muted helpers */
.section--ink .text-muted,
.hero .text-muted,
.page-hero .text-muted,
.cta-band .text-muted,
.section--ink .text-sm,
.cta-band .text-sm { color: var(--on-dark-muted); }

/* Tick lists */
.section--ink .ticks li,
.hero .ticks li,
.page-hero .ticks li,
.cta-band .ticks li { color: var(--on-dark); }

/* Cross lists explicitly set a dark colour — this is the main offender */
.section--ink .crosses li,
.hero .crosses li,
.page-hero .crosses li,
.cta-band .crosses li { color: var(--on-dark-muted); }

.section--ink .crosses li::before,
.hero .crosses li::before,
.page-hero .crosses li::before,
.cta-band .crosses li::before {
  background: rgba(255, 255, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Ordered / unordered prose lists */
.section--ink :is(ul, ol) > li,
.cta-band :is(ul, ol) > li { color: var(--on-dark); }

/* Links */
.hero a:not(.btn),
.page-hero a:not(.btn):not(.crumbs a),
.cta-band a:not(.btn) { color: var(--accent-300); }
.section--ink a:not(.btn):hover,
.cta-band a:not(.btn):hover { color: var(--accent-100); }

/* Paragraphs and definition lists sitting directly on the dark surface */
.section--ink > .wrap > .stack-lg > div > p,
.section--ink p { color: var(--on-dark); }
.section--ink .keyfacts dl { border-color: rgba(255, 255, 255, 0.18); }
.section--ink .keyfacts dt {
  color: var(--white); background: rgba(255, 255, 255, 0.07);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.section--ink .keyfacts dd {
  color: var(--on-dark); border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Cards keep their own light background, so restore normal colours inside */
.section--ink .card:not(.card--feature) :is(p, li, strong, b),
.hero .card :is(p, li, strong, b),
.cta-band .card :is(p, li, strong, b) { color: var(--text); }
.section--ink .card:not(.card--feature) :is(strong, b) { color: var(--ink); }
.section--ink .card:not(.card--feature) .crosses li { color: var(--muted); }
.section--ink .card:not(.card--feature) .crosses li::before {
  background: #e9ecf3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545c74' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Callouts on dark: give them enough contrast to stay legible */
.section--ink .callout,
.cta-band .callout { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); }
.section--ink .callout strong { color: var(--white); }

/* --------------------------------------------------------------------------
   22c. Manufacturer logo in a card icon slot
   -------------------------------------------------------------------------- */
.card__icon--logo { background: var(--white); border: 1px solid var(--line); padding: 5px; }
.card__icon--logo img { width: 100%; height: 100%; object-fit: contain; }
/* If the logo image loads, hide the fallback SVG sitting beside it */
.card__icon--logo img + svg { display: none; }

/* --------------------------------------------------------------------------
   22d. Step icons
   -------------------------------------------------------------------------- */
.step__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: var(--sp-3);
  border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-700);
}
.step::before { position: absolute; top: var(--sp-5); right: var(--sp-5); margin: 0; }
.step { position: relative; }


/* --------------------------------------------------------------------------
   22f. Cookie consent banner
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 950;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.5vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  animation: consentIn 320ms var(--ease);
}
@keyframes consentIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

.consent__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  width: min(100%, var(--wrap)); margin-inline: auto;
}
.consent__copy { flex: 1 1 auto; }
.consent__title {
  margin: 0 0 0.2rem;
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 700;
  color: var(--ink);
}
.consent__text { margin: 0; font-size: var(--step--1); color: var(--muted); max-width: 68ch; }
.consent__actions { display: flex; gap: 0.6rem; flex: 0 0 auto; }

/* Keep the floating WhatsApp button clear of the banner */
.consent ~ .wa-float, body:has(.consent) .wa-float { bottom: 7.5rem; }

@media (max-width: 760px) {
  .consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
  .consent__inner { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .consent__actions .btn { flex: 1; }
  body:has(.consent) .wa-float { bottom: 11rem; }
}

/* --------------------------------------------------------------------------
   23. Motion utilities
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .wa-float, .cta-band, .filters, .topbar { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}