/* ==========================================================================
   Crystal Car Valet — design system
   Primary reference: white canvas + deep harbour-teal bands + one aqua accent,
   hairlines over shadows, heavy tight display type. See DESIGN-NOTES.md.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f3f6f7;
  --surface-3: #e7edef;
  --deep: #0b2630;
  --deep-2: #071a22;
  --deep-text: #eaf3f5;
  --deep-muted: #a7c0c7;

  /* Text */
  --text: #0e1416;
  --text-muted: #4a5559;
  --text-subtle: #5c676b;
  --on-deep-subtle: #8fa8b0;

  /* Borders */
  --border: #dbe3e6;
  --border-strong: #c3ced2;
  --border-deep: rgba(255, 255, 255, 0.16);

  /* Accent — aqua is CTA / price / route marking only */
  --accent: #00a7b5;
  --accent-ink: #00646f;
  --accent-hover: #00525b;
  --accent-tint: #e6f7f8;
  --accent-on-deep: #4fd8e3;
  --on-accent: #ffffff;

  /* Semantic */
  --success: #157f3d;
  --success-bg: #eaf7ef;
  --warning: #a35a00;
  --warning-bg: #fdf4e7;
  --danger: #b3261e;
  --danger-bg: #fdeceb;

  /* Metrics */
  --radius: 4px;
  --radius-lg: 8px;
  --wrap: 1180px;
  --gap: 24px;
  --section-y: clamp(56px, 8vw, 104px);
  --hairline: 1px solid var(--border);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.02em; }
h4 { font-size: 1.02rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }

.lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--text-muted); max-width: 62ch; }
.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 0.9em;
}
.deep .eyebrow { color: var(--accent-on-deep); }
.small { font-size: 0.86rem; color: var(--text-subtle); }
.nowrap { white-space: nowrap; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--deep); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 780px; }

section { padding: var(--section-y) 0; }
section.tight { padding: clamp(36px, 5vw, 64px) 0; }
.rule-top { border-top: var(--hairline); }
.rule-bottom { border-bottom: var(--hairline); }

.deep { background: var(--deep); color: var(--deep-text); }
.deep h1, .deep h2, .deep h3, .deep h4 { color: #fff; }
.deep p { color: var(--deep-text); }
.deep .lede, .deep .muted { color: var(--deep-muted); }
.deep a { color: var(--accent-on-deep); }
.tinted { background: var(--surface-2); }

.split { display: grid; gap: clamp(28px, 4vw, 56px); }
.split > *, .cols-3 > *, .hero__grid > * { min-width: 0; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--wide-left { grid-template-columns: 1.25fr 0.75fr; }
  .split--wide-right { grid-template-columns: 0.8fr 1.2fr; }
}
/* heading above content, for blocks whose left column is only a title */
@media (min-width: 860px) {
  .split.split--stack { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px); }
  .split--stack > :nth-child(2) { max-width: 820px; }
}

.stack > * + * { margin-top: 18px; }
.cols-3 { display: grid; gap: 0; }
@media (min-width: 900px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.cols-3 .row-item { grid-template-columns: 1fr; gap: 4px; }
.compliance-grid { gap: 24px clamp(28px, 4vw, 56px); align-items: start; }
.compliance-grid .row-item { gap: 12px; align-content: start; }
.compliance-grid h3 { margin-bottom: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: var(--hairline);
}
.site-header__bar {
  /* Safety valve: with seven nav links, an unusually wide platform font should push
     the nav onto its own row rather than squeeze labels or overflow the page. */
  flex-wrap: wrap;
  display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding-top: 8px; padding-bottom: 8px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.brand__mark { width: 34px; height: 34px; flex: none; }
/* Public header: the owner's supplied lockup replaces the diamond + text brand. It is
   3.2:1, so at 46px tall it is 147px wide — narrower than the text brand it replaced,
   which keeps the seven nav links and the header CTA on one row at 1280px. */
.brand__logo { display: block; width: 147px; height: auto; }
.brand__name { font-weight: 800; letter-spacing: -0.03em; font-size: 1.09rem; line-height: 1.05; }
.brand__sub {
  display: block; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-subtle);
}
.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  display: block; padding: 9px 10px; border-radius: var(--radius);
  font-size: 0.9rem; font-weight: 600; color: var(--text); text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--surface-2); color: var(--accent-ink); }
