/* KingStone Motors — base. All colours and steps come from tokens.css.
   Dark, fast, and photographed: the cars carry the drama, the interface
   gets out of the way. Weight is spent at the top and almost nowhere else. */

@font-face {
  font-family: 'Bicubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bicubik.otf') format('opentype');
}
/* Wix Madefor Display ships as a variable file covering 400-800 */
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/wixmadefor-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/wixmadefor-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/golos-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t17);
  line-height: 1.55;
  letter-spacing: 0;
  background: var(--base);
  color: var(--white);
}

.wrap {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

p { max-width: 70ch; }

img, video, iframe { max-width: 100%; display: block; }
img, video { height: auto; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--f-head);
  font-weight: 800;
  font-synthesis-weight: none;
  line-height: 1.15;
}
h2 { font-size: var(--t30); }

/* section header row: heading left, jump arrow right */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp3);
  margin-bottom: var(--sp4);
}
.section-head h2 { margin: 0; }
/* the accent section rule: one of the few places the accent exists */
.section-head h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin-top: var(--sp2);
}
.jump {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.jump svg { width: 16px; height: 16px; }
.jump:hover {
  color: var(--base);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--white) 97%, var(--muted)) 0%,
    color-mix(in srgb, var(--white) 38%, var(--muted)) 46%,
    color-mix(in srgb, var(--white) 100%, var(--muted)) 48%,
    color-mix(in srgb, var(--white) 46%, var(--muted)) 82%,
    color-mix(in srgb, var(--white) 74%, var(--muted)) 100%
  );
  border-color: color-mix(in srgb, var(--white) 55%, var(--muted));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.page-title { font-size: var(--t40); }

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: 20px;
  top: -100px;
  z-index: 30;
  padding: var(--sp1) var(--sp2);
  background: var(--white);
  color: var(--base);
  text-decoration: none;
  font-size: var(--t13);
}
.skip:focus { top: 8px; }

/* ---------- header: two bars ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--base);
}
.site-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
}
.site-head.is-scrolled::after { opacity: 1; }

.top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 76px;
  padding-inline: 20px;
}
/* the logo bar shrinks once scrolled and returns to full size only at the
   very top. The two states are switched with hysteresis in motion.js
   (shrink past 80px, restore within 8px) so the height change cannot
   oscillate against its own trigger. */
@media (prefers-reduced-motion: no-preference) {
  .top-bar { transition: height 300ms var(--ease); }
  .logo-img { transition: height 300ms var(--ease); }
}
.site-head.is-scrolled .top-bar { height: 50px; }
.site-head.is-scrolled .top-bar .logo-img { height: 26px; }
@media (min-width: 768px) {
  .site-head.is-scrolled .top-bar .logo-img { height: 30px; }
}
@media (min-width: 768px) {
  .top-bar { padding-inline: 32px; }
}
.brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--white);
}
/* uploaded logo is dark on transparent: invert reads white on the dark ground.
   logo.png is cropped to the mark's alpha bounding box, no dead padding. */
.logo-img {
  height: 34px;
  width: auto;
  filter: invert(1);
}
@media (min-width: 768px) {
  .logo-img { height: 44px; }
}
.brand-name {
  font-family: var(--f-head);
  font-weight: 800;
  font-synthesis-weight: none;
  font-size: var(--t17);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.brand-name span { display: inline-block; }
.lang {
  grid-column: 3;
  justify-self: end;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t13);
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms;
}
.lang:hover { color: var(--white); }

.nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp2);
  padding-block: var(--sp2);
  padding-inline: var(--sp2);
  border-top: 1px solid var(--line);
}
.nav-item { display: flex; align-items: center; }
@media (min-width: 768px) {
  .nav-bar { gap: var(--sp4); }
  .nav-bar a { font-size: var(--t15); }
}
.nav-bar a {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t13);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms;
}
.nav-bar a:hover,
.nav-bar a[aria-current="page"] { color: var(--white); }

/* dropdown item: expands on hover or keyboard focus, arrow flips */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-item .chev { transition: transform 200ms var(--ease); flex: none; }
.nav-item:hover .chev,
.nav-item:focus-within .chev { transform: rotate(180deg); }
.nav-item::after {
  /* invisible bridge so the pointer can cross into the dropdown */
  content: "";
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 14px;
}
.nav-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--sp1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms, visibility 150ms, transform 200ms var(--ease);
  z-index: 25;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* narrow screens: anchor to the item's left edge so the panel cannot
   hang past the viewport margin */
@media (max-width: 860px) {
  .nav-drop { left: 0; transform: translateX(0) translateY(-4px); }
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop { transform: translateX(0) translateY(0); }
}
.nav-drop a {
  padding: var(--sp1) var(--sp2);
  border-radius: 6px;
  text-align: center;
}
.nav-drop a:hover { background: var(--line); color: var(--white); }

/* ---------- hero ---------- */

