/*
Theme Name:  JAC Motors SA
Theme URI:   https://jacmotors.co.za
Author:      Great Creative Media
Author URI:  https://greatcreativemedia.co.za
Description: Custom ACF-powered theme for JAC Motors South Africa.
Version:     2.15.0
License:     Proprietary
Text Domain: jac-motors
*/

/* ═══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  --red:        #CC000C;
  /* Lightened red for TEXT on dark surfaces (brand red fails contrast as text) */
  --red-text:   #FF2935;
  --red-dark:   #A0000A;
  --charcoal:   #1C1C1E;
  --surface:    #2C2C2E;
  --deep:       #141414;
  --darker:     #0A0A0A;
  --dark:       #181818;
  --deeper-bg:  #101010;
  --white:      #FFFFFF;
  --light:      #F5F5F5;
  --green:      #00934D;
  --blue:       #00A4E0;
  --grey:       #8A8A8E;
  --border:     rgba(255,255,255,0.08);

  /* ── Brand colour system (driven by Customizer → Brand Colours) ──
     These are the single source of truth for editable colours.
     Defaults below match the Dark preset; Customizer overrides them
     via an inline :root block in wp_head. Decoupled per surface so
     any one can change without affecting the others. */
  --jac-accent:         #CC000C;
  --jac-accent-hover:   #A0000A;
  --jac-border:         rgba(255,255,255,0.08);

  --jac-header-bg:      #1C1C1E;
  --jac-header-text:    #FFFFFF;
  --jac-header-hover:   #CC000C;

  --jac-topbar-bg:      #141414;
  --jac-topbar-text:    rgba(255,255,255,0.6);
  --jac-topbar-hover:   #CC000C;

  --jac-page-bg:        #141414;
  --jac-page-heading:   #FFFFFF;
  --jac-page-text:      rgba(255,255,255,0.68);
  --jac-page-dim:       #8A8A8E;

  --jac-vcard-bg:       #2C2C2E;
  --jac-vcard-heading:  #FFFFFF;
  --jac-vcard-text:     rgba(255,255,255,0.55);

  --jac-card-bg:        #2C2C2E;
  --jac-card-heading:   #FFFFFF;
  --jac-card-text:      rgba(255,255,255,0.55);

  --jac-dark-bg:        #181818;
  --jac-dark-heading:   #FFFFFF;
  --jac-dark-text:      rgba(255,255,255,0.68);

  --jac-footer-bg:      #1C1C1E;
  --jac-footer-heading: #FFFFFF;
  --jac-footer-text:    rgba(255,255,255,0.6);
  --jac-footer-link:    rgba(255,255,255,0.6);

  --jac-btn-bg:         #CC000C;
  --jac-btn-text:       #FFFFFF;
  --jac-btn-hover:      #A0000A;
  --jac-btn-outline:    #CC000C;

  --jac-form-input-bg:    #1F1F21;
  --jac-form-input-text:  #FFFFFF;
  --jac-form-label-text:  rgba(255,255,255,0.5);
  --jac-form-body-text:   rgba(255,255,255,0.45);
  --jac-form-border:      rgba(255,255,255,0.15);

  --jac-diffband-bg:    #1C1C1E;
  --jac-diffband-icon:  #CC000C;
  --jac-diffband-text:  rgba(255,255,255,0.8);

  --jac-stats-bg:       #CC000C;
  --jac-stats-num:      #FFFFFF;
  --jac-stats-label:    rgba(255,255,255,0.85);

  --font-heading: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-body:    Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-ui:      Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --pad:    80px;
  --pad-m:  48px;
  --wrap:   1320px;
  --gutter: 24px;
  --radius: 6px;
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --dur:    0.25s;

  --header-h: 72px;
}

/* ═══════════════════════════════════════════
   BRAND TOKEN BRIDGE
   Maps the original semantic tokens to the editable
   brand variables so every existing rule that uses
   --charcoal / --surface / --deep etc. automatically
   follows the Customizer → Brand Colours settings.
   Decoupled surfaces (text, forms, outline button,
   footer link) are applied as explicit rules below.
══════════════════════════════════════════ */
:root {
  --red:      var(--jac-accent);
  --red-dark: var(--jac-accent-hover);
  --charcoal: var(--jac-header-bg);
  --surface:  var(--jac-vcard-bg);
  --deep:     var(--jac-page-bg);
  --dark:     var(--jac-dark-bg);
  --border:   var(--jac-border);
}


/* ═══════════════════════════════════════════
   RESET
══════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-body);
  background: var(--deep);
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,video { max-width:100%; height:auto; display:block; }
/* Mobile overflow safety net — prevents any wide child from causing
   horizontal page scroll on small screens. Avoids overflow on .container
   itself since it can wrap position:sticky elements. */
@media(max-width:768px){
  body { overflow-x:hidden; }
  table, pre, iframe, .gform_wrapper { max-width:100%; }
  img { height:auto; }
}
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input,textarea,select { font-family:inherit; }

/* ═══════════════════════════════════════════
   TYPOGRAPHY — matches reference site exactly
══════════════════════════════════════════ */

/* Headings — all uppercase, bold, Arial */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
}

/* H1 — Page heading */
h1 {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* H2 — Section heading */
h2 {
  font-size: clamp(20px, 3.5vw, 40px);
  font-weight: 700;
}

/* H3 — Subheading */
h3 {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* H4 */
h4 { font-size: 17px; font-weight: 700; }

/* H5 */
h5 { font-size: 15px; font-weight: 700; }

/* Body paragraph */
p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.68);
}

/* Lead / intro paragraph */
.lead {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}

/* Prose blocks */
.prose p { margin-bottom: 1.2em; font-size: 14px; line-height: 1.7; }
.prose h2,.prose h3 { margin: 1.5em 0 0.5em; }

/* Generic page body (page.php — legal pages, any page without a bespoke template) */
.page-content {
  max-width: 800px;
  margin: 0 auto;
}
.page-content p { font-size: 15px; line-height: 1.9; margin-bottom: 1.4em; }
.page-content h2 { font-size: 1.5rem; margin: 1.8em 0 0.6em; }
.page-content h3 { font-size: 1.15rem; margin: 1.6em 0 0.5em; }
.page-content h2:first-child,
.page-content h3:first-child { margin-top: 0; }
.page-content ul,
.page-content ol { margin: 0 0 1.4em 1.25em; }
.page-content li { font-size: 15px; line-height: 1.9; margin-bottom: 0.5em; }
.page-content a { color: var(--red); text-decoration: underline; }
.page-content a:hover { opacity: 0.8; }
.page-content strong { font-weight: 700; }
.page-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.page-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
.page-content th,
.page-content td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; font-size: 14px; }
.page-content blockquote {
  margin: 1.6em 0;
  padding-left: 20px;
  border-left: 3px solid var(--red);
  font-style: italic;
}

/* Single post body */
.single-content p {
  font-size: 16px;
  line-height: 1.9;
  color: #2C2C2C;
}

/* Eyebrow / section label — 10px, bold, uppercase, red, 3px spacing */
.section-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--red);
  margin-bottom: 10px;
}

/* Section heading accent — a short red rule beneath the heading, matching the
   treatment already used on the EV section headings. Applied to the named
   section headings only rather than to h2 broadly, so it cannot land under a
   centred heading (.about-cta) or inside a card. Headings that already carry a
   red .section-label eyebrow are excluded below, so each section ends up with
   one red cue rather than two stacked. */
.model-overview__heading,
.variants__heading,
.specs__heading,
.gallery__heading,
.video__heading,
.td-models__heading,
.how-it-works__heading,
.vision-grid__heading,
.vision-pillars__heading,
.related-posts__heading {
  position: relative;
  padding-bottom: 18px;
}
.model-overview__heading::after,
.variants__heading::after,
.specs__heading::after,
.gallery__heading::after,
.video__heading::after,
.td-models__heading::after,
.how-it-works__heading::after,
.vision-grid__heading::after,
.vision-pillars__heading::after,
.related-posts__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--red);
}
/* Already preceded by a red eyebrow — keep the single cue */
.section-label + h2 { padding-bottom: 0; }
.section-label + h2::after { display: none; }

/* Eyebrow utility class */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--red);
  display: block;
  margin-bottom: 8px;
}

/* Micro label — spec labels, meta, badges */
.micro-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
}

/* Card title */
.card-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
}

/* Card subtitle / variant */
.card-sub {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
}

/* Button text */
.btn {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Hero heading — largest */
.home-hero__heading,
.model-hero__name {
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 72px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

/* Page hero h1 */
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  text-transform: uppercase;
}

/* UI text */
.ui-text {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Light bg overrides */
.bg-white h1,.bg-white h2,.bg-white h3,.bg-white h4 { color: #1C1C1E; }
.bg-white p { color: #414042; }
.bg-light  h1,.bg-light h2,.bg-light h3,.bg-light h4 { color: #1C1C1E; }
.bg-light  p { color: #414042; }

/* ═══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section-pad { padding-block: var(--pad); }
@media(max-width:768px){ .section-pad { padding-block: var(--pad-m); } }

/* Section separators.
   The alternating section surfaces sit very close together (in light mode
   #EBEBEB vs #F0F0F0, about a 2% step), so boundaries between them read as one
   continuous surface. A hairline rule between consecutive sections restores the
   structure. Uses --border, so it follows light/dark automatically, matching the
   treatment already applied to the EV sections and the downloads block.

   The adjacent-sibling selector means the first section after a hero gets no
   rule, and elements that are not .section-pad — the difference band, the red
   CTA strip, the stats strip — naturally break the chain rather than being
   given a border of their own. */
.section-pad + .section-pad { border-top: 1px solid var(--border); }

/* Background helpers */
.bg-dark    { background: var(--dark); }
.bg-darker  { background: var(--darker); }
.bg-deeper  { background: var(--deeper-bg); }
.bg-surface { background: var(--surface); }
.bg-white   { background: var(--white); color: var(--charcoal); }
.bg-white p { color: var(--charcoal); }
.bg-light   { background: var(--light); color: var(--charcoal); }
.bg-light p { color: var(--charcoal); }
.bg-red     { background: var(--red); }

/* ═══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn--primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn--primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(204,0,12,0.4);
}
.btn--outline {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.btn--outline:hover {
  background: var(--red);
  color: var(--white);
}
.btn--outline-white {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn--outline-white:hover {
  background: var(--white);
  color: var(--charcoal);
}
.btn--white {
  background: var(--white);
  color: var(--red);
  border-color: var(--white);
}
.btn--white:hover { background: var(--light); }
.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}
.btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
}
.btn--sm  { padding: 9px 20px; font-size: 0.75rem; }
.btn--lg  { padding: 16px 40px; font-size: 0.9rem; }
.btn-cta  {
  background: var(--red);
  color: var(--white);
  padding: 11px 24px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.btn-cta:hover { background: var(--red-dark); }

.form-placeholder {
  background: var(--surface);
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
}
.form-placeholder p { color: rgba(255,255,255,0.4); font-size: 0.875rem; }

/* ═══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.animate-fade-up    { animation: fadeUp 0.7s var(--ease) both; }
.animate-delay-1    { animation-delay: 0.15s; }
.animate-delay-2    { animation-delay: 0.3s; }
.reveal             { opacity:0; transform:translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible  { opacity:1; transform:translateY(0); }
/* Safety net: if JS fails to run, reveal content becomes visible anyway
   after a short delay so nothing stays permanently hidden. */
@keyframes jacRevealFailsafe { to { opacity:1; transform:translateY(0); } }
.reveal { animation: jacRevealFailsafe 0.01s linear 2s forwards; }
.reveal.is-visible { animation: none; }

/* ═══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.topbar {
  background: var(--charcoal);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  font-size: 0.75rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.6);
}
.topbar__item a { color: rgba(255,255,255,0.6); transition: color var(--dur); }
.topbar__item a:hover { color: var(--red); }
.topbar__item svg { flex-shrink:0; }

/* ═══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--charcoal);
  border-bottom: 3px solid var(--red);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.header__logo { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; flex-shrink:0; line-height:1; }
.header__logo-img { height:44px !important; width:auto !important; max-width:160px !important; object-fit:contain; display:block; }
.header__logo-subtitle {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
}
.header__logo-text {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: 0.05em;
}

/* Nav */
.header__nav { flex:1; display:flex; justify-content:center; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--header-h);
}
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  height: 100%;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  transition: color var(--dur);
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}
.nav-link:hover,
.nav-item:hover > .nav-link { color: var(--white); border-bottom-color: var(--red); }
.nav-chevron { transition: transform var(--dur); }
.nav-item:hover > .nav-link .nav-chevron { transform: rotate(180deg); }

/* Standard dropdown */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  background: var(--charcoal);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  min-width: 200px;
  padding: 8px 0;
  border-radius: 0 0 var(--radius) var(--radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--dur) var(--ease);
  z-index: 100;
}
.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item a {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  transition: all var(--dur);
}
.dropdown-item a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.05);
  padding-left: 26px;
}

/* Mega menu styles are defined in the FORD-STYLE MEGA MENU section below */

/* Header actions */
.header__actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--dur);
}