.site-nav a[aria-current="page"] { color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.header-cta { display: flex; align-items: center; gap: 10px; }
/* header buttons run a little tighter than body buttons so seven nav links and the
   CTAs can share one row at 1180px, even with wider platform fonts */
.header-cta .btn { padding-left: 14px; padding-right: 14px; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: var(--hairline);
  border-radius: var(--radius); padding: 9px 12px; font: inherit; font-weight: 700;
  color: var(--text); cursor: pointer;
}

@media (max-width: 1080px) {
  .site-nav:not(.nav--static) {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: var(--hairline); padding: 10px 20px 16px;
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, 0.4);
  }
  .site-nav:not(.nav--static).is-open { display: block; }
  .site-nav:not(.nav--static) ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav:not(.nav--static) a {
    padding: 12px 4px; border-bottom: var(--hairline); border-radius: 0; font-size: 0.94rem;
  }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
}

/* Between the hamburger and the widest bar there is room for seven nav links and
   the booking button, but not the phone button as well. */
@media (min-width: 1081px) and (max-width: 1199px) {
  .header-cta a[href^="tel:"] { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--accent-ink); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--text); color: var(--text); background: var(--surface-2); }
.deep .btn--ghost { color: #fff; border-color: var(--border-deep); }
.deep .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }
.btn--sm { padding: 10px 16px; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero ---------- */
.hero { padding: clamp(44px, 6vw, 84px) 0 clamp(36px, 5vw, 64px); }
.hero__grid { display: grid; gap: clamp(30px, 4vw, 58px); align-items: end; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.08fr 0.92fr; } }
.hero h1 { margin-bottom: 0.35em; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none;
  margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border-deep);
}
.hero__facts li { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--deep-muted); }
.tick { width: 15px; height: 15px; flex: none; color: var(--accent-on-deep); }

/* ---------- pick-up run route board (signature element) ---------- */
.runboard {
  border: 1px solid var(--border-deep); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04); padding: 22px 22px 8px;
}
.runboard__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border-deep);
}
.runboard__head strong { font-size: 0.95rem; letter-spacing: -0.01em; }
.runboard__head span { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-deep-subtle); }
.run { list-style: none; margin: 0; padding: 0; }
.run li {
  position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 14px;
  padding: 13px 0 13px 0; align-items: baseline;
}
.run li + li { border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.run__time { font-family: var(--mono); font-size: 0.82rem; color: var(--accent-on-deep); }
.run__stop { font-size: 0.95rem; }
.run__stop small { display: block; color: var(--deep-muted); font-size: 0.82rem; }
/* One departure time can cover several suburb runs; the time sits on the first. */
.run__stops { display: grid; gap: 8px; }
.runboard__foot {
  border-top: 1px solid var(--border-deep); margin-top: 8px; padding: 14px 0 16px;
  font-size: 0.85rem; color: var(--deep-muted);
}

/* ---------- feature rows (hairline, not cards) ---------- */
.rows { border-top: var(--hairline); }
.row-item {
  display: grid; gap: 6px 32px; padding: 26px 0; border-bottom: var(--hairline);
}
@media (min-width: 760px) {
  .row-item { grid-template-columns: minmax(200px, 0.85fr) 1.15fr; align-items: start; }
  .row-item h3 { margin-bottom: 0; }
}
.row-item p:last-child { margin-bottom: 0; }
.row-item__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.85rem; color: var(--text-subtle); }
.price-tag { font-weight: 800; color: var(--accent-ink); letter-spacing: -0.02em; }

