/* Black Label Rentals — demo site
   Dark, black-tie, road-ready. Bodoni Moda display / Archivo UI.
   Gold is the 10% accent. No neon, no glow, no gradient text. */

/* ---------- tokens ---------- */
:root {
  --bg: oklch(0.13 0.004 262);
  --bg-raised: oklch(0.162 0.005 262);
  --bg-card: oklch(0.188 0.006 262);
  --bg-inset: oklch(0.105 0.004 262);
  --line: oklch(0.34 0.008 262);
  --line-soft: oklch(0.235 0.006 262);
  --ink: oklch(0.955 0.004 262);
  --ink-dim: oklch(0.82 0.006 262);
  --ink-faint: oklch(0.66 0.006 262);
  --gold: oklch(0.855 0.068 92);
  --gold-deep: oklch(0.72 0.075 88);
  --gold-ink: oklch(0.165 0.012 262);
  --ok: oklch(0.76 0.12 152);
  --err: oklch(0.7 0.16 28);

  --font-display: "Bodoni Moda", "Bodoni MT", Didot, serif;
  --font-ui: Archivo, "Helvetica Neue", Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.333rem;
  --text-xl: 1.777rem;
  --text-2xl: 2.369rem;

  --radius: 3px;
  --radius-lg: 6px;
  --pagew: 1160px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* The page gutter, in one place. The full-bleed scrollers (gallery, rolls)
     cancel it with a negative margin and put it back as scroll padding, so
     the first card lines up with the text above it. Change it here or the
     carousels drift out of alignment. */
  --gutter: clamp(20px, 4vw, 40px);
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--gold-ink); }

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

