/* ==========================================================================
   HONDANBOX — STYLESHEET
   --------------------------------------------------------------------------
   Structure of this file (search for these headings in VS Code):
   1. Design tokens (colours, type, spacing) — change the look of the whole
      site by editing values here.
   2. Reset / base element styles
   3. Layout helpers (container, section spacing, grid)
   4. Typography
   5. Buttons & links
   6. Header & navigation
   7. Hero
   8. Vehicle cards + vehicle grid
   9. Bento / process steps
   10. Hotspot component
   11. FAQ accordion
   12. Contact / forms
   13. Footer
   14. Vehicle detail page
   15. Utilities
   ========================================================================== */
@font-face {
  font-family: "KT Kiyosuna Sans";
  src: url("../fonts/KiyosunaSans-L-1.0.1.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KT Kiyosuna Sans";
  src: url("../fonts/KiyosunaSans-B-1.0.1.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Change a colour, font or spacing value here and it updates everywhere.
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --color-bg: #FAF9F6;          /* page background */
  --color-bg-alt: #8e2c21;      /* slightly darker section background */
  --color-ink: #010101;         /* near-black text / dark sections */
  --color-ink-soft: #55524a;    /* secondary text */
  --color-white: #ffffff;
  --color-Grey: #c5c5c5;  
  --color-red: #b3382a;         /* primary accent (buttons, links) */
  --color-red-dark: #8e2c21;    /* accent hover state */
  --color-border: #ddd8cc;      /* hairline borders */
  --color-border-dark: #3a372f; /* borders on dark sections */
  --color-focus: #b3382a;       /* keyboard focus ring — brand red */

  /* Type */
  --font-display: "KT Kiyosuna Sans", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: clamp(0.4rem, 1vw, 0.6rem);
  --space-2: clamp(0.6rem, 1.5vw, 1rem);
  --space-3: clamp(0.8rem, 2vw, 1.5rem);
  --space-4: clamp(1rem, 2.5vw, 2rem);
  --space-5: clamp(1.5rem, 3vw, 3rem);
  --space-6: clamp(2rem, 4vw, 4rem);
  --space-7: clamp(3rem, 6vw, 6rem);


  /* Layout */
  --container-max: 1620px;
  --container-padding: clamp(1.125rem, 4vw, 2.5rem);
  --radius-sm: 8px;
  --radius-md: clamp(10px, 1.2vw, 14px);

  /* Section rhythm — scales with viewport so whitespace feels generous on
     desktop without forcing awkward gaps on mobile. */
  --section-space: clamp(3rem, 8vw, 4rem);
  --section-space-tight: clamp(2.5rem, 5vw, 3rem);

  /* Breakpoints (referenced in comments — CSS can't read these in @media) */
  /* tablet: 768px, desktop: 1024px */
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.55;
  font-size: 1rem;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

/* Visible keyboard focus everywhere — do not remove */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Respect reduced-motion preference */
@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;
  }
}

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

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

.section--tight {
  padding-block: var(--section-space-tight);
}

.section--dark {
  background: var(--color-ink);
  color: var(--color-white);
}
.section--dark .spec-table th {
  color:var(--color-red);
}

.section--dark .spec-table th,
.section--dark .spec-table td {
  border-bottom-color: var(--color-border-dark);
}


.section--alt {
  background: var(--color-bg-alt);
  color: var(--color-white);
}

main {
  padding-top: clamp(4.5rem, 12vw, 6rem);
}

body.has-hero main {
  padding-top: 0;
}

.grid {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
}

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .grid.grid--4 {
    gap: 16px;
  }

  .grid.grid--4.grid--stack {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0px
}

h1,
h2 {
  margin-bottom: var(--space-2);
}

h1 {
  font-size: clamp(2rem, 5vw, 3.75rem);
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
}

h3 {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

p {
  margin: 0 0 var(--space-3);
  max-width: 68ch;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-red);
  margin: 0 0 var(--space-2);
}

.lede {
  font-size: 1.15rem;
  color: var(--color-ink-soft);
}

.section--dark .lede,
.section--dark p {
  color: #d8d5cb;
}
@media (max-width: 1023px) {
  body {
    text-align: left;
  }
}
p {
  text-wrap: pretty;
}

h1, h2, h3 {
  text-wrap: balance;
}

p, li, h1, h2, h3, h4, dd, td {
  hyphens: none;
  -webkit-hyphens: none;
}


/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
/* Base button: same shape everywhere, height steps up at each breakpoint */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;                /* mobile */
  padding: 0 var(--space-4);
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  margin-block: var(--space-3);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (min-width: 768px) {
  .btn { min-height: 3rem; }          /* tablet */
}

@media (min-width: 1024px) {
  .btn { min-height: 3.25rem; font-size: 14px; }   /* desktop */
}

.btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

/* Primary: red on light backgrounds */
.btn-primary {
  background: var(--color-red);
  color: var(--color-white);
  min-width: 14rem;                   /* was 450px, which caused overlaps */
}

.btn-primary:hover {
  background: var(--color-red-dark);
}

/* Primary on black backgrounds: white, turns red on hover */
.hero-full .btn-primary,
.section--dark .btn-primary,
.visit-section .btn-primary {
  background: var(--color-white);
  color: var(--color-ink);
}

.hero-full .btn-primary:hover,
.section--dark .btn-primary:hover,
.visit-section .btn-primary:hover {
  background: var(--color-red);
  color: var(--color-white);
}

/* Secondary: white */
.btn-secondary {
  background: var(--color-white);
  color: var(--color-ink);
}

.btn-secondary:hover {
  background: #E6E5E1;
}

/* Secondary on dark sections: white outline */
.section--dark .btn-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.section--dark .btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-ink);
}