/* ---------- service-card checklists ----------
   Wide screens (mouse/keyboard): a panel that opens when the card is hovered or
   something inside it is focused. Narrow screens have no hover, so the same
   panel sits in the flow as a plain box — everyone can read it. */
.svc-pop {
  margin-top: 16px; padding: 16px 18px; background: var(--surface-2);
  border: var(--hairline); border-left: 3px solid var(--accent); border-radius: var(--radius-lg);
}
.svc-pop__hd {
  margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink);
}
.svc-pop__list { margin: 0; padding-left: 18px; font-size: 0.9rem; color: var(--text-muted); }
.svc-pop__list li + li { margin-top: 4px; }
.svc-pop__cue { display: none; margin: 8px 0 0; font-size: 0.82rem; color: var(--text-subtle); }

@media (min-width: 760px) {
  .row-item--pop { position: relative; z-index: 5; }
  /* Every card carries the same z-index, so without this the *next* card paints
     its text straight through the open panel and the panel looks transparent.
     The card under the pointer (or the keyboard) lifts above its neighbours. */
  .row-item--pop:hover,
  .row-item--pop:focus-within { z-index: 6; }
  /* Anchored to the name/price/hours cell, so the panel opens right under "hours"
     instead of at the far side of the row. */
  .row-item--pop .row-item__lead { position: relative; }
  .row-item--pop .svc-pop {
    position: absolute; top: calc(100% + 10px); left: 0; width: min(560px, calc(100vw - 88px));
    margin: 0; background: var(--surface-1); border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent);
    box-shadow: 0 20px 44px rgba(11, 38, 48, 0.16);
    visibility: hidden; transform: translateY(6px);
    transition: transform 0.16s ease, visibility 0s linear 0.16s;
  }
  /* Long checklists run in two columns so the panel stays short enough to sit
     beside the next card; short ones read better as a single column. */
  .row-item--pop .svc-pop--cols .svc-pop__list { column-count: 2; column-gap: 22px; }
  .row-item--pop .svc-pop--cols .svc-pop__list li { break-inside: avoid; }
  .row-item--pop:hover .svc-pop,
  .row-item--pop:focus-within .svc-pop {
    visibility: visible; transform: none; transition-delay: 0s;
  }
  .svc-pop__cue { display: block; }
}

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 0.96rem;
}
.table-scroll table.data { min-width: 520px; }
/* Company facts wrap within the About panel, including narrow phone screens. */
table.company-facts { table-layout: fixed; }
table.company-facts th { width: 30%; }
table.company-facts th, table.company-facts td { white-space: normal; overflow-wrap: anywhere; }
table.data caption {
  text-align: left; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); padding-bottom: 10px;
}
table.data th, table.data td { padding: 13px 14px; border-bottom: var(--hairline); text-align: left; vertical-align: top; }
table.data thead th {
  border-bottom: 2px solid var(--text); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .size { font-weight: 700; }
/* The vehicle-class headings carry a one-line example under the class name. It has to be
   its own line: inline, the note butts straight on to the label ("SMALL CARHATCH, SEDAN…"). */
table.data .size small,
table.data thead th small { display: block; font-weight: 400; color: var(--text-subtle); }
.deep table.data caption { color: var(--deep-muted); }
.deep table.data th, .deep table.data td { border-color: var(--border-deep); }
.deep .small, .deep .row-item__meta, .deep figcaption { color: var(--deep-muted); }
.deep .btn--primary, .deep .btn--primary:hover { color: var(--on-accent); }
.deep .note { background: rgba(255, 255, 255, 0.06); border-left-color: var(--accent-on-deep); }
.deep .note h4 { color: #fff; }
.deep .note p { color: var(--deep-text); }
.deep .note .src { color: var(--deep-muted); }
.deep .note--warn { background: rgba(245, 158, 11, 0.14); border-left-color: #f0b45e; }
.deep .ba__hint, .deep .ph { color: var(--text-subtle); }
.deep .ba__hint strong, .deep .ph strong { color: var(--text); }
.deep table.data thead th { border-bottom-color: #fff; color: var(--deep-muted); }

/* ---------- before / after slider ---------- */
.ba {
  position: relative; margin: 0; border: var(--hairline); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-3); aspect-ratio: 4 / 3;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff;
  border: 2px solid var(--deep);
}
.ba__input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  cursor: ew-resize; margin: 0; appearance: none;
}
.ba__label {
  position: absolute; bottom: 12px; padding: 5px 10px; border-radius: 2px;
  background: rgba(7, 26, 34, 0.82); color: #fff; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ba__label--before { left: 12px; }
.ba__label--after { right: 12px; }
.ba figcaption { font-size: 0.84rem; color: var(--text-subtle); padding: 10px 2px 0; }
.ba__hint {
  position: absolute; inset: 0; z-index: 1; margin: 0; display: grid; place-content: center;
  gap: 8px; text-align: center; padding: 30px; background: var(--surface-2);
  border: 0; font-size: 0.88rem; color: var(--text-subtle);
}
.ba__hint strong { font-size: 0.95rem; color: var(--text); }
.ba.is-ready .ba__hint { display: none; }

/* honest placeholder frame with art direction */
.ph {
  position: relative; aspect-ratio: 4 / 3; background: var(--surface-2);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  display: grid; place-content: center; gap: 6px; text-align: center; padding: 20px;
}
.ph strong { font-size: 0.92rem; }
.ph span { font-size: 0.8rem; color: var(--text-subtle); max-width: 34ch; }
/* ---------- work gallery: contact sheet, not cards ---------- */
.gallery { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.gallery > li { min-width: 0; }
/* A frame with no photo yet waits off the sheet (owner, 2026-10-02). site.js drops
   the class the moment the photo file exists, so the frame fills in on its own. */
.gallery > li.is-pending { display: none; }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .gallery--work > li:first-child { grid-column: span 2; }
  .gallery--work > li:first-child .tile__frame { aspect-ratio: 16 / 10; }
}
.tile {
  position: relative; display: grid; gap: 7px; width: 100%; padding: 0;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tile__frame {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--surface-2); border: var(--hairline); border-radius: var(--radius);
}
.tile__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile__empty {
  position: absolute; inset: 6px; display: grid; place-content: center; gap: 6px; padding: 16px;
  text-align: center; background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.tile__empty strong { font-size: 0.9rem; letter-spacing: -0.01em; }
.tile__empty span { font-size: 0.78rem; color: var(--text-subtle); max-width: 32ch; }
.tile__empty code { font-family: var(--mono); font-size: 0.72rem; }
.tile.is-loaded .tile__empty { display: none; }
.tile__no {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 7px; border-radius: 2px;
  background: rgba(7, 26, 34, 0.82); color: #fff; font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.08em;
}
.tile__cap { font-weight: 700; font-size: 0.96rem; letter-spacing: -0.01em; }
.tile__meta { font-size: 0.78rem; color: var(--text-subtle); }
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { color: var(--accent-ink); }
.tile:hover .tile__frame { border-color: var(--border-strong); }

/* ---------- gallery lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: clamp(12px, 3vw, 40px);
}
.lb[hidden] { display: none; }
body.is-locked { overflow: hidden; }
.lb__scrim { position: absolute; inset: 0; background: rgba(7, 26, 34, 0.82); }
.lb__panel {
  position: relative; z-index: 1; width: min(1060px, 100%); max-height: 100%; overflow: auto;
  background: var(--surface-1); border: var(--hairline); border-radius: var(--radius-lg);
  padding: clamp(16px, 2.4vw, 28px);
}
.lb__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.lb__count { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text-subtle); }
.lb__close { margin-left: auto; }
.lb__figure { margin: 0; display: grid; gap: clamp(16px, 2.4vw, 32px); }
@media (min-width: 860px) { .lb__figure { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.lb__frame {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--surface-2); border: var(--hairline); border-radius: var(--radius);
}
.lb__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb__frame img[hidden] { display: none; }
.lb__empty {
  position: absolute; inset: 8px; display: grid; place-content: center; gap: 6px; padding: 22px;
  text-align: center; background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.lb__empty[hidden] { display: none; }
.lb__empty strong { font-size: 0.95rem; }
.lb__empty span { font-size: 0.84rem; color: var(--text-subtle); max-width: 34ch; }
.lb__meta { font-size: 0.86rem; color: var(--text-subtle); margin: 0 0 4px; }
.lb__did { list-style: none; margin: 0 0 18px; padding: 0; }
.lb__did li {
  position: relative; padding: 9px 0 9px 22px; border-bottom: var(--hairline);
  font-size: 0.93rem; color: var(--text-muted);
}
.lb__did li::before {
  content: ""; position: absolute; left: 1px; top: 16px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.lb h3 { letter-spacing: -0.02em; }

/* ---------- steps ---------- */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 46px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: var(--hairline);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.9rem; color: var(--accent-ink);
  padding-top: 3px;
}
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; color: var(--text-muted); font-size: 0.96rem; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li {
  border: var(--hairline); border-radius: 100px; padding: 6px 14px;
  font-size: 0.86rem; background: var(--surface-1);
}
.deep .chips li { border-color: var(--border-deep); background: rgba(255, 255, 255, 0.05); }

/* ---------- notes / callouts (stripe carries meaning: compliance) ---------- */
.note {
  border: var(--hairline); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-tint); padding: 18px 20px; margin: 0 0 18px;
}
.note--warn { border-left-color: var(--warning); background: var(--warning-bg); }
.note h4 { margin-bottom: 6px; }
.note p:last-child { margin-bottom: 0; }
.note .src { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--text-subtle); }

/* ---------- FAQ ---------- */
.faq { border-top: var(--hairline); }
.faq details { border-bottom: var(--hairline); }
.faq summary {
  cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; letter-spacing: -0.01em;
  position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--accent-ink); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 0 22px; color: var(--text-muted); max-width: 74ch; }
