/* =========================================================
   Kuwait Branch — site template
   Layout structured to match the reference site's
   composition, proportions and section flow.
   Swap placeholder vehicle silhouettes & copy with the
   Kuwait branch brand kit when received.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --c-ink:        #111418;
  --c-ink-2:      #1d2127;
  --c-ink-3:      #2e333b;
  --c-mute:       #6b7280;
  --c-line:       #e5e7eb;
  --c-line-soft:  #eef0f3;
  --c-bg:         #ffffff;
  --c-bg-2:       #f5f6f8;
  --c-bg-3:       #ececef;
  --c-accent:     #c8102e;
  --c-accent-2:   #a30c25;
  --c-accent-soft:#fdecef;

  --font-sans: "Montserrat", "NotoSansThai", sans-serif;
  --font-display: "Montserrat", "NotoSansThai", sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;

  --container: 1320px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 12px 28px rgba(0,0,0,.10);
  --shadow-3: 0 24px 60px rgba(0,0,0,.20);

  --t-fast: 150ms ease;
  --t-med:  320ms cubic-bezier(.22,.61,.36,1);

  --header-h: 80px;
  --util-h: 36px;
}

*, *::before, *::after { box-sizing: border-box; }
/* No global scroll-behavior: smooth — it animates every wheel scroll, and when
   the sticky header collapses 66px mid-animation the layout shift fights the
   scroll, reading as menu jump/stutter on desktop. Native scroll is crisp.
   Smooth in-page anchor jumps are restored via JS (smooth-anchor handler). */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
   overflow-x:clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
input, select { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
h4 { font-size: 1.05rem; text-transform: none; font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }
p  { margin: 0 0 var(--space-4); color: var(--c-ink-2); }

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px;
  border-radius: 0;
  font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Treat taps on interactive elements as immediate clicks: disables iOS/Android
   double-tap-to-zoom (which was swallowing finger taps on links/buttons so they
   "zoomed" instead of navigating) and the 300ms tap delay. Pinch-zoom still works. */
a, button, .btn, .chip, label, summary, input, select, textarea,
.lineup-card__media, .megamenu__tab, .drawer__toggle, [data-back-top] {
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--c-ink); color: #fff; border:1px solid #777; }
.btn--primary:hover { background: var(--c-accent); }
.btn--accent { background: var(--c-accent); color: #fff; }
.btn--accent:hover { background: var(--c-accent-2); }
.btn--outline-light { color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.btn--ghost { color: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: #fff; }
.btn--soon { cursor: default; pointer-events: none; }

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.utilbar {
  background: var(--c-ink);
  color: rgba(255,255,255,.82);
  font-size: .76rem;
  height: var(--util-h);
}
.utilbar__inner {
  display: flex; align-items: center; justify-content: flex-end;
  height: 100%;
  gap: var(--space-5);
}
.utilbar a { display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); }
.utilbar a:hover { color: #fff; }
.utilbar .sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--header-h);
  gap: var(--space-6);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.6rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-ink);
}
.brand__mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
}
.brand__co {
  display: inline-flex; align-items: center;
  margin-left: 16px; padding-left: 16px;
  border-left: 1px solid var(--c-line);
  font-family: var(--font-sans);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-ink-2);
  line-height: 1.3;
}

.nav { display: flex; align-items: center; justify-content: center; gap: var(--space-6); }
.nav a {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 30px 0;
  position: relative;
  color: var(--c-ink);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-ink);
  font-size: 1.05rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--c-bg-2); }
.menu-toggle { display: none; }
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after { content:""; display:block; width:22px; height:2px; background: var(--c-ink); }
.menu-toggle span { position: relative; }
.menu-toggle span::before { position: absolute; top: -7px; }
.menu-toggle span::after  { position: absolute; top:  7px; }

/* ============================================================
   HERO  (full-bleed, dots bottom-left)
   ============================================================ */
.hero {
  position: relative;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.hero__viewport {
  position: relative;
  height: calc(100vh - var(--header-h) - var(--util-h));
  min-height: 580px;
  max-height: 760px;
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 800ms ease;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hero__bg::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%),
              linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.5) 100%);
}
.hero__bg--1 { background: radial-gradient(80% 70% at 65% 50%, #c8814a 0%, #1a1410 70%); }
.hero__bg--2 { background: radial-gradient(80% 70% at 65% 50%, #2a4060 0%, #0b0d10 70%); }
.hero__bg--3 { background: radial-gradient(80% 70% at 65% 50%, #5c2233 0%, #0b0d10 70%); }
.hero__bg--4 { background: radial-gradient(80% 70% at 65% 50%, #2a3650 0%, #0b0d10 70%); }
.hero__bg svg {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-30%);
  width: 70%; max-width: 1100px;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55));
}
.hero__inner {
  position: relative;
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
  height: 100%;
  display: flex; align-items: center;
  z-index: 2;
}
.hero__content { max-width: 540px; text-align:center; }
.hero__eyebrow {
  font-size: .78rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: var(--space-4);
  max-width: 38ch;
}
.hero__title {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.hero__logo {
  display: block;
  /* Forced responsive height so the logo is prominent regardless of the
     uploaded image's pixel size (max-height alone can't scale a small source up).
     object-fit:contain keeps the aspect ratio if a wide logo hits max-width. */
  height: clamp(5rem, 12vw, 10.5rem);
  width: auto;
  /*max-width: min(92%, 720px);*/
   max-width:380px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--space-5);
  filter: drop-shadow(0 2px 30px rgba(0,0,0,.4));
}
.hero__model {
  display: none; /* original integrates model into title styling */
}
/* Dots bottom-left over image */
.hero__dots {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 80px;
  z-index: 3;
  display: flex; gap: 10px;
  width: min(100% - 32px, var(--container));
  padding: 0;
  justify-content: flex-start;
}
.hero__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: all var(--t-fast);
}
.hero__dot.is-active { background: #fff; transform: scale(1.2); }
/* Scroll hint */
.hero__scroll {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 30px;
  z-index: 3;
  color: rgba(255,255,255,.7);
  font-size: 1.5rem;
  animation: bounce 2s infinite;
}
@keyframes bounce { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 8px);} }

.hero__arrows {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 var(--space-5);
  pointer-events: none;
  z-index: 3;
}
.hero__arrow {
  pointer-events: auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.5rem;
  transition: background var(--t-fast);
}
.hero__arrow:hover { background: rgba(255,255,255,.3); }

/* ============================================================
   SEARCH BAR BLOCK
   ============================================================ */
.searchblock {
  background: var(--c-bg-2);
  padding: var(--space-7) 0;
  text-align: center;
}
.searchblock h2 {
  font-size: 1.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
  letter-spacing: 0;
}
.searchblock__form {
  display: flex;
  max-width: 720px;
  margin: 0 auto;
  gap: 0;
  background: #fff;
  border: 1px solid var(--c-line);
}
.searchblock__form select {
  flex: 1;
  border: 0;
  padding: 16px 20px;
  font-size: .9rem;
  background: #fff;
  color: var(--c-ink);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23111' d='M5 8l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
}
.searchblock__form button {
  background: var(--c-ink);
  color: #fff;
  padding: 16px 36px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.searchblock__form button:hover { background: var(--c-accent); }

/* ============================================================
   MODEL CAROUSEL — borderless, hover-lift, NEW badge
   ============================================================ */
.model-strip { padding: var(--space-8) 0 var(--space-9); background: #fff; }
.model-strip__head {
  text-align: center;
  margin-bottom: var(--space-6);
}
.tabs {
  display: inline-flex; gap: 0;
  border-bottom: 1px solid var(--c-line);
}
.tabs__btn {
  padding: 14px 28px;
  font-weight: 600; font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-mute);
  position: relative;
  background: transparent;
}
.tabs__btn::after {
  content:""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c-ink);
  transform: scaleX(0);
  transition: transform var(--t-fast);
}
.tabs__btn.is-active { color: var(--c-ink); }
.tabs__btn.is-active::after { transform: scaleX(1); }

.carousel { position: relative; margin-top: var(--space-6); }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  gap: var(--space-5);
  transition: transform var(--t-med);
}
.carousel__slide {
  flex: 0 0 calc((100% - 4 * var(--space-5)) / 5);
  min-width: 0;
}
.carousel__btn {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-2);
  display: grid; place-items: center;
  font-size: 1.4rem;
  color: var(--c-ink);
  z-index: 2;
  transition: background var(--t-fast), color var(--t-fast);
}
.carousel__btn:hover { background: var(--c-ink); color: #fff; }
.carousel__btn--prev { left: -12px; }
.carousel__btn--next { right: -12px; }

.tabpanel { display: none; }
.tabpanel.is-active { display: block; }

.model-card {
  display: block;
  position: relative;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  transition: transform var(--t-med);
}
.model-card:hover { transform: translateY(-6px); }
.model-card__badge {
  position: absolute;
  top: 0; left: 8px;
  background: var(--c-accent);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 2;
}
.model-card__media {
  aspect-ratio: 16/10;
  background: transparent;
  display: grid; place-items: center;
  padding: 8px 0;
  margin-bottom: var(--space-3);
}
.model-card__media svg { width: 100%; }
.model-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin: 0;
  color: var(--c-ink);
}

/* Carousel dots (below model strip) */
.carousel__dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: var(--space-6);
}
.carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-line);
  transition: all var(--t-fast);
}
.carousel__dot.is-active { background: var(--c-ink); transform: scale(1.3); }

/* ============================================================
   PROMO STRIP — IMAGE LEFT / DARK RIGHT split
   ============================================================ */
.promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-ink);
  color: #fff;
  min-height: 460px;
}
.promo__image {
  background: linear-gradient(135deg, #2a3f30, #1a2520);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.promo__image svg {
  width: 90%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
}
.promo__content {
  padding: var(--space-9) var(--space-8);
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
  max-width: 540px;
}
.promo__eyebrow {
  font-size: .875rem; font-weight: 300; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
  margin-bottom: var(--space-3);
}
.promo h2 {
  color: #fff;
  font-size: 1.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.promo p {
  color: rgba(255,255,255,.75);
  max-width: 42ch;
  font-size: .95rem;
  margin-bottom: var(--space-5);
}
.promo__campaigns {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.promo__campaigns li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}
.promo__campaigns svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--c-accent);
}

/* ============================================================
   DUAL FEATURE — Locations + Book a Service (2-up)
   ============================================================ */