/* Secondary on light modules: black (contact teaser) */
.contact-teaser .btn-secondary {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

.contact-teaser .btn-secondary:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

/* Text links: red dot before the text instead of an arrow; dot grows on hover */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.section--dark .text-link {
  color: var(--color-white);
}

.text-link::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.text-link:hover::before,
.text-link:focus-visible::before {
  transform: scale(1.7);
}

.text-link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .text-link {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION — floating glass pill
   -------------------------------------------------------------------------- */
.site-header {
  --header-fg: var(--color-ink);
  --header-bg: rgba(250, 246, 247, 0.7);
  /* Glass edges read as glass when the border is a light highlight, not
     a dark line — real glass catches light at the rim rather than
     casting a shadow there. Kept light in both themes; the box-shadow
     below is what gives the header its separation from the page. */
  --header-border: rgba(255, 255, 255, 0.4);
   --menu-bg: rgba(250, 249, 246, 0.9); 

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  width: 100%;
  max-width: none;

  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 0;

  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);

  transform: translateY(0);
  /* Reveal (scrolling up, going back to translateY(0)) is slow and
     eased — feels deliberate rather than snapping into place. */
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  will-change: transform;
}

.site-header.is-hidden {
  transform: translateY(-100%);
  /* Hiding (scrolling down) can be quicker — nothing to savour on the
     way out, and a fast hide keeps the page feeling responsive. */
  transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1);
}

/* Dark glass: shown whenever JS detects the header is sitting over a
   .section--dark (or the hero). Set directly by updateTheme() in
   main.js, based on what's actually behind the header right now —
   not scroll distance. */
.site-header[data-theme="dark"] {
  --header-fg: var(--color-white);
  --header-bg: rgba(4, 4, 6, 0.35);
  --header-border: rgba(255, 255, 255, 0.15);

  /* dark glass can take a slightly stronger shadow without looking heavy */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --menu-bg: rgba(4, 4, 6, 0.9);   
}

/* Light glass: shown over normal/light sections. Slightly less opacity
   and a bit more saturation/contrast than the dark variant needs,
   compensating for light backgrounds having less color for saturate()
   to boost (otherwise this version reads flat/cheap next to the dark one). */
.site-header[data-theme="light"] {
  --header-fg: var(--color-ink);
  --header-bg: rgba(250, 249, 246, 0.6);
  --header-border: rgba(255, 255, 255, 0.6);

  backdrop-filter: blur(16px) saturate(220%) contrast(105%);
  -webkit-backdrop-filter: blur(16px) saturate(220%) contrast(105%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
   --menu-bg: rgba(250, 249, 246, 0.9);  
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-1);
}

@media (min-width: 1024px) {
  .site-header__inner {
    padding-block: var(--space-2);
  }
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--header-fg);
  z-index: 60; 
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  z-index: 60;
  font-size: 0;
}

.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--header-fg);
}

.nav-toggle::before { transform: translateY(-6px); }
.nav-toggle::after { transform: translateY(6px); }

.nav-toggle {
  background-image: linear-gradient(var(--header-fg), var(--header-fg));
  background-size: 20px 2px;
  background-position: center;
  background-repeat: no-repeat;
}

.nav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] { background-image: none; }

/* Menu button: a brand red dot the size of the logo's "O" (16px) when
   closed, a red X when the menu is open. The button itself stays 44px so
   it's still easy to tap; only the dot is visible. */
.nav-toggle {
  background-color: transparent;
  background-image: radial-gradient(circle, var(--color-red) 0 8px, transparent 8.5px);
  background-size: 17px 17px;
  border-radius: 50%;
}