/* ═══════════════════════════════════════════
   MOBILE NAV
══════════════════════════════════════════ */
.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: var(--charcoal);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.mobile-nav__overlay.is-open { opacity:1; visibility:visible; }
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.mobile-nav__close { color: var(--white); padding: 4px; }
.mobile-nav__body { flex:1; padding: 16px 0; }
/* ── Mobile nav — accordion (JAC_Mobile_Menu_Walker) ── */
.mobile-nav__list { list-style:none; margin:0; padding:0; }
.mobile-item { display:block; border-bottom:1px solid rgba(255,255,255,0.06); }
.mobile-item__row { display:flex; align-items:center; justify-content:space-between; }
.mobile-item--has-children > .mobile-item__row { cursor:pointer; }

/* Parent (depth 0) links — bold, white, larger */
.mobile-link {
  flex:1;
  display:block;
  padding:14px 20px;
  font-size:0.9rem;
  font-weight:700;
  color:var(--white);
  text-transform:none;
  letter-spacing:0;
  transition:color var(--dur);
}
.mobile-link:hover { color:var(--red); }

/* Toggle chevron button */
.mobile-toggle {
  background:none;
  border:none;
  color:rgba(255,255,255,0.5);
  padding:14px 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  transition:transform var(--dur), color var(--dur);
}
.mobile-toggle:hover { color:var(--white); }
.mobile-item--open > .mobile-item__row .mobile-toggle { transform:rotate(180deg); color:var(--red); }

/* Submenu — collapsed by default, expands when parent open */
.mobile-submenu {
  list-style:none;
  margin:0;
  padding:0;
  background:rgba(0,0,0,0.25);
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
}
.mobile-item--open > .mobile-submenu { max-height:1000px; }

/* Sub-items (depth 1+) — smaller, indented, lighter */
.mobile-submenu .mobile-link--depth-1 {
  padding:11px 20px 11px 36px;
  font-size:0.8rem;
  font-weight:400;
  color:rgba(255,255,255,0.65);
}
.mobile-submenu .mobile-link--depth-2 {
  padding-left:52px;
  font-size:0.78rem;
}
.mobile-submenu .mobile-link:hover { color:var(--white); background:rgba(255,255,255,0.04); }
.mobile-submenu .mobile-item { border-bottom:1px solid rgba(255,255,255,0.04); }
.mobile-submenu .mobile-item:last-child { border-bottom:none; }

.mobile-nav__footer { padding: 20px; border-top: 1px solid var(--border); }
.mobile-nav__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════ */
.page-hero {
  position: relative;
  min-height: 36vh;
  display: flex;
  align-items: flex-end;
  background: var(--charcoal) center/cover no-repeat;
  padding-bottom: 64px;
  overflow: hidden;
}
.page-hero--short { min-height: 36vh; }
.page-hero--news  { align-items: center; }
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 20%, rgba(10,10,10,0.5) 60%, rgba(10,10,10,0.2) 100%);
}
.page-hero__overlay--blue {
  background: linear-gradient(135deg, rgba(0,30,60,0.9) 0%, rgba(0,164,224,0.2) 100%);
}
.page-hero__content {
  position: relative;
  z-index: 2;
}
.page-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--red);
  margin-bottom: 8px;
}
.page-hero h1 { margin-bottom: 12px; }
.page-hero .lead { max-width: 560px; }

/* News category filter */
.news-category-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.news-cat-btn {
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  transition: all var(--dur);
}
.news-cat-btn:hover,
.news-cat-btn--active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* ═══════════════════════════════════════════
   HOMEPAGE HERO
══════════════════════════════════════════ */
.home-hero { position: relative; }
.home-hero__slider { position: relative; }
.home-hero__static {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  background: var(--charcoal) center/cover no-repeat;
}
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.3) 100%);
}
.home-hero__content {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}
.home-hero__heading {
  font-size: clamp(3rem, 7vw, 6rem);
  max-width: 700px;
  margin-bottom: 20px;
}
.home-hero__sub {
  max-width: 500px;
  margin-bottom: 32px;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.8);
}
.home-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; }

/* Stats bar */
.stats-bar {
  background: var(--red);
  position: relative;
  z-index: 3;
}
.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats-bar__item {
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stats-bar__item:last-child { border-right: none; }
.stats-bar__number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.stats-bar__prefix {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
.stats-bar__suffix {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
}
.stats-bar__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.8);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════
   FIND YOUR JAC (homepage range section)
   Component styles are in the RANGE CARDS section below.
══════════════════════════════════════════ */
.find-jac { background: var(--dark); }

/* ═══════════════════════════════════════════
   DIFFERENCE BAND
══════════════════════════════════════════ */
.difference-band { padding: 40px 0; } /* background set by --jac-diffband-bg in consumption layer */
.difference-band__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.difference-band__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 16px;
  border-right: 1px solid var(--border);
}
.difference-band__item:last-child { border-right: none; }
.difference-band__item svg { color: var(--red); flex-shrink:0; }
.difference-band__title {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
  text-align: center;
}
.difference-band__title strong { color: var(--white); display:block; }

/* ═══════════════════════════════════════════
   STOREPOINT / DEALER MAP (homepage)
══════════════════════════════════════════ */
.dealer-map-section { background: var(--deeper-bg); }
.dealer-map-section__header {
  text-align: center;
  margin-bottom: 40px;
}
.dealer-map-section__header h2 { margin-bottom: 12px; }
.dealer-map-section__header p {
  max-width: 560px;
  margin: 0 auto 24px;
  color: rgba(255,255,255,0.6);
}
.dealer-map-section__actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.storepoint-container { width: 100%; }
.dealer-map-embed { width: 100%; line-height: 0; }
.dealer-map-embed iframe { display: block; width: 100%; border: 0; }
.storepoint-placeholder {
  background: var(--surface);
  border: 2px dashed var(--border);
  padding: 60px;
  text-align: center;
  color: rgba(255,255,255,0.3);
}

/* ═══════════════════════════════════════════
   MODEL PAGE
══════════════════════════════════════════ */
/* Sticky model nav */
.model-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 800;
  background: var(--darker);
  border-bottom: 1px solid var(--border);
  border-top: none;
}
/* When WP admin bar is present */
.admin-bar .model-nav {
  top: calc(var(--header-h) + 32px);
}
@media(max-width:782px) {
  .admin-bar .model-nav { top: calc(var(--header-h) + 46px); }
}
.model-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.model-nav__name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
}
.model-nav__links { display:flex; gap:4px; flex:1; }
.model-nav__link {
  padding: 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--dur);
}
.model-nav__link:hover { color:var(--white); border-bottom-color: var(--model-accent, var(--red)); }
.model-nav__cta { margin-left: auto; flex-shrink:0; }

/* Model hero */
.model-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--charcoal) center center/cover no-repeat;
  background-size: cover;
}
.model-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.2) 100%);
}
.model-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 0 0;
  margin-bottom: 0;
}
.model-hero__content .container { padding-bottom: 56px; }
.model-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}
.model-hero__badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 12px;
}
.model-hero__name { font-size: clamp(3rem, 7vw, 6rem); margin-bottom: 8px; }
.model-hero__tagline {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.model-hero__price { font-size: 1rem; color: rgba(255,255,255,0.7); margin-bottom: 28px; }
.model-hero__price strong { color: var(--white); font-size: 1.25rem; }
.model-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 40px; }

/* Model stats strip */
.model-stats-strip {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.model-stats-strip__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
}
.model-stats-strip__item {
  padding: 18px 16px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.model-stats-strip__item:last-child { border-right:none; }
.model-stats-strip__value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}
.model-stats-strip__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}

/* Variants */
.variants__heading { margin-bottom: 8px; }
.variants__sub { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size:0.9rem; }
.variants-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.variant-card {
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--dur), transform var(--dur);
  position: relative;
  display: flex;
  flex-direction: column;
}
.variant-card:hover,
.variant-card--featured { border-color: var(--model-accent, var(--red)); }
.variant-card:hover { transform: translateY(-4px); }
.variant-card__badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  z-index: 2;
}
.variant-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
  background: var(--charcoal);
  padding: 8px;
  display: block;
}
.variant-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.variant-card__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  color: var(--white);
}

/* 4x2 / 4x4 pricing */
.variant-card__pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}
.variant-card__price-option {
  background: rgba(255,255,255,0.05);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.variant-card__price-option--4x4 {
  background: rgba(255,255,255,0.05);
  border-top: 2px solid var(--model-accent, var(--red));
}
.variant-card__drive {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
}
.variant-card__price {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.variant-card__specs { margin-bottom: 16px; }
.variant-card__specs li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.variant-card__specs li:last-child { border-bottom: none; }
.variant-card__spec-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
}
.variant-card__spec-value { color: var(--white); font-weight: 600; font-size: 0.85rem; }
.variant-card__desc { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-bottom: 12px; line-height: 1.6; }
.variant-card__vat-note { font-size: 0.7rem; color: rgba(255,255,255,0.3); margin-bottom: 16px; }
.variant-card__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: auto; padding-top: 16px; }

/* Features */
.features__heading { margin-bottom: 40px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.feature-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  transition: border-color var(--dur);
}
.feature-card:hover { border-color: var(--model-accent, var(--red)); }
.feature-card__icon { width: 40px; height: 40px; margin-bottom: 16px; }
.feature-card__icon-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.feature-card__title { font-size: 1rem; margin-bottom: 8px; }
.feature-card__text { font-size: 0.875rem; color: rgba(255,255,255,0.55); line-height: 1.6; }

/* Spec table */
.specs__heading { margin-bottom: 32px; }
.spec-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.spec-tab {
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--dur);
}
.spec-tab:hover,.spec-tab--active { color: var(--white); border-bottom-color: var(--model-accent, var(--red)); }
.spec-panel { display: none; }
.spec-panel--active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table__label {
  padding: 12px 16px 12px 16px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  width: 40%;
}
.spec-table__value {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--white);
}

/* Model gallery */
.gallery__heading { margin-bottom: 32px; }

/* Gallery category tabs */
.gallery-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.gallery-tab {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: rgba(255,255,255,0.6);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur);
}
.gallery-tab:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.gallery-tab--active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.model-gallery-item.is-hidden { display: none; }

