/* ============================================================
   MOTOR BROS — design tokens
   Typography & spacing modelled on romansinternational.com,
   accent colour drawn from the Motor Bros logo orange.
   ============================================================ */
/* Fonts are served from our own site (assets/fonts/site) so pages never wait on Google Fonts */
@font-face { font-family: 'Jost'; src: url('../assets/fonts/site/jost-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/site/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ink: #111111;
  --ink-soft: #4a4a4a;
  --muted: #7a7a7a;
  --paper: #ffffff;
  --paper-alt: #f6f6f6;
  --carbon: #0b0b0c;
  --accent: #ff8a00;

  --font-display: 'Jost', sans-serif;
  --font-body: 'Inter', sans-serif;

  --track-wide: 0.28em;
  --track-mid: 0.14em;
  --track-tight: 0.06em;

  /* Type scale — consistent steps instead of ad-hoc px values */
  --fs-micro: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: 17px;

  --nav-h: 96px;
  /* Height of the iPhone status bar / notch area (0 everywhere else) */
  --sat: env(safe-area-inset-top, 0px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Strip the browser's own button look (iPhones paint plain <button>s in
   system blue). Every button's colours then come from our own classes. */
button, input[type="submit"], input[type="button"] {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--ink-soft);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Reveal-on-scroll animations translate elements in from the sides;
   clip (not hidden — which would break position:sticky) stops those
   transient transforms from producing a horizontal scrollbar. */
html { overflow-x: clip; }
/* Optical alignment: headings shouldn't inherit body's loose leading */
h1, h2, h3, h4 { line-height: 1.2; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  line-height: 1;
  padding: 17px 36px;
  border: 1px solid currentColor;
  cursor: pointer;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.btn--light { color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--ghost { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--dark { color: var(--ink); }
/* Secondary: sits beside a primary button without competing with it */
.btn--muted { color: var(--ink-soft); border-color: #d6d6d6; }
.btn--muted:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============ Header / Nav (Romans layout) ============ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: calc(var(--nav-h) + var(--sat));
  display: flex;
  align-items: center;
  padding: 0 48px;
  background: transparent;
  transition: background .4s var(--ease-out), height .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
/* iPhone status bar (the strip around the notch).
   Safari 26 colours it from a solid fixed header, or failing that the
   <body> background. On the homepage the header is see-through over the
   dark hero, so Safari fell back to the white body and showed a white
   strip. While the header is see-through, make the body dark so the
   status bar blends into the hero; once the header turns solid on scroll
   the body goes back to normal. Every section sets its own background,
   so nothing else on the page changes colour. */
body:has(> .site-header:not(.is-solid)) { background-color: #0a0a0c; }

.site-header.is-solid {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  height: calc(76px + var(--sat));
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.nav {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links--left { justify-content: flex-end; }
.nav__links--right { justify-content: flex-start; }
.nav__link {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding: 6px 0;
  transition: color .3s;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  /* span the text itself, minus the trailing letter-space so it sits flush */
  width: calc(100% - var(--track-mid));
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link--active::after { transform: scaleX(1); }
.nav__caret { font-size: 9px; vertical-align: 2px; opacity: .7; }

/* About Us dropdown */
.nav__dropdown { position: relative; }
/* Invisible bridge so the pointer can travel from the trigger into the
   menu without passing over a dead gap (which used to close it). */
.nav__dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 26px;
}
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 216px;
  background: #fff;
  box-shadow: 0 26px 60px rgba(0,0,0,.16);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
  z-index: 50;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav__dropdown-menu li { display: block; }
.nav__dropdown-menu a {
  display: block;
  padding: 12px 26px;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color .25s, background .25s;
}
.nav__dropdown-menu a:hover { background: var(--paper-alt); color: var(--accent); }
.nav__phone { color: #fff; display: inline-flex; padding: 6px; transition: color .3s; }
.nav__phone:hover { color: var(--accent); }

.nav__links,
.nav__logo,
.nav__mobile-icons,
.nav__burger { grid-row: 1; }
.nav__logo { justify-self: center; display: block; }

/* Text wordmark — replaces the logo image for crisper rendering */
.wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #f4f4f4;
  white-space: nowrap;
  transition: color .35s var(--ease-out);
}
.wordmark b { font-weight: 500; color: var(--accent); }
.wordmark--light { color: #f4f4f4; }
.site-header.is-solid .nav__link,
.site-header.is-solid .nav__phone { color: var(--ink); }
.site-header.is-solid .nav__phone:hover { color: var(--accent); }
.site-header.is-solid .wordmark { color: var(--ink); }

.nav__mobile-icons {
  display: none;
  align-items: center;
  gap: 4px;
}
.nav__callus {
  color: #fff;
  padding: 6px;
  line-height: 0;
  transition: color .3s;
}
.nav__callus:active { color: var(--accent); }
.site-header.is-solid .nav__callus { color: var(--ink); }

.nav__burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 30px; height: 22px;
  position: relative;
  justify-self: end;
}
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: #fff; transition: all .3s var(--ease-out);
}
.site-header.is-solid .nav__burger span { background: var(--ink); }
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 10px; }
.nav__burger span:nth-child(3) { top: 20px; }
.nav__burger.is-open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--carbon);
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: calc(130px + var(--sat)) 34px calc(44px + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%);
  transition: transform .55s var(--ease-out);
  /* Nine links + the Call button are taller than many phone screens:
     let the menu itself scroll, without dragging the page behind it */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  height: 100vh;
  height: 100dvh;
  visibility: hidden;
}
.mobile-menu > * { flex-shrink: 0; }
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu:not(.is-open) { transition: transform .55s var(--ease-out), visibility 0s .55s; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 26px; }
.mobile-menu__links a {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(1) { transition-delay: .12s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(2) { transition-delay: .17s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(3) { transition-delay: .22s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(4) { transition-delay: .27s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(5) { transition-delay: .32s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(6) { transition-delay: .37s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(7) { transition-delay: .42s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(8) { transition-delay: .47s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(9) { transition-delay: .52s; }
.mobile-menu__links a:active { color: var(--accent); }
.mobile-menu__foot { display: flex; flex-direction: column; gap: 18px; padding-top: 34px; }
.mobile-menu__call { text-align: center; }
.mobile-menu__hours {
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  text-align: center;
}

/* ============ Hero ============ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--carbon) url('../assets/hero.jpg') center 55% / cover no-repeat;
}
.hero__media { position: absolute; inset: -12% 0 -12% 0; will-change: transform; }
.hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero__video { position: relative; z-index: 1; opacity: 0; transition: opacity 1.4s ease; }
/* The video used to appear with a hard cut the moment it finished
   downloading — often right as the intro lifted, which read as a flash.
   Now the showroom photo shows first and the video fades in over it
   once it is genuinely playing (see js/main.js). */
.hero__video.is-ready { opacity: 1; }
.hero__overlay { z-index: 2; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,.42) 0%, rgba(5,5,6,.22) 45%, rgba(5,5,6,.6) 100%);
}
.hero__content {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 0 24px;
  max-width: 860px;
}
.hero__mark { height: 68px; width: auto; margin: 0 auto 26px; filter: brightness(0) invert(1); opacity: .9; }
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 20px;
  text-indent: .42em;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(46px, 6.5vw, 94px);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.04;
  /* pull back the trailing letter-space so the word optically centres */
  text-indent: .1em;
}
.hero__sub {
  margin: 26px auto 42px;
  max-width: 580px;
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.85);
}
.hero__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

.hero__search {
  margin: 30px auto 0;
  max-width: 420px;
  display: flex;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(10,10,11,.35);
  backdrop-filter: blur(6px);
  transition: border-color .3s;
}
.hero__search:focus-within { border-color: #fff; }
.hero__search input {
  flex: 1;
  background: none; border: 0; outline: 0;
  padding: 15px 20px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.hero__search input::placeholder { color: rgba(255,255,255,.65); }
.hero__search button {
  background: none; border: 0; cursor: pointer;
  color: #fff; padding: 0 20px;
  display: flex; align-items: center;
  transition: color .3s;
}
.hero__search button:hover { color: var(--accent); }

.hero__scroll {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
}
.hero__scroll-line {
  display: block;
  width: 1px; height: 56px;
  background: rgba(255,255,255,.55);
  overflow: hidden;
  position: relative;
}
.hero__scroll-line::after {
  content: "";
  position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--accent);
  animation: scrollcue 2.2s var(--ease-out) infinite;
}
@keyframes scrollcue { 0% { top: -100%; } 55% { top: 0; } 100% { top: 100%; } }

/* load-in sequence */
.reveal-load { opacity: 0; transform: translateY(26px); animation: loadin 1s var(--ease-out) forwards; }
.reveal-load.delay-1 { animation-delay: .15s; }
.reveal-load.delay-2 { animation-delay: .3s; }
.reveal-load.delay-3 { animation-delay: .5s; }
.reveal-load.delay-4 { animation-delay: .7s; }
@keyframes loadin { to { opacity: 1; transform: none; } }

/* ============ Scroll-fade (continuous, scroll-position driven) ============
   Used where content should ease in gradually as the section is scrolled
   into view, rather than snapping in once a threshold is crossed. Opacity
   and transform are set directly from JS each frame as a function of the
   section's position in the viewport. */
.scroll-fade {
  opacity: 0;
  will-change: opacity, transform;
}
.scroll-fade[data-fade="up"] { transform: translateY(70px); }
.scroll-fade[data-fade="right"] { transform: translateY(70px); }

/* ============ Scroll reveal (IntersectionObserver) ============ */
.reveal { opacity: 0; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 130ms); }
.reveal[data-reveal="up"] { transform: translateY(48px); }
.reveal[data-reveal="right"] { transform: translateX(90px); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============ Welcome (TF Prestige layout) ============ */
.welcome { background: var(--paper-alt); overflow: hidden; }
.welcome__inner {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: center;
  max-width: 1720px;
  margin: 0 auto;
}
.welcome__text { padding: 120px 8% 120px max(8%, 48px); }
.welcome__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: 34px;
}
.welcome__text p { font-size: var(--fs-body); letter-spacing: 0; margin-bottom: 22px; line-height: 1.8; }
.welcome__btn { margin-top: 12px; }
.welcome__media { position: relative; height: 100%; min-height: 520px; }
.welcome__media > img:first-child {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.welcome__mark {
  position: absolute;
  right: 8%; bottom: 8%;
  height: 120px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .85;
}

/* ============ Tiles (Romans layout) ============ */
.tiles { padding: 110px 48px; background: var(--paper); }
.tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1560px;
  margin: 0 auto;
}
.tile {
  position: relative;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tile__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.tile:hover .tile__bg { transform: scale(1.06); }
.tile__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,9,.25) 0%, rgba(8,8,9,.45) 55%, rgba(8,8,9,.78) 100%);
  transition: background .5s;
}
.tile:hover .tile__shade {
  background: linear-gradient(180deg, rgba(8,8,9,.35) 0%, rgba(8,8,9,.55) 55%, rgba(8,8,9,.85) 100%);
}
.tile__label {
  position: relative;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  text-align: center;
  padding: 0 12px 58px;
  width: 100%;
  text-indent: var(--track-mid);
}
.tile__label::before,
.tile__label::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  height: 1px; width: 72%;
  background: rgba(255,255,255,.85);
}
.tile__label::before { top: -22px; }
.tile__label::after { bottom: 34px; transition: background .4s, box-shadow .4s; }
.tile:hover .tile__label::after { background: var(--accent); box-shadow: 0 0 12px rgba(255,138,0,.6); }

/* ============ Latest arrivals ============ */
.arrivals { padding: 30px 48px 130px; background: var(--paper); }
.section-head { text-align: center; margin-bottom: 64px; }
.section-head__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
}
.section-head__rule {
  display: block;
  width: 84px; height: 1px;
  background: #dcdcdc;
  margin: 24px auto 0;
  position: relative;
}
.section-head__rule::after {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 28px; height: 2px; margin-top: -0.5px;
  background: var(--accent);
}
.arrivals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.car-card {
  background: #fff;
  border: 1px solid #ececec;
  overflow: hidden;
  transition: box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}
.car-card:hover { box-shadow: 0 24px 60px rgba(0,0,0,.12); transform: translateY(-6px); }
.car-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--paper-alt); }
.car-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.car-card:hover .car-card__media img { transform: scale(1.05); }
.car-card__body { padding: 24px 26px 28px; }
.car-card__year {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: var(--track-mid);
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.car-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
  min-height: 2.6em;
}
.car-card__price {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 16px;
}
.car-card__meta { display: flex; gap: 28px; border-top: 1px solid #ececec; padding-top: 14px; }
.car-card__meta dt {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: var(--track-mid);
  text-transform: uppercase; color: var(--muted);
}
.car-card__meta dd { font-size: 13px; color: var(--ink-soft); }
.car-card__link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  transition: opacity .3s;
}
.car-card__link:hover { opacity: .7; }

/* ---- Stock page: same card as the homepage arrivals, built from a
   single <a> so the whole card is clickable. The homepage uses
   dl/dt/dd; this uses spans, so the meta rules are mirrored here. ---- */
.car-card--linked {
  display: block;
  color: inherit;
  text-decoration: none;
}
.car-card--linked .car-card__year,
.car-card--linked .car-card__title,
.car-card--linked .car-card__price,
.car-card--linked .car-card__link { display: block; }
.car-card--linked .car-card__meta {
  display: flex;
  gap: 28px;
  border-top: 1px solid #ececec;
  padding-top: 14px;
}
.car-card--linked .car-card__meta > span { display: block; }
.car-card--linked .car-card__meta-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--muted);
}
.car-card--linked .car-card__meta-value {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
}
.car-card--linked .car-card__link { margin-top: 14px; }


/* carousel shell — plain grid on desktop, snap-scroll row on mobile */
.arrivals__carousel { position: relative; max-width: 1560px; margin: 0 auto 56px; }
.arrivals__arrow {
  display: none;
  position: absolute; top: 38%; z-index: 5;
  width: 44px; height: 44px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.arrivals__arrow:hover { background: var(--ink); color: #fff; }
.arrivals__arrow--prev { left: -10px; }
.arrivals__arrow--next { right: -10px; }

.arrivals__cta { text-align: center; }

/* ============ Footer ============ */
.footer { background: var(--carbon); color: rgba(255,255,255,.65); padding: 80px 48px 0; }
.footer__top {
  max-width: 1560px;
  margin: 0 auto;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__heading {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 24px;
}
.footer__logo { font-size: 17px; margin-bottom: 18px; }
.footer__blurb { font-size: var(--fs-small); line-height: 1.8; max-width: 320px; margin-bottom: 26px; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.8);
  transition: border-color .3s, color .3s, background .3s;
}
.footer__social a:hover { border-color: var(--accent); color: var(--accent); }

.footer__links--col { display: flex; flex-direction: column; gap: 13px; text-align: left; margin-bottom: 0; }
.footer__links a {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
  transition: color .3s;
}
.footer__links a:hover { color: var(--accent); }

.footer__hours { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.footer__hours li {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  transition: color .3s;
}
.footer__hours li span:first-child { font-family: var(--font-display); letter-spacing: .04em; }
/* Interactive: today's row is picked out from the rest */
.footer__hours li.is-today {
  color: #fff;
  font-weight: 500;
}
.footer__hours li.is-today span:first-child { color: var(--accent); }
.footer__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer__status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.footer__status.is-open { color: #7fd88f; }
.footer__status.is-open::before { background: #7fd88f; box-shadow: 0 0 8px rgba(127,216,143,.7); }
.footer__status.is-closed { color: #e0857d; }
.footer__status.is-closed::before { background: #e0857d; }

.footer__address { font-size: var(--fs-small); font-style: normal; line-height: 1.85; margin-bottom: 20px; }
.footer__directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 12px 22px;
  margin-bottom: 20px;
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.footer__directions:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer__directions svg { flex-shrink: 0; }
.footer__line { font-size: var(--fs-small); margin-bottom: 8px; }
.footer__line a { color: rgba(255,255,255,.8); transition: color .3s; }
.footer__line a:hover { color: var(--accent); }

.footer__bottom { max-width: 1560px; margin: 0 auto; padding: 26px 0; text-align: center; }
.footer__meta { font-size: 12px; letter-spacing: .06em; }

@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .footer { padding: 60px 24px 0; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .footer__blurb { max-width: none; }
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav { grid-template-columns: 1fr auto 1fr; }
  .nav__logo { grid-column: 1; justify-self: start; }
  .nav__burger { display: block; grid-column: 3; }
  .tiles__grid { grid-template-columns: repeat(2, 1fr); }
  .arrivals__grid { grid-template-columns: repeat(2, 1fr); }
  .welcome__inner { grid-template-columns: 1fr; }
  .welcome__media { min-height: 420px; }
  .welcome__text { padding: 90px 48px 70px; }
}
/* ============================================================
   Mobile (Alexanders Prestige style)
   - header: Call us · centred logo · burger
   - full-width statement banners instead of tile grid
   - Latest Vehicles as a swipeable snap carousel
   ============================================================ */
@media (max-width: 768px) {
  .site-header { padding: 0 22px; height: calc(78px + var(--sat)); }
  .site-header.is-solid { height: calc(66px + var(--sat)); }
  .nav {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .nav__mobile-icons { display: inline-flex; grid-column: 1; justify-self: start; }
  /* Centre the wordmark on the header itself. A grid-based centre can't
     work here because the left (two icons) and right (burger) columns are
     different widths, and an absolutely-positioned grid child is bounded
     by its grid area rather than the full bar — both push it off-centre.
     left/right:0 with auto margins sidesteps percentages entirely.
     The letter-spacing adds a trailing gap after the final letter, so a
     matching text-indent pulls it back to optical centre. */
  .nav__logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    margin-inline: auto;
    grid-column: unset;
    justify-self: unset;
    text-indent: .3em;
  }
  .nav__burger { grid-column: 2; justify-self: end; }
  /* Sized so it never runs into the icons on the left or the burger on
     the right — measured overlap at 360-390px before this. */
  .wordmark { font-size: 17px; letter-spacing: .2em; }
  .nav__burger { justify-self: end; }
  .hero {
    background-image: url('../assets/hero-mobile.jpg');
    background-position: center 50%;
  }
  .hero__video { object-position: center 50%; }
  .hero__photo img { object-position: center 50%; }
  .nav__burger { grid-column: 3; }

  .hero { min-height: 100svh; }
  .hero__mark { height: 54px; }
  .hero__title { letter-spacing: .12em; }
  .hero__sub { font-size: 14px; padding: 0 6px; }
  .hero__actions { flex-direction: column; align-items: stretch; padding: 0 12px; }
  .hero__actions .btn { text-align: center; }
  .hero__search { margin-top: 22px; width: calc(100% - 24px); }

  .welcome__text { padding: 70px 26px 56px; }
  .welcome__media { min-height: 380px; }
  .welcome__mark { height: 84px; }

  /* Tiles → full-width, full-bleed statement banners */
  .tiles { padding: 0; }
  .tiles__grid { grid-template-columns: 1fr; gap: 0; max-width: none; }
  .tile { aspect-ratio: auto; min-height: 68svh; align-items: center; }
  .tile__label {
    padding: 0 28px;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: .22em;
    line-height: 1.5;
  }
  .tile__label::before { top: -30px; width: 56px; }
  .tile__label::after { bottom: -30px; width: 56px; background: var(--accent); box-shadow: none; }

  /* Latest Vehicles → swipeable snap carousel */
  .arrivals { padding: 80px 0 90px; }
  .section-head { margin-bottom: 44px; padding: 0 22px; }
  .arrivals__carousel { margin-bottom: 40px; }
  .arrivals__grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 22px 18px;
    scrollbar-width: none;
  }
  .arrivals__grid::-webkit-scrollbar { display: none; }
  .car-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .arrivals__arrow { display: none !important; }
  .arrivals__cta { padding: 0 22px; }
  .arrivals__cta .btn { display: block; text-align: center; }

  .footer { padding: 70px 26px 46px; }
}

@media (min-width: 769px) {
  .arrivals__arrow { display: block; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-load, .scroll-fade { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero__scroll-line::after { animation: none; }
  .hero__video { display: none; }
  .hero__media { transform: none !important; }
}

/* ============================================================
   STOCK PAGE
   ============================================================ */
.stock-hero {
  background: var(--carbon);
  padding: calc(var(--nav-h) + var(--sat) + 88px) 48px 88px;
  text-align: center;
}
.contact-hero {
  position: relative;
  background: var(--carbon) url('../assets/banner-showroom.jpg') center 55% / cover no-repeat;
}
.contact-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.72) 60%, rgba(6,6,7,.9) 100%);
}
.contact-hero .stock-hero__inner { position: relative; z-index: 1; }
.stock-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.stock-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}
.stock-hero__sub { color: rgba(255,255,255,.8); margin-top: 20px; font-size: var(--fs-lead); max-width: 620px; margin-left: auto; margin-right: auto; }

.stock-controls {
  position: sticky;
  top: 76px; /* desktop solid header height */
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid #ececec;
  padding: 22px 48px 14px;
}
.stock-controls__inner {
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.stock-controls__group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border: 1px solid transparent;
  padding: 9px 18px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: #fff; }
.stock-controls__sort { display: flex; align-items: center; gap: 10px; }
.stock-controls__sort label {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.stock-controls__sort select {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink);
  background: #fff;
  border: 1px solid #ddd;
  padding: 9px 14px;
  cursor: pointer;
}
.stock-controls__count {
  max-width: 1560px;
  margin: 14px auto 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}

.stock-grid-section { padding: 50px 48px 120px; background: var(--paper); }
.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 26px;
  max-width: 1560px;
  margin: 0 auto;
  align-items: start;
}
.stock-grid__empty {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  padding: 60px 0;
}

/* Square interactive tile */
.stock-tile {
  display: block;            /* it's an <a>; inline would void aspect-ratio */
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--carbon);
  cursor: pointer;
  outline: none;
  color: inherit;
  text-decoration: none;
}
.stock-tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.stock-tile:hover .stock-tile__img,
.stock-tile.is-open .stock-tile__img { transform: scale(1.08); }
.stock-tile__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.15) 0%, rgba(6,6,7,.35) 55%, rgba(6,6,7,.92) 100%);
  transition: background .4s;
}
.stock-tile:hover .stock-tile__shade,
.stock-tile.is-open .stock-tile__shade {
  background: linear-gradient(180deg, rgba(6,6,7,.25) 0%, rgba(6,6,7,.5) 45%, rgba(6,6,7,.95) 100%);
}
.stock-tile__top {
  position: absolute; top: 18px; left: 18px; z-index: 2;
}
.stock-tile__year {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.35);
  padding: 5px 10px;
  backdrop-filter: blur(3px);
}
.stock-tile__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stock-tile__title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}
.stock-tile__price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin: 3px 0 2px;
}
.stock-tile__price::after {
  content: "";
  display: block;
  width: 30px; height: 2px;
  background: var(--accent);
  margin-top: 8px;
}
/* Extra detail — hidden until hover/open, slides up */
.stock-tile__specs {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height .45s var(--ease-out), opacity .35s var(--ease-out), transform .45s var(--ease-out), margin .45s var(--ease-out);
  overflow: hidden;
}
.stock-tile:hover .stock-tile__specs,
.stock-tile.is-open .stock-tile__specs {
  max-height: 30px;
  opacity: 1;
  transform: none;
  margin-top: 4px;
}
.stock-tile__enquire {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease-out) .05s, opacity .35s var(--ease-out) .05s, margin .45s var(--ease-out);
}
.stock-tile:hover .stock-tile__enquire,
.stock-tile.is-open .stock-tile__enquire {
  max-height: 20px;
  opacity: 1;
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .stock-hero { padding: calc(66px + var(--sat) + 56px) 30px 56px; }
}
@media (max-width: 768px) {
  .stock-hero { padding: calc(66px + var(--sat) + 26px) 22px 24px; }
  .stock-hero__title { font-size: 30px; }
  .stock-hero__sub { font-size: 14px; margin-top: 12px; }
  .stock-hero__eyebrow { margin-bottom: 12px; }

  /* With a full forecourt there are a lot of make chips. Wrapping them
     pushed the cars right off the screen, so on phones they become one
     horizontally-scrollable row and the sort sits beside the count. */
  .stock-controls { padding: 10px 0 8px; top: 66px; }
  .stock-controls__inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .stock-controls__group {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 7px;
    padding: 0 20px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Flex items default to min-width:auto, which lets the row's full
       scroll width push the whole page sideways. This contains it. */
    min-width: 0;
    max-width: 100%;
  }
  .stock-controls__group::-webkit-scrollbar { display: none; }
  .stock-controls__group .chip { flex: 0 0 auto; padding: 8px 14px; font-size: 11px; }
  .stock-controls__sort {
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px;
  }
  .stock-controls__sort label { font-size: 10.5px; }
  .stock-controls__sort select { font-size: 12px; padding: 6px 8px; }
  .stock-controls__count { padding: 0 20px; margin: 0; font-size: 11.5px; }
  .stock-grid-section { padding: 30px 20px 90px; }
  .stock-grid { grid-template-columns: 1fr; gap: 18px; }
  /* Stock cards now use the shared .car-card styling */
  .stock-grid .car-card__body { padding: 18px 18px 20px; }
  .stock-grid .car-card__title { font-size: 14px; min-height: 0; }
  .stock-grid .car-card__price { font-size: 19px; }
}