.wrap { max-width: var(--pagew); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-weight: 600; line-height: 1.12; letter-spacing: 0.005em; }
.display {
  font-family: var(--font-display);
  font-weight: 600;
  /* Bodoni Moda is a variable font with an optical-size axis. Left on auto,
     an 86px headline gets the "display" cut whose hairlines are thinnest,
     which is unreadable over a photo. Pinning a text-size cut keeps the
     strokes solid at every size. Measured on the live hero 2026-09-22. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
  letter-spacing: 0.004em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--gold);
}

/* the "label" motif: bordered tag echoing the brand name */
.label-tag {
  display: inline-block;
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 5px 12px 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 14px 26px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
  min-height: 48px;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: oklch(0.9 0.055 94); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-quiet { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 4px; padding: 8px 4px; min-height: 0; }
.btn-quiet:hover { color: var(--ink); }
.btn[disabled] { cursor: not-allowed; }
.btn-gold[disabled] { background: var(--bg-card); color: var(--ink-faint); border: 1px solid var(--line-soft); }
.btn-ghost[disabled] { opacity: 0.45; }
.btn-block { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out);
}
.nav.scrolled { border-bottom-color: var(--line-soft); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 72px;
}
.nav-brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.nav-brand img.mark { height: 30px; width: auto; }
.nav-brand img.word { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--s6); list-style: none; }
.nav-links a:not(.btn) {
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.nav-links a:not(.btn):hover { color: var(--gold); }
.nav-links .btn { padding: 10px 20px; min-height: 42px; }
.nav-burger { display: none; }

@media (max-width: 780px) {
  .nav-links { display: none; }
  .nav-burger {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
  }
  .nav-burger svg { width: 22px; height: 22px; stroke: var(--ink); }
  .nav-drawer {
    display: grid;
    gap: var(--s4);
    padding: var(--s4) 0 var(--s6);
  }
  .nav-drawer a {
    text-decoration: none;
    font-size: var(--text-lg);
    font-family: var(--font-display);
    color: var(--ink);
  }
  .nav-drawer .btn { font-family: var(--font-ui); font-size: var(--text-sm); justify-self: start; }
  .nav-drawer[hidden] { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 72%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two layers: a vertical ramp that reaches full dark at the bottom, and a
     scrim behind the text column so the headline sits on dark whatever the
     photo does behind it. The old ramp fell to 12% right where the headline
     crossed the stadium glass. */
  background:
    linear-gradient(to right, oklch(0.11 0.004 262 / 0.72) 0%, oklch(0.11 0.004 262 / 0.55) 42%, oklch(0.11 0.004 262 / 0.10) 70%, oklch(0.11 0.004 262 / 0) 100%),
    linear-gradient(to top, oklch(0.11 0.004 262 / 0.97) 0%, oklch(0.11 0.004 262 / 0.78) 30%, oklch(0.11 0.004 262 / 0.42) 62%, oklch(0.11 0.004 262 / 0.5) 100%);
}
.hero-content {
  width: 100%;
  padding-block: var(--s8) var(--s8);
  display: grid;
  gap: var(--s5);
  max-width: 720px;
}
.hero h1 {
  font-size: clamp(2.9rem, 8.5vw, 5.4rem);
  line-height: 1.02;
  text-shadow: 0 2px 24px oklch(0.11 0.004 262 / 0.7), 0 1px 2px oklch(0.11 0.004 262 / 0.6);
}
.hero .sub {
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 44ch;
  text-shadow: 0 1px 12px oklch(0.11 0.004 262 / 0.7);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* spec strip under hero */
.spec-strip { border-block: 1px solid var(--line-soft); background: var(--bg-raised); }
.spec-strip ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.spec-strip li {
  padding: var(--s4) var(--s4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.spec-strip li + li { border-left: 1px solid var(--line-soft); }
.spec-strip strong { display: block; color: var(--ink); font-size: var(--text-base); letter-spacing: 0; }
@media (max-width: 640px) {
  .spec-strip ul { grid-template-columns: repeat(2, 1fr); }
  .spec-strip li:nth-child(odd) { border-left: 0; }
  .spec-strip li:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { display: grid; gap: var(--s4); margin-bottom: clamp(32px, 5vw, 56px); max-width: 640px; }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.section-head p { color: var(--ink-dim); max-width: 56ch; }

/* steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  counter-reset: step;
}
.step { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--line-soft); }
.step .num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--gold);
  line-height: 1;
}
.step h3 { font-size: var(--text-lg); }
.step p { color: var(--ink-dim); font-size: var(--text-sm); line-height: 1.65; max-width: 38ch; }

/* rolls strip */
.rolls-wrap { position: relative; }
.rolls {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  /* The cut-off card at the right edge is the affordance that says "more".
     Faded, it reads as a continuation; hard-cropped it reads as a bug. The
     mask lifts once the strip is scrolled to the end. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent 100%);
}
.rolls::-webkit-scrollbar { display: none; }
.rolls.at-end { -webkit-mask-image: none; mask-image: none; }
.rolls-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 30vw, 360px);
  gap: var(--s4);
  padding-bottom: var(--s3);
}
.roll { scroll-snap-align: start; display: grid; gap: var(--s3); }
.roll a { display: block; border-radius: var(--radius); overflow: hidden; }
.roll img { aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; transition: transform 400ms var(--ease-out); }
.roll a:hover img { transform: scale(1.03); }
.roll figcaption { font-size: var(--text-sm); color: var(--ink-dim); display: flex; gap: var(--s2); align-items: baseline; }
.roll figcaption b { color: var(--ink); font-weight: 600; }

.rolls-nav[hidden] { display: none; }
.rolls-nav .lb-nav[disabled] { opacity: 0.3; cursor: default; }
.rolls-nav .lb-nav[disabled]:hover { border-color: var(--line-soft); color: var(--ink); }
.rolls-nav .lb-nav { top: calc(50% - var(--s5)); }
.rn-prev { left: calc(-1 * var(--s5)); }
.rn-next { right: calc(-1 * var(--s5)); }
@media (max-width: 800px) {
  /* A thumb already does this on a phone, and the buttons would sit on top
     of the photos. */
  .rolls-nav { display: none; }
  .rolls { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- photo viewer ----------
   Hand-rolled, native <dialog>, no library. Tapping a gallery photo used to
   navigate to the raw JPEG: a black page with no chrome and a back button as
   the only way home. gallery.js intercepts the click; with JavaScript off the
   anchor still opens the file in a new tab, so the page is never lost. */
.lb {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.lb[open] {
  display: grid;
  grid-template-rows: auto 1fr;
  animation: lb-in 180ms var(--ease-out);
}
.lb::backdrop { background: oklch(0.08 0.004 262 / 0.94); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
html.lb-open, html.lb-open body { overflow: hidden; }

.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--gutter);
  min-height: 56px;
}
.lb-count {
  font-size: var(--text-sm);
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.lb-close, .lb-nav {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--bg-card) 88%, transparent);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  line-height: 1;
  transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.lb-close:hover, .lb-nav:hover { border-color: var(--gold); color: var(--gold); }
.lb-close svg, .lb-nav svg { width: 20px; height: 20px; stroke: currentColor; }

.lb-stage {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s3);
  min-height: 0;
  padding: 0 var(--gutter) var(--s5);
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.lb-img {
  max-width: 100%;
  max-height: calc(100svh - 128px);
  object-fit: contain;
  border-radius: var(--radius);
  /* A native image drag fires pointercancel, which would swallow the swipe. */
  -webkit-user-drag: none;
}
.lb-cap { font-size: var(--text-sm); color: var(--ink-dim); text-align: center; max-width: 64ch; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: max(8px, calc(var(--gutter) - 26px)); }
.lb-next { right: max(8px, calc(var(--gutter) - 26px)); }
.lb-nav[hidden] { display: none; }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5) var(--s2);
  font-weight: 600;
  font-size: var(--text-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--gold);
  line-height: 1;
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 var(--s2) var(--s5); color: var(--ink-dim); max-width: 62ch; }

/* CTA band */
.cta-band {
  background: var(--bg-raised);
  border-block: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
}
.cta-band .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: clamp(40px, 6vw, 72px);
}
.cta-band h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--gold); }
.cta-band p { color: var(--ink-dim); }
.cta-band .btn { background: var(--gold); color: var(--gold-ink); }
.cta-band .btn:hover { background: oklch(0.9 0.055 94); }
.cta-band a.tel { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.cta-band a.tel:hover { color: var(--gold); }

/* footer */
.footer { border-top: 1px solid var(--line-soft); padding-block: var(--s7) var(--s6); }
.footer .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s6);
  align-items: start;
}
.footer img.word { height: 34px; width: auto; opacity: 0.9; }
.footer h4 { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s3); font-weight: 600; }
.footer ul { list-style: none; display: grid; gap: var(--s2); }
.footer a { color: var(--ink-dim); text-decoration: none; font-size: var(--text-sm); }
.footer a:hover { color: var(--gold); }
.footer p { color: var(--ink-dim); font-size: var(--text-sm); max-width: 40ch; }
.footer .fine {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
}
@media (max-width: 720px) {
  .footer .cols { grid-template-columns: 1fr; }
}

/* ---------- van page ---------- */
.page-head { padding-block: clamp(40px, 6vw, 72px) 0; }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.page-head .meta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); color: var(--ink-dim); font-size: var(--text-sm); margin-top: var(--s4); }
.page-head .meta span { display: inline-flex; align-items: center; gap: var(--s2); }
.page-head .meta svg { width: 15px; height: 15px; stroke: var(--gold); }

