/* =============================================================================
   MasterClass Car Rental — customer booking site
   =============================================================================
   Same brand as the staff app, lighter register. The app is a dense dark tool
   staff use all day; this is a shopfront a stranger visits once while deciding
   whether to trust us with a deposit, usually on a phone, often outdoors.

   Deliberately minimal: no framework, no build step, no bundle. Customers are
   on Zimbabwean mobile data and every kilobyte is money out of their pocket
   before they have booked anything.
   ========================================================================== */

:root {
  /* Warm neutrals, biased very slightly toward the brand red rather than a
     flat grey, so the ground feels chosen rather than defaulted. */
  --ground: #F8F5F1;
  --surface: #FFFFFF;
  --surface-2: #F1ECE6;
  --ink: #15110E;
  --ink-2: #433A34;
  --muted: #736A63;
  --border: #E6DFD7;
  --border-firm: #CDC3B8;

  /* Brand. Red is the action colour, matching AppColors.brandAction. */
  --red: #D4322C;
  --red-deep: #A8231D;
  --red-soft: #FBEAE8;
  --on-red: #FFFFFF;

  /* Gold reads as money and premium. Darkened from the app's #D1AA67, which is
     tuned for a near-black ground and turns muddy on white. */
  --gold: #A07A31;
  --gold-soft: #F7F0E0;

  --good: #34776A;
  --good-soft: #E3F0ED;

  /* WhatsApp green, darkened so white text on it reads (4.9:1). */
  --wa: #1C8A4F;
  --wa-deep: #146B3C;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(23,18,15,.05);
  --shadow: 0 2px 4px rgba(23,18,15,.04), 0 12px 28px -20px rgba(23,18,15,.35);
  --shadow-lg: 0 4px 8px rgba(23,18,15,.05), 0 24px 48px -28px rgba(23,18,15,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F0D0D;
    --surface: #1A1716;
    --surface-2: #231F1E;
    --ink: #F2EEEB;
    --ink-2: #C9C1BB;
    --muted: #948B85;
    --border: #302B2A;
    --border-firm: #423B3A;
    --red: #FF5A52;
    --red-deep: #D4322C;
    --red-soft: #2C1917;
    --on-red: #FFFFFF;
    --gold: #D1AA67;
    --gold-soft: #26200F;
    --good: #55B8A8;
    --good-soft: #16241F;
    --wa: #1C8A4F;
    --wa-deep: #146B3C;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.9);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.5), 0 24px 48px -28px rgba(0,0,0,1);
  }
}

:root[data-theme="dark"] {
  --ground: #0F0D0D;
  --surface: #1A1716;
  --surface-2: #231F1E;
  --ink: #F2EEEB;
  --ink-2: #C9C1BB;
  --muted: #948B85;
  --border: #302B2A;
  --border-firm: #423B3A;
  --red: #FF5A52;
  --red-deep: #D4322C;
  --red-soft: #2C1917;
  --on-red: #FFFFFF;
  --gold: #D1AA67;
  --gold-soft: #26200F;
  --good: #55B8A8;
  --good-soft: #16241F;
  --wa: #1C8A4F;
  --wa-deep: #146B3C;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.9);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.5), 0 24px 48px -28px rgba(0,0,0,1);
}

/* Cross-document transitions.
   Three lines that remove the reason people reach for a single-page app: the
   white flash between pages. Supporting browsers cross-fade index -> book ->
   confirmation; everything else just navigates as before, no polyfill. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Oxanium, ui-sans-serif, system-ui, sans-serif;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -.015em;
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; display: block; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 18px; }
.narrow { max-width: 620px; margin: 0 auto; padding: 0 18px; }

/* ---------- header ---------- */
.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; }
/* The wordmark is black, so it needs the light-ground artwork on a light
   ground and the cream artwork on a dark one. Showing the wrong one puts a
   white box around the logo. */
.brand .on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .on-light { display: none; }
  :root:not([data-theme="light"]) .brand .on-dark { display: block; }
}
:root[data-theme="dark"] .brand .on-light { display: none; }
:root[data-theme="dark"] .brand .on-dark { display: block; }
.site-head nav {
  display: flex;
  gap: 20px;
  font-size: .92rem;
  font-weight: 600;
}
.site-head nav a { color: var(--ink-2); text-decoration: none; }
.site-head nav a:hover { color: var(--red); }

/* ---------- hero ---------- */
.hero {
  padding: 52px 0 34px;
  background:
    radial-gradient(120% 90% at 92% -10%, var(--red-soft) 0%, transparent 62%),
    var(--ground);
}
/* Two columns on a wide screen, one on a phone.
   The photo is deliberately DROPPED below 980px rather than stacked above the
   form. Every fleet photo is a portrait phone snap, so stacking one on mobile
   pushes the date pickers and the CTA below the fold — and mobile is most of
   this audience. A picture is worth less than the button it displaces. */
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-copy { min-width: 0; }
.hero-art { display: none; }