/* Approved body shops — pledge stat labels (colour set here so light mode can flip it) */
.bodyshop-pledge__label { color: rgba(255,255,255,0.5); }
.model-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.model-gallery-item { display:block; overflow:hidden; border-radius: var(--radius); aspect-ratio: 4/3; padding:0; border:none; background:none; cursor:pointer; }
.model-gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s var(--ease); }
.model-gallery-item:hover img { transform: scale(1.05); }

/* ── Gallery Lightbox ── */
.jac-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(4px);
  animation: jacLbFade 0.2s ease;
}
.jac-lightbox[hidden] { display: none; }
@keyframes jacLbFade { from { opacity:0; } to { opacity:1; } }
.jac-lightbox__stage {
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.jac-lightbox__img {
  max-width: 90vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.jac-lightbox__caption {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}
.jac-lightbox__counter {
  color: rgba(255,255,255,0.45);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin: 0;
}
.jac-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur);
}
.jac-lightbox__close:hover { background: var(--red); }
.jac-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur);
}
.jac-lightbox__nav:hover { background: var(--red); }
.jac-lightbox__nav--prev { left: 24px; }
.jac-lightbox__nav--next { right: 24px; }
@media(max-width:768px) {
  .jac-lightbox__nav { width: 44px; height: 44px; }
  .jac-lightbox__nav--prev { left: 10px; }
  .jac-lightbox__nav--next { right: 10px; }
  .jac-lightbox__close { top: 12px; right: 12px; }
}

/* Video */
.video__heading { margin-bottom: 24px; }
.video-embed { position:relative; padding-bottom:56.25%; height:0; border-radius: var(--radius); overflow:hidden; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

/* Downloads */
.downloads-section { border-top: 1px solid var(--border); }
.downloads-section__inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.downloads-section__links { display:flex; gap:12px; flex-wrap:wrap; }

/* Model CTA strip */
.model-cta-strip { padding: 56px 0; }
.model-cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.model-cta-strip h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); color: var(--white); margin-bottom: 8px; }
.model-cta-strip p { color: rgba(255,255,255,0.8); }
.model-cta-strip__btns { display:flex; gap:12px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════
   PARTS PRICING
══════════════════════════════════════════ */
.parts-accordion { display:flex; flex-direction:column; gap:4px; }
.accordion-item { border-radius: var(--radius); overflow:hidden; border: 1px solid var(--border); }
.accordion-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 24px;
  background: var(--surface);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  transition: background var(--dur);
}
.accordion-trigger:hover,.accordion-item--open .accordion-trigger { background: rgba(204,0,12,0.15); color: var(--red); }
.accordion-trigger__chevron { margin-left: auto; flex-shrink:0; transition: transform var(--dur); }
.accordion-item--open .accordion-trigger__chevron { transform: rotate(180deg); }
.accordion-panel { display:none; padding: 0; }
.accordion-item--open .accordion-panel { display:block; }
.accordion-panel__empty { padding: 24px; color: rgba(255,255,255,0.4); font-size:0.875rem; }
.parts-table { width:100%; border-collapse:collapse; font-size:0.875rem; }
.parts-table thead tr { background: var(--charcoal); }
.parts-table th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}
.parts-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: rgba(255,255,255,0.8); }
.parts-table tr:last-child td { border-bottom: none; }
.parts-table__our-price { color: var(--red) !important; font-weight: 700; }
.parts-table--simple th.parts-table__price-col,
.parts-table--simple td.parts-table__our-price { text-align: right; white-space: nowrap; }
.parts-table--simple th:first-child,
.parts-table--simple td:first-child { width: 70%; }
.parts-table__empty { text-align:center; color: rgba(255,255,255,0.3); padding: 32px !important; }
.parts-order__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.parts-order__info h2 { margin-bottom: 16px; }
.parts-order__info p { margin-bottom: 24px; color: rgba(255,255,255,0.65); }
.parts-order__links { display:flex; flex-direction:column; gap:10px; }
.parts-order__form h3 { margin-bottom: 8px; }

/* ═══════════════════════════════════════════
   BOOK A SERVICE
══════════════════════════════════════════ */
.service-usp-bar { background: var(--charcoal); padding: 32px 0; border-bottom: 1px solid var(--border); }
.service-usp-bar__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.service-usp-bar__item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.service-usp-bar__title { font-size:0.8rem; font-weight:700; color:var(--white); line-height:1.3; }
.service-usp-bar__sub { font-size:0.7rem; color:rgba(255,255,255,0.4); }
/* service-stats-band styles are in the BOOK A SERVICE — new layout section below */
.how-it-works__heading { margin-bottom:40px; }
.how-it-works__steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
}
.how-it-works__step { position:relative; padding-left: 24px; }
.how-it-works__num {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}
.how-it-works__title { font-size:1rem; margin-bottom:8px; }
.how-it-works__text { font-size:0.875rem; color:rgba(255,255,255,0.55); }
.service-includes__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.service-includes__list h2 { margin-bottom:16px; }
.service-includes__list > p { margin-bottom:20px; color:rgba(255,255,255,0.6); }
.service-includes__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.service-includes__note { margin-top:20px; font-size:0.85rem; }
.service-includes__note a { color:var(--red); font-weight:700; }
.service-includes__form h3 { margin-bottom:8px; }
.service-includes__form > p { margin-bottom:24px; color:rgba(255,255,255,0.55); }
.service-dealer-cta { background: var(--red); padding:48px 0; }
.service-dealer-cta__inner {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.service-dealer-cta h2 { font-size: clamp(1.25rem,2.5vw,2rem); color:var(--white); margin-bottom:8px; }
.service-dealer-cta p { color:rgba(255,255,255,0.85); }

/* ═══════════════════════════════════════════
   BOOK A TEST DRIVE
══════════════════════════════════════════ */
.td-models__heading { margin-bottom: 12px; }
.td-models__intro { color: rgba(255,255,255,0.6); margin-bottom: 32px; max-width: 620px; }
.td-models__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.td-model-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur);
  position: relative;
}
.td-model-card:hover,
.td-model-card--active {
  border-color: var(--red);
  background: rgba(204,0,12,0.08);
}
.td-model-card img { width:100%; height:80px; object-fit:contain; margin-bottom:8px; }
.td-model-card__placeholder { width:100%; height:80px; background:var(--charcoal); border-radius:4px; margin-bottom:8px; }
.td-model-card__name {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.8);
}
.td-model-card--active .td-model-card__name { color: var(--red); }
.td-model-card__badge {
  position: absolute;
  top: 6px; right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
}
.td-model-card__badge--green { background: var(--green); }
.td-model-card__badge--blue  { background: var(--blue); }
.td-usp-band { background: var(--red); padding: 24px 0; }
.td-usp-band__inner {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.td-usp-band__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-right: 1px solid rgba(255,255,255,0.2);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
}
.td-usp-band__item:last-child { border-right:none; }
.td-available-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-top: 32px;
}
.td-available-item {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border);
}
.td-available-item__label { display:block; font-family:var(--font-heading); font-size:1.1rem; font-weight:800; text-transform:uppercase; margin-bottom:4px; }
.td-available-item__models { font-size:0.8rem; color:rgba(255,255,255,0.45); }
.what-to-expect__steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
  margin-top: 40px;
}
.what-to-expect__step { text-align:center; }
.what-to-expect__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: var(--red);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 16px;
}
.what-to-expect__step h3 { font-size:1rem; margin-bottom:8px; }
.what-to-expect__step p { font-size:0.875rem; color:rgba(255,255,255,0.55); }
.impressed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
}
.impressed-item svg { flex-shrink:0; margin-top:3px; }
.td-warranty { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.td-warranty p { color:rgba(255,255,255,0.6); }
.td-form__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.td-form__info h2 { margin-bottom:16px; }
.td-form__info p { color:rgba(255,255,255,0.6); margin-bottom:20px; }
.td-form__phone {
  display:flex; align-items:center; gap:8px;
  font-size:1.1rem; font-weight:700; color:var(--red);
}
.td-form__form h3 { margin-bottom:8px; }
.td-form__form > p { margin-bottom:24px; color:rgba(255,255,255,0.55); }

/* Full-width form layout (heading above, form below) */
.td-form__wrap {
  max-width: 820px;
  margin: 0 auto;
}
.td-form__head { text-align: center; margin-bottom: 36px; }
.td-form__head h2 { margin-bottom: 14px; }
.td-form__head p { color: rgba(255,255,255,0.6); max-width: 560px; margin: 0 auto 16px; }
.td-form__head .td-form__phone { justify-content: center; }
.td-form__body {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
}
@media(max-width:600px) { .td-form__body { padding: 24px; } }

/* ═══════════════════════════════════════════
   ABOUT JAC
══════════════════════════════════════════ */
.about-intro { max-width:760px; }
.about-intro__text p { font-size:1.05rem; line-height:1.8; color:rgba(255,255,255,0.75); }
.about-stats-band { background: var(--red); }
.about-stats-band__inner {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.about-stats-band__item {
  padding: 28px 16px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
  display: flex; flex-direction:column; align-items:center; gap:4px;
}
.about-stats-band__item:last-child { border-right:none; }
.about-stats-band__number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.about-stats-band__suffix { font-family:var(--font-heading); font-size:1.25rem; color:rgba(255,255,255,0.8); }
.about-stats-band__label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.8); }
/* Timeline */
.timeline { position:relative; padding:32px 0; }
.timeline::before {
  content:'';
  position:absolute;
  left:50%; top:0; bottom:0;
  width:2px;
  background: var(--border);
  transform: translateX(-50%);
}
.timeline-item {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-bottom: 40px;
  align-items: center;
  position: relative;
}
.timeline-item__dot {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:14px; height:14px;
  background:var(--red);
  border-radius:50%;
  border:3px solid var(--darker);
  z-index:1;
}
.timeline-item--left .timeline-item__card { grid-column:1; text-align:right; padding-right:40px; }
.timeline-item--right .timeline-item__card { grid-column:2; padding-left:40px; }
.timeline-item__year {
  display:block;
  font-family:var(--font-ui);
  font-size:0.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.15em;
  color:var(--red);
  margin-bottom:6px;
}
.timeline-item__title { font-size:0.9rem; margin-bottom:6px; }
.timeline-item__text { font-size:0.8rem; color:rgba(255,255,255,0.5); line-height:1.6; }
.about-production-band { background: var(--charcoal); padding:40px 0; }
.about-production-band__inner {
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.about-production-band__item {
  padding:20px; text-align:center; border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.about-production-band__item:last-child { border-right:none; }
.about-production-band__number { font-family:var(--font-heading); font-size:2rem; font-weight:900; color:var(--red-text); line-height:1; }
.about-production-band__suffix { font-family:var(--font-heading); font-size:1rem; color:var(--red); }
.about-production-band__label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.5); }
.world-class__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.world-class__grid h2 { margin-bottom:16px; }
.world-class__grid p { color:rgba(255,255,255,0.65); margin-bottom:16px; line-height:1.8; }
.about-cta { text-align:center; }
.about-cta h2 { margin-bottom:12px; }
.about-cta p { color:rgba(255,255,255,0.6); margin-bottom:32px; }
.about-cta__btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ═══════════════════════════════════════════
   BRAND VISION
══════════════════════════════════════════ */
.vision-intro { max-width:760px; }
.vision-intro__text p { font-size:1.05rem; line-height:1.8; color:rgba(255,255,255,0.75); }
.vision-section { display:flex; gap:32px; align-items:flex-start; }
.vision-section__icon { flex-shrink:0; margin-top:4px; }
.vision-section__body h2 { font-size:clamp(1.5rem,2.5vw,2.25rem); margin-bottom:12px; }
.vision-section__body p { color:rgba(255,255,255,0.65); line-height:1.8; }
.vision-pillars__heading { margin-bottom:40px; }
.vision-pillars__grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.vision-pillar {
  background:var(--surface);
  border-radius:var(--radius);
  padding:28px;
  border:1px solid var(--border);
  border-left:4px solid var(--red);
}
.vision-pillar__title { font-size:1rem; margin-bottom:10px; letter-spacing:0.1em; }
.vision-pillar__text { font-size:0.875rem; color:rgba(255,255,255,0.55); line-height:1.7; }