.nav-toggle::before,
.nav-toggle::after {
  width: 18px;
  background: var(--color-red);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle:hover {
  background-image: radial-gradient(circle, var(--color-red-dark) 0 8px, transparent 8.5px);
}

.nav-toggle[aria-expanded="true"],
.nav-toggle[aria-expanded="true"]:hover {
  background-image: none;
}

.nav-toggle[aria-expanded="true"]::before,
.nav-toggle[aria-expanded="true"]::after {
  opacity: 1;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle::before,
  .nav-toggle::after { transition: none; }
}


@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.main-nav {
  display: none;
}

/* Mobile dropdown — sits directly below the now full-width header
   (top matches the header's rendered height), dark overlay below
   dims the rest of the page while it's open */

.main-nav.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;

 background: var(--menu-bg);   /* was var(--header-bg) */
  backdrop-filter: blur(70px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: none;
  box-shadow: none;

  padding: var(--space-3) var(--space-4);
  padding-top: clamp(4.5rem, 12vw, 6rem);
  padding-bottom: var(--space-5);

  z-index: 49;
  overflow-y: auto;
}

.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.main-nav__list a {
  text-decoration: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--header-fg);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  transition: opacity 0.25s ease;
}
.main-nav__list a:hover {
  opacity: 0.6;
}

.main-nav.is-open .main-nav__list {
  flex: 1;
  gap: 0;
}

.main-nav.is-open .main-nav__list li {
  border-bottom: 1px solid var(--header-border);
}

.main-nav.is-open .main-nav__list li:first-child {
  border-top: 1px solid var(--header-border);
}

.main-nav.is-open .main-nav__list a {
  display: block;
  padding-block: var(--space-3);
  font-size: 1rem;
  color: var(--header-fg);
}

.main-nav__list a[aria-current="page"] {
  font-weight: 700;
}

.main-nav__cta {
  margin-top: auto;
  align-self: center;

  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--header-fg);
  border-radius: 9999px;

  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--header-fg);
  text-decoration: none;
  text-align: center;

  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-nav__cta:hover {
  background: var(--header-fg);
  color: var(--header-bg);
}

@media (min-width: 1024px) {
  .main-nav {
    display: block !important;
    position: static;
    border: none;
    padding: 0;
    background: none;
  }

  .main-nav__list {
    flex-direction: row;
    gap: var(--space-4);
  }
}

/* ---------- Sticky mobile call-to-action ---------- */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-cta-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 2rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(1, 1, 1, 0.03);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 2rem);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 2rem);
  }
  @media (max-width: 767px) {
  .hero-cta {
    display: none;
  }
}

  .mobile-cta-bar .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    margin: 0;
  }

  /* stop the bar covering the bottom of the footer */
  body:has(.mobile-cta-bar) {
    padding-bottom: 5rem;
  }
}
/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
/* Generic two-column layout, reused by several sections (hotspot, contact
   teaser, why-honda-nbox page) — not specific to the homepage hero. */
.hero-full {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 95vh;
  min-height: 95dvh;
  overflow: hidden;
}

.hero-full__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-full__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}


.hero-full > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--space-6);
  padding-bottom: var(--space-1);
}

.hero-full__panel {
  color: var(--color-white);
  padding-block: clamp(1.5rem, 4vw, 1.5rem);
  padding-inline: 0;
  border-radius: var(--radius-md);
}
.hero-full__panel .btn:last-child {
  margin-bottom: 0;
}


/* ========================================
   Desktop
   ======================================== */

@media (min-width: 1024px) {
  .hero-full {
    align-items: flex-end;
  }

  .hero-full > .container {
    text-align: center;
  }

  .hero-full__panel {
    width: 100%;
    text-align: center;
  }

  .hero-full__panel .eyebrow {
    display: block;
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
  }

  .hero-full__panel h1 {
    text-align: center;
  }

  .hero-full__panel .btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  /* shows on hover, and for keyboard users when they tab to it */
  .hero-full:hover .hero-full__panel .btn,
  .hero-full__panel:focus-within .btn {
    opacity: 1;
    pointer-events: auto;
  }
}


/* ========================================
   Mobile / Tablet
   ======================================== */

@media (max-width: 1023px) {
  .hero-full {
    --hero-bg: #010101;           /* swap for the colour at the bottom edge of your image */
    --hero-image-shift: 8rem;     /* how far the image moves up */
    background-color: var(--hero-bg);
    align-items: flex-end;
    justify-content: flex-start;
  }

  .hero-full__media {
    transform: translateY(calc(-1 * var(--hero-image-shift)));
  }


  .hero-full__panel {
    text-align: left;
  }

  .hero-full__panel .eyebrow {
    text-align: left;
  }
}
/* Intro section: centred on tablet and desktop, left-aligned on mobile */
.intro-block .lede {
  margin-inline: auto;
}

@media (max-width: 767px) {
  .text-center.intro-block,
  .text-center.intro-block h2,
  .text-center.intro-block p,
  .text-center.intro-block .lede {
    text-align: left;
    margin-inline: 0;
  }
}
/* --------------------------------------------------------------------------
   PLACEHOLDER IMAGE — grey block with fixed aspect ratio.
   Swap the aspect-ratio value if a section needs a different image shape;
   everything else (label, styling) stays the same.
   -------------------------------------------------------------------------- */