/* ============================================================
   VEHICLE DETAIL PAGE
   ============================================================ */
.vehicle-loading, .vehicle-notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-h) + var(--sat));
  text-align: center;
}
.vehicle-loading p {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.vehicle-notfound__inner { max-width: 420px; }
.vehicle-notfound__eyebrow {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.vehicle-notfound h1 {
  font-family: var(--font-display);
  font-weight: 300; font-size: 30px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 14px;
}
.vehicle-notfound p { margin-bottom: 26px; font-size: 14px; }

/* --- hero band --- */
/* --- vehicle detail: gallery left, title/price/enquiry right --- */
.vehicle-top { background: var(--paper); padding: calc(var(--nav-h) + var(--sat) + 40px) 48px 0; }
.vehicle-top__inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
}

.vehicle-top__gallery { min-width: 0; }
.vehicle-hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--carbon);
  box-shadow: 0 26px 60px rgba(0,0,0,.16);
  cursor: zoom-in;
}
.vehicle-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}
.vehicle-hero__img.is-active { opacity: 1; z-index: 1; }

/* Floating price chip on the image corner — a small "quirky modern"
   accent so the price reads instantly even before scanning the panel. */
.gallery-price-tag {
  position: absolute;
  left: 20px; top: 20px;
  z-index: 3;
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  padding: 10px 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.vehicle-top__info {
  padding-top: 6px;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,11,.42);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .3s, border-color .3s;
}
.gallery-arrow:hover { background: rgba(10,10,11,.7); border-color: var(--accent); }
.gallery-arrow--prev { left: 20px; }
.gallery-arrow--next { right: 20px; }
.gallery-counter {
  position: absolute;
  right: 20px; bottom: 20px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: #fff;
  background: rgba(10,10,11,.5);
  padding: 6px 12px;
  backdrop-filter: blur(3px);
}
.gallery-expand {
  position: absolute;
  left: 20px; bottom: 20px;
  z-index: 3;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,10,11,.5);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .3s, border-color .3s;
}
.gallery-expand:hover { background: rgba(10,10,11,.75); border-color: var(--accent); }
.vehicle-hero__media { cursor: zoom-in; }

