/* ---- tokens.css ---- */
/*
 * Design tokens. Light is the default and is defined on bare :root so it is
 * never trapped inside a media query. Dark redefines only what changes, twice:
 * once for the system preference (guarded so an explicit light choice wins)
 * and once for the explicit [data-theme="dark"] choice.
 */

:root {
  /* Surfaces and ink */
  --paper: #faf9f7;
  --surface: #ffffff;
  --surface-sunken: #f2f0ec;
  --ink: #17191d;
  --ink-muted: #5b6068;
  --ink-faint: #696e76; /* AA on paper, surface and sunken */
  --line: #e6e3de;
  --line-strong: #d5d1ca;
  --line-soft: #efede9;

  /* Signal — urgency and action. Exactly one per screen region. */
  --signal: #c6371a;
  --signal-hover: #9e2b14;
  --signal-ink: #ffffff;
  --signal-wash: #fcefea;
  --signal-text: #9e2b14;

  /* Confirm — states that have already gone right. */
  --confirm: #2f7a54;
  --confirm-wash: #eaf4ee;

  /* Panels that stay dark in both themes (footer, price readouts). */
  --slab: #17191d;
  --slab-ink: #ffffff;
  --slab-muted: #a2a8b2;
  --slab-line: #2c313a;
  --slab-faint: #868d97; /* AA on the slab in both themes */
  --slab-signal: #ff6a45;

  /* Type */
  --font-display: "Wix Madefor Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-text: "Wix Madefor Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step-display: clamp(2.5rem, 1.4rem + 4.4vw, 3.875rem); /* 40 → 62 */
  --step-h1: clamp(2.125rem, 1.4rem + 2.9vw, 3.25rem);     /* 34 → 52 */
  --step-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);       /* 28 → 40 */
  --step-h3: clamp(1.3125rem, 1.15rem + 0.65vw, 1.75rem);  /* 21 → 28 */
  --step-h4: 1.4375rem;                                    /* 23 */
  --step-lead: 1.1875rem;                                  /* 19 */
  --step-body: 1rem;                                       /* 16 */
  --step-sm: 0.9375rem;                                    /* 15 */
  --step-xs: 0.875rem;                                     /* 14 */
  --step-2xs: 0.8125rem;                                   /* 13 */
  --step-eyebrow: 0.6875rem;                               /* 11 */

  --leading-tight: 1.02;
  --leading-snug: 1.15;
  --leading-body: 1.6;

  /* A pill's rendered height: its type box plus its vertical padding. Card
     headers reserve exactly this, so a header with a pill and one without
     come out the same height and their titles line up. */
  --pill-height: calc(var(--step-2xs) * var(--leading-body) + 0.625rem);

  --tracking-display: -0.035em;
  --tracking-heading: -0.03em;
  --tracking-eyebrow: 0.11em;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 5.5rem;

  /* Shape */
  --radius-control: 6px;
  --radius-card: 12px;
  --radius-slab: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 18px 40px -22px rgb(23 25 29 / 0.28);
  --shadow-control: 0 1px 2px rgb(23 25 29 / 0.10);
  --focus-ring: 0 0 0 3px rgb(198 55 26 / 0.30);

  --container: 70rem; /* 1120 */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131519;
    --surface: #1b1e24;
    --surface-sunken: #22262d;
    --ink: #f5f4f1;
    --ink-muted: #a2a8b2;
    --ink-faint: #868d97; /* AA on every dark surface */
    --line: #2c313a;
    --line-strong: #333941;
    --line-soft: #22262d;

    --signal: #ff6a45;
    --signal-hover: #ff8a6c;
    --signal-ink: #131519;
    --signal-wash: rgb(255 106 69 / 0.13);
    --signal-text: #ff8a6c;

    --confirm: #4fb07c;
    --confirm-wash: rgb(79 176 124 / 0.13);

    --slab: #0d0f12;
    --slab-line: #2c313a;

    --shadow-card: 0 18px 40px -22px rgb(0 0 0 / 0.6);
    --focus-ring: 0 0 0 3px rgb(255 106 69 / 0.35);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #131519;
  --surface: #1b1e24;
  --surface-sunken: #22262d;
  --ink: #f5f4f1;
  --ink-muted: #a2a8b2;
  --ink-faint: #868d97; /* AA on every dark surface */
  --line: #2c313a;
  --line-strong: #333941;
  --line-soft: #22262d;

  --signal: #ff6a45;
  --signal-hover: #ff8a6c;
  --signal-ink: #131519;
  --signal-wash: rgb(255 106 69 / 0.13);
  --signal-text: #ff8a6c;

  --confirm: #4fb07c;
  --confirm-wash: rgb(79 176 124 / 0.13);

  --slab: #0d0f12;
  --slab-line: #2c313a;

  --shadow-card: 0 18px 40px -22px rgb(0 0 0 / 0.6);
  --focus-ring: 0 0 0 3px rgb(255 106 69 / 0.35);

  color-scheme: dark;
}


