/* ==========================================================================
   MBU CAR SALES / PAGE STYLES
   Styles specific to individual pages. The shared design system is style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO (homepage)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 58%;
  opacity: .38;
  transform: scale(1.04);
}
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(85% 70% at 12% 8%, rgba(46,104,190,.20), transparent 60%),
    linear-gradient(100deg, rgba(13,22,38,.97) 0%, rgba(13,22,38,.88) 42%, rgba(13,22,38,.62) 100%);
}
@media (max-width: 780px) {
  .hero::after {
    background:
      radial-gradient(90% 60% at 20% 0%, rgba(46,104,190,.22), transparent 62%),
      linear-gradient(180deg, rgba(13,22,38,.94) 20%, rgba(13,22,38,.82) 100%);
  }
}

.hero-inner {
  padding-block: clamp(56px, 10vw, 116px) clamp(78px, 11vw, 132px);
  max-width: 700px;
}
.hero h1 {
  color: #fff;
  letter-spacing: -.032em;
  line-height: 1.06;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent-300);
}
.hero-sub {
  margin-top: var(--sp-5);
  font-size: clamp(1.05rem, 2.2vw, var(--fs-xl));
  line-height: 1.55;
  color: #C6D2E4;
  max-width: 52ch;
}
.hero-cta { margin-top: var(--sp-6); gap: var(--sp-3); }

.hero-trust {
  margin-top: var(--sp-7);
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-trust li {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #D5DEEC;
}
.hero-trust svg { width: 18px; height: 18px; color: var(--accent-300); flex: none; }

/* Floating stock counter */
.hero-stat {
  position: absolute;
  right: 5%; bottom: 96px;
  z-index: 1;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  text-align: center;
}
.hero-stat b {
  display: block;
  font-size: 2.6rem; font-weight: 800;
  letter-spacing: -.04em; color: var(--accent-300);
  line-height: 1;
}
.hero-stat span {
  display: block; margin-top: 6px;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #B6C4D8;
}
@media (max-width: 1080px) { .hero-stat { display: none; } }

/* --------------------------------------------------------------------------
   QUICK SEARCH PANEL (overlaps hero)
   -------------------------------------------------------------------------- */
.quick-search-wrap { position: relative; z-index: 5; margin-top: -58px; }
.quick-search {
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  border: 1px solid var(--line-2);
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  gap: var(--sp-4);
  align-items: end;
}
.quick-search .field label { font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.quick-search .btn { height: 48px; }
/* Search stays the obvious action; Reset sits beside it, quieter, and only
   appears once there is something to clear (wired up in index.html). */
.qs-submit { display: flex; gap: 10px; align-items: end; }
.qs-submit .btn--primary { min-width: 130px; }
.qs-reset { width: auto; flex: none; color: var(--ink-3); }
.qs-reset[hidden] { display: none; }
/* Five fields plus a button need more room than four did, so they fold down
   in stages: three across, then two, then one. Search always takes the cell
   at the end of the last row rather than being left stranded on its own. */
@media (max-width: 1180px) {
  .quick-search { grid-template-columns: repeat(3, 1fr); }
  .quick-search .qs-submit { grid-column: 3 / -1; }
  .qs-submit .btn--primary { flex: 1; min-width: 0; }
}
@media (max-width: 780px) {
  .quick-search { grid-template-columns: repeat(2, 1fr); }
  /* Max price is the odd one out at two across, so it takes the full width
     and Search sits on the row below it. */
  .quick-search .field:nth-of-type(5) { grid-column: 1 / -1; }
  .quick-search .qs-submit { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .quick-search-wrap { margin-top: -40px; }
  .quick-search { grid-template-columns: 1fr; padding: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   HOW IT WORKS (homepage)

   This used to be .car-layout with the two columns set in an inline style.
   Inline styles beat stylesheet rules, media query or not, so the mobile
   rule that should have stacked it never applied and the text was left in a
   squeezed half-width column on a phone. It is a proper class now.
   -------------------------------------------------------------------------- */
.how-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px;
  align-items: center;
}
.how-layout > * { min-width: 0; }
.how-steps { grid-template-columns: 1fr; gap: 28px; }
.how-media img {
  width: 100%;
  border-radius: 22px;
  box-shadow: var(--sh-3);
  aspect-ratio: 4/5;
  object-fit: cover;
}
@media (max-width: 900px) {
  .how-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* The photo is decoration next to the words, so on a phone it goes first
     and shorter rather than eating a whole screen at 4:5. */
  .how-media { order: -1; }
  .how-media img { aspect-ratio: 16/10; }
}

/* --------------------------------------------------------------------------
   FEATURED STOCK SWIPE RAIL (homepage)

   Plain horizontal scrolling with snap points. No carousel library and no
   JavaScript needed to make it work: the arrows are a convenience for mouse
   users and hide themselves when every card already fits.

   Card widths are deliberately fractional so the next card always peeks in
   from the right. That peek is the whole affordance.
   -------------------------------------------------------------------------- */
.car-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--sp-5) * 2) / 3.12);
  gap: var(--sp-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
  padding-bottom: var(--sp-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--silver-400) transparent;
}
.car-rail::-webkit-scrollbar { height: 6px; }
.car-rail::-webkit-scrollbar-thumb { background: var(--silver-400); border-radius: var(--r-full); }
.car-rail::-webkit-scrollbar-track { background: transparent; }
.rail-item { scroll-snap-align: start; display: flex; }
.rail-item > * { width: 100%; }