/* ============================================================
   LIGHTBOX — full-quality photo viewer
   Image renders at object-fit: contain (true aspect ratio, never
   cropped), sized to the viewport rather than a fixed box.
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6,6,7,.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .28s var(--ease-out);
}
.lightbox.is-open { opacity: 1; }
.lightbox__stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 70px 90px;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  transform: scale(.97);
  transition: transform .32s var(--ease-out);
}
.lightbox.is-open .lightbox__stage img { transform: scale(1); }
.lightbox__close {
  position: absolute;
  top: calc(22px + var(--sat)); right: 26px;
  z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, border-color .3s;
}
.lightbox__close:hover { background: rgba(255,255,255,.08); border-color: var(--accent); }
.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .3s, border-color .3s;
}
.lightbox__arrow:hover { background: rgba(255,255,255,.08); border-color: var(--accent); }
.lightbox__arrow--prev { left: 24px; }
.lightbox__arrow--next { right: 24px; }
.lightbox__counter {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.75);
}
body.lightbox-locked { overflow: hidden; }

@media (max-width: 768px) {
  .gallery-expand span { display: none; }
  .gallery-expand { padding: 10px; }
  .lightbox__stage { padding: 90px 20px; }
  .lightbox__arrow { width: 42px; height: 42px; }
  .lightbox__arrow--prev { left: 10px; }
  .lightbox__arrow--next { right: 10px; }
  .lightbox__close { top: calc(14px + var(--sat)); right: 14px; }
}

/* ---- Thumbnail strip beneath the framed gallery ---- */
.gallery-strip {
  padding: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.strip-jump {
  flex: 0 0 auto;
  width: 34px;
  height: 68px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-alt);
  border: 1px solid #e2e2e2;
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: -2px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.strip-jump:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.strip-jump:disabled { opacity: .35; cursor: default; }
.strip-jump:disabled:hover { background: var(--paper-alt); border-color: #e2e2e2; color: var(--ink-soft); }
.gallery-strip__inner {
  margin: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gallery-strip__inner::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 auto;
  width: 96px; height: 68px;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: .55;
  transition: opacity .3s, border-color .3s;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--accent); }

.vehicle-description p { margin-bottom: 18px; }
.vehicle-description p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .gallery-thumb { width: 76px; height: 54px; }
  .gallery-arrow { width: 38px; height: 38px; font-size: 12px; }
  .gallery-arrow--prev { left: 12px; }
  .gallery-arrow--next { right: 12px; }
}
.vehicle-hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* subtle corner vignette just so the controls stay legible over any photo */
  background:
    linear-gradient(180deg, rgba(6,6,7,.18) 0%, rgba(6,6,7,0) 22%, rgba(6,6,7,0) 78%, rgba(6,6,7,.28) 100%);
}
.vehicle-breadcrumb {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.vehicle-breadcrumb a { color: var(--ink-soft); transition: color .3s; }
.vehicle-breadcrumb a:hover { color: var(--accent); }
.vehicle-breadcrumb span { margin: 0 8px; }
.vehicle-hero__year {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.vehicle-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}
.vehicle-hero__price {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--ink);
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
}