.dual { padding: var(--space-8) 0; background: #fff; }
.dual__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.dual__card {
  display: flex; flex-direction: column;
}
.dual__media {
  display: block;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.dual__media--1 { background: linear-gradient(135deg, #3a4d5e, #1a2530); }
.dual__media--2 { background: linear-gradient(135deg, #4a3a30, #2a1a18); }
.dual__media::after {
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4));
}
.dual__media svg {
  position: absolute;
  bottom: 10%; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  z-index: 1;
}
.dual__body {
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.dual__eyebrow {
  font-size: .875rem; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: var(--space-2);
}
.dual__title {
  font-family: var(--font-display);
  font-size: 1.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 var(--space-3);
}
.dual__text {
  color: var(--c-mute);
  max-width: 46ch;
  margin: 0 auto var(--space-5);
  font-size: .92rem;
}

/* ============================================================
   NEWS & EVENTS — title overlay style
   ============================================================ */
.news { padding: var(--space-9) 0; background: var(--c-bg-2); }
.news__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.news__head h2 { margin: 0; font-size: 1.6875rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: 0; }
.news__head p { margin: 6px 0 0; color: var(--c-mute); max-width: 52ch; font-size: .92rem; }
.news__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.news-card {
  display: flex; flex-direction: column;
  background: transparent;
  height: 100%;
}
.news-card__media {
  aspect-ratio: 1/1;
  background: #e9edf1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.news-card__body {
  padding: var(--space-4) 0 0;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.news-card__date {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-mute);
}
.news-card__title {
  font-size: 1.3125rem; font-weight: 700; line-height: 1.6;
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  flex: 1;
}
.news-card__more {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-ink);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.news-card:hover .news-card__more { color: var(--c-accent); border-color: var(--c-accent); }
.news-card:hover .news-card__title { color: var(--c-accent); }

/* News carousel — auto-rotating, infinite, pager dots */
.newscar { position: relative; margin-top: var(--space-6); }
.newscar__viewport { overflow: hidden; }
.newscar__track { display: flex; gap: var(--space-4); will-change: transform; }
.newscar__track > .news-card { flex: 0 0 calc((100% - 3 * var(--space-4)) / 4); }
.newscar__arrow {
  position: absolute; top: 38%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-2);
  display: grid; place-items: center; font-size: 1.4rem; color: var(--c-ink);
  z-index: 2; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.newscar__arrow:hover { background: var(--c-ink); color: #fff; }
.newscar__arrow--prev { left: -12px; }
.newscar__arrow--next { right: -12px; }
.newscar__pager { display: flex; justify-content: center; gap: 10px; margin-top: var(--space-6); }
.newscar__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #c7ccd3; border: 0; padding: 0; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.newscar__dot.is-active { background: var(--c-ink); transform: scale(1.25); }
@media (max-width: 1100px) { .newscar__track > .news-card { flex-basis: calc((100% - 2 * var(--space-4)) / 3); } }
@media (max-width: 860px)  { .newscar__track > .news-card { flex-basis: calc((100% - var(--space-4)) / 2); } }
@media (max-width: 520px)  { .newscar__track > .news-card { flex-basis: 100%; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-bg-2);
  color: var(--c-ink-2);
  padding: var(--space-7) 0 var(--space-4);
  font-size: .85rem;
  border-top: 1px solid var(--c-line);
}
.footer-links {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.footer-links nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-links a {
  font-size: .78rem; font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-ink-2);
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--c-accent); }
.footer-socials { display: flex; gap: var(--space-4); align-items: center; }
.footer-socials a {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--c-ink);
  transition: color var(--t-fast);
}
.footer-socials a:hover { color: var(--c-accent); }
.footer-socials a svg { width: 18px; height: 18px; }
/* On desktop the footer is one row with socials pinned right — reserve space so the
   floating back-to-top button doesn't cover the last icon. */
@media (min-width: 1101px) { .footer-socials { padding-right: 56px; } }
.footer-left { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.footer-links .footer-totop { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-2); }
.footer-links .footer-totop:hover { color: var(--c-accent); }
.footer-bottom {
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
  font-size: .76rem;
  color: var(--c-mute);
}
.back-top {
  position: fixed; right: 20px; bottom: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.2rem;
  z-index: 40;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: all var(--t-med);
  box-shadow: var(--shadow-2);
}
.back-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-top:hover { background: var(--c-accent); }

/* ---------- Mobile drawer ---------- */
.drawer { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; opacity: 0; pointer-events: none; transition: opacity var(--t-med); }
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(330px, 88%);
  background: #fff;
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--t-med);
  display: flex; flex-direction: column; gap: var(--space-4);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close { align-self: flex-end; font-size: 1.5rem; line-height: 1; padding: 4px 8px; }
.drawer__nav { display: flex; flex-direction: column; }

/* Top-level rows: standalone links + expandable group headers share one look */
.drawer__nav > a,
.drawer__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; box-sizing: border-box;
  padding: 14px 0;
  border: 0; border-bottom: 1px solid var(--c-line);
  background: none; cursor: pointer;
  font-family: inherit; color: inherit; text-align: left;
  font-weight: 600; font-size: .85rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.drawer__group { display: flex; flex-direction: column; }
.drawer__chev { font-size: .9em; transition: transform var(--t-fast); }
.drawer__group.is-open > .drawer__toggle .drawer__chev { transform: rotate(180deg); }

/* Collapsible children */
.drawer__sub { overflow: hidden; max-height: 0; transition: max-height var(--t-med); }
.drawer__group.is-open > .drawer__sub { max-height: 680px; }
.drawer__sub a {
  display: block;
  padding: 11px 0 11px 16px;
  border-bottom: 1px solid var(--c-line);
  font-size: .8rem; font-weight: 500;
  letter-spacing: .03em; text-transform: none;
  color: rgba(0,0,0,.55);
}

/* ---------- Inner page hero (used on subpages) ---------- */
.page-hero {
  background: linear-gradient(135deg, #0b0d10, #2a2e35);
  color: #fff;
  padding: var(--space-9) 0 var(--space-7);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { margin: 0; }
.crumbs {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-bottom: var(--space-4);
}
.crumbs a { color: rgba(255,255,255,.85); }
.crumbs span { margin: 0 8px; opacity: .5; }

/* inner-page sections used by other html files */
.section { padding: var(--space-9) 0; }
.section--mute { background: var(--c-bg-2); }
.eyebrow { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; margin-bottom: var(--space-3); display: inline-block; }
.muted { color: var(--c-mute); }

/* Editable form-page intro + Contact banner */
.form-intro { padding: var(--space-6) 0 0; }
.form-intro p { max-width: 70ch; margin: 0 auto; color: var(--c-mute); text-align: center; }
.form-banner { height: 320px; background-size: cover; background-position: center; }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section__head h2 { margin: 0; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-6); }
.chip { padding: 8px 18px; border: 1px solid var(--c-line); border-radius: 999px; font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); transition: all var(--t-fast); cursor: pointer; background: #fff; }
.chip:hover { border-color: var(--c-ink); }
.chip.is-active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }

.detail-hero { background: linear-gradient(180deg, #0b0d10 0%, #1a1d22 100%); color: #fff; padding: var(--space-8) 0 var(--space-9); text-align: center; position: relative; overflow: hidden; }
.detail-hero svg { max-width: 800px; margin: var(--space-6) auto 0; }
.detail-hero__meta { display: flex; justify-content: center; gap: var(--space-7); margin-top: var(--space-6); flex-wrap: wrap; }
.detail-hero__meta div { text-align: center; }
.detail-hero__meta strong { display: block; font-family: var(--font-display); font-size: 2.5rem; color: var(--c-accent); line-height: 1; }
.detail-hero__meta span { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.7); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.feature { padding: var(--space-6); border: 1px solid var(--c-line); background: var(--c-bg); }
.feature__icon { width: 48px; height: 48px; background: var(--c-accent-soft); color: var(--c-accent); display: grid; place-items: center; margin-bottom: var(--space-4); }
.feature h3 { font-size: 1.1rem; text-transform: none; font-family: var(--font-sans); font-weight: 600; }

.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); border-top: 1px solid var(--c-line); }
.spec { padding: var(--space-6) var(--space-4); border-right: 1px solid var(--c-line); }
.spec:last-child { border-right: 0; }
.spec__label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-mute); margin-bottom: 8px; }
.spec__value { font-family: var(--font-display); font-size: 2rem; letter-spacing: .02em; }
.spec__unit { font-size: .9rem; color: var(--c-mute); margin-left: 4px; }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.gallery__item { aspect-ratio: 4/3; background: linear-gradient(135deg, #cfd6e0, #93a0b3); }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }

.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.offer-card { position: relative; background: linear-gradient(135deg, #1a1d22, #2a2e35); color: #fff; padding: var(--space-6); overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; }
.offer-card::before { content:""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 20%, rgba(200,16,46,.35), transparent 60%); }
.offer-card__badge { position: absolute; top: 16px; left: 16px; background: var(--c-accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: 6px 12px; }
.offer-card__title { font-family: var(--font-display); font-size: 1.75rem; text-transform: uppercase; position: relative; }
.offer-card__text { color: rgba(255,255,255,.75); position: relative; margin-bottom: var(--space-4); }
.offer-card .btn { position: relative; align-self: flex-start; }

.location-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.location { background: #fff; border: 1px solid var(--c-line); padding: var(--space-5); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.location:hover { border-color: var(--c-ink); box-shadow: var(--shadow-2); }
.location h3 { font-family: var(--font-sans); text-transform: none; font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.location__city { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--space-3); }
.location__row { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--c-mute); padding: 8px 0; border-top: 1px solid var(--c-line); }
.location__row:first-of-type { border-top: 0; }
.location__row strong { color: var(--c-ink); min-width: 70px; font-weight: 600; }
/* Locations directory — 4 category columns (Showrooms / Garages / Parts / Body) */
.dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.dir-col { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); padding: var(--space-5); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.dir-col:hover { border-color: var(--c-ink); box-shadow: var(--shadow-2); }
.dir-col__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 2px solid var(--c-accent); }
.dir-col__icon { flex: none; color: var(--c-accent); display: grid; place-items: center; }
.dir-col__icon svg { width: 24px; height: 24px; }
.dir-col__head h3 { margin: 0; font-family: var(--font-sans); text-transform: none; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.dir-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.dir-list li { padding: 11px 0; border-top: 1px solid var(--c-line); font-size: .92rem; font-weight: 600; color: var(--c-ink); }
.dir-list li:first-child { border-top: 0; }
.dir-list a { display: inline-flex; align-items: center; gap: 7px; color: var(--c-ink); text-decoration: none; transition: color var(--t-fast); }
.dir-list a svg { flex: none; width: 15px; height: 15px; color: var(--c-accent); }
.dir-list a:hover { color: var(--c-accent); }
.dir-note { display: block; margin-top: 3px; font-size: .76rem; font-weight: 400; color: var(--c-mute); }
/* Turn each map location into a clearly tappable button with a prominent
   "View on Map" accent pill (locations directory on the contact pages). */
.dir-list li { padding: 4px 0; border-top: 0; }
.dir-list a {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--c-line); border-radius: 9px;
  padding: 11px 12px;
  font-size: .92rem; font-weight: 600; color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.dir-list a svg { flex: none; width: 16px; height: 16px; color: var(--c-accent); }
.dir-list a::after {
  content: "View on Map"; margin-left: auto; flex: none;
  background: var(--c-accent); color: #fff;
  font-family: var(--font-sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 6px; white-space: nowrap;
  transition: background var(--t-fast);
}
.dir-list a:hover { border-color: var(--c-accent); box-shadow: var(--shadow-2); color: var(--c-ink); }
.dir-list a:hover::after { background: var(--c-ink); }
.dir-call { margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--c-accent); text-decoration: none; transition: color var(--t-fast); }
.dir-call svg { flex: none; width: 15px; height: 15px; }
.dir-call:hover { color: var(--c-ink); }
.dir-banner { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--space-6); padding: 14px 18px; background: var(--c-accent-soft); color: var(--c-accent-2); border: 1px solid var(--c-accent); border-radius: var(--radius); font-weight: 700; font-size: 1rem; text-align: center; }
.dir-banner svg { flex: none; width: 20px; height: 20px; }
@media (max-width: 992px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dir-grid { grid-template-columns: 1fr; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-mute); font-weight: 600; }
.field input, .field select, .field textarea { padding: 12px 14px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.field textarea { min-height: 140px; resize: vertical; }
.field.error input, .field.error select, .field.error textarea { border-color: var(--c-accent); }
.field .err { font-size: .72rem; color: var(--c-accent); display: none; }
.field.error .err { display: block; }

.cta-strip { background: var(--c-accent); color: #fff; padding: var(--space-7) 0; text-align: center; }
.cta-strip h2 { color: #fff; margin: 0 0 var(--space-4); }
.cta-strip p { color: rgba(255,255,255,.85); margin: 0 auto var(--space-5); max-width: 60ch; }
.cta-strip .btn { background: #fff; color: var(--c-accent); }
.cta-strip .btn:hover { background: var(--c-ink); color: #fff; }

/* ---------- Owners / service / fleet / finance utility additions ---------- */
/* Banner-image hero variant (warranty, fleet) */
.page-hero--banner { background-size: cover; background-position: center; }
.page-hero--banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.32) 70%); }
.page-hero--banner .container { position: relative; z-index: 2; }

/* ---------- Book-a-Service: dark crumb strip + hero photo with floating right form card ---------- */
.crumb-bar { background: #000; }
.crumb-bar .container { display: flex; align-items: center; gap: 16px; padding: 9px 0; }
.crumb-bar .crumb-back { color: rgba(255,255,255,.7); font-size: .78rem; display: inline-flex; align-items: center; gap: 5px; }
.crumb-bar .crumb-back:hover { color: #fff; }
.crumb-bar .crumb-trail { font-size: .78rem; color: rgba(255,255,255,.55); border-left: 1px solid rgba(255,255,255,.22); padding-left: 16px; }
.crumb-bar .crumb-trail a { color: rgba(255,255,255,.82); }
.crumb-bar .crumb-trail a:hover { color: #fff; }
.crumb-bar .crumb-trail span { margin: 0 7px; opacity: .5; }

.bas-hero { position: relative; background-color: #15171a; background-position: center; background-size: cover; background-repeat: no-repeat; padding: var(--space-7) 0 var(--space-8); }
.bas-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.12) 60%); }
.bas-hero .container { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.bas-hero__title { flex: 1 1 auto; padding-top: 4px; }
.bas-hero__title h1 { color: #fff; font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; margin: 0; }

.bas-card { flex: 0 0 560px; max-width: 560px; background: #fff; padding: 30px 32px 26px; box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.bas-card .form-grid { display: block; }
.bas-card .field { margin-bottom: 15px; gap: 5px; }
.bas-card .field label { font-size: .875rem; letter-spacing: 0; text-transform: none; color: #404040; font-weight: 700; }
.bas-card .field input, .bas-card .field select, .bas-card .field textarea { height: 45px; border: 1px solid #d4d4d4; background: #fefefe; border-radius: 0; font-size: .875rem; padding: 0 15px; color: rgba(0,0,0,.72); }
.bas-card .field textarea { height: auto; min-height: 92px; padding: 12px 15px; resize: vertical; }
.bas-card .field input:focus, .bas-card .field select:focus, .bas-card .field textarea:focus { border-color: #000; box-shadow: none; }
.bas-card .field.error input, .bas-card .field.error select, .bas-card .field.error textarea { border-color: var(--c-accent); }
.bas-card .field-date { position: relative; }
.bas-card .field-date svg { position: absolute; right: 13px; bottom: 13px; width: 18px; height: 18px; color: #7a7a7a; pointer-events: none; }
.bas-card .field-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin: 4px 0 16px; }
.bas-card .field-check input { width: auto; height: auto; margin-top: 3px; }
.bas-card .field-check label { font-weight: 400; color: var(--c-mute); font-size: .82rem; line-height: 1.45; }
.bas-disclaimer { margin: 6px 0 16px; }
.bas-disclaimer .title { font-weight: 700; color: #404040; font-size: .9rem; margin: 0 0 8px; }
.bas-disclaimer p { font-size: .78rem; color: #777; line-height: 1.55; margin: 0; }
.bas-disclaimer a { color: var(--c-accent); word-break: break-word; }
.bas-submit { text-align: right; }
.bas-card .btn--hero { cursor: pointer; padding: 13px 38px; }

/* Book a Test Drive — left intro/help column over the hero */
.btd-aside { flex: 1 1 auto; max-width: 583px; padding-top: 4px; color: #fff; }
.btd-aside__elig { font-size: .875rem; line-height: 1.6; color: #fff; font-weight: 400; margin: 0; }
.btd-aside__hr { height: 1px; background: #58595b; border: 0; margin: 20px 0; }
.btd-aside__need { font-size: .875rem; line-height: 1.6; color: #fff; margin: 0 0 14px; }
.btd-help { display: flex; gap: var(--space-6); }
.btd-help a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-size: .8125rem; text-align: center; transition: color .2s ease; }
.btd-help a svg { width: 42px; height: 42px; stroke-width: 1.4; }
.btd-help a:hover { color: var(--c-accent); }
.btd-submit { text-align: center; }
.btd-submit .btn--hero { min-width: 240px; }

/* Fleet page — contained banner + horizontal (label-left) form */
.fleet-banner { margin: var(--space-5) 0; }
.fleet-banner img { display: block; width: 100%; aspect-ratio: 1170 / 532; object-fit: cover; }
.fleet-intro { color: var(--c-mute); }
.fleet-intro strong { color: var(--c-ink); font-weight: 700; }
.flt-form { max-width: 560px; margin-top: var(--space-5); }
.flt-form .field { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 6px 16px; margin-bottom: 14px; }
.flt-form .field:has(textarea) { align-items: start; }
.flt-form .field > label { font-size: .875rem; color: #404040; font-weight: 700; letter-spacing: 0; text-transform: none; }
.flt-form .field input, .flt-form .field select, .flt-form .field textarea { width: 100%; height: 45px; border: 1px solid #d4d4d4; background: #fefefe; border-radius: 0; font-size: .875rem; padding: 0 15px; color: rgba(0,0,0,.72); }
.flt-form .field textarea { height: auto; min-height: 92px; padding: 12px 15px; resize: vertical; }
.flt-form .field input:focus, .flt-form .field select:focus, .flt-form .field textarea:focus { outline: none; border-color: #000; box-shadow: none; }
.flt-form .field.error input, .flt-form .field.error select, .flt-form .field.error textarea { border-color: var(--c-accent); }
.flt-form .field .err { grid-column: 2; font-size: .72rem; color: var(--c-accent); display: none; }
.flt-form .field.error .err { display: block; }
.flt-form .field-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin: 4px 0 16px; }
.flt-form .field-check input { width: auto; height: auto; margin-top: 3px; }
.flt-form .field-check label { font-weight: 400; color: var(--c-mute); font-size: .82rem; line-height: 1.45; }
.flt-form .flt-submit { text-align: center; }
.flt-form .flt-submit .btn--hero { min-width: 240px; cursor: pointer; }

@media (max-width: 560px) {
  .flt-form .field { grid-template-columns: 1fr; align-items: start; }
  .flt-form .field .err { grid-column: 1; }
}

/* Finance page — intro+form two-column, dark banner, PCP|HP products */
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.fin-intro h1 { color: var(--c-ink); font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; margin: 0 0 var(--space-4); }
.fin-intro p { color: var(--c-mute); margin: 0 0 var(--space-3); line-height: 1.6; }
.fin-intro p strong { color: var(--c-ink); }
.fin-intro a { color: var(--c-accent); word-break: break-word; }
.fin-form-col .flt-form { max-width: 100%; margin-top: 0; }
.fin-ctas { display: flex; flex-direction: column; gap: var(--space-3); }
.fin-ctas .btn--hero { width: 100%; justify-content: center; }
.fin-banner { position: relative; background-color: #15171a; background-position: center; background-size: cover; background-repeat: no-repeat; padding: var(--space-7) 0; }
.fin-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.fin-banner__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.fin-banner h2 { color: #fff; font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; text-transform: none; margin: 0 0 var(--space-3); }
.fin-banner p { color: rgba(255,255,255,.85); margin: 0; max-width: 64ch; line-height: 1.6; }
.fin-banner .btn--hero { flex: 0 0 auto; }
.fin-prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.fin-prod h2 { font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; text-transform: none; color: var(--c-ink); margin: 0 0 var(--space-4); }
.fin-prod__logo { aspect-ratio: 3 / 2; background: #f1f1f1; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.fin-prod__logo img { width: 190px; max-width: 55%; height: auto; filter: brightness(0); opacity: .4; }
.fin-prod > p { color: var(--c-mute); line-height: 1.6; margin: 0; }
.fin-prod .faq { margin-top: var(--space-5); }
.fin-prod__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

@media (max-width: 860px) {
  .fin-grid, .fin-prod-grid { grid-template-columns: 1fr; }
  .fin-banner__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
  .bas-hero .container { flex-direction: column; }
  .bas-hero__title { padding-top: 0; }
  .bas-card { flex-basis: auto; max-width: 100%; width: 100%; }
  .btd-aside { max-width: 100%; padding-top: 0; }
}

/* Intro lead paragraph under a hero */
.lead { font-size: 1.05rem; color: var(--c-mute); max-width: 70ch; }

/* Highlight call-outs (warranty terms, etc.) */
.callouts { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--c-bg-2); border-left: 3px solid var(--c-accent); }
.callout svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--c-accent); margin-top: 1px; }
.note { font-size: .85rem; color: var(--c-mute); }

/* Data tables (cost of service, warranty matrix) */
.datatable-wrap { overflow-x: auto; border: 1px solid var(--c-line); -webkit-overflow-scrolling: touch; }
.datatable { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 760px; background: #fff; }
.datatable th, .datatable td { padding: 9px 12px; border: 1px solid var(--c-line); text-align: center; white-space: nowrap; }
.datatable thead th { background: var(--c-ink); color: #fff; font-weight: 600; letter-spacing: .03em; }
.datatable tbody tr:first-child td:first-child,
.datatable tbody td:first-child { text-align: left; font-weight: 600; background: var(--c-bg-2); white-space: nowrap; }
.datatable tbody tr:nth-child(even) td:not(:first-child) { background: rgba(0,0,0,.025); }
.datatable--matrix td, .datatable--matrix th { white-space: normal; text-align: left; }

/* Cost-of-Service page head: dark h1 on white + black policy button (matches live) */
.cos-head { padding-top: var(--space-6); }
.cos-head h1 { font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--c-ink); margin: 0 0 var(--space-5); }
.cos-policy-btn { margin-bottom: var(--space-6); }
.cos-note { font-style: italic; color: var(--c-mute); font-size: .85rem; }

/* Warranty page: banner with overlay label + terms row (image beside callouts) */
.warr-banner { padding-top: var(--space-5); }
.warr-banner__img { position: relative; aspect-ratio: 1170 / 334; background-size: cover; background-position: center; }
.warr-banner__label { position: absolute; left: 24px; bottom: 18px; color: rgba(255,255,255,.88); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.warr-terms { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-6); align-items: center; margin: var(--space-6) 0 var(--space-4); }
.warr-terms img { width: 100%; height: auto; display: block; }
.warr-ext-title { margin: 0 0 var(--space-5); }
.datatable--matrix thead th, .datatable--matrix tbody td:first-child { text-transform: uppercase; }
@media (max-width: 760px) { .warr-terms { grid-template-columns: 1fr; } }

/* Current-page indicator inside nav dropdowns (Owners / More items) */
.drop a.is-current { color: var(--c-accent); font-weight: 600; }

/* Roadside Assistance: operator contact buttons (black, like the live page) */
.op-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-5); }
.op-btns .btn--hero { min-width: 120px; justify-content: center; }

/* Contact-us / Locate Us: top banner + photo location cards */
.contact-banner { padding-top: var(--space-5); }
.contact-banner__img { aspect-ratio: 1920 / 549; background-size: cover; background-position: center; }
.loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.loc-card { background: #fff; border: 1px solid var(--c-line); display: flex; flex-direction: column; color: inherit; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.loc-card:hover { border-color: var(--c-ink); box-shadow: var(--shadow-2); }
.loc-card__img { aspect-ratio: 375 / 250; background-size: cover; background-position: center; background-color: #e9ecef; }
.loc-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.loc-card__name { font-weight: 600; font-size: .92rem; color: var(--c-ink); line-height: 1.35; flex: 1; }
.loc-card .btn--hero { width: 100%; justify-content: center; padding: 11px 18px; font-size: 12px; }
.acdelco { margin-top: var(--space-7); }
.acdelco img { width: 100%; height: auto; display: block; }
@media (max-width: 1000px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .loc-grid { grid-template-columns: 1fr; } }

/* Warranty model booklet grid */
.wgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.wcard { border: 1px solid var(--c-line); background: #fff; text-align: center; display: flex; flex-direction: column; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.wcard:hover { border-color: var(--c-ink); box-shadow: var(--shadow-2); }
.wcard img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.wcard__name { font-weight: 700; padding: 14px 8px 6px; letter-spacing: .04em; }
.wcard .btn--doc { margin: 6px 12px 14px; min-width: 0; width: calc(100% - 24px); padding: 10px 8px; font-size: 11px; }

/* Roadside operator phone cards */
.opcard { text-align: center; }
.opcard__name { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c-mute); margin-bottom: 10px; }
.opcard__num { font-family: var(--font-display); font-size: 1.85rem; color: var(--c-accent); display: inline-block; }
.opcard__num:hover { color: var(--c-accent-2); }

/* FAQ accordion (finance, native details) */
.faq { border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 2px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-accent); font-size: 1.5rem; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq__body { padding: 0 2px 18px; color: var(--c-mute); max-width: 82ch; }

/* Two-column product split (finance PCP / HP) */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: start; }
.split--rev .split__media { order: -1; }
.split__panel { background: linear-gradient(135deg, #1a1d22, #2a2e35); color: #fff; min-height: 240px; display: grid; place-items: center; padding: var(--space-6); text-align: center; }
.split__panel .eyebrow { color: rgba(255,255,255,.7); }
.split__panel strong { font-family: var(--font-display); font-size: 2rem; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav { gap: var(--space-5); }
  .nav a { font-size: .74rem; }
  .carousel__slide { flex-basis: calc((100% - 3 * var(--space-5)) / 4); }
  .promo { grid-template-columns: 1fr; }
  .promo__image { min-height: 320px; }
  .news__grid { grid-template-columns: repeat(3, 1fr); }
  .features, .specs, .offer-grid, .location-grid { grid-template-columns: repeat(2, 1fr); }
  .specs .spec:nth-child(2n) { border-right: 0; }
  .wgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .nav, .header-actions .icon-btn:not(.menu-toggle) { display: none; }
  .menu-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; }
  .brand__co { display: none; }
  .brand { font-size: 1.2rem; }
  .utilbar__inner { gap: var(--space-3); justify-content: center; font-size: .7rem; }
  .utilbar a span:not(.sep) { display: none; }
  /* Keep slides absolutely filling a definite-height viewport so the
     background image covers the whole hero (height:auto + height:100% on a
     relative slide collapsed it to the content height, ~208px, leaving a
     black void). */
  .hero__viewport { height: 64vh; min-height: 460px; max-height: 580px; padding: 0; }
  .hero__bg svg { width: 110%; right: -10%; top: auto; bottom: 0; transform: translateY(40%); }
  .hero__content { text-align: center; margin-inline: auto; padding: 0 16px; }
  .hero__title { font-size: clamp(2rem, 8vw, 3rem); }
  .hero__logo { height: clamp(5.7rem, 10vw, 6.5rem); margin-inline: auto; object-position: center; }
  .hero__dots { bottom: 24px; }
  .hero__arrows { display: none; }
  .searchblock__form { flex-direction: column; }
  .searchblock__form button { padding: 14px; }
  .carousel__slide { flex-basis: calc((100% - var(--space-5)) / 2); }
  .dual__grid { grid-template-columns: 1fr 1fr; }
  .promo__content { padding: var(--space-7) var(--space-5); }
  .news__grid { grid-template-columns: repeat(2, 1fr); }
  .footer-links { flex-direction: column; align-items: center; text-align: center; }
  .footer-links nav { justify-content: center; gap: var(--space-4); }
  .features, .specs, .offer-grid, .location-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item:first-child { grid-column: span 2; grid-row: auto; }
  .wgrid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--space-5); }
  .split--rev .split__media { order: 0; }
}
@media (max-width: 520px) {
  .carousel__slide { flex-basis: 100%; }
  .dual__grid { grid-template-columns: 1fr; }
  .news__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GAC SKIN — topbar lockup, brand placeholder, nav dropdowns
   (added on top of the base template above)
   ============================================================ */

/* ---- GAC brand red, slightly warmer ---- */
:root { --c-accent: #cf102d; --c-accent-2: #a50c23; --c-accent-soft: #fdecef; }

/* ---------- Top bar (3-column: left links | logo | right links) ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--c-line-soft); }
.topbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  min-height: 78px;
}
.topbar__side { display: flex; align-items: center; gap: var(--space-5); }
.topbar__side--right { justify-content: flex-end; }
.topbar__side a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-ink-2);
  transition: color var(--t-fast);
}
.topbar__side a:hover { color: var(--c-accent); }
.topbar__side .ico { font-size: .95rem; line-height: 1; }
.topbar__side .num {
  background: var(--c-accent); color: #fff;
  font-size: .65rem; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; display: inline-grid; place-items: center;
}

/* ---------- Brand logo placeholder (swap for real GAC logo image) ---------- */
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand__logo {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.9rem; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--c-accent);
  padding: 8px 14px 6px; border-radius: 3px;
}
.brand__co {
  font-family: var(--font-sans);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-ink-2); line-height: 1.35;
  padding-left: 14px; border-left: 1px solid var(--c-line);
}

/* ---------- Main nav row (sticky) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-ink);
  border-bottom: 0;
}
.site-header__inner {
  display: flex; align-items: center;
  height: 54px; gap: var(--space-5);
}
.site-header .nav { flex: 1; justify-content: center; gap: var(--space-7); }
.site-header .nav > a,
.nav__item > a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
  padding: 18px 0;
}
.site-header .nav a::after { background: var(--c-accent); height: 3px; bottom: 0; }
.site-header .nav a:hover,
.site-header .nav a[aria-current="page"] { color: #fff; }
.nav__item { position: relative; }
.nav__item .caret { font-size: .55em; opacity: .7; }

/* nav dropdowns */
.dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid var(--c-line);
  box-shadow: var(--shadow-2);
  min-width: 234px; padding: 8px 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 60;
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a {
  display: block; padding: 11px 22px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-2); white-space: nowrap;
}
.dropdown a::after { display: none; }
.dropdown a:hover { background: var(--c-bg-2); color: var(--c-accent); }

/* header right actions on dark bar */
.site-header .icon-btn { color: rgba(255,255,255,.9); }
.site-header .icon-btn:hover { background: rgba(255,255,255,.12); }

/* mobile-only brand inside sticky bar */
.brand--mobile { display: none; }
.brand--mobile .brand__logo { font-size: 1.3rem; padding: 5px 10px 4px; }
@media (max-width: 860px) {
  .brand--mobile { display: inline-flex; flex: 1; justify-content: center; }
}

/* ---------- Featured single-model band (GS8 Traveller style) ---------- */
.feature-band {
  position: relative; color: #fff; overflow: hidden;
  background: radial-gradient(90% 120% at 70% 30%, #2a3340 0%, #0b0d10 70%);
  min-height: 520px;
  display: grid; place-items: end center;
  text-align: center;
}
.feature-band__art { position: absolute; inset: 0; display: grid; place-items: center; }
.feature-band__art svg { width: min(78%, 980px); filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
.feature-band__inner { position: relative; z-index: 2; padding: 0 16px var(--space-9); max-width: 720px; }
.feature-band__eyebrow { font-size: .78rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: var(--space-3); }
.feature-band h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: var(--space-5); }

/* placeholder note helper */
.ph-note { font-size: .8rem; color: var(--c-mute); }
.ph-note code { background: var(--c-bg-2); padding: 2px 6px; border-radius: 3px; }

/* ---------- Lineup cards (models page) ---------- */
.lineup-card { background: #fff; border: 1px solid var(--c-line); display: flex; flex-direction: column; transition: box-shadow var(--t-fast), transform var(--t-fast); }
.lineup-card:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.lineup-card__media { position: relative; aspect-ratio: 16/10; background: var(--c-bg-2); display: grid; place-items: center; padding: 18px; }
.lineup-card__media svg { width: 100%; }
.lineup-card__badge { position: absolute; top: 12px; left: 12px; background: var(--c-accent); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; }
.lineup-card__body { padding: 18px 20px 22px; text-align: center; border-top: 1px solid var(--c-line-soft); }
.lineup-card__name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; color: var(--c-ink); }
.lineup-card__tag { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-mute); margin-bottom: 14px; }
.lineup-card__actions { display: flex; gap: 8px; justify-content: center; }
.lineup-card__actions .btn { padding: 10px 18px; font-size: .68rem; letter-spacing: .12em; }

/* ---------- Listing rows (news / offers pages) ---------- */
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.listing-card { background: #fff; border: 1px solid var(--c-line); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--t-fast), transform var(--t-fast); }
.listing-card:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.listing-card__media { aspect-ratio: 16/10; position: relative; }
.listing-card__cat { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 5px 11px; }
.listing-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.listing-card__date { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); }
.listing-card__title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin: 0; color: var(--c-ink); }
.listing-card__more { margin-top: auto; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); }

@media (max-width: 1100px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } .model-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .listing-grid { grid-template-columns: 1fr; } .model-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GAC HEADER v2 — faithful black header (index.html)
   ============================================================ */
.gac-header { position: sticky; top: 0; z-index: 100; background: #000; color: #fff; box-shadow: 0 0 6px rgba(0,0,0,.35); }
.gac-header a { color: #fff; }

/* Row A — utility */
.util { border-bottom: 1px solid rgba(255,255,255,.08); }
.util__inner { display: flex; align-items: center; gap: 24px; height: 36px; }
.util a { display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.78); transition: color var(--t-fast); }
.util a:hover { color: #fff; }
.util svg { width: 14px; height: 14px; }
.util__count { background: var(--c-accent); color: #fff; border-radius: 999px; min-width: 16px; height: 16px; display: inline-grid; place-items: center; font-size: .62rem; padding: 0 4px; }

/* Row B — brand lockup */
.brandbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 20px; }
.brandbar__logo img { height: 44px; width: auto; display: block; }
.brandbar__right { display: flex; align-items: center; gap: 22px; }
.brandbar__right a { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.85); transition: color var(--t-fast); }
.brandbar__right a:hover { color: #fff; }
.brandbar__right svg { width: 16px; height: 16px; }
.brandbar__right .lang span { font-size: .85rem; }
.brandbar__franchise { height: 44px; width: auto; margin-left: 6px; }

/* Language switcher dropdown */
.lang-switch { position: relative; }
.lang-switch > .lang { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.85); transition: color var(--t-fast); }
.lang-switch > .lang:hover { color: #fff; }
.lang-switch .lang__caret { font-size: .6rem; transition: transform var(--t-fast); }
.lang-switch:hover .lang__caret, .lang-switch:focus-within .lang__caret { transform: rotate(180deg); }
.lang-menu { position: absolute; top: 100%; right: 0; margin: 8px 0 0; padding: 6px 0; list-style: none; background: #fff; min-width: 150px; box-shadow: var(--shadow-2); border-radius: 4px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t-fast), transform var(--t-fast); z-index: 60; }
.lang-switch:hover .lang-menu, .lang-switch:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a { display: block; padding: 9px 16px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #1a1a1a; white-space: nowrap; }
.lang-menu a:hover { background: #f4f5f7; color: var(--c-accent); }
.lang-menu a.is-current { color: var(--c-accent); }

/* Row C — main nav */
.mainnav { position: relative; border-top: 1px solid rgba(255,255,255,.08); }
.mainnav__inner { display: flex; align-items: center; gap: 16px; }
.menu { display: flex; align-items: center; gap: 30px; flex: 1; }
.menu > li { position: relative; }
.menu > li > a { display: inline-flex; align-items: center; gap: 6px; height: 52px; font-size: .9375rem; font-weight: 300; letter-spacing: normal; text-transform: uppercase; color: rgba(255,255,255,.85); }
.menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med); }
.menu > li:hover > a::after, .menu > li > a.is-current::after { transform: scaleX(1); }
.menu > li:hover > a { color: #fff; }
.menu .caret { font-size: .5rem; opacity: .7; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; }

/* text dropdowns (Owners / Shopping Tools / More) */
.has-drop > .drop { position: absolute; top: 100%; left: 0; list-style: none; margin: 0; padding: 8px 0; background: #fff; min-width: 234px; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t-fast), transform var(--t-fast); z-index: 60; }
.has-drop:hover > .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.has-drop > .drop a { display: block; height: auto; padding: 11px 20px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #1a1a1a; white-space: nowrap; }
.has-drop > .drop a::after { display: none; }
.has-drop > .drop a:hover { background: #f4f5f7; color: var(--c-accent); }

/* MODELS mega-menu */
.menu__models { position: static; }
.megamenu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; color: #111; box-shadow: 0 22px 44px rgba(0,0,0,.18); border-top: 1px solid var(--c-line); padding: 26px 0 32px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t-med), transform var(--t-med); z-index: 55; }
.menu__models:hover .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu__tabs { display: flex; justify-content: center; border-bottom: 1px solid var(--c-line); margin-bottom: 22px; }
.megamenu__tab { padding: 10px 26px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-mute); position: relative; background: none; }
.megamenu__tab.is-active { color: #111; }
.megamenu__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-accent); }
.megamenu__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 20px; }
.megamenu__item { text-align: center; display: block; padding: 8px; border-radius: 6px; transition: background var(--t-fast); }
.megamenu__item:hover { background: #f6f7f9; }
.megamenu__item img { width: 100%; height: auto; }
.megamenu__item .mm-name { display: block; margin-top: 4px; font-family: var(--font-display); font-size: .98rem; letter-spacing: .05em; text-transform: uppercase; color: #111; }
.megamenu__item .is-new { display: inline-block; margin-left: 5px; background: var(--c-accent); color: #fff; font-size: .52rem; padding: 1px 6px; vertical-align: middle; letter-spacing: .08em; }
.megamenu__item.is-hidden { display: none; }

/* scroll-shrink: collapse utility + brand rows after scroll */
.gac-header.is-shrunk .util,
.gac-header.is-shrunk .brandbar { display: none; }

/* hero real-image background + right action rail */
.hero__bg--img { background-size: cover; background-position: center; }
.hero-rail { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 10px; }
.hero-rail a { width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: #fff; transition: background var(--t-fast), border-color var(--t-fast); }
.hero-rail a:hover { background: var(--c-accent); border-color: var(--c-accent); }
.hero-rail svg { width: 18px; height: 18px; }

/* real model thumbnails in the homepage strip */
.model-card__media img { width: 100%; height: auto; }
.lineup-card__media img { width: 100%; height: auto; }

/* featured band with real photo */
.feature-band--photo { background-size: cover; background-position: center; }
.feature-band--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.25) 60%, rgba(0,0,0,.55)); }
.feature-band--photo .feature-band__inner { position: relative; z-index: 2; }

/* news cards real photos */
.news-card__media--photo { background-size: cover !important; background-position: center; }

/* promo + dual real photos */
.promo__image--photo { background-size: cover; background-position: center; }
.dual__media--photo { background-size: cover; background-position: center; }
.dual__media--photo svg { display: none; }

@media (max-width: 1100px) { .megamenu__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) {
  .util { display: none; }
  .brandbar__right > a:not(.lang) { display: none; }
  /* Keep BOTH brand logos visible on mobile: GAC (left) + Mutawa Alkazi franchise (right).
     Was: franchise hidden + lone GAC logo centred. Shrink both so they fit narrow phones;
     .brandbar__inner stays space-between (no center override). */
  .brandbar__logo img, .brandbar__franchise { height: 30px; }
  .brandbar__right { gap: 14px; }
  .menu { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; }
  .nav-toggle svg { width: 26px; height: 26px; }
  .mainnav__inner { justify-content: space-between; }
  .megamenu { display: none !important; }
  .hero-rail { display: none; }
  .tabs__btn { padding: 14px 10px; }
}

/* Small phones: step both brand logos down further so GAC + language + franchise
   logo all fit on a ~320px viewport without overflow. */
@media (max-width: 480px) {
  .brandbar__logo img, .brandbar__franchise { height: 24px; }
  .brandbar__inner { gap: 10px; }
  .brandbar__right { gap: 10px; }
}
/* iPhone-SE-class widths (~320px): trim a little further for comfortable slack. */
@media (max-width: 360px) {
  .brandbar__logo img, .brandbar__franchise { height: 22px; }
  .brandbar__inner, .brandbar__right { gap: 8px; }
}

/* ------------------------------------------------------------------
   MOBILE HERO — full-screen image with the caption OVER the photo
   (matches the desktop/web view). Phones previously rendered the photo
   as a small 16:9 band with the caption on a black panel beneath it;
   now the image fills the hero, the caption + dots sit over it, and the
   prev/next arrows stay visible — as on the web view.
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* (1) Full-screen image: fill the band between the sticky header (~110px on
     phones — brandbar + mainnav, util hidden) and the fixed bottom action-dock
     (~58px), so the whole photo shows, nothing hides under the dock, and there
     is no extra scroll. (var(--header-h) is 64px on mobile but the real header
     is taller, so use measured constants here.) */
  .hero__viewport { /*height: calc(100vh - 110px - 58px); height: calc(100svh - 110px - 58px);*/
                    min-height: 440px; max-height: none; padding: 0; }
  /* Background image covers the WHOLE hero (no 16:9 band, no black panel) */
  .hero__bg { top: 0; left: 0; right: 0; bottom: 0; height: auto; }
  .hero__bg--img { background-size: cover; background-position: center; }
  /* Scrim so the white caption stays legible over any photo (darker top + bottom) */
  .hero__bg::after { background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.62) 100%); }
  /* (2) Caption overlaid and centred ON the image (not on a panel below) */
  .hero__inner { position: relative; top: auto; left: auto; right: auto; bottom: auto;
                 height: 100%; align-items: flex-end; justify-content: center; padding: 0 0 50px 0; }
  .hero__content { text-align: center; max-width: 560px; margin-inline: auto; padding: 0 18px; }
  .hero__eyebrow { max-width: 34ch; margin-inline: auto; margin-bottom: 10px; }
  .hero__title { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 16px; }
  .hero__logo { /*height: clamp(3rem, 11vw, 5.5rem);*/ margin-inline: auto; object-position: center; margin-bottom: 16px; }
  /* dots over the image, just above the bottom action-dock */
  .hero__dots { top: auto; bottom: 20px; left: 50%; transform: translateX(-50%);
                width: auto; justify-content: center; }
  /* (3) Keep the prev/next arrows visible like the web view (a touch smaller) */
  .hero__arrows { display: flex; padding: 0 8px; }
  .hero__arrow { width: 40px; height: 40px; font-size: 1.25rem; }
  .hero__scroll { display: none; }
}

/* ============================================================
   MEGA-MENU FIX — full-width panel + clean grid
   (.menu > li{position:relative} was beating .menu__models;
    raise specificity so the panel anchors to .mainnav)
   ============================================================ */
.mainnav { position: relative; }
.menu > li.menu__models { position: static; }
.megamenu {
  position: absolute; top: 100%; left: 0; right: 0;
  border-top: 3px solid var(--c-accent);
  padding: 30px 0 36px;
}
.megamenu__tabs { gap: 6px; margin-bottom: 26px; }
.megamenu__grid { grid-template-columns: repeat(6, 1fr); gap: 22px 16px; align-items: start; }
.megamenu__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 10px 6px; }
.megamenu__item img { width: 100%; max-width: 190px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.megamenu__item .mm-name { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; white-space: nowrap; font-size: 1rem; }
.megamenu__item .is-new { margin-left: 0; }
@media (max-width: 1100px) { .megamenu__grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   SEARCH & SHOP ONLINE — two separate centered controls
   (matches en.gacmotorsaudi.com: Model select + dark Search)
   ============================================================ */
.searchblock__form {
  display: flex; justify-content: center; align-items: stretch;
  gap: 16px; max-width: 780px; margin: 0 auto;
  background: none; border: 0; flex-wrap: wrap;
}
.searchblock__form select {
  flex: 0 1 340px; min-width: 0;
  border: 1px solid #c7ccd3; border-radius: 4px;
  background: #fff; color: var(--c-ink);
  padding: 15px 44px 15px 16px;
}
.searchblock__form button {
  flex: 0 0 auto; min-width: 180px;
  border-radius: 4px; padding: 15px 40px;
  background: var(--c-ink); color: #fff;
}
.searchblock__form button:hover { background: #000; }
@media (max-width: 560px) {
  .searchblock__form select, .searchblock__form button { flex: 1 1 100%; }
}

/* ---------- Responsive: GAC header ---------- */
@media (max-width: 860px) {
  .topbar { display: none; }
  .site-header { background: var(--c-ink); }
  .site-header__inner { height: 60px; grid-template-columns: auto 1fr auto; }
  .site-header .nav { display: none; }
  .brand--mobile { display: inline-flex; }
  .site-header .menu-toggle { display: inline-flex; }
  .site-header .menu-toggle span,
  .site-header .menu-toggle span::before,
  .site-header .menu-toggle span::after { background: #fff; }
  .site-header .icon-btn:not(.menu-toggle) { display: grid; }
}

/* =========================================================
   MODEL DETAIL PAGE (GS8 Traveller)  — .mp namespace
   ========================================================= */
.mp { background: var(--c-bg); }
.mp .container { width: min(100% - 32px, 1366px); }

/* Hero / intro banner */
.mp-hero { position: relative; }
.mp-hero__img { display:block; width:100%; height:auto; }
.mp-hero__overlay { position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 45%, transparent 70%); padding-bottom: var(--space-7); }
.mp-hero__link { display:block; text-decoration:none; color:inherit; }
.mp-hero__eyebrow { color:rgba(255,255,255,.85); font-size:.9375rem; font-weight:300; letter-spacing:.18em; text-transform:uppercase; margin:0 0 var(--space-2); }
.mp-hero__title { color:#fff; font-family:var(--font-display); font-size:1.6875rem; font-weight:700; text-transform:uppercase; margin:0 0 var(--space-2); text-shadow:0 2px 14px rgba(0,0,0,.45); }
/* Forced responsive height (not max-height) so the logo is prominent regardless of the
   uploaded image's pixel size — max-height alone can't scale a small source up (see .hero__logo). */
.mp-hero__title--logo { margin:0; }
.mp-hero__logo { display:block; height:clamp(2.75rem, 7vw, 5rem); width:auto; max-width:min(80%, 460px); object-fit:contain; margin:0 0 var(--space-2); filter:drop-shadow(0 2px 14px rgba(0,0,0,.45)); }
.mp-hero__sub { color:#fff; font-size:.9375rem; margin:0 0 var(--space-4); text-shadow:0 1px 10px rgba(0,0,0,.45); }
.mp-hero__cta { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.btn--hero { background:#000; color:#fff; border:0; border-radius:0; padding:15px 40px; font-size:13px; letter-spacing:.08em; }
.btn--hero:hover { background:#000; }
.btn--ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7); }
.btn--ghost:hover { background:#fff; color:var(--c-ink); }

/* Section sub-nav */
.mp-subnav { background:#fff; position:sticky; top:0; z-index:40; border-bottom:1px solid var(--c-line); }
.mp-subnav__inner { display:flex; align-items:center; gap:var(--space-5); overflow-x:auto; padding:8px 0; }
.mp-subnav__links { display:flex; gap:var(--space-5); margin-left:auto; }
.mp-subnav__links a { color:#111; font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; padding:8px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
.mp-subnav__links a:hover { color:var(--c-accent); }
.mp-subnav__links a.is-active { color:var(--c-accent); border-color:var(--c-accent); }
.btn--subnav { background:#000; color:#fff; border:0; border-radius:0; padding:11px 30px; font-size:13px; letter-spacing:.06em; white-space:nowrap; }
.btn--subnav:hover { background:#000; transform:none; }
@media (max-width:767px){ .mp-subnav__links { display:none; } }

/* Generic section + heading — original is white throughout with grey headings */
.mp-section { padding: var(--space-8) 0; }
.mp-section--tint { background:#fff; }
.mp-section--dark { background:#fff; }
.mp-head { margin:0 0 var(--space-6); }
.mp-head--center { text-align:center; max-width:820px; margin-inline:auto; }
.mp-head__title { font-family:var(--font-display); font-size:1.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0; margin:0 0 var(--space-3); color:#58595b; }
.mp-head__sub { font-size:1rem; line-height:1.6; color:var(--c-mute); margin:0; }

/* Light-grey section (Technology) — matches real site */
.mp-section--grey { background:#f4f4f4; }
.mp-tech-banner { margin:0 0 var(--space-5); }
.mp-tech-banner img { display:block; width:100%; height:auto; }
#technology .mp-card__title { margin-top:var(--space-4); }
/* Left-aligned heading (e.g. Technology) */
.mp-band { padding:var(--space-6) 0; }
.mp-band--grey { background:#f4f4f4; }
@media (max-width:767px){ .mp-band--grey { background:#fff; padding-bottom:0; } }
.mp-head--left { text-align:left; max-width:none; margin-inline:0; }
.mp-head--left .mp-head__title { color:#000; font-size:2.125rem; }
.mp-head--left .mp-head__sub { color:#000; font-size:1.0625rem; font-weight:700; max-width:none; }
@media (min-width:1200px){ .mp-head--left { padding-right:14%; } }

/* Overview stats */
.mp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-top:var(--space-6); }
.mp-stat { text-align:center; padding:var(--space-5) var(--space-3); border:1px solid var(--c-line); background:#fff; }
.mp-stat__label { display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-mute); margin-bottom:var(--space-2); }
.mp-stat__value { display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--c-ink); }
.mp-note { font-size:.78rem; color:var(--c-mute); margin:var(--space-4) 0 0; }
.mp-note--center { text-align:center; }

/* Wide image slider (exterior / interior) — full-bleed */
.mp-slider-wrap { background:#fff; }
.mp-slider { position:relative; max-width:none; margin-inline:auto; }
.mp-slider__viewport { overflow:hidden; }
.mp-slider__track { display:flex; transition:transform .5s ease; }
.mp-slide { flex:0 0 100%; margin:0; }
.mp-slide img { display:block; width:100%; height:auto; }
.mp-slider__caption { position:absolute; left:0; bottom:0; padding:var(--space-6); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.mp-slider__eyebrow { display:block; font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:var(--space-2); }
.mp-slider__title { display:block; font-family:var(--font-display); font-size:1.6875rem; font-weight:700; text-transform:uppercase; }
.mp-slider__arrow { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0; background:rgba(0,0,0,.45); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.mp-slider__arrow:hover { background:var(--c-accent); }
.mp-slider__arrow--prev { left:18px; } .mp-slider__arrow--next { right:18px; }
.mp-slider__pager { position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:10px; }
.mp-slider__pager button { width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0; transition:background .15s; }
.mp-slider__pager button.is-active { background:var(--c-accent); }

/* Tabs (design / performance) */
.mp-tabs__nav { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); margin-bottom:var(--space-6); border-bottom:1px solid var(--c-line); }
.mp-tabs__btn { background:none; border:0; border-bottom:2px solid transparent; padding:12px 18px; font-family:var(--font-display); font-size:.95rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--c-mute); cursor:pointer; transition:color .15s,border-color .15s; }
.mp-tabs__btn:hover { color:var(--c-ink); }
.mp-tabs__btn.is-active { color:var(--c-ink); border-color:var(--c-accent); }

/* Performance + Design tabs — equal-width, solid black active (matches real new-details--tab) */
#performance .mp-tabs__nav, #design .mp-tabs__nav { justify-content:stretch; flex-wrap:nowrap; gap:0; }
#performance .mp-tabs__btn, #design .mp-tabs__btn { flex:1 1 0; border-bottom:0; padding:14px 12px; font-size:13px; font-weight:700; color:#000; text-align:center; line-height:1.3; }
#performance .mp-tabs__btn:hover, #design .mp-tabs__btn:hover { color:#000; }
#performance .mp-tabs__btn.is-active, #design .mp-tabs__btn.is-active { background:#000; color:#fff; border-color:transparent; }
@media (max-width:620px){ #performance .mp-tabs__nav, #design .mp-tabs__nav { flex-wrap:wrap; } #performance .mp-tabs__btn, #design .mp-tabs__btn { flex:1 1 100%; } }

/* Feature row (image + text) */
.mp-feature { display:none; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:center; }
.mp-feature.is-active { display:grid; }
.mp-feature__media img { display:block; width:100%; height:auto; }
.mp-feature__title { font-family:var(--font-display); font-size:1.5rem; font-weight:700; text-transform:uppercase; margin:0 0 var(--space-4); color:#58595b; }
.mp-feature__body p { font-size:1rem; line-height:1.7; color:var(--c-ink-3); margin:0 0 var(--space-4); }
.mp-feature__list { margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:var(--space-3); }
.mp-feature__list li { font-size:.95rem; line-height:1.6; color:var(--c-ink-3); }
.mp-feature__list strong { color:var(--c-ink); }

/* Gallery — tabbed 3-across grid (6 photos, full width) with zoom overlay */
.mp-gpanel { display:none; }
.mp-gpanel.is-active { display:block; }
.mp-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; width:100vw; margin-left:calc(50% - 50vw); padding:0 8px; box-sizing:border-box; }
.mp-gshot { position:relative; overflow:hidden; display:block; cursor:pointer; min-width:0; }
.mp-gshot img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; transition:transform .4s ease; }
.mp-gshot:hover img { transform:scale(1.05); }
.mp-gshot__zoom { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.28); opacity:0; transition:opacity .2s ease; }
.mp-gshot__zoom svg { width:38px; height:38px; }
.mp-gshot:hover .mp-gshot__zoom { opacity:1; }
/* Gallery heading (centered, black 34px) + black-active tabs */
#gallery .mp-head__title { color:#000; font-size:2.125rem; }
#gallery .mp-tabs__btn { color:#000; }
#gallery .mp-tabs__btn:hover { color:#000; }
#gallery .mp-tabs__btn.is-active { background:#000; color:#fff; border-color:transparent; }
@media (max-width:980px){ .mp-gallery { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .mp-gallery { grid-template-columns:1fr; } }

/* Gallery lightbox viewer */
.mp-lightbox { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.92); }
.mp-lightbox.is-open { display:flex; }
.mp-lightbox__img { max-width:90vw; max-height:84vh; object-fit:contain; box-shadow:0 16px 50px rgba(0,0,0,.6); }
.mp-lightbox__close { position:absolute; top:16px; right:24px; background:none; border:0; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; opacity:.85; }
.mp-lightbox__close:hover { opacity:1; }
.mp-lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:2rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.mp-lightbox__nav:hover { background:var(--c-accent); }
.mp-lightbox__nav--prev { left:24px; } .mp-lightbox__nav--next { right:24px; }
.mp-lightbox__count { position:absolute; bottom:22px; left:0; right:0; text-align:center; color:rgba(255,255,255,.8); font-size:.85rem; letter-spacing:.05em; }
@media (max-width:620px){ .mp-lightbox__nav--prev { left:8px; } .mp-lightbox__nav--next { right:8px; } }

/* Colorisers */
.mp-colours__stage { position:relative; max-width:1000px; margin:0 auto; aspect-ratio:16/9; }
.mp-colours__img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .35s ease; }
.mp-colours__img.is-active { opacity:1; }
.mp-colours__swatches { display:flex; justify-content:center; gap:var(--space-4); margin-top:var(--space-5); flex-wrap:wrap; }
.mp-swatch { display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:0; cursor:pointer; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--c-mute); }
.mp-swatch::before { content:""; width:30px; height:30px; border-radius:50%; background:var(--sw); border:2px solid transparent; box-shadow:0 0 0 1px var(--c-line); transition:border-color .15s; }
.mp-swatch.is-active { color:var(--c-ink); }
.mp-swatch.is-active::before { border-color:var(--c-accent); }

/* Quality — full-width 8/4 split, image flush against transparent card */
#quality > .container { width:min(100%, 1920px); margin-inline:auto; padding:0; }
.mp-quality { display:flex; align-items:stretch; }
.mp-quality__main { flex:0 0 66.66%; max-width:66.66%; position:relative; overflow:hidden; }
.mp-quality__main img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }
.mp-quality__card { flex:0 0 33.34%; max-width:33.34%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:transparent; border:0; padding:0 20px; text-align:center; }
.mp-quality__thumb { width:100%; overflow:hidden; }
.mp-quality__thumb img { display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:4/3; }
.mp-quality__text { display:flex; flex-direction:column; gap:var(--space-2); padding-top:var(--space-4); text-align:center; }
.mp-quality__strapline { font-family:var(--font-display); font-weight:700; font-size:1.5rem; text-transform:uppercase; color:#000; }
.mp-quality__content { color:#58595b; font-size:.9375rem; font-weight:300; line-height:1.6; margin:0; }
@media (max-width:860px){ .mp-quality { flex-direction:column; } .mp-quality__main, .mp-quality__card { flex-basis:auto; max-width:none; } .mp-quality__card { padding:var(--space-4); } }

/* Feature cards (technology) — flat, white */
.mp-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.mp-card { background:#fff; overflow:hidden; border:1px solid var(--c-line); display:flex; flex-direction:column; position:relative; }
.mp-card__media img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }
.mp-card__tag { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent); margin:var(--space-5) var(--space-5) 0; }
.mp-card__title { font-family:var(--font-display); font-size:1.125rem; font-weight:700; text-transform:uppercase; margin:var(--space-2) var(--space-5) 0; color:#58595b; }
.mp-card__text { font-size:.92rem; line-height:1.6; color:var(--c-ink-3); margin:var(--space-3) var(--space-5) var(--space-5); }

/* Left-heading body paragraph (safety, etc.) */
.mp-head__body { color:#58595b; font-size:.9375rem; font-weight:300; line-height:1.6; margin:var(--space-3) 0 0; max-width:none; }

/* Safety toggles — 3 columns on desktop (heading hidden, body shown); accordion below 980px */
.mp-stoggles { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.mp-stoggle { padding:0 10px; }
.mp-stoggle__head { display:none; }
.mp-stoggle__icon { display:none; }
.mp-stoggle__body { display:block; }
.mp-stoggle__media { overflow:hidden; }
.mp-stoggle__media img { display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:16/9; }
.mp-stoggle__strap { font-family:var(--font-display); font-weight:700; font-size:1.5rem; text-transform:uppercase; color:#000; margin:var(--space-4) 0 var(--space-2); }
.mp-stoggle__content { color:#58595b; font-size:.9375rem; font-weight:300; line-height:1.6; margin:0; }
@media (max-width:979px){
  .mp-stoggles { grid-template-columns:1fr; }
  .mp-stoggle { padding:0; margin-top:-1px; }
  .mp-stoggle__head { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; background:#fff; border:1px solid #ebecee; padding:18px 20px; font-family:var(--font-display); font-size:14px; font-weight:700; text-transform:uppercase; color:#000; text-align:left; cursor:pointer; }
  .mp-stoggle__icon { display:block; position:relative; width:14px; height:14px; flex:0 0 14px; }
  .mp-stoggle__icon::before, .mp-stoggle__icon::after { content:""; position:absolute; background:#000; transition:opacity .2s; }
  .mp-stoggle__icon::before { top:6px; left:0; width:14px; height:2px; }
  .mp-stoggle__icon::after { left:6px; top:0; width:2px; height:14px; }
  .mp-stoggle.is-open .mp-stoggle__icon::after { opacity:0; }
  .mp-stoggle__body { display:none; padding:16px 0 24px; }
  .mp-stoggle.is-open .mp-stoggle__body { display:block; }
}

/* Trims — single white card, centered */
.mp-trims { display:flex; justify-content:center; }
.mp-trim { width:342px; max-width:100%; background:#fff; text-align:center; }
.mp-trim__media img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.mp-trim__body { padding:20px 0 0; }
.mp-trim__model { font-family:var(--font-display); font-size:2.125rem; font-weight:700; text-transform:uppercase; color:#000; line-height:1.05; margin:0; }
.mp-trim__name { font-size:1rem; font-weight:400; text-transform:none; color:#000; margin:0 0 13px; }
.mp-trim__price { list-style:none; margin:0 0 var(--space-4); padding:0; color:#58595b; font-size:.9375rem; font-weight:300; line-height:1.6; }
.mp-trim__cta { display:flex; flex-direction:column; align-items:center; gap:12px; }
.btn--trim { background:#000; color:#fff; border:0; border-radius:0; width:260px; padding:13px 40px; font-size:13px; display: block; }
.btn--trim:hover { background:#58595b; color:#fff; }

/* Warranty — thin divider, left heading, stacked black PDF buttons */
.mp-hr { border:0; border-top:1px solid #dedede; margin:0 0 var(--space-6); }
.mp-warranty__links { display:flex; flex-direction:column; align-items:flex-start; gap:20px; margin-top:var(--space-5); }
.btn--doc { background:#000; color:#fff; border:0; border-radius:0; min-width:180px; padding:13px 40px; font-size:13px; letter-spacing:.02em; text-align:center; }
.btn--doc:hover { background:#58595b; color:#fff; }

/* Enquiry / contact */
.mp-enquiry { position:relative; background-size:cover; background-position:center top; }
.mp-enquiry__overlay { background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.05) 100%); padding:var(--space-8) 0; }
.mp-enquiry__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:start; }
.mp-enquiry__title { font-family:var(--font-display); font-size:2.125rem; font-weight:700; text-transform:uppercase; color:#fff; margin:0 0 var(--space-3); }
.mp-enquiry__sub { color:#fff; font-size:1.0625rem; font-weight:700; text-transform:uppercase; margin:0 0 var(--space-3); }
.mp-enquiry__lead { color:#fff; font-size:.9375rem; font-weight:300; margin:0; }
.mp-enquiry__actions { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); margin-top:var(--space-5); }
.mp-enquiry__action { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.mp-enquiry__action svg { width:17px; height:17px; fill:currentColor; flex:0 0 auto; }
.mp-enquiry__action:hover { opacity:.78; }
.mp-form { background:#fff; border-radius:0; padding:30px 40px; }
.mp-form .field { margin-bottom:16px; }
.mp-form label { display:block; font-size:14px; font-weight:300; color:#404040; margin-bottom:6px; }
.mp-form input, .mp-form select, .mp-form textarea { width:100%; padding:0 12px; height:45px; border:1px solid #d4d4d4; border-radius:0; font:inherit; font-size:14px; background:#fefefe; color:rgba(0,0,0,.7); }
.mp-form textarea { height:auto; min-height:84px; padding:10px 12px; resize:vertical; }
.mp-form .field.error input, .mp-form .field.error select { border-color:var(--c-accent); }
.mp-form__dpp { font-size:12px; color:#777; line-height:1.6; margin:8px 0 16px; }
.mp-form__dpp-title { font-weight:700; color:#404040; font-size:13px; margin:0 0 6px; }
.mp-form__dpp a { color:var(--c-accent); word-break:break-all; }
.mp-check { display:flex; gap:10px; align-items:flex-start; font-size:12px; color:#777; font-weight:400; margin-bottom:16px; line-height:1.5; }
.mp-check input { width:auto; height:auto; margin-top:3px; flex:0 0 auto; }
.mp-check a { color:var(--c-accent); }
.mp-form__submit { width:100%; background:#000; color:#fff; border:0; border-radius:0; height:45px; font-size:14px; text-transform:uppercase; letter-spacing:.02em; cursor:pointer; }
.mp-form__submit:hover { background:#58595b; }

/* Responsive */
@media (max-width:980px){
  .mp-feature, .mp-enquiry__grid { grid-template-columns:1fr; }
  .mp-cards, .mp-gallery { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .mp-stats { grid-template-columns:repeat(2,1fr); }
  .mp-cards, .mp-gallery, .mp-form__row { grid-template-columns:1fr; }
  .mp-slider__caption { padding:var(--space-4); }
  .mp-card__title { cursor:pointer; padding-right:34px; }
  .mp-card__title::after { content:"+"; position:absolute; right:var(--space-5); font-weight:400; color:var(--c-accent); }
  .mp-card.is-open .mp-card__title::after { content:"\2013"; }
  .mp-card .mp-card__text { display:none; }
  .mp-card.is-open .mp-card__text { display:block; }
}

/* =========================================================================
   MOBILE RESPONSIVE FIXES  (2026-06-02 audit) — appended last so it wins
   ========================================================================= */

/* 1. iOS Safari auto-zoom: a focused form control under 16px makes iOS zoom in
      and never zoom back out (the "it keeps zooming" report). Force >=16px on
      touch-width screens across every form (.bas-card, .flt-form, .mp-form, generic). */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px !important; }
}

/* 2. Sticky :hover on touch — lift/scale hovers stay applied after a tap on a
      touch screen (looks like the element "zoomed" and got stuck). Neutralise
      the hover transforms on devices that can't truly hover. */
@media (hover: none) {
  .model-card:hover, .listing-card:hover, .lineup-card:hover { transform: none; }
  .mp-gshot:hover img { transform: none; }
  .mp-gshot:hover .mp-gshot__zoom { opacity: 0; }
}

/* 3. Model-page hero: the wide desktop image scales to ~150px tall on a phone,
      so the overlay (eyebrow+title+sub+2 CTAs) overflowed UP into the header.
      Give the hero a real mobile height (cover-crop) and tighten the type. */
@media (max-width: 640px) {
  .mp-hero__img { height: 300px; object-fit: cover; object-position: center; }
  .mp-hero__overlay { padding-bottom: var(--space-5); }
  .mp-hero__eyebrow { font-size: .8125rem; }
  .mp-hero__title { font-size: 1.3rem; }
  .mp-hero__logo { height: clamp(2.25rem, 11vw, 3.5rem); }
  .mp-hero__sub { font-size: .85rem; }
}

/* 4. Model enquiry form padding crushed the fields on small phones. */
@media (max-width: 620px) {
  .mp-form { padding: 18px 18px; }
}

/* 5. Bare 2-col .form-grid (e.g. contact.html) -> single column on phones. */
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* 6. Decorative banners collapse to a thin near-invisible strip on phones;
      give them a usable minimum height so image + overlaid label stay visible. */
@media (max-width: 640px) {
  .contact-banner__img, .warr-banner__img { min-height: 150px; }
}

/* 7. Touch-target sizes (Apple HIG / WCAG ~44px). Keep the small visual dots but
      extend each pager dot's tap area with a centered transparent pseudo-element. */
@media (max-width: 860px) {
  .footer-socials a { width: 40px; height: 40px; }
  .crumb-bar .crumb-back { padding: 8px 6px; margin-left: -6px; }
  .hero__dot, .carousel__dot, .newscar__dot, .mp-slider__pager button { position: relative; }
  .hero__dot::after, .carousel__dot::after, .newscar__dot::after,
  .mp-slider__pager button::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 30px; height: 38px;
  }
  .mp-slider__arrow--prev { left: 8px; } .mp-slider__arrow--next { right: 8px; }
}

/* 8. Trim cards on phones: stack them one-per-row (the flex row otherwise squeezes
      2–3 cards side-by-side into unreadable slivers), and give each card's stacked
      CTAs (Book a Test Drive / Specifications) clearer vertical breathing room. */
@media (max-width: 620px) {
  .mp-trims { flex-direction: column; align-items: center; gap: var(--space-6); }
  .mp-trim__cta { gap: var(--space-4); }
}

/* ===================== Fixed quick-action dock ===================== */
/* Desktop: vertical rail hugging the right edge, vertically centered.
   Icons rest collapsed; labels slide out to the left on hover/focus. */
.action-dock {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.action-dock__item {
  display: flex;
  flex-direction: row-reverse;     /* DOM = icon,text -> render text(left) icon(right) */
  align-items: center;
  justify-content: flex-start;
  background: var(--c-ink);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: background var(--t-fast), color var(--t-fast);
}
.action-dock__item:hover,
.action-dock__item:focus-visible { background: var(--c-accent); color: #fff; }
.action-dock__item:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.action-dock__icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}
.action-dock__icon svg { width: 22px; height: 22px; display: block; }
.action-dock__text {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: max-width var(--t-med), opacity var(--t-med), padding var(--t-med);
}
.action-dock__item:hover .action-dock__text,
.action-dock__item:focus-visible .action-dock__text {
  max-width: 16rem;
  opacity: 1;
  padding: 0 4px 0 18px;
}
.action-dock__short { display: none; }
/* WhatsApp dock item keeps the brand green so it stays instantly recognisable
   among the dark action items (desktop rail + mobile bottom bar alike). */
.action-dock__item--wa { background: #25D366; }
.action-dock__item--wa:hover,
.action-dock__item--wa:focus-visible { background: #1ebe5d; color: #fff; }
/* The homepage hero side-rail is now superseded by the global dock (and would
   overlap it on the right edge), so retire it. */
.hero-rail { display: none; }

/* Mobile/tablet: convert the rail into a full-width bottom bar (app tab-bar). */
@media (max-width: 992px) {
  .action-dock {
    right: 0; left: 0; top: auto; bottom: 0;
    transform: none;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    background: var(--c-ink);
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  }
  .action-dock__item {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    min-height: 58px;
    border-radius: 0;
    box-shadow: none;
  }
  .action-dock__item + .action-dock__item { box-shadow: inset 1px 0 0 rgba(255,255,255,.08); }
  .action-dock__icon { width: auto; height: auto; }
  .action-dock__icon svg { width: 20px; height: 20px; }
  .action-dock__text {
    max-width: none; opacity: 1; overflow: visible; padding: 0;
    font-size: .56rem; letter-spacing: .02em; line-height: 1.1; text-align: center;
  }
  .action-dock__full { display: none; }
  .action-dock__short { display: inline; }
  /* Make room so page content & footer never hide behind the fixed bar */
  body { padding-bottom: 64px; }
  /* Lift the back-to-top button above the bottom bar */
  .back-top { bottom: 74px; }
}
@media (max-width: 360px) {
  .action-dock__text { display: none; }   /* icon-only on very small phones */
}

/* WhatsApp now lives inside .action-dock as .action-dock__item--wa
   (was a separate fixed .wa-float button — removed). */

/* ---------- Skip-to-content link (a11y) ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#fff;color:#000;padding:8px 16px;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* ---- Structured vehicle sections ---- */
.mp-feature--reverse { flex-direction: row-reverse; }
.mp-feature--banner { display: block; }
.mp-feature--banner .mp-feature__media img { width: 100%; height: auto; display: block; }
.mp-feature--text .mp-feature__media { display: none; }

.mp-specs { margin-bottom: 2rem; }
.mp-specs__title { margin: 0 0 .75rem; }
.mp-specs__table { width: 100%; border-collapse: collapse; }
.mp-specs__table th, .mp-specs__table td { text-align: start; padding: .6rem .75rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.mp-specs__label { width: 45%; font-weight: 600; }

.mp-colors { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.mp-color { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 120px; }
.mp-color__chip { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.mp-color__img { width: 100%; height: auto; border-radius: 8px; }
.mp-color__name { font-size: .9rem; }

/* Per-vehicle Specifications download CTA (field-driven; Vehicle.SpecPdf) */
.mp-spec-cta { padding: 1.25rem 0; text-align: center; }
.mp-spec-cta .btn { display: inline-block; }

/* CUSTOM CSS FOR GS7 */
#color-configure .mp-slider__pager button { width: 1.5rem; height:1.5rem; }
#color-configure .mp-slider__pager button.is-active { outline: 2px solid #000; outline-offset: 3px;  }

#color-configure .conf-ext .mp-slider__pager button:nth-child(1) { background-color:#485542; }
#color-configure .conf-ext .mp-slider__pager button:nth-child(2) { background-color:#8d8d8d; }
#color-configure .conf-ext .mp-slider__pager button:nth-child(3) { background-color:#ffffff; }
#color-configure .conf-ext .mp-slider__pager button:nth-child(4) { background-color:#000000; }

#color-configure .conf-int .mp-slider__pager button:nth-child(1) { background-color:#ffffff; }
#color-configure .conf-int .mp-slider__pager button:nth-child(2) { background-color:#000000; }
#color-configure .conf-int .mp-slider__pager button:nth-child(3) { background-color:#c97247; }

#color-configure .mp-slider__pager { padding-bottom:25px; }
#color-configure .mp-slide { position: relative; }
#color-configure .mp-slide .mp-slider__caption { top:0; left:50%; transform: translateX(-50%); }

@media (max-width: 560px) {
  #color-configure .mp-slide img {  aspect-ratio: 4/3; object-fit: cover; object-position: 50% 50%; width: 100%; max-width: none; }
  #color-configure .mp-slider__pager { padding-bottom:0; }
  #color-configure .mp-slide .mp-slider__caption { top:0; left:0; transform: translateX(0); }
  #color-configure .mp-slide .mp-slider__caption .mp-slider__title { font-size:1.0rem; color:#000; }
}
.form-message { font-size:16px; padding:15px 5px; }
.success {color:green;}
.danger {color:#cf102d;}