/* SEO page body. The reading measure belongs to the sections, not to the wrap:
   a 820px .wrap kept its own margin-inline:auto and centred itself under a
   full-width page head, so the h1 and its own copy started at different x.
   The vans section opts out of the measure so the mini grid gets three across
   instead of laying out 2 + 1 inside 820px. The top padding is the gap the
   intro line never had before the first heading. */
.seo-body { display: grid; gap: var(--s7); padding-block: var(--s7); }
.seo-body > section { max-width: 820px; }
.seo-body > .seo-fleet { max-width: none; }
.seo-body > .seo-fleet > p { max-width: 820px; }

/* Gallery. Chris sends photos a van at a time, so every count from one to
   eight has to look deliberate: one layout per count, each of which closes up
   with no half-empty row. The old grid left a sixth photo alone on a third
   row at quarter width, which read as a broken page. Past five, the extra
   tiles stay in the DOM (the viewer and the phone carousel still reach them)
   and the fifth wears a "+N photos" badge. */
.gallery-wrap { position: relative; margin-top: var(--s6); }
.gallery {
  display: grid;
  gap: var(--s3);
  --gal-row: clamp(150px, 18vw, 205px);
  grid-auto-rows: var(--gal-row);
}
.gallery a { display: block; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-inset); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.gallery a:hover img { transform: scale(1.03); }

.gallery.n1 { grid-template-columns: 1fr; grid-auto-rows: calc(var(--gal-row) * 2 + var(--s3)); }
.gallery.n2 { grid-template-columns: 1fr 1fr; grid-auto-rows: calc(var(--gal-row) * 2 + var(--s3)); }
.gallery.n3 { grid-template-columns: 2fr 1fr; }
.gallery.n3 a:first-child { grid-row: span 2; }
.gallery.n4 { grid-template-columns: 2fr 1fr 1fr; }
.gallery.n4 a:first-child { grid-row: span 2; }
.gallery.n4 a:nth-child(4) { grid-column: span 2; }
.gallery.n5 { grid-template-columns: 2fr 1fr 1fr; }
.gallery.n5 a:first-child { grid-row: span 2; }
.gallery.n5 a:nth-child(n+6) { display: none; }

.gal-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: oklch(0.1 0.004 262 / 0.55);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.gal-count { display: none; }

@media (max-width: 800px) {
  /* One column of tall tiles is a scroll marathon; sideways with snap points
     is how a phone shows a set of photos. Full bleed, so a tile edge at the
     screen edge says there is more. */
  .gallery,
  .gallery.n1,
  .gallery.n2,
  .gallery.n3,
  .gallery.n4,
  .gallery.n5 {
    display: flex;
    gap: var(--s3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery a,
  .gallery.n3 a:first-child,
  .gallery.n4 a:first-child,
  .gallery.n4 a:nth-child(4),
  .gallery.n5 a:first-child,
  .gallery.n5 a:nth-child(n+6) {
    display: block;
    grid-row: auto;
    grid-column: auto;
    flex: 0 0 min(84vw, 420px);
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }
  .gallery a:hover img { transform: none; }
  .gal-more { display: none; }
  .gal-count {
    display: block;
    position: absolute;
    right: var(--s3);
    bottom: var(--s3);
    padding: 4px 10px;
    border-radius: 999px;
    background: oklch(0.1 0.004 262 / 0.7);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
}

.van-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-block: var(--s7) var(--s9);
}
.van-main { display: grid; gap: var(--s7); }
.van-main h2 { font-size: var(--text-xl); margin-bottom: var(--s4); }
.van-main .prose p { color: var(--ink-dim); max-width: 62ch; }
.van-main .prose p + p { margin-top: var(--s4); }

.amenities { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); }
.amenities li { display: flex; gap: var(--s3); align-items: baseline; color: var(--ink-dim); font-size: var(--text-sm); padding: var(--s2) 0; }
.amenities li::before { content: ""; width: 6px; height: 6px; background: var(--gold); border-radius: 1px; flex-shrink: 0; transform: translateY(-1px); }
@media (max-width: 560px) { .amenities { grid-template-columns: 1fr; } }

.rules { list-style: none; display: grid; }
.rules li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line-soft); font-size: var(--text-sm); }
.rules li span:first-child { color: var(--ink); font-weight: 600; }
.rules li span:last-child { color: var(--ink-dim); text-align: right; max-width: 34ch; }