/* ---- base.css ---- */
/* Reset and element defaults. */

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h1 { font-size: var(--step-h1); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }
h4 { font-size: var(--step-h4); }

p, ul, ol, dl, figure, blockquote {
  margin: 0;
}

p { text-wrap: pretty; }

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--signal-text);
  text-decoration: none;
}

a:hover {
  color: var(--signal-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 3px;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

strong, b { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection {
  background: var(--signal);
  color: var(--signal-ink);
}

/* Visually hidden but available to assistive tech. */
/* The browser's own [hidden] rule loses to any class that sets display — which
   is every field on this site, because .input sets it. Without this, marking a
   field hidden does nothing at all. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 600;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--signal-ink);
}

/*
 * No word may break out of its box. Long compounds like
 * "beyond-economical-repair" would otherwise overflow a narrow card, and a
 * pasted URL in a form would do the same.
 */
p, li, h1, h2, h3, h4, td, th, dd, dt, figcaption, .card, .prose {
  overflow-wrap: break-word;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/*
 * Honeypot. Hidden from people by the same method as .sr-only, and hidden from
 * assistive tech too via aria-hidden on the wrapper — unlike .sr-only, this is
 * meant to be announced to nobody. The old off-screen trick could surface it in
 * autofill and could widen the document.
 */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---- layout.css ---- */
/* Containers, sections and grids. */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight { padding-block: var(--space-xl); }
.section--loose { padding-block: var(--space-3xl); }

.section--bordered {
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-sm));
}

.row {
  display: flex;
  align-items: center;
  gap: var(--row-gap, var(--space-sm));
  flex-wrap: wrap;
}

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-md));
}

/*
 * Card grids use auto-fit so every column is exactly the same width at every
 * viewport, and the count drops on its own rather than at an arbitrary
 * breakpoint. This is what keeps boxes aligned on a laptop as well as a phone.
 */
/* Explicitly two, never three: auto-fit would fit a third column at 1120px
   and leave a four-item grid as 3 + 1. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* Four-item grids step 4 -> 2 -> 1 so they never leave a 3 + 1 orphan row. */
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Structural two-column layouts: content beside a panel. */
.grid--split,
.grid--sidebar {
  gap: var(--space-lg);
}

/* A split puts prose next to a panel that sets its own height, so the panel
   sits at the top rather than stretching to the prose. */
.grid--split { align-items: start; }

/* A sidebar is card beside card. They stretch to a shared height so their
   bottom edges meet and anything pinned with margin-top:auto has room to move. */
.grid--sidebar { align-items: stretch; }

.grid--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.grid--sidebar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

@media (max-width: 64rem) {
  .grid--split,
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 64rem) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.measure { max-width: 34em; }
.measure-tight { max-width: 26em; }


/* ---- components.css ---- */
/* ---------- Type helpers ---------- */