.hero {
  min-height: calc(100svh - 128px);
  display: flex;
  align-items: flex-end;
  padding-block: var(--sp6) var(--sp5);
  position: relative;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* poster and clip occupy the same box: the poster paints immediately as the
   LCP element, the video fades over it only once it is actually playing */
.hero-media > img,
.hero-media > video { position: absolute; inset: 0; }
.hero-video {
  opacity: 0;
  transition: opacity 700ms ease;
  /* stays above the poster even if the source order ever changes */
  z-index: 1;
}
.hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: var(--base);
  opacity: 0.55;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--base));
  pointer-events: none;
  z-index: 1;
  /* The fade and the copy sit over a playing video. Without their own layers
     the compositor re-rasterises this gradient and the headline's 24px
     text-shadow against every decoded frame, which reads as shimmer.
     will-change, not translateZ(0): the old hack computed to a 2D identity
     matrix here, which is a weak promotion signal, whereas will-change states
     the intent to the compositor directly. */
  will-change: transform;
}
.hero .wrap {
  position: relative;
  width: 100%;
  z-index: 2;
  will-change: transform;
}
/* the video is the only thing in the hero that actually changes per frame */
.hero-video { will-change: opacity; }

.hero h1 {
  font-size: var(--t30);
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
@media (min-width: 768px) {
  .hero h1 { font-size: var(--t53); }
}
.hero-sub {
  margin-top: var(--sp3);
  font-size: var(--t17);
  color: var(--muted);
  max-width: 44ch;
}

/* the call to action: brushed silver face, dark text; hover throws a shine
   across it and pops the button up slightly. The metal ramp is mixed from
   --white and --muted, so no colour outside the palette is introduced. */
.cta {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-top: var(--sp4);
  padding: var(--sp2) var(--sp4);
  background:
    /* corner sheen, as if a light source sits off to the upper left */
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0) 45%
    ),
    /* polished ramp: bright crown, dark shoulder, a hard specular horizon
       just below centre, then bounce light along the bottom edge */
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--white) 97%, var(--muted)) 0%,
      color-mix(in srgb, var(--white) 78%, var(--muted)) 15%,
      color-mix(in srgb, var(--white) 38%, var(--muted)) 46%,
      color-mix(in srgb, var(--white) 100%, var(--muted)) 48%,
      color-mix(in srgb, var(--white) 86%, var(--muted)) 58%,
      color-mix(in srgb, var(--white) 46%, var(--muted)) 82%,
      color-mix(in srgb, var(--white) 74%, var(--muted)) 100%
    );
  border: 1px solid color-mix(in srgb, var(--white) 55%, var(--muted));
  border-radius: 8px;
  color: var(--base);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t15);
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--white) 60%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 color-mix(in srgb, var(--muted) 70%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.45);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    color-mix(in srgb, var(--white) 55%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
}
.cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05) contrast(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 color-mix(in srgb, var(--muted) 70%, transparent),
    0 10px 22px rgba(0, 0, 0, 0.5);
}
.cta:hover::before {
  transform: translateX(120%);
  transition: transform 1100ms var(--ease);
}
.cta:active { transform: translateY(0); }
.cta-quiet {
  background: none;
  border: 1px solid var(--line);
  color: var(--white);
  text-shadow: none;
  box-shadow: none;
}
.cta-quiet:hover {
  filter: none;
  border-color: var(--muted);
  box-shadow: 0 8px 20px color-mix(in srgb, #000 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .cta, .cta::before { transition: none; }
  .cta:hover { transform: none; }
  .cta:hover::before { transform: translateX(-120%); }
  .brand-plate, .brand-plate::before { transition: none; }
  .brand-slide:hover .brand-plate { transform: none; }
  .brand-slide:hover .brand-plate::before { transform: translateX(-120%); }
}

/* ---------- image band (company intro) ---------- */

.band {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--sp6) + var(--sp5));
}
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-veil {
  position: absolute;
  inset: 0;
  background: var(--base);
  opacity: 0.66;
}
.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 1;
}
.band::before { top: 0; background: linear-gradient(to bottom, var(--base), transparent); }
.band::after { bottom: 0; background: linear-gradient(to top, var(--base), transparent); }
.band .wrap { position: relative; z-index: 2; }
.band h1, .band h2 { font-size: var(--t30); }
@media (min-width: 768px) {
  .band h1, .band h2 { font-size: var(--t40); }
}
/* light translucent panel so the copy reads over photography (no blur) */
.band-glass {
  display: inline-block;
  max-width: 700px;
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
  border-radius: 14px;
  padding: var(--sp3);
}
@media (min-width: 768px) {
  .band-glass { padding: var(--sp4); }
}
.band-line { margin-top: var(--sp3); color: var(--muted); max-width: 60ch; font-weight: 400; }
.band-line + .band-line { margin-top: var(--sp2); }
/* highlight markup kept in the copy, rendered as plain text for now */
.band-line strong { color: inherit; font-weight: 400; }