@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .hero-art {
    display: block;
    position: relative;
  }
  /* The same red the hero's radial gradient uses, pooled behind the photo so it
     sits in the page rather than on top of it. */
  .hero-art::before {
    content: "";
    position: absolute;
    inset: -14% -10% -18% -12%;
    background: radial-gradient(60% 55% at 55% 42%, var(--red-soft) 0%, transparent 72%);
    filter: blur(6px);
  }
  .hero-art img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  }
}

.hero h1 {
  font-size: clamp(2rem, 6.2vw, 3.15rem);
  font-weight: 800;
  line-height: 1.05;
  max-width: 16ch;
}
.hero .lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 46ch;
  margin-top: 14px;
}

/* ---------- search card ---------- */
.search-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  margin-top: 28px;
}
.search-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  /* Two by two: the dates, then the time and the button. The search card
     sits in the hero's narrow column, where four across squeezed the time
     to a sliver and pushed the button out of the card. */
  .search-grid { grid-template-columns: 1fr 1fr; align-items: end; }
}

.field label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input,
.field select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: 8px;
  padding: 12px 13px;
  min-height: 48px;
}
.field input:focus, .field select:focus { border-color: var(--red); }
/* "optional" beside a label. Marking the one optional field is clearer than
   marking the required ones, which is most of the form. */