.faq details > div > :last-child { margin-bottom: 0; }
.faq-topics { margin-bottom: clamp(32px, 5vw, 48px); }
.faq-topics a { text-decoration: none; }
.faq-group { scroll-margin-top: 104px; }
.faq-group + .faq-group { margin-top: clamp(40px, 6vw, 64px); }
.faq-group h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: 16px; }

/* ---------- forms ---------- */
form .field { margin-bottom: 18px; }
label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 1rem; color: var(--text);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius);
}
textarea { min-height: 108px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-ink); outline: 2px solid var(--accent-tint); }
.hint { font-size: 0.84rem; color: var(--text-subtle); margin: 6px 0 0; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .field-row--3 { grid-template-columns: repeat(3, 1fr); } }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent-ink); }
.check label { font-weight: 400; font-size: 0.94rem; margin: 0; }
.addons { border-top: var(--hairline); margin-top: 6px; }
.addon-row {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;
  padding: 13px 0; border-bottom: var(--hairline);
}
.addon-row input { width: 20px; height: 20px; accent-color: var(--accent-ink); }
.addon-row label { font-weight: 600; margin: 0; font-size: 0.96rem; }
.addon-row label small { display: block; font-weight: 400; color: var(--text-subtle); }
.addon-row .amt { font-variant-numeric: tabular-nums; font-weight: 700; }