/* Vision & Values card grid */
.vision-grid__heading { font-size:clamp(1.75rem,3vw,2.5rem); margin:8px 0 32px; }
.vision-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.vision-grid-card {
  background:var(--surface);
  border-radius:var(--radius);
  padding:32px;
  border:1px solid var(--border);
  border-top:4px solid var(--red);
}
.vision-grid-card__icon {
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(204,0,12,0.1);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.vision-grid-card__title { font-size:1.25rem; margin-bottom:12px; }
.vision-grid-card__text { font-size:0.9rem; color:rgba(255,255,255,0.6); line-height:1.75; }
@media(max-width:768px) {
  .vision-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════
   CONTACT US
══════════════════════════════════════════ */
.contact-emergency {
  background: var(--red);
  padding: 20px 0;
}
.contact-emergency__inner {
  display:flex; align-items:center; gap:20px;
}
.contact-emergency__badge {
  background: rgba(0,0,0,0.25);
  padding: 4px 12px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.8);
  flex-shrink:0;
}
.contact-emergency__label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2px;
}
.contact-emergency__number {
  display:block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.02em;
}
.contact-emergency__sub { font-size:0.7rem; color:rgba(255,255,255,0.6); }
/* Contact layout — details sit as a row above a centred form.
   Previously a 1fr / 1.4fr two-column grid, but the details column ran out
   after three items while the form kept going, leaving dead space at lower
   left and squeezing the form into roughly half the width. */
.contact-layout { display: block; }
.contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  padding-bottom: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.contact-form-wrap {
  max-width: 720px;
  margin-inline: auto;
}
.contact-form-wrap h2,
.contact-form-wrap > p { text-align: center; }
.contact-details__item { display:flex; gap:14px; align-items:flex-start; }
.contact-details__item svg { flex-shrink:0; margin-top:3px; }
.contact-details__label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.4); margin-bottom:4px; }
.contact-details__item a { color:var(--white); transition:color var(--dur); }
.contact-details__item a:hover { color:var(--red); }
.contact-form-wrap h2 { margin-bottom:4px; }
.contact-form-wrap > p { color:rgba(255,255,255,0.5); margin-bottom:24px; }
.contact-map img { width:100%; display:block; }
.contact-footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-footer-grid h3 { margin-bottom:12px; }
.contact-footer-grid p { font-size:0.9rem; color:rgba(255,255,255,0.6); line-height:1.6; }
.contact-footer-grid div:last-child { display:flex; flex-direction:column; gap:10px; }

/* ═══════════════════════════════════════════
   NEWS / BLOG
══════════════════════════════════════════ */
.news-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 56px;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
}
.news-featured__img { display:block; aspect-ratio:16/9; overflow:hidden; }
.news-featured__img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease); }
.news-featured:hover .news-featured__img img { transform:scale(1.03); }
.news-featured__body { padding:32px 32px 32px 0; }
.news-featured__title { font-size:clamp(1.5rem,2.5vw,2.25rem); margin:10px 0 16px; }
.news-featured__title a { color:var(--white); transition:color var(--dur); }
.news-featured__title a:hover { color:var(--red); }
.news-featured__excerpt { color:rgba(255,255,255,0.6); margin-bottom:20px; line-height:1.7; }
.news-featured__meta { font-size:0.75rem; color:rgba(255,255,255,0.35); margin-bottom:20px; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.news-card {
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform var(--dur), border-color var(--dur);
}
.news-card:hover { transform:translateY(-4px); border-color: var(--red); }
.news-card__img-wrap { display:block; aspect-ratio:16/9; overflow:hidden; }
.news-card__img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease); }
.news-card:hover .news-card__img-wrap img { transform:scale(1.05); }
.news-card__img-placeholder { width:100%; height:100%; background:var(--charcoal); }
.news-card__body { padding: 20px; }
.news-card__cat {
  display:inline-block;
  padding: 3px 10px;
  background: var(--red);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: 10px;
}
.news-card__title { font-size:1rem; margin-bottom:8px; line-height:1.3; }
.news-card__title a { color:var(--white); transition:color var(--dur); }
.news-card__title a:hover { color:var(--red); }
.news-card__date { font-size:0.75rem; color:rgba(255,255,255,0.35); display:block; margin-bottom:12px; }
.news-card__read-more { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--red); }
.news-pagination { display:flex; justify-content:center; gap:8px; margin-top:56px; flex-wrap:wrap; }
.news-pagination a,.news-pagination span {
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  transition: all var(--dur);
}
.news-pagination a:hover { border-color:var(--red); color:var(--red); }
.news-pagination .current { background:var(--red); border-color:var(--red); color:var(--white); }

/* ═══════════════════════════════════════════
   SINGLE POST
══════════════════════════════════════════ */
/* Post featured image — contained and uncropped.
   Previously full-bleed with max-height + overflow:hidden. The img had height:100%
   but the container had no definite height for that to resolve against, so
   object-fit:cover never applied and the overflow simply clipped the bottom off
   (worse the wider the screen). Constraining WIDTH instead of height shows the
   whole image at every viewport. 1200px matches the blog-featured size, so it
   never upscales. */
.single-hero {
  max-width: 1200px;
  margin: 32px auto 0;
  padding-inline: var(--gutter);
}
.single-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.single-header { padding:40px 0 32px; border-bottom:1px solid rgba(0,0,0,0.1); }
.single-header.bg-white h1,.single-header.bg-white p { color:var(--charcoal); }
.single-header__meta {
  display:flex; align-items:center; gap:8px;
  font-size:0.8rem; color:rgba(0,0,0,0.45); margin-bottom:16px; flex-wrap:wrap;
}
.single-header__cat {
  display:inline-block; padding:2px 10px;
  background:var(--red); border-radius:999px;
  font-size:0.65rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--white);
}
.single-header__title { font-size:clamp(2rem,4vw,3.5rem); color:var(--charcoal); margin-bottom:8px; }
.single-header__author { font-size:0.85rem; color:rgba(0,0,0,0.45); }
.single-layout {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:56px;
  align-items:start;
}
.single-content { color:var(--charcoal); }
.single-content h2,.single-content h3,.single-content h4 { color:var(--charcoal); margin:32px 0 12px; }
.single-content p { color:rgba(0,0,0,0.75); margin-bottom:20px; line-height:1.8; }
.single-content a { color:var(--red); text-decoration:underline; }
.single-content img { border-radius:var(--radius); margin:24px 0; }
.single-content blockquote {
  border-left:4px solid var(--red);
  padding:16px 24px;
  background:rgba(204,0,12,0.05);
  border-radius:0 var(--radius) var(--radius) 0;
  margin:24px 0;
  font-style:italic;
  color:rgba(0,0,0,0.7);
}
.single-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:32px; padding-top:24px; border-top:1px solid rgba(0,0,0,0.1); }
.single-tag {
  padding:4px 12px; border-radius:999px;
  border:1px solid rgba(0,0,0,0.15);
  font-size:0.75rem; color:rgba(0,0,0,0.5);
  transition:all var(--dur);
}
.single-tag:hover { border-color:var(--red); color:var(--red); }
.single-post-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; padding-top:32px; border-top:1px solid rgba(0,0,0,0.1); }
.single-post-nav__item {
  display:block; padding:16px;
  background:var(--light); border-radius:var(--radius);
  border:1px solid rgba(0,0,0,0.08);
  transition:border-color var(--dur);
}
.single-post-nav__item:hover { border-color:var(--red); }
.single-post-nav__item span { display:block; font-size:0.7rem; color:rgba(0,0,0,0.4); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.single-post-nav__item strong { display:block; font-size:0.85rem; color:var(--charcoal); }
.single-post-nav__item--next { text-align:right; }
.single-sidebar { position:sticky; top:calc(var(--header-h) + 24px); }
.sidebar-widget { background:var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.sidebar-widget__title { font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:rgba(0,0,0,0.4); margin-bottom:14px; }
.share-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.share-btn {
  padding:8px; border-radius:var(--radius);
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--white); text-align:center; transition:opacity var(--dur);
}
.share-btn:hover { opacity:0.85; }
.share-btn--fb { background:#1877F2; }
.share-btn--wa { background:#25D366; }
.share-btn--tw { background:#000; }
.sidebar-cta {
  background:var(--red);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
  text-align:center;
}
.sidebar-cta h4 { font-size:0.9rem; color:var(--white); margin-bottom:6px; }
.sidebar-cta p { font-size:0.8rem; color:rgba(255,255,255,0.8); margin-bottom:16px; }
.sidebar-recent-post {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.06);
}
.sidebar-recent-post img { width:52px; height:38px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.sidebar-recent-post span { font-size:0.8rem; color:var(--charcoal); line-height:1.4; transition:color var(--dur); }
.sidebar-recent-post:hover span { color:var(--red); }
.related-posts__heading { margin-bottom:32px; }

/* ═══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer { background: var(--charcoal); border-top: 3px solid var(--red); padding: 56px 0 0; }
.footer__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 48px;
}
.footer__heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 20px;
}
.footer__links { display:flex; flex-direction:column; gap:10px; }
.footer__links a { font-size:0.875rem; color:rgba(255,255,255,0.6); transition:color var(--dur); }
.footer__links a:hover { color:var(--red); }
.footer__col p { font-size:0.875rem; color:rgba(255,255,255,0.6); line-height:1.6; margin-bottom:8px; }
.footer__col a { color:rgba(255,255,255,0.6); transition:color var(--dur); }
.footer__col a:hover { color:var(--red); }
.footer__social { display:flex; gap:8px; margin-top:16px; }
.footer__social-link {
  width:36px; height:36px;
  background:rgba(255,255,255,0.08);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui);
  font-size:0.65rem; font-weight:800;
  color:rgba(255,255,255,0.6);
  transition:all var(--dur);
}
.footer__social-link:hover { background:var(--red); color:var(--white); }
.footer__social-icon { width:18px; height:18px; object-fit:contain; display:block; }
.footer__social-link svg { width:18px; height:18px; display:block; }
.footer__roadside {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 16px;
}
.footer__roadside a { color: var(--white); }
.footer__roadside a:hover { color: var(--red); }
.footer__legal-links { display:flex; flex-direction:column; gap:8px; }
.footer__legal-links a { font-size:0.75rem; color:rgba(255,255,255,0.4); transition:color var(--dur); }
.footer__legal-links a:hover { color:var(--white); }
.footer__bar {
  background: rgba(0,0,0,0.3);
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.footer__bar p { font-size:0.75rem; color:rgba(255,255,255,0.3); }
.footer__bar a { color:rgba(255,255,255,0.5); transition:color var(--dur); }
.footer__bar a:hover { color:var(--white); }

/* ═══════════════════════════════════════════
   GRAVITY FORMS — surface-aware, two-column, polished
   (ported from the proven DFSK approach; consumes the
   dedicated --jac-form-* tokens so forms stay readable
   in any theme mode, decoupled from cards/pages.)
══════════════════════════════════════════ */

/* Hide admin / hidden / honeypot fields — they should never render */
.gform_wrapper .gform_hidden,
.gform_wrapper input[type="hidden"],
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield.gform_hidden { display:none !important; }

/* Field list as flex grid — enables two-column rows */
.gform_wrapper .gform_fields {
  display:flex !important; flex-wrap:wrap; gap:20px 20px;
  margin:0; padding:0; list-style:none;
}
.gform_wrapper .gfield { margin:0 !important; padding:0 !important; min-width:0; flex:1 1 100%; }

/* Half-width support — modern GF + classic CSS-ready classes */
.gform_wrapper .gfield--width-half,
.gform_wrapper .gf_left_half,
.gform_wrapper .gf_right_half { flex:1 1 calc(50% - 10px); }
.gform_wrapper .gfield--width-third,
.gform_wrapper .gf_left_third,
.gform_wrapper .gf_middle_third,
.gform_wrapper .gf_right_third { flex:1 1 calc(33.333% - 14px); }

/* Labels */
.gform_wrapper .gfield_label,
.gform_wrapper .gsection_title,
.gform_wrapper legend.gfield_label {
  display:block; margin-bottom:8px;
  color:var(--jac-form-label-text) !important;
  font-family:var(--font-ui) !important;
  font-size:12px !important; letter-spacing:0.06em;
  text-transform:uppercase; font-weight:700 !important;
}
.gform_wrapper .gfield_required { color:var(--red) !important; margin-left:4px; }
.gform_wrapper .gfield_description,
.gform_wrapper .ginput_counter {
  color:var(--jac-form-body-text) !important;
  font-size:12px !important; margin-top:6px;
}

/* Inputs — the core fix */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="search"],
.gform_wrapper select,
.gform_wrapper textarea {
  width:100% !important; box-sizing:border-box;
  -webkit-appearance:none !important; appearance:none !important;
  background:var(--jac-form-input-bg) !important;
  border:1px solid var(--jac-form-border) !important;
  color:var(--jac-form-input-text) !important;
  -webkit-text-fill-color:var(--jac-form-input-text) !important;
  border-radius:var(--radius) !important;
  padding:13px 16px !important;
  font-family:var(--font-body) !important;
  font-size:15px !important;
}
/* Dark-mode safeguard: force a solid dark input background so a saved white
   Customizer value can't cause white-on-white. Light mode (.jac-light) keeps
   its own white inputs with dark text, so it is deliberately excluded. */
body:not(.jac-light) .gform_wrapper input[type="text"],
body:not(.jac-light) .gform_wrapper input[type="email"],
body:not(.jac-light) .gform_wrapper input[type="tel"],
body:not(.jac-light) .gform_wrapper input[type="number"],
body:not(.jac-light) .gform_wrapper input[type="url"],
body:not(.jac-light) .gform_wrapper input[type="password"],
body:not(.jac-light) .gform_wrapper input[type="date"],
body:not(.jac-light) .gform_wrapper input[type="search"],
body:not(.jac-light) .gform_wrapper select,
body:not(.jac-light) .gform_wrapper textarea {
  background:#1F1F21 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color:var(--jac-form-body-text) !important; opacity:0.7;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color:var(--red) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(204,0,12,0.15) !important;
}
.gform_wrapper textarea { min-height:120px; resize:vertical; }

/* Autofill (Chrome forces its own colours — override) */
.gform_wrapper input:-webkit-autofill,
.gform_wrapper input:-webkit-autofill:hover,
.gform_wrapper input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--jac-form-input-text) !important;
  -webkit-box-shadow:0 0 0 1000px var(--jac-form-input-bg) inset !important;
  caret-color:var(--jac-form-input-text);
}

/* Themed select arrow — custom SVG, no native browser arrow */
.gform_wrapper select {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7A80' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 16px center !important;
  padding-right:42px !important;
}
.gform_wrapper select option { background:#1C1C1E; color:#fff; }

/* Remove GF's default fieldset borders on grouped fields */
.gform_wrapper fieldset.gfield,
.gform_wrapper .gfield--type-checkbox,
.gform_wrapper .gfield--type-radio,
.gform_wrapper .gfield--type-consent,
.gform_wrapper .gfield--type-multiselect,
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_consent {
  border:none !important; padding:0 !important; margin:0 !important;
}
.gform_wrapper fieldset.gfield > legend,
.gform_wrapper legend.gfield_label {
  float:none !important; width:auto !important; position:static !important;
  display:block; margin:0 0 10px 0 !important;
  padding:0 !important; border:none !important;
}

/* Radio / checkbox rows */
.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice {
  display:flex; align-items:flex-start; gap:10px; margin:9px 0;
}
.gform_wrapper .gfield_radio input,
.gform_wrapper .gfield_checkbox input,
.gform_wrapper .gfield--type-consent input[type="checkbox"] {
  width:18px !important; height:18px; margin-top:1px;
  accent-color:var(--red); flex-shrink:0;
}
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield--type-consent label,
.gform_wrapper .gchoice label {
  color:var(--jac-form-body-text) !important; text-transform:none;
  font-family:var(--font-body) !important; letter-spacing:0;
  font-size:14px !important; margin:0; line-height:1.5;
}

/* "Select All" toggle — quiet utility link */
.gform_wrapper .gfield_checkbox .gchoice_select_all,
.gform_wrapper button.gfield_choice_all_toggle,
.gform_wrapper .gchoice_select_all {
  background:none !important; border:none !important;
  padding:4px 0 !important; margin-top:4px !important;
  color:var(--jac-form-body-text) !important;
  font-family:var(--font-ui) !important; font-size:11px !important;
  letter-spacing:0.08em; text-transform:uppercase;
  cursor:pointer; opacity:0.75;
}
.gform_wrapper .gchoice_select_all:hover,
.gform_wrapper button.gfield_choice_all_toggle:hover {
  opacity:1; color:var(--red) !important;
}

/* Consent — borderless single row */
.gform_wrapper .ginput_container_consent {
  display:flex; align-items:flex-start; gap:10px;
}

/* Validation */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color:var(--red) !important;
}
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  color:var(--red) !important; font-size:12px !important;
  margin-top:6px; background:none !important;
  border:none !important; padding:0 !important;
}
.gform_wrapper .gform_validation_errors {
  background:rgba(204,0,12,0.08) !important;
  border:1px solid var(--red) !important;
  border-radius:var(--radius) !important;
  color:var(--jac-form-input-text) !important;
}