/* rate rail */
.rate-rail { position: sticky; top: 96px; display: grid; gap: var(--s4); }
.rate-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  display: grid;
  gap: var(--s4);
}
.rate-card .price { display: flex; align-items: baseline; gap: var(--s2); }
.rate-card .price b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; line-height: 1; }
.rate-card .price span { color: var(--ink-dim); }
.rate-card ul { list-style: none; display: grid; gap: var(--s2); }
.rate-card ul li { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-dim); }
.rate-card ul li b { color: var(--ink); font-weight: 600; }
.rate-note { font-size: var(--text-xs); color: var(--ink-faint); text-align: center; }

@media (max-width: 900px) {
  .van-layout { grid-template-columns: 1fr; }
  .rate-rail { position: static; }
}

/* Price and Check dates on a phone. The rate rail is the desktop answer; on a
   phone it lands four screens down, so the price goes under the title and the
   button lives in a bar pinned to the bottom. Both are desktop-invisible: the
   rail already says all of it there. */
.price-line, .van-bar { display: none; }

@media (max-width: 900px) {
  .price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s4);
    color: var(--ink-dim);
    font-size: var(--text-sm);
  }
  .price-line b {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
  }
  .price-line i { font-style: normal; color: var(--ink-faint); }

  body.van-page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  .van-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    /* nav is 40 and sits on top; the dialog is in the top layer above both. */
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklab, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-soft);
  }
  .vb-price { min-width: 0; }
  .vb-price b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
  .vb-price span {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .van-bar .btn { flex: none; padding: 12px 20px; min-height: 44px; }
  /* Out of the way of the photo viewer, and gone once the real rate card is
     on screen — two Check dates buttons on one screen is one too many. */
  html.lb-open .van-bar,
  .van-bar.parked { display: none; }
}

/* ---------- booking page ---------- */
.book-shell {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: var(--s6) var(--s9);
}
@media (max-width: 900px) {
  .book-shell { grid-template-columns: 1fr; }
}

.book-steps { display: grid; gap: var(--s4); }

/* goTo() scrolls the step head to the top of the viewport, where the 72px
   sticky nav was sitting on top of it. */
.bstep { scroll-margin-top: 84px; }

.bstep {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  overflow: hidden;
}
.bstep-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
  text-align: left;
  transition: background-color 140ms var(--ease-out);
}
.bstep:not(.active) .bstep-head:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.bstep:not(.active) .bstep-head::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink-faint);
  line-height: 1;
}
.bstep:not(.active) .bstep-head:hover::after { color: var(--gold); }
.bstep.active .bstep-head { cursor: default; }
.bstep-head .n {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--ink-dim);
  flex-shrink: 0;
  transition: all 200ms var(--ease-out);
}
.bstep.active .n { border-color: var(--gold); color: var(--gold); }
.bstep.done .n { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.bstep-head .t { display: grid; gap: 1px; min-width: 0; }
.bstep-head .t b { font-size: var(--text-base); }
.bstep-head .t small { color: var(--ink-faint); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bstep-head .edit { margin-left: auto; font-size: var(--text-sm); color: var(--gold); text-decoration: underline; text-underline-offset: 3px; flex-shrink: 0; }
.bstep-body { padding: 0 var(--s5) var(--s6); display: grid; gap: var(--s5); }
.bstep:not(.active) .bstep-body { display: none; }
.bstep.locked { opacity: 0.55; }
.bstep.locked .bstep-head { cursor: default; }

/* calendar */
.cal-wrap { display: grid; gap: var(--s4); }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
@media (max-width: 640px) { .cal-months { grid-template-columns: 1fr; } }
.cal { display: grid; gap: var(--s3); }
.cal h4 { text-align: center; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .dow { text-align: center; font-size: var(--text-xs); color: var(--ink-faint); padding: var(--s2) 0; letter-spacing: 0.06em; }
.cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius);
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
  position: relative;
}
.cal-day:not([disabled]):hover { background: var(--bg-card); }
.cal-day[disabled] { color: oklch(0.42 0.012 80); cursor: not-allowed; }
.cal-day.blocked { color: oklch(0.42 0.012 80); cursor: not-allowed; }
.cal-day.blocked::after {
  content: "";
  position: absolute;
  width: 55%; height: 1px;
  background: oklch(0.42 0.012 80);
  transform: rotate(-24deg);
}
.cal-day.in-range { background: color-mix(in oklab, var(--gold) 16%, transparent); border-radius: 0; }
.cal-day.range-start, .cal-day.range-end { background: var(--gold); color: var(--gold-ink); font-weight: 700; }
.cal-day.range-start { border-radius: var(--radius) 0 0 var(--radius); }
.cal-day.range-end { border-radius: 0 var(--radius) var(--radius) 0; }
.cal-day.range-start.range-end { border-radius: var(--radius); }
.cal-legend { display: flex; gap: var(--s5); font-size: var(--text-xs); color: var(--ink-faint); }
/* A picked day that only takes some hours says so under the time menus. */
.time-note { margin-top: var(--s3); font-size: var(--text-sm); color: var(--ink-faint); }
.cal-legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.cal-legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-inset);
  font-size: var(--text-sm);
}
.cal-toolbar .msg { color: var(--ink-dim); }
.cal-toolbar .msg b { color: var(--gold); font-weight: 600; }
.cal-toolbar .clear { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; font-size: var(--text-xs); }
.cal-toolbar .clear:hover { color: var(--ink); }
.cal-toolbar .clear[hidden] { display: none; }
.cal-scope { margin: 0; font-size: var(--text-xs); color: var(--ink-dim); }
.cal-scope[hidden] { display: none; }
.cal-scope .clear { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; margin-left: var(--s2); }