/* ---------- brand logo conveyor ---------- */

.brands-section { padding-block: var(--sp5); }
.brands-label {
  text-align: center;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t13);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp4);
}
.brands-conveyor { margin-top: 0; border-block: 0; }
.brand-track { gap: var(--sp6); align-items: center; }
/* each logo links into stock filtered to that make */
.brand-slide {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp2);
  text-decoration: none;
  color: inherit;
}
.brand-slide:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 8px;
}
/* logos keep their own colours. Several marques are drawn in black, which
   would disappear on the dark ground, so each sits on a light plate. */
.brand-plate {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 78px;
  padding: var(--sp2);
  /* smoked glass rather than a white card: a lit pane sitting just off the
     page ground, so the strip reads as part of the dark interface */
  background: color-mix(in srgb, var(--white) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  border-radius: 12px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  /* The sweep below is transform-animated, which promotes it to its own
     compositor layer. Inside an element carrying backdrop-filter, such a layer
     can escape a plain `overflow: hidden` and paint outside the plate — which
     is why the highlight showed up to the left of the logo mid-sweep, and only
     while it was moving. `contain: paint` is a hard guarantee that descendants
     never paint outside this box, and unlike clip-path it leaves the plate's
     own drop shadow on hover intact. */
  contain: paint;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 14%, transparent);
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    background-color 220ms var(--ease),
    border-color 220ms var(--ease);
}
/* the same swept highlight the buttons use, travelling across the pane */
.brand-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    color-mix(in srgb, var(--white) 32%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 1;
}
.brand-slide:hover .brand-plate::before,
.brand-slide:focus-visible .brand-plate::before {
  transform: translateX(120%);
  transition: transform 1100ms var(--ease);
}
.brand-slide:hover .brand-plate,
.brand-slide:focus-visible .brand-plate {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--white) 12%, transparent);
  border-color: color-mix(in srgb, var(--white) 22%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 20%, transparent),
    0 10px 22px rgba(0, 0, 0, 0.5);
}
/* the strip holds still while a logo is being read, and resumes on release.
   :has scopes this to the logos themselves, so the gaps between them do not
   stop it. Browsers without :has simply keep scrolling. */
@media (prefers-reduced-motion: no-preference) {
  .brand-track:has(.brand-slide:hover),
  .brand-track:has(.brand-slide:focus-visible) { animation-play-state: paused; }
}
.brand-slide img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
}
/* Marks drawn in black vanish on smoked glass. These are monochrome by nature
   (Audi's rings, the Ford oval, the Jaguar leaper), so a white silhouette
   loses nothing and reads cleanly. Colour marks are left exactly as they are. */
.brand-plate.is-lighten img {
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
.brand-slide:hover .brand-plate.is-lighten img { opacity: 1; }
.brand-slide span {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t11);
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* ---------- listing detail page ---------- */

.listing-grid {
  margin-top: var(--sp4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp5);
}
.listing-main, .side-panel { min-width: 0; }
@media (min-width: 1024px) {
  .listing-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
}

.gal-main {
  /* No fixed ratio here. This is a single hero image with no grid to keep
     level, so it takes its own shape: a portrait phone shot displays tall
     instead of becoming a narrow strip inside a 16:9 letterbox. Height is
     capped so a tall photo cannot push the specs panel off the screen. */
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 68vh;
  margin-inline: auto;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--raised);
}
.gal-thumbs {
  margin-top: var(--sp2);
  display: flex;
  gap: var(--sp1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp1);
}
.gal-thumb {
  flex: none;
  width: 110px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--raised);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 150ms, opacity 150ms;
  opacity: 0.7;
}
.gal-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; display: block; background: var(--base); }
.gal-thumb:hover { opacity: 1; }
.gal-thumb.is-current { border-color: var(--accent); opacity: 1; }

.listing-desc { margin-top: var(--sp4); color: var(--muted); }
.listing-desc p { color: var(--muted); max-width: 62ch; }

.listing-video { margin-top: var(--sp5); }
.listing-video h2 { font-size: var(--t23); margin-bottom: var(--sp3); }
.listing-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
}