/* Submit button */
.gform_wrapper .gform_footer { margin-top:24px; padding:0 !important; flex:1 1 100%; }
.gform_wrapper .gform_button {
  background:var(--jac-btn-bg) !important; color:var(--jac-btn-text) !important;
  border:none !important;
  font-family:var(--font-ui) !important; font-size:13px !important;
  letter-spacing:0.12em !important; text-transform:uppercase !important;
  padding:15px 34px !important; border-radius:var(--radius) !important;
  cursor:pointer; transition:background var(--dur) var(--ease);
}
.gform_wrapper .gform_button:hover { background:var(--jac-btn-hover) !important; }

/* Stack all half/third widths to full on mobile */
@media(max-width:600px){
  .gform_wrapper .gfield--width-half,
  .gform_wrapper .gf_left_half, .gform_wrapper .gf_right_half,
  .gform_wrapper .gfield--width-third,
  .gform_wrapper .gf_left_third, .gform_wrapper .gf_middle_third,
  .gform_wrapper .gf_right_third { flex:1 1 100%; }
}

/* ═══════════════════════════════════════════
   EV PAGE SECTIONS
══════════════════════════════════════════ */
.ev-section__heading { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 40px; color: var(--red); position: relative; padding-bottom: 16px; }
.ev-section__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--red); }
.ev-section__heading--center { text-align: center; }
.ev-section__heading--center::after { left: 50%; transform: translateX(-50%); }
/* Clear divider between stacked EV sections */
#ev-features, #ev-charging, #ev-safety { border-top: 1px solid var(--border); }