@keyframes stepflash {
  0%, 100% { border-color: var(--line-soft); }
  25%, 75% { border-color: var(--err); }
}
.bstep.flash { animation: stepflash 900ms ease-in-out 2; }
.cal-toolbar.flash { animation: stepflash 900ms ease-in-out 2; }
.need-note { font-size: var(--text-sm); color: var(--err); display: none; }
.need-note.show { display: block; }

/* forms */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--s2); align-content: start; }
/* Inputs are the same height whether or not a hint sits under them: the
   grid row stretches, the input must not. */
.field input, .field select { align-self: start; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input, .field select {
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 13px 14px;
  font-size: var(--text-base);
  transition: border-color 140ms var(--ease-out);
  width: 100%;
  min-height: 48px;
}
.field input:focus, .field select:focus { border-color: var(--gold); outline: none; }
.field input::placeholder { color: var(--ink-faint); }
.field .hint { font-size: var(--text-xs); color: var(--ink-faint); }
.field.invalid input { border-color: var(--err); }
.field .fielderr { font-size: var(--text-xs); color: var(--err); display: none; }
.field.invalid .fielderr { display: block; }
/* Other drivers on the booking form: names only, one box each. */
.other-drivers { display: grid; gap: var(--s3); margin-top: var(--s5); }
.other-drivers .od-h { font-size: var(--text-base); font-weight: 600; }
.other-drivers .hint { font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.6; }
#odList { display: grid; gap: var(--s3); }
#odList:empty { display: none; }
.od-line { display: flex; gap: var(--s3); align-items: center; }
.od-line input { flex: 1; min-width: 0; }
#odAdd { justify-self: start; }
#odAdd[hidden] { display: none; }
#odMore { display: grid; gap: var(--s3); }
#odMore[hidden] { display: none; }
/* Trip page: one license box per driver. */
.lic-section { display: grid; }
.lic-list { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
.lic-driver { display: grid; gap: var(--s2); }
.lic-driver .lic-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); font-weight: 600; }
#licAddDriver[hidden], #drop-insurance[hidden] { display: none; }
/* Signing page: who has a license on file. */
.ag-licenses { display: grid; gap: var(--s3); }
.ag-lic-list { display: grid; gap: var(--s2); }
.ag-lic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.ag-lic .who { font-weight: 600; }
.ag-lic .ok { color: var(--ink-dim); font-size: var(--text-sm); }
.ag-lic.missing { border-color: color-mix(in oklab, var(--err) 45%, var(--line-soft)); }
.ag-licenses.invalid .ag-lic.missing { border-color: var(--err); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23bfae8f' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* radio tiles */
.tiles { display: grid; gap: var(--s3); }
.tile {
  display: flex;
  align-items: center;
  gap: var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--s4);
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.tile:hover { border-color: var(--line); }
.tile input { accent-color: var(--gold); width: 18px; height: 18px; flex-shrink: 0; }
.tile .t { display: grid; gap: 1px; }
.tile .t b { font-size: var(--text-sm); font-weight: 600; }
.tile .t small { color: var(--ink-faint); font-size: var(--text-xs); }
.tile .fee { margin-left: auto; font-weight: 600; font-size: var(--text-sm); color: var(--ink-dim); white-space: nowrap; }
.tile:has(input:checked) { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 7%, transparent); }
/* .tile sets display, which beats [hidden]: the van step hides vans booked on the guest's dates. */
.tile[hidden] { display: none; }
.van-note { margin: 0; color: var(--ink-dim); font-size: var(--text-sm); }
.van-note:empty { display: none; }
.tile-van .thumb { width: 96px; height: 72px; object-fit: cover; border-radius: calc(var(--radius) - 2px); flex-shrink: 0; background: var(--ink-faint); }
@media (max-width: 480px) {
  /* Four things across 390px is one too many: the price steps down under
     the name instead of squeezing "15 passengers" onto two lines. */
  .tile-van { display: grid; grid-template-columns: auto 72px minmax(0, 1fr); gap: var(--s3) var(--s4); }
  .tile-van .thumb { width: 72px; height: 54px; grid-row: 1 / 3; }
  .tile-van input { grid-row: 1 / 3; }
  .tile-van .t { grid-column: 3; }
  .tile-van .fee { grid-column: 3; margin-left: 0; color: var(--gold); }
}