.placeholder-image {
  background: #cfccc2;
  color: #55524a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  overflow: hidden;
}

.placeholder-image--hero {
  aspect-ratio: 4 / 3;
}

.placeholder-image--card {
  aspect-ratio: 3 / 2;
}

.placeholder-image--wide {
  aspect-ratio: 16 / 9;
}

.placeholder-image--square {
  aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------
   8. VEHICLE CARDS + GRID
   -------------------------------------------------------------------------- */
.vehicle-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 14px -8px rgba(0, 0, 0, 0.35);
}
.vehicle-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  flex-shrink: 0;
}
/* clickable image with a gentle zoom */
.vehicle-card__media {
  display: block;
  overflow: hidden;   /* keeps the zoom inside the image area */
}

.vehicle-card__image {
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .vehicle-card:hover .vehicle-card__image {
    transform: scale(1.05);
  }
}

.vehicle-card__body {
  padding: clamp(1rem, 1.6vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  background-color: #010101;
}

/* 1st: car name */
.vehicle-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.15;
  margin: 0;
  color: #FAF9F6;
}

.vehicle-card__colour {
  font-size: 1rem;
  margin: 0;
  color: #FAF9F6;
}

/* 3rd: quick details, smaller and softer */
.vehicle-card__meta {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(250, 249, 246, 0.7);
}

/* the dots between the quick details, with more space either side */
.vehicle-card__sep {
  display: inline-block;
  margin-inline: 0.5em;
  color: var(--color-red);
}

/* 2nd: price, bigger and bold */
.vehicle-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  margin: var(--space-1) 0 0;
  color: #FAF9F6;
}

/* button always sits at the bottom, so every card lines up */
.vehicle-card__cta {
  margin-top: auto;
  padding-top: var(--space-2);
}

.vehicle-card__cta .btn {
  width: 100%;
  margin: 0;
}

.vehicle-grid-footer {
  text-align: center;
  margin-top: var(--space-5);
}

@media (max-width: 767px) {
  main :has(> .vehicle-card) {
    gap: 10px;
  }

  /* stacked cards on the vehicles page: bigger name and price */
  .grid--stack .vehicle-card__title { font-size: 1.35rem; }
  .grid--stack .vehicle-card__price { font-size: 1.7rem; }

  /* "See All Vehicles" is hidden on mobile: the sticky button does that job */
  .vehicle-grid-footer { display: none; }
}

/* --------------------------------------------------------------------------
   9. BENTO / PROCESS STEPS
   -------------------------------------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.8rem, 3vw, 3rem);
}

.process-card {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;   /* with column-reverse, this keeps text at the top */
  text-align: center;
}

.process-card .placeholder-image {
  background: transparent;
  border: none;
  padding: var(--space-4);
}

/* illustrations: show the whole image, never zoom or crop */
.process-card .placeholder-image img {
  object-fit: contain;
}

.process-card__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.process-card h3 {
  margin: 0;
  text-transform: none;
}

.process-card p {
  margin: 0 0 var(--space-1);
  font-size: 0.9rem;
}

/* only the description gets the fixed height, not the step number */
.process-card p:not(.process-card__number) {
  min-height: calc(1.55em * 4);   /* mobile: room for 4 lines, so every card lines up */
}

.process-card__number {
  font-family: var(--font-display);
  color: var(--color-red);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 var(--space-1);
}

@media (min-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(4, 1fr);
    
  }

    .process-card__content {
    max-width: 15rem;
    margin-inline: auto;
  }

  .process-card {
    flex-direction: column;
    justify-content: flex-start;
  }

   .process-card p:not(.process-card__number) {
    min-height: calc(1.55em * 3);   /* desktop: room for 3 lines */
  }

}
.process-card .placeholder-image img {
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .process-card:hover .placeholder-image img {
    transform: scale(1.05);
  }
}
/* --------------------------------------------------------------------------
   10. HOTSPOT COMPONENT

   Large image with interactive markers.
   Desktop: image on the left, copy on the right. Clicking a marker selects it.
   Mobile/tablet: image runs edge to edge, marker information appears below it.
   -------------------------------------------------------------------------- */

/* HOTSPOT */

.hotspot {
  position: relative;
  margin-top: var(--space-1);
}
.hotspot .placeholder-image {
  background: transparent;
  border: none;
  padding: var(--space-1);
}


/* Each hotspot */

.hotspot-item {
  position: absolute;
  z-index: 5;
}


/* Temporary positions
   Change these later when your real image is added */

.hotspot-item--1 {
  top: 40%;
  left: 20%;
}

.hotspot-item--2 {
  top: 25%;
  left: 35%;
}

.hotspot-item--3 {
  top: 30%;
  left: 65%;
}

.hotspot-item--4 {
  top: 55%;
  left: 38%;
}


/* Number buttons */