/* sticky side panel: sticks, and motion.js lets it trail the scroll */
.side-panel {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--sp4);
  will-change: transform;
}
@media (min-width: 1024px) {
  .side-panel { position: sticky; top: 140px; }
}
.panel-price {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: var(--t30);
  padding-bottom: var(--sp3);
  border-bottom: 1px solid var(--line);
}
.panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp2);
  padding-block: var(--sp3);
  border-bottom: 1px solid var(--line);
}
.panel-cell { text-align: center; }
.panel-value {
  display: block;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t17);
}
.panel-label {
  display: block;
  margin-top: 4px;
  font-size: var(--t11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-perf-label {
  margin-top: var(--sp3);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.panel-perf-label + .panel-grid { padding-top: var(--sp2); }
.panel-details {
  padding-block: var(--sp2) var(--sp3);
  border-bottom: 1px solid var(--line);
}
.panel-detail {
  display: flex;
  justify-content: space-between;
  gap: var(--sp2);
  padding-block: 6px;
  font-size: var(--t15);
}
.panel-detail + .panel-detail { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.panel-detail dt { color: var(--muted); }
.panel-detail dd { font-family: var(--f-disp); font-weight: 500; text-align: right; }

.panel-actions {
  margin-top: var(--sp3);
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}
.panel-cta { margin-top: 0; text-align: center; }
.panel-row {
  color: var(--muted);
  font-size: var(--t15);
  text-decoration: none;
  transition: color 150ms;
}
.panel-row:hover { color: var(--white); }

/* mobile: fixed bottom bar with price and contacts */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp2);
  padding: var(--sp2) var(--sp3);
  padding-bottom: calc(var(--sp2) + env(safe-area-inset-bottom, 0px));
  background: var(--raised);
  border-top: 1px solid var(--line);
}
.mobile-bar-price {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: var(--t23);
  white-space: nowrap;
}
.mobile-bar-actions { display: flex; gap: var(--sp1); }
.mobile-bar .cta { margin-top: 0; padding: var(--sp1) var(--sp2); }
@media (min-width: 1024px) {
  .mobile-bar { display: none; }
}
/* keep the page end reachable above the fixed bar on mobile */
@media (max-width: 1023px) {
  body:has(.mobile-bar) .site-foot { padding-bottom: calc(var(--sp5) + 84px); }
}

/* ---------- in-stock carousel: listing cards, steps one slide every 2s ---------- */

.stock-section { padding-block: var(--sp6) var(--sp5); }
.stock {
  margin-top: var(--sp4);
  display: flex;
  gap: var(--sp3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--sp1);
  scrollbar-width: none;
}
.stock::-webkit-scrollbar { display: none; }
.stock-card {
  flex: none;
  width: min(78vw, 340px);
  scroll-snap-align: start;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms;
}
a.stock-card:hover { border-color: var(--muted); }
.stock-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* contain: a cropped listing shot halves the car. A direct img can carry the
     ratio itself, unlike the catalogue card where the ratio lives on a wrapper. */
  object-fit: contain;
  background: var(--base);
}
@media (prefers-reduced-motion: no-preference) {
  .stock-card img { transition: transform 450ms var(--ease); }
  .stock-card:hover img { transform: scale(1.06); }
}
.stock-info { padding: var(--sp2) var(--sp3) var(--sp3); }
.stock-name {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t17);
}
.stock-spec { margin-top: 4px; color: var(--muted); font-size: var(--t13); }
.stock-price {
  margin-top: var(--sp2);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t23);
}
.stock-tag {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--t11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- export-country ticker (continuous, slow) ---------- */

.ticker {
  margin-top: var(--sp5);
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--sp2);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: var(--sp4);
  width: max-content;
}
.ticker-track span {
  white-space: nowrap;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t15);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker-track .tick-dot { color: var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: convey 34s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
}

/* ---------- gallery conveyor (continuous, display only) ---------- */