/* license uploader */
.lic-drop {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  display: grid;
  justify-items: center;
  gap: var(--s3);
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.lic-drop:hover, .lic-drop.drag { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 5%, var(--bg-raised)); }
.lic-drop svg { width: 34px; height: 34px; stroke: var(--gold); }
.lic-drop b { font-size: var(--text-sm); }
.lic-drop small { color: var(--ink-faint); font-size: var(--text-xs); max-width: 34ch; }
/* agreement */
.agree-box {
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--s4);
  max-height: 180px;
  overflow-y: auto;
  font-size: var(--text-xs);
  color: var(--ink-dim);
  line-height: 1.7;
}
.agree-box h4 { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--s2); color: var(--ink); }
.agree-box p + h4 { margin-top: var(--s3); }
.check { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; font-size: var(--text-sm); color: var(--ink-dim); }
.check input { accent-color: var(--gold); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }

/* discount code
   Guests arrive with a first responder or launch code. The box only holds
   text: whether it is real is the server's answer, which arrives on the
   quote, so the page can never show a discount the booking will not honour. */
.code-box { display: grid; gap: var(--s2); }
.code-box > label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.code-row { display: flex; gap: var(--s3); }
.code-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.code-row input::placeholder { text-transform: none; }
.code-row .btn { flex: 0 0 auto; }
.code-msg { font-size: var(--text-sm); margin: 0; min-height: 1.2em; }
.code-msg.ok { color: var(--ok); }
.code-msg.err { color: var(--err); }

/* why a night is above the advertised rate
   Sits under the rental row in the summary, in the owner's own words, so a
   peak week is explained where the number appears rather than argued about
   later. */
.sum-lines .note-row span {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  padding-left: var(--s3);
  border-left: 2px solid var(--line-soft);
}

/* extras, folded away
   Four extra tiles on a phone pushed Continue two screens below the calendar
   that decides the booking. Closed by default; book.js writes the count into
   the summary and adds " · N added" the moment anything is ticked, so a fold
   never hides a choice the guest already made. */
.extras {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-inset);
}
.extras[hidden] { display: none; }
.extras > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4);
  font-size: var(--text-sm);
  font-weight: 600;
}
.extras > summary::-webkit-details-marker { display: none; }
.extras > summary .count { color: var(--ink-faint); font-weight: 400; }
.extras > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--gold);
  line-height: 1;
  transition: transform 200ms var(--ease-out);
}
.extras[open] > summary::after { transform: rotate(45deg); }
.extras .tiles { padding: 0 var(--s4) var(--s4); }

/* summary rail */
.sum-rail { position: sticky; top: 96px; display: grid; gap: var(--s4); }
.sum-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sum-card .van {
  display: flex;
  gap: var(--s4);
  padding: var(--s4);
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.sum-card .van img { width: 86px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.sum-card .van b { display: block; font-size: var(--text-sm); }
.sum-card .van small { color: var(--ink-faint); font-size: var(--text-xs); }
.sum-lines { padding: var(--s4) var(--s5); display: grid; gap: var(--s3); }
.sum-lines .row { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--text-sm); color: var(--ink-dim); }
.sum-lines .row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-lines .row.total { border-top: 1px solid var(--line-soft); padding-top: var(--s3); font-size: var(--text-base); color: var(--ink); }
.sum-lines .row.total b { font-size: var(--text-lg); }
.sum-lines .muted { font-size: var(--text-xs); color: var(--ink-faint); }
.hold-note {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--bg-inset);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  line-height: 1.6;
}
.hold-note svg { width: 16px; height: 16px; stroke: var(--gold); flex-shrink: 0; margin-top: 2px; }

/* ---------- the booking bar (phones) ----------
   The summary rail used to be order:-1 on a phone: a card with nothing in it
   yet sat above step one and pushed the first thing to do 700px down. Now the
   rail is a sheet behind a fixed bar that carries the running total and
   whichever Continue the current step owns, so the price and the next move
   are always on screen. Desktop is untouched: the rail and the in-step
   buttons are the right answer when there is a column to put them in. */
.book-bar, .bb-scrim { display: none; }
.book-page { --bookbar-h: 72px; }