/* Empty and error states need the full width, not one card's worth */
.car-rail--flat {
  display: block;
  overflow: visible;
  padding-bottom: 0;
}

.rail-nav { display: flex; align-items: center; gap: var(--sp-2); }
/* Only the arrows disappear when everything already fits. See all stock is
   always worth showing. */
.rail-arrows { display: flex; gap: var(--sp-2); }
.rail-arrows[hidden] { display: none; }
.rail-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  color: var(--navy-900);
  background: var(--surface);
  transition: background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--navy-800); }
.rail-btn:disabled { opacity: .32; cursor: default; }

@media (max-width: 1000px) {
  .car-rail { grid-auto-columns: calc((100% - var(--sp-5)) / 2.2); }
}
@media (max-width: 700px) {
  /* One card and a good look at the next one */
  .car-rail { grid-auto-columns: 78%; gap: var(--sp-4); }
  .rail-arrows { display: none; }
}

/* --------------------------------------------------------------------------
   STEPS / PROCESS
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
.step { position: relative; padding-left: 58px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-600);
  font-weight: 800; font-size: var(--fs-lg);
}
.step h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.step p { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.65; }
.section--dark .step::before { background: rgba(143,180,234,.18); color: var(--accent-300); }
.section--dark .step p { color: #A8B6CC; }

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-800), var(--navy-900) 70%);
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-6), 5vw, var(--sp-8));
  color: #fff;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-5);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 88% 20%, rgba(46,104,190,.22), transparent 65%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: #B6C4D8; margin-top: var(--sp-3); max-width: 46ch; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--navy-900);
  color: #fff;
  padding-block: clamp(var(--sp-6), 6vw, var(--sp-8));
  position: relative; overflow: hidden;
}
.page-head::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 130% at 85% 0%, rgba(46,104,190,.16), transparent 60%);
  pointer-events: none;
}
.page-head > * { position: relative; }
.page-head h1 { color: #fff; }
.page-head p { color: #B6C4D8; margin-top: var(--sp-3); font-size: var(--fs-lg); max-width: 58ch; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: #8FA1BC; margin-bottom: var(--sp-4);
}
.breadcrumb a:hover { color: var(--accent-300); }
.breadcrumb svg { width: 14px; height: 14px; opacity: .6; }

/* --------------------------------------------------------------------------
   STOCK PAGE / filters
   -------------------------------------------------------------------------- */
.stock-layout {
  display: grid;
  grid-template-columns: 286px 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 940px) { .stock-layout { grid-template-columns: 1fr; } }

.filters {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
}
.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-2);
}
.filters-head h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; }
.filters-head svg { width: 19px; height: 19px; color: var(--ink-3); }

.filter-group { display: flex; flex-direction: column; gap: 9px; }
.filter-group > label,
.filter-group > .fg-title {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.range-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.range-row span { color: var(--ink-4); font-size: var(--fs-sm); }
.range-row .input { padding: 10px 11px; font-size: var(--fs-sm); }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 7px 13px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: all .16s var(--ease);
  user-select: none;
}
.chip:hover { border-color: var(--ink-4); }
.chip.is-on {
  background: var(--navy-800); border-color: var(--navy-800); color: #fff;
}