.enquiry-card--inline {
  margin-top: 30px;
  padding: 26px 26px 24px;
  background: var(--paper-alt);
  border-top: 3px solid var(--accent);
}

@media (max-width: 1100px) {
  .vehicle-top__inner { grid-template-columns: 1fr; gap: 30px; }
  .vehicle-hero__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 768px) {
  .vehicle-top { padding: calc(var(--nav-h) + var(--sat) + 24px) 22px 0; }
  .vehicle-hero__media { aspect-ratio: 4 / 3; }
  .gallery-price-tag { font-size: 15px; padding: 8px 14px; left: 14px; top: 14px; }
  .enquiry-card--inline { padding: 22px 20px 20px; }
}

/* --- body: overview / specification --- */
.vehicle-body { padding: 60px 48px 40px; background: var(--paper); }
.vehicle-body__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.vehicle-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 1px solid #ececec;
  margin-bottom: 26px;
}
.vehicle-section-title:not(:first-child) { margin-top: 46px; }
.vehicle-description { font-size: var(--fs-body); line-height: 1.85; }
.vehicle-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 30px;
}
.vehicle-specs__row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 12px;
}
.vehicle-specs__row dt {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.vehicle-specs__row dd { font-size: var(--fs-small); color: var(--ink); font-weight: 500; }

.enquiry-card__note { font-size: 13px; color: var(--ink-soft); margin-bottom: 22px; }
.enquiry-card__btn { display: block; text-align: center; width: 100%; margin-bottom: 12px; }
.enquiry-card__btn--outline { color: var(--ink); }
.enquiry-card__btn--outline:hover { background: var(--ink); color: #fff; }
.enquiry-card__email {
  display: block;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-top: 18px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- similar vehicles --- */
.similar { padding: 40px 48px 130px; background: var(--paper); }
.similar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1560px;
  margin: 0 auto;
}
.similar-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
}
.similar-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.similar-tile:hover .similar-tile__img { transform: scale(1.07); }
.similar-tile__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.1) 0%, rgba(6,6,7,.75) 100%);
}
.similar-tile__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 20px 20px;
  color: #fff;
}
.similar-tile__title {
  display: block;
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.similar-tile__price { font-family: var(--font-display); font-size: 16px; font-weight: 500; }

@media (max-width: 1100px) {
  .similar__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .vehicle-body { padding: 40px 22px 10px; }
  .vehicle-specs { grid-template-columns: 1fr; }
  .similar { padding: 20px 22px 90px; }
  .similar__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-main { padding: 90px 48px; background: var(--paper); }
.contact-main__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form__field { margin-bottom: 20px; }
.contact-form__field--full { margin-bottom: 8px; }
.contact-form__field label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  border: 1px solid #ddd;
  background: var(--paper-alt);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  transition: border-color .3s, background .3s;
  resize: vertical;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
}
.contact-form__submit { margin-top: 8px; }
.contact-form__status {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-soft);
  min-height: 1.2em;
}
.contact-form__status.is-success { color: var(--accent); font-weight: 500; }