.conveyor-section { padding-block: var(--sp6) var(--sp5); }
.conveyor {
  margin-top: var(--sp4);
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--sp3);
}
.conveyor-track {
  display: flex;
  gap: var(--sp2);
  width: max-content;
}
.conveyor-card {
  width: min(72vw, 520px);
  flex: none;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.conveyor-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--base);
}
@media (prefers-reduced-motion: no-preference) {
  .conveyor-track { animation: convey 48s linear infinite; }
  @keyframes convey {
    to { transform: translateX(-50%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .conveyor { overflow-x: auto; }
}

/* ---------- sections ---------- */

.section { padding-block: var(--sp6); }
.section > .wrap > h2 { margin-bottom: var(--sp4); }
.section-lead { margin-top: calc(-1 * var(--sp3)); margin-bottom: var(--sp4); color: var(--muted); }
/* A lead under a page title, not under a section head. section-lead carries a
   negative top margin to tuck beneath a .section-head, which on a bare
   .page-title dragged the text straight over the heading. */
.page-lead {
  margin-top: var(--sp3);
  max-width: 62ch;
  color: var(--muted);
}

.on-surface { background: var(--raised); }

/* ---------- catalogue / specs (inner pages) ---------- */

.vehicle {
  display: grid;
  gap: var(--sp4);
  padding-block: var(--sp3);
}
/* the filter hides cars with the hidden attribute, and an author `display`
   always beats the UA rule behind it, so it has to be restated here */
.vehicle[hidden] { display: none; }
.vehicle + .vehicle {
  border-top: 1px solid var(--line);
  margin-top: var(--sp4);
  padding-top: var(--sp5);
}
@media (min-width: 900px) {
  .vehicle { grid-template-columns: 1fr 1fr; gap: var(--sp5); }
  .vehicle-head { position: sticky; top: 132px; align-self: start; }
  /* a listing row reads photo | name | specs; the car page keeps two columns */
  .vehicle-card { grid-template-columns: 1.1fr 1fr 1fr; align-items: start; }
  .vehicle-card .vehicle-head { position: static; }
}

.model {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t30);
  line-height: 1.2;
}
a.model-link { text-decoration: none; }
.model-num { font-family: inherit; }
.fol-num { font-family: inherit; }

.spec { max-width: 70ch; }
.spec-row {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: var(--sp3);
  align-items: baseline;
  padding-block: var(--sp2);
}
.spec-row + .spec-row { border-top: 1px solid var(--line); }
/* narrow screens: the fixed label column squeezes long values, so stack */
@media (max-width: 520px) {
  .spec-row { grid-template-columns: 1fr; gap: 2px; }
}
.spec-row dt { color: var(--muted); font-size: var(--t13); font-weight: 500; }
.spec-row dd { color: var(--white); min-width: 0; overflow-wrap: anywhere; }
.price { font-family: var(--f-disp); font-weight: 600; font-size: var(--t23); }

.vehicle-note { margin-top: var(--sp3); color: var(--muted); }
/* price status carries the accent */
.vehicle-status {
  margin-top: var(--sp1);
  font-family: var(--f-disp);
  font-weight: 600;
  color: var(--accent);
  font-size: var(--t13);
}

.empty-state { color: var(--muted); max-width: 70ch; }

/* ---------- contact sheet / frames ---------- */

.sheet {
  display: flex;
  gap: var(--sp2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
@media (min-width: 768px) {
  .sheet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }
}
.frame { flex: none; width: 78%; scroll-snap-align: start; }
@media (min-width: 768px) { .frame { width: auto; } }
.frame img { width: 100%; }
.frame-meta {
  margin-top: var(--sp1);
  display: flex;
  gap: var(--sp2);
  font-size: var(--t11);
  color: var(--muted);
}
.frame-title { margin-top: var(--sp1); font-size: var(--t15); color: var(--white); }
a.frame-link { text-decoration: none; display: block; }

/* ---------- video embeds ---------- */

.embed-grid {
  display: grid;
  gap: var(--sp3);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .embed-grid { grid-template-columns: repeat(3, 1fr); }
}
.embed-slot {
  aspect-ratio: 16 / 9;
  background: var(--raised);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp3);
  color: var(--muted);
  font-size: var(--t13);
}
.embed-grid iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: var(--raised);
}

/* ---------- lists (services on /about, posts) ---------- */

.service-list {
  list-style: none;
  max-width: 70ch;
  counter-reset: svc;
}
.service-list li {
  counter-increment: svc;
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: var(--sp3);
  padding-block: var(--sp3);
}
.service-list li + li { border-top: 1px solid var(--line); }
.service-list li::before {
  content: counter(svc);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t17);
  color: var(--muted);
}

/* cover thumbnail beside a headline in a post list */
.post-thumb {
  display: block;
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--raised);
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-thumb-lg { width: 168px; border-radius: 12px; }
.post-list li { display: flex; gap: var(--sp3); align-items: flex-start; }
.post-line { display: block; min-width: 0; }
.post-text { min-width: 0; }

.post-list { list-style: none; max-width: 70ch; }
.post-list li { padding-block: var(--sp2); }
.post-list li + li { border-top: 1px solid var(--line); }
.post-list .post-date { color: var(--muted); font-size: var(--t13); margin-left: var(--sp2); }

/* the index carries a teaser under each headline; the home feed stays a
   one-line list, so only the full listing opens up */
.post-list-full li { padding-block: var(--sp3); }
.post-list-full .post-link {
  font-size: var(--t23);
  display: inline-block;
}
.post-list-full .post-date { margin-left: 0; display: block; margin-top: var(--sp1); }
.post-list-full .post-excerpt {
  margin-top: var(--sp2);
  color: var(--muted);
  max-width: 62ch;
}

.archive-scroll { overflow-x: auto; }
.archive-table { width: 100%; border-collapse: collapse; }
.archive-table th, .archive-table td { text-align: left; padding: var(--sp2) var(--sp2) var(--sp2) 0; }
.archive-table th { color: var(--muted); font-size: var(--t13); font-weight: 500; }
.archive-table tbody tr + tr td { border-top: 1px solid var(--line); }
.archive-table td { font-weight: 500; }

.identity-payment { margin-top: var(--sp4); color: var(--muted); }

.prose { max-width: 70ch; }
.prose p + p { margin-top: var(--sp3); }

/* ---------- blog post: text column with images placed anywhere ---------- */