.stock-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.result-count { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.result-count b { color: var(--navy-900); font-size: var(--fs-md); }
.toolbar-right { display: flex; gap: var(--sp-2); align-items: center; }
.toolbar-right .select { padding: 9px 34px 9px 12px; font-size: var(--fs-sm); width: auto; }

.filter-open-btn { display: none; }
@media (max-width: 940px) {
  .filters {
    position: fixed; inset: auto 0 0 0; top: 0;
    z-index: 95; max-height: none; border-radius: 0;
    transform: translateY(100%); transition: transform .3s var(--ease);
    overflow-y: auto; padding-bottom: 92px;
  }
  .filters.is-open { transform: none; }
  .filter-open-btn { display: inline-flex; }
  .filters-apply {
    position: sticky; bottom: 0; margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
    padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line);
    display: grid !important; gap: var(--sp-2);
  }
}
.filters-apply { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--sp-4); }
.active-filters:empty { display: none; }
.af-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 12px;
  border-radius: var(--r-full);
  background: var(--surface-3); color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 600;
}
.af-chip button {
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(19,24,32,.1); color: var(--ink-2);
}
.af-chip button:hover { background: var(--navy-800); color: #fff; }
.af-chip svg { width: 11px; height: 11px; stroke-width: 3; }

/* --------------------------------------------------------------------------
   CAR DETAIL PAGE
   -------------------------------------------------------------------------- */
.car-layout {
  display: grid;
  grid-template-columns: minmax(0,1.62fr) minmax(320px,1fr);
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 980px) { .car-layout { grid-template-columns: 1fr; } }

/* Grid and flex children default to min-width:auto, which means a wide child
   (the photo thumbnail strip is 96px × however many photos) pushes the whole
   column wider than the phone screen. That shunts the page sideways and the
   sticky header goes with it, cutting off the logo and the title.
   min-width:0 lets the column shrink and the thumbnails scroll on their own. */
.car-layout > *,
.stock-layout > *,
.contact-layout > * { min-width: 0; }

.gallery { min-width: 0; max-width: 100%; }
.thumbs  { max-width: 100%; }

/* Walkaround video. Sits above the photos because it does the most work */
.walkaround {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-4);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.walkaround-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.walkaround-head svg { width: 22px; height: 22px; color: var(--accent-600); flex: none; }
.walkaround-head strong { display: block; font-size: var(--fs-md); color: var(--navy-900); }
.walkaround-head span { display: block; font-size: var(--fs-sm); color: var(--ink-3); }
.walkaround video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  display: block;
}

/* Gallery */
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  cursor: zoom-in;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--navy-900);
  display: grid; place-items: center;
  box-shadow: var(--sh-2);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.gallery-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.gallery-nav svg { width: 22px; height: 22px; }
.gallery-nav--prev { left: 12px; }
.gallery-nav--next { right: 12px; }
.gallery-counter {
  position: absolute; bottom: 12px; right: 12px;
  padding: 5px 11px; border-radius: var(--r-full);
  background: rgba(13,22,38,.7); backdrop-filter: blur(4px);
  color: #fff; font-size: var(--fs-xs); font-weight: 600;
}
.gallery-flags { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }

.thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 96px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.thumb {
  aspect-ratio: 4/3;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: .62;
  cursor: pointer;
  transition: opacity .16s var(--ease), border-color .16s var(--ease);
  background: var(--surface-3);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .9; }
.thumb.is-on { opacity: 1; border-color: var(--navy-800); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,13,22,.95);
  display: none; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--r-md); }
.lightbox-close, .lightbox-nav {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(6px);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox svg { width: 24px; height: 24px; }
.lightbox-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: var(--fs-sm); font-weight: 600;
  background: rgba(255,255,255,.12); padding: 6px 14px; border-radius: var(--r-full);
}

/* --------------------------------------------------------------------------
   PRICE BAR (car page, phones and tablets)

   The buy panel below is a sticky column on a desktop, but under 980px it
   drops beneath the whole left column, so the price ended up around five
   screens down the page. This sits directly under the photos and says the
   price straight away, with the part exchange route next to it. Above 980px
   it hides, because the panel is already there in the corner of the eye.
   -------------------------------------------------------------------------- */
.car-price-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.cpb-figure { min-width: 0; }
.cpb-price {
  display: block;
  font-size: clamp(1.7rem, 7vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--navy-900);
}
.cpb-price--sold { color: var(--ink-3); }
.cpb-was {
  margin-left: 10px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: line-through;
  letter-spacing: 0;
}
.cpb-note {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.5;
}
/* Enquire and Share sit together beside the price on a tablet, and drop to
   their own full-width line once the phone is too narrow for both. Enquire
   takes the spare room; Share only needs enough for the word. */
.cpb-actions { display: flex; gap: var(--sp-2); flex: 0 1 auto; }
.cpb-actions .btn { justify-content: center; }
/* The first button takes the room that is going and may wrap its label if it
   has to ("Want one like this?" on a sold car). Share never wraps. */
