/* ============================================================
   E.K Elite Motors — design system v2
   Clean black & white · Inter · no gradients, drop shadows only
   Off-white cards · whitespace-led · Apple-feel motion
   ============================================================ */
:root {
  --bg: #ffffff;
  --ink: #111213;
  --ink-soft: #3a3a3c;
  --dim: #6e6e73;
  --card: #f6f5f2;          /* off-white card tone */
  --card-deep: #efeeea;
  --hairline: rgba(0, 0, 0, 0.08);
  --shadow-s: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-m: 0 2px 6px rgba(0,0,0,0.06), 0 14px 34px rgba(0,0,0,0.10);
  --gold-brand: #c9a24b;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 18px;
  --maxw: 1120px;
  /* legacy aliases kept for older markup */
  --gold: #111213;
  --gold-light: #111213;
  --gold-dim: rgba(0,0,0,0.16);
  --text: #111213;
  --text-dim: #6e6e73;
  --grad-gold: none;
  --black-2: #f6f5f2;
  --black-3: #efeeea;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; transition: opacity 0.25s var(--ease); }
p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,0,0,0.25); }
p a:hover { text-decoration-color: var(--ink); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Floating header bar (Fawned-style) ---------- */
.floatbar {
  position: sticky; top: 10px; z-index: 60;
  width: min(1120px, calc(100% - 24px));
  margin: 12px auto 0;
  background: #000; border-radius: 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18), 0 20px 48px rgba(0,0,0,0.22);
}
.topbar { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.10); font-size: 0.82rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 7px; padding-bottom: 7px; gap: 12px; }
.topbar a { color: rgba(255,255,255,0.65); white-space: nowrap; }
.topbar a:hover { color: #fff; }
.topbar a strong { color: #fff; font-weight: 600; }

header.site { position: relative; background: transparent; }
header.site .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 16px; }
.wordmark { line-height: 1.12; display: flex; align-items: center; gap: 12px; }
.wordmark img.mark { height: 30px; width: auto; display: block; }
.wordmark .l1 { font-weight: 700; font-size: 1.18rem; letter-spacing: 0.14em; color: var(--gold-brand); white-space: nowrap; }
.wordmark .l2 { font-size: 0.6rem; letter-spacing: 0.42em; color: var(--gold-brand); text-transform: uppercase; font-weight: 500; }
nav.main { display: flex; gap: 26px; align-items: center; }
nav.main a { color: rgba(255,255,255,0.72); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; padding: 4px 0; transition: color 0.25s var(--ease); }
nav.main a:hover { color: #fff; }
nav.main a.active { color: #fff; font-weight: 600; }
header.site .btn-call-header { background: #fff; color: #111213 !important; box-shadow: none; }
header.site .btn-call-header:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
header.site .navtoggle { color: var(--gold-brand); }

.btn {
  display: inline-block; padding: 12px 26px; border-radius: 980px;
  font-weight: 600; letter-spacing: 0.01em; font-size: 0.95rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), opacity 0.3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.965); }
.btn-gold { background: var(--ink); color: #fff !important; box-shadow: var(--shadow-s); }
.btn-gold:hover { box-shadow: var(--shadow-m); }
.btn-ghost { background: var(--card); color: var(--ink); }
.btn-ghost:hover { background: var(--card-deep); }
.btn-wa { background: var(--card); color: var(--ink) !important; }
.btn-wa:hover { background: var(--card-deep); }
.btn-call-header { padding: 9px 20px; font-size: 0.88rem; white-space: nowrap; }

.navtoggle { display: none; background: none; border: none; color: var(--ink); padding: 7px 10px; font-size: 1.2rem; }
@media (max-width: 480px) {
  .topbar { font-size: 0.72rem; }
  .topbar .container { padding-left: 16px; padding-right: 16px; gap: 8px; }
  header.site .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 820px) {
  nav.main {
    display: flex; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: #000; border-radius: 18px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.3);
    flex-direction: column; gap: 0;
    padding: 8px 0; visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
  }
  nav.main.open { visibility: visible; opacity: 1; transform: none; }
  nav.main a { padding: 13px 24px; width: 100%; }
  .navtoggle { display: block; }
  .btn-call-header { display: none; }
}

/* ---------- Hero ---------- */
.hero { background: var(--bg); text-align: center; padding: 108px 0 96px; }
.hero h1 {
  font-weight: 700; font-size: clamp(2.2rem, 5.4vw, 3.7rem);
  letter-spacing: -0.025em; line-height: 1.1; color: var(--ink);
  margin-bottom: 20px;
}
.hero p.sub { color: var(--dim); max-width: 560px; margin: 0 auto 36px; font-size: 1.15rem; line-height: 1.55; }
.hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- USP strip ---------- */
.usps { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--bg); }
.usps .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding-top: 26px; padding-bottom: 26px; }
.usp { text-align: center; font-size: 0.88rem; color: var(--dim); font-weight: 500; }
.usp .ico { display: block; margin: 0 auto 8px; width: 22px; height: 22px; }
.usp .ico svg { width: 100%; height: 100%; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .usps .container { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 18px 6px; } }

/* ---------- Sections ---------- */
section.block { padding: 96px 0; }
h2.sec { font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -0.02em; text-align: center; color: var(--ink); margin-bottom: 10px; }
p.sec-sub { text-align: center; color: var(--dim); margin-bottom: 56px; font-size: 1.02rem; }
.goldline { display: none; }

/* ---------- Stock cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 440px)); gap: 32px; justify-content: center; }
.card {
  background: var(--card);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  will-change: transform;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.card .photo { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--card-deep); overflow: hidden; }
.card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.card:hover .photo img { transform: scale(1.03); }
.card .photo .noimg {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--dim); letter-spacing: 0.25em; font-size: 0.75rem; font-weight: 500;
  background: var(--card-deep);
}
.card .photo .noimg .mark { font-size: 1.7rem; letter-spacing: 0.1em; color: var(--ink); font-weight: 700; }
.badge-sold {
  position: absolute; top: 16px; left: 16px; transform: none;
  background: var(--ink); color: #fff; padding: 5px 14px; border-radius: 980px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
}
.card .body { padding: 26px 28px 28px; }
.card h3 { font-size: 1.14rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 2px; }
.card .meta { color: var(--dim); font-size: 0.86rem; margin-bottom: 14px; }
.card .price { font-size: 1.5rem; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.card ul.hooks { list-style: none; margin-bottom: 18px; }
.card ul.hooks li { padding: 3px 0 3px 20px; position: relative; font-size: 0.93rem; color: var(--ink-soft); }
.card ul.hooks li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); position: absolute; left: 4px; top: 13px; }
.card .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card .actions .btn { padding: 10px 20px; font-size: 0.88rem; }

/* expandable full spec */
.card details.spec { margin: 2px 0 18px; }
.card details.spec summary {
  cursor: pointer; color: var(--ink); font-size: 0.9rem; font-weight: 600;
  list-style: none; user-select: none; display: inline-flex; align-items: center; gap: 7px;
}
.card details.spec summary::-webkit-details-marker { display: none; }
.card details.spec summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translateY(-1px); transition: transform 0.35s var(--ease-out);
}
.card details.spec[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.card details.spec .groups { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 6px; animation: specin 0.5s var(--ease-out); }
@keyframes specin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.spec-group h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; margin: 14px 0 5px; }
.spec-group ul { list-style: none; }
.spec-group ul li { font-size: 0.9rem; color: var(--ink-soft); padding: 2px 0; }