/* estimate panel */
.estimate {
  border: 1px solid var(--deep); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--deep); color: var(--deep-text); position: sticky; top: 88px;
}
.estimate__head { padding: 18px 20px; border-bottom: 1px solid var(--border-deep); }
.estimate__head h3 { margin: 0; color: #fff; font-size: 1.05rem; }
.estimate__body { padding: 16px 20px; }
.estimate table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.estimate td { padding: 7px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.14); }
.estimate td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.estimate tfoot td { border-bottom: 0; padding-top: 14px; font-weight: 800; font-size: 1.28rem; color: #fff; }
.estimate__foot { padding: 14px 20px 18px; border-top: 1px solid var(--border-deep); font-size: 0.83rem; color: var(--deep-muted); }
.estimate .gst { font-size: 0.84rem; color: var(--deep-muted); font-weight: 400; }

/* Running total above the buttons, phones only.
   In the one-column layout the estimate panel falls below the whole form, so the
   price would never be on screen while the customer picks options. This bar repeats
   the same figure (booking.js mirrors it from the panel) where the thumb is, and
   disappears as soon as the two-column layout puts the real panel alongside. */
.total-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 26px 0 0; padding: 14px 18px;
  background: var(--deep); color: var(--deep-text);
  border: 1px solid var(--deep); border-radius: var(--radius-lg);
}
.total-bar span { font-size: 0.9rem; color: var(--deep-muted); }
.total-bar strong { font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; }
@media (min-width: 981px) { .total-bar { display: none; } }