.eyebrow {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Cyrillic sets wider; uppercase tracking that suits Latin is too loose for it. */
[lang^="bg"] .eyebrow { letter-spacing: 0.09em; }

.lead {
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--ink-muted);
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.display { font-family: var(--font-display); }

.figure {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: 0.75rem 1.125rem;
  border-radius: var(--radius-control);
  font-size: var(--step-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn svg { flex-shrink: 0; }

.btn--primary {
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 700;
}

.btn--primary:hover {
  background: var(--signal-hover);
  color: var(--signal-ink);
}

.btn--secondary {
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--secondary:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}

.btn--onslab {
  background: var(--slab-ink);
  color: var(--slab);
  font-weight: 700;
}

.btn--onslab:hover { background: #e8e6e2; color: var(--slab); }

.btn--lg {
  min-height: 54px;
  padding: 0.9375rem 1.375rem;
  font-size: var(--step-body);
}

/* For compact panels such as the time picker's footer, where a full-height
   control would dominate the thing it sits under. */
.btn--sm {
  min-height: 38px;
  padding: 0.4375rem 0.875rem;
  font-size: var(--step-xs);
}

.btn--block { width: 100%; }

.btn[aria-disabled="true"] {
  background: var(--surface-sunken);
  color: var(--ink-faint);
  pointer-events: none;
}

.link-arrow {
  font-size: var(--step-sm);
  font-weight: 600;
}

/* ---------- Fields ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.field__label {
  font-size: var(--step-2xs);
  font-weight: 600;
  color: var(--ink-muted);
}

.field__hint {
  font-size: var(--step-2xs);
  color: var(--slab-faint);
}

.input {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--step-sm);
  color: var(--ink);
  width: 100%;
}

.input::placeholder { color: var(--ink-faint); }

.input:focus,
.input:focus-within {
  border-color: var(--signal);
  box-shadow: var(--focus-ring);
  outline: none;
}

textarea.input {
  min-height: 88px;
  padding-block: 0.75rem;
  line-height: 1.55;
  resize: vertical;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group svg {
  position: absolute;
  inset-inline-start: 0.875rem;
  color: var(--ink-faint);
  pointer-events: none;
}

.input-group .input { padding-inline-start: 2.5rem; }

/* Segmented control — replaces the misaligned radio buttons. */
.segmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-control);
}

.segmented__option {
  flex: 1 1 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: var(--step-xs);
  font-weight: 500;
  color: var(--ink-muted);
  transition: background-color 120ms ease, color 120ms ease;
}

.segmented__option[aria-pressed="true"],
.segmented__option[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-control);
}

/* Add-on toggles — a whole row is the hit target, price always visible. */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 56px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: start;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.toggle-row__box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: transparent;
}

.toggle-row__label {
  flex: 1 1 auto;
  font-size: var(--step-sm);
  font-weight: 500;
}

.toggle-row__price {
  font-family: var(--font-display);
  font-size: var(--step-sm);
  font-weight: 700;
  color: var(--ink-muted);
  /* The sign and the amount are one token; never break "+£60" across lines. */
  flex-shrink: 0;
  white-space: nowrap;
}

.toggle-row[aria-pressed="true"] {
  border-color: var(--signal);
  background: var(--signal-wash);
}

.toggle-row[aria-pressed="true"] .toggle-row__box {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}

.toggle-row[aria-pressed="true"] .toggle-row__price { color: var(--signal-text); }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-self: flex-start; /* so it never stretches as a flex child */
  align-items: center;
  gap: 0.375rem;
  min-height: var(--pill-height);
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-pill);
  font-size: var(--step-2xs);
  font-weight: 600;
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.pill--confirm { background: var(--confirm-wash); color: var(--confirm); }
.pill--signal { background: var(--signal-wash); color: var(--signal-text); }

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Cards ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.card--slab {
  background: var(--slab);
  border-color: transparent;
  color: var(--slab-ink);
}

.card--slab h2,
.card--slab h3,
.card--slab h4 { color: var(--slab-ink); }

.card--slab p,
.card--slab .card__list span { color: var(--slab-muted); }

.card--placeholder {
  background: var(--paper);
  border-style: dashed;
  border-color: var(--line-strong);
}

.card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-soft);
  font-size: var(--step-xs);
  color: var(--ink-muted);
}

.card--slab .card__list { border-top-color: var(--slab-line); }

/* ---------- Rate rows ---------- */

.rate-list {
  display: flex;
  flex-direction: column;
}

.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.6875rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step-xs);
}

.rate-row:last-child { border-bottom: 0; }
.rate-row__label { color: var(--ink-muted); }
.rate-row__value { font-weight: 600; }

/*
 * The total line of a worked example. It is pushed to the foot of the card so
 * that totals line up across a row even when one example carries an extra rate
 * row, the same way .card__list pins itself to the bottom.
 */
.card__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--line);
}

.card__total-label { font-weight: 600; }

/* Pairs with .figure, which carries the display face. */
.card__total-value { font-size: var(--step-h3); }

/* Headline figures strip. */
.figure-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.figure-strip > * + * {
  padding-inline-start: var(--space-lg);
  border-inline-start: 1px solid var(--line);
}