/* ---------- Sold strip ---------- */
.sold-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.sold-item {
  background: var(--card); border-radius: 14px; padding: 0; overflow: hidden; font-size: 0.9rem;
  box-shadow: var(--shadow-s);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.sold-item .ph { aspect-ratio: 4 / 3; background: var(--card-deep); }
.sold-item .ph img { width: 100%; height: 100%; object-fit: cover; }
.sold-item .bd { padding: 16px 18px 20px; }
.sold-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.sold-item .t { color: var(--ink); font-weight: 600; }
.sold-item .d { color: var(--dim); font-size: 0.82rem; }
.sold-item .p { color: var(--ink); font-weight: 700; margin-top: 4px; }
.sold-item .tag { display: inline-block; font-size: 0.65rem; letter-spacing: 0.16em; font-weight: 700; color: #fff; background: var(--ink); border-radius: 980px; padding: 2px 10px; margin-bottom: 10px; }

/* ---------- Visit / contact ---------- */
.visit-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: start; }
@media (max-width: 820px) { .visit-grid { grid-template-columns: 1fr; } }
.visit-grid .info p { margin-bottom: 16px; color: var(--dim); }
.visit-grid .info p strong { color: var(--ink); font-weight: 600; }
.mapwrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); }
.mapwrap iframe { display: block; width: 100%; height: 340px; border: 0; filter: grayscale(100%) contrast(98%); transition: filter 0.5s var(--ease); }
.mapwrap:hover iframe { filter: grayscale(20%); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { text-align: center; padding: 76px 0 60px; border-bottom: 1px solid var(--hairline); background: var(--bg); }
.page-hero h1 { font-weight: 700; letter-spacing: -0.025em; font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--ink); }
.page-hero p { color: var(--dim); margin-top: 12px; font-size: 1.05rem; }