.contact-info__block { margin-bottom: 46px; }
.contact-info__block:last-child { margin-bottom: 0; }
.contact-info__block h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 1px solid #ececec;
  margin-bottom: 20px;
}
.contact-info__block p { font-size: var(--fs-small); line-height: 1.85; margin-bottom: 8px; }
.contact-info__line a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.contact-info__line a:hover { color: var(--accent); }

.hours-list { display: flex; flex-direction: column; gap: 10px; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.hours-list li span:first-child {
  font-family: var(--font-display);
  letter-spacing: .04em;
  color: var(--ink);
}
.hours-list li span:last-child { color: var(--ink-soft); }
.appointment-note {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent);
  text-transform: uppercase;
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

.find-us { padding: 20px 48px 120px; background: var(--paper); }
.find-us__map {
  max-width: 1400px;
  margin: 0 auto;
  aspect-ratio: 16 / 6;
  min-height: 320px;
  filter: grayscale(.25) contrast(1.05);
}
.find-us__map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 1100px) {
  .contact-main__inner { grid-template-columns: 1fr; gap: 60px; }
}
@media (max-width: 768px) {
  .contact-main { padding: 50px 22px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .find-us { padding: 10px 22px 80px; }
  .find-us__map { aspect-ratio: 4 / 5; min-height: 380px; }
}

/* ============================================================
   SELL YOUR CAR PAGE
   ============================================================ */
.sell-hero {
  position: relative;
  background: var(--carbon) url('../assets/banner-sell.jpg') center 45% / cover no-repeat;
}
.sell-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.72) 60%, rgba(6,6,7,.9) 100%);
}
.sell-hero .stock-hero__inner { position: relative; z-index: 1; }

.sell-intro { padding: 90px 48px; background: var(--paper); }
.sell-intro__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 80px;
  align-items: start;
}
.sell-intro__text p { font-size: var(--fs-body); line-height: 1.85; margin-bottom: 20px; }
.sell-intro__points { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.sell-intro__points li {
  position: relative;
  padding-left: 28px;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--ink);
}
.sell-intro__points li::before {
  content: "";
  position: absolute; left: 0; top: 5px;
  width: 14px; height: 14px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.sell-intro__points li::after {
  content: "";
  position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.valuation-card {
  background: var(--paper-alt);
  padding: 40px 36px;
  border-top: 3px solid var(--accent);
}
.valuation-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.valuation-card__note { font-size: 12.5px; color: var(--muted); margin-bottom: 26px; line-height: 1.7; }

/* ---- selling methods ---- */
.methods { padding: 20px 48px 110px; background: var(--paper); }
.methods__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1560px;
  margin: 0 auto;
}
.method-card {
  background: var(--paper-alt);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  border-bottom: 3px solid transparent;
  transition: border-color .35s, transform .35s var(--ease-out);
}
.method-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.method-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
.method-card__overview { font-size: var(--fs-small); line-height: 1.8; color: var(--ink-soft); margin-bottom: 22px; flex-grow: 1; }
.method-card__benefits { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.method-card__benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink);
}
.method-card__benefits li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.method-card__cta { text-align: center; }

/* ---- testimonials ---- */
.testimonials { padding: 20px 48px 100px; background: var(--paper); }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1560px;
  margin: 0 auto;
}
.testimonial {
  position: relative;
  background: #fff;
  border: 1px solid #ececec;
  padding: 44px 34px 34px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out), border-color .4s;
}
.testimonial:hover {
  box-shadow: 0 22px 55px rgba(0,0,0,.09);
  transform: translateY(-4px);
  border-color: transparent;
}
/* Oversized opening quote as a watermark, not a border stripe */
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 14px; left: 30px;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  opacity: .22;
}
.testimonial__stars {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: .22em;
  margin-bottom: 16px;
}
.testimonial p {
  position: relative;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 24px;
  flex-grow: 1;
}
.testimonial cite {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
  padding-top: 18px;
  border-top: 1px solid #efefef;
}
.testimonials__note {
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  margin: 30px auto 0;
  max-width: 1560px;
}

@media (max-width: 1100px) {
  .sell-intro__inner { grid-template-columns: 1fr; gap: 50px; }
  .methods__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sell-intro { padding: 50px 22px; }
  .methods { padding: 10px 22px 80px; }
  .methods__grid { grid-template-columns: 1fr; }
  .testimonials { padding: 10px 22px 70px; }
  .valuation-card { padding: 30px 22px; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.services-hero {
  position: relative;
  background: var(--carbon) url('../assets/banner-services.jpg') center 40% / cover no-repeat;
}
.services-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.6) 0%, rgba(6,6,7,.75) 60%, rgba(6,6,7,.92) 100%);
}
.services-hero .stock-hero__inner { position: relative; z-index: 1; }