.figure-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.figure-strip__value { font-size: 1.625rem; }
.figure-strip__unit { font-size: var(--step-sm); font-weight: 600; color: var(--ink-muted); }
.figure-strip__label { font-size: var(--step-xs); color: var(--ink-muted); }

@media (max-width: 48rem) {
  .figure-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure-strip > * + * { padding-inline-start: 0; border-inline-start: 0; }
}

/* ---------- Site chrome ---------- */

.utility-bar {
  background: var(--slab);
  color: var(--slab-muted);
  font-size: var(--step-2xs);
}

.utility-bar a { color: var(--slab-muted); }
.utility-bar a:hover { color: var(--slab-ink); }

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.5625rem;
}

.utility-bar__end {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.utility-bar__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.utility-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--slab-signal);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-inline-start: var(--space-md);
  border-inline-start: 1px solid var(--slab-line);
}

.lang-switch__current { color: var(--slab-ink); font-weight: 600; }

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
}

/* The supplied logo is a silver wordmark on transparency: it disappears on
   light backgrounds, so the theme drives its colour until it is redrawn as an
   SVG that inherits currentColor. */
.brand { display: block; flex-shrink: 0; }

.brand img {
  width: 176px;
  filter: brightness(0);
  opacity: 0.88;
}

/* On a phone the header holds only the logo and two controls, so the wordmark
   can take more of the width than it does on a desktop nav bar — and it is the
   one thing telling someone at the roadside whose site they have landed on. */
@media (max-width: 48rem) {
  .brand img { width: 208px; }
}

@media (max-width: 22rem) {
  .brand img { width: 168px; }
}

:root[data-theme="dark"] .brand img,
.utility-bar .brand img,
.site-footer .brand img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img {
    filter: brightness(0) invert(1);
    opacity: 1;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: var(--step-sm);
  font-weight: 500;
}

.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--signal-text); }

.site-nav a[aria-current="page"] {
  color: var(--signal-text);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-inline-start: auto;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--ink);
}

.theme-toggle:hover { border-color: var(--ink-muted); }
.theme-toggle .icon-moon { display: none; }

:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

.menu-toggle { display: none; }

@media (max-width: 64rem) {
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--gutter) var(--space-md);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-size: var(--step-lead);
  }

  .site-nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
  }

  .site-header { position: relative; }
  .site-header[data-open="true"] .site-nav { display: flex; }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
  }

  .header-actions .btn--secondary { display: none; }
}

/* Sticky call/price bar on small screens. */
.action-bar { display: none; }

@media (max-width: 48rem) {
  .action-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 0.625rem;
    padding: var(--space-xs) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }

  .action-bar .btn { flex: 1 1 0; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--slab);
  color: var(--slab-muted);
}

.site-footer a { color: var(--slab-muted); }
.site-footer a:hover { color: var(--slab-ink); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr));
  gap: var(--space-md);
  padding-block: var(--space-xl) var(--space-lg);
  font-size: var(--step-xs);
}

@media (max-width: 64rem) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__heading {
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slab-faint);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-block: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--slab-line);
  font-size: var(--step-2xs);
  color: var(--ink-faint);
}


/*
 * Touch sizing. On phones every control a finger is meant to hit gets a 44px
 * box. Links set in a sentence are left alone — growing them would break the
 * line they sit in, and they are exempt from the target-size rule for that
 * reason. The stacks that hold these links drop their gap to compensate, so
 * the taller hit areas sit flush instead of pushing the block open.
 */
@media (max-width: 48rem) {
  .site-footer__col { gap: 0; }

  .site-footer__col > a:not(.brand),
  .site-footer__col .stack > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .site-footer__col .stack { gap: 0; }

  /* Icon-only links need width as well as height. */
  .site-footer__col p.row > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /*
   * The language switch sits at the very top of the page, so a target that
   * overhangs the bar would fall off the screen. The link takes the full 44px
   * itself and the bar gives up its own padding in exchange, which sets the
   * bar's height from the target rather than adding to it.
   */
  .lang-switch > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* A link that stands on its own line is navigation, not prose, so it gets
     the same box as any other control. */
  .link-arrow,
  .link-line {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 48rem) {
  .utility-bar__where,
  .utility-bar__link { display: none; }

  .utility-bar__inner {
    flex-wrap: nowrap;
    font-size: 0.75rem;
    padding-block: 0; /* the 44px language link sets the bar's height */
  }

  .lang-switch {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (max-width: 48rem) {
  .brand img { width: 142px; }

  .site-header__inner { gap: var(--space-sm); }

  .header-actions { gap: var(--space-2xs); }

  .header-actions .btn--primary { display: none; }
}

/* ---------- Estimator ---------- */

.estimator {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.estimator__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--line-soft);
}

.estimator__title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.estimator__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.estimator__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--step-2xs);
  line-height: 1.5;
  color: var(--ink-faint);
}