.post { max-width: 100%; }
.post > p,
.post > h2,
.post > h3,
.post > blockquote { max-width: 68ch; }
.post > p { margin-top: var(--sp3); color: var(--muted); }
.post > h2 { font-size: var(--t30); margin-top: var(--sp5); }
.post > h3 { font-size: var(--t23); margin-top: var(--sp4); }
.post > blockquote {
  margin-top: var(--sp4);
  padding-left: var(--sp3);
  border-left: 2px solid var(--accent);
  color: var(--white);
}
.post strong { color: var(--white); font-weight: 600; }
.post-date-line {
  margin-top: var(--sp2);
  color: var(--muted);
  font-size: var(--t13);
}
.post-fig { margin-top: var(--sp4); max-width: 68ch; }
.post-fig img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.post-fig figcaption {
  margin-top: var(--sp1);
  font-size: var(--t13);
  color: var(--muted);
}
.post-cover { margin-top: var(--sp4); }
/* a wide image breaks out of the text measure for emphasis */
.post-fig-wide { max-width: 100%; }

/* ---------- footer ---------- */

.site-foot { border-top: 1px solid var(--line); padding-block: var(--sp5); }
.site-foot .logo-img { height: 36px; }
.foot-name {
  font-family: var(--f-head);
  font-weight: 800;
  font-synthesis-weight: none;
  font-size: var(--t23);
}
.foot-grid {
  display: grid;
  gap: var(--sp5) var(--sp4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap: var(--sp4); }
}
.foot-brand { max-width: 42ch; }
.foot-about {
  margin-top: var(--sp3);
  font-size: var(--t15);
  color: var(--muted);
  max-width: 42ch;
}
.foot-geo { margin-top: var(--sp3); font-size: var(--t13); color: var(--muted); }
.foot-col { display: flex; flex-direction: column; gap: var(--sp1); }
.foot-head {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp1);
}
.foot-col a {
  font-size: var(--t15);
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms;
}
.foot-col a:hover { color: var(--white); }
.foot-line { display: flex; flex-direction: column; gap: 2px; padding-block: 4px; }
.foot-num {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t17);
  color: var(--white);
}
.foot-base {
  margin-top: var(--sp5);
  padding-top: var(--sp3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2) var(--sp4);
  align-items: baseline;
  justify-content: space-between;
}
.foot-legal {
  font-size: var(--t13);
  color: var(--muted);
  max-width: 78ch;
}
.foot-legal-link {
  font-size: var(--t13);
  color: var(--muted);
  white-space: nowrap;
  transition: color 150ms;
}
.foot-legal-link:hover { color: var(--white); }

/* ---------- contact dialog: pick a line ---------- */

.contact-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--white);
  max-width: min(92vw, 420px);
  width: 100%;
  overflow: visible;
  /* A modal <dialog> is centred by the browser's own `margin: auto`. The
     global reset at the top of this file sets `margin: 0` on everything,
     which cancels that and drops the dialog into the top-left corner, so it
     has to be restored here. max-height keeps a long dialog on screen. */
  margin: auto;
  max-height: min(90vh, 100%);
}
.contact-dialog::backdrop {
  background: color-mix(in srgb, #000 72%, transparent);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.contact-dialog.is-open::backdrop { opacity: 1; }
.cd-inner {
  position: relative;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--sp4);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 260ms var(--ease), transform 320ms var(--ease);
}
.contact-dialog.is-open .cd-inner {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cd-title {
  font-family: var(--f-head);
  font-weight: 800;
  font-synthesis-weight: none;
  font-size: var(--t23);
}
.cd-lead { margin-top: var(--sp1); color: var(--muted); font-size: var(--t15); }
.cd-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 150ms;
}
.cd-close:hover { color: var(--white); }
.cd-picks { margin-top: var(--sp3); display: flex; flex-direction: column; gap: var(--sp2); }
.pick {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: var(--sp2) var(--sp3);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--white);
  transition: border-color 180ms, background-color 180ms, transform 180ms var(--ease);
}
.pick:hover {
  border-color: var(--muted);
  background: color-mix(in srgb, var(--white) 5%, transparent);
  transform: translateY(-2px);
}
.pick-icon { flex: none; width: 26px; height: 26px; color: var(--muted); }
.pick-icon svg { width: 100%; height: 100%; }
.pick:hover .pick-icon { color: var(--white); }
.pick-text { display: flex; flex-direction: column; gap: 2px; }
.pick-label { font-size: var(--t13); color: var(--muted); }
.pick-value { font-family: var(--f-disp); font-weight: 600; font-size: var(--t17); }

@media (prefers-reduced-motion: reduce) {
  .cd-inner, .contact-dialog::backdrop { transition: none; }
  .cd-inner { opacity: 1; transform: none; }
}

/* ---------- social ---------- */