.services { padding: 60px 48px 120px; background: var(--paper); }
.services__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto 50px;
}
.services__tab {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border: 1px solid transparent;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.services__tab:hover { border-color: var(--ink); }
.services__tab.is-active { background: var(--ink); color: #fff; }

.services__panels { max-width: 1400px; margin: 0 auto; }
.services__panel { display: none; }
.services__panel.is-active { display: block; animation: fadein-panel .55s var(--ease-out); }
@keyframes fadein-panel { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.services__panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
}
.services__panel-copy .vehicle-section-title { border: none; padding-bottom: 0; margin-bottom: 20px; }
.services__panel-copy p {
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.services__features { display: flex; flex-direction: column; gap: 13px; margin-bottom: 34px; }
.services__features li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-small);
  color: var(--ink);
}
.services__features li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 15px; height: 15px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.services__features li::after {
  content: "";
  position: absolute; left: 4.5px; top: 11px;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.services__panel-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-alt);
}
.services__panel-media img { width: 100%; height: 100%; object-fit: cover; }
.services__panel-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.05) 0%, rgba(6,6,7,.3) 100%);
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-page { padding: 90px 48px 120px; background: var(--paper); }
.about-page__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}
.about-page__text p { font-size: var(--fs-body); line-height: 1.85; margin-bottom: 20px; }
.about-page__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.stat-card {
  background: var(--paper-alt);
  border-top: 3px solid var(--accent);
  padding: 30px 22px;
  text-align: center;
}
.stat-card__number {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.stat-card__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   TESTIMONIALS PAGE
   ============================================================ */
.reviews-summary { padding: 70px 48px 20px; background: var(--paper); }
.reviews-summary__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.rating-badge { margin-bottom: 30px; }
.rating-badge__score {
  display: block;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  color: var(--ink);
}
.rating-badge__stars {
  display: block;
  color: var(--accent);
  font-size: 20px;
  letter-spacing: .1em;
  margin: 8px 0;
}
.rating-badge__source {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.reviews-summary__links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.testimonials__grid--two { grid-template-columns: repeat(2, 1fr); max-width: 1100px; }
.testimonials__note { max-width: 1100px; }

/* ============================================================
   WHY US PAGE
   ============================================================ */
.why-us__grid { grid-template-columns: repeat(4, 1fr); }
.why-us__cta { text-align: center; margin-top: 50px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .about-page__inner { grid-template-columns: 1fr; gap: 50px; }
  .testimonials__grid--two { grid-template-columns: 1fr; }
  .why-us__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .services__panel-inner { grid-template-columns: 1fr; gap: 36px; }
  .services__panel-media { order: -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  .services { padding: 40px 22px 90px; }
  .services__tab { padding: 12px 18px; font-size: 11px; }
  .about-page { padding: 50px 22px 90px; }
  .about-page__stats { grid-template-columns: repeat(2, 1fr); }
  .reviews-summary { padding: 50px 22px 10px; }
  .why-us__grid { grid-template-columns: 1fr; }
}


/* ---- Why Us numbered cards ---- */
.method-card--numbered { position: relative; padding-top: 40px; }
.method-card__num {
  position: absolute;
  top: 22px; right: 24px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  opacity: .28;
  transition: opacity .35s var(--ease-out);
}
.method-card--numbered:hover .method-card__num { opacity: .6; }
.method-card--numbered .method-card__title { padding-right: 52px; }

/* ============================================================
   AUTO TRADER AWARDS STRIP
   ============================================================ */
.awards { background: var(--paper-alt); padding: 70px 48px; }
.awards__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.awards__eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 34px;
  text-indent: .42em;
}
.awards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px));
  gap: 22px;
  justify-content: center;
}
.award-badge {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-top: 3px solid var(--accent);
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.award-badge:hover { box-shadow: 0 18px 44px rgba(0,0,0,.09); transform: translateY(-3px); }
.award-badge__star { color: var(--accent); font-size: 19px; line-height: 1; margin-bottom: 4px; }
.award-badge__label {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  text-indent: var(--track-mid);
}
.award-badge__year {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}
.award-badge__source {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-indent: .16em;
}
.award-badge__score {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
}
.award-badge__stars { color: var(--accent); font-size: 13px; letter-spacing: .16em; margin-bottom: 3px; }
.awards__note {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 620px;
  margin: 30px auto 0;
}

/* ---- Browse-all filler tile in the arrivals grid ---- */
.car-card--more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--carbon);
  border-color: var(--carbon);
  text-align: center;
  min-height: 100%;
}
.car-card--more:hover { background: #17171a; }
.car-card__more-inner { display: flex; flex-direction: column; gap: 8px; padding: 44px 26px; }
.car-card__more-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  text-indent: .32em;
}
.car-card__more-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #fff;
  text-indent: var(--track-mid);
}
.car-card__more-cta {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-top: 10px;
  transition: color .3s;
}
.car-card--more:hover .car-card__more-cta { color: var(--accent); }

@media (max-width: 768px) {
  .awards { padding: 50px 22px; }
  .awards__grid { grid-template-columns: 1fr; gap: 14px; max-width: 320px; margin: 0 auto; }
}

/* Appointment-only note beneath the footer opening hours */
.footer__appointment {
  margin-top: 12px;
  padding-left: 11px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
}

/* Registration plate input — styled like a UK number plate */
.input--reg {
  font-family: var(--font-display);
  font-size: 20px !important;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  background: #f5d000 !important;
  border-color: #d9b800 !important;
  color: #111 !important;
  padding: 14px 16px !important;
}
.input--reg::placeholder { color: rgba(0,0,0,.4); font-weight: 400; letter-spacing: .08em; }
.input--reg:focus { border-color: #111 !important; background: #f8d800 !important; }


/* ---- Attention grabber: short standout line under the vehicle title ---- */
.vehicle-grabber {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
}
@media (max-width: 768px) {
  .vehicle-grabber { font-size: 11.5px; padding: 6px 12px; }
}

/* ---- Lightbox first/last (no thumbnail row in there) ---- */

.lightbox__arrow--first { left: 24px; }
.lightbox__arrow--prev  { left: 90px; }
.lightbox__arrow--next  { right: 90px; }
.lightbox__arrow--last  { right: 24px; }
.lightbox__arrow--first, .lightbox__arrow--last { font-size: 13px; letter-spacing: -3px; }

@media (max-width: 768px) {
  .strip-jump { width: 28px; height: 54px; }
  .gallery-arrow--prev { left: 12px; }
  .gallery-arrow--next { right: 12px; }
  .lightbox__arrow--first { left: 8px; }
  .lightbox__arrow--prev  { left: 58px; }
  .lightbox__arrow--next  { right: 58px; }
  .lightbox__arrow--last  { right: 8px; }
}

/* ---- Structured advert copy (bullets, headings) ---- */
.vehicle-description__head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  margin: 26px 0 12px;
}
.vehicle-description__head:first-child { margin-top: 0; }
.vehicle-description__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 26px;
}
.vehicle-description__list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink);
}
.vehicle-description__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 700px) {
  .vehicle-description__list { grid-template-columns: 1fr; gap: 7px; }
}

/* ============================================================
   MOBILE REFINEMENTS
   ------------------------------------------------------------
   Measured problems on a 390px screen before this block:
     - footer links were 38x15px — far below a comfortable tap
     - the burger was 30x22px
     - a lot of copy sat at 10-11px, too small to read on a phone
   Apple's guidance is ~44px minimum for touch targets; these
   rules bring the mobile layout up to that without touching the
   desktop design.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Touch targets ---- */
  .footer__links--col { gap: 2px; }
  .footer__links a {
    display: block;
    padding: 11px 0;
    font-size: 14px;
    min-height: 44px;
    line-height: 22px;
  }
  .footer__line a { display: inline-block; padding: 6px 0; font-size: 14px; }
  .footer__social a { width: 44px; height: 44px; }
  .footer__directions { padding: 14px 22px; font-size: 12px; }

  /* Burger: keep the 44px tap area, but draw a properly sized icon inside
     it. Previously the bars were positioned absolutely against the old
     30x22 button, so at 44px they spanned the full width and sat high. */
  .nav__burger {
    width: 44px; height: 44px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    padding: 0;
  }
  .nav__burger span {
    position: static;
    width: 22px;
    height: 1.5px;
    left: auto; top: auto;
  }
  .nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); top: auto; }
  .nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); top: auto; }
  .nav__callus { padding: 11px; }

  .mobile-menu__links a { padding: 6px 0; min-height: 44px; display: flex; align-items: center; }

  /* ---- Legibility: nothing below 12px on a phone ---- */
  .footer__hours li { font-size: 13.5px; }
  .footer__appointment { font-size: 12.5px; }
  .footer__status { font-size: 12.5px; }
  .footer__blurb { font-size: 14.5px; }
  .footer__address { font-size: 14.5px; }
  .footer__heading { font-size: 13px; }
  .mobile-menu__hours { font-size: 12.5px; }
  .awards__eyebrow { font-size: 12px; }
  .awards__note { font-size: 12.5px; line-height: 1.75; }
  .award-badge__source { font-size: 11.5px; }
  .car-card__year { font-size: 12px; }
  .car-card__meta-label,
  .car-card__meta dt { font-size: 11.5px; }
  .car-card__meta-value,
  .car-card__meta dd { font-size: 13.5px; }
  .car-card__link { font-size: 12.5px; padding: 6px 0; display: inline-block; }
  .vehicle-specs__row dt { font-size: 11.5px; }
  .vehicle-breadcrumb { font-size: 12px; }
  .vehicle-breadcrumb a { padding: 4px 0; display: inline-block; }

  /* ---- Buttons: full-width and thumb-friendly ---- */
  .btn { padding: 16px 26px; font-size: 13px; }
  .enquiry-card__btn { padding: 17px 20px; }
  .hero__actions .btn,
  .why-us__cta .btn,
  .reviews-summary__links .btn { width: 100%; text-align: center; }
  .hero__actions, .why-us__cta, .reviews-summary__links { flex-direction: column; gap: 10px; width: 100%; }


  /* ---- Remaining touch targets found by measurement ---- */
  .chip { padding: 12px 16px; font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .services__tab { padding: 14px 18px; min-height: 46px; font-size: 12px; }
  .gallery-expand { padding: 13px; min-height: 44px; min-width: 44px; }
  .gallery-arrow { width: 44px; height: 44px; }
  .strip-jump { min-height: 44px; }
  .footer__links a { padding: 13px 0; min-height: 46px; }
  .footer__line a { padding: 11px 0; min-height: 44px; }
  .car-card__link { padding: 11px 0; min-height: 44px; display: flex; align-items: center; }
  .contact-info__line a { display: inline-block; padding: 10px 0; min-height: 44px; }

  /* ---- Remaining small text ---- */
  .hero__eyebrow,
  .stock-hero__eyebrow,
  .awards__eyebrow { font-size: 12px; }
  .stat-card__label { font-size: 12px; }
  .testimonials__note { font-size: 12.5px; }
  .stock-controls__count { font-size: 12.5px; }
  .vehicle-hero__year { font-size: 12.5px; }
  .gallery-counter { font-size: 12.5px; }

  /* ---- Final measured touch targets ---- */
  .car-card__title a { display: block; padding: 6px 0; min-height: 44px; }
  .stock-controls__sort select { min-height: 44px; padding: 10px 12px; }
  .enquiry-card__email { padding: 12px 0; min-height: 44px; }


  /* These two need matching specificity to beat the desktop rules */
  .car-card--linked .car-card__meta-label { font-size: 11.5px; }
  .car-card--linked .car-card__meta-value { font-size: 13.5px; }
  .vehicle-breadcrumb a { padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .vehicle-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }

  /* ---- Scroll animations ----
     Measured on a 390px screen: elements fully in view were still sitting
     at 0-46% opacity, so content you're actually looking at appeared
     half-faded. There isn't enough vertical room on a phone for a
     scroll-linked fade to resolve before you've scrolled past it.
     Reveals now trigger as soon as an element enters the viewport and
     finish quickly; the scroll-linked fades are dropped entirely.
     .reveal-load (the timed hero text load-in) is NOT included: it isn't
     scroll-linked, so it plays on phones the same as on desktop. */
  .scroll-fade,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}