.estimator__note svg { flex-shrink: 0; margin-top: 2px; }

.estimator__readout {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--slab);
  border-radius: 8px;
}

.estimator__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.estimator__readout-label {
  font-size: var(--step-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slab-faint);
}

.estimator__total {
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--slab-ink);
}

.estimator__lines:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--slab-line);
}

.estimator__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--step-2xs);
  color: var(--slab-muted);
}

.estimator__awaiting {
  padding-top: var(--space-xs);
  border-top: 1px solid var(--slab-line);
  font-size: var(--step-2xs);
  color: var(--slab-muted);
}

.estimator__smallprint {
  font-size: var(--step-2xs);
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- CTA band ---------- */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  padding: var(--space-xl);
  background: var(--signal);
  border-radius: var(--radius-slab);
  color: var(--signal-ink);
}

.cta-band h2 {
  font-size: var(--step-h2);
  font-weight: 800;
  color: var(--signal-ink);
}

.cta-band p { color: color-mix(in srgb, var(--signal-ink) 86%, transparent); }

.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex-shrink: 0;
}

.cta-band__note {
  font-size: var(--step-2xs);
  text-align: center;
  color: color-mix(in srgb, var(--signal-ink) 75%, transparent);
}

/* ---------- Numbered steps ---------- */

.step__number {
  font-family: var(--font-display);
  font-size: var(--step-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--signal-text);
}

.step__title {
  font-size: var(--step-body);
  font-weight: 600;
}

.step p {
  font-size: var(--step-xs);
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ---------- Long-form prose (legal, FAQ, about) ---------- */

.prose {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--step-sm);
  line-height: 1.7;
  color: var(--ink-muted);
}

.prose h2 {
  margin-top: var(--space-md);
  font-size: var(--step-h3);
  color: var(--ink);
}

.prose h3 {
  margin-top: var(--space-2xs);
  font-size: var(--step-body);
  font-weight: 700;
  color: var(--ink);
}

.prose strong { color: var(--ink); }

.prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline-start: var(--space-sm);
}

.prose li { list-style: disc; }

.prose a { text-decoration: underline; text-underline-offset: 2px; }

.prose hr { margin-block: var(--space-sm); }

/* FAQ */

.faq { display: flex; flex-direction: column; }

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 60px;
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-body);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--signal-text);
  line-height: 1;
}

.faq details[open] summary::after { content: "\2212"; }

.faq details p {
  padding-bottom: var(--space-sm);
  font-size: var(--step-sm);
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ---------- Booking form ---------- */

.booking {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-md);
  align-items: start;
}

@media (max-width: 64rem) {
  .booking { grid-template-columns: minmax(0, 1fr); }
}

.booking__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.booking__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: sticky;
  top: var(--space-sm);
}

@media (max-width: 64rem) {
  .booking__summary { position: static; }
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.step-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.booking__steps { counter-reset: booking-step; }
.step-card { counter-increment: booking-step; }
.step-card__index::before { content: counter(booking-step); }

.step-card__index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step-2xs);
  font-weight: 700;
}

.step-card__title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.summary-slab {
  display: flex;
  flex-direction: column;
  background: var(--slab);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.summary-slab__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.summary-slab__total {
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--slab-ink);
}

.summary-slab__deposit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--slab) 70%, #000);
}

.summary-slab__deposit-value {
  font-size: 1.5rem;
  color: var(--slab-signal);
  letter-spacing: -0.02em;
}

/* Distance lookup status */

[data-distance-status]:empty { display: none; }
[data-distance-status][data-tone="working"] { color: var(--ink-faint); }
[data-distance-status][data-tone="ok"] { color: var(--confirm); }
[data-distance-status][data-tone="error"] { color: var(--signal-text); }

/* Form submission status */

.form-status:empty { display: none; }

.form-status {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-control);
  font-size: var(--step-xs);
  line-height: 1.5;
}