@media (max-width: 900px) {
  body.book-page { padding-bottom: calc(var(--bookbar-h) + var(--s2) + env(safe-area-inset-bottom, 0px)); }

  .sum-rail { display: none; }
  /* The bar is the step's primary button; two Continues on one screen is one
     too many. */
  body.book-page .bstep-body > .btn-gold { display: none; }

  .book-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    /* nav 40 on top, scrim 30, sheet 31, bar 32. */
    z-index: 32;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: var(--bookbar-h);
    padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-soft);
  }
  .book-bar[hidden] { display: none; }
  .bb-sum {
    position: relative;
    display: grid;
    gap: 1px;
    text-align: left;
    min-width: 0;
    padding-right: 20px;
  }
  .bb-sum b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
  .bb-sum small {
    font-size: var(--text-xs);
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bb-sum::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    width: 7px; height: 7px;
    border-left: 1.5px solid var(--gold);
    border-top: 1.5px solid var(--gold);
    transform: translateY(-50%) rotate(45deg);
    transition: transform 200ms var(--ease-out);
  }
  /* Same glyph flipped. The offset differs because the ink of a two-border
     square sits in whichever half the rotation puts it in. */
  body.bar-open .bb-sum::after { transform: translateY(-70%) rotate(-135deg); }
  .book-bar .btn { flex: none; padding: 12px 20px; min-height: 44px; }

  body.bar-open .sum-rail {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: calc(var(--bookbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 31;
    max-height: 62svh;
    overflow: auto;
    background: var(--bg);
    border-top: 1px solid var(--line-soft);
    padding: var(--s4) var(--gutter) var(--s5);
  }
  .bb-scrim[hidden] { display: none; }
  body.bar-open .bb-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: oklch(0.08 0.004 262 / 0.6);
  }
}

/* confirmation */
.confirm-wrap { display: none; max-width: 620px; margin-inline: auto; text-align: center; padding-block: var(--s8); }
.confirm-wrap.show { display: grid; gap: var(--s5); justify-items: center; }
.confirm-mark {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
}
.confirm-mark svg { width: 34px; height: 34px; stroke: var(--gold); }
.confirm-wrap h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.confirm-wrap .ref { font-size: var(--text-sm); letter-spacing: 0.2em; color: var(--gold); font-weight: 600; }
.confirm-card {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  text-align: left;
  display: grid;
}
.confirm-card .row { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border-top: 1px solid var(--line-soft); font-size: var(--text-sm); }
.confirm-card .row:first-child { border-top: 0; }
.confirm-card .row span:first-child { color: var(--ink-faint); }
.confirm-card .row span:last-child { font-weight: 600; text-align: right; }
.next-steps { text-align: left; width: 100%; display: grid; gap: var(--s3); color: var(--ink-dim); font-size: var(--text-sm); }
.next-steps li { margin-left: 1.2em; padding-left: var(--s2); }

/* reveals */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  background: var(--gold);
  color: var(--gold-ink);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 12px; }

/* ---------- fleet grid (added for the 7-van build) ---------- */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s5);
  margin-top: var(--s6);
}
/* Seven vans. Three across strands the seventh alone on its own row, which
   reads as a mistake; four across gives 4 + 3 and a finished-looking grid.
   The mini grid on a van page shows three others and stays at three. */
@media (min-width: 1200px) {
  .fleet-grid:not(.fleet-grid-mini) { grid-template-columns: repeat(4, 1fr); }
}
.fleet-grid-mini { margin-top: var(--s5); }
.van-card {
  display: grid;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.van-card:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
/* The card's own bottom breathing room. It lives here rather than on the foot
   so the foot stays exactly one line tall: four cards across a desktop leave
   about 220px, and a foot that wraps is what made the grid look broken. */
.van-card { padding-bottom: var(--s4); }
.van-card .vc-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-inset); }
.van-card .vc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.van-card .vc-body {
  /* stretch, not baseline: both halves then start at the same y whatever the
     pill does to the line box, and each centres its own text. */
  display: flex; align-items: stretch; gap: var(--s2);
  padding: var(--s4) var(--s5) var(--s3);
}
.van-card .vc-name, .van-card .vc-rate { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.van-card .vc-name b { font-size: var(--text-lg); font-family: var(--font-display); white-space: nowrap; }
.van-card .vc-seats {
  flex: none;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: var(--text-xs);
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
}
.van-card .vc-rate { margin-left: auto; flex: none; white-space: nowrap; }
.van-card .vc-rate b { color: var(--gold); font-size: var(--text-lg); }
.van-card .vc-rate span { color: var(--ink-faint); font-size: var(--text-sm); }
.van-card .vc-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding: 0 var(--s5);
  color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.5;
}
.van-card .vc-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.van-card .vc-go { flex: none; color: var(--gold); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }

/* Four across is a tighter budget than three: trim the side padding and drop
   the rate a size so name + pill + rate still fit one line at 1440. */
@media (min-width: 1200px) {
  .fleet-grid:not(.fleet-grid-mini) .vc-body { padding-inline: var(--s4); }
  .fleet-grid:not(.fleet-grid-mini) .vc-foot { padding-inline: var(--s4); }
  .fleet-grid:not(.fleet-grid-mini) .vc-rate b { font-size: var(--text-base); }
}

/* The homepage fleet on a phone. Seven stacked 16:9 cards were 2,500px of
   scrolling before the page got to how booking works; sideways with snap
   points shows the same seven and costs one card of height. The counter and
   the "see all" link below it are the affordance that says there are more. */