/* ---------- Car detail page ---------- */
.detail-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }
.gallery .mainimg { border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 16/10; background: var(--card-deep); box-shadow: var(--shadow-s); }
.gallery .mainimg img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; max-height: 300px; overflow-y: auto; padding: 2px; }
.gallery .thumbs img {
  border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; cursor: pointer;
  opacity: 0.75; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.gallery .thumbs img:hover { opacity: 1; transform: translateY(-2px); }
.gallery .thumbs img.sel { opacity: 1; outline: 2px solid var(--ink); outline-offset: 1px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 24px; }
.fact { background: var(--card); border-radius: 12px; padding: 11px 15px; }
.fact .k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; }
.fact .v { font-size: 0.95rem; font-weight: 500; }
.detail-price { font-size: 2.1rem; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.detail-sold { display: inline-block; background: var(--ink); color: #fff; letter-spacing: 0.16em; font-weight: 700; font-size: 0.75rem; padding: 5px 16px; border-radius: 980px; margin-bottom: 10px; }

/* ---------- Footer ---------- */
footer.site { background: var(--card); border-top: 1px solid var(--hairline); padding: 60px 0 36px; font-size: 0.88rem; color: var(--dim); }
footer.site .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
@media (max-width: 760px) { footer.site .cols { grid-template-columns: 1fr; } }
footer.site h4 { color: var(--ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 650; margin-bottom: 14px; }
footer.site ul { list-style: none; }
footer.site ul li { margin-bottom: 8px; }
footer.site a { color: var(--dim); }
footer.site a:hover { color: var(--ink); }
.legal { border-top: 1px solid var(--hairline); padding-top: 22px; font-size: 0.78rem; color: #8e8e93; line-height: 1.7; }
.legal a { color: #8e8e93; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }

/* mobile sticky call bar */
.callbar { display: none; }
@media (max-width: 700px) {
  .callbar {
    display: flex; gap: 10px; position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; z-index: 40;
    background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(18px);
    border-radius: 980px; padding: 8px; box-shadow: var(--shadow-m);
  }
  .callbar a {
    flex: 1; text-align: center; padding: 12px 0; font-weight: 650; font-size: 0.92rem;
    border-radius: 980px; transition: transform 0.3s var(--ease);
  }
  .callbar a:active { transform: scale(0.96); }
  .callbar .c { background: var(--ink); color: #fff; }
  .callbar .w { background: var(--card-deep); color: var(--ink); }
  /* reserve space only where a fixed call bar actually exists - the home and
     used-cars grids dropped theirs, and showroom pages swap it for the
     enquire bar. Tying this to the element beats maintaining a page list. */
  body:has(.callbar) { padding-bottom: 76px; }
}

/* ---------- Card → showroom navigation ---------- */
.card { cursor: pointer; }
.page-fade {
  position: fixed; inset: 0; background: #000; z-index: 999;
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.page-fade.on { opacity: 1; pointer-events: all; }

/* ---------- Cinematic MapLibre visit banner ---------- */
.visit-banner {
  position: relative; width: 100%; height: 560px; overflow: hidden;
  background: #eceae6;
}
.visit-banner .visit-map { position: absolute; inset: 0; }
.visit-banner .visit-map canvas { outline: none; }
.visit-overlay {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center;
  pointer-events: none;
}
.visit-card {
  pointer-events: auto;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 20px; padding: 28px 30px;
  max-width: 410px; box-shadow: var(--shadow-m);
}
.visit-card p { margin-bottom: 14px; color: var(--dim); }
.visit-card p strong { color: var(--ink); font-weight: 600; }
.visit-pin {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold-brand); border: 3px solid #141414;
  box-shadow: 0 0 0 0 rgba(201,162,75,0.5);
  animation: pinpulse 2.4s ease-out infinite;
}
@keyframes pinpulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,162,75,0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(201,162,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,162,75,0); }
}
@media (max-width: 820px) {
  .visit-banner { height: 620px; }
  .visit-overlay { align-items: flex-end; padding-bottom: 16px; }
  .visit-card { max-width: none; width: 100%; padding: 22px 20px; }
}

/* ---------- Footer logo mark ---------- */
.footer-mark { height: 26px; width: auto; display: inline-block; margin-bottom: 12px; }
.footer-mark.fm-dark { display: none; }
body.showroom-dark .footer-mark.fm-light { display: none; }
body.showroom-dark .footer-mark.fm-dark { display: inline-block; }

/* ---------- Sitewide type: Archivo headings, Barlow Condensed numerals ---------- */
h1, h2, h3, h4,
.sec, .page-hero h1 {
  font-family: Archivo, Inter, sans-serif;
}
.card .price, .sold-item .p, .detail-price,
.panel-head .price-block .price,
.keyfact .v, .enquirebar .meta .p,
.show-hero .titling .stats {
  font-family: "Barlow Condensed", Inter, sans-serif;
  letter-spacing: 0.02em;
}
.panel-head .price-block .price { font-size: clamp(2.2rem, 4.2vw, 2.9rem); }
.show-hero .titling .stats { font-size: 1.1rem; }
.keyfact .v { font-size: 1.12rem; }
.show-hero .titling .plate { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.14em; }

/* ---------- Homepage hero: HQ studio renders backdrop ---------- */
.hero-renders {
  position: relative; overflow: hidden;
  padding: 168px 0 150px;
  background: #16181b;
}
.hero-renders .hero-bg { position: absolute; inset: 0; }
.hero-renders .hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
  opacity: 0;
  animation: herocycle 21s ease-in-out infinite;
  transform-origin: center;
}
.hero-renders .hero-bg img:nth-child(2) { animation-delay: 7s; }
.hero-renders .hero-bg img:nth-child(3) { animation-delay: 14s; }
@keyframes herocycle {
  0%       { opacity: 0; transform: scale(1.06); }
  4.7%     { opacity: 1; }
  33.3%    { opacity: 1; transform: scale(1.0); }
  38%      { opacity: 0; }
  100%     { opacity: 0; transform: scale(1.06); }
}
.hero-renders::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,11,13,0.42) 0%, rgba(10,11,13,0.30) 45%, rgba(10,11,13,0.62) 100%);
}
.hero-renders .container { position: relative; z-index: 2; }
.hero-renders h1 { color: #101113; }
.hero-renders p.sub { color: #3c3e42; }
.btn-hero-ghost {
  background: rgba(0,0,0,0.06); color: #101113 !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.18);
}
.btn-hero-ghost:hover { background: rgba(0,0,0,0.12); }
@media (max-width: 700px) {
  .hero-renders { padding: 130px 0 110px; }
  .hero-renders .hero-bg img { object-position: 68% 62%; }
}

/* hero: hold a single render (carousel off) until the dedicated hero art lands */
.hero-renders .hero-bg img { animation: none; opacity: 0; }
.hero-renders .hero-bg img:first-child { opacity: 1; transform: scale(1.02); }

/* hero film */
.hero-renders .hero-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 1;
}
@media (prefers-reduced-motion: reduce) { .hero-renders .hero-bg video { display: none; } }

/* home: hero film bleeds to the top of the page, nav floats over it */
body.home .floatbar {
  position: fixed; top: 10px; left: 0; right: 0; margin: 0 auto;
}
body.home .hero-renders { padding-top: 214px; }
body.home .hero-renders::after {
  background:
    linear-gradient(to bottom, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0.28) 40%, rgba(10,11,13,0.62) 100%);
}
@media (max-width: 700px) {
  body.home .hero-renders { padding-top: 190px; }
}