.form-status[data-tone="ok"] { background: var(--confirm-wash); color: var(--confirm); }
.form-status[data-tone="error"] { background: var(--signal-wash); color: var(--signal-text); }

.site-footer__disclosure {
  padding-bottom: var(--space-lg);
  font-size: var(--step-2xs);
  line-height: 1.6;
  color: var(--slab-faint);
  max-width: 52rem;
}

/* ---------- Video wall ---------- */

.video-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (max-width: 64rem) {
  .video-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.video-card { display: flex; }

.video-card__trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: 100%;
  text-align: start;
  border-radius: var(--radius-card);
}

.video-card__poster {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  aspect-ratio: 9 / 16;
}

.video-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

.video-card__trigger:hover .video-card__poster img { transform: scale(1.03); }

.video-card__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--signal-ink);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
  padding-inline-start: 3px;
  transition: scale 160ms ease;
}

.video-card__trigger:hover .video-card__play { scale: 1.08; }

.video-card__caption {
  font-size: var(--step-xs);
  font-weight: 500;
  color: var(--ink-muted);
}

/* The iframe replaces the poster in place once play is pressed. */
.video-card__frame {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--slab);
}

/* Every card header occupies the same box, whether or not it carries a pill,
   so titles line up across a row. The reserved height is the pill's own, taken
   from the same token the pill is sized from, so the two cannot drift apart. */
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-height: var(--pill-height);
}

/* ---------- Photo cards ---------- */

.card--photo {
  padding: 0;
  overflow: hidden;
}

.card--photo .card__figure {
  display: block;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--surface-sunken);
  overflow: hidden;
}

.card--photo .card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 400ms ease;
}

a.card--photo:hover .card__figure img,
.card--photo:hover .card__figure img { scale: 1.03; }

.card--photo .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  flex: 1 1 auto;
}

/* A photo band: one wide image that breaks up a run of text sections. */
.photo-band {
  margin: 0;
  border-radius: var(--radius-slab);
  overflow: hidden;
  background: var(--surface-sunken);
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 21 / 9;
}

@media (max-width: 48rem) {
  .photo-band img { aspect-ratio: 3 / 2; }
}

.photo-band__caption {
  padding-top: var(--space-2xs);
  font-size: var(--step-2xs);
  color: var(--ink-faint);
}

/* Page-opening image, used where a service page needs to show the work. */
.page-figure {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
}

.page-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* ---------- Gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-sm);
}

.gallery__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.gallery__frame {
  display: block;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
  aspect-ratio: 4 / 3;
}

.gallery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 400ms ease;
}

.gallery__item:hover .gallery__frame img { scale: 1.04; }

.gallery__caption {
  font-size: var(--step-2xs);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---------- Address lookup ---------- */

.address-field { position: relative; }

.address-list {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 30;
  max-height: 15rem;
  overflow-y: auto;
  margin-top: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-card);
  list-style: none;
}

.address-list__option {
  padding: 0.625rem 0.75rem;
  border-radius: 4px;
  font-size: var(--step-xs);
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}

.address-list__option:hover,
.address-list__option[aria-selected="true"] {
  background: var(--surface-sunken);
}

/* ---------- Urgency switch on the booking form ---------- */

.urgency {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--surface-sunken);
  border-radius: var(--radius-card);
}

.urgency__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.urgency__option {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0 var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--step-sm);
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
}

.urgency__option[aria-pressed="true"] {
  border-color: var(--signal);
  background: var(--signal-wash);
  color: var(--signal-text);
  box-shadow: 0 0 0 1px var(--signal);
}

.urgency__note {
  font-size: var(--step-2xs);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* An emergency has no date to pick, and the phone should be the loudest thing
   on the page. */
[data-urgency="now"] .when-planned { display: none; }
[data-urgency="planned"] .when-now { display: none; }

/* Three kinds of job share one form. Each rule hides what the other two need,
   which keeps the display type of whatever is shown intact — the same trick the
   urgency rules above use. */
[data-job="auction"] .when-breakdown,
[data-job="transport"] .when-breakdown { display: none; }
[data-job="breakdown"] .when-auction,
[data-job="transport"] .when-auction { display: none; }
[data-job="breakdown"] .when-transport,
[data-job="auction"] .when-transport { display: none; }

.urgency__nested {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

.urgency__options--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 34rem) {
  .urgency__options--three { grid-template-columns: 1fr; }
}

.call-first {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--slab);
  border-radius: var(--radius-card);
  color: var(--slab-ink);
}