.hotspot-button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;                        /* removes the default grey border */
  -webkit-tap-highlight-color: transparent;

  border-radius: 50%;

  background: var(--color-red);
  color: var(--color-white);

  font-family: var(--font-display);
  font-size: 1rem;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;                  /* needed for the ::before pulse */

  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hotspot-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-red);
  z-index: -1;
  animation: hotspot-pulse 1.7s ease-out infinite;
}

@keyframes hotspot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.hotspot-button.is-open::before {
  animation: none;
  opacity: 0;
}


/* Hover — mouse only, so a tap on a phone doesn't leave a stuck hover colour */

@media (hover: hover) {
  .hotspot-button:hover {
    background: var(--color-red-dark);
  }
}

/* Selected — white with a red ring, clearly different from hover.
   Keep this BELOW the hover rule so it wins on a selected button. */

.hotspot-button.is-open {
  background: var(--color-white);
  color: var(--color-red);
}


/* Desktop information box */

.hotspot-info {
  position: absolute;

  left: 3.5rem;
  top: 50%;

  transform: translateY(-50%);

  width: 15rem;

  padding: var(--space-2);

  background: var(--color-white);
  color: var(--color-ink);

  border-radius: var(--radius-md);

  display: none;
}


/* Show information when hovering hotspot */

.hotspot-item:hover .hotspot-info,
.hotspot-item:focus-within .hotspot-info {
  display: block;
}

.hotspot-info h3 {
  margin: 0 0 var(--space-1);

  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
}


.hotspot-info p {
  margin: 0;
  font-size: 0.9rem;
}


/* Mobile information box */

.hotspot-mobile-info h3 {
  margin: 0 0 var(--space-1);

  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
}


.hotspot-mobile-info p {
  margin: 0;
  font-size: 0.9rem;
  max-width: 38ch;
  text-wrap: balance;
}


/* MOBILE / TABLET */

@media (max-width: 1023px) {

  /* image runs edge to edge, ignoring the container's side padding */
  .hotspot {
    margin-inline: calc(-1 * var(--container-padding));
  }

  .hotspot .placeholder-image {
    padding: 0;
  }

  .hotspot-button {
    width: 3rem;
    height: 3rem;
    font-size: 1.15rem;
  }

  .hotspot-info {
    display: none !important;
  }

  .hotspot-mobile-info.is-visible {
    display: block;
  }

}

.hotspot-layout {
  display: grid;
  gap: var(--space-4);
  grid-template-areas:
    "heading"
    "image"
    "info"
    "cta";
}

.hotspot-heading { grid-area: heading; }
.hotspot          { grid-area: image; margin-top: 0; }
.hotspot-mobile-info { grid-area: info; }
.hotspot-cta      { grid-area: cta; text-align: left; }

@media (min-width: 1024px) {
  .hotspot-layout {
    --hotspot-copy-shift: var(--space-6);   /* gap between image and copy — raise to push the copy further right */
    grid-template-columns: 1.6fr 1fr;   /* van takes more of the width */
    grid-template-areas:
      "image heading"
      "image info"
      "image cta";
    gap: var(--space-1);
    max-width: 1680px;
    min-height: 350px;
    margin-inline: auto;
    align-items: center;
  }

  .hotspot-heading,
  .hotspot-cta {
    padding-left: var(--hotspot-copy-shift);
  }

  .hotspot-mobile-info {
    display: block;
    background: none;
    padding: 0 0 0 var(--hotspot-copy-shift);
    border-radius: 0;
  }

  .hotspot-mobile-info h3 {
    font-size: 1.5rem;
  }

  .hotspot-mobile-info p {
    font-size: 1.1rem;
    max-width: 30ch;
  }

  .hotspot .placeholder-image {
    padding: 0;
  }

  .hotspot-cta {
    text-align: left;
  }

  .hotspot-info {
    display: none !important;
  }
}
/*---------------------------------------------------------------------------------
why choose us
---------------------------------------------------------------------------------*/

/* ---------- Why choose us ---------- */
.why-choose-us {
  display: grid;
  gap: var(--space-5);
  text-align: left;
}

.why-choose-us__intro .lede {
  max-width: 36rem;
  margin-inline: 0;
}

.trust-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.trust-grid li {
  position: relative;
  padding: 0.9rem 1rem 0.9rem 2.75rem;
  background: rgba(250, 249, 246, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.4;
}

.trust-grid li::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-red);
  font-weight: 700;
}

/* tablet: trust points in two columns */
@media (min-width: 600px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* desktop: text on the left, trust points on the right */
@media (min-width: 1024px) {
  .why-choose-us {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-6);
  }
}
/*---------------------------------------------------------------------------------
TEASER
---------------------------------------------------------------------------------*/


.section.contact-teaser {
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
  border-bottom: none;
}

.contact-teaser__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.contact-teaser__image {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.contact-teaser__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding-left: calc(var(--container-padding) + max(0px, (100vw - var(--container-max)) / 2));
  padding-right: var(--container-padding);
}