.social-row { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-top: var(--sp4); }
.social-row .cta { margin-top: 0; }
.social-btn { display: inline-flex; align-items: center; gap: var(--sp1); }
.social-btn svg { width: 18px; height: 18px; }
.foot-social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp1);
  margin-top: var(--sp1);
  font-size: var(--t15);
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms;
}
.foot-social svg { width: 18px; height: 18px; flex: none; }
.foot-social:hover { color: var(--white); }

/* ---------- focus ---------- */

:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- motion (enhancement only; page complete without it) ---------- */

.scroll-sentinel {
  position: absolute;
  top: 0;
  width: 1px;
  height: 80px;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .site-head::after { transition: opacity 300ms var(--ease); }

  @supports (animation-timeline: scroll()) {
    .site-head::after {
      animation: head-rule linear both;
      animation-timeline: scroll();
      animation-range: 0px 80px;
    }
    @keyframes head-rule {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
  }

  html.js .reveal {
    opacity: 0;
    transform: translateY(12px);
  }
  html.js .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 500ms var(--ease) var(--stagger, 0ms),
      transform 500ms var(--ease) var(--stagger, 0ms);
  }
  html.js .reveal.no-anim { transition: none; }

  /* the one orchestrated home load, once per session */
  html.orchestrate .hero-veil {
    animation: veil-settle 900ms var(--ease) both;
  }
  html.orchestrate .brand-name span {
    animation: letter-settle 900ms var(--ease) both;
    transform: translateX(calc(var(--i) * 0.16em));
  }
  @keyframes veil-settle {
    from { opacity: 1; }
    to   { opacity: 0.55; }
  }
  @keyframes letter-settle {
    from { transform: translateX(calc(var(--i) * 0.16em)); }
    to   { transform: translateX(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-head::after { opacity: 1; }
}

/* ---------- catalogue filter ---------- */

/* shown only when ?make= narrowed the list, so the visitor can tell why some
   cars are missing and get back to everything in one click */
/* email sits with the other footer channels, but has no icon of its own and
   should not be forced to look like one */
.foot-email {
  font-size: var(--t13);
  word-break: break-all;
}

.filter-bar { margin-top: var(--sp4); }
.filter-bar[hidden] { display: none; }

/* One panel holding the filter set. Each control is a trigger that opens its
   own popover: a native select renders in the OS style on Windows, which is
   the thing that looked pasted-on here, and it cannot show a marque's logo. */
.filters-panel {
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--sp2) var(--sp3);
}
.filters-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
@media (min-width: 700px) { .filters-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .filters-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.fdrop { position: relative; min-width: 0; }
/* hairline between controls rather than a box around each, so the row reads
   as one instrument */
@media (min-width: 1080px) {
  .fdrop + .fdrop::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--line);
  }
}
.fdrop-trigger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 12px;
  padding: var(--sp2);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background-color 180ms var(--ease);
}
.fdrop-trigger:hover { background: color-mix(in srgb, var(--white) 5%, transparent); }
.fdrop.is-open > .fdrop-trigger { background: color-mix(in srgb, var(--white) 7%, transparent); }
.fdrop-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fdrop-label {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fdrop-value {
  font-size: var(--t15);
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 180ms var(--ease);
}
.fdrop.has-value .fdrop-value,
.fdrop-trigger:hover .fdrop-value { color: var(--white); }
.fdrop-chev {
  position: absolute;
  right: var(--sp2);
  top: 50%;
  margin-top: -4px;
  color: var(--muted);
  transition: transform 260ms var(--ease), color 180ms var(--ease);
}
.fdrop.is-open .fdrop-chev { transform: rotate(180deg); color: var(--white); }

/* the model box is a plain text field wearing the same trigger shell */
.fdrop-text .fdrop-trigger { cursor: text; }
.fdrop-text input {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: var(--t15);
  color: var(--white);
  background: none;
  border: 0;
  padding: 0;
}
.fdrop-text input::placeholder { color: var(--muted); }
.fdrop-text input:focus { outline: none; }

/* ---- popover ---- */

.fdrop-panel {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  min-width: 340px;
  max-width: min(92vw, 420px);
  padding: var(--sp3);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.fdrop-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fdrop.is-open .fdrop-panel { animation: fdrop-in 180ms var(--ease) both; }
  @keyframes fdrop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
/* the last controls in the row would otherwise open past the right edge */
@media (min-width: 1080px) {
  .fdrop:nth-last-child(-n+2) .fdrop-panel { left: auto; right: 0; }
}

/* auto-fit rather than a fixed two columns: a long marque like
   Mercedes-Benz gets a full-width row instead of being truncated to "Mer..." */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--t13);
  color: var(--muted);
  text-align: left;
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { color: var(--white); background: color-mix(in srgb, var(--white) 9%, transparent); }
.chip.is-current {
  color: var(--white);
  border-color: color-mix(in srgb, var(--white) 30%, transparent);
  background: color-mix(in srgb, var(--white) 12%, transparent);
}
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  flex: none;
}
.chip-mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.chip-mark.is-lighten img { filter: brightness(0) invert(1); opacity: 0.9; }