.cpb-actions .btn:first-child { flex: 1 1 auto; min-width: 0; }
.cpb-share { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 520px) {
  .car-price-bar { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .cpb-actions { width: 100%; }
}
/* On a phone the card gives back some of its padding so both labels still fit
   across a 375px screen with room to spare, rather than only just. */
@media (max-width: 420px) {
  .car-price-bar { padding-inline: var(--sp-4); }
  .cpb-actions .btn { padding-inline: 14px; }
}
/* Below that they genuinely do not fit, so Share drops back to its icon rather
   than pushing itself off the edge of the card. It keeps its aria-label, so it
   still announces itself properly to a screen reader. */
@media (max-width: 370px) {
  .cpb-share { width: 46px; padding-inline: 0; }
  .cpb-share-label { display: none; }
}
@media (min-width: 981px) { .car-price-bar { display: none; } }

/* Enquire and Share as a pair in the buy panel, so Share sits with the action
   it belongs to rather than stranded at the bottom of the panel. */
.buy-panel-pair { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); }
.buy-panel-pair .btn { width: 100%; white-space: nowrap; }

/* Buy panel */
.buy-panel {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: #fff;
}
.buy-panel-head {
  padding: var(--sp-5);
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color: #fff;
}
.buy-panel-head .price {
  font-size: 2.3rem; font-weight: 800; letter-spacing: -.035em;
  color: var(--accent-300); line-height: 1.05;
}
.buy-panel-head .price-sub { font-size: var(--fs-sm); color: #A8B6CC; margin-top: 4px; }
.buy-panel-body { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.buy-panel-body .btn { width: 100%; }
.buy-note {
  font-size: var(--fs-xs); color: var(--ink-3); text-align: center;
  line-height: 1.6; margin-top: 2px;
}
@media (max-width: 980px) { .buy-panel { position: static; } }

/* --------------------------------------------------------------------------
   "WHERE WE ARE" PANEL (car page sidebar)

   The two icons here had no size rule of their own. An inline SVG with a
   viewBox and no width falls back to filling its container, so they were
   rendering about 295px square on a phone. Everywhere else on the site sizes
   its icons explicitly; this now does too.
   -------------------------------------------------------------------------- */
.where-panel { margin-top: var(--sp-4); }

.where-map {
  display: block; position: relative;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: var(--sp-4);
  background: var(--surface-2);
}
.where-map img {
  width: 100%; height: auto; display: block;
  /* The map is tall; show the useful middle rather than all of it */
  aspect-ratio: 4/3; object-fit: cover; object-position: center 38%;
}
.where-map.is-imageless img { display: none; }
.where-map-cue {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  background: linear-gradient(to top, rgba(10,24,48,.92), rgba(10,24,48,.55));
  color: #fff; font-size: var(--fs-sm); font-weight: 700;
}
.where-map-cue svg { width: 16px; height: 16px; flex: none; }
.where-map:hover .where-map-cue { background: var(--navy-900); }
.where-map.is-imageless .where-map-cue { position: static; background: var(--navy-800); }

.where-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6;
}
.where-row + .where-row { margin-top: var(--sp-3); }
.where-row svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink-4); }

/* Reg plate */
.reg-plate {
  display: inline-flex; align-items: center;
  background: #FFDD00;
  color: #111;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .08em;
  padding: 7px 14px 7px 26px;
  border-radius: 5px;
  border: 1.5px solid #D4B800;
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.reg-plate::before {
  content: 'UK';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 19px;
  background: #0C3C9B;
  color: #FFDD00;
  font-size: 8px; font-weight: 700; letter-spacing: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
  border-radius: 3px 0 0 3px;
}

/* Spec table */
.spec-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.spec-item { background: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.spec-item dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.spec-item dd { font-size: var(--fs-md); font-weight: 600; color: var(--navy-900); }

.feature-group + .feature-group { margin-top: var(--sp-5); }
.feature-group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-2);
}
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 10px var(--sp-4); }
.feature-list li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-sm); color: var(--ink-2); }
.feature-list svg { width: 17px; height: 17px; color: var(--green-600); flex: none; margin-top: 2px; }

/* The folded-away remainder of a group. It is a second grid rather than more
   items in the first, so it needs the row gap putting back between them. */
.feature-list--more { margin-top: 10px; }