/* ---- Stock page search ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stock-controls__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--paper-alt);
  border: 1px solid transparent;
  padding: 0 14px;
  min-width: 260px;
  transition: border-color .3s, background .3s;
}
.stock-controls__search:focus-within { border-color: var(--ink); background: #fff; }
.stock-controls__search svg { color: var(--muted); flex: 0 0 auto; }
.stock-controls__search input {
  flex: 1 1 auto;
  border: 0;
  background: none;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
}
.stock-controls__search input:focus { outline: none; }
.stock-controls__search input::-webkit-search-cancel-button { display: none; }
#stockSearchClear {
  border: 0; background: none; color: var(--muted);
  font-size: 20px; line-height: 1; padding: 4px 2px; cursor: pointer;
}
#stockSearchClear:hover { color: var(--ink); }

@media (max-width: 768px) {
  .stock-controls__search { margin: 0 20px; min-width: 0; }
  .stock-controls__search input { font-size: 16px; padding: 13px 0; } /* 16px stops iOS zooming on focus */
}

@media (max-width: 400px) {
  .nav__logo.wordmark { font-size: 15.5px; letter-spacing: .16em; text-indent: .16em; }
  .nav__mobile-icons { gap: 0; }
  .nav__callus { padding: 9px; }
}

/* Smallest phones (iPhone SE and similar) — tighten a little further so the
   wordmark still clears the icons at 320px. */
@media (max-width: 340px) {
  .nav__logo.wordmark { font-size: 14px; letter-spacing: .1em; text-indent: .1em; }
  .nav__callus { padding: 7px; }
  .nav__callus svg { width: 19px; height: 19px; }
}

/* Vehicles awaiting photos — reads as deliberate rather than broken */
.car-card__nophoto {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
}
.car-card__media { position: relative; }

/* ============================================================
   FINANCE PAGE
   ============================================================ */
.finance-hero {
  position: relative;
  background: var(--carbon) url('../assets/banner-finance.jpg') center 50% / cover no-repeat;
}
.finance-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.72) 60%, rgba(6,6,7,.9) 100%);
}
.finance-hero .stock-hero__inner { position: relative; z-index: 1; }

.finance-main { padding: 90px 48px 100px; background: var(--paper); }
.finance-main__inner { max-width: 980px; margin: 0 auto; }

.finance-intro__text p {
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 18px;
  max-width: 780px;
}

.finance-points {
  list-style: none;
  margin: 38px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.finance-point {
  background: var(--paper-alt);
  border: 1px solid #ececec;
  padding: 28px 26px 26px;
}
.finance-point__num {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 14px;
}
.finance-point h3 {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.finance-point p { font-size: var(--fs-small); line-height: 1.75; color: var(--ink-soft); }

.finance-note {
  margin-top: 26px;
  padding: 18px 24px;
  background: var(--paper-alt);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink);
}

.finance-form-wrap {
  margin-top: 64px;
  padding: 46px 46px 40px;
  border: 1px solid #e6e6e6;
  background: var(--paper);
}
.finance-form__lead { font-size: var(--fs-small); color: var(--ink-soft); margin: -8px 0 30px; }
.finance-form__privacy { margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.finance-legal { margin-top: 38px; font-size: 12px; line-height: 1.8; color: var(--muted); max-width: 800px; }
.finance-legal p { margin-bottom: 10px; }

/* ---- Shared form states (finance, contact, valuation) ---- */
.req { color: var(--accent); font-weight: 600; margin-left: 2px; }

.input-prefix { position: relative; }
.input-prefix > span {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--muted); pointer-events: none;
}
.input-prefix input { padding-left: 34px !important; }

.field-error { margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: #c8372d; }
.contact-form__field.has-error input,
.contact-form__field.has-error textarea { border-color: #c8372d; }
.contact-form__status.is-error { color: #c8372d; font-weight: 500; }
.contact-form__submit:disabled { opacity: .6; cursor: default; }

/* Spam trap: out of sight of people and screen readers, still in the page for bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-success { text-align: center; padding: 34px 10px 26px; max-width: 520px; margin: 0 auto; }
.form-success:focus { outline: none; }
.form-success__tick {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 26px; margin-bottom: 22px;
}
.form-success h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: .06em; margin-bottom: 14px; }
.form-success p { font-size: var(--fs-small); line-height: 1.8; color: var(--ink-soft); margin-bottom: 26px; }
.form-success p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   TESTIMONIALS — source filter + "show more"
   ============================================================ */
.testimonials__filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto 34px; }
.testimonial__meta { display: flex; flex-direction: column; gap: 5px; padding-top: 18px; border-top: 1px solid #efefef; }
.testimonial__meta cite { border: 0; padding: 0; }
.testimonial__src {
  font-family: var(--font-display);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.testimonial__date { font-size: 12px; color: var(--muted); }
.testimonials__more { text-align: center; margin-top: 38px; }

@media (max-width: 900px) {
  .finance-points { grid-template-columns: 1fr; gap: 14px; }
  .finance-main { padding: 56px 22px 70px; }
  .finance-form-wrap { padding: 28px 20px 26px; margin-top: 44px; }
  .finance-intro__text p { font-size: var(--fs-body); }
  .finance-form .contact-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* Reviews rendered from the admin: gentle staggered fade-in */
.testimonial--new { opacity: 0; transform: translateY(14px); animation: loadin .6s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
.testimonial__text { white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .testimonial--new { animation: none; opacity: 1; transform: none; } }

.is-sent .finance-form__lead { display: none; }
.is-sent .vehicle-section-title { margin-bottom: 0; }

/* The generic ".testimonial p" rule was also catching the stars line: it turned them
   the body-text colour and let that line stretch, which left uneven gaps in cards. */
.testimonial .testimonial__stars { color: var(--accent); flex-grow: 0; margin-bottom: 16px; }
.testimonial .testimonial__text { flex-grow: 1; }

/* ============================================================
   HEADER AT LAPTOP / TABLET-LANDSCAPE WIDTHS (1101 – 1340px)
   ------------------------------------------------------------
   The desktop header has seven links, the logo and two icons, and
   needs roughly 1300px at full size. Between the point where the
   burger menu takes over (1100px) and 1340px it ran out of room and
   the phone / WhatsApp icons were pushed off the right-hand edge.
   This tightens spacing and type slightly in that range only;
   wider screens are untouched.
   ============================================================ */
@media (min-width: 1101px) and (max-width: 1340px) {
  .site-header { padding-left: 28px; padding-right: 28px; }
  .nav { gap: 16px; }
  .nav__links { gap: clamp(13px, 1.4vw, 22px); }
  .nav__link { font-size: 11.5px; letter-spacing: .08em; }
  .nav__logo.wordmark { font-size: 18px; letter-spacing: .22em; }
  .nav__phone { padding: 4px; }
}

/* ============ Privacy & Cookies Policy page ============ */
.legal-page { padding: 80px 48px 120px; background: var(--paper); }
.legal-page__inner { max-width: 820px; margin: 0 auto; }
.legal-page__updated { font-size: var(--fs-small); color: var(--muted); margin-bottom: 28px; }
.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin: 48px 0 16px;
}
.legal-page h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin: 28px 0 10px;
}
.legal-page p,
.legal-page li { font-size: var(--fs-body); line-height: 1.8; color: var(--ink-soft); }
.legal-page p { margin-bottom: 16px; }
.legal-page ul { margin: 0 0 18px 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-page strong { color: var(--ink); font-weight: 500; }
.legal-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legal-page__table { overflow-x: auto; margin: 8px 0 24px; }
.legal-page table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 520px; }
.legal-page th,
.legal-page td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid rgba(127,127,127,.25); color: var(--ink-soft); line-height: 1.6; }
.legal-page th { color: var(--ink); font-weight: 500; }
.legal-page td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; white-space: nowrap; }
@media (max-width: 768px) {
  .legal-page { padding: 56px 22px 90px; }
  .legal-page h2 { font-size: 18px; margin-top: 40px; }
}

/* Footer and form links to the privacy policy */
.footer__legal { margin-top: 8px; }
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--accent); }
.finance-form__privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ============ iPhone notch / status bar ============
   viewport-fit=cover lets the page draw right up to the top of the screen,
   so on iPhone the hero shows through behind the clock and battery icons
   instead of a solid strip. The header's own padding keeps the nav below
   the notch (--sat is 0 on devices without one). Declared last so it wins
   over the shorthand paddings above. */
.site-header { padding-top: var(--sat); }
/* Phones on their side: keep the nav clear of the notch at the sides */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header {
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }
}

