/* =========================================================
   Direct Japan Autos – styles
   Matched to the logo: pure black, the logo's bright red, white,
   and heavy wide italic headlines like the logo lettering.
   ========================================================= */

:root {
  /* colour */
  --ink: #000000;
  --ink-2: #141414;
  --ink-3: #262626;
  --paper: #F6F6F4;
  --surface: #FFFFFF;
  --line: #E2E2DE;
  --line-strong: #BEBEB8;
  --text: #111111;
  --muted: #5E5E5E;
  --on-ink: #F6F6F4;
  --on-ink-muted: #EDEDED;
  --accent: #E10A14;
  --accent-deep: #B8000C;
  --accent-on-dark: #FF3B47;
  --plate-blue: #1F3FA8;
  --signal: #1E56D6;
  --ok: #1D7347;
  --ok-bg: #E3F2E9;
  --danger: #B42318;
  --danger-bg: #FDECEA;

  /* type */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-hero: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);

  /* space (8pt rhythm) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(36px, 5vw, 72px);
  --max: 1280px;

  /* shape + depth */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .12);

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-fast: 150ms;
  --t-med: 260ms;
  --t-slow: 520ms;

  /* layers */
  --z-header: 40;
  --z-drawer: 60;
  --z-toast: 100;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.55; color: var(--text);
  background: var(--paper); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--signal); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
address strong { font-weight: 700; }
.address-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.address-note .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: #fff; }
.on-ink .form-card :focus-visible, .hero .hero-panel :focus-visible { outline-color: var(--signal); }
.icon { width: 20px; height: 20px; flex: none; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--accent); color: #fff;
  padding: 12px 16px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-sm); border: 2px solid transparent; font-weight: 700; font-size: var(--fs-base); line-height: 1.2;
  text-decoration: none; cursor: pointer; touch-action: manipulation; white-space: nowrap;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--plate { background: var(--accent); color: #fff; }
.btn--plate:hover { background: var(--accent-deep); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-3); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--on-ink); }
.btn--ghost-light { background: transparent; color: var(--on-ink); border-color: rgba(246, 246, 244, .4); }
.btn--ghost-light:hover { border-color: var(--on-ink); }
.btn--block { width: 100%; white-space: normal; text-align: center; }
.vehicle-summary > * { min-width: 0; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--ink); border-right-color: transparent; animation: spin .7s linear infinite;
}
.btn--ink.is-loading::after { border-color: var(--on-ink); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-link { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.text-link:hover { text-decoration-color: var(--ink); }

/* ---------- Number plates ---------- */
.plate {
  display: inline-flex; align-items: stretch; background: #fff; color: #111;
  border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .55);
  font-stretch: 62%; font-weight: 800; letter-spacing: .04em; line-height: 1; overflow: hidden;
}
.plate-band {
  display: grid; place-items: end center; background: var(--plate-blue); color: #fff;
  font-size: 9px; font-stretch: 100%; letter-spacing: .02em; padding: 0 5px 4px; font-weight: 700;
}
.plate-chars { padding: 7px 10px 6px; font-size: 22px; }
.plate--tag {
  position: absolute; inset-inline-start: 12px; top: 12px; z-index: 2; font-size: 15px; padding: 5px 8px 4px; gap: 4px; align-items: baseline;
}
.plate--tag small { font-size: 11px; font-weight: 700; font-stretch: 100%; letter-spacing: 0; }
.plate--lg { position: static; font-size: 20px; padding: 7px 10px 6px; }

/* ---------- Header ---------- */
.site-header {
  /* solid black, the same as the logo's background, so the logo blends in */
  position: sticky; top: 0; z-index: var(--z-header); background: #000; color: var(--on-ink);
  border-bottom: 1px solid transparent; min-height: 72px; transition: border-color var(--t-med) ease;
}
.site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, .1); }
.header-inner { display: flex; align-items: center; gap: var(--s5); min-height: 72px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand-logo { height: 44px; width: auto; }
/* Computers: links centred in the space between the logo and the buttons */
.main-nav { margin-inline: auto; }
.main-nav ul { display: flex; gap: var(--s3); }
.main-nav a {
  display: block; padding: 10px 14px; border-radius: var(--r-sm); color: var(--on-ink); text-decoration: none; font-weight: 600;
  position: relative;
}
.main-nav a::after {
  content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: var(--s2); }
.icon-link {
  position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: transparent; border: 0; color: var(--ink); text-decoration: none;
}
.icon-link:hover { background: rgba(0, 0, 0, .06); }
.site-header .icon-link { color: var(--on-ink); }
.site-header .icon-link:hover { background: rgba(255, 255, 255, .1); }
.icon-link .icon { width: 22px; height: 22px; }
.saved-link .count {
  position: absolute; top: 4px; inset-inline-end: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; transform: scale(0); transition: transform var(--t-med) var(--ease-out);
}
.saved-link.has-saved .count { transform: scale(1); }
.saved-link.has-saved .icon { fill: var(--accent-on-dark); stroke: var(--accent-on-dark); }
.header-call { min-height: 44px; padding: 10px 16px; }
/* WhatsApp button in the header: red circle with the WhatsApp logo */
.site-header .wa-link { background: var(--accent); color: #fff; width: 44px; height: 44px; }
.site-header .wa-link:hover { background: #B8080F; }
.wa-glyph {
  width: 22px; height: 22px; background: #fff;
  -webkit-mask: url(https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/whatsapp.svg) center / contain no-repeat;
  mask: url(https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/whatsapp.svg) center / contain no-repeat;
}
.menu-toggle { display: none; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }
.mobile-menu {
  background: var(--ink); color: var(--on-ink); padding: var(--s4) var(--gutter) var(--s6); border-top: 1px solid rgba(255, 255, 255, .1);
  opacity: 0; transform: translateY(-8px); transition: opacity var(--t-med) ease, transform var(--t-med) var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu a:not(.btn) {
  display: block; padding: 14px 0; color: var(--on-ink); font-size: var(--fs-lg); font-weight: 800; font-stretch: 125%; font-style: italic;
  text-decoration: none; border-bottom: 1px solid rgba(246, 246, 244, .12);
}
.mobile-menu a[aria-current="page"] { color: var(--accent-on-dark); }
.mobile-menu-actions { display: grid; gap: var(--s3); margin-top: var(--s5); }

@media (max-width: 1023px) {
  .main-nav { display: none; }
  .header-actions { margin-inline-start: auto; }
  .menu-toggle { display: inline-grid; }
}
/* Phones: logo centred, menu + language on the left, WhatsApp + call on the right */
@media (max-width: 639px) {
  .header-inner { position: relative; }
  /* centred in the gap between the menu icon and the two round buttons, so the space either side is equal
     (the right side has two buttons, the left one, so the gap's middle sits 24px left of the page middle) */
  .brand { position: absolute; left: calc(50% - 24px); top: 50%; transform: translate(-50%, -50%); }
  .brand-logo { height: 30px; }
  .header-actions { flex: 1; gap: 4px; }
  .menu-toggle { order: -2; place-items: center start; margin-inline-end: auto; } /* icon flush with the edge, mirroring the call button */
  .site-header .menu-toggle:hover { background: transparent; }
  .lang-switch { order: -1; margin-inline-end: auto; }
  .lang-menu { inset-inline-end: auto; inset-inline-start: 0; }
  .site-header .saved-link { display: none; }
  .header-call span { display: none; }
  .icon-link, .header-call, .site-header .wa-link { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
}
@media (max-width: 399px) {
  .brand { left: calc(50% - 21.5px); } /* smaller 40px buttons */
  .brand-logo { height: 27px; }
  .header-actions { gap: 3px; }
  .icon-link, .header-call, .site-header .wa-link, .lang-btn { width: 40px; height: 40px; min-height: 40px; }
  .wa-glyph { width: 20px; height: 20px; }
}
@media (max-width: 359px) { .brand-logo { height: 24px; } }
@media (max-width: 339px) { .brand-logo { height: 20px; } .header-actions { gap: 2px; } }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 60%, rgba(225, 10, 20, .14), transparent 70%),
    radial-gradient(40% 50% at 10% 0%, rgba(255, 255, 255, .05), transparent 70%);
}
.hero-inner {
  position: relative; display: grid; gap: var(--s7); padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 88px);
  grid-template-columns: minmax(0, 1fr);
}
.hero-copy { text-align: center; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s5); }
@media (max-width: 639px) {
  .hero-ctas { flex-direction: column; margin-top: var(--s4); gap: 10px; }
  .hero-ctas .btn { width: 100%; }
}
.hero h1 { font-size: var(--fs-hero); font-weight: 800; font-stretch: 125%; letter-spacing: -.01em; line-height: .98; max-width: 14ch; margin-inline: auto; }
/* Intro: centred, split into two even lines on wider screens (balanced lines on phones) */
.hero-lede {
  margin: var(--s5) auto 0; font-size: var(--fs-md); font-weight: 500; color: var(--on-ink-muted); position: relative;
  max-width: 54ch; text-wrap: balance;
}
@media (max-width: 639px) { .hero-lede { font-size: 1rem; } }

/* "Just in" panel */
.hero-panel {
  background: var(--surface); color: var(--text); border-radius: var(--r-lg); padding: clamp(16px, 2.4vw, 24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); display: grid; gap: var(--s3); width: 100%; max-width: 520px; justify-self: end;
}
@media (max-width: 1023px) { .hero-panel { justify-self: stretch; max-width: none; } }
/* Phones: tighter spacing in the top section */
@media (max-width: 639px) {
  .hero-inner { padding-block: 22px 26px; gap: 20px; }
  .hero-lede { margin-top: 10px; }
  .hero-panel { padding: 12px 14px 14px; gap: 6px; border-radius: 16px; }
  .hero-row { padding: 8px 6px; }
  .hero-panel .btn { min-height: 44px; }
}
.hero-panel-title { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: var(--s2); }
.hero-panel-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hero-list li + li { border-top: 1px solid var(--line); }
.hero-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px;
  padding: 12px 6px; margin-inline: -6px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none;
  transition: background-color var(--t-fast) ease;
}
.hero-row:hover { background: var(--paper); }
.plate--sm { position: static; align-self: center; font-size: 14px; padding: 4px 6px 3px; }
.hero-row-name { font-weight: 800; font-stretch: 104%; line-height: 1.25; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-row-name small { display: flex; column-gap: 7px; font-weight: 500; font-stretch: 100%; font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow: hidden; }
.hero-row-price { font-weight: 900; font-size: 15.5px; font-variant-numeric: tabular-nums; text-align: center; align-self: center; direction: ltr; unicode-bidi: isolate; }
.hero-row-go { width: 18px; height: 18px; color: var(--muted); transform: scaleX(-1); transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) ease; }
.hero-row:hover .hero-row-go { color: var(--accent); transform: scaleX(-1) translateX(-3px); }
[dir="rtl"] .hero-row-go { transform: none; }
[dir="rtl"] .hero-row:hover .hero-row-go { transform: translateX(-3px); }
@media (max-width: 399px) { .hero-row-go { display: none; } .hero-row { grid-template-columns: auto minmax(0, 1fr) auto; } }
/* Very narrow screens: show mileage and gearbox only, so the details stay on one line */
@media (max-width: 389px) { .hero-row-name small span:nth-child(2) { display: none; } .hero-row-price { font-size: 15px; } }