.field .opt {
  font-weight: 400;
  font-size: .78rem;
  color: var(--ink-3, var(--muted));
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
.field .hint { font-size: .82rem; color: var(--muted); margin-top: 5px; }
.field .err { font-size: .82rem; color: var(--red-deep); margin-top: 5px; display: none; }
.field.invalid .err { display: block; }
.field.invalid input { border-color: var(--red-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-weight: 700;
  border-radius: 8px;
  padding: 13px 22px;
  min-height: 48px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--red); color: var(--on-red); }
.btn-primary:hover { background: var(--red-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-firm);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- results ---------- */
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 40px 0 4px;
}
.results-head h2 { font-size: 1.4rem; font-weight: 700; }
.results-head .count { font-size: .92rem; color: var(--muted); }

.fleet {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 20px;
}
@media (min-width: 640px) { .fleet { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .fleet { grid-template-columns: repeat(3, 1fr); } }

.car {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.car:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .car, .car:hover { transition: none; transform: none; }
}

.car-photo {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.car-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder for a vehicle with no photo yet. Uses --muted rather than a
   border colour: a border-weight grey disappears against the dark surface,
   leaving what looks like an empty broken card. */
.car-photo svg { width: 54px; height: 54px; color: var(--muted); opacity: .45; }
/* A real photo fills the frame. object-fit: cover keeps every card the same
   height whatever aspect ratio the phone that took the picture produced —
   without it one portrait shot stretches its row and the grid goes ragged. */
.car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-body { padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
.car-body h3 { font-size: 1.08rem; font-weight: 700; }
.spec { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--muted); }
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.price .total {
  font-family: Oxanium, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price .per { font-size: .8rem; color: var(--muted); display: block; }
.deposit {
  font-size: .8rem;
  color: var(--gold);
  font-weight: 700;
  background: var(--gold-soft);
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
}

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 54px 20px;
  background: var(--surface);
  border: 1px dashed var(--border-firm);
  border-radius: var(--radius);
  color: var(--muted);
}
.empty h3 { color: var(--ink); font-size: 1.1rem; margin-bottom: 8px; }

/* ---------- steps ---------- */
.steps {
  display: flex;
  gap: 6px;
  margin: 26px 0 30px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.steps li {
  flex: 1;
  list-style: none;
  color: var(--muted);
  padding-top: 9px;
  border-top: 3px solid var(--border);
}
.steps li.done { color: var(--good); border-top-color: var(--good); }
.steps li.now { color: var(--red); border-top-color: var(--red); }

/* ---------- panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.panel h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.panel .sub { font-size: .92rem; color: var(--muted); margin-bottom: 18px; }

.stack { display: flex; flex-direction: column; gap: 15px; }

.summary { background: var(--surface-2); border-radius: 8px; padding: 16px 17px; }
.summary .line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: .93rem;
}
.summary .line span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.summary .line.total {
  border-top: 1px solid var(--border-firm);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 1.05rem;
  font-weight: 800;
}
.summary .line.due span:last-child { color: var(--gold); }

/* upload */
.drop {
  border: 1px dashed var(--border-firm);
  border-radius: 8px;
  padding: 22px 18px;
  text-align: center;
  background: var(--surface-2);
  cursor: pointer;
}
.drop:hover { border-color: var(--red); }
.drop svg { width: 26px; height: 26px; color: var(--muted); margin-bottom: 6px; }
.drop .title { font-weight: 700; font-size: .95rem; }
.drop .note { font-size: .84rem; color: var(--muted); margin-top: 3px; }
.drop.filled { border-style: solid; border-color: var(--good); background: var(--good-soft); }
.drop.filled svg { color: var(--good); }

/* otp */
/* confirmation */
.done-mark {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--good-soft); color: var(--good);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.done-mark svg { width: 30px; height: 30px; }
.ref {
  font-family: Oxanium, sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--red);
  text-align: center;
  padding: 14px;
  background: var(--red-soft);
  border-radius: 8px;
  margin: 4px 0 18px;
}

.notice {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  padding: 13px 15px;
  font-size: .9rem;
  color: var(--ink-2);
}
.notice b { color: var(--gold); }

/* ---------- footer ---------- */
.site-foot {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 30px 0 40px;
  font-size: .88rem;
  color: var(--muted);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--red); }

/* Build credit. Deliberately quiet and on its own line rather than a third
   column: the footer's two existing columns are the customer's business, and a
   supplier's name should not sit level with them competing for the same eye. */
.built-by {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  justify-content: center;
  font-size: .8rem;
  color: var(--muted);
}
.built-by strong { color: var(--ink-2); font-weight: 600; }

/* The staging banner. NOT dead once the API is wired — it is gated on
   API.staging and warns that payment and phone verification are not yet on.
   Remove when API.staging goes false on launch day. */
.mock-banner {
  background: var(--ink);
  color: var(--ground);
  font-size: .82rem;
  text-align: center;
  padding: 7px 16px;
}
.mock-banner b { color: var(--gold); }

/* Waitlist form inside the empty-results state. */
.waitlist-form {
  max-width: 320px;
  margin: 22px auto 0;
  text-align: left;
}
.waitlist-form .hint { text-align: center; }

/* Notices raised by showError(). Fixed to the bottom so it is visible wherever
   the customer has scrolled — a message rendered above the fold is no message
   at all on a long form. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 10px;
  font-size: .93rem;
  line-height: 1.45;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.toast[data-kind="error"] {
  background: var(--red);
  color: #fff;
}
.toast[data-kind="info"] {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-firm);
}


/* The first number a shopper looks for. Sits between the lede and the trust
   row so it is read before the date picker, not after it. */
.price-lede {
  margin: 0 0 18px;
  font-size: 1.02rem;
  color: var(--ink-2);
}
.price-lede strong { color: var(--gold, #C2A36B); font-weight: 700; }


/* ------------------------------------------------------------------- fleet */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.fleet-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card, rgba(255,255,255,.02));
}
.fleet-photo {
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, .03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fleet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fleet-photo .no-photo { color: var(--muted); font-size: .82rem; }
.fleet-body { padding: 14px 16px 16px; }
.fleet-body h2 {
  font-family: "Oxanium", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.fleet-rate {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--gold, #C2A36B);
}
.fleet-rate span { font-weight: 500; color: var(--muted); font-size: .86rem; }
.fleet-state { margin: 0; font-size: .88rem; }
.fleet-state.ok   { color: #5FA8A0; }
.fleet-state.wait { color: var(--muted); }
.fleet-count { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }


/* ---------- self-service actions on a found booking ---------- */

/* A row that becomes a column when there is no room, rather than three
   buttons squeezed to four characters each on a 320px handset. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.actions .btn { flex: 1 1 130px; }

/* Destructive, and it has to LOOK different from the primary action — which
   on this site is already red. Filling it with the deep red and darkening the
   text separates "the thing you came to do" from "the thing you cannot undo".
   Same red family, so it still belongs to the brand. */
.btn-danger {
  background: var(--red-deep);
  color: var(--on-red);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.btn-danger:hover { background: #8E1C17; }

/* The warning variant of a notice. The base notice is gold, which reads as
   "worth knowing"; this one is red, which reads as "read this before you
   press the button underneath". */
.notice.warn {
  background: var(--red-soft);
  border-left-color: var(--red);
  color: var(--ink-2);
}
.notice.warn b { color: var(--red); }

/* ---------- printing a confirmation ---------- */

/* Somebody printing this is taking it to the counter, or filing it. What they
   need is the reference, the vehicle, the dates and the money — not the site
   navigation, not the lookup form they have already used, and certainly not a
   "cancel my booking" button on a piece of paper. */
@media print {
  .site-head,
  .site-foot,
  .mock-banner,
  .toast,
  .actions,
  #lookup-form,
  #lookup-empty,
  /* On the confirmation page, the step rail and the panels the customer has
     already walked through are not part of what they are printing. */
  .steps,
  [data-step]:not([data-step="5"]),
  #extend-panel,
  #docs-panel,
  #cancel-panel {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .panel {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }
  .summary { background: #f4f4f4; }
  /* Printed in black on white, gold is nearly invisible. */
  .notice { border-left: 3px solid #666; background: #f4f4f4; }
  .notice b, .summary .line.due span:last-child { color: #000; }
  a[href]::after { content: ""; }
}


/* ---------- date presets ---------- */

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.chip {
  border: 1px solid var(--border-firm);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
}
.chip:hover { border-color: var(--red); color: var(--ink); }
/* Pressed state driven by aria-pressed rather than a class, so the button
   tells a screen reader the same thing the border tells everyone else. */
.chip[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red-deep);
}

.long-hire h2 { font-size: 1.05rem; }


/* ---------- accessibility ---------- */

/* Present to assistive technology, absent from the page. Clip-path rather
   than display:none, which would remove it from the tree entirely, and not
   width:0 either, which stops some screen readers announcing it. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Off-screen until focused, then a real, visible, clickable target. A skip
   link that never becomes visible helps nobody. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--red);
  color: var(--on-red);
  padding: 11px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top .12s ease-out;
}
.skip-link:focus { top: 0; }

/* The site relies on the browser default focus ring, which disappears against
   the red buttons. Made explicit and given room to breathe. */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Programmatic focus targets are moved to for orientation, not interaction —
   a ring on a heading someone did not tab to reads as a bug. */
[tabindex="-1"]:focus { outline: none; }

@media print {
  .skip-link { display: none !important; }
}


/* ---------- numbered sequence ---------- */

/* Was a four-up grid of identical cards with circled numerals. The numbers
   now hang in the margin and the rules are hairlines, so the eye reads a list
   of sentences rather than a row of tiles — and the sentences are allowed to
   be different lengths, which a fixed-height card never permits. */
.section-title {
  font-family: "Oxanium", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.steps-section { margin-top: 56px; }

.sequence {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  max-width: 62ch;
}
.sequence li {
  counter-increment: step;
  position: relative;
  padding: 18px 0 18px 46px;
  border-top: 1px solid var(--border);
}
.sequence li:last-child { border-bottom: 1px solid var(--border); }
.sequence li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 17px;
  font-family: "Oxanium", system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  /* Quiet, not a badge. The number orders the list; it is not the point of it. */
  color: var(--border-firm);
}
.sequence p {
  margin: 0;
  line-height: 1.65;
  color: var(--ink-2);
}
.sequence b { color: var(--ink); font-weight: 700; }

@media (max-width: 520px) {
  .sequence li { padding-left: 38px; }
  .sequence li::before { font-size: 1.2rem; top: 19px; }
}

/* ---------- where to collect ---------- */

.collect-here {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  max-width: 62ch;
}
.collect-here address {
  font-style: normal;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 6px 0 12px;
}
.collect-here .sub { margin-bottom: 16px; }


/* Mileage terms on a result card. Quiet, but next to the price rather than
   buried — it is the part of the bill a customer cannot predict. */
.car-km {
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--muted);
}

/* A borrowed photo is labelled as one. Small, bottom-left, readable on any
   photo because it carries its own dark ground. */
.car-photo { position: relative; }
.photo-note {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(15, 13, 12, .72);
  color: #F2EEEB;
  font-size: .72rem;
  font-weight: 600;
}


/* ---------- reviews ---------- */

/* A list, not a carousel of cards. Same hairline treatment as the numbered
   sequence: the words are the content, so they are what the layout shows. */
.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62ch;
}
.review-list li {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.review-list li:last-child { border-bottom: 1px solid var(--border); }
.review-stars { margin: 0 0 6px; color: var(--gold); letter-spacing: 2px; }
.review-list blockquote {
  margin: 0 0 8px;
  line-height: 1.65;
  color: var(--ink);
}
.review-by { margin: 0; font-size: .86rem; color: var(--muted); }

/* The star picker on the review page. Radio inputs underneath, so it works
   with a keyboard and a screen reader; the labels are what people tap. */
.stars { border: 0; margin: 0; padding: 0; }
.stars legend { font-weight: 600; margin-bottom: 8px; }
.star-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
.star-row input { position: absolute; opacity: 0; pointer-events: none; }
.star-row label {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--border-firm);
  cursor: pointer;
  padding: 2px;
}
/* row-reverse makes "this star and every one before it" a sibling selector. */
.star-row input:checked ~ label,
.star-row label:hover,
.star-row label:hover ~ label { color: var(--gold); }
.star-row input:focus-visible + label { outline: 3px solid var(--red); border-radius: 4px; }
.field textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--border-firm);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}


/* =============================================================================
   September 2026 refresh
   =============================================================================
   Same brand and the same no-build, few-kilobyte promise; more depth. Rounder
   cards, a glassier header, a hero that reads as a shopfront, and components
   for the trip planner, car pages, trust strip, condition photos and the
   WhatsApp button. Everything below overrides or extends what is above, so the
   older rules still document why each thing is the way it is.
   ========================================================================== */

/* ---------- header: glass, with a theme switch ---------- */
.site-head {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.site-head nav { align-items: center; gap: 6px; }
.site-head nav a {
  padding: 8px 12px;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.site-head nav a:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 420px) {
  .site-head nav { gap: 0; font-size: .88rem; }
  .site-head nav a { padding: 8px 9px; }
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { border-color: var(--border-firm); color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 58px 0 44px;
  background:
    radial-gradient(70% 80% at 100% 0%, var(--red-soft) 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, var(--gold-soft) 0%, transparent 70%),
    var(--ground);
}
/* A faint road-map dot grid, fading out towards the copy so it never sits
   behind text at full strength. Pure CSS: no image to download. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 90%);
  mask-image: linear-gradient(115deg, transparent 35%, #000 90%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero h1 { letter-spacing: -.025em; }
.hero h1 .accent { color: var(--red); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 4px var(--good-soft);
}

/* ---------- search card ---------- */
.search-card {
  position: relative;
  border-radius: 18px;
  padding: 22px;
}
.search-card::before {
  content: "";
  position: absolute;
  inset: 0 22px auto;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.field input, .field select { border-radius: var(--radius-sm); }
.field input:focus, .field select:focus {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 16%, transparent);
}
.chip { transition: border-color .15s ease, background-color .15s ease; }

/* ---------- buttons ---------- */
.btn {
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary {
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -10px color-mix(in srgb, var(--red) 70%, transparent);
}
.btn-ghost { background: var(--surface); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-deep); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: .9rem; }

/* ---------- section titles ---------- */
.section-title { display: flex; align-items: center; gap: 12px; }
.section-title::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--red);
  flex: none;
}

/* ---------- result cards ---------- */
.car {
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.car:hover { border-color: var(--border-firm); }
.car-photo {
  aspect-ratio: 16 / 10;
  height: auto;
  background:
    radial-gradient(80% 90% at 50% 110%, color-mix(in srgb, var(--red) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.car-links { display: flex; gap: 8px; }
.car-links .btn { flex: 1; }
.car-body h3 a { color: inherit; text-decoration: none; }
.car-body h3 a:hover { color: var(--red); }

.panel, .empty { border-radius: 18px; }
.fleet-card {
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.fleet-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.fleet-card a.cover { color: inherit; text-decoration: none; display: block; }
.fleet-card .more { margin: 10px 0 0; font-size: .86rem; font-weight: 700; color: var(--red); }
.fleet-state.ok { color: var(--good); font-weight: 600; }

/* ---------- trust strip ---------- */
.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.trust .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
}
.trust .ico svg { width: 19px; height: 19px; }
.trust b { display: block; font-size: .95rem; line-height: 1.3; color: var(--ink); }
.trust span { display: block; font-size: .82rem; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.trust .stars { color: var(--gold); letter-spacing: 1px; }

/* ---------- planner teaser on the home page ---------- */
.teaser {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border-radius: 20px;
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%),
    var(--ink);
  color: var(--ground);
}
@media (min-width: 760px) { .teaser { grid-template-columns: 1fr auto; padding: 30px 34px; } }
.teaser h2 { font-size: 1.45rem; font-weight: 800; color: var(--ground); }
.teaser p { color: color-mix(in srgb, var(--ground) 78%, transparent); margin: 8px 0 0; max-width: 56ch; }
.teaser .routes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.teaser .routes a {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ground) 25%, transparent);
  color: var(--ground);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
}
.teaser .routes a:hover { border-color: var(--ground); }

/* ---------- trip planner ---------- */
.page-head { padding: 40px 0 8px; }
.page-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; }
.page-head p { color: var(--ink-2); max-width: 62ch; margin-top: 10px; }

.planner {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}
@media (min-width: 900px) { .planner { grid-template-columns: 360px minmax(0, 1fr); align-items: start; } }
.planner-form { position: relative; }
@media (min-width: 900px) { .planner-form { position: sticky; top: 88px; } }
.planner-form .stack { gap: 14px; }
.planner-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.seg label {
  display: block;
  margin: 0;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  cursor: pointer;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + label { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + label { outline: 2px solid var(--red); outline-offset: 2px; }
.km-readout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .9rem;
  color: var(--ink-2);
}
.km-readout strong { font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.quotes { display: grid; gap: 14px; }
.quote {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.quote.best { border-color: color-mix(in srgb, var(--good) 55%, var(--border)); }
.quote-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.quote-head h3 { font-size: 1.08rem; font-weight: 700; }
.quote-head h3 a { color: inherit; text-decoration: none; }
.quote-head h3 a:hover { color: var(--red); }
.quote-total { text-align: right; }
.quote-total strong { display: block; font-size: 1.4rem; font-family: Oxanium, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.quote-total span { font-size: .78rem; color: var(--muted); }
.badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  background: var(--good-soft);
  color: var(--good);
}
.badge.warn { background: var(--red-soft); color: var(--red-deep); }

/* The bill, as one stacked bar and the lines under it. The segments are the
   same colours as the lines' dots, so the key is the list itself. */
.bill-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  gap: 2px;
}
.bill-bar i { display: block; height: 100%; }
.bill-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.bill-lines li { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.bill-lines li span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.bill-lines li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.bill-lines .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.bill-lines li.sub { font-size: .82rem; color: var(--muted); }
.bill-lines li.sub span:last-child { color: var(--muted); font-weight: 500; }
.bill-note { font-size: .82rem; color: var(--muted); margin: 0; }
:root { --c-hire: #2a78d6; --c-km: #eb6834; --c-fuel: #1baf7a; }

/* ---------- car page ---------- */
.car-hero {
  display: grid;
  gap: 24px;
  margin-top: 18px;
}
@media (min-width: 880px) { .car-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }
.car-hero .gallery {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 90% at 50% 110%, color-mix(in srgb, var(--red) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--muted);
}
.car-hero .gallery img { width: 100%; height: 100%; object-fit: cover; }
.car-hero .gallery svg { width: 84px; height: 84px; opacity: .45; }
.crumbs { font-size: .86rem; color: var(--muted); margin-top: 26px; }
.crumbs a { color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.facts div {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 700; color: var(--ink); }
.rate-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rate-table th, .rate-table td { padding: 10px 4px; border-bottom: 1px solid var(--border); text-align: left; }
.rate-table td:last-child, .rate-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rate-table th { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.check-result { margin-top: 14px; }

/* ---------- condition photos in My booking ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.photo-grid a {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid figcaption { font-size: .78rem; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.photo-phase { font-size: .82rem; font-weight: 700; color: var(--ink-2); margin: 16px 0 0; }

/* ---------- floating WhatsApp button ---------- */
.wa-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.45);
  transition: background-color .15s ease, transform .15s ease;
}
.wa-fab:hover { background: var(--wa-deep); transform: translateY(-1px); }
.wa-fab svg { width: 26px; height: 26px; flex: none; }

/* Cookie notice for the Meta Pixel. Drawn only when a Pixel id is set in
   site.js; sits above the WhatsApp button rather than under it. */
.consent {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 68px);
  z-index: 60;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--surface-2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}
.consent p { margin: 0 0 10px; font-size: .92rem; color: var(--ink-2); }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* Just the icon on a phone, where a label would cover the page. */
@media (max-width: 640px) {
  .wa-fab { width: 56px; padding: 0; justify-content: center; }
  .wa-fab .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* Out of the way of the toast and of a form's last button. */
body:has(.toast:not([hidden])) .wa-fab { transform: translateY(-72px); }
.site-foot { padding-bottom: 90px; }
@media print { .wa-fab, .theme-toggle { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .wa-fab, .car, .fleet-card, .btn { transition: none; }
}

/* Date inputs have a wide built-in minimum width; without these they push out
   of a two-column row, and on a phone out of the page. */
.planner > *, .planner-form .row > *, .search-grid > * { min-width: 0; }
.field input, .field select { min-width: 0; max-width: 100%; }
.planner-form .row { align-items: end; }
.hint { font-size: .82rem; color: var(--muted); }
.site-head nav a { white-space: nowrap; }
.quote-total strong, .bill-lines li span:last-child { white-space: nowrap; }
.quote-head > div:first-child { min-width: 0; }

/* ---------- one card and one page per car ---------- */
.car-code {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  vertical-align: middle;
}
h1 + .car-code { font-size: .9rem; }
.spec span:first-child { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8rem; }
.fleet-sections { display: grid; gap: 36px; }
.model-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.model-head h2 { font-size: 1.3rem; font-weight: 700; }
.model-head span { font-size: .9rem; color: var(--muted); }
.fleet-body h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 4px; }
.fleet-photo { position: relative; }
.photo-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}
.car-hero .gallery { position: relative; }
.car-hero .gallery > a { display: block; width: 100%; height: 100%; }
.car-hero .gallery { flex-direction: column; }
.thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.thumbs button {
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  opacity: .72;
  transition: opacity .15s ease, border-color .15s ease;
}
.thumbs button:hover { opacity: 1; }
.thumbs button[aria-pressed="true"] { border-color: var(--red); opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.fleet-body h3 .car-code, .quote-head h3 .car-code { display: block; margin-top: 2px; }
.car-links { flex-direction: column; }


/* =============================================================================
   October 2026 — "Midnight showroom"
   =============================================================================
   Dark is now the default (site.js, and the one-line theme script in the head
   of every page); the light theme is still one tap away on the switch. The
   home page leads with a real MasterClass Hilux, a booking bar that floats
   over it, a band of four facts and photo-led car cards with a type filter.
   Same fonts, same no-build promise: one extra photo, served in two sizes.
   ========================================================================== */

/* A deeper, slightly warm near-black, so car photos carry the colour. */
:root[data-theme="dark"] {
  --ground: #0B0A0A;
  --surface: #151312;
  --surface-2: #1D1A19;
  --ink: #F4F0EC;
  --ink-2: #C9C1BB;
  --muted: #A39A93;
  --border: #262120;
  --border-firm: #3A3331;
  --gold: #D6AE6A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B0A0A;
    --surface: #151312;
    --surface-2: #1D1A19;
    --ink: #F4F0EC;
    --ink-2: #C9C1BB;
    --muted: #A39A93;
    --border: #262120;
    --border-firm: #3A3331;
    --gold: #D6AE6A;
  }
}

.home .wrap { max-width: 1200px; padding: 0 24px; }

/* ---------- shared kicker + display headings ---------- */
.kicker {
  margin: 0;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker.muted { color: var(--muted); }
.display {
  font-family: "Oxanium", system-ui, sans-serif;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 10px 0 0;
  max-width: 18ch;
}
.btn-lg { min-height: 54px; padding: 15px 26px; font-size: 1.02rem; border-radius: 12px; }
.btn svg { width: 18px; height: 18px; }
.btn-dark { background: #1A1408; color: #F4F0EC; }
.btn-dark:hover { background: #000; }

/* ---------- header over the hero (home only) ---------- */
.site-head.over-hero {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-head.over-hero .wrap { min-height: 80px; }
.site-head.over-hero .brand img { height: 34px; }
.site-head.over-hero .brand .on-light { display: none; }
.site-head.over-hero .brand .on-dark { display: block; }
.site-head.over-hero nav a { color: #E6DFD9; }
.site-head.over-hero nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.site-head.over-hero .theme-toggle {
  background: rgba(11,10,10,.45);
  border-color: rgba(255,255,255,.18);
  color: #E6DFD9;
}
.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(11,10,10,.4);
  font-weight: 700;
}
.nav-call svg { width: 15px; height: 15px; color: var(--gold); }
@media (max-width: 860px) { .nav-wide { display: none; } }

/* ---------- hero ---------- */
.showroom-hero {
  position: relative;
  color: #F4F0EC;
  padding: 128px 0 176px;
  background-color: #0B0A0A;
  background-image:
    linear-gradient(90deg, rgba(11,10,10,.97) 0%, rgba(11,10,10,.86) 30%, rgba(11,10,10,.32) 60%, rgba(11,10,10,.10) 100%),
    linear-gradient(0deg, var(--ground) 0%, rgba(11,10,10,0) 30%),
    url("hero-hilux.jpg");
  background-size: cover;
  background-position: 72% 58%;
}
.showroom-hero .eyebrow {
  background: rgba(21,19,18,.72);
  border-color: rgba(255,255,255,.12);
  color: #D9D1CA;
  box-shadow: none;
}
.showroom-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.3rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.025em;
  max-width: 13ch;
  margin-top: 6px;
  color: #F4F0EC;
}
.showroom-hero h1 .accent { color: #D6AE6A; }
.showroom-hero .lede {
  margin-top: 22px;
  max-width: 34ch;
  font-size: 1.18rem;
  line-height: 1.55;
  color: #CFC7C0;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.showroom-hero .btn-ghost {
  background: rgba(11,10,10,.45);
  color: #F4F0EC;
  border-color: rgba(255,255,255,.22);
}
.showroom-hero .btn-ghost:hover { border-color: #fff; }

@media (max-width: 760px) {
  .showroom-hero {
    padding: 300px 0 150px;
    background-image:
      linear-gradient(180deg, rgba(11,10,10,.55) 0%, rgba(11,10,10,.1) 24%, rgba(11,10,10,.78) 48%, rgba(11,10,10,.94) 70%, var(--ground) 100%),
      url("hero-hilux-800.jpg");
    background-position: 60% 0%;
    background-size: cover;
  }
  .showroom-hero .lede { font-size: 1.05rem; }
  .hero-ctas .btn { flex: 1 1 auto; }
}

/* ---------- the floating booking bar ---------- */
.dock-wrap { position: relative; z-index: 2; margin-top: -132px; }
.search-card.dock {
  margin-top: 0;
  padding: 22px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--border-firm);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.search-card.dock::before { display: none; }
.dock-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.dock .presets { margin: 0; }
.dock-price { margin: 0; font-size: .92rem; color: var(--muted); }
.dock-price b { color: var(--gold); font-size: 1.02rem; }
.dock .search-grid { margin-top: 16px; gap: 12px; }
@media (min-width: 900px) {
  .dock .search-grid { grid-template-columns: 1fr 1fr .7fr 1fr; align-items: end; }
}
.dock .field input, .dock .field select {
  min-height: 54px;
  border-radius: 12px;
  background: var(--ground);
  font-weight: 700;
}
.dock .field-go .btn { min-height: 54px; border-radius: 12px; font-size: 1.02rem; }
.dock-hint { margin: 12px 0 0; font-size: .85rem; color: var(--muted); }
.chip[aria-pressed="true"] {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--ink);
}

/* ---------- facts band (the trust strip, restyled) ---------- */
.trust.factband {
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust.factband li {
  display: block;
  padding: 26px 22px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.trust.factband li + li { border-left: 1px solid var(--border); }
@media (max-width: 819px) {
  .trust.factband li:nth-child(3) { border-left: 0; }
  .trust.factband li:nth-child(n+3) { border-top: 1px solid var(--border); }
  .trust.factband li { padding: 20px 16px; }
}
@media (min-width: 820px) { .trust.factband li:first-child { padding-left: 0; } }
.trust.factband b {
  font-family: "Oxanium", system-ui, sans-serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}
.trust.factband li:first-child b { color: var(--gold); }
.trust.factband span { font-size: .88rem; margin-top: 6px; }

/* ---------- fleet section ---------- */
.fleet-section { margin-top: 104px; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
}
.type-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.type-filter .chip { min-height: 40px; padding: 8px 16px; }
.type-filter .chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}
.type-filter .chip .n { opacity: .6; margin-left: 4px; font-weight: 600; }
.home .results-head { margin-top: 26px; }
.home .results-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink-2); }
.home .fleet { gap: 20px; }
@media (min-width: 1080px) { .home .fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fleet-more { margin: 26px 0 0; text-align: right; }
.fleet-more a { font-weight: 700; color: var(--gold); text-decoration: none; }
.fleet-more a:hover { text-decoration: underline; }

.car {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
/* display:flex above would otherwise beat the hidden attribute the type filter sets. */
.car[hidden] { display: none; }
.car:hover { transform: translateY(-4px); border-color: var(--border-firm); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .car:hover { transform: none; } }
.car-photo { aspect-ratio: 16 / 10; height: auto; overflow: hidden; background: var(--surface-2); }
/* Most fleet photos are portrait phone snaps: crop them into one frame so a
   row of cards lines up, centred a little low where the car usually is.
   Absolute, because the older grid centring let a tall image set the row
   height and stretch the frame past its 16:10. */
.car-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transition: transform .5s ease;
}
.car:hover .car-photo img { transform: scale(1.04); }
.car-type, .car-free {
  position: absolute;
  top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(11,10,10,.78);
  color: #F4F0EC;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.car-type { left: 12px; }
.car-free { right: 12px; display: inline-flex; align-items: center; gap: 6px; color: #A8E6DB; }
.car-free i { width: 7px; height: 7px; border-radius: 50%; background: #55B8A8; }
.car-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.car-body h3 { font-size: 1.32rem; line-height: 1.15; }
.car .spec span {
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.car .price-row { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.car .price .total {
  font-family: "Oxanium", system-ui, sans-serif;
  color: var(--gold);
  font-size: 1.7rem;
  font-weight: 800;
}
.car .car-links { margin-top: 14px; }

/* ---------- how it works ---------- */
.how {
  display: grid;
  gap: 28px 64px;
  margin-top: 112px;
}
@media (min-width: 900px) { .how { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.how .sub { margin-top: 16px; color: var(--muted); max-width: 40ch; }
.how .sequence { max-width: none; }
.how .sequence li { padding: 22px 0 22px 84px; }
.how .sequence li::before {
  content: counter(step, decimal-leading-zero);
  top: 20px;
  font-size: 2.3rem;
  color: var(--gold);
}
@media (max-width: 520px) {
  .how .sequence li { padding-left: 64px; }
  .how .sequence li::before { font-size: 1.8rem; }
}

/* ---------- trip planner + business, side by side ---------- */
.duo { display: grid; gap: 20px; margin-top: 112px; }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo .teaser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 34px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
.duo .teaser h2 { font-size: 1.75rem; color: var(--ink); }
.duo .teaser p { margin: 0; color: var(--muted); }
.duo .teaser .routes { margin: 0; }
.duo .teaser .routes a { border-color: var(--border-firm); color: var(--ink-2); }
.duo .teaser .routes a:hover { border-color: var(--ink); color: var(--ink); }
.duo .teaser .btn { margin-top: auto; }
.biz-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 34px;
  border-radius: 22px;
  background: #D6AE6A;
  color: #1A1408;
}
.biz-card .kicker { color: #4A3A17; }
.biz-card h2 {
  font-family: "Oxanium", system-ui, sans-serif;
  font-size: 1.75rem;
  line-height: 1.12;
  font-weight: 800;
  color: #1A1408;
}
.biz-card p { margin: 0; color: #3B2F14; }
.biz-card .btn { margin-top: auto; }

/* ---------- where you collect + what to bring ---------- */
.collect {
  display: grid;
  gap: 40px 64px;
  margin-top: 112px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) { .collect { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.collect .collect-here { border: 0; padding: 0; max-width: none; }
.collect .collect-here address {
  font-family: "Oxanium", system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.3;
  margin: 14px 0 12px;
}
.ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 32px; color: var(--ink-2); }
.ticks li b { color: var(--ink); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}
.bring .notice { margin-top: 20px; }
.home .site-foot { margin-top: 96px; }