.feature-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3);
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--navy-900);
  transition: background .16s ease, border-color .16s ease;
}
.feature-toggle:hover { background: var(--surface-2); border-color: var(--navy-800); }
.feature-toggle svg { width: 16px; height: 16px; transition: transform .2s ease; }
.feature-toggle.is-open svg { transform: rotate(180deg); }

.notice {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.notice svg { width: 21px; height: 21px; flex: none; margin-top: 1px; }
.notice--amber { background: var(--amber-100); color: #6B4508; }
.notice--amber svg { color: var(--amber-600); }
.notice--blue { background: var(--blue-100); color: var(--navy-700); }
.notice--blue svg { color: var(--navy-600); }
.notice strong { display: block; margin-bottom: 3px; color: inherit; }

/* Shown on the Sell Your Car page when somebody arrives from a car listing
   wanting a valuation against it, and on the contact page when they arrive
   from a car listing wanting to ask about it. */
.px-notice, .ct-notice { margin-bottom: var(--sp-4); }
.px-back, .ct-link {
  display: inline-block; margin-top: 6px;
  font-weight: 700; color: var(--accent-600); text-decoration: underline;
}
.px-back:hover, .ct-link:hover { color: var(--navy-900); }

/* --------------------------------------------------------------------------
   SEND IT ANOTHER WAY (contact page)

   Under the form. The message they have typed is carried into whichever of
   these they pick, so choosing WhatsApp over the form is not starting again.
   -------------------------------------------------------------------------- */
.send-via {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.send-via-title {
  display: block; margin-bottom: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.send-via-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.send-via-row .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }

.car-section { padding-block: var(--sp-6); border-top: 1px solid var(--line-2); }
.car-section:first-child { border-top: 0; padding-top: 0; }
.car-section h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.car-section p { color: var(--ink-2); line-height: 1.75; }
.car-section p + p { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   HOW TO FIND US

   The lot is behind a petrol station down an unmarked lane, so the photos do
   most of the work here. They are given room to breathe rather than being
   shrunk into a column.
   -------------------------------------------------------------------------- */
.find-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 340px;
  gap: var(--sp-6); align-items: start;
}
.find-layout > * { min-width: 0; }
@media (max-width: 900px) { .find-layout { grid-template-columns: 1fr; } }

.find-figure { margin: 0 0 var(--sp-5); }
.find-figure img {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  background: var(--surface-2);
}
.find-figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.65;
}
.find-figure figcaption strong { color: var(--navy-900); }

/* Numbered steps, one under the other, on every screen size */
.find-steps { grid-template-columns: 1fr; gap: var(--sp-5); }

.find-address {
  font-style: normal;
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--navy-900);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   CONTACT / FORM PAGES
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-6); align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-row {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-2);
}
.contact-row:last-child { border-bottom: 0; }
.contact-row-icon {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-md);
  background: var(--surface-3); color: var(--navy-700);
  display: grid; place-items: center;
}
.contact-row-icon svg { width: 20px; height: 20px; }
.contact-row h3 { font-size: var(--fs-md); margin-bottom: 2px; }
.contact-row a { color: var(--navy-600); font-weight: 600; }
.contact-row a:hover { text-decoration: underline; }
.contact-row p { font-size: var(--fs-sm); color: var(--ink-3); }

.hours-table { width: 100%; font-size: var(--fs-sm); }
.hours-table tr { border-bottom: 1px solid var(--line-2); }
.hours-table tr:last-child { border-bottom: 0; }
.hours-table td { padding: 10px 0; }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--navy-900); white-space: nowrap; }
.hours-table tr.is-today td { color: var(--green-600); }
.hours-table tr.is-today td:first-child::after {
  content: ' · today'; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   SOLD PAGE
   -------------------------------------------------------------------------- */
.sold-note {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.sold-note svg { width: 26px; height: 26px; color: var(--accent-600); flex: none; }
.sold-note p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; }
.sold-note strong { color: var(--navy-900); }

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.stat {
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--line-2);
  text-align: center;
}
.stat b {
  display: block; font-size: 2rem; font-weight: 800;
  letter-spacing: -.035em; color: var(--navy-900); line-height: 1;
}
.stat span {
  display: block; margin-top: 6px; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   LEGAL PAGES
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.prose p, .prose li { color: var(--ink-2); line-height: 1.75; }
.prose p + p { margin-top: var(--sp-3); }
.prose ul { margin: var(--sp-3) 0; display: grid; gap: 8px; }
.prose ul li { padding-left: 22px; position: relative; }
.prose ul li::before {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-500);
}
.prose a { color: var(--navy-600); font-weight: 600; text-decoration: underline; }