/* ---------- One orchestrated load sequence (hero only) ---------- */
.js .hero-copy > *, .js .hero-panel, .js .hero-list li { opacity: 0; transform: translateY(16px); }
.js body.is-ready .hero-copy > *, .js body.is-ready .hero-panel { animation: rise .7s var(--ease-out) both; }
.js body.is-ready .hero-copy > :nth-child(2) { animation-delay: 80ms; }
.js body.is-ready .hero-panel { animation-delay: 160ms; }
.js body.is-ready .hero-list li { animation: rise .5s var(--ease-out) both; animation-delay: calc(380ms + var(--i) * 90ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Makes we sell (moving logo strip) ---------- */
/* Black logo bar carrying on from the hero, white logos, one thin red line underneath */
.makes {
  background: var(--ink); color: var(--on-ink); padding-block: 20px; overflow: hidden;
  border-block: 0; position: relative;
}
/* Faded red lines above and below: strongest in the middle, fading out at the edges */
.makes::before, .makes::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #C00C16 50%, transparent);
}
.makes::before { top: 0; }
.makes::after { bottom: 0; }
main > .makes + section { border-top: 0; }
.makes-head { margin-bottom: 0; text-align: center; }
.makes-title { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.makes-viewport {
  direction: ltr; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.makes-track { display: flex; width: max-content; animation: makes-scroll 30s linear infinite; }
.makes-track li { flex: none; padding-inline: clamp(10px, 2.5vw, 26px); }
.makes-viewport:hover .makes-track, .makes-viewport:focus-within .makes-track { animation-play-state: paused; }
@keyframes makes-scroll { to { transform: translateX(-50%); } }
.make {
  display: grid; justify-items: center; gap: 8px; min-width: 96px; padding: 10px 8px; border-radius: var(--r-md);
  color: var(--on-ink); text-decoration: none; transition: color var(--t-fast) ease;
}
.make:hover { color: var(--accent-on-dark); }
.make-logo {
  width: 52px; height: 52px; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.make-name { font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .makes-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .makes-track li[aria-hidden="true"] { display: none; }
  .makes-viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
/* thin dividing line between sections */
main > section + section, main > .section + .section { border-top: 1px solid var(--line); }
main > section.on-ink, main > section.sourcing-band, .site-footer { border-top: 1px solid rgba(255, 255, 255, .14); }
.section--tight { padding-block: clamp(28px, 4vw, 56px); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center .section-intro { margin-inline: auto; }
.section-head--center > div { flex: 1; }
.section-head--center .section-title { margin-inline: auto; }
/* small black map-pin badge beside the "Visit us" heading, on one line */
.title-pin { display: flex; align-items: center; justify-content: center; gap: 10px; }
.heading-pin {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center;
}
.heading-pin .icon { width: 19px; height: 19px; }
#find-us .section-intro { margin-top: var(--s2); }
/* Heading with two slanted red stripes either side (long over short, like the logo) */
.title-lines { display: flex; align-items: center; justify-content: center; gap: var(--s4); text-align: center; }
.title-lines::before, .title-lines::after {
  content: ""; flex: none; width: 56px; height: 12px; transform: skewX(-30deg);
  --stripe: linear-gradient(var(--accent), var(--accent));
}
.title-lines::before, [dir="rtl"] .title-lines::after { background: var(--stripe) right top / 100% 4px no-repeat, var(--stripe) right bottom / 62% 4px no-repeat; }
.title-lines::after, [dir="rtl"] .title-lines::before { background: var(--stripe) left top / 100% 4px no-repeat, var(--stripe) left bottom / 62% 4px no-repeat; }
@media (max-width: 399px) { .title-lines { gap: var(--s3); } .title-lines::before, .title-lines::after { width: 42px; } }
.section-title { font-size: var(--fs-xl); font-weight: 800; font-stretch: 125%; letter-spacing: -.005em; max-width: 22ch; }
.section-intro { color: var(--muted); max-width: 56ch; margin-top: var(--s3); font-size: var(--fs-md); }
.section-h { font-size: var(--fs-lg); font-weight: 800; font-stretch: 112%; margin-bottom: var(--s4); }
.on-ink { background: var(--ink); color: var(--on-ink); }
.on-ink .section-intro { color: var(--on-ink-muted); }

/* ---------- Car cards ---------- */
.car-grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.car-card {
  position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease, border-color var(--t-med) ease;
}
.car-media {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #EEF0EC 0%, #E2E6E1 100%);
}
.car-media .car-art { width: 88%; transition: transform var(--t-slow) var(--ease-out); }
.car-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
@media (hover: hover) {
  .car-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
  .car-card:hover .car-art { transform: translateX(10px); }
  .car-card:hover .car-media img { transform: scale(1.04); }
}
.car-card:focus-within { border-color: var(--ink); }
.car-card.is-reserved .car-media > :first-child { opacity: .55; }
.status-badge {
  position: absolute; inset-inline-end: 64px; top: 16px; z-index: 2; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
}
.status-badge--inline { position: static; align-self: center; }
/* Sold cars: red SOLD band across the photo, photo slightly greyed */
.sold-banner { position: absolute; left: -10%; right: -10%; top: 50%; transform: translateY(-50%) rotate(-8deg); background: var(--accent); color: #fff; text-align: center; font-weight: 900; font-style: italic; font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; font-size: clamp(18px, 3vw, 26px); padding: 6px 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; }
.is-sold .car-media > img, .gallery-main.is-sold > img { filter: grayscale(.5); opacity: .85; }
.gallery-main .sold-banner { font-size: clamp(26px, 5vw, 44px); padding: 10px 0; }
.sold-actions { grid-template-columns: 1fr; }
.sold-link { text-align: center; margin-top: var(--s6); }
.sold-section { padding-top: 0; }
.status-badge--sold { background: var(--accent); color: #fff; }
.caz-badge {
  position: absolute; inset-inline-start: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 700; padding: 4px 9px 4px 7px; border-radius: 999px;
}
.caz-badge .icon { width: 14px; height: 14px; }
.save-btn {
  position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: var(--shadow-1);
  touch-action: manipulation; transition: background-color var(--t-fast) ease;
}
.save-btn:hover { background: #fff; }
.save-btn .icon { width: 22px; height: 22px; transition: fill var(--t-fast) ease, stroke var(--t-fast) ease; }
.save-btn[aria-pressed="true"] .icon { fill: var(--danger); stroke: var(--danger); }
.save-btn.pop .icon { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.save-btn--inline { position: static; margin-inline-start: auto; box-shadow: none; border: 1px solid var(--line); }

.car-body { display: flex; flex-direction: column; gap: 6px; padding: var(--s4) var(--s4) var(--s5); flex: 1; }
.car-title { font-size: var(--fs-md); font-weight: 800; font-stretch: 112%; }
.car-title a { color: var(--ink); text-decoration: none; }
.car-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card is the link */
.car-title a:focus-visible { outline: none; }
.car-title a:focus-visible::after { outline: 3px solid var(--signal); outline-offset: -3px; border-radius: var(--r-md); }
.car-variant { color: var(--muted); font-size: var(--fs-sm); }
.car-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.car-specs li { font-size: 13px; font-weight: 600; background: var(--paper); border-radius: 6px; padding: 4px 8px; }
.car-price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.price { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.price--lg { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-stretch: 112%; }
.per-month { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.per-month strong { color: var(--ink); font-size: var(--fs-base); }

/* "Japan import" tag (shown until a car has a UK plate) and "Call for price" */
.import-tag {
  display: inline-flex; align-items: center; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.car-media .import-tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
[dir="rtl"] .car-media .import-tag { left: auto; right: 12px; }
.import-tag--sm {
  align-self: center; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px;
  font-size: 13px; font-weight: 800; padding: 3px 6px; font-variant-numeric: tabular-nums;
}
.price--call { font-size: var(--fs-md); color: var(--accent); }
.price--lg.price--call { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.hero-row-price.price--call { font-size: 13px; font-weight: 800; white-space: nowrap; }
.more-wrap { display: flex; justify-content: center; margin-top: var(--s6); }

/* Cars we can import (Car Sourcing page) */
.import-section .result-count { margin-bottom: var(--s4); }
.import-ref { font-size: 13px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.sourcing-band .sourcing-cta { text-align: center; max-width: none; margin-inline: 0; } /* "See cars we can import" button, centred on every screen size */
/* Ref on car cards: centred, and on stock cards pinned to the bottom so refs line up across a row */
.car-card .import-ref { text-align: center; }
.car-card:not(.import-card):not(.is-sold) .import-ref { margin-top: auto; padding-top: 6px; }
.vehicle-ref { text-align: center; font-size: 14px; color: var(--muted); margin-top: -8px; font-variant-numeric: tabular-nums; }
.import-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.import-actions .btn { min-height: 44px; padding: 10px 14px; font-size: var(--fs-sm); }
.import-actions .wa-glyph { width: 18px; height: 18px; flex: none; }
.import-actions { position: relative; z-index: 2; } /* keep the buttons tappable above the whole-card link */
.import-actions .import-call { width: 44px; padding: 0; }
.import-actions .import-call .icon { width: 18px; height: 18px; }
.import-card .car-title { font-size: var(--fs-md); }

/* Phones: two compact cards per row (photo, name, short details line, price) so there's less scrolling */
@media (max-width: 639px) {
  .car-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .car-card { border-radius: 10px; }
  .car-card .car-variant, .car-card .caz-badge, .car-card .car-specs .is-tbc { display: none; }
  .car-card .car-body { padding: 8px 9px 10px; gap: 2px; }
  .car-card .car-title { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
  .car-card .car-specs { margin-top: 2px; gap: 0; }
  .car-card .car-specs li { background: none; padding: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
  .car-card .car-specs li + li::before { content: "\00b7"; margin: 0 4px; }
  .car-card .car-price { padding-top: 4px; border-top: 0; }
  .car-card .price { font-size: 15px; }
  .car-card .price--call { font-size: 13.5px; }
  .car-card .plate--tag { top: 6px; left: 6px; font-size: 12px; padding: 3px 6px 2px; }
  [dir="rtl"] .car-card .plate--tag { left: auto; right: 6px; }
  .car-card .import-tag { top: 6px; left: 6px; font-size: 10.5px; padding: 3px 7px; }
  [dir="rtl"] .car-card .import-tag { left: auto; right: 6px; }
  .car-card .status-badge { top: 8px; right: 44px; font-size: 10.5px; padding: 3px 7px; }
  .car-card .save-btn { top: 4px; right: 4px; width: 36px; height: 36px; }
  .car-card .save-btn .icon { width: 17px; height: 17px; }
  /* import cards: Call button plus an icon-only WhatsApp button */
  .import-card .import-ref, .car-card .import-ref { font-size: 11px; margin-top: 2px; }
  .import-card .import-actions { gap: 6px; padding-top: 8px; border-top: 0; }
  .import-card .import-actions .btn { min-height: 40px; padding: 8px 10px; font-size: 12.5px; gap: 6px; }
  .import-card .import-actions .btn--plate .icon { display: none; }
  .import-card .import-actions .btn--line { padding: 8px; }
  .import-card .import-actions .import-call { width: 40px; }
  .import-card .import-actions .wa-glyph { width: 16px; height: 16px; }
  .import-card .import-actions .btn-label { display: none; }
}

/* results re-entry when filters change */
.is-entering .car-card { animation: card-in .42s var(--ease-out) both; animation-delay: calc(min(var(--i), 8) * 40ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }


/* ---------- Why us ---------- */
/* Heading centred with stripes either side, tiles underneath (same layout as Just arrived and Import from Japan) */
.why { display: grid; gap: var(--s7); }
.why-cta { margin-top: var(--s5); }
/* Promise tiles: icon + title (short description from tablet up); 3 × 2 from tablet up */
.promise-list { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .promise-list { grid-template-columns: repeat(3, 1fr); } .why .promise-list > li { justify-content: flex-start; } } /* icons line up along the top */
@media (min-width: 1024px) { .promise-list { gap: var(--s4); } .promise-list li { padding: var(--s5) var(--s4); } }
/* Grey band so the section reads as its own block, with white tiles and a small red label */
.why-section { background: #E7E7E3; position: relative; }
/* faded black line along the top edge, same fade style as the logo bar's red lines */
main > .section.why-section { border-top: 0; }
.why-section::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ink) 50%, transparent);
}
.why-label {
  color: var(--accent); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s2);
}
[dir="rtl"] .why-label { letter-spacing: 0; }
.promise-list li {
  background: var(--surface); border-radius: var(--r-md); padding: var(--s4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.promise-list .icon { width: 26px; height: 26px; color: var(--accent); margin-bottom: var(--s2); flex: none; }
.promise-list h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.25; }
.promise-list p { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
/* Heading line and button centred, in line with the tiles */
.why-intro, .why-cta { text-align: center; }
.why-intro, .why .section-title { margin-inline: auto; } /* the heading has a max width, so it needs centring too on wide screens */
/* Phones: tile titles only, button under the tiles */
@media (max-width: 639px) {
  .why { gap: var(--s5); }
  .why > div:first-child { display: contents; }
  .why-intro { margin-top: calc(var(--s2) - var(--s5)); }
  .promise-list p { display: none; }
  .why-cta { order: 1; margin-top: 0; }
  .promise-list { gap: var(--s2); }
  .promise-list li { padding: var(--s3) var(--s3) var(--s4); }
  .promise-list h3 { font-size: var(--fs-sm); }
}

/* ---------- Tick lists ---------- */
.tick-list { margin-top: var(--s5); display: grid; gap: var(--s3); }
.tick-list li { display: flex; gap: var(--s3); color: var(--on-ink-muted); }
.tick-list .icon { color: var(--accent-on-dark); margin-top: 2px; }
/* segmented control */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span {
  display: inline-grid; place-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); font-weight: 600; font-size: var(--fs-sm); transition: all var(--t-fast) ease;
}
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }

/* ---------- Sourcing band ---------- */
.sourcing-band { background: var(--ink); color: var(--on-ink); }
.sourcing-inner { display: grid; gap: var(--s6); padding-block: clamp(48px, 7vw, 88px); }
@media (min-width: 1024px) { .sourcing-inner { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.sourcing-band h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); font-weight: 800; font-stretch: 125%; line-height: 1; }
.sourcing-band p { font-size: var(--fs-md); max-width: 50ch; margin-top: var(--s4); }
/* Home page import band: short heading, one line, three icon steps, one button */
.sourcing-simple { text-align: center; padding-block: clamp(44px, 6vw, 80px); }
/* always one line: shrinks on narrow screens so it never wraps between the stripes */
.sourcing-band .sourcing-simple h2 { font-size: min(var(--fs-xl), 5.4vw); line-height: 1.1; max-width: none; white-space: nowrap; }
.sourcing-band .sourcing-intro { margin: var(--s3) auto 0; max-width: none; }
/* Swipeable strip of real import cars */
.import-strip {
  direction: ltr; display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: var(--s6) calc(var(--gutter) * -1) 0; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  text-align: start;
}
.import-strip::-webkit-scrollbar { display: none; }
.import-mini {
  flex: none; width: clamp(150px, 42vw, 230px); scroll-snap-align: start; display: grid; gap: 4px;
  background: #141414; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-md); overflow: hidden;
  color: var(--on-ink); text-decoration: none; padding-bottom: var(--s3);
}
.import-mini img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 4px; }
.import-mini-name { font-size: var(--fs-sm); font-weight: 700; padding-inline: var(--s3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-mini:hover { border-color: rgba(255, 255, 255, .3); }
.import-slider .import-strip { scroll-behavior: smooth; }
.slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--s4); }
.slider-dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: width var(--t-med) ease, background var(--t-med) ease; }
.slider-dots span.is-on { width: 18px; background: var(--accent-on-dark); }
/* the 3-step process under the slider */
.import-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); max-width: 520px; margin: var(--s6) auto 0; }
.import-steps li { display: grid; justify-items: center; gap: var(--s2); font-size: var(--fs-sm); font-weight: 700; color: var(--on-ink); }
.import-step-icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #161616; border: 1px solid rgba(255, 255, 255, .14); color: var(--accent-on-dark);
}
.import-step-icon .icon { width: 24px; height: 24px; }
.sourcing-simple .btn { margin-top: var(--s6); }
/* Section buttons on the home page all share one size: centred, same minimum width */
.more-wrap .btn, .why-cta .btn, .sourcing-simple .btn { min-width: 240px; }
@media (max-width: 639px) {
  /* keep "Import from Japan" on one line between the stripes */
  .sourcing-band .sourcing-simple h2 { gap: 8px; }
  .sourcing-simple .title-lines::before, .sourcing-simple .title-lines::after { width: 30px; }
}
.steps { display: grid; gap: var(--s3); counter-reset: step; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); align-items: start;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-md); padding: var(--s4);
}
.sourcing-band p, .sourcing-band .steps span { color: var(--on-ink-muted); }
.steps li::before {
  content: counter(step); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800;
}
.steps strong { display: block; }
.steps span { font-size: var(--fs-sm); }

/* ---------- Find us ---------- */
.find-grid { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .find-grid { grid-template-columns: 1.5fr 1fr; } }
.map {
  min-height: 360px; border-radius: var(--r-lg); overflow: hidden; background: #dfe3de; border: 1px solid var(--line);
  position: relative;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.find-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); display: grid; gap: var(--s5); align-content: start; }
.find-row { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); }
/* icon sits level with the heading; address lines and hours share the same text size and spacing */
.find-row .icon { color: var(--ink); margin-top: 0; }
.find-row h3 { font-size: var(--fs-base); font-weight: 700; line-height: 24px; margin-bottom: 6px; }
.find-row address, .find-row .hours-list { line-height: 1.6; }
.hours-list li span { white-space: nowrap; }
/* "Visit us": address and hours as two cards side by side, each with its own button */
.visit-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: stretch; }
.visit-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s3);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0;
}
.visit-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin-bottom: 4px; }
.visit-icon .icon { width: 20px; height: 20px; }
.visit-card h3, .visit-card-h { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.visit-card .wa-glyph { width: 18px; height: 18px; flex: none; }
.visit-card address { font-size: var(--fs-base); line-height: 1.45; }
.visit-card .btn { margin-top: auto; width: 100%; min-height: 44px; padding: 10px 8px; font-size: var(--fs-sm); }
.visit-card address, .visit-card .hours-list { margin-bottom: var(--s3); }
.visit-card .hours-list { flex: 1; display: grid; align-content: center; }
.visit-card .hours-list li { display: grid; gap: 2px; justify-items: center; border: 0; }
.visit-card .hours-list li span:last-child { font-weight: 700; font-size: var(--fs-md); }
/* entrance note stands out as a tinted red callout */
.visit-card .address-note {
  margin: var(--s3) -8px 0; padding: 7px 6px; gap: 5px; border-radius: var(--r-sm); background: #FDECEC; color: var(--ink);
  font-weight: 700; font-size: 12px; white-space: nowrap; align-items: center; justify-content: center;
}
/* Phones: shorter map and tighter cards so "Visit us" fits in about one screen */
@media (max-width: 639px) {
  #find-us .map { min-height: 200px; }
  #find-us .find-grid { gap: var(--s3); }
  #find-us .section-head { margin-bottom: var(--s4); }
  #find-us .heading-pin { width: 30px; height: 30px; }
  #find-us .heading-pin .icon { width: 16px; height: 16px; }
  .visit-card { padding: var(--s3) var(--s3); gap: 4px; }
  .visit-icon { width: 32px; height: 32px; margin-bottom: 2px; }
  .visit-icon .icon { width: 17px; height: 17px; }
  .visit-card address { font-size: var(--fs-sm); }
  .visit-card address, .visit-card .hours-list { margin-bottom: var(--s2); }
  .visit-card .address-note { margin-top: var(--s2); }
}
.visit-card .address-note .icon { color: var(--accent); width: 13px; height: 13px; margin-top: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: var(--s4); padding: 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.hours-list li:last-child { border-bottom: 0; }
.find-actions { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-muted); font-size: var(--fs-sm); }
.site-footer a { color: var(--on-ink); }
/* Compact footer, logo on the left.
   Phones: logo left with the contact buttons beside it, then info, links and legal underneath.
   Wider screens: logo in its own column on the left, everything else stacked to its right. */
.footer-compact {
  display: grid; gap: var(--s4) var(--s5); padding-block: var(--s6) var(--s4); text-align: start; align-items: center;
  grid-template-columns: auto 1fr; grid-template-areas: "logo contact" "info info" "nav nav" "legal legal";
}
.footer-compact > a:first-child { grid-area: logo; }
.footer-contact { grid-area: contact; justify-self: end; }
.footer-info { grid-area: info; text-align: center; }
.footer-nav { grid-area: nav; }
.footer-legal { grid-area: legal; }
.footer-logo { width: 120px; height: auto; display: block; }
@media (min-width: 640px) {
  .footer-compact { grid-template-columns: auto 1fr; grid-template-areas: "logo contact" "logo info" "logo nav" "legal legal"; gap: var(--s3) var(--s7); }
  /* the stack to the right of the logo is centred: buttons, info line and links */
  .footer-contact { justify-self: center; }
  .footer-nav { justify-content: center; }
  .footer-logo { width: 170px; }
}
/* Computers: an empty column on the right balances the logo, so the stack sits in the middle of the page */
@media (min-width: 1024px) {
  .footer-compact { grid-template-columns: 1fr auto 1fr; grid-template-areas: "logo contact ." "logo info ." "logo nav ." "legal legal legal"; }
  .footer-compact > a:first-child { justify-self: start; }
}
.footer-contact { display: flex; gap: var(--s3); }
.footer-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.footer-btn:hover { border-color: #fff; }
.footer-btn .icon { width: 20px; height: 20px; }
.footer-btn .wa-glyph { width: 20px; height: 20px; }
.tt-glyph {
  display: block; width: 19px; height: 19px; background: #fff;
  -webkit-mask: url(https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/tiktok.svg) center / contain no-repeat;
  mask: url(https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/tiktok.svg) center / contain no-repeat;
}
.ig-glyph {
  -webkit-mask-image: url(https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/instagram.svg);
  mask-image: url(https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/instagram.svg);
}
.footer-contact { flex-wrap: wrap; justify-content: center; }
@media (max-width: 399px) { .footer-contact { gap: 6px; } .footer-btn { width: 40px; height: 40px; } }
[data-wa-submit] .wa-glyph { width: 20px; height: 20px; flex: none; }
.footer-btn--call { background: var(--accent); border-color: var(--accent); }
.footer-btn--call:hover { background: #B8080F; border-color: #B8080F; }
.footer-info { line-height: 1.6; }
.footer-info a { text-decoration: none; }
.footer-info a:hover { text-decoration: underline; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px var(--s5); }
.footer-nav a { font-weight: 700; text-decoration: none; padding: 6px 0; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal { width: 100%; text-align: center; border-top: 1px solid rgba(246, 246, 244, .12); padding-top: var(--s4); font-size: 12px; color: rgba(237, 237, 237, .6); }
/* "Website designed by Ace Site Designs" glows softly, gently pulsing (steady glow for people who turn off motion).
   Credit removed from the footer for now (owner's request); to bring it back, add inside .footer-legal in js/main.js:
   '<span class="footer-credit">Website designed by <b>Ace Site Designs</b></span>' */
.footer-credit {
  display: block; margin-top: 8px; font-size: 11px; color: rgba(255, 255, 255, .85);
  text-shadow: 0 0 6px rgba(255, 255, 255, .55), 0 0 14px rgba(255, 59, 71, .55), 0 0 26px rgba(255, 59, 71, .3);
  animation: credit-glow 3s ease-in-out infinite;
}
.footer-credit b { color: #fff; font-weight: 700; }
@keyframes credit-glow {
  0%, 100% { text-shadow: 0 0 6px rgba(255, 255, 255, .45), 0 0 12px rgba(255, 59, 71, .4), 0 0 22px rgba(255, 59, 71, .2); }
  50% { text-shadow: 0 0 8px rgba(255, 255, 255, .8), 0 0 18px rgba(255, 59, 71, .75), 0 0 34px rgba(255, 59, 71, .45); }
}
@media (prefers-reduced-motion: reduce) { .footer-credit { animation: none; } }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: var(--fs-sm); }
/* enquiry form labels centred over their boxes, in line with the centred button and note */
.form-card .field > label { text-align: center; }
/* the chosen option in form dropdowns is centred too (equal padding both sides so the arrow doesn't push it off-centre) */
.form-card .select select { text-align: center; text-align-last: center; padding-inline: 40px; }
.req { color: var(--danger); }
.input, .select select, textarea.input {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: 16px; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
textarea.input { min-height: 120px; resize: vertical; }
.input:hover, .select select:hover { border-color: var(--ink-3); }
.input:focus, .select select:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(30, 86, 214, .25); }
.input[aria-invalid="true"], .select select[aria-invalid="true"] { border-color: var(--danger); }
.select { position: relative; }
.select select { -webkit-appearance: none; appearance: none; padding-inline-end: 40px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select select:disabled { opacity: .5; cursor: not-allowed; }
.field-error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.field-error:empty { display: none; }
.hint { color: var(--muted); font-size: 13px; }
.form-grid { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
/* short sourcing form: Make + Model, Year + Name side by side even on phones */
.form-grid--pairs { grid-template-columns: 1fr 1fr; gap: var(--s3); }
.form-grid--pairs .span-2 { grid-column: 1 / -1; }
.form-grid--pairs .input { min-width: 0; text-align: center; }
#car-request .section-h, #iva-request .section-h { text-align: center; }
.iva-form { width: 100%; max-width: 560px; margin-top: var(--s2); color: var(--text); text-align: start; display: grid; gap: var(--s4); }
/* Fill-in-the-gaps sentence form: a written sentence with underlined blanks to type into */
.sentence-form { font-size: var(--fs-md); line-height: 2.3; text-align: center; color: var(--ink); }
.sentence-form .gap { display: inline; }
.gap-input {
  display: inline-block; width: 6.5em; padding: 2px 4px; margin: 0 2px; vertical-align: baseline;
  border: 0; border-bottom: 2px solid var(--accent); border-radius: 0; background: #FDF3F3;
  font: inherit; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.5;
}
.gap-input--year { width: 4em; -moz-appearance: textfield; }
.gap-input--year::-webkit-outer-spin-button, .gap-input--year::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gap-input::placeholder { color: #B9A3A3; font-weight: 600; }
.gap-input:focus { outline: none; background: #FBE3E3; border-bottom-color: var(--ink); }
.gap-input[aria-invalid="true"] { background: #FBD9D9; border-bottom-color: var(--danger); }
.sentence-form .field-error { display: none; } /* the highlighted gap plus the message under the sentence is enough */
.form-status { padding: 0; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-success { background: var(--ok-bg); color: var(--ok); padding: var(--s3) var(--s4); border-radius: var(--r-sm); }
.form-status.is-error { background: var(--danger-bg); color: var(--danger); padding: var(--s3) var(--s4); border-radius: var(--r-sm); }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3.5vw, 40px); }
.privacy-note { font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding-block: clamp(32px, 5vw, 64px) var(--s5); }
.page-head h1 { font-size: var(--fs-xl); font-weight: 800; font-stretch: 125%; }
.page-head p { color: var(--muted); margin-top: var(--s3); max-width: 60ch; font-size: var(--fs-md); }
/* "Cars we can import": always one line between the stripes, shrinking on narrow phones */
.import-title { font-size: min(var(--fs-xl), 5.6vw); white-space: nowrap; max-width: none; }
@media (max-width: 639px) { .import-title { gap: 8px; } .import-title::before, .import-title::after { width: 30px; } }
/* stocklist heading: centred with the slanted red stripes, like the home page headings */
.page-head--center { text-align: center; }
.page-head--center p { margin-inline: auto; margin-top: var(--s2); }

/* ---------- Stocklist ---------- */
.stock-layout { display: grid; gap: var(--s6); padding-bottom: var(--section); }
@media (min-width: 1024px) { .stock-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.filter-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (min-width: 1024px) { .filter-panel { position: sticky; top: 88px; max-height: calc(100dvh - 104px); overflow: auto; overscroll-behavior: contain; } }
.filter-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.filter-head h2 { font-size: var(--fs-md); font-weight: 800; font-stretch: 112%; }
.filter-close { display: none; }
.filter-fields { padding: var(--s2) var(--s5) var(--s5); }
.filter-block { padding-block: var(--s4); border-bottom: 1px solid var(--line); display: grid; gap: var(--s2); }
.filter-block:last-child { border-bottom: 0; }
.filter-label { font-weight: 800; font-size: var(--fs-sm); margin-bottom: 2px; padding: 0; }
.search-input { position: relative; }
.search-input .icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-input input {
  width: 100%; min-height: 48px; padding-block: 10px; padding-inline: 42px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); font-size: 16px;
}
.search-input input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(30, 86, 214, .25); }
.check-list { display: grid; gap: 2px; }
.check { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; border-radius: 6px; padding: 0 6px; margin-inline: -6px; }
.check:hover { background: var(--paper); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
  width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 5px; display: grid; place-items: center;
  background: #fff; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.check-box .icon { width: 14px; height: 14px; color: #fff; stroke-width: 3; opacity: 0; transform: scale(.6); transition: all var(--t-fast) var(--ease-out); }
.check input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check-box .icon { opacity: 1; transform: none; }
.check input:focus-visible + .check-box { outline: 3px solid var(--signal); outline-offset: 2px; }
.check-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.check.is-empty { opacity: .45; }
.toggle { display: flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; font-weight: 600; font-size: var(--fs-sm); position: relative; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track { width: 44px; height: 26px; border-radius: 13px; background: var(--line-strong); position: relative; flex: none; transition: background-color var(--t-med) ease; }
.toggle-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--t-med) var(--ease-out);
}
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(18px); background: #fff; }
.toggle input:focus-visible + .toggle-track { outline: 3px solid var(--signal); outline-offset: 2px; }
.filter-foot { display: none; }

.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.result-count { font-weight: 800; font-size: var(--fs-md); margin-inline-end: auto; }
.result-count:focus { outline: none; }
.sort-field { display: flex; align-items: center; gap: var(--s2); }
.sort-field label { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.sort-field .select select { min-height: 44px; }
.filter-open { display: none; position: relative; }
.filter-badge { background: var(--accent); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; font-size: 12px; display: inline-grid; place-items: center; padding: 0 5px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-block: 6px; padding-inline: 14px 10px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); border: 0; font-size: var(--fs-sm); font-weight: 600;
}
.chip .icon { width: 16px; height: 16px; }
.chip:hover { background: var(--ink-3); }
.chip--clear { background: transparent; color: var(--ink); text-decoration: underline; padding-inline: 10px; }
.chip--clear:hover { background: transparent; text-decoration-thickness: 2px; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: var(--s8) var(--s5); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty-state h2, .empty-state h1 { font-size: var(--fs-lg); font-weight: 800; font-stretch: 112%; }
.empty-state p { color: var(--muted); margin: var(--s3) auto 0; max-width: 46ch; }
.empty-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-top: var(--s5); }
.empty-state--page { margin-block: var(--s8); }
.drawer-scrim { display: none; }

@media (max-width: 1023px) {
  .filter-open { display: inline-flex; }
  .filter-panel {
    position: fixed; inset: 0 auto 0 0; width: min(92vw, 400px); z-index: var(--z-drawer); border-radius: 0 var(--r-lg) var(--r-lg) 0;
    display: flex; flex-direction: column; transform: translateX(-102%); visibility: hidden;
    transition: transform var(--t-med) var(--ease-in), visibility 0s linear var(--t-med);
  }
  .filter-panel.is-open { transform: none; visibility: visible; transition: transform 340ms var(--ease-out), visibility 0s; }
  .filter-panel form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  .filter-fields { overflow: auto; flex: 1; overscroll-behavior: contain; }
  .filter-close { display: inline-grid; }
  .filter-foot { display: block; padding: var(--s4) var(--s5) max(var(--s4), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none; transition: opacity var(--t-med) ease;
  }
  body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }
}

/* ---------- Vehicle page ---------- */
/* "Back to stocklist" pill at the top of the car page */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; margin-block: var(--s4);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
}
.back-btn:hover { border-color: var(--ink); }
.back-btn .icon { width: 17px; height: 17px; }
[dir="rtl"] .back-btn .icon { transform: scaleX(-1); }
.vehicle-layout { display: grid; gap: var(--s6); padding-bottom: var(--s8); grid-template-columns: minmax(0, 1fr); }
.vehicle-layout > * { min-width: 0; }
@media (min-width: 1024px) {
  .vehicle-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "gallery summary" "details summary"; align-items: start; }
  .vehicle-gallery { grid-area: gallery; }
  .vehicle-summary { grid-area: summary; position: sticky; top: 88px; }
  .vehicle-details { grid-area: details; }
}
.gallery-main { border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(180deg, #EEF0EC, #E0E4DF); aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main img.swap { animation: fade .3s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.gallery-main--art .car-art { width: 86%; }
.photo-note { position: absolute; bottom: 14px; left: 14px; right: 14px; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
/* arrows and "1 / 7" counter on the main photo */
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.gallery-nav:hover { background: rgba(0, 0, 0, .8); }
.gallery-nav .icon { width: 20px; height: 20px; }
.gallery-nav--prev { left: 12px; }
.gallery-nav--next { right: 12px; }
.gallery-nav--next .icon { transform: scaleX(-1); }
.gallery-count { position: absolute; right: 12px; bottom: 12px; background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--fs-sm); font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.gallery-thumbs { display: flex; gap: var(--s2); margin-top: var(--s3); overflow-x: auto; padding-bottom: 4px; position: relative; }
.gallery-thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; width: 96px; flex: none; background: none; }
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.vehicle-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); display: grid; gap: var(--s4); }
.summary-top { display: flex; align-items: center; gap: var(--s3); }
/* Share button on the car page, top right of the summary card */
.share-btn {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
}
.share-btn:hover { border-color: var(--ink); }
.share-btn .icon { width: 17px; height: 17px; }
.vehicle-title { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); font-weight: 800; font-stretch: 125%; line-height: 1.05; text-align: center; }
.vehicle-variant { color: var(--muted); font-size: var(--fs-md); margin-top: calc(var(--s3) * -1); }
/* "More details" on the car page: white icon tiles, two per row */
.detail-tiles-h { text-align: center; }
.detail-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.detail-tiles > div {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px;
}
.detail-tiles .icon { width: 22px; height: 22px; color: var(--accent); flex: none; }
.detail-tiles span { display: flex; flex-direction: column-reverse; min-width: 0; }
.detail-tiles dt { font-size: 12px; color: var(--muted); }
.detail-tiles dd { margin: 0; font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (min-width: 1024px) { .detail-tiles { grid-template-columns: repeat(3, 1fr); } }
/* Spec bar on the car page: labelled columns between thin lines */
.spec-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-block: 1px solid var(--line); }
.spec-bar > div { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; gap: 2px; padding: var(--s3) 4px; min-width: 0; }
.spec-bar > div + div { border-inline-start: 1px solid var(--line); }
.spec-bar dd { margin: 0; font-weight: 800; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.spec-bar dt { font-size: 12px; color: var(--muted); }
@media (max-width: 399px) { .spec-bar dd { font-size: var(--fs-sm); } }
.summary-price { padding-top: var(--s2); }
.summary-actions { display: grid; gap: var(--s3); }
.summary-note { font-size: 13px; color: var(--muted); }
/* "Interested in this car?" block, shown when a car has no price */
.summary-ask { padding-top: var(--s2); text-align: center; } /* the spec bar's bottom line already separates it */
/* upright (not slanted) so its left edge lines up exactly with the line underneath */
.summary-ask-title { font-size: var(--fs-lg); font-weight: 800; line-height: 1.15; }
.summary-ask p { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.summary-actions .wa-glyph { width: 20px; height: 20px; }
.summary-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--s3); font-size: var(--fs-sm); font-weight: 600; }
.summary-ticks li { display: flex; align-items: center; gap: 6px; }
.summary-ticks .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.vehicle-details { display: grid; gap: var(--s7); }
.lead-text { font-size: var(--fs-md); max-width: 62ch; }
.spec-table { display: grid; grid-template-columns: 1fr; margin: 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .spec-table { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } }
.spec-table div { display: flex; justify-content: space-between; gap: var(--s4); padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec-table dt { color: var(--muted); }
.spec-table dd { margin: 0; font-weight: 700; text-align: end; }
.feature-list { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.feature-list li { display: flex; gap: var(--s3); align-items: flex-start; }
.feature-list .icon { color: var(--ok); margin-top: 2px; }
.enquire-grid { display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .enquire-grid { grid-template-columns: 1fr 1.6fr; } }
/* Phones and tablets: heading, intro and ticks centred above the form */
@media (max-width: 1023px) {
  .enquire-grid > div:first-child { text-align: center; }
  .enquire-grid .section-title, .enquire-grid .section-intro { margin-inline: auto; }
  .enquire-grid .tick-list { width: fit-content; margin-inline: auto; text-align: start; }
}

/* ---------- Sourcing page ---------- */
.sourcing-hero { background: var(--ink); color: var(--on-ink); }
.sourcing-hero .page-head p { color: var(--on-ink-muted); }
.sourcing-layout { display: grid; gap: var(--s5); padding-block: var(--section); }
/* "Can't see it? We'll find it": full-width black section under the import list */
.request-band { background: var(--ink); color: var(--on-ink); }
/* IVA page */
.iva-intro { display: grid; gap: var(--s4); padding-bottom: var(--s7); text-align: center; }
.iva-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5) var(--s4);
  display: grid; justify-items: center; gap: var(--s2); max-width: 640px; margin-inline: auto;
}
.iva-card h2, .iva-h { font-size: var(--fs-lg); font-weight: 800; }
.iva-card p { color: var(--muted); line-height: 1.6; }
.iva-card strong, .iva-tile strong { color: var(--ink); }
.iva-h { margin-top: var(--s3); }
.iva-who { padding-top: var(--s7); }
.iva-who .iva-h { margin-top: 0; }
.iva-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); max-width: 640px; margin-inline: auto; width: 100%; }
.iva-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4) var(--s3);
  display: grid; justify-items: center; align-content: start; gap: var(--s2);
}
.iva-tile p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.iva-badge { background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.iva-badge--dark { background: var(--ink); }
.iva-note { font-size: 13px; color: var(--muted); }
.iva-note a { color: var(--ink); }
.iva-cta { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding-block: var(--s7); }
.iva-cta .section-title { color: var(--on-ink); }
.iva-cta .request-intro { margin-top: 0; }
.iva-cta .btn { min-width: 240px; }
.iva-cta .wa-glyph { width: 18px; height: 18px; }
/* "How it works": its own grey band between the import list and the black request section */
.how-band { background: #E7E7E3; margin-top: var(--s4); position: relative; }
.how-band::before { /* faded black line on top, like "Our promise" on the home page */
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ink) 50%, transparent);
}
.how-inner { display: grid; gap: var(--s5); text-align: center; padding-block: var(--s7); }
.how-inner .section-title { margin-inline: auto; }
.request-band .form-card { color: var(--text); } /* the white form keeps dark text */
.section.import-section, .import-section .stock-layout { padding-bottom: 0; }
@media (min-width: 1024px) { .sourcing-layout { grid-template-columns: 1fr 1.5fr; align-items: start; } }
.sourcing-side { display: grid; gap: var(--s5); }
.sourcing-side .steps li { background: var(--surface); border: 1px solid var(--line); }
/* Request section (inside the black band): centred heading and intro, four red number circles in one row */
.sourcing-side { text-align: center; color: var(--on-ink); gap: var(--s4); }
@media (max-width: 399px) { .how-steps span { font-size: 11px; } .how-steps { gap: 2px; } }
.sourcing-side .section-title { color: var(--on-ink); margin-inline: auto; }
.request-intro { color: rgba(237, 237, 237, .75); font-size: var(--fs-md); margin-top: calc(var(--s2) - var(--s4)); }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: how; }
.how-steps li { counter-increment: how; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.how-steps li::before {
  content: counter(how); width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); margin-bottom: 6px;
}
.how-steps strong { font-size: 13px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.how-steps span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.how-note { font-size: 13px; color: var(--muted); max-width: 40ch; margin-inline: auto; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--z-toast);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--on-ink);
  padding: 12px 18px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-2); transition: opacity var(--t-med) ease, transform var(--t-med) var(--ease-out);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Floating Call + WhatsApp bar (phones only) ---------- */