/* ============ Homepage: Get In Touch strip ============
   Two equal columns (call / email) split by a hairline, with
   Follow Us centred underneath, so it stays symmetrical at every
   width. Colours come from the theme variables, so it follows
   the light / dark setting automatically. */
.reach { background: var(--paper); padding: 90px 48px 96px; border-top: 1px solid rgba(127,127,127,.14); }
.reach__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.reach__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.reach__title::after {
  content: "";
  display: block;
  width: 44px; height: 2px;
  margin: 18px auto 0;
  background: var(--accent);
}
.reach__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  margin-top: 52px;
}
.reach__divider { background: rgba(127,127,127,.28); }
.reach__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.reach__icon {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 1px solid rgba(127,127,127,.3);
  color: var(--ink);
  margin-bottom: 8px;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out);
}
.reach__icon svg { width: 26px; height: 26px; }
.reach__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
}
.reach__value {
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  transition: color .3s var(--ease-out);
}
.reach__item:hover .reach__icon,
.reach__item:focus-visible .reach__icon { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); }
.reach__item:hover .reach__value { color: var(--accent); }

.reach__follow { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.reach__follow-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--muted);
}
.reach__social { display: flex; justify-content: center; gap: 14px; }
.reach__social a {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.reach__social a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

@media (max-width: 768px) {
  .reach { padding: 64px 18px 70px; }
  .reach__grid { margin-top: 38px; }
  .reach__item { padding: 6px 8px; }
  .reach__icon { width: 58px; height: 58px; }
  .reach__icon svg { width: 23px; height: 23px; }
  .reach__label { font-size: 11.5px; letter-spacing: .1em; }
  .reach__value { font-size: 12.5px; letter-spacing: 0; }
  .reach__follow { margin-top: 44px; }
}

/* ============ Services: delivery cost note ============ */
.services__asterisk { color: var(--accent); text-decoration: none; font-weight: 500; margin-left: 1px; }
.services__note { margin-top: 18px; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* Shorter phones: tighten the menu so most of it fits without scrolling */
@media (max-height: 760px) {
  .mobile-menu { padding-top: calc(104px + var(--sat)); }
  .mobile-menu__links { gap: 18px; }
  .mobile-menu__links a { font-size: 19px; }
}

/* ============ Form send buttons ============
   Solid, on-brand primary buttons on every form (contact, finance,
   valuation): black with white text, orange on hover/tap. The dark
   theme already makes them orange (css/theme-dark.css). */
.contact-form__submit {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.contact-form__submit:hover,
.contact-form__submit:focus-visible,
.contact-form__submit:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============ Contact form: "Enquiring About" vehicle ============
   Same language as the rest of the site: square edges, hairline
   border, an orange rule on top (like the award badges), tracked
   uppercase Jost for labels and titles. */
.contact-vehicle {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 0 0 30px;
  padding: 16px 20px 16px 16px;
  background: var(--paper);
  border: 1px solid #e7e7e7;
  border-top: 2px solid var(--accent);
}
.contact-vehicle[hidden] { display: none; }
.contact-vehicle__media {
  display: block;
  width: 112px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-alt);
}
.contact-vehicle__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-out);
}
.contact-vehicle__media:hover img { transform: scale(1.06); }
.contact-vehicle__body { min-width: 0; }
.contact-vehicle__label {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.contact-vehicle__car {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.contact-vehicle__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}
.contact-vehicle__reg {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 4px 9px 3px;
  line-height: 1.2;
}
.contact-vehicle__reg[hidden] { display: none; }
.contact-vehicle__price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.contact-vehicle__remove {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin: -6px -8px 0 0;
  color: var(--accent);
  cursor: pointer;
  transition: transform .35s var(--ease-out), color .3s var(--ease-out);
}
.contact-vehicle__remove:hover,
.contact-vehicle__remove:focus-visible { transform: rotate(90deg); color: var(--ink); }
.contact-vehicle__remove:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.theme-dark .contact-vehicle { background: var(--paper-alt); border-color: rgba(255,255,255,.09); border-top-color: var(--accent); }
.theme-dark .contact-vehicle__media { background: #2f333a; }

@media (max-width: 560px) {
  .contact-vehicle {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }
  .contact-vehicle__media { width: 88px; }
  .contact-vehicle__car { font-size: 13.5px; }
  .contact-vehicle__remove { position: absolute; top: 6px; right: 6px; margin: 0; }
  .contact-vehicle { position: relative; }
  .contact-vehicle__body { padding-right: 26px; }
}

/* --- Used-cars page, question lists (FAQ) and footer link row --- */
.seo-faq{margin-top:56px}
.seo-faq details{border-bottom:1px solid #e4e4e4}
.seo-faq details:first-of-type{border-top:1px solid #e4e4e4}
.seo-faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-family:var(--font-display);font-size:17px;letter-spacing:.04em;color:var(--ink)}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-52%);font-size:26px;font-weight:300;color:var(--accent);transition:transform .3s}
.seo-faq details[open] summary::after{transform:translateY(-52%) rotate(45deg)}
.seo-faq details p{padding:0 44px 22px 0;line-height:1.8;color:var(--ink-soft);font-size:var(--fs-body)}
.seo-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.seo-visit{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--paper-alt);padding:40px 44px}
.seo-visit h3{font-family:var(--font-display);font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:14px;margin-bottom:14px}
.seo-visit p,.seo-visit li{line-height:1.9;color:var(--ink-soft);font-size:var(--fs-body)}
.seo-visit ul{list-style:none}
.seo-areas{margin-top:18px;font-size:var(--fs-small);color:var(--muted);line-height:1.8}
.footer__seo{max-width:1560px;margin:0 auto;padding:20px 0 6px;text-align:center;font-size:12px;letter-spacing:.06em}
.footer__seo a{color:rgba(255,255,255,.65);margin:0 10px;white-space:nowrap}
.footer__seo a:hover{color:var(--accent)}
@media (max-width:760px){.seo-visit{grid-template-columns:1fr;padding:30px 24px}.footer__seo a{display:inline-block;margin:4px 8px}}