/* Key Features grid */
.ev-kf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.ev-kf-card { text-align: center; }
.ev-kf-card__icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(204,0,12,0.08);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.ev-kf-card__title { font-size: 1.05rem; margin-bottom: 8px; }
.ev-kf-card__text { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* Charging Stats */
.ev-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 900px; margin: 0 auto; }
.ev-stats__left { text-align: center; }
.ev-stats__plug { margin-bottom: 20px; color: var(--white); }
.ev-stats__left-line { color: #fff; font-weight: 700; margin-bottom: 6px; }
.ev-stats__left-line--lead { color: var(--red); font-size: 1.4rem; font-family: var(--font-heading); margin-bottom: 18px; }
.ev-stats__row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.ev-stats__label { display: block; color: #fff; font-weight: 700; font-size: 0.95rem; }
.ev-stats__value { display: block; color: var(--red); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 900; line-height: 1.1; }

/* Safety grid */
.ev-safety-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.ev-safety-item { text-align: center; }
.ev-safety-item__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(204,0,12,0.08);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.ev-safety-item__title { font-size: 0.95rem; margin-bottom: 6px; }
.ev-safety-item__text { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.5; }

/* Trusted Parts */
.ev-parts { background: var(--red); padding: 64px 0; text-align: center; }
.ev-parts__heading { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 14px; }
.ev-parts__intro { color: rgba(255,255,255,0.9); max-width: 700px; margin: 0 auto 40px; line-height: 1.6; }
.ev-parts__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 48px; }
.ev-parts__logo img { max-height: 44px; width: auto; filter: brightness(0) invert(1); }
.ev-parts__name { color: #fff; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 900; letter-spacing: 0.02em; }

@media(max-width:1024px) {
  .ev-kf-grid { grid-template-columns: repeat(2, 1fr); }
  .ev-safety-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px) {
  .ev-stats__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media(max-width:600px) {
  .ev-kf-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}

/* ═══════════════════════════════════════════
   CAMPAIGN LANDING PAGE
══════════════════════════════════════════ */
.campaign-hero { padding: 80px 0 40px; text-align: center; }
.campaign-hero__inner { max-width: 760px; margin: 0 auto; }
.campaign-hero__heading { font-size: clamp(2rem, 5vw, 3.25rem); margin: 10px 0 20px; line-height: 1.1; }
.campaign-hero__intro { color: rgba(255,255,255,0.75); font-size: 1.05rem; line-height: 1.7; }
.campaign-hero__intro p { margin-bottom: 14px; }
.campaign-hero__btn { margin: 24px auto 0; }
.campaign-hero__img-wrap { margin: 40px auto 0; max-width: 720px; }
.campaign-hero__img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* Steps */
.campaign-steps__heading, .campaign-cards__heading { text-align: center; font-size: clamp(1.75rem,3vw,2.5rem); margin-bottom: 12px; }
.campaign-cards__intro { text-align: center; color: rgba(255,255,255,0.6); max-width: 620px; margin: 0 auto 36px; }
.campaign-steps__heading { margin-bottom: 40px; }
.campaign-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.campaign-step { text-align: center; }
.campaign-step__badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.campaign-step__badge img { width: 32px; height: 32px; object-fit: contain; }
.campaign-step__num { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 900; }
.campaign-step__title { font-size: 1.15rem; margin-bottom: 10px; }
.campaign-step__text { color: rgba(255,255,255,0.6); font-size: 0.9rem; line-height: 1.7; }

/* Form */
.campaign-form__wrap { max-width: 760px; margin: 0 auto; }
.campaign-form__heading { text-align: center; font-size: clamp(1.75rem,3vw,2.5rem); margin-bottom: 12px; }
.campaign-form__intro { text-align: center; color: rgba(255,255,255,0.65); margin-bottom: 32px; }
.campaign-form__body {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
}

/* Cards / Prizes */
.campaign-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.campaign-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.campaign-card__icon { width: 56px; height: 56px; margin: 0 auto 18px; }
.campaign-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.campaign-card__title { font-size: 1.25rem; margin-bottom: 12px; }
.campaign-card__text { color: rgba(255,255,255,0.65); font-size: 0.9rem; line-height: 1.7; }
.campaign-card__text p { margin-bottom: 8px; }

@media(max-width:768px) {
  .campaign-steps, .campaign-cards { grid-template-columns: 1fr; }
  .campaign-form__body { padding: 24px; }
}

/* ═══════════════════════════════════════════
   THANK YOU PAGE
══════════════════════════════════════════ */
.ty-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  text-align: center;
}
body.ty-stripped .ty-section { min-height: 100vh; }
.ty-inner { max-width: 620px; margin: 0 auto; }
.ty-check {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(204,0,12,0.1);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}
.ty-heading { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.ty-message { color: rgba(255,255,255,0.7); font-size: 1.05rem; line-height: 1.7; margin-bottom: 32px; }
.ty-message p { margin-bottom: 12px; }
.ty-btn { margin: 0 auto; }

/* ═══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.breadcrumb { font-size:0.75rem; color:rgba(255,255,255,0.35); margin-bottom:12px; }
.breadcrumb a { color:rgba(255,255,255,0.35); transition:color var(--dur); }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb span { margin:0 4px; opacity:0.4; }

/* ═══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1100px) {
  .difference-band__grid { grid-template-columns:repeat(3,1fr); }
  .difference-band__item:nth-child(3) { border-right:none; }
}
@media(max-width:1024px) {
  .header__nav { display:none; }
  .hamburger { display:flex; }
  .single-layout { grid-template-columns:1fr; }
  .single-sidebar { position:static; }
  .contact-layout { grid-template-columns:1fr; }
  .td-form__grid { grid-template-columns:1fr; }
  .parts-order__grid { grid-template-columns:1fr; }
  .service-includes__grid { grid-template-columns:1fr; }
  .timeline::before { display:none; }
  .timeline-item { grid-template-columns:1fr; gap:0; }
  .timeline-item--left .timeline-item__card,
  .timeline-item--right .timeline-item__card { grid-column:1; text-align:left; padding:0 0 0 20px; border-left:3px solid var(--red); }
  .timeline-item__dot { display:none; }
  .world-class__grid { grid-template-columns:1fr; }
  .vision-pillars__grid { grid-template-columns:1fr; }
  .footer__inner { grid-template-columns:1fr 1fr; }
  .news-featured { grid-template-columns:1fr; }
  .news-featured__body { padding:24px; }
}
@media(max-width:768px) {
  :root { --header-h:60px; }
  .stats-bar__inner { grid-template-columns:repeat(2,1fr); }
  .stats-bar__item:nth-child(2) { border-right:none; }
  .difference-band__grid { grid-template-columns:repeat(2,1fr); }
  .service-usp-bar__inner { grid-template-columns:repeat(3,1fr); }
  .service-stats-band__inner { grid-template-columns:repeat(2,1fr); }
  .how-it-works__steps { grid-template-columns:1fr; }
  .what-to-expect__steps { grid-template-columns:1fr; }
  .td-available-grid { grid-template-columns:repeat(2,1fr); }
  .td-usp-band__inner { grid-template-columns:repeat(2,1fr); }
  .about-stats-band__inner { grid-template-columns:repeat(2,1fr); }
  .about-production-band__inner { grid-template-columns:repeat(2,1fr); }
  .variants-track { grid-template-columns:1fr; }
  .model-nav__links { gap:0; }
  .footer__inner { grid-template-columns:1fr; gap:32px; }
  .contact-footer-grid { grid-template-columns:1fr; }

  /* Hero images on mobile — background positioned to show the vehicle.
     Height is set by the Customizer (jac-hero-height block). The hero text
     sits near the top and the buttons drop to the bottom, sitting on the
     space designed into the hero images. */
  .model-hero { background-position:center 40%; justify-content:flex-start; }
  /* Text sits at the TOP on mobile, but the base overlay is darkest at the bottom,
     leaving hero copy sitting almost directly on the photo. Re-weight the scrim so
     the top is protected too, keeping the middle lighter so the vehicle still reads. */
  .model-hero__overlay {
    background: linear-gradient(to bottom,
      rgba(10,10,10,0.80) 0%,
      rgba(10,10,10,0.40) 33%,
      rgba(10,10,10,0.45) 62%,
      rgba(10,10,10,0.90) 100%);
  }
  .model-hero__content { display:flex; flex-direction:column; flex:1; width:100%; }
  .model-hero__content .container { padding-bottom:24px; padding-top:32px; display:flex; flex-direction:column; flex:1; }
  .model-hero__ctas { margin-top:auto; margin-bottom:0; padding-top:24px; }
  .page-hero  { min-height:44vh; background-position:center 60%; }
  .home-hero  { min-height:auto; }
}
@media(max-width:480px) {
  .stats-bar__inner { grid-template-columns:repeat(2,1fr); }
  .td-models__grid { grid-template-columns:repeat(2,1fr); }
  .home-hero__ctas { flex-direction:column; }
  .model-hero__ctas { flex-direction:column; }
  .service-usp-bar__inner { grid-template-columns:repeat(2,1fr); }
  .difference-band__grid { grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════
   CONTENT SECTIONS (flexible content)
══════════════════════════════════════════ */

/* Image + Text layout */
.content-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.content-section__grid--img-right .content-section__text { order: 1; }
.content-section__grid--img-right .content-section__img  { order: 2; }
.content-section__grid--img-left  .content-section__text { order: 2; }
.content-section__grid--img-left  .content-section__img  { order: 1; }
.content-section__text .section-label { margin-bottom: 10px; }
.content-section__text h2 { margin-bottom: 20px; }
.content-section__text .prose p { color: rgba(255,255,255,0.72); }
.content-section__bullets {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.content-section__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}
.content-section__bullets li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--model-accent, var(--red));
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.content-section__img { position: relative; }
.content-section__img img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  max-height: 520px;
}
.content-section__img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--surface);
  border-radius: var(--radius);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.content-section__img-placeholder p {
  color: rgba(255,255,255,0.25);
  font-size: 0.8rem;
  text-align: center;
}

/* Full width overlay layout */
.content-section-overlay {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  background: var(--charcoal) center/cover no-repeat;
  overflow: hidden;
}
.content-section-overlay__placeholder {
  position: absolute;
  inset: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  font-size: 0.875rem;
}
.content-section-overlay__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.4) 60%, transparent 100%);
}
.content-section-overlay__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 80px 0;
}
.content-section-overlay__content--center {
  margin: 0 auto;
  text-align: center;
}
.content-section-overlay__content--right {
  margin-left: auto;
}
.content-section-overlay__content h2 { margin-bottom: 16px; }
.content-section-overlay__content .lead { max-width: 480px; }

/* ═══════════════════════════════════════════
   COLOUR CONFIGURATOR
══════════════════════════════════════════ */
.colour-config h2 { margin-bottom: 32px; }
.colour-config__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.colour-config__img-wrap {
  position: relative;
  width: 100%;
  max-width: 700px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.colour-config__vehicle-img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  transition: opacity 0.2s ease;
  border-radius: var(--radius);
}
.colour-config__img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--surface);
  border-radius: var(--radius);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.colour-config__img-placeholder p {
  color: rgba(255,255,255,0.25);
  font-size: 0.875rem;
  text-align: center;
}
.colour-config__swatches {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
@media(max-width:600px) {
  .colour-config__swatches {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .colour-swatch { width: 30px; height: 30px; flex-shrink: 0; }
}
.colour-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--dur);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.colour-swatch:hover {
  transform: scale(1.12);
  border-color: rgba(255,255,255,0.4);
}
.colour-swatch--active {
  border-color: var(--model-accent, var(--red));
  transform: scale(1.12);
}
.colour-config__name {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-align: center;
  min-height: 1.4em;
}

/* ═══════════════════════════════════════════
   MODEL OVERVIEW
══════════════════════════════════════════ */
.model-overview__grid { max-width: 800px; }
.model-overview__heading { margin-bottom: 20px; }
.model-overview__text p { font-size: 1rem; line-height: 1.85; color: rgba(255,255,255,0.72); margin-bottom: 16px; }

/* ═══════════════════════════════════════════
   RESPONSIVE — content sections
══════════════════════════════════════════ */
@media(max-width:1024px) {
  .content-section__grid { grid-template-columns: 1fr; gap: 32px; }
  .content-section__grid--img-right .content-section__text,
  .content-section__grid--img-left  .content-section__text { order: 1; }
  .content-section__grid--img-right .content-section__img,
  .content-section__grid--img-left  .content-section__img  { order: 2; }
  .variants-track { grid-template-columns: 1fr; }
}
@media(max-width:768px) {
  .content-section-overlay { min-height: 360px; }
  .colour-config__img-wrap { min-height: 200px; }
  .variants-track { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   RANGE CARDS (homepage Find Your JAC)
══════════════════════════════════════════ */
.find-jac__header { margin-bottom: 48px; }
.find-jac__header .section-label { display:block; margin-bottom:8px; }
.find-jac__title { font-size: clamp(1.75rem,3.5vw,3rem); margin-bottom: 10px; }
.find-jac__sub { color: rgba(255,255,255,0.55); max-width: 500px; }
.find-jac__group { margin-bottom: 48px; }
.find-jac__group:last-child { margin-bottom: 0; }
.find-jac__group-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--red);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.find-jac__grid { display: grid; gap: 20px; }
.find-jac__grid--3col { grid-template-columns: repeat(3,1fr); }
.find-jac__grid--2col { grid-template-columns: repeat(2,1fr); }
.find-jac__grid--1col { grid-template-columns: 1fr; }

/* Range card */
.range-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--dur), transform var(--dur);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.range-card:hover {
  border-color: var(--red);
  transform: translateY(-4px);
}
.range-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  z-index: 2;
}
.range-card__badge--green { background: var(--green); }
.range-card__badge--blue  { background: var(--blue); }
.range-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}
.range-card__img img { width:100%; height:100%; object-fit:contain; transition:transform 0.4s var(--ease); }
.range-card:hover .range-card__img img { transform: scale(1.03); }
.range-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.range-card__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.range-card__sub { font-size: 0.8rem; color: rgba(255,255,255,0.45); }
.range-card__price { font-size: 0.85rem; color: var(--red); font-weight: 600; margin-top: 4px; }
.range-card__cta { margin-top: 16px; align-self: flex-start; }

/* Featured truck card (full width) */
.range-card--featured {
  flex-direction: row;
  align-items: center;
}
.range-card--featured .range-card__img {
  width: 320px;
  flex-shrink: 0;
  aspect-ratio: 16/9;
}
.range-card--featured .range-card__body { padding: 32px; }
.range-card--featured .range-card__name { font-size: 1.5rem; }
.range-card--featured .range-card__sub { font-size: 0.95rem; }

/* Homepage news header */
.home-news__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.home-news__header h2 { margin: 0; }
.home-news__all {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  white-space: nowrap;
}