/* ---------- footer ---------- */
.site-footer { background: var(--deep-2); color: var(--deep-muted); padding: 56px 0 28px; font-size: 0.93rem; }
.site-footer h4 { color: #fff; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--deep-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-legal {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-deep);
  display: grid; gap: 10px; font-size: 0.85rem; color: var(--on-deep-subtle);
}

/* ---------- owner brand lockup (supplied artwork) ---------- */
/* The artwork was drawn on a white ground. A white box on the deep bands was the wrong
   answer, so the ground is keyed out and the lockup sits on the page's own surface.
   The deep-band copy (logo-on-dark.png) lifts the wordmark band only, because the dark
   green "Crystal" is unreadable against the teal; the car itself is untouched. */
.footer-brand { margin-bottom: 18px; }
.footer-brand img { display: block; width: 240px; max-width: 100%; height: auto; }
.about-brand { margin-bottom: 26px; }
.about-brand img { display: block; width: 300px; max-width: 100%; height: auto; }

/* ---------- printed job sheet (booking page) ---------- */
.jobsheet__head {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start;
  justify-content: space-between; padding-bottom: 16px; margin-bottom: 18px; border-bottom: var(--hairline);
}
.jobsheet__head img { width: 240px; max-width: 100%; height: auto; }
.jobsheet__head .small { margin: 0; text-align: right; }

/* ---------- reports dashboard (admin) ---------- */
.kpis { display: grid; gap: 0; border-top: var(--hairline); }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 20px 0; border-bottom: var(--hairline); }
@media (min-width: 760px) {
  .kpi { padding: 22px 22px 22px 0; border-bottom: 0; border-right: var(--hairline); }
  .kpi:last-child { border-right: 0; }
}
.kpi__label { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); }
.kpi__value { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: 0.84rem; color: var(--text-subtle); }
.bar-chart { display: flex; align-items: end; gap: 10px; height: 190px; margin: 18px 0 0; }
.bar-chart__col { flex: 1; display: flex; flex-direction: column; justify-content: end; gap: 8px; text-align: center; }
.bar-chart__bar { background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; }
.bar-chart__bar:hover { background: var(--accent-ink); }
.bar-chart__label { font-size: 0.74rem; color: var(--text-subtle); font-family: var(--mono); }
.mono { font-family: var(--mono); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 22px; }
.toolbar .spacer { margin-left: auto; }
.status { font-size: 0.88rem; color: var(--success); font-weight: 600; }
.status[hidden] { display: none; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; }
.pill--pickup { background: var(--accent-tint); color: var(--accent-ink); }
.pill--drop { background: var(--surface-3); color: var(--text-muted); }
.pill--paid { background: var(--success-bg); color: var(--success); }
.pill--due { background: var(--warning-bg); color: var(--warning); }