.call-first__text {
  flex: 1 1 14rem;
  font-size: var(--step-xs);
  line-height: 1.5;
  color: var(--slab-muted);
}

/* ---- Booking confirmation ------------------------------------------------
   Replaces the form once a request is sent. Deliberately quiet: the job is to
   answer "did that work" from across a forecourt, not to celebrate. */
.booking-done {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}

.booking-done:focus { outline: none; }

.booking-done__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 0 var(--space-2xs);
  border-radius: 50%;
  background: var(--ok-wash, var(--surface-sunken));
  color: var(--ok, var(--ink));
  font-size: 26px;
  line-height: 1;
}

.booking-done__title { margin: 0; font-size: var(--step-xl); }

.booking-done__body {
  margin: 0;
  font-size: var(--step-md);
  color: var(--ink-muted);
  max-width: 30rem;
}

.booking-done__urgent {
  margin: var(--space-2xs) 0 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 10px;
  background: var(--signal-wash);
  color: var(--signal-text);
  font-size: var(--step-sm);
  font-weight: 600;
}

.booking-done__estimate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.booking-done__estimate-label {
  font-size: var(--step-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.booking-done__estimate-value { font-size: var(--step-xl); font-weight: 700; }

.booking-done__note {
  margin: 0;
  font-size: var(--step-xs);
  color: var(--ink-faint);
  max-width: 28rem;
}

.booking-done__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.booking-done__redirect {
  margin: var(--space-2xs) 0 0;
  font-size: var(--step-2xs);
  color: var(--ink-faint);
}

/* ---- Collection time picker ----------------------------------------------
   A clock face for the time being chosen, and half-hour slots marked with what
   they cost. Peak and late are the whole reason this exists: the native control
   cannot show that 17:00 is charged differently from 14:00. */
.input-group--picker { position: relative; }

.time-picker {
  position: absolute;
  z-index: 20;
  margin-top: var(--space-2xs);
  width: min(23rem, calc(100vw - 2 * var(--space-md)));
  padding: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35);
}

.time-picker[hidden] { display: none; }

.time-picker__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--line);
}

.time-picker__face { width: 74px; height: 74px; flex-shrink: 0; }
.time-picker__dial { fill: var(--surface-sunken); stroke: var(--line-strong); stroke-width: 1.5; }
.time-picker__numeral { font-size: 8px; fill: var(--ink-faint); font-weight: 600; }
.time-picker__hand { stroke: var(--ink); stroke-linecap: round; }
.time-picker__hand--hour { stroke-width: 3.4; }
.time-picker__hand--minute { stroke-width: 2; stroke: var(--signal); }
.time-picker__pin { fill: var(--ink); }

.time-picker__head-text { display: flex; flex-direction: column; gap: 2px; }
.time-picker__readout { margin: 0; font-size: var(--step-xl); font-weight: 700; line-height: 1; }

.time-picker__surcharge { margin: 0; font-size: var(--step-2xs); color: var(--ink-faint); min-height: 1em; }
.time-picker__surcharge[data-tone="peak"] { color: var(--signal-text); font-weight: 600; }
.time-picker__surcharge[data-tone="late"] { color: var(--signal-text); font-weight: 700; }

.time-picker__slots {
  max-height: 15rem;
  overflow-y: auto;
  margin-top: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.time-picker__group-title {
  margin: 0 0 var(--space-3xs, 4px);
  font-size: var(--step-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.time-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.time-picker__slot {
  min-height: 38px;
  padding: 0 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--step-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
}

.time-picker__slot:hover { border-color: var(--line-strong); background: var(--surface-sunken); }
.time-picker__slot[data-tone="peak"] { color: var(--signal-text); }
.time-picker__slot[data-tone="late"] { color: var(--signal-text); font-weight: 700; }

.time-picker__slot[aria-pressed="true"] {
  border-color: var(--signal);
  background: var(--signal-wash);
  color: var(--signal-text);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--signal);
}

.time-picker__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--line);
}

@media (max-width: 34rem) {
  .time-picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Photos, notices and the call-back shortcut --------------------------- */
.segmented--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 34rem) { .segmented--three { grid-template-columns: 1fr; } }

.photos { display: flex; flex-direction: column; gap: var(--space-2xs); }