/* Responsive */
@media(max-width:1024px) {
  .find-jac__grid--3col { grid-template-columns: repeat(2,1fr); }
  .range-card--featured { flex-direction: column; }
  .range-card--featured .range-card__img { width:100%; }
}
@media(max-width:640px) {
  .find-jac__grid--3col { grid-template-columns: 1fr; }
  .find-jac__grid--2col { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   BOOK A SERVICE — new layout
══════════════════════════════════════════ */
.page-hero--service {
  min-height: auto;
  padding: 80px 0;
  align-items: center;
}
.service-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.service-hero__left h1 { margin-bottom: 16px; }
.service-hero__left .lead { color: rgba(255,255,255,0.75); margin-bottom: 0; }
.service-hero__usps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.service-hero__usp {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
}
.service-hero__usp-title { font-size:0.875rem; font-weight:700; color:var(--white); margin-bottom:4px; }
.service-hero__usp-sub   { font-size:0.75rem; color:rgba(255,255,255,0.5); line-height:1.4; }
.service-stats-band { background: var(--red); }
.service-stats-band__inner {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.service-stats-band__item {
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-stats-band__item:last-child { border-right: none; }
.service-stats-band__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
}
.service-stats-band__value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
}
@media(max-width:1024px) {
  .service-hero__grid { grid-template-columns: 1fr; gap:32px; }
  .service-stats-band__inner { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:640px) {
  .service-hero__usps { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   HOMEPAGE FEATURE PANEL
══════════════════════════════════════════ */
.home-feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.home-feature__text h2 { margin-bottom: 20px; }
.home-feature__text .prose p { color: rgba(255,255,255,0.7); line-height: 1.8; }
.home-feature__media { border-radius: var(--radius); overflow: hidden; }

/* ═══════════════════════════════════════════
   REVIEWS GRID
══════════════════════════════════════════ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.review-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-card__stars { display: flex; gap: 4px; }
.review-card__text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  flex: 1;
}
.review-card__footer { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 16px; }
.review-card__author { font-size: 0.85rem; font-weight: 700; color: var(--white); }
.review-card__model  { font-size: 0.75rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }

/* ═══════════════════════════════════════════
   SAVINGS CALCULATOR (diesel vs PHEV)
══════════════════════════════════════════ */
.savings-calc__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.savings-calc__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); margin-bottom: 14px; }
.savings-calc__sub { color: rgba(255,255,255,0.6); font-size: 0.95rem; line-height: 1.7; }

.savings-calc__panel {
  max-width: 920px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(44,44,46,0.6), rgba(20,20,20,0.6));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  backdrop-filter: blur(4px);
}

/* EV calc — vehicle selector */
.ev-calc__selector {
  display: flex;
  gap: 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px;
  margin: 0 auto 32px;
  max-width: 480px;
}
.ev-calc__seg {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ev-calc__seg.is-active { background: var(--red); color: #fff; }
/* EV calc — 5-year headline */
.ev-calc__headline {
  text-align: center;
  padding: 28px;
  margin-bottom: 28px;
  background: rgba(204,0,12,0.08);
  border: 1px solid rgba(204,0,12,0.25);
  border-radius: 14px;
}
.ev-calc__headline-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.ev-calc__headline-value { display: block; font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.5rem, 6vw, 4rem); color: var(--red); line-height: 1; }
.ev-calc__headline-sub { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-top: 10px; }
@media(max-width:600px){
  .ev-calc__selector { flex-direction: column; border-radius: 14px; }
  .ev-calc__seg { border-radius: 10px; }
}

/* Slider */
.savings-calc__slider-wrap { margin-bottom: 36px; }
.savings-calc__readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}
.savings-calc__readout-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
}
.savings-calc__readout-value {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.savings-calc__readout-value em { font-style: normal; font-size: 0.5em; color: var(--red); font-weight: 700; }

/* Custom range slider with red fill */
.savings-calc__slider {
  --fill: 25%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--red) 0%, var(--red) var(--fill), rgba(255,255,255,0.12) var(--fill), rgba(255,255,255,0.12) 100%);
  outline: none;
  cursor: pointer;
}
.savings-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--red);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  transition: transform var(--dur);
}
.savings-calc__slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.savings-calc__slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--red);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.savings-calc__slider-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
}

/* Primary cards: A → B + save */
.savings-calc__cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 28px;
}
.savings-calc__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.savings-calc__card-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
}
.savings-calc__card-value {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.savings-calc__card--arrow {
  background: none;
  border: none;
  padding: 0;
  color: var(--red);
  min-width: 36px;
}
.savings-calc__card--save {
  background: var(--red);
  border-color: var(--red);
}
.savings-calc__card--save .savings-calc__card-label { color: rgba(255,255,255,0.85); }
.savings-calc__card--save .savings-calc__card-value { color: var(--white); }

/* Secondary stats */
.savings-calc__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.savings-calc__stat { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.savings-calc__stat-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
}
.savings-calc__stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.savings-calc__disclaimer {
  margin-top: 24px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  font-style: italic;
}
.savings-calc__basis {
  margin-top: 24px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}
.savings-calc__basis + .savings-calc__disclaimer { margin-top: 8px; }

@media(max-width:768px) {
  .savings-calc__panel { padding: 24px; }
  .savings-calc__cards { grid-template-columns: 1fr 1fr; }
  .savings-calc__card--arrow { display: none; }
}
@media(max-width:420px) {
  .savings-calc__cards { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════
   BRAND COLOUR CONSUMPTION LAYER
   Placed after all component definitions so these
   editable-variable rules win on cascade order.
══════════════════════════════════════════ */
/* ── Decoupled surface consumption ──
   Surfaces that must change independently of the shared tokens. */

/* Page text */
body { color: var(--jac-page-text); }
h1,h2,h3,h4,h5,h6 { color: var(--jac-page-heading); }
p { color: var(--jac-page-text); }

/* Header / nav */
.site-header { background: var(--jac-header-bg); }
.nav-link { color: var(--jac-header-text); }
.nav-link:hover,
.nav-item:hover > .nav-link { color: var(--jac-header-hover); border-bottom-color: var(--jac-header-hover); }

/* Top bar (decoupled from header) */
.topbar { background: var(--jac-topbar-bg); }
.topbar__item,
.topbar__item a { color: var(--jac-topbar-text); }
.topbar__item a:hover { color: var(--jac-topbar-hover); }

/* Vehicle cards */
.range-card, .variant-card { background: var(--jac-vcard-bg); }
.range-card__name, .variant-card__name { color: var(--jac-vcard-heading); }
.range-card__sub, .variant-card__desc, .variant-card__spec-value { color: var(--jac-vcard-text); }

/* Other cards (decoupled from vehicle cards) */
.feature-card, .review-card, .vision-pillar { background: var(--jac-card-bg); }
.feature-card__title, .review-card__author, .vision-pillar__title { color: var(--jac-card-heading); }
.feature-card__text, .review-card__text, .vision-pillar__text { color: var(--jac-card-text); }

/* Dark / feature sections */
.bg-dark, .bg-darker { background: var(--jac-dark-bg); }
.bg-dark h2, .bg-darker h2,
.bg-dark h3, .bg-darker h3 { color: var(--jac-dark-heading); }
.bg-dark p, .bg-darker p { color: var(--jac-dark-text); }

/* Footer (link decoupled, with specificity reinforcement) */
.site-footer { background: var(--jac-footer-bg); }
.footer__heading { color: var(--jac-footer-heading); }
.footer__col p { color: var(--jac-footer-text); }
.site-footer a,
.footer__links a,
.footer__col a { color: var(--jac-footer-link); }
.site-footer a:hover,
.footer__links a:hover,
.footer__col a:hover { color: var(--jac-accent); }

/* Buttons — solid + outline decoupled */
.btn--primary { background: var(--jac-btn-bg); color: var(--jac-btn-text); border-color: var(--jac-btn-bg); }
.btn--primary:hover { background: var(--jac-btn-hover); border-color: var(--jac-btn-hover); }
.btn--outline { border-color: var(--jac-btn-outline); color: var(--jac-btn-outline); }
.btn--outline:hover { background: var(--jac-btn-outline); color: var(--jac-btn-text); }

/* Form inputs — fully decoupled from card surfaces */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
  background: var(--jac-form-input-bg);
  color: var(--jac-form-input-text);
}
.gform_wrapper .gfield_label { color: var(--jac-form-label-text); }
.gform_wrapper .gfield_description { color: var(--jac-form-body-text); }

/* Difference band */
.difference-band { background: var(--jac-diffband-bg); }
.difference-band__item svg { color: var(--jac-diffband-icon); }
.difference-band__title { color: var(--jac-diffband-text); }
.difference-band__title strong { color: var(--jac-diffband-text); }

/* Stats bar */
.stats-bar { background: var(--jac-stats-bg); }
.stats-bar__number, .stats-bar__prefix, .stats-bar__suffix { color: var(--jac-stats-num); }
.stats-bar__label { color: var(--jac-stats-label); }

/* ── PER-SECTION BACKGROUND SELECTOR ──
   ACF select on model-page bands outputs one of these classes.
   Text colours cascade so nothing goes white-on-white. */
.section--dark {
  background: var(--jac-dark-bg);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--jac-dark-heading); }
.section--dark p, .section--dark li { color: var(--jac-dark-text); }

.section--light {
  background: #F2F2F2;
}
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: #1C1C1E; }
.section--light p, .section--light li { color: #414042; }
.section--light .section-label, .section--light .eyebrow { color: var(--jac-accent); }

.section--grey {
  background: #E2E2E2;
}
.section--grey h1, .section--grey h2, .section--grey h3, .section--grey h4 { color: #1C1C1E; }
.section--grey p, .section--grey li { color: #414042; }
.section--grey .section-label, .section--grey .eyebrow { color: var(--jac-accent); }

.section--accent {
  background: var(--jac-accent);
}
.section--accent h1, .section--accent h2, .section--accent h3, .section--accent h4 { color: #FFFFFF; }
.section--accent p, .section--accent li { color: rgba(255,255,255,0.9); }
.section--accent .section-label, .section--accent .eyebrow { color: #FFFFFF; }
.section--accent .btn--primary { background: #FFFFFF; color: var(--jac-accent); border-color: #FFFFFF; }
.section--accent .btn--outline { border-color: #FFFFFF; color: #FFFFFF; }

/* ═══════════════════════════════════════════
   PRICING — white instead of red
══════════════════════════════════════════ */
.variant-card__price        { color: var(--white) !important; }
.range-card__price          { color: var(--white) !important; }
.model-hero__price strong   { color: var(--white) !important; }
.model-stats-strip__value   { color: var(--white) !important; }

/* ═══════════════════════════════════════════
   BACK TO TOP BUTTON
══════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--dur) var(--ease);
  z-index: 9990;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
}
.back-to-top svg { color: var(--white); }

@media(max-width:768px) {
  .home-feature__grid { grid-template-columns: 1fr; gap: 32px; }
  .back-to-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
}

/* ═══════════════════════════════════════════
   FORD-STYLE MEGA MENU
══════════════════════════════════════════ */
/* The Range mega panel centres on the whole header, not the "Range" item.
   Making the mega nav-item non-positioned lets the panel anchor to the sticky
   .site-header instead, so it sits directly below the header at every scroll
   position and centres on the page. Other nav-items stay relative for their
   normal dropdowns. */
.site-header { position: sticky; }
.nav-item.mega-menu { position: static; }
.mega-menu-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: calc(100vw - 48px);
  max-width: 900px;
  background: var(--charcoal);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 0 0 var(--radius) var(--radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 999;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  pointer-events: none;
}
.nav-item:hover .mega-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
/* On short viewports (e.g. 768px-tall laptops) keep the whole panel on screen. */
.mega-menu-panel { max-height: calc(100vh - var(--header-h, 72px) - 24px); overflow-y: auto; }

/* Ford layout: left categories + right panels */
.mega-menu-ford {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 280px;
}

/* Left: category buttons */
.mega-menu-ford__cats {
  background: rgba(0,0,0,0.2);
  padding: 16px 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.mega-menu-ford__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--dur);
  text-align: left;
  border-left: 3px solid transparent;
}
.mega-menu-ford__cat:hover { color: var(--white); background: rgba(255,255,255,0.04); }
.mega-menu-ford__cat--active {
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border-left-color: var(--red);
}
.mega-menu-ford__cat svg { opacity: 0.4; flex-shrink: 0; }
.mega-menu-ford__cat--active svg,
.mega-menu-ford__cat:hover svg { opacity: 1; }

/* Right: vehicle panels */
.mega-menu-ford__panels { padding: 20px; position: relative; }
.mega-menu-ford__panel  { display: none; grid-template-columns: repeat(3,1fr); gap: 12px; }
.mega-menu-ford__panel--active { display: grid; }

/* Vehicle card in mega */
.mega-ford-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--dur);
  text-decoration: none;
}
.mega-ford-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
}
.mega-ford-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mega-ford-card__img img { width:100%; height:100%; object-fit:contain; }
.mega-ford-card__img--empty { background: rgba(255,255,255,0.04); border-radius: 4px; }
.mega-ford-card__info { text-align: center; }
.mega-ford-card__name {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 3px;
}
.mega-ford-card:hover .mega-ford-card__name { color: var(--red); }
.mega-ford-card__price {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
}

/* Light theme overrides for mega */
.jac-light .mega-menu-ford__cat         { color: rgba(255,255,255,0.6); }
.jac-light .mega-ford-card__name        { color: #fff; }
.jac-light .mega-ford-card__price       { color: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════
   USED & DEMO VEHICLE SHOWROOM
══════════════════════════════════════════ */
.uv-showroom { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }

/* Filters */
.uv-filters { position: sticky; top: calc(var(--header-h) + 16px); }
.uv-filters__form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.uv-filters__title { font-size: 1.1rem; margin-bottom: 18px; }
.uv-filter__label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, rgba(255,255,255,0.55)); margin-bottom: 16px; }
.uv-filter__select { display: block; width: 100%; margin-top: 6px; padding: 9px 10px; background: var(--charcoal); color: var(--white); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 0.9rem; }
.uv-filters__apply { width: 100%; margin-top: 6px; }
.uv-filters__clear { display: block; text-align: center; margin-top: 12px; font-size: 0.8rem; color: var(--muted, rgba(255,255,255,0.5)); text-decoration: underline; }

/* Results */
.uv-results__count { font-size: 0.85rem; color: var(--muted, rgba(255,255,255,0.5)); margin-bottom: 20px; }
.uv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Card */
.uv-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.uv-card:hover { transform: translateY(-4px); border-color: var(--red); }
.uv-card__img { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--charcoal); }
.uv-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uv-card__img-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 900; font-size: 2rem; color: rgba(255,255,255,0.15); }
.uv-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.uv-card__title { font-size: 1rem; line-height: 1.3; color: var(--white); }
.uv-card__price { font-family: var(--font-heading); font-weight: 900; font-size: 1.25rem; color: var(--red-text, #FF2935); }
.uv-card__specs { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--border); }
.uv-card__specs li { font-size: 0.8rem; color: var(--muted, rgba(255,255,255,0.6)); }
.uv-card__specs li + li { position: relative; padding-left: 14px; }
.uv-card__specs li + li::before { content: "·"; position: absolute; left: 4px; color: rgba(255,255,255,0.3); }

/* Badges */
.uv-badge { position: absolute; top: 12px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 3px; }
.uv-badge--demo { left: 12px; background: var(--red); color: #fff; }
.uv-badge--new { left: 12px; background: #1a7f37; color: #fff; }
.uv-badge--status { right: 12px; background: rgba(0,0,0,0.8); color: #fff; }
.uv-badge--sold { background: #111; color: #fff; }
.uv-badge--reserved { background: #b8860b; color: #fff; }
.uv-badge--pending { background: #555; color: #fff; }

/* Pagination */
.uv-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.uv-pagination a, .uv-pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--white); font-size: 0.9rem; }
.uv-pagination a:hover { border-color: var(--red); color: var(--red); }
.uv-pagination .current { background: var(--red); border-color: var(--red); color: #fff; }

/* No results */
.uv-no-results { text-align: center; padding: 60px 20px; }
.uv-no-results h3 { margin-bottom: 10px; }
.uv-no-results a { color: var(--red); text-decoration: underline; }

@media (max-width: 900px) {
    .uv-showroom { grid-template-columns: 1fr; }
    .uv-filters { position: static; }
    .uv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .uv-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   SINGLE USED / DEMO VEHICLE
══════════════════════════════════════════ */
.uv-single__back { display: inline-block; margin-bottom: 24px; font-size: 0.85rem; color: var(--muted, rgba(255,255,255,0.55)); }
.uv-single__back:hover { color: var(--red); }
.uv-single__grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }

/* Gallery */
.uv-gallery__main { position: relative; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; background: var(--charcoal); margin-bottom: 12px; }
.uv-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uv-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.uv-gallery__thumb { aspect-ratio: 3/2; border-radius: 6px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--charcoal); }
.uv-gallery__thumb.is-active { border-color: var(--red); }
.uv-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uv-gallery__empty { aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted, rgba(255,255,255,0.4)); }

/* Buy card */
.uv-buy { position: sticky; top: calc(var(--header-h) + 16px); }
.uv-buy__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.uv-buy__title { font-size: 1.3rem; line-height: 1.25; margin-bottom: 8px; }
.uv-buy__price { font-family: var(--font-heading); font-weight: 900; font-size: 2rem; color: var(--red-text, #FF2935); margin-bottom: 20px; }
.uv-buy__quickspecs { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--border); }
.uv-buy__quickspecs li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.uv-buy__quickspecs span { color: var(--muted, rgba(255,255,255,0.55)); }
.uv-buy__quickspecs strong { color: var(--white); font-weight: 700; }
.uv-buy__actions { display: flex; flex-direction: column; gap: 10px; }
.uv-buy__actions .btn { width: 100%; }
.uv-buy__dealer { margin-top: 16px; font-size: 0.85rem; color: var(--muted, rgba(255,255,255,0.55)); text-align: center; }
.uv-buy__dealer strong { color: var(--white); }

/* Specs + description */
.uv-single__detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border); }
.uv-specs__heading, .uv-desc__heading { font-size: 1.3rem; margin-bottom: 20px; position: relative; padding-bottom: 14px; }
.uv-specs__heading::after, .uv-desc__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--red); }
.uv-specs__table { width: 100%; border-collapse: collapse; }
.uv-specs__table th, .uv-specs__table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.uv-specs__table th { color: var(--muted, rgba(255,255,255,0.55)); font-weight: 600; width: 45%; }
.uv-specs__table td { color: var(--white); font-weight: 600; }
.uv-desc__body { color: var(--muted, rgba(255,255,255,0.7)); line-height: 1.8; font-size: 0.95rem; }

@media (max-width: 900px) {
    .uv-single__grid { grid-template-columns: 1fr; }
    .uv-buy { position: static; }
    .uv-single__detail { grid-template-columns: 1fr; gap: 32px; }
}

/* Enquiry section on single vehicle */
.uv-enquire { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 20px); }
.uv-enquire__heading { font-size: 1.3rem; margin-bottom: 8px; position: relative; padding-bottom: 14px; }
.uv-enquire__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--red); }
.uv-enquire__sub { color: var(--muted, rgba(255,255,255,0.6)); margin-bottom: 24px; font-size: 0.95rem; }
.uv-enquire__form { max-width: 640px; }
.uv-enquire__placeholder { padding: 40px 24px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted, rgba(255,255,255,0.4)); font-size: 0.9rem; }