.float-bar { display: none; }
@media (max-width: 639px) {
  .float-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--s2) var(--gutter) max(var(--s2), env(safe-area-inset-bottom));
    background: rgba(246, 246, 244, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line); opacity: 0; transition: opacity .25s ease;
  }
  .float-bar.is-off { pointer-events: none; }
  .float-bar .btn { min-height: 48px; padding-inline: 10px; gap: 8px; }
  .float-bar .icon, .float-bar .wa-glyph { width: 18px; height: 18px; flex: none; }
}
@media print { .float-bar { display: none !important; } }

/* ---------- Headline style (matches the logo lettering) ---------- */
.hero h1, .section-title, .why-statement, .sourcing-band h2, .page-head h1, .vehicle-title, .empty-state h1 { font-style: italic; font-weight: 900; }
[dir="rtl"] .hero h1, [dir="rtl"] .section-title, [dir="rtl"] .why-statement, [dir="rtl"] .sourcing-band h2, [dir="rtl"] .page-head h1, [dir="rtl"] .vehicle-title { font-style: normal; }

/* ---------- Language switcher ---------- */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font-weight: 700; font-size: var(--fs-sm);
}
.lang-btn:hover { border-color: var(--ink); }
.site-header .lang-btn { color: var(--on-ink); border-color: rgba(255, 255, 255, .3); }
.site-header .lang-btn:hover { border-color: #fff; }
.lang-btn .icon { width: 18px; height: 18px; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 50; min-width: 168px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  display: grid; gap: 2px; animation: menu-in var(--t-med) var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang-opt {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text); text-align: start; font-weight: 600; font-size: var(--fs-base);
}
.lang-opt:hover { background: var(--paper); }
.lang-opt[aria-current="true"] { background: var(--ink); color: #fff; }
.mobile-langs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.lang-chip {
  min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(246, 246, 244, .35);
  background: transparent; color: var(--on-ink); font-weight: 700;
}
.lang-chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Phones: language button shows the globe only ("saved cars" lives in the menu) */
@media (max-width: 639px) {
  .lang-btn { width: 44px; padding: 0; justify-content: center; }
  .lang-btn span { display: none; }
}
@media (max-width: 399px) { .lang-btn { width: 40px; height: 40px; } }

/* ---------- Arabic / right-to-left ---------- */
/* Number plates, phone numbers and prices always read left to right */
.plate, .price { direction: ltr; unicode-bidi: isolate; }

[dir="rtl"] { --font: "Archivo", "Noto Kufi Arabic", system-ui, sans-serif; }
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .why-statement, [dir="rtl"] .sourcing-band h2 { line-height: 1.4; letter-spacing: 0; }
[dir="rtl"] .hero h1 { line-height: 1.3; max-width: 16ch; }
[dir="rtl"] .main-nav a::after { transform-origin: right; }
/* plates are forced left-to-right, so position them with physical sides */
.plate--tag { inset-inline-start: auto; left: 12px; }
[dir="rtl"] .plate--tag { left: auto; right: 12px; }
[dir="rtl"] .plate--lg { right: auto; }
[dir="rtl"] .search-input input { padding-inline: 42px 12px; }
[dir="rtl"] .toggle-track::after { left: auto; right: 3px; }
[dir="rtl"] .toggle input:checked + .toggle-track::after { transform: translateX(-18px); }
@media (max-width: 1023px) {
  [dir="rtl"] .filter-panel { inset: 0 0 0 auto; border-radius: var(--r-lg) 0 0 var(--r-lg); transform: translateX(102%); }
  [dir="rtl"] .filter-panel.is-open { transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .hero-copy > *, .js .hero-panel, .js .hero-list li { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .call-bar, .save-btn, #enquire, #similar { display: none !important; }
  body { background: #fff; }
}