@media (min-width: 1024px) {
  .contact-teaser__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .contact-teaser__grid {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding-bottom: 0;
}

  .contact-teaser__image,
  .contact-teaser__copy {
    flex: 1 1 50%;
    min-width: 0;
  }

  .contact-teaser__image {
    aspect-ratio: auto;
    height: auto;
    order: 2;
  }

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

  .contact-teaser__copy {
    order: 1;
    padding-right: 0;
  }
}






/* --------------------------------------------------------------------------
   11. FAQ ACCORDION
   Built from <button aria-expanded> + a content panel — keyboard and
   screen-reader accessible without a JS framework. See js/main.js.
   -------------------------------------------------------------------------- */
.accordion {
  border-top: 1px solid var(--color-border);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: none;
  cursor: pointer;
  color: inherit;
}

.accordion__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.accordion__panel {
  padding: 0 0 var(--space-3);
  color: var(--color-ink-soft);
}

.accordion__panel[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   12. CONTACT / FORMS
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.form-field {
  margin-bottom: var(--space-3);
}

.form-field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4em;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
}

/* Brand red when a contact form box is selected (matches the stock filter) */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  border-color: var(--color-red);
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  accent-color: var(--color-red);
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.contact-details dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: var(--space-3);
}

.contact-details dd {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
}

.contact-details dt:first-child {
  margin-top: 0;
}
/* Contact details: 2 x 2 grid on all screen sizes */
.contact-details--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-3);
  margin: var(--space-4) 0;
}

.contact-details--grid dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  opacity: 0.6;
  margin-bottom: 0.35rem;
}

.contact-details--grid dd {
  margin: 0;
  line-height: 1.6;
}

.contact-details--grid address {
  font-style: normal;
}

/* stop the long email address spilling out on small phones */
.contact-details--grid a {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-white);
  padding-block: var(--space-6) var(--space-3);
}

.footer-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-dark);
}
.site-footer address {
  font-style: normal;
  line-height: 1.7;
}

.footer-legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  font-size: 0.75rem;
  line-height: 1.6;
  opacity: 0.6;
}

.footer-legal p { margin: 0 0 0.5rem; max-width: 70ch; }

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-grid h3 {
  text-transform: uppercase;
  font-size: 0.9rem;
  color: #a9a599;
  margin-bottom: var(--space-2);
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: var(--space-1);
}

.footer-grid a {
  text-decoration: none;
  color: var(--color-white);
}

.footer-grid a:hover {
  color: var(--color-red);
}

.footer-bottom {
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: 0.85rem;
  color: #a9a599;
}

.footer-bottom a {
  color: #a9a599;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   14. VEHICLE DETAIL PAGE
   -------------------------------------------------------------------------- */
.vehicle-detail__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .vehicle-detail__grid {
    grid-template-columns: 1.2fr 1fr;
  }
}
.read-more summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.vehicle-gallery__main {
  margin-bottom: var(--space-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
}

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

.specs-features {
  display: grid;
  gap: var(--space-6);          /* space between Specs and Features on mobile */
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.feature-list li {
  position: relative;
  padding-left: 1.6em;   /* space reserved for the tick */
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-red);
}

@media (min-width: 900px) {
  .specs-features {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-5);        /* space between the two columns on desktop */
  }
}



/* ---------- Vehicle gallery: top thumbnails ---------- */
.vehicle-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
}

.vehicle-gallery__thumb {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  opacity: 0.7;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

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

.vehicle-gallery__thumb:hover,
.vehicle-gallery__thumb.is-active {
  opacity: 1;
}

.vehicle-gallery__thumb.is-active {
  box-shadow: 0 0 0 2px var(--color-red);
}

.vehicle-gallery__thumb:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* shared: images fill their placeholder shape */
.placeholder-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- More photos grid ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}

@media (min-width: 768px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

.photo-grid__item {
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
    aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.photo-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .photo-grid__item:hover img { transform: scale(1.04); }
}

.photo-grid__item:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* ---------- Full-screen viewer ---------- */
.lightbox {
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: none;
  background: rgba(1, 1, 1, 0.92);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox img {
  max-width: 92vw;
  max-height: 85vh;
  object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close { top: var(--space-2); right: var(--space-2); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--space-2); }
.lightbox__nav--next { right: var(--space-2); }

.lightbox__close:hover,
.lightbox__nav:hover { background: var(--color-red); }

.vehicle-summary__price {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: var(--space-2) 0;
}

.vehicle-summary__meta-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.vehicle-summary__meta-list dt {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.vehicle-summary__meta-list dd {
  margin: 0.15rem 0 0;
}

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

.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: normal;
}

.spec-table th {
  color: var(--color-ink-soft);
  width: 40%;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1) var(--space-3);
}

.feature-list li::before {
  content: "\2713";
  color: var(--color-red);
  margin-right: 0.5em;
}

.vehicle-cta-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-4);
}