/* ---- numeric range popover ---- */

.range-row { display: flex; align-items: flex-end; gap: 10px; }
.range-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.range-field span {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.range-field input {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: var(--t15);
  color: var(--white);
  background: color-mix(in srgb, #000 30%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  transition: border-color 150ms;
}
.range-field input:hover { border-color: var(--muted); }
.range-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.range-dash { color: var(--muted); padding-bottom: 12px; }
.fdrop-apply {
  width: 100%;
  margin-top: var(--sp3);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t13);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--base);
  background: var(--white);
  border: 0;
  border-radius: 10px;
  padding: 11px;
  cursor: pointer;
  transition: opacity 150ms;
}
.fdrop-apply:hover { opacity: 0.88; }
.fdrop-apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.filters-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp3);
  margin-top: var(--sp2);
  padding: 0 var(--sp2) var(--sp1);
}
.filter-count {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.filter-count:empty { display: none; }
.filter-reset {
  font-family: inherit;
  font-size: var(--t13);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
}
.filter-reset:hover { color: var(--white); }
.filter-reset[hidden] { display: none; }

/* ---------- catalogue cards ---------- */

/* several cars to a row, so a buyer compares rather than scrolls */
.car-grid {
  margin-top: var(--sp5);
  display: grid;
  gap: var(--sp3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.car-card {
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease);
}
.car-card[hidden] { display: none; }
.car-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--white) 22%, transparent);
}
.car-card.is-sold { opacity: 0.62; }
/* a car with no photograph yet: an obviously empty frame rather than a
   borrowed one, so nobody mistakes another car's shot for this one */
.card-shot.is-empty,
.shot-empty {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--white) 3%, transparent) 0 10px,
      transparent 10px 20px
    ),
    var(--base);
}
.card-shot {
  display: block;
  position: relative;
  background: var(--base);
  /* 4:3, not 16:10. A grid needs one fixed ratio, and these are phone shots in
     portrait: the wider the box, the more of it is empty either side. */
  aspect-ratio: 4 / 3;
}
.card-shot img {
  /* Absolute, not in flow: height:100% of a box sized only by aspect-ratio
     resolves to auto, so the image falls back to its intrinsic shape and the
     box grows to fit it — a portrait photo made the whole card portrait.
     Taking it out of flow lets the ratio hold and the grid stay level. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover: a cropped listing photo cuts the nose off a car or
     loses the wheels, and a buyer scanning a grid is judging the shape. The
     box keeps a fixed ratio so cards stay level; a portrait shot letterboxes
     against the card ground rather than being cut. */
  object-fit: contain;
  transition: transform 600ms var(--ease);
}
.car-card:hover .card-shot img { transform: scale(1.04); }
.card-body { padding: var(--sp3); display: flex; flex-direction: column; gap: 6px; }

/* the maker's mark, the same treatment as the home page plates */
.card-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.card-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  flex: none;
}
.card-mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.card-mark.is-lighten img { filter: brightness(0) invert(1); opacity: 0.85; }

.card-model { font-size: var(--t17); line-height: 1.25; }
.card-model a { text-decoration: none; }
.card-model a:hover { text-decoration: underline; }
.card-km { font-size: var(--t13); color: var(--muted); margin: 0; }
.card-price {
  margin: 0;
  margin-top: auto;
  padding-top: var(--sp2);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t17);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp2);
}
.card-status {
  font-size: var(--t11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.car-card.is-sold .card-status { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .car-card, .card-shot img { transition: none; }
  .car-card:hover { transform: none; }
  .car-card:hover .card-shot img { transform: none; }
}

/* lead photo on a catalogue row */
.vehicle-shot {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--raised);
}
.vehicle-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--base);
}
.vehicle-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 500ms var(--ease);
}
.vehicle-card:hover .vehicle-shot img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .vehicle-shot img { transition: none; }
  .vehicle-card:hover .vehicle-shot img { transform: none; }
}
.filter-showing {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: var(--t13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.filter-showing:empty { display: none; }
.filter-clear { font-size: var(--t13); color: var(--muted); }
.filter-clear:hover { color: var(--white); }

/* shown when a make filter matches nothing: sourcing to order is the offer,
   so this reads as an invitation rather than a dead end */
.source-offer {
  margin-top: var(--sp5);
  padding: var(--sp4);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.source-offer[hidden] { display: none; }
.source-title { font-size: var(--t30); }
.source-lead {
  margin-top: var(--sp2);
  color: var(--muted);
  max-width: 62ch;
}
.source-cta { margin-top: var(--sp3); }

/* legal identity notice: required by Korean law on every page, so it reads as
   a quiet record rather than competing with the navigation above it */
.foot-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp3);
  margin-bottom: var(--sp1);
  font-size: var(--t13);
  color: var(--muted);
  max-width: none;
}