.fleet-scroller-foot { display: none; }
@media (max-width: 800px) {
  .fleet-carousel {
    display: flex;
    gap: var(--s4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--s2);
    scrollbar-width: none;
  }
  .fleet-carousel::-webkit-scrollbar { display: none; }
  .fleet-carousel .van-card { flex: 0 0 min(82vw, 360px); scroll-snap-align: start; }
  /* A card parked off to the right is never "intersecting", so the reveal
     observer would leave it invisible forever. */
  .fleet-carousel .van-card.reveal { opacity: 1; transform: none; transition: none; }
  .fleet-scroller-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    margin-top: var(--s4);
  }
  .snap-count { font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
}
.cal-nav-row { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-bottom: var(--s2); }
.cal-nav-row .clear {
  background: none; border: 1px solid var(--line-soft); border-radius: var(--radius);
  color: var(--ink-dim); font: inherit; font-size: var(--text-sm); padding: var(--s1) var(--s3); cursor: pointer;
}
.cal-nav-row .clear:not([disabled]):hover { border-color: var(--gold-deep); color: var(--ink); }
.cal-nav-row .clear[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- rental agreement (agreement.html) ----------
   The agreement reads as paper: black on white, serif, inside the dark
   site. The same ag-* classes are styled inline in the stored document
   (packages/core/src/agreement.ts), so the page and the signed file read
   alike, at 390px and on paper. */
.ag-page { max-width: 820px; display: grid; gap: var(--s5); }
.ag-page [hidden] { display: none !important; }
.ag-status { color: var(--ink-dim); font-size: var(--text-sm); line-height: 1.6; }
.ag-msg { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); color: var(--ink-dim); font-size: var(--text-sm); }
.ag-msg.bad { color: var(--err); }

.agreement {
  background: #fff;
  color: #161616;
  border-radius: var(--radius-lg);
  padding: clamp(18px, 4vw, 44px);
  font: 15px/1.6 Georgia, "Times New Roman", serif;
  overflow-wrap: anywhere;
}
.agreement a { color: #161616; }
.agreement h2, .agreement h3, .agreement h4 { font-family: Georgia, "Times New Roman", serif; color: #161616; font-weight: 700; line-height: 1.3; }
.agreement .ag-head { text-align: center; margin-bottom: 20px; }
.agreement .ag-title { font-size: 1.2rem; letter-spacing: 0.02em; }
.agreement .ag-subtitle { margin-top: 4px; font-weight: 700; }
.agreement .ag-p { margin: 0 0 12px; }
.agreement .ag-block { margin: 20px 0; border-top: 1px solid #999; padding-top: 10px; }
.agreement .ag-block h3, .agreement .ag-terms-head, .agreement .ag-sign h3 { font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.agreement .ag-terms-head { margin-top: 28px; border-top: 1px solid #999; padding-top: 10px; }
.agreement .ag-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 5px 0; border-bottom: 1px dotted #bbb; }
.agreement .ag-row dt { font-weight: 700; flex: 1 1 180px; }
.agreement .ag-row dd { flex: 1 1 220px; text-align: right; }
.agreement .ag-strong dt, .agreement .ag-strong dd { font-size: 1.05rem; }
.agreement .ag-note { font-size: 0.9rem; margin-top: 8px; }
.agreement .ag-clause { margin-bottom: 14px; }
.agreement .ag-clause h4 { font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.agreement .ag-clause p { margin-bottom: 8px; }
.agreement .ag-sign { margin-top: 32px; border-top: 2px solid #161616; padding-top: 12px; }
.agreement .ag-sig { margin: 16px 0; }
.agreement .ag-sig h4 { margin-bottom: 4px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
.agreement .ag-sig-line { font-style: italic; font-size: 1.15rem; margin-bottom: 6px; }
.agreement .ag-hash { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; word-break: break-all; }
@media (max-width: 480px) { .agreement .ag-row dd { text-align: left; } }

.ag-form-h { font-family: var(--font-display); font-size: var(--text-lg); }
.ag-form-sub { margin-top: var(--s2); color: var(--ink-faint); font-size: var(--text-sm); line-height: 1.6; }
.ag-form-sub a { color: var(--gold); }
.ag-drivers, #agDrivers { display: grid; gap: var(--s4); }
.ag-driver { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: var(--s4); display: grid; gap: var(--s4); min-width: 0; }
.ag-driver legend { padding: 0 var(--s2); font-weight: 600; font-size: var(--text-sm); }
.ag-remove { justify-self: start; font-size: var(--text-sm); }
.ag-consent { display: grid; gap: var(--s3); }
.check.invalid span { color: var(--err); }
.ag-done { display: grid; gap: var(--s3); justify-items: start; }
.ag-done-line { color: var(--ink-dim); font-size: var(--text-sm); }

/* Print or save as PDF: the agreement alone, black on white. Everything
   around it (chrome, find box, forms, buttons) stays off the paper. */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .skip, .nav, .footer, .page-head, #findBox, #signBox, #agSigned, #agStatus { display: none !important; }
  main .wrap { padding: 0 !important; max-width: none !important; }
  .agreement { border-radius: 0; padding: 0; font-size: 11pt; color: #000; }
  .agreement .ag-block, .agreement .ag-clause, .agreement .ag-sig { break-inside: avoid; }
}