/* Campaign hero — two-image layout + clickable image buttons.
   The hero inner is capped at 760px, but the sections below use the full 1320px
   container. Break the images out of the narrow inner so they align to that wider
   content width (single and double). */
.campaign-hero__img-wrap {
    width: min(calc(1320px - (2 * var(--gutter))), calc(100vw - (2 * var(--gutter))));
    max-width: none;
    margin: 40px 0 0 50%;
    transform: translateX(-50%);
}
.campaign-hero__img-wrap--two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campaign-hero__img-btn { display: block; padding: 0; border: none; background: none; cursor: zoom-in; width: 100%; border-radius: var(--radius); overflow: hidden; }
.campaign-hero__img-btn img { transition: transform var(--dur) var(--ease); display: block; width: 100%; }
.campaign-hero__img-btn:hover img { transform: scale(1.03); }
@media (max-width: 640px) {
    .campaign-hero__img-wrap--two { grid-template-columns: 1fr; }
}

/* Lightbox (shared) */
.jac-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.9); display: none; align-items: center; justify-content: center; padding: 40px; }
.jac-lightbox.is-open { display: flex; }
.jac-lightbox__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.jac-lightbox__close { position: absolute; top: 20px; right: 28px; background: none; border: none; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; opacity: 0.8; }
.jac-lightbox__close:hover { opacity: 1; }

/* ═══════════════════════════════════════════
   FINANCE APPLICATION PAGE
══════════════════════════════════════════ */
.fin-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.fin-intro__text { font-size: 1.05rem; line-height: 1.7; }
.fin-docs { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.fin-docs__title { font-size: 1.15rem; margin-bottom: 16px; position: relative; padding-bottom: 12px; }
.fin-docs__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--red); }
.fin-docs__list { list-style: none; margin: 0; padding: 0; }
.fin-docs__list li { position: relative; padding: 8px 0 8px 28px; font-size: 0.95rem; color: var(--muted, rgba(255,255,255,0.75)); border-bottom: 1px solid var(--border); }
.fin-docs__list li:last-child { border-bottom: none; }
.fin-docs__list li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--red); font-weight: 800; }

.fin-steps__heading { text-align: center; font-size: clamp(1.75rem,3vw,2.4rem); margin-bottom: 40px; }
.fin-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fin-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; }
.fin-step__num { font-family: var(--font-heading); font-weight: 900; font-size: 1.5rem; color: var(--red-text, #FF2935); display: block; margin-bottom: 12px; }
.fin-step__title { font-size: 1.05rem; margin-bottom: 8px; }
.fin-step__text { font-size: 0.9rem; line-height: 1.6; color: var(--muted, rgba(255,255,255,0.65)); }

.fin-downloads { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }

.fin-email { max-width: 720px; margin: 0 auto; text-align: center; }
.fin-email__title { font-size: 1.5rem; margin-bottom: 10px; }
.fin-email__sub { color: var(--muted, rgba(255,255,255,0.65)); margin-bottom: 24px; }
.fin-email__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fin-email__list li { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.fin-email__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, rgba(255,255,255,0.55)); }
.fin-email__list a { color: var(--red-text, #FF2935); font-weight: 600; font-size: 1.05rem; }

.fin-form { max-width: 760px; margin: 0 auto; }
.fin-form__heading { font-size: 1.5rem; margin-bottom: 8px; text-align: center; }
.fin-form__sub { color: var(--muted, rgba(255,255,255,0.65)); margin-bottom: 28px; text-align: center; }
.fin-form__placeholder { padding: 48px 24px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted, rgba(255,255,255,0.4)); }

@media (max-width: 860px) {
    .fin-intro { grid-template-columns: 1fr; gap: 32px; }
    .fin-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .fin-steps__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   SPECIALS / OFFERS PAGE
══════════════════════════════════════════ */
.spec-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; font-size: 1.05rem; line-height: 1.7; }
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.spec-item { display: block; padding: 0; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; transition: transform var(--dur) var(--ease), border-color var(--dur); }
a.spec-item { cursor: pointer; }
.spec-item:hover { transform: translateY(-4px); border-color: var(--red); }
.spec-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spec-empty { text-align: center; padding: 60px 20px; color: var(--muted, rgba(255,255,255,0.5)); }
.spec-validity { text-align: center; margin-top: 32px; font-size: 0.85rem; color: var(--muted, rgba(255,255,255,0.55)); }

.spec-form { max-width: 760px; margin: 0 auto; }
.spec-form__heading { font-size: 1.5rem; margin-bottom: 8px; text-align: center; }
.spec-form__sub { color: var(--muted, rgba(255,255,255,0.65)); margin-bottom: 28px; text-align: center; }
.spec-form__placeholder { padding: 48px 24px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted, rgba(255,255,255,0.4)); }
.spec-privacy { margin-top: 24px; font-size: 0.8rem; line-height: 1.6; text-align: center; color: var(--muted, rgba(255,255,255,0.5)); }
.spec-privacy a { color: var(--red-text, #FF2935); text-decoration: underline; }

@media (max-width: 900px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 380px) { .spec-grid { grid-template-columns: 1fr; } }