/* ---------- owner price list editor (/admin/prices.html) ---------- */
.status--error { color: var(--danger); }
.btn--xs { padding: 6px 8px; font-size: 0.8rem; }
table.data.edit { font-size: 0.92rem; }
table.data.edit td { vertical-align: middle; padding: 8px 10px; }
table.data.edit input[type="text"],
table.data.edit input[type="number"] {
  padding: 8px 10px; font-size: 0.94rem; min-width: 108px; max-width: 200px;
}
table.data.edit input.cell-num {
  text-align: right; min-width: 90px; max-width: 120px; font-variant-numeric: tabular-nums;
}
table.data.edit input[type="checkbox"] { width: 18px; height: 18px; }
table.data.edit td.no-print button + button { margin-left: 6px; }
table.data tr.is-off td { background: var(--surface-2); color: var(--text-subtle); }
input.is-bad { border-color: var(--danger); outline: 2px solid var(--danger-bg); }
.choice-set { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin: 0 0 14px; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-bottom: 12px; }
.choice input { margin-top: 3px; width: 18px; height: 18px; }
.choice small { display: block; color: var(--text-subtle); font-weight: 400; margin-top: 2px; }
.choice:last-of-type { margin-bottom: 0; }
.field-range { margin-top: 20px; }
.field-range input { max-width: 190px; }
.field-range small { display: block; margin-top: 8px; max-width: 52ch; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 0.84rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px;
  padding: 4px 10px; margin: 0 6px 6px 0;
}
.chip input { width: 16px; height: 16px; }

/* ---------- utilities ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 28px; }
.row-item--plain { border-bottom: 0; padding-bottom: 0; }
.facts--flush { border-top: 0; padding-top: 0; margin-top: 0; }
.fieldset-reset { border: 0; padding: 0; margin: 0 0 18px; }
.fieldset-reset legend { padding: 0 0 8px; }
.select-auto { width: auto; }
.filter-label { margin: 0; }
.footer-legal--flush { margin-top: 0; border-top: 0; }
.nav--static { display: block; }
.nav--static ul { flex-direction: row; }
@media (max-width: 980px) { .nav--static { display: none; } }
.section-head { max-width: 66ch; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head > :last-child { margin-bottom: 0; }
.two-col-list { columns: 2; column-gap: 32px; margin: 0; padding-left: 20px; }
@media (max-width: 620px) { .two-col-list { columns: 1; } }

/* ---------- print (job sheets + reports) ---------- */
@media print {
  :root { --section-y: 12px; }
  .site-header, .site-footer, .no-print, .toolbar, .lb { display: none !important; }
  body { font-size: 11.5pt; color: #000; }
  .deep { background: #fff !important; color: #000 !important; border: 1px solid #000; }
  .deep h1, .deep h2, .deep h3, .deep p, .estimate td, .estimate tfoot td { color: #000 !important; }
  .estimate { border: 1px solid #000; }
  a { color: #000; text-decoration: none; }
  table.data { font-size: 10pt; min-width: 0; }
  .print-only { display: block !important; }
  .jobsheet__head { border-bottom: 1px solid #000; }
  section { padding: 10px 0; break-inside: avoid; }
}
.print-only { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* Readable Terms text, scoped to the article rather than site navigation. */
.terms-content .wrap { max-width: 78ch; }
.terms-content h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.3; margin: 48px 0 16px; }
.terms-content h2:first-child { margin-top: 0; }
.terms-content p { margin: 0 0 18px; line-height: 1.8; }
.terms-content ul, .terms-content ol { margin: 18px 0 24px; padding-left: 1.5em; }
.terms-content ul { list-style: disc; }
.terms-content li { padding-left: 0.35em; line-height: 1.8; }
.terms-content li + li { margin-top: 12px; }
.terms-content li::marker { color: var(--accent-ink); }
.terms-contact { margin-top: 40px; padding-top: 24px; border-top: var(--hairline); }
@media (max-width: 599px) {
  .terms-content h2 { margin-top: 36px; }
  .terms-content ul, .terms-content ol { padding-left: 1.25em; }
}