/* home hero fills viewport minus the USP strip (which peeks at the fold) */
body.home .hero-renders {
  min-height: calc(100svh - 96px);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding-top: 150px; padding-bottom: 60px;
}
body.home .hero-renders .container { width: 100%; }
@media (max-width: 700px) {
  body.home .hero-renders { min-height: calc(100svh - 128px); padding-top: 150px; }
}

/* dark-aesthetic hero: bottom fades to solid black, USP strip inverts */
body.home .hero-renders { background: #e6e6e6; }
body.home .hero-renders::after {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.18) 42%, rgba(230,230,230,0.55) 74%, #e6e6e6 100%);
}
body.home .usps {
  background: #000;
  border-top: none;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
body.home .usp { color: #3c3e42; }
body.home .usp .ico svg { stroke: #16171a; }

@media (prefers-reduced-motion: reduce) {  }

/* USP strip lives inside the hero: video fills the full viewport,
   icons sit over it on a transparent-to-black feather (lower third) */
body.home .hero-renders { min-height: 100svh; padding-bottom: 170px; }
@media (max-width: 700px) { body.home .hero-renders { min-height: 100svh; padding-bottom: 190px; } }
body.home .hero-renders::after {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.18) 42%, rgba(230,230,230,0.2) 66%, rgba(230,230,230,0.72) 86%, #e6e6e6 100%);
}
body.home .hero-renders .usps {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: transparent; border-top: none; border-bottom: none;
}

/* home: mobile callbar stays hidden until the user scrolls past the fold.
   Hide transform must clear its own height PLUS the 12px float offset,
   safe-area inset and drop shadow - 110% of height alone leaves a sliver
   peeking above the screen edge. Home-only reveal, distinct from the
   showroom pages (which never hide their bar / use the enquire bar). */
@media (max-width: 700px) {
  body.home .callbar {
    transform: translateY(calc(100% + 80px + env(safe-area-inset-bottom, 0px)));
    opacity: 0;
    transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
    will-change: transform;
  }
  body.home .callbar.on { transform: translateY(0); opacity: 1; }
}

/* iOS Safari: kill white letterboxing - browser chrome + overscroll areas
   go black on the dark pages (theme-color meta handles the toolbars) */
html:has(body.home) { background: #000; }
html:has(body.showroom-dark) { background: #000; }

/* iOS Safari samples the BODY background for its top/bottom chrome and for
   the rubber-band overscroll areas. Black, now that the stock section is dark:
   a light body letterboxed white against it. The hero and footer carry their
   own light backgrounds, so only the overscroll beyond them turns black. */
body.home { background: #000; }
body.home section.block { background: var(--bg); }

/* anchor targets land clear of the fixed floating nav */
section.block[id], #stock, #visit { scroll-margin-top: 118px; }

/* card: "View in showroom" as an inline link, bottom-left, arrow nudge,
   text sweeps left-to-right into brand gold on hover */
.card .showroom-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding: 0;
  font-weight: 650; font-size: 0.9rem; letter-spacing: 0.01em;
  background-image: linear-gradient(to right, var(--gold-brand), var(--gold-brand) 50%, var(--ink) 50%, var(--ink));
  background-size: 201% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 0.4s var(--ease);
}
.card .showroom-link:hover { background-position: 0 0; }
.card .showroom-link .arr { transition: transform 0.4s var(--ease); }
.card .showroom-link:hover .arr { transform: translateX(4px); }

/* card CTAs: left-to-right colour sweep on hover -
   Call now black -> brand gold, WhatsApp -> WhatsApp green */
.card .btn-gold {
  background-image: linear-gradient(to right, var(--gold-brand), var(--gold-brand) 50%, var(--ink) 50%, var(--ink));
  background-size: 201% 100%; background-position: 100% 0;
  transition: background-position 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.3s var(--ease);
}
.card .btn-gold:hover { background-position: 0 0; color: #141414 !important; }
.card .btn-wa {
  background-image: linear-gradient(to right, #1da851, #1da851 50%, var(--card) 50%, var(--card));
  background-size: 201% 100%; background-position: 100% 0;
  transition: background-position 0.4s var(--ease), color 0.4s var(--ease);
}
.card .btn-wa:hover { background-image: linear-gradient(to right, #1da851, #1da851 50%, var(--card) 50%, var(--card)); background-position: 0 0; color: #fff !important; }

/* light hero: stock section carries the film base tone (#e6e6e6, sampled
   from the bottom of the lift-graded hero film) */
body.home #stock { background: #e6e6e6; }

/* water-droplet glass cards on home: convex bevel, specular crown,
   pooled shadow, translucent 10->60 tilted fill */
body.home #stock .card {
  position: relative;
  background: linear-gradient(80deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.75) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 22px 40px rgba(20,20,24,0.13),
    0 6px 12px rgba(20,20,24,0.06),
    inset 0 2px 2px rgba(255,255,255,0.55),
    inset 0 -14px 28px rgba(20,20,24,0.055);
}
body.home #stock .card:hover {
  box-shadow:
    0 30px 54px rgba(20,20,24,0.16),
    0 8px 16px rgba(20,20,24,0.07),
    inset 0 2px 2px rgba(255,255,255,0.55),
    inset 0 -14px 28px rgba(20,20,24,0.055);
}
body.home #stock .card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(92% 44% at 50% -6%, rgba(255,255,255,0.5), transparent 68%);
  border-radius: inherit;
}

/* card meta icon row: showroom keyfact icons, dark on light glass */
.card .meta-ico { display: flex; gap: 12px; margin-top: 8px; color: var(--ink-soft); }
.card .meta-ico svg {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   Catalogue filter bar — black strip that docks to the nav
   ============================================================ */
.catbar-slot { width: min(1120px, calc(100% - 24px)); margin: 0 auto 44px; }
.catbar {
  background: #000; color: #fff; border-radius: 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18), 0 20px 48px rgba(0,0,0,0.22);
}
.catbar-inner {
  display: flex; align-items: center; gap: 16px;
  padding-top: 11px; padding-bottom: 11px;
}
.catbar .container { max-width: 100%; }

/* docked: slides out from behind the floating nav and joins it */
.catbar.docked {
  position: fixed; top: var(--navh, 96px); left: 0; right: 0;
  margin: 0 auto; width: min(1120px, calc(100% - 24px));
  z-index: 59; border-radius: 0 0 22px 22px;
  animation: catdock 0.42s var(--ease-out) backwards;
}
@keyframes catdock { from { transform: translateY(-100%); } to { transform: none; } }
.floatbar.has-dock { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.floatbar.has-dock::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 1px; background: rgba(255,255,255,0.10);
}
@media (prefers-reduced-motion: reduce) { .catbar.docked { animation: none; } }

/* scrim behind the mobile filter sheets */
.cat-scrim { display: none; }
@media (max-width: 700px) {
  .cat-scrim {
    display: block; position: fixed; inset: 0; z-index: 58;
    background: rgba(0,0,0,0.48); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s var(--ease-out), visibility 0.28s;
  }
  .cat-scrim.on { opacity: 1; visibility: visible; }
}

/* status segmented control */
.cat-status { display: flex; background: rgba(255,255,255,0.08); border-radius: 980px; padding: 3px; flex: none; }
.cat-seg {
  background: none; border: 0; cursor: pointer; color: rgba(255,255,255,0.62);
  font: inherit; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em;
  padding: 7px 15px; border-radius: 980px; white-space: nowrap;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.cat-seg:hover { color: #fff; }
.cat-seg.on { background: #fff; color: #111213; font-weight: 600; }

/* dropdown triggers */
.cat-groups { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.cat-drop { position: relative; }
.cat-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.80); font: inherit; font-size: 0.82rem; font-weight: 500;
  padding: 7px 13px; border-radius: 980px; cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.cat-trigger:hover { background: rgba(255,255,255,0.13); color: #fff; }
.cat-drop.has-sel .cat-trigger { background: var(--gold-brand); border-color: var(--gold-brand); color: #111213; font-weight: 600; }
.cat-trigger .chev { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
.cat-drop.open .cat-trigger .chev { transform: rotate(180deg); }
.cat-badge[hidden], .cat-clear[hidden] { display: none !important; }
.cat-badge {
  min-width: 17px; height: 17px; border-radius: 980px; background: #111213; color: #fff;
  font-size: 0.66rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* dropdown panel */
.cat-panel {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 5;
  min-width: 194px; max-height: 320px; overflow-y: auto;
  background: #141416; border: 1px solid rgba(255,255,255,0.12); border-radius: 15px;
  padding: 7px; box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out), visibility 0.24s;
}
.cat-drop.open .cat-panel { opacity: 1; visibility: visible; transform: none; }
.cat-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  cursor: pointer; font-size: 0.86rem; color: rgba(255,255,255,0.82); white-space: nowrap;
  transition: background-color 0.2s var(--ease);
}
.cat-opt:hover { background: rgba(255,255,255,0.07); color: #fff; }
.cat-opt input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.32); background: transparent;
  display: grid; place-content: center; cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cat-opt input::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid #111213; border-bottom: 2px solid #111213;
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 0.2s var(--ease-out);
}
.cat-opt input:checked { background: var(--gold-brand); border-color: var(--gold-brand); }
.cat-opt input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.cat-sw { width: 14px; height: 14px; border-radius: 5px; flex: none; border: 1px solid rgba(255,255,255,0.22); }
.cat-none { padding: 10px; font-size: 0.82rem; color: rgba(255,255,255,0.45); }

/* count + clear */
.cat-tail { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.cat-count { font-size: 0.8rem; color: rgba(255,255,255,0.55); white-space: nowrap; font-variant-numeric: tabular-nums; }
.catbar .cat-clear {
  background: none; border: 0; cursor: pointer; color: rgba(255,255,255,0.62);
  font: inherit; font-size: 0.8rem; font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; padding: 4px 2px;
}
.catbar .cat-clear:hover { color: #fff; }
.cat-empty .cat-clear { border: 0; cursor: pointer; font: inherit; font-size: 0.95rem; }

/* empty state */
.cat-empty { grid-column: 1 / -1; text-align: center; padding: 56px 20px; }
.cat-empty h3 { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 8px; }
.cat-empty p { color: var(--dim); margin-bottom: 22px; }


/* cards: size to their own content. Archive cars carry no hook bullets, so
   stretching a row to match its tallest card leaves a dead gap under them. */
.cards { align-items: start; }
.card { display: flex; flex-direction: column; }
.card .body { display: flex; flex-direction: column; flex: 1 1 auto; }
.card .actions { margin-top: auto; padding-top: 4px; }
.card ul.hooks { margin-bottom: 18px; }
.card-archive .photo img { filter: saturate(0.92); }

@media (max-width: 900px) {
  .catbar-inner { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .cat-status { order: 1; }
  .cat-tail { order: 2; margin-left: auto; }
  .cat-groups { order: 3; flex: 1 1 100%; }
}
@media (max-width: 700px) {
  .cat-status { flex: 1 1 auto; }
  .cat-seg { flex: 1; text-align: center; padding: 6px 10px; font-size: 0.78rem; }
  .cat-tail { flex: none; gap: 10px; }
  .cat-count { font-size: 0.75rem; }
  .cat-trigger { font-size: 0.78rem; padding: 6px 12px; }
  /* pills scroll sideways instead of stacking into three rows */
  .cat-groups {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -24px; padding: 1px 24px;
  }
  .cat-groups::-webkit-scrollbar { display: none; }
  .cat-drop { flex: none; }
  /* panels become bottom sheets so the sideways scroller can never clip them */
  .cat-panel {
    position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
    min-width: 0; max-height: 54vh; z-index: 80;
    transform: translateY(12px); border-radius: 18px; padding: 8px;
  }
  .cat-drop.open .cat-panel { transform: none; }
  .cat-opt { padding: 12px 12px; font-size: 0.92rem; }
  .catbar-slot { margin-bottom: 32px; }
  /* docked on a phone: one compact scrolling row, count drops away */
  .catbar.docked .catbar-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .catbar.docked .catbar-inner::-webkit-scrollbar { display: none; }
  .catbar.docked .cat-tail { display: none; }
  .catbar.docked .cat-status { flex: none; }
  .catbar.docked .cat-seg { flex: none; }
  .catbar.docked .cat-groups { flex: none; margin: 0; padding: 1px 0; overflow: visible; }
}

/* filter option icons — white line-art, matched to the card keyfact glyphs */
.cat-ico {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  color: rgba(255,255,255,0.92);
}
.cat-opt:hover .cat-ico { color: #fff; }
.cat-opt input:checked ~ .cat-ico { color: var(--gold-brand); }

/* ============================================================
   Cutout cards — the car sits ON the card, breaking out of the top
   ============================================================
   The car's upper two-thirds lands on the SECTION background, not the
   card, so the section has to be dark: a white Fiat breaking out onto
   the old #e6e6e6 lost its roof and shoulder line entirely. */
body #stock.block-dark { background: #0d0d0f; }
body #stock.block-dark h2.sec { color: #f2efe9; }
body #stock.block-dark p.sec-sub { color: #8e8e93; }

/* the filter bar is pure black; lift the section just enough that the
   bar still reads as a distinct object sitting on it */
body #stock.block-dark .catbar { box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 20px 48px rgba(0,0,0,0.55); }

body #stock.block-dark .cards {
  align-items: stretch;            /* equal-height rows: every car lands on one line */
  row-gap: 132px; column-gap: 32px;
  padding-top: 118px;              /* room for the first row's breakout */
}

body #stock .card.cut::after { display: none; }   /* kill the glass specular crown */
body #stock .card.cut {
  -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
  background: linear-gradient(158deg, #1c1c20 0%, #0a0a0b 72%);
  border-radius: var(--radius); overflow: visible;
  padding: 20px 28px 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 22px 48px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; position: relative;
}
body #stock .card.cut:hover { transform: translateY(-5px); }
body #stock .card.cut .cut {
  display: block; position: relative; z-index: 2; margin: 0 auto 10px;
  visibility: hidden;              /* revealed by liftCars once measured */
  filter: drop-shadow(0 18px 14px rgba(0,0,0,0.45));
  transition: transform 0.5s var(--ease-out);
}
body #stock .card.cut:hover .cut { transform: translateY(-4px); }
/* soft ellipse on the card under the tyres, so the car rests rather than floats */
body #stock .card.cut .contact {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 0;
  height: 22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 72%);
}
body #stock .card.cut .body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1 1 auto; padding: 0; }
body #stock .card.cut .badge-sold {
  position: static; align-self: flex-start; margin-bottom: 10px;
  background: rgba(255,255,255,0.14); color: #fff;
  padding: 4px 11px; font-size: 0.6rem;
}
body #stock .card.cut h3 {
  color: #f2efe9; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.28; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body #stock .card.cut .meta { color: #8e8e93; font-size: 0.82rem; margin-top: 5px; }
/* The gearbox glyph draws its A/M with fill="currentColor", so setting only
   `stroke` left the letter inheriting the light-theme ink and it vanished on
   the dark card. Set `color` and let both stroke and fill follow it. */
body #stock .card.cut .meta-ico { margin-top: 10px; color: rgba(255,255,255,0.62); }
body #stock .card.cut .meta-ico svg { stroke: currentColor; }
body #stock .card.cut .price {
  color: var(--gold-brand); font-family: "Barlow Condensed", sans-serif;
  font-size: 2.05rem; font-weight: 700; margin-top: 10px; line-height: 1;
}
body #stock .card.cut ul.hooks { list-style: none; margin: 14px 0 0; }
body #stock .card.cut ul.hooks li {
  color: #a2a2a8; font-size: 0.87rem; padding: 3px 0 3px 16px; position: relative;
}
body #stock .card.cut ul.hooks li:before {
  content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor; opacity: 0.5;
}
/* footer pins to the bottom, so a sold card with no showroom link
   doesn't leave a hole where one would be */
body #stock .card.cut .foot { margin-top: auto; padding-top: 18px; }
body #stock .card.cut .actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 0; }
body #stock .card.cut .btn-gold { background: var(--gold-brand); color: #111213 !important; }
body #stock .card.cut .btn-wa { background: rgba(255,255,255,0.1); color: #f2efe9 !important; }
body #stock .card.cut .btn-wa:hover { background: rgba(255,255,255,0.16); }
body #stock .card.cut .showroom-link {
  margin-top: 14px; color: var(--gold-brand); background-image: none;
  -webkit-text-fill-color: currentColor;
}

body #stock.block-dark .cat-empty h3 { color: #f2efe9; }
body #stock.block-dark .cat-empty p { color: #8e8e93; }

@media (max-width: 700px) {
  body #stock.block-dark .cards { row-gap: 104px; padding-top: 100px; }
  body #stock .card.cut::after { display: none; }   /* kill the glass specular crown */
body #stock .card.cut {
  -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; padding: 18px 22px 22px; }
  body #stock .card.cut .price { font-size: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  body #stock .card.cut:hover { transform: none; }
  body #stock .card.cut:hover .cut { transform: none; }
}

/* ============================================================
   Home hero - split layout
   Copy left, cut-out car bleeding off the right edge.

   Deliberately a NEW class (.hero-split) rather than an edit to
   .hero-renders. The old hero accumulated six separate `body.home
   .hero-renders` blocks down this file, each overriding the last;
   renaming the hook makes every one of them inert in a single move
   instead of unpicking them and hoping nothing was load-bearing.

   The background is mid-grey where the wheels sit and only goes black in
   the last stretch, so the tyres stay readable against it and the section
   still lands on the black #stock block below without a seam.
   ============================================================ */
body.home .hero-split {
  position: relative;
  overflow: hidden;
  text-align: left;
  min-height: 100svh;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding: 200px 0 0;
  background: linear-gradient(180deg, #3a3a41 0%, #333338 46%, #2a2a30 78%, #1c1c20 92%, #0d0d0f 100%);
}
body.home .hero-split .container { position: relative; z-index: 2; width: 100%; }
body.home .hero-split .hero-copy { max-width: 560px; }
body.home .hero-split h1 { color: #fff; }
body.home .hero-split p.sub {
  color: rgba(255,255,255,0.74); margin: 0 0 36px; max-width: 460px;
}
body.home .hero-split .cta-row { justify-content: flex-start; }

/* white primary, transparent call button */
.btn-hero-primary { background: #fff; color: #111213 !important; }
.btn-hero-primary:hover { background: #ebe9e4; }
.btn-hero-ghost {
  background: transparent; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.42);
}
.btn-hero-ghost:hover { background: rgba(255,255,255,0.10); }

/* The render IS the background. Two compositions are shipped - 16:9 with the
   left half empty, 9:16 with the top half empty - so neither breakpoint is a
   crop of the other. object-position keeps the car pinned right as the
   viewport aspect drifts away from the render's own. */
body.home .hero-split .hero-bg { position: absolute; inset: 0; z-index: 0; }
body.home .hero-split .hero-bg img {
  width: 100%; height: 100%; display: block;
  /* LEFT, not right. cover crops the overflow from whichever side
     object-position pulls away from: anchoring left keeps the render's empty
     half intact for the headline and lets the car's tail run off the right
     edge as the viewport narrows. Anchoring right does the opposite - it eats
     the empty space and marches the car under the copy. */
  object-fit: cover; object-position: left center;
}
/* Scrim, doing two jobs: it guarantees the white copy holds over the render at
   every width, and it carries the bottom edge into the black #stock block so
   there is no seam where the section ends. */
body.home .hero-split::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,13,15,0.94) 0%, rgba(13,13,15,0.82) 28%,
                           rgba(13,13,15,0.50) 48%, rgba(13,13,15,0.12) 68%,
                           rgba(13,13,15,0) 82%),
    linear-gradient(180deg, rgba(13,13,15,0.42) 0%, rgba(13,13,15,0) 24%,
                            rgba(13,13,15,0) 66%, rgba(13,13,15,0.80) 92%, #0d0d0f 100%);
}

/* USP strip sits inside the hero and follows the same left edge */
body.home .hero-split .usps {
  background: transparent; border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 0; position: relative; z-index: 2; margin-top: auto;
}
body.home .hero-split .usps .container {
  display: flex; flex-wrap: wrap; gap: 14px 38px; justify-content: flex-start;
}
body.home .hero-split .usp {
  text-align: left; color: rgba(255,255,255,0.72);
  display: flex; align-items: center; gap: 9px;
}
body.home .hero-split .usp .ico { margin: 0; flex: 0 0 auto; }
body.home .hero-split .usp .ico svg { stroke: #fff; }

@media (max-width: 900px) {
  /* the 9:16 render puts the car in the lower third, so the copy sits over
     empty background at the top and the scrim runs top-to-bottom instead of
     left-to-right */
  body.home .hero-split { padding: 150px 0 0; justify-content: flex-start; }
  body.home .hero-split .hero-bg img { object-position: center center; }
  body.home .hero-split::before {
    background:
      linear-gradient(180deg, rgba(13,13,15,0.80) 0%, rgba(13,13,15,0.52) 34%,
                              rgba(13,13,15,0) 58%, rgba(13,13,15,0) 78%,
                              rgba(13,13,15,0.86) 94%, #0d0d0f 100%);
  }
  body.home .hero-split p.sub { margin-bottom: 30px; }
}

/* ---------- Built by Universal Exports ----------
   Sits in the legal strip under the footer links. Two colourways because
   footer.site is light on the ordinary pages and black under
   body.showroom-dark - the same split the brand wordmark already uses. */
.built-by { margin-top: 14px; }
.built-by a {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: #8e8e93;
  transition: color 0.25s var(--ease);
}
.built-by a:hover { color: var(--ink); }
.built-by .ue-mark { height: 15px; width: auto; display: inline-block; opacity: 0.9; }
.built-by .ue-dark { display: none; }
body.showroom-dark .built-by .ue-light { display: none; }
body.showroom-dark .built-by .ue-dark { display: inline-block; }
body.showroom-dark .built-by a { color: #6e6e73; }
body.showroom-dark .built-by a:hover { color: #f2efe9; }