/* ---------- Existing enquiry button fixed to the bottom of the screen (mobile) ---------- */
@media (max-width: 1023px) {

  /* the box loses its styling and its text, so nothing empty is left behind */
  .vehicle-cta-box {
    display: contents;
  }

  .vehicle-cta-box h2,
  .vehicle-cta-box p {
    display: none;
  }

  .enquiry-float {
    position: fixed;
    left: var(--container-padding);
    right: var(--container-padding);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    z-index: 40;

    width: auto;
    margin: 0;
    text-align: center;
    box-shadow: 0 6px 20px rgba(1, 1, 1, 0.35);
  }

  /* hide it while the mobile menu is open */
  body.nav-is-open .enquiry-float {
    display: none;
  }

  /* stops the button covering the bottom of the footer */
  body:has(.enquiry-float) .footer-bottom {
    padding-bottom: 5.5rem;
  }
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
}

.breadcrumb a {
  text-decoration: none;
  color: var(--color-ink-soft);
}

.breadcrumb a:hover {
  color: var(--color-red);
}
/* ---------- Visit us: map background with depth ---------- */
.visit-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(1.5rem, 5vw, 4rem);
  color: #FAF9F6;
}

.visit-section__map {
  position: absolute;
  inset: -20% 0;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}

.visit-section__map iframe,
.visit-section__map img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.85);
}

/* light, flat overlay */
.visit-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(1, 1, 1, 0.35);
}

/* card */
.visit-card {
  background: rgba(1, 1, 1, 0.85);
  backdrop-filter: blur(6px);
  border-top: 2px solid var(--color-red);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

.visit-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.visit-card__eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--color-red);
  margin: 0 0 0.3rem;
}

.visit-card h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FAF9F6;
  margin: 0;
}

.visit-card__note {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: rgba(250, 249, 246, 0.65);
}

/* buttons: equal size, never overlap */
.visit-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.visit-card__actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

/* details: accordion on mobile */
.visit-details {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-3);
}

.visit-item {
  background: rgba(250, 249, 246, 0.05);
  border-radius: var(--radius-sm);
}

.visit-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: rgba(250, 249, 246, 0.75);
}

.visit-item summary::-webkit-details-marker { display: none; }

.visit-item summary::after {
  content: "+";
  font-size: 1.1rem;
  color: var(--color-red);
}

.visit-item[open] summary::after { content: "\2013"; }

.visit-item p {
  margin: 0;
  padding: 0 1rem 0.9rem;
  line-height: 1.6;
  color: #FAF9F6;
}

.visit-item a {
  color: #FAF9F6;
  text-decoration: none;
  transition: color 0.2s ease;
}

.visit-item a:hover { color: var(--color-red); }

/* desktop: wide and low, everything shown in a row */
@media (min-width: 1024px) {
  .visit-card__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .visit-card__actions {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;   /* both buttons match the wider one */
    flex-shrink: 0;
  }

  .visit-card__actions .btn { padding: 0 2rem; }

  .visit-details {
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }

  .visit-item { background: none; }

  .visit-item summary {
    padding: 0 0 0.4rem;
    cursor: default;
    pointer-events: none;
    font-size: 0.75rem;
    color: rgba(250, 249, 246, 0.5);
  }

  .visit-item summary::after { display: none; }

  .visit-item p { padding: 0; }
}
/* ==========================================================================
   COMPARE TABLE (Why Honda N-Box page)
   ========================================================================== */
.compare {
  margin-top: var(--space-4);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.compare-table thead th {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-align: left;
  padding: 0 var(--space-2) var(--space-2) 0;
  border-bottom: 2px solid var(--color-ink);
  font-weight: 600;
}

.compare-table tbody th,
.compare-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-2) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

/* version name */
.compare-table tbody th {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  width: 18%;
}

.compare-table .text-link {
  font-size: 0.8rem;
}

.compare__note {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
}

.compare__note a {
  color: var(--color-ink);
  text-underline-offset: 3px;
}

/* Mobile and tablet: each version becomes its own card */
@media (max-width: 899px) {
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
    width: 100%;
  }

  .compare-table tr {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-red);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .compare-table tbody th {
    width: 100%;
    padding: 0 0 var(--space-2);
    border-bottom: 0;
    font-size: 1.1rem;
  }

  .compare-table td {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 0;
  }

  /* the column name shown beside each value */
  .compare-table td::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    padding-top: 0.2em;
  }
}
/* --------------------------------------------------------------------------
   15. UTILITIES
   -------------------------------------------------------------------------- */
.text-center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.75em 1.25em;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