.photos__add {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--step-sm);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}

.photos__add:hover { border-style: solid; color: var(--ink); }

/* Covers the button, invisible, and takes the tap itself. A file input hidden
   with display:none or clipped to 1px will not open on iOS. */
.photos__add input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.photos__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.photos__item { position: relative; width: 84px; }

.photos__item img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}

.photos__remove {
  width: 100%;
  margin-top: 2px;
  padding: 2px;
  background: none;
  border: 0;
  font-size: var(--step-2xs);
  color: var(--ink-faint);
  cursor: pointer;
  text-decoration: underline;
}

.photos__remove:hover { color: var(--signal-text); }

.form-notice {
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-sunken);
  border-radius: 10px;
  font-size: var(--step-xs);
  color: var(--ink-muted);
}

.callback {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  padding: var(--space-sm);
  background: var(--surface-sunken);
  border-radius: var(--radius-card);
  text-align: center;
}

.callback[hidden] { display: none; }
.callback__open[hidden] { display: none; }
.callback__open { margin-top: var(--space-2xs); }
.callback__title { margin: 0; font-size: var(--step-sm); font-weight: 700; }
.callback__body { margin: 0; font-size: var(--step-xs); color: var(--ink-muted); }

/* ---- Collection date picker ----------------------------------------------
   A month that simply does not contain the past. Sizing matches the time
   picker so the two read as one control split in half. */
.date-field { position: relative; display: block; }

.date-picker {
  position: absolute;
  z-index: 20;
  margin-top: var(--space-2xs);
  width: min(20rem, calc(100vw - 2 * var(--space-md)));
  padding: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35);
}

.date-picker[hidden] { display: none !important; }

.date-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
}

.date-picker__title { margin: 0; font-size: var(--step-sm); font-weight: 700; }

.date-picker__nav {
  width: 34px;
  height: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.date-picker__nav:disabled { opacity: 0.35; cursor: default; }
.date-picker__nav:not(:disabled):hover { border-color: var(--line-strong); background: var(--surface-sunken); }

.date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.date-picker__dayname {
  padding: 4px 0;
  text-align: center;
  font-size: var(--step-2xs);
  font-weight: 600;
  color: var(--ink-faint);
}

.date-picker__blank { min-height: 38px; }

.date-picker__day {
  min-height: 38px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: var(--step-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
}

.date-picker__day:not(:disabled):hover { background: var(--surface-sunken); border-color: var(--line); }
.date-picker__day--past { color: var(--ink-faint); opacity: 0.32; cursor: default; }
.date-picker__day--today { font-weight: 700; border-color: var(--line-strong); }

.date-picker__day[aria-pressed="true"] {
  background: var(--signal-wash);
  border-color: var(--signal);
  color: var(--signal-text);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--signal);
}

.date-picker__foot {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--line);
}

/* ---- Use my location ------------------------------------------------------
   Sits under the pick-up field. Deliberately quiet until someone needs it:
   most bookings know their address, and the ones that do not are the urgent
   ones, where it should be the obvious thing to press. */
.locate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  align-self: flex-start;
  margin-top: var(--space-2xs);
  min-height: 40px;
  padding: 0 var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--step-xs);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.locate:hover { background: var(--surface-sunken); }
.locate:disabled { opacity: 0.6; cursor: default; }
.locate svg { color: var(--signal); flex-shrink: 0; }

.locate__hint { display: block; margin-top: 2px; }

/* On an emergency the address is the thing they cannot give, so the button
   stops being secondary. */
[data-urgency="now"] .locate {
  border-color: var(--signal);
  color: var(--signal-text);
  background: var(--signal-wash);
}

/* ---- Location map preview ------------------------------------------------- */
.locate__map {
  display: block;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
}

.locate__map[hidden] { display: none !important; }

.locate__map-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.locate__map-note {
  margin: 0;
  padding: var(--space-sm);
  font-size: var(--step-xs);
  color: var(--ink-muted);
}

.locate__map-link {
  display: block;
  padding: var(--space-2xs) var(--space-sm) var(--space-xs);
  font-size: var(--step-xs);
  font-weight: 600;
  color: var(--signal-text);
  text-decoration: none;
}

.locate__map-link:hover { text-decoration: underline; }

/* The build credit. Present, findable, and not competing with the phone
   number someone came here for. */
.site-footer__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__credit a:hover { color: var(--signal-text); }