.fade-in-up {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Hidden from view, but read by Google and screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Can't see the right car?" block */
.stock-request {
  display: grid;
  gap: var(--space-4);
}

.stock-request p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .stock-request {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }
}
/* ==========================================================================
   JAPANESE INK STYLE
   - Ink-wash edges where black sections meet light ones (no hard line)
   - Optional splatter on chosen light sections: add class "ink-splatter"
   All decorative: pointer-events off, sits behind content.
   ========================================================================== */
:root {
  --ink-edge-height: clamp(48px, 7vw, 110px);
}

/* black sections get a soft, bleeding edge top and bottom */
.section--dark,
.site-footer {
  position: relative;
}

.section--dark::before,
.section--dark::after,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--ink-edge-height);
  background: url("../images/ink/ink-edge.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* top edge: ink bleeds upwards into the light section above */
.section--dark::before,
.site-footer::before {
  bottom: 100%;
  margin-bottom: -2px;            /* overlaps by 2px so no hairline gap shows */
}

/* bottom edge: flipped, bleeds down into the light section below */
.section--dark::after {
  top: 100%;
  margin-top: -2px;
  transform: scaleY(-1) scaleX(-1);   /* mirrored, so top and bottom don't look identical */
}

/* no wash between two dark areas that sit together */
.section--dark + .section--dark::before,
.section--dark:has(+ .section--dark)::after,
.hero-full + .section--dark::before,
.section--dark:has(+ .visit-section)::after,
.section--dark:has(+ .site-footer)::after,
.visit-section + .site-footer::before,
.section--dark + .site-footer::before {
  display: none;
}

/* content sits above the wash */
.section--dark > *,
.site-footer > * {
  position: relative;
  z-index: 2;
}

/* splatter on chosen light sections */
.ink-splatter {
  position: relative;
  isolation: isolate;
  overflow-x: clip;               /* stops the splatter causing sideways scroll */
}

.ink-splatter::before {
  content: "";
  position: absolute;
  top: clamp(1rem, 4vw, 3rem);
  right: clamp(-6rem, -4vw, -1rem);
  width: clamp(300px, 44vw, 680px);
  aspect-ratio: 8 / 5;
  background: url("../images/ink/ink-splatter.svg") center / contain no-repeat;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

/* mirrored variant for the opposite corner */
.ink-splatter--left::before {
  right: auto;
  left: clamp(-6rem, -4vw, -1rem);
  top: auto;
  bottom: clamp(1rem, 4vw, 3rem);
  transform: scaleX(-1) rotate(8deg);
}

@media (max-width: 767px) {
  .ink-splatter::before {
    width: 220px;
    opacity: 0.3;                 /* smaller and lighter on phones, where text sits closer */
  }
}
/* ==========================================================================
   STOCK FILTER (vehicles page)
   ========================================================================== */
.stock-filter {
  margin-bottom: var(--space-3);
}

.stock-filter__toggle {
  display: none;                       /* only shown on mobile */
}

.stock-filter__form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  gap: var(--space-2);
  align-items: end;
  padding: var(--space-3);
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
}

.stock-filter__field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-Grey);
  margin-bottom: 0.35rem;
}

.stock-filter__field select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Brand red instead of the browser's blue when a filter is selected */
.stock-filter__field select:focus,
.stock-filter__field select:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  border-color: var(--color-red);
}

.stock-filter :focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.stock-filter__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 0.9rem;
  color: var(--color-white);
  white-space: nowrap;
  cursor: pointer;
}

.stock-filter__check input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-red);
}

.stock-filter__reset {
  min-height: 2.75rem;
  padding: 0 1rem;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--color-white);
  cursor: pointer;
}

.stock-filter__reset:hover { color: var(--color-red); }

.stock-filter__count {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

.stock-filter__empty {
  padding: var(--space-5) 0;
  text-align: center;
}

.stock-filter__empty p { margin-inline: auto; }

.stock-filter__empty .btn { margin-inline: var(--space-2); }

.vehicle-card[hidden] { display: none; }

/* Tablet: two columns of filters */
@media (max-width: 1023px) {
  .stock-filter__form {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile: filters tucked behind a "Filter & sort" button */
@media (max-width: 767px) {
  .stock-filter__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding: 0 1rem;
    list-style: none;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .stock-filter__toggle::-webkit-details-marker { display: none; }

  .stock-filter__toggle::after {
    content: "+";
    font-size: 1.2rem;
    color: var(--color-red);
  }

  .stock-filter[open] .stock-filter__toggle::after { content: "\2013"; }

  .stock-filter__form {
    grid-template-columns: 1fr;
    margin-top: var(--space-1);
  }
}




/* --------------------------------------------------------------------------
   STATIC MAP LINK (contact page)
   Replaces the live Google Maps embed: a static picture that opens
   directions in Google Maps when clicked. Fills the same 16:9 box.
   -------------------------------------------------------------------------- */
.map-link {
  display: block;
  align-self: stretch;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.map-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.map-link:hover img,
.map-link:focus-visible img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .map-link img { transition: none; }
}