/* ===========================================================================
   styles.css — HALCYON CLEARANCE — shared design system (CONCEPT DRAFT)
   ---------------------------------------------------------------------------
   "WORKING PREMIUM" identity (redesign 2026-07-13, run through the design
   skills — Impeccable / Taste / Emil / Apple).

   A trust-first local-trade site: a 3.5-tonne tipper, a two-man crew, same-week
   clearances for homeowners, landlords, letting agents and executors. The look
   is print-poster clarity on a committed ink + amber identity — the opposite
   of the eco-startup and the opposite of the old "lab dashboard".

   Brand: ink #111820 leads full-bleed (hero, calculator, final CTA, footer);
   amber #F2A900 is the single accent (<12% coverage). Display type is Hanken
   Grotesk (self-hosted, vendored — ZERO external requests). Body is the system
   stack. No decorative grid, no hazard stripes, no mono-instrument flourish,
   no 3D card-tilt, no third colour.

   Every existing class name + JS element hook is preserved — this file re-skins
   the estate markup, it renames nothing. 390px flawless, no horizontal scroll,
   full prefers-reduced-motion fallbacks.
   ========================================================================= */

/* ---------- display face: Hanken Grotesk (self-hosted, no network) --------- */
@font-face{font-family:"Hanken Grotesk";src:url("/vendor/fonts/hanken-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/vendor/fonts/hanken-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/vendor/fonts/hanken-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/vendor/fonts/hanken-800.woff2") format("woff2");font-weight:800;font-display:swap}

:root {
  /* ---- Brand (token names unchanged — page/island CSS depends on them) ---- */
  --ink-900: #111820;
  --ink-800: #1C242E;
  --ink-850: #161E27;
  --white: #FFFFFF;
  --amber: #F2A900;
  --amber-2: #ffbe1a;
  --amber-ink: #241900;
  --slate: #5A6B7B;
  --slate-soft: #eceff3;
  --red: #B3261E;
  --ink: #111820;
  --ink-soft: #3d4a58;
  --line: #dfe3e8;
  --card: #ffffff;
  --canvas: #eef1f4;
  --radius: 14px;
  /* ribbon-h zeroed — site-nav.js no longer injects .concept-ribbon, so no
     top reserve is needed on the ~14 shared pages. demo.html re-sets 34px in
     its own inline <style> (after this file) to offset its static ribbon. */
  --ribbon-h: 0px;
  --on-ink: #C9CDD2;      /* secondary text ON the ink header. ink-family tint, not a new hue */
  --ease: cubic-bezier(.16,.84,.28,1);
  --shadow-card: 0 20px 46px -28px rgba(17,24,32,.34);

  /* ---- neutrals + retained tokens (values retuned, names kept) ---- */
  --paper: #f6f7f9;          /* clean cool off-white content ground (not cream) */
  --paper-2: #edeff3;        /* subtle band / inset fill */
  --ink-3: #59636f;          /* muted ink — passes AA on white + paper */
  --line-2: #e8ebef;
  --steel: #4C4F51;          /* sampled Steel (tipper body) — light-surface micro-labels */

  /* ---- shared status tokens (bg/ink/line triads — G50 dedupe) ---- */
  --status-ok-bg: #e3f6e8;    --status-ok-ink: #145c2b;    --status-ok-line: #bfe6c9;
  --status-warn-bg: #fff4dc;  --status-warn-ink: #7a5600;  --status-warn-line: #f2d99a;
  --status-danger-bg: #fbe7e5; --status-danger-ink: #8a2018; --status-danger-line: #f2c4bf;
  --radius-sm: 10px;
  --shadow-sm: 0 12px 28px -22px rgba(17,24,32,.26);
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;  /* internal operator surfaces only (driver.css / staff.css) */
  --display: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
/* [hidden] safety net — class rules (.drawer{display:flex}, .btn{display:inline-flex},
   .header-cta{display:flex}) out-specify the UA [hidden] rule and leak hidden
   nodes into view. Keep display:none authoritative for any hidden element. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink-soft);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A6 (2026-07-23): `overflow-x: hidden` here made <body> a scroll container,
     which silently broke `position: sticky` on `.site-header` (a sticky element
     sticks to its nearest scrolling ancestor — an overflow:hidden body becomes
     one, so the header scrolled away). `overflow-x: clip` clips the same
     horizontal overflow WITHOUT establishing a scroll container, so the sticky
     header works again. Elegant one-property fix, not a wrapper hack. */
  overflow-x: clip;
  padding-top: var(--ribbon-h);
  /* solid, committed ground — the decorative precision grid is gone */
  background-color: var(--paper);
}

h1,h2,h3,h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--ink-900);
  text-wrap: balance;
}
/* one more hierarchy rung below the 800 display h1/h2 */
h3, h4 { font-weight: 700; }
/* relax the blanket -.02em tracking for smaller heading sizes (~1rem) */
h3, h4 { letter-spacing: -0.005em; }
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: inherit; }
img,svg { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
section { position: relative; padding: 64px 0 72px; }

/* Tabular numerals for figures (prices, counts) — Hanken/system, never mono */
.tnum, .amount, .price, .calc-price, .load-price, .price-add, .dep-amount,
.fraction-price, .review-price .rp-amount, .hero-card .v, .hero-card .price {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.mono { font-family: var(--mono); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- skip link (R51, 2026-07-26) --------------------------------
   Injected by site-nav.js as the first node in <body>, so it is the first
   thing that takes focus on every page. Off-screen until focused, then it
   parks itself over the top-left corner ON its own solid ground.

   `position: fixed`, deliberately, NOT absolute: the pill header that follows
   it is `position: sticky` inside a stacking context with `overflow` clipping
   further up on some pages, and an absolutely-positioned skip link was
   measured being clipped to nothing by exactly that (the same class of defect
   as the focus rings clipped by an `overflow:hidden` ancestor). Fixed takes it
   out of every ancestor's clip. z-index sits above the header's 150.

   The visible treatment does not rely on the global :focus-visible ring for
   its own visibility — it paints its own ink ground and amber border, so it
   is legible whether or not the ring renders. */
.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 300;
  display: inline-block;
  padding: 12px 18px;
  background: var(--ink-900); color: #fff;
  border: 2px solid var(--amber); border-radius: var(--radius-sm, 8px);
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  text-decoration: none;
  transition: top .15s var(--ease, ease);
}
.skip-link:focus { top: 12px; }
/* The skip target is focused programmatically, never by pointer or Tab, so it
   must not paint the big global focus ring around the entire page body. Focus
   still MOVES (that is the whole point of tabindex="-1") — the next Tab
   continues from inside main, which is what a keyboard user is checking. */
main[tabindex="-1"]:focus { outline: none; box-shadow: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ink-900);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--amber);
}

/* ---------- eyebrow / section label (restrained, no dash, no mono) ----- */
.kicker-tag, .routes-eyebrow, .step-eyebrow, .svc-hero .eyebrow {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 12px;
}

/* ---------- reveal-on-scroll (≤600ms ease-out, no bounce) ----------
   Dependency INVERTED (2026-07-21, a11y): .reveal / .reveal-stagger are
   VISIBLE BY DEFAULT — this is what a no-JS browser, a blocked/failed
   bundle, or a slow-parsing page sees. Only under html.js-reveal — a class
   the tiny inline script in each <head> sets synchronously, before first
   paint, and only when the visitor has not asked for reduced motion — do
   the hidden-then-animate rules below apply. A <noscript> block would not
   have covered "JS enabled but the bundle failed to load/run", which is
   the more common real-world failure; inverting the dependency does. */
.reveal { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 1; transform: none; }

html.js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
html.js-reveal .reveal.in { opacity: 1; transform: translateY(0); }
html.js-reveal .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.js-reveal .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
html.js-reveal .reveal-stagger.in > *:nth-child(1) { transition-delay: .02s; }
html.js-reveal .reveal-stagger.in > *:nth-child(2) { transition-delay: .07s; }
html.js-reveal .reveal-stagger.in > *:nth-child(3) { transition-delay: .12s; }
html.js-reveal .reveal-stagger.in > *:nth-child(4) { transition-delay: .17s; }
html.js-reveal .reveal-stagger.in > *:nth-child(5) { transition-delay: .22s; }
html.js-reveal .reveal-stagger.in > *:nth-child(6) { transition-delay: .27s; }
/* safety net: if html.js-reveal got set but app.js's IntersectionObserver
   never ran (bundle error, CSP block, slow/failed load after the inline
   marker fired), the inline script adds this class ~1.8s later — force
   everything visible rather than leaving it stuck at opacity:0. It is
   gated on html.reveal-armed, which app.js sets as soon as it attaches:
   an UNCONDITIONAL timer would fire on every healthy load too and flatten
   the scroll animation for everything below the fold. */
html.reveal-fallback .reveal, html.reveal-fallback .reveal-stagger > * { opacity: 1 !important; transform: none !important; }

/* ---------- concept-draft ribbon (HONESTY RAIL — flat solid bar) ---------- */
.concept-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--amber);
  color: var(--amber-ink);
  font-family: var(--display); font-weight: 700; font-size: .74rem;
  letter-spacing: .01em;
  text-align: center; padding: 8px 14px; min-height: var(--ribbon-h);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(17,24,32,.14);
}
.concept-ribbon strong { font-weight: 800; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 700; text-decoration: none; border-radius: 10px;
  padding: 13px 22px; border: 1.5px solid transparent; cursor: pointer;
  font-size: .98rem; line-height: 1.1; white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), filter .15s ease, opacity .15s ease, background .18s ease, border-color .18s ease;
}
/* press is near-instant; the release settles on the base .16s var(--ease) */
.btn:active { transform: translateY(1px) scale(.98); transition-duration: 60ms; transition-timing-function: ease-out; }
.btn-amber { background: var(--amber); color: var(--amber-ink); box-shadow: 0 10px 24px -12px rgba(242,169,0,.7); }
.btn-amber:hover { background: var(--amber-2); box-shadow: 0 14px 30px -12px rgba(242,169,0,.8); transform: translateY(-2px); }
.btn-amber:disabled { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; transform: none; }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.btn-ghost-ink { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn-ghost-ink:hover { background: var(--ink-900); color: var(--white); }
.btn-ink { background: var(--ink-900); color: var(--white); }
.btn-ink:hover { background: var(--ink-800); }
.btn-sm { padding: 9px 16px; font-size: .86rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* ---------- header (LEGACY "ink bar" — account.html + staff.html ONLY) -----
   Wave 2 (2026-07-21) ported every site-nav.js page + demo.html to the new
   floating pill header (`.site-header-pill`, defined near the bottom of this
   file next to the shared-nav rules). This block is what's left of the older
   ink-bar treatment; it stays live, byte-for-byte unchanged, because
   account.html and staff.html are parked — same header, same pre-existing
   sticky-position bug, on purpose. The two implementations never touch: no
   page ever carries both `.site-header` and `.site-header-pill`. */
.site-header {
  position: sticky; top: var(--ribbon-h); z-index: 150;
  background: rgba(17,24,32,.94);
  backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
/* Everything in the bar is now sitting ON ink, so every foreground colour in the
   header has to flip. Grouped here rather than edited in place so the whole
   treatment can be reverted in one block. */
.site-header .brand-word { color: #fff; }
.site-header .site-nav a { color: var(--on-ink); }
.site-header .site-nav a:hover,
.site-header .site-nav a.is-active { color: #fff; }
.site-header .working-chip { color: var(--on-ink); border-color: rgba(255,255,255,.22); }
.site-header .nav-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.site-header .nav-toggle-bars span { background: #fff; }
.site-header .nav-login {
  color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.30);
}
.site-header .nav-login:hover { background: rgba(255,255,255,.16); }
.site-header .nav-backoffice {
  color: var(--amber); background: rgba(242,169,0,.10); border-color: rgba(242,169,0,.55);
}
/* account.html, driver.html, staff.html and demo.html build their own header-cta
   nav out of .btn-ghost-ink instead of .nav-login, so they do not inherit the
   .nav-login flip above. Ghost-ink is ink text on a transparent ground, which
   measured 1.16:1 once the bar went ink. Its :hover (ink fill, white text) is
   equally invisible here, so both states are re-cut for a dark ground. */
.site-header .btn-ghost-ink {
  color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.30);
}
.site-header .btn-ghost-ink:hover {
  color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45);
}
.site-header .brand { color: #fff; }
.site-header .nav-dd-btn { color: var(--on-ink); }
.site-header .nav-dd-btn:hover,
.site-header .nav-dd.open .nav-dd-btn { color: #fff; }
.site-header .nav-dd-caret { color: var(--on-ink); }
/* The Services dropdown panel is still a WHITE card hanging below the ink bar, so
   its links must stay dark. Without this the .site-header .site-nav a rule above
   (0,2,1) outranks .nav-dd-menu a (0,1,1) and paints them light-on-white. */
.site-header .nav-dd-menu a { color: var(--ink-soft); }
.site-header .nav-dd-menu a:hover { color: var(--ink-900); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 11px; padding-bottom: 11px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-word { font-family: var(--display); font-weight: 800; font-size: 1.14rem; color: var(--ink-900); letter-spacing: -.015em; white-space: nowrap; }
.working-chip {
  font-family: var(--display); font-weight: 600; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); background: transparent; border: 1px solid var(--line);
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
/* NOTE: .site-nav's real base rules (display/gap/etc.) live down in the
   FLOATING PILL HEADER block — it's the only header markup that uses this
   class. .header-cta stays here for account.html/staff.html's own header. */
.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* back office (revealed only for a logged-in admin/staff account — see
   account.js / site-nav.js; presentation-only, real gate is staff.js). Base
   shape lives here because it's shared across THREE contexts: account.html/
   staff.html's own header-cta, the generated mobile drawer (white ground —
   this ink-on-amber-tint default suits it as-is), and the new pill header
   (dark ground — recoloured via the `.site-header-pill .nav-backoffice`
   scope down in the FLOATING PILL HEADER block). */
.nav-backoffice {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--ink-900); font-weight: 700; font-size: .86rem;
  padding: 8px 12px; border: 1.5px solid var(--amber); border-radius: 9px;
  background: rgba(242,169,0,.08); transition: border-color .15s ease, background .15s ease;
}
.nav-backoffice::before { content: "⚙"; font-size: .82rem; line-height: 1; }
.nav-backoffice:hover { border-color: var(--amber-2, var(--amber)); background: rgba(242,169,0,.16); }
.nav-backoffice[hidden] { display: none; }
/* Placeholder working-name chip defers to wide screens so a full nav never
   overflows into the brand at typical laptop widths (1280-1440). The concept
   ribbon already carries the "working name / not trading" message. */
@media (max-width: 1319px) { .working-chip { display: none; } }
@media (max-width: 559px) {
  .brand-word { font-size: 1.02rem; }
}
@media (max-width: 400px) {
  .brand-word { font-size: .96rem; }
  .site-header .container { gap: 10px; }
}

/* Trust strip (index) — markup shipped without styles; the bold label + sub-line
   must STACK, not run inline (fixes "Licensed waste carrierNatural Resources Wales"). */
.trust-strip { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.trust-badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 30px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .trust-badges { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .trust-badges { grid-template-columns: repeat(4, 1fr); } }
.trust-badge { display: flex; align-items: flex-start; gap: 11px; }
.trust-badge .tb-ic { font-size: 1.15rem; line-height: 1.25; flex: none; }
.trust-badge > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trust-badge strong { display: block; font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--ink-900); letter-spacing: -.01em; }
.trust-badge .tb-sub { display: block; font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.trust-strip-link { margin: 18px 0 0; font-size: .86rem; }
.trust-strip-link a { color: var(--ink-900); font-weight: 600; text-decoration: none; }
.trust-strip-link a:hover { text-decoration: underline; }

/* =========================================================================
   HERO — a ink-drenched full-bleed band with an asymmetric split and a
   floating offer card. No grid, no clip gimmick — poster clarity.
   ========================================================================= */
.hero {
  position: relative; color: #EAEEF3; padding: 78px 0 92px; overflow: hidden;
  /* Layered: amber sheen · base ink floor (all-breakpoint text legibility) ·
     dark-left scrim for side text · photographic tipper texture · ink fallback.
     Photo = Halcyon Clearance cage tipper in full livery (Concept 01 identity). */
  background:
    radial-gradient(760px 460px at 84% -12%, rgba(242,169,0,.15), transparent 60%),
    linear-gradient(157deg, rgba(17,24,32,.78) 0%, rgba(28,36,46,.46) 55%, rgba(28,36,46,.30) 100%),
    linear-gradient(90deg, var(--ink-900) 0%, rgba(17,24,32,.60) 44%, rgba(17,24,32,.04) 82%),
    url('img/livery-tipper-hero.webp') center right / cover no-repeat,
    var(--ink-900);
}
.hero::before { /* soft top sheen only — replaces the decorative grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 320px at 12% 6%, rgba(255,255,255,.06), transparent 60%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.18fr .82fr; } }
/* Single-column hero: the 90deg side-scrim above is calibrated for a copy column that
   ends near 44%, so it is effectively absent under full-width copy. Replace it with a
   near-uniform scrim; the van still reads as texture, the copy keeps AA. */
@media (max-width: 979px) {
  .hero {
    background:
      radial-gradient(760px 460px at 84% -12%, rgba(242,169,0,.13), transparent 60%),
      linear-gradient(180deg, rgba(17,24,32,.90) 0%, rgba(17,24,32,.86) 55%, rgba(17,24,32,.92) 100%),
      url('img/livery-tipper-hero.webp') center right / cover no-repeat,
      var(--ink-900);
  }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: #DDE1E6; margin-bottom: 18px;
}
.hero-eyebrow strong, .hero-eyebrow b { color: var(--amber); font-weight: 700; }
.hero h1 { color: var(--white); font-size: clamp(2.4rem,5.4vw,3.6rem); line-height: 1.02; letter-spacing: -.03em; max-width: 15ch; margin-bottom: .34em; }
.hero .amber-line { color: var(--amber); }
.hero .tagline { font-family: var(--display); font-weight: 600; letter-spacing: -.005em; font-size: clamp(1rem,1.7vw,1.15rem); color: #E2E6EA; max-width: 40ch; margin-bottom: 1.3em; }
.hero .hero-subhead, .hero .sub { color: #DCE0E5; max-width: 46ch; font-size: 1.02rem; }
.hero .hero-subhead strong { color: var(--amber); font-weight: 700; }
.hero .sub strong { color: var(--white); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 26px; }
.cta-note { font-size: .82rem; color: #D5DAE0; margin-bottom: 0; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.badges li { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); padding: 9px 14px 9px 10px; border-radius: 10px; font-size: .85rem; font-weight: 600; color: #EAEEF3; }
.badges .icon { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); font-size: .76rem; }
.badges li.compliance { border-color: rgba(242,169,0,.5); background: rgba(242,169,0,.12); }
.badges li.compliance .icon { background: var(--amber); color: var(--amber-ink); border-color: transparent; }
.reg-note { font-family: var(--display); font-size: .66rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--amber-ink); background: rgba(242,169,0,.32); border: 1px solid rgba(242,169,0,.5); padding: 1px 6px; border-radius: 5px; }

/* floating hero offer card — flat lift on hover (no 3D tilt) */
.hero-card {
  position: relative; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 22px;
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-card:hover, #hero-tilt-card:hover { box-shadow: 0 26px 54px -28px rgba(4,14,30,.55); } /* lift transform gated below @media (hover:hover) */
.hero-card .kicker { font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.hero-card-flag, .hero-card .hero-card-flag {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 10px 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.hero-card-flag .flag-lead { font-family: var(--display); font-weight: 800; font-size: 1.18rem; color: var(--ink-900); letter-spacing: -.015em; }
.hero-card-flag .flag-sur { font-family: var(--display); font-weight: 700; color: var(--amber-ink); background: rgba(242,169,0,.22); border-radius: 6px; padding: 3px 9px; font-size: .9rem; flex: none; }
.hero-card .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--paper-2); font-size: .92rem; color: var(--ink-soft); }
.hero-card .row:last-of-type { border-bottom: none; }
.hero-card .row .v { font-family: var(--display); font-weight: 800; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.hero-card-fine { margin: 12px 0 0; font-size: .74rem; color: var(--ink-3); }

/* ---------- section head ---------- */
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.75rem,3.4vw,2.5rem); letter-spacing: -.025em; }
.section-head > p { font-size: 1.02rem; color: var(--ink-soft); }

/* =========================================================================
   SERVICES / PRICE LADDER / PROCESS — white cards on the off-white ground,
   flat lift on hover, no mono spec-labels, no 3D. Layout rhythm varies per
   section (numbered feature cards vs a 4-up price ladder with an ink pick).
   ========================================================================= */
.services, .pricing, .disposal, .area, .tech, .faq, #trust { background: transparent; }
.services, .disposal { border-top: 1px solid var(--line-2); }
/* subtle ink-tinted solid band to break the rhythm (never a repeating grid) */
.tech { background: var(--paper-2); border-top: 1px solid var(--line-2); }

.services-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .services-grid { grid-template-columns: repeat(3,1fr); } }
.tilt-card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}
.tilt-card:hover { box-shadow: var(--shadow-card); border-color: rgba(17,24,32,.16); } /* lift transform gated below @media (hover:hover) */
.tilt-card .num { width: 34px; height: 34px; border-radius: 9px; background: var(--ink-900); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
.tilt-card h3 { font-size: 1.06rem; margin-bottom: 2px; }
.tilt-card p { font-size: .92rem; margin-bottom: 0; }
.tilt-card .fit { margin-top: auto; font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--steel); }

/* how it works (3-step compact, used on service pages) */
.steps { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3,1fr); } }
.step { position: relative; }
.step .step-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: linear-gradient(155deg,var(--ink-900),var(--ink-800)); color: var(--white); font-family: var(--display); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; margin-bottom: 16px; box-shadow: 0 10px 22px -14px rgba(17,24,32,.5); }
.step h3 { font-size: 1.08rem; }
.step p { font-size: .94rem; }
.step-arrow { display: none; position: absolute; top: 22px; right: -22px; color: var(--amber); font-size: 1.3rem; }
@media (min-width: 820px) { .step:not(:last-child) .step-arrow { display: block; } }

/* ---------- pricing ladder ---------- */
.price-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (min-width: 820px) { .price-grid { grid-template-columns: repeat(4,1fr); } }
.price-card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px 16px; text-align: left; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}
.price-card:hover { box-shadow: var(--shadow-card); border-color: rgba(242,169,0,.6); } /* lift transform gated below @media (hover:hover) */
.price-card.full { background: var(--ink-900); border-color: var(--ink-900); }
.price-card .label { font-family: var(--display); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.price-card.full .label { color: #a9bccf; }
.price-card .amount { font-family: var(--display); font-weight: 800; font-size: 1.95rem; color: var(--ink-900); line-height: 1; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.price-card.full .amount { color: var(--white); }
.price-card .fill { font-size: .78rem; color: var(--ink-3); }
.price-card.full .fill { color: #a9bccf; }
/* real-terms line (additive, 2026-07-21) — a second, muted sub-line under .fill */
.price-card .realterms { font-size: .74rem; color: var(--ink-3); margin-top: 4px; opacity: .85; }
.price-card.full .realterms { color: #a9bccf; }
.deposit-strip { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: rgba(242,169,0,.08); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; font-size: .94rem; color: var(--ink-soft); }
.deposit-strip strong { color: var(--ink-900); }
.price-note { margin-top: 16px; font-size: .82rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- item examples strip (pricing.html "What would it cost?") ---- */
.item-examples { margin-top: 44px; }
.item-examples h3 { font-size: 1.3rem; margin-bottom: .2em; }
.item-examples > p { margin: 0 0 18px; font-size: .92rem; color: var(--ink-soft); }
.item-example-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (min-width: 700px) { .item-example-grid { grid-template-columns: repeat(3,1fr); } }
.item-example-card {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.ie-label { font-size: .92rem; color: var(--ink-900); font-weight: 600; }
.ie-price { font-family: var(--display); font-weight: 800; font-size: .92rem; color: var(--ink-900); white-space: nowrap; }

/* ---------- truck-fill strip (pricing.html — load-level renders) ----------
   Illustrative renders of the tipper at each fill level, sitting under the
   calculator. Labels/prices are ink on a light card — amber stays fill-only
   per DESIGN.md, so nothing here is amber text. */
.truck-strip { margin-top: 40px; }
.truck-strip-head { max-width: 62ch; margin-bottom: 20px; }
.truck-strip-head h2, .truck-strip-head h3 { font-size: 1.3rem; margin-bottom: .25em; font-weight: 700; letter-spacing: -0.005em; }
.truck-strip-cap { margin: 0; font-size: .85rem; color: var(--ink-3); line-height: 1.5; }
.truck-fill-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.truck-fill-card {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.tf-media { aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.tf-media img { width: 100%; height: 100%; object-fit: cover; }
.truck-fill-card figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 15px;
}
.tf-label { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tf-price { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--ink-900); font-variant-numeric: tabular-nums; }
/* 2×2 on tablet */
@media (max-width: 820px) { .truck-fill-grid { grid-template-columns: repeat(2,1fr); } }
/* swipeable single-file rail on phones — the rail owns its own overflow (scroll
   container), so the page itself never scrolls sideways. */
@media (max-width: 520px) {
  .truck-fill-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .truck-fill-card { scroll-snap-align: start; }
}

/* ---------- trust / reviews ---------- */
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .trust-grid { grid-template-columns: 1.4fr 1fr; } }
.trust-points { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.trust-points li { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px; }
.trust-points li:hover { box-shadow: var(--shadow-sm); }
.trust-points .tp-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--paper-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.trust-points li.reg .tp-ic { background: rgba(242,169,0,.14); border-color: rgba(242,169,0,.4); }
/* R53 (2026-07-26): promoted h4 -> h3 (these sat directly under the section h2).
   Both matched so a hand-written page keeps the same look; font-weight pinned
   because the base rule would otherwise leave them identical anyway (h3 and h4
   share weight 700) — stated explicitly so a future base-rule change cannot
   silently re-weight them. */
.trust-points h3, .trust-points h4 { margin: 0 0 3px; font-size: .98rem; font-weight: 700; }
.trust-points p { margin: 0; font-size: .87rem; }
.reviews-slot { background: var(--ink-900); color: var(--white); border-radius: var(--radius); padding: 26px 22px; display: flex; flex-direction: column; justify-content: center; text-align: center; position: relative; overflow: hidden; }
.reviews-slot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 0%, rgba(242,169,0,.1), transparent 70%); pointer-events: none; }
.reviews-slot > * { position: relative; }
.reviews-slot .stars { color: var(--amber); font-size: 1.4rem; letter-spacing: .12em; margin-bottom: 8px; opacity: .5; }
.reviews-slot h3 { color: var(--white); font-size: 1.2rem; }
.reviews-slot p { color: #a9bccf; font-size: .88rem; margin-bottom: 0; }

/* ---------- gallery (before / after plates) ----------
   DEAD as of 2026-07-28. .gallery-grid and .ba-caption were orphaned when the
   before/after section was removed from index.html on the operator's
   instruction; .ba-card / .ba-split / .ba-panel / .consent-note below were
   ALREADY orphaned before that — they are an older mockup vocabulary the live
   pages stopped using some time ago, and they are left in place here rather
   than swept up, because removing markup nobody asked me to touch is how an
   unrelated regression gets attributed to this change. Verified zero users
   across every .html and .js under public/. Whole block is a deletion
   candidate for a dedicated cleanup pass. */
.ba-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.ba-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); height: 160px; }
.ba-panel { position: relative; display: flex; align-items: center; justify-content: center; color: #c9d2db; font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; }
.ba-panel.before { background: #e9edf1; }
.ba-panel.after { background: var(--ink-850); color: #a9bccf; }
.ba-panel .tag { position: absolute; top: 8px; left: 8px; background: rgba(17,24,32,.88); color: #fff; font-family: var(--display); font-size: .62rem; font-weight: 700; padding: 2px 8px; border-radius: 5px; letter-spacing: .05em; z-index: 2; }
.ba-panel.after .tag { background: var(--amber); color: var(--amber-ink); }
/* .ba-caption removed 2026-07-28 with the gallery — see the block header above */
.consent-note { margin-top: 22px; display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px; }
.consent-note .lock { font-size: 1.3rem; flex: none; }
.consent-note p { margin: 0; font-size: .87rem; color: var(--ink-soft); }
.consent-note strong { color: var(--ink-900); }

/* ---------- service area (radar) ---------- */
.area-wrap { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .area-wrap { grid-template-columns: 1.1fr .9fr; } }
.area-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; }
.area-list li { font-family: var(--display); background: var(--card); border: 1px solid var(--line); color: var(--ink-900); padding: 7px 13px; border-radius: 8px; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }
.area-list li.plus { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.radar { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; }
.radar svg { width: 100%; height: 100%; }
.radar-ring { fill: none; stroke: var(--ink-900); opacity: .16; }
.radar-ring.r2 { opacity: .24; }
.radar-ring.r3 { opacity: .3; stroke-dasharray: 3 5; }
.radar-dot { fill: var(--amber); }
.radar-label { font-family: var(--display); font-size: 9px; font-weight: 700; fill: var(--ink-900); letter-spacing: .02em; }
.radar-pulse { fill: none; stroke: var(--amber); stroke-width: 2; opacity: .6; transform-origin: center; animation: pulse 3s ease-out 3 forwards; }
@keyframes pulse { 0% { transform: scale(.32); opacity: .7; } 100% { transform: scale(1); opacity: 0; } }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; max-width: 820px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 18px; font-family: var(--display); font-weight: 700; color: var(--ink-900); font-size: .98rem; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--ink-900); flex: none; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
/* .faq-item clips to its rounded corners (overflow:hidden above), and the
   summary fills its content box — so the global focus ring, which is painted
   OUTSIDE the border box (outline-offset:3px + a spread box-shadow), is
   clipped away entirely and the accordion ends up with no visible indicator.
   Draw the same two colours INWARD instead: amber 0–3px in, ink 3–6px in. */
.faq-item summary:focus-visible {
  outline-offset: -6px;
  box-shadow: inset 0 0 0 3px var(--amber);
}
.faq-item .faq-body { padding: 0 18px 16px; }
.faq-item .faq-body p { margin: 0; font-size: .9rem; }

/* ---------- final CTA (ink-drenched band) ---------- */
/* Livery strip — the Cut HC identity applied to the vehicles (index). */
.livery { background: var(--paper); border-top: 1px solid var(--line-2); }
.livery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.livery-card { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.livery-card img { display: block; width: 100%; height: 210px; object-fit: cover; }
.livery-card figcaption { padding: 12px 15px; font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--ink-900); }
@media (max-width: 900px) { .livery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .livery-grid { grid-template-columns: 1fr; } .livery-card img { height: 200px; } }

/* ---------- closing band: the ONE amber field per page --------------------
   Borrowed from Direction 03 "High Vis" and accepted alongside Direction 01.
   Amber is a small accent everywhere else on the page; here it is the ground.
   It also gives the closing moment a hard separation from the ink footer,
   which the old ink-on-ink CTA did not have. Every child colour below is
   re-derived for a light ground and contrast-checked against #F2A900:
     h2        #111820  8.89:1
     p         #3B2E05  6.62:1
     .cta-note #4A3A08  5.50:1  (small text, AA needs 4.5)
     button    amber #F2A900 on ink #111820  8.89:1
   ------------------------------------------------------------------------- */
.final-cta { background: var(--amber); color: var(--ink-900); text-align: center; padding: 82px 0; position: relative; overflow: hidden; border-top: 4px solid var(--ink-900); }
.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 { color: var(--ink-900); font-size: clamp(1.85rem,3.6vw,2.6rem); letter-spacing: -.025em; max-width: 22ch; margin: 0 auto .3em; }
.final-cta p { color: #3B2E05; max-width: 46ch; margin: 0 auto 26px; }
.final-cta .cta-note { color: #4A3A08; }
/* the primary button would be amber-on-amber, so it inverts to ink ground */
.final-cta .btn-amber { background: var(--ink-900); color: var(--amber); box-shadow: 0 10px 24px -12px rgba(17,24,32,.75); }
.final-cta .btn-amber:hover { background: var(--ink-800); color: var(--amber-2); box-shadow: 0 14px 30px -12px rgba(17,24,32,.85); }
/* secondary/ghost buttons carry white borders built for a dark ground */
.final-cta .btn-ghost { color: var(--ink-900); border-color: rgba(17,24,32,.45); }
.final-cta .btn-ghost:hover { background: rgba(17,24,32,.1); border-color: var(--ink-900); }
.final-cta a { color: var(--ink-900); }
/* the global focus ring is amber, which is invisible on this band */
.final-cta a:focus-visible, .final-cta button:focus-visible, .final-cta [tabindex]:focus-visible { outline-color: var(--ink-900); }
@media (max-width: 620px) { .final-cta { padding: 58px 0; border-top-width: 3px; } }

/* ---------- footer (ink-drenched) ---------- */
footer { background: var(--ink-900); color: #c1ccd9; padding: 48px 0 26px; font-size: .86rem; }
footer p { color: inherit; }
footer a { color: #DBE3EC; text-decoration: underline; }
footer a:hover { color: var(--white); }
.footer-grid { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 28px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
/* R53 (2026-07-26): the shared footer's column labels moved <h4> -> <h2> to
   kill a two-level heading skip on every page (see site-nav.js). h4 is kept in
   the selector so any page still carrying its own hand-written footer renders
   identically.

   font-weight is pinned, and pinned to 700 HERE and to 800 in home.css, because
   a full-page pixel diff of all 14 pages proved the shared footer was ALREADY
   rendering at two different weights depending on the page: home.css:71
   re-declares `h1,h2,h3,h4{font-weight:800}` and only index.html loads it, so
   these labels drew at 800 on the homepage and 700 on the other thirteen. That
   is a real pre-existing inconsistency in one shared component, but normalising
   it is a restyle, not a heading fix — so it is reproduced exactly and reported
   instead. Promoting the tag without these pins would have silently made all
   thirteen heavier (h2 has no 700 rung, h4 does). */
.footer-grid h2, .footer-grid h4 { color: var(--white); margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: .8rem; line-height: 1.08; letter-spacing: .05em; text-transform: uppercase; }
.footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.footer-brand .brand-word { color: var(--white); font-size: 1.05rem; }
.footer-disclaimer { border: 1px solid rgba(242,169,0,.35); background: rgba(242,169,0,.08); border-radius: var(--radius-sm); padding: 15px 16px; font-size: .82rem; color: #dbe0e8; margin-bottom: 24px; line-height: 1.55; }
.footer-disclaimer strong { color: var(--amber); }
.footer-licence { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; margin-bottom: 14px; font-size: .78rem; color: #9aa7b6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: .78rem; color: #9aa7b6; }
/* Trader identity + the legal set. Both are compliance surfaces, not decoration:
   the address answers "who am I contracting with", the row answers "on what terms". */
.footer-trader { margin: 0 0 10px; color: #9aa7b6; font-size: .8rem; line-height: 1.5; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal a { color: #DBE3EC; }
@media (max-width: 620px) { .footer-bottom { flex-direction: column; gap: 12px; } }

/* =========================================================================
   HOMEPAGE ENRICHMENT — calculator (ink instrument) + van-fill gauge,
   process pipeline, disposal, tech.
   ========================================================================= */

/* ---- interactive calculator = ink panel (full-bleed dark surface) ---- */
.calc {
  position: relative; background: var(--ink-900); color: #EAEEF3;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  padding: clamp(18px,3.2vw,26px); box-shadow: var(--shadow-card); overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: 22px;
}
.calc::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% -10%, rgba(242,169,0,.08), transparent 60%); }
.calc > * { position: relative; z-index: 1; }
@media (min-width: 900px) { .calc { grid-template-columns: .95fr 1.05fr; gap: 26px; align-items: start; } }

.instrument-controls { display: grid; gap: 18px; align-content: start; }

/* van-fill gauge (left column of the instrument) */
.instrument-gauge { align-self: stretch; }
.van-frame {
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(4,17,36,.5); padding: 14px 12px 10px; position: relative; overflow: hidden;
}
.van-readout-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.van-rt-key { font-family: var(--display); font-size: .64rem; font-weight: 600; letter-spacing: .1em; color: #9db2c9; text-transform: uppercase; }
.van-rt-val { font-family: var(--display); font-weight: 800; color: var(--amber); font-size: .95rem; font-variant-numeric: tabular-nums; }
.van-truck { display: block; width: 100%; margin: 2px 0; }
.van-guide { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); }
.van-guide .vg-key { font-family: var(--display); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a9bccf; }
.van-guide .vg-val { font-family: var(--display); font-weight: 800; color: var(--amber); font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.calc-step-label { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; color: #D1DBE6; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.calc-step-n { width: 20px; height: 20px; border-radius: 6px; background: var(--amber); color: var(--amber-ink); display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; flex: none; }

.speed-tiers { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 480px) { .speed-tiers { grid-template-columns: repeat(3,1fr); } }
.speed-card { position: relative; }
.speed-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.speed-card label { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; height: 100%; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.speed-card label:hover { border-color: rgba(242,169,0,.55); } /* lift transform gated below @media (hover:hover) */
.speed-card input:checked + label { border-color: var(--amber); background: rgba(242,169,0,.14); box-shadow: inset 0 0 0 1px rgba(242,169,0,.5); }
.speed-card input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 2px; }
.speed-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.speed-name { font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--white); }
.speed-surcharge { font-family: var(--display); font-weight: 700; font-size: .74rem; color: var(--amber-2); white-space: nowrap; flex: none; }
.speed-card input:checked + label .speed-surcharge { color: var(--amber-2); }
.speed-promise { font-size: .7rem; color: #9db2c9; }
.speed-note { font-size: .68rem; color: #8296ad; }

.frac-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
@media (min-width: 480px) { .frac-cards { grid-template-columns: repeat(4,1fr); } }
.calc-frac { position: relative; }
.calc-frac input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-frac label { display: flex; flex-direction: column; gap: 7px; padding: 11px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; height: 100%; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.calc-frac label:hover { border-color: rgba(242,169,0,.55); } /* lift transform gated below @media (hover:hover) */
.calc-frac input:checked + label { border-color: var(--amber); background: rgba(242,169,0,.14); box-shadow: inset 0 0 0 1px rgba(242,169,0,.5); }
.calc-frac input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 2px; }
.frac-truck { display: block; width: 100%; max-width: 120px; }
.frac-name { font-family: var(--display); font-weight: 700; font-size: .85rem; color: var(--white); }
.frac-fill { font-size: .66rem; color: #9db2c9; }
.frac-base { font-family: var(--display); font-size: .7rem; font-weight: 700; color: #a9bccf; margin-top: auto; font-variant-numeric: tabular-nums; }

/* readout */
.calc-result { border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: linear-gradient(180deg, rgba(242,169,0,.08), rgba(255,255,255,.02)); padding: 16px 18px; text-align: left; }
.calc-out-head { font-family: var(--display); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a9bccf; }
.calc-price { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem,7vw,3.2rem); color: var(--amber); line-height: 1; margin: 4px 0 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-breakdown { font-size: .86rem; color: #c3d0de; }
.calc-deposit { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16); font-size: .84rem; color: var(--amber-2); }
.calc-deposit strong { font-family: var(--display); color: var(--white); font-size: 1rem; font-variant-numeric: tabular-nums; }
.calc-tier-note { margin-top: 10px; font-size: .76rem; color: #a9bccf; }
.calc-instrument-cta { margin-top: 4px; }

.calc-caveat { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; font-size: .84rem; color: var(--ink-3); }
.calc-caveat .ci { flex: none; }
.calc-cta { margin: 16px 0 6px; }

.ladder-head { margin-top: 44px; }
.ladder-head h3 { font-size: 1.3rem; margin-bottom: .2em; }
.ladder-head p { margin: 0 0 18px; font-size: .92rem; }

/* ---- process pipeline (numbered stages + quiet connectors) ---- */
.process-track { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 680px) { .process-track { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .process-track { grid-template-columns: repeat(3,1fr); } }
.process-step { position: relative; padding: 16px 16px 16px 58px; }
.process-step .ps-num { position: absolute; left: 14px; top: 16px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ink-900); color: var(--white); font-family: var(--display); font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }
.process-step::after { content: ""; position: absolute; left: 29px; top: 52px; bottom: -14px; width: 2px; background: linear-gradient(180deg, rgba(17,24,32,.24), rgba(17,24,32,.04)); }
.process-track > .process-step:last-child::after { display: none; }
.process-step h3 { font-size: 1rem; margin-bottom: 4px; }
.process-step p { font-size: .89rem; margin-bottom: 0; }
.process-step strong { color: var(--ink-900); }
.process-step .ps-state { position: absolute; top: 16px; right: 14px; font-family: var(--display); font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); display: flex; align-items: center; gap: 5px; }
.process-step .ps-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
@media (min-width: 1000px) {
  .process-step::after { left: auto; top: 30px; right: -12px; bottom: auto; width: 24px; height: 2px; background: linear-gradient(90deg, rgba(17,24,32,.24), rgba(17,24,32,.04)); }
  .process-track > .process-step:nth-child(3n)::after,
  .process-track > .process-step:last-child::after { display: none; }
}

/* ---- services deep-page link cards ---- */
.tilt-card.link-card { text-decoration: none; }
.tilt-card.link-card .fit { color: var(--steel); }
.tilt-card.link-card:hover .fit { text-decoration: underline; }

/* ---- responsible disposal ---- */
.disposal-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 900px) { .disposal-grid { grid-template-columns: 1.05fr .95fr; } }
.duty-panel, .routes-panel { border-radius: var(--radius); padding: 22px 20px; }
.duty-panel { background: var(--card); border: 1px solid var(--line); }
/* R53: promoted h4/h3 -> h2 where the heading was the section's own (it sat
   directly under the page h1, a two-level skip). Weight pinned to 700 so the
   promotion does not inherit the base h1/h2 weight of 800 and change how the
   panel looks. */
.duty-panel h2, .duty-panel h3 { font-size: 1.2rem; margin-bottom: 12px; font-weight: 700; letter-spacing: -0.005em; }
.duty-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.duty-list li { display: flex; gap: 12px; align-items: flex-start; }
.duty-list .di { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1rem; }
.duty-list li div { font-size: .9rem; color: var(--ink-soft); }
.duty-list strong { color: var(--ink-900); }
.routes-panel { background: var(--ink-900); color: var(--white); position: relative; overflow: hidden; }
.routes-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(100% 80% at 50% 0%, rgba(242,169,0,.1), transparent 70%); pointer-events: none; }
.routes-panel > * { position: relative; }
.routes-intro { color: #a9bccf; font-size: .86rem; margin-bottom: 14px; }
.route-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.route-card { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 12px 14px; }
.route-card .rc-ic { flex: none; font-size: 1.2rem; }
.route-card h4 { color: var(--white); margin: 0 0 2px; font-size: .96rem; }
.route-card p { color: #a9bccf; margin: 0; font-size: .84rem; }

/* ---- tech / the app ---- */
.tech-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .tech-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .tech-grid { grid-template-columns: repeat(4,1fr); } }
.tech-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 18px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tech-card:hover { box-shadow: var(--shadow-sm); } /* lift transform gated below @media (hover:hover) */
.tech-card .tc-ic, .tech-card .tech-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--paper-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 12px; }
.tech-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.tech-card p { font-size: .88rem; margin-bottom: 0; }
.tech-card strong { color: var(--ink-900); }

/* ---- service-area fuel note ---- */
/* NOT flex: the <p>'s children are bare text runs + inline spans, and flex would
   turn every anonymous text box into its own flex item — the sentence then splits
   oddly around the injected number (seen live 2026-07-21). Icon flows inline. */
.area-fuel { display: block; font-size: .87rem; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 4px; }
.area-fuel .af-ic { margin-right: 6px; }

/* =========================================================================
   QUOTE WIZARD (quote.html, vanilla fallback) — worksheet on the off-white
   ========================================================================= */
.quote-intro { padding: 40px 0 8px; }
.quote-intro h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing: -.025em; max-width: 24ch; }
.quote-intro p { color: var(--ink-soft); max-width: 58ch; }

/* progress rail */
.progress-rail { padding: 14px 0 28px; }
.rail-list { list-style: none; display: flex; align-items: flex-start; gap: 0; padding: 0; margin: 0; }
.rail-list li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; min-width: 0; }
.rail-list li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--line); z-index: 0; }
.rail-list li.done:not(:last-child)::after { background: var(--amber); }
.rail-dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: .9rem; background: var(--card); border: 1.5px solid var(--line); color: var(--ink-3); transition: transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease; font-variant-numeric: tabular-nums; }
.rail-list li.current .rail-dot { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); box-shadow: 0 0 0 5px rgba(242,169,0,.18); }
.rail-list li.done .rail-dot { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.rail-label { margin-top: 8px; font-size: .72rem; font-weight: 600; color: var(--ink-3); max-width: 11ch; }
.rail-list li.current .rail-label { color: var(--ink); }

/* wizard card */
.wizard-shell { padding-bottom: 56px; }
.wizard-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px,4vw,34px); box-shadow: var(--shadow-card); }
.step-panel { display: none; }
.step-panel.active { display: block; animation: stepIn .3s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.step-panel h2 { font-size: clamp(1.35rem,2.6vw,1.6rem); }
.step-help { color: var(--ink-soft); font-size: .93rem; max-width: 60ch; }

/* form fields */
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--ink); }
.field .hint { font-size: .82rem; color: var(--ink-3); margin-top: -2px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"], .field textarea {
  font: inherit; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--white); color: var(--ink); width: 100%; max-width: 420px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { max-width: 560px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--amber); outline: 2px solid var(--ink-900); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(242,169,0,.18); }
/* ---------- error summary (R52, 2026-07-26) ----------------------------
   The role="alert" region at the top of the contact form. Contrast is computed,
   not eyeballed: text/links #8C1D18 on the #FDECEA fill = 7.97:1 (AAA at any
   size); the 2px #B3261E border reads 5.72:1 against its own fill and 6.54:1
   against the white .wizard-card behind it, so the boundary is a genuinely
   visible edge at both of its neighbours. Nothing here is signalled by colour
   alone — the heading states the failure count in words, and the links keep
   their underline. */
.form-errors {
  border: 2px solid var(--red);
  background: #FDECEA;
  border-radius: var(--radius-sm);
  padding: 14px 18px 12px;
  margin: 0 0 22px;
}
.form-errors[hidden] { display: none; }
.form-errors:focus { outline: 3px solid var(--ink-900); outline-offset: 3px; }
.form-errors-title {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: #8C1D18;
}
.form-errors ul { margin: 0; padding-left: 20px; }
.form-errors li { margin: 0 0 4px; font-size: .9rem; }
.form-errors li:last-child { margin-bottom: 0; }
.form-errors a { color: #8C1D18; font-weight: 700; text-decoration: underline; }
.form-errors a:hover { text-decoration-thickness: 2px; }

.error-text { display: none; color: var(--red); font-size: .82rem; font-weight: 700; margin-top: -2px; }
.error-text.show { display: block; }
.field input.invalid { border-color: var(--red); }
.req { color: var(--red); }

/* waste-type chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 20px; }
.chip-option { position: relative; }
.chip-option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-option label { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); font-family: var(--display); font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .15s var(--ease), border-color .15s ease, background .15s ease; user-select: none; }
.chip-option input:checked + label { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.chip-option input:focus-visible + label { outline: 3px solid var(--ink-900); outline-offset: 2px; }
.chip-option label .tick { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; flex: none; }
.chip-option input:checked + label .tick::after { content: "✓"; }

/* load fraction cards (wizard) */
.fraction-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 16px 0 8px; }
@media (min-width: 640px) { .fraction-grid { grid-template-columns: repeat(4,1fr); } }
.fraction-option { position: relative; }
.fraction-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fraction-option label { display: flex; flex-direction: column; gap: 10px; padding: 15px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; transition: transform .15s var(--ease), border-color .15s ease, background .15s ease; height: 100%; }
.fraction-option input:focus-visible + label { outline: 3px solid var(--ink-900); outline-offset: 2px; }
.fraction-option input:checked + label { border-color: var(--amber); background: linear-gradient(180deg, rgba(242,169,0,.12), rgba(242,169,0,.02)); box-shadow: 0 0 0 1px var(--amber) inset; }
.fraction-truck { display: block; width: 100%; max-width: 132px; margin-bottom: 2px; }
.fraction-name { font-family: var(--display); font-weight: 800; font-size: .96rem; color: var(--ink-900); }
.fraction-price { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fraction-desc { font-size: .76rem; color: var(--ink-3); }

/* W6 S6 — the £50 slot-book card. DARK at HEAD (config bookingFeeEnabled is
   false), so nothing here renders today; it exists so the flag flip does not
   ship an unstyled card. Deliberately QUIETER than the ladder cards: it is an
   alternative for a customer who cannot size the job, not a fifth load size,
   and it must not out-shout the priced options. No truck illustration — there
   is no load to draw. */
.fraction-option.is-unsized label { border-style: dashed; background: var(--surface-2, #f7f8f9); }
.fraction-option.is-unsized input:checked + label { border-style: solid; }
.fraction-option.is-unsized .fraction-price { font-size: 1.06rem; }
.fraction-terms { font-size: .7rem; line-height: 1.35; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.review-price.is-unsized .rp-amount { font-variant-numeric: tabular-nums; }

/* photo tiles */
.photo-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 16px 0 6px; }
@media (min-width: 520px) { .photo-grid { grid-template-columns: repeat(4,1fr); } }
.photo-tile { position: relative; aspect-ratio: 1/1; border-radius: 12px; border: 2px dashed var(--line); background: var(--white); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: border-color .15s ease; }
.photo-tile:hover { border-color: var(--slate); }
.photo-tile.filled { border-style: solid; border-color: var(--ink-900); }
.photo-tile.busy { border-color: var(--amber); }
.photo-tile input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* the invisible full-bleed file input can't show its own ring (clipped by the
   tile's overflow:hidden) — forward the focus ring to the tile itself */
.photo-tile:focus-within { outline: 3px solid var(--ink-900); outline-offset: 2px; }
.photo-tile .add-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--slate); font-size: .76rem; font-weight: 700; pointer-events: none; text-align: center; padding: 6px; }
.photo-tile .add-icon .plus { font-size: 1.7rem; line-height: 1; font-weight: 800; color: var(--slate); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo-tile .meta { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(17,24,32,.85), transparent); color: var(--white); font-size: .64rem; font-weight: 700; padding: 14px 8px 6px; pointer-events: none; }
.photo-tile .remove-btn { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(17,24,32,.85); color: var(--white); border: none; font-size: .85rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.photo-tile .remove-btn::before { content: ""; position: absolute; inset: -10px; }
.photo-tile .spin { width: 22px; height: 22px; border: 3px solid rgba(17,24,32,.2); border-top-color: var(--amber); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.compress-note { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: .83rem; color: var(--ink-soft); margin-top: 14px; }
.compress-note .ic { flex: none; font-size: 1.05rem; }

/* consent + summary */
.consent-row { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 6px; }
.consent-row input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--amber); }
.consent-row label { font-size: .88rem; color: var(--ink-soft); font-weight: 500; }
.consent-row label strong { color: var(--ink); font-weight: 700; }

.review-summary { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 8px 0 18px; }
.review-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.review-summary dt { color: var(--ink-3); font-weight: 600; font-size: .86rem; }
.review-summary dd { margin: 0; font-weight: 700; font-size: .9rem; text-align: right; color: var(--ink); }
.review-price { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.review-price .rp-amount { font-family: var(--display); font-weight: 800; font-size: 1.9rem; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.review-price .rp-amount small { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 700; text-align: right; }

/* nav buttons */
.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

/* fallback / confirmation panel */
.result-shell { display: none; padding: 8px 0 56px; }
.result-shell.active { display: block; animation: stepIn .3s var(--ease); }
.result-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px,5vw,40px); box-shadow: var(--shadow-card); text-align: center; }
.result-icon { width: 64px; height: 64px; border-radius: 14px; background: var(--amber); color: var(--amber-ink); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 18px; }
.result-card h2 { font-size: clamp(1.4rem,3vw,1.9rem); }
.result-card > p { max-width: 52ch; margin: 0 auto 20px; }
.fallback-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 20px; }
.fallback-summary { text-align: left; max-width: 480px; margin: 0 auto 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: .88rem; }
.fallback-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.fallback-summary dt { color: var(--ink-3); font-weight: 600; }
.fallback-summary dd { margin: 0; font-weight: 700; text-align: right; }
.fallback-fineprint { font-size: .78rem; color: var(--ink-3); max-width: 48ch; margin: 0 auto; }

.footnote { text-align: center; color: var(--ink-3); font-size: .78rem; padding: 0 0 40px; }
.page-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 8px 16px 6px; }
.page-links a { color: var(--ink-900); text-decoration: none; font-weight: 700; font-size: .9rem; }
.page-links a:hover { color: var(--steel); text-decoration: underline; }
#sr-announcer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* =========================================================================
   FLOATING PILL HEADER (site-nav.js output + demo.html's hand-matched copy)
   ---------------------------------------------------------------------------
   Ported from the operator-approved mockup (2026-07-21 Wave 2):
   .ui-review/runs/halcyon-home-20260720/options/high-end-visual-leftbar-pill.html
   — a rounded, inset-from-the-top bar with brand/nav/actions all left-anchored.

   Deliberate deviation from the mockup: the mockup's header is
   `position:fixed`, which needed a matching `padding-top` hack on every page
   it sits over (its own `.hero{padding-top:7.5rem}`). That's fragile across
   11+ pages with different first sections. Using `position:sticky` instead —
   with its own margin standing in for the "inset from the top" gap — keeps
   the header in normal flow, so every page reserves its own space for it
   automatically and nothing can ever render underneath it. Visually
   identical once scrolled; safer regression profile for a shared component.

   `.site-nav`, `.site-nav-wrap`, `.nav-dd*`, `.nav-login`, `.nav-toggle*`,
   `.nav-drawer*`, `.nav-scrim` and the `.pill-*` classes below are used ONLY
   inside this header (verified — nothing else in the estate references
   them), so they're styled as plain base rules, no scoping needed.
   `.brand`, `.brand-word`, `.working-chip` and `.nav-backoffice` ARE shared
   with account.html/staff.html's legacy `.site-header`, so their pill colour
   flips are scoped under `.site-header-pill` — the same pattern the legacy
   block already used for the same reason. `.container` and `.header-cta`
   are deliberately NOT reused here (both still serve the two parked pages
   unmodified) — this header uses its own `.pill-row` / `.pill-util` instead. */
.site-header-pill {
  position: sticky;
  top: calc(var(--ribbon-h) + 1rem);
  z-index: 150;
  width: min(94%, 1320px);
  margin: 1rem auto 1.25rem;
  border-radius: 999px;
  background: rgba(17,24,32,.92);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 34px -8px rgba(0,0,0,.35);
}
.site-header-pill .brand,
.site-header-pill .brand-word { color: #fff; }
.site-header-pill .working-chip { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.22); }
/* brand is a standalone header control — give it a full ≥44px hit area (its
   own <a> box measured only 28px tall). min-height only floors the anchor to
   the row height the CTA already sets, so nothing about the pill's visual
   height changes; scoped to the pill so the parked legacy header is untouched. */
.site-header-pill .brand { min-height: 44px; }

/* Mobile-first base: brand left, hamburger right (nav + utils are hidden
   below 1211 and the hamburger takes over). The ≥1211 rule below promotes
   this to a 3-column grid so the primary nav sits CENTRED in the pill. */
.pill-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .5rem 1.3rem;
}

/* primary links */
.site-nav-wrap { display: none; }
.site-nav { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-nav > li { position: relative; }
.site-nav a {
  display: inline-block; color: rgba(255,255,255,.8); text-decoration: none;
  font-weight: 600; font-size: .88rem; padding: 6px 0; position: relative;
  transition: color .2s var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: var(--amber); border-radius: 2px; transition: right .3s var(--ease);
}
.site-nav a:hover, .site-nav a.is-active { color: #fff; }
.site-nav a:hover::after, .site-nav a.is-active::after { right: 0; }

/* Services dropdown */
.nav-dd { position: relative; }
.nav-dd-btn {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: none;
  font: inherit; font-weight: 600; font-size: .88rem; color: rgba(255,255,255,.8);
  cursor: pointer; padding: 6px 0; position: relative;
}
.nav-dd-btn::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: var(--amber); border-radius: 2px; transition: right .3s var(--ease);
}
.nav-dd-btn:hover, .nav-dd.is-active > .nav-dd-btn, .nav-dd.open > .nav-dd-btn { color: #fff; }
.nav-dd.is-active > .nav-dd-btn::after, .nav-dd.open > .nav-dd-btn::after { right: 16px; }
.nav-dd-caret { font-size: .7rem; transition: transform .18s var(--ease); color: rgba(255,255,255,.6); }
.nav-dd:hover .nav-dd-caret, .nav-dd.open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 12px); left: -14px; min-width: 264px;
  list-style: none; margin: 0; padding: 8px; z-index: 160;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-card);
  /* grow from the trigger — origin aligned with the ::before arrow at 24px */
  transform-origin: 24px top;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-dd-menu::before {
  content: ""; position: absolute; top: -6px; left: 24px; width: 12px; height: 12px;
  background: var(--white); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
/* driven ONLY by .open (set in JS on click/keyboard/touch) — no bare :hover
   or :focus-within trigger, so the visual state always matches aria-expanded */
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: none; }
.nav-dd-menu li { position: static; }
.nav-dd-menu a {
  display: block; padding: 12px 12px; border-radius: 8px; font-size: .9rem; font-weight: 600;
  color: var(--ink-soft);
}
.nav-dd-menu a::after { display: none; }
.nav-dd-menu a:hover { background: var(--slate-soft); color: var(--ink-900); }

/* utility cluster: the Login / Book a Skip / Book a collection group. Back
   office no longer lives here — see `.nav-backoffice.bo-corner` below, floated
   OUT of the rail to the browser's top-right corner (operator, 2026-07-23).
   R58 (2026-07-28): the "Find my quote" text link that used to lead this
   cluster is gone, and `.pill-util-link` went with it — verified zero users
   across public/. It pointed at account.html, the same destination as the Login
   pill beside it, and its ~105px was what "Book a Skip" needed. The link
   survives in the footer and the mobile drawer. NOTE: demo.html carries a
   hand-written copy of this header and was updated in step; if a future page
   reintroduces `.pill-util-link` markup it will now render unstyled. */
.pill-util { display: none; align-items: center; gap: 18px; flex-wrap: nowrap; }

/* back office — ADMIN ONLY (see revealBackOffice() in site-nav.js/account.js;
   presentation-only reveal, real gate stays staff.js). Operator instruction
   2026-07-23: "move the back office pill to the right of the rail and to
   the top right of the screen".

   THREE responsive instances of the same admin-only pill, each the right
   answer for its own band — measured empirically (Playwright, 1211-1920px
   sweep) because the rail is a CENTRED `min(94%,1320px)` bar: the margin
   outside its right edge only exceeds this pill's own width once the
   viewport clears ~1560px. Below that, a fixed corner pill would sit ON TOP
   of "Get a quote" (verified: visible overlap at 1280/1366/1440px, three of
   the most common laptop widths) — hiding the CTA is worse than not moving
   the pill at all, so:
     - >=1600px (`.bo-corner`, below): OUT of the rail entirely, fixed to the
       browser's own top-right corner — the literal ask, used wherever there
       is verified clear room.
     - 1211-1599px (`.bo-rail-end`, in the FLOATING PILL HEADER block below):
       rightmost item in the rail's own utility cluster — still moved to the
       right of everything else in the rail, still guaranteed no overlap
       (it participates in the rail's own flex layout).
     - <1211px: mobile drawer only (unchanged; its own plain .nav-backoffice
       shape further up this file).
   Only one instance is ever visible at a given width; all three share the
   same [hidden] admin gate via revealBackOffice(), so admin-only holds
   everywhere. */
.nav-backoffice.bo-corner {
  position: fixed;
  top: calc(var(--ribbon-h) + 1rem);
  right: 1rem;
  z-index: 200;
  color: var(--amber); background: rgba(17,24,32,.92);
  backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(242,169,0,.55);
  border-radius: 999px; min-height: 44px; padding: 0 16px;
  font-size: .85rem; white-space: nowrap; flex: none; gap: 0;
  display: none; /* default OFF below 1600px — see the band note above */
}
.nav-backoffice.bo-corner::before { content: none; }
.nav-backoffice.bo-corner:hover { background: rgba(242,169,0,.2); border-color: var(--amber); }
.nav-backoffice.bo-corner[hidden] { display: none; }
@media (min-width: 1600px) {
  .nav-backoffice.bo-corner:not([hidden]) { display: inline-flex; }
}

/* Login + "Get a quote": ONE inseparable pair (operator fix, 2026-07-21 — a
   screenshot showed the amber CTA orphaning onto its own row below the text
   links). flex:none + nowrap on both the cluster and each pill so the pair
   can never split; the 1210px collapse below exists specifically so this
   pair is never squeezed past its own comfortable width first. */
.pill-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }

/* Back office, medium band (1211-1599px) — rightmost item in the rail's own
   utility cluster; see the full band explanation next to `.bo-corner` up in
   the header block. Same ghost-pill geometry, just in-flow instead of fixed.
   >=1600px this instance steps aside for `.bo-corner`. */
.site-header-pill .nav-backoffice.bo-rail-end {
  color: var(--amber); background: rgba(242,169,0,.10); border: 1px solid rgba(242,169,0,.55);
  border-radius: 999px; min-height: 44px; padding: 0 16px;
  font-size: .85rem; white-space: nowrap; flex: none; gap: 0; margin-left: 8px;
}
.site-header-pill .nav-backoffice.bo-rail-end::before { content: none; }
.site-header-pill .nav-backoffice.bo-rail-end:hover { background: rgba(242,169,0,.2); border-color: var(--amber); }
@media (min-width: 1600px) {
  .site-header-pill .nav-backoffice.bo-rail-end { display: none; }
}
.nav-login {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: #fff; font-weight: 700; font-size: .85rem; min-height: 44px;
  padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.06); white-space: nowrap; flex: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav-login:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.nav-login svg { flex: none; }
.pill-cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  min-height: 44px; padding: 0 6px 0 18px; border-radius: 999px; flex: none;
  background: var(--amber); color: var(--amber-ink); font-family: var(--display);
  font-weight: 700; font-size: .87rem; white-space: nowrap; border: 1px solid transparent;
  transition: background .18s ease, transform .16s var(--ease);
}
.pill-cta:hover { background: var(--amber-2); }
.pill-cta:active { transform: translateY(1px) scale(.98); transition-duration: 60ms; }
/* Focus ring visibility: the global focus style pairs an ink-900 outline with
   an amber box-shadow. On the amber CTA both vanish (amber ring on amber body,
   dark outline offset onto the near-identical dark pill). A white outline is
   pixel-visible against BOTH the amber body and the dark pill it offsets onto.
   The pill has no overflow:hidden ancestor, so the outward ring is not clipped. */
.pill-cta:focus-visible { outline-color: #fff; }
.pill-cta-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 999px; background: rgba(17,24,32,.14);
}
.pill-cta-icon svg { width: 13px; height: 13px; }

/* "Book a Skip" — the ghost sibling of the amber CTA (R58, 2026-07-28).
   Deliberately NOT a second solid pill: two equally-weighted CTAs side by side
   is how a header stops having a primary action at all. Amber outline on a
   transparent body reads as "also available" rather than "instead of".
   Geometry is deliberately identical to .nav-login (44px, 18px sides, 999px)
   so Login · Skip · Collection sit as one control group with even rhythm; the
   absence of an arrow chip is what keeps this ~40px narrower than .pill-cta,
   which is the whole reason the rail still fits at the 1211px collapse.
   Focus ring: white, same reasoning as .pill-cta above — the global amber
   box-shadow would be invisible against this element's own amber border. */
.pill-cta-ghost {
  display: inline-flex; align-items: center; text-decoration: none;
  min-height: 44px; padding: 0 18px; border-radius: 999px; flex: none;
  background: rgba(242,169,0,.10); color: var(--amber);
  border: 1px solid rgba(242,169,0,.55);
  font-family: var(--display); font-weight: 700; font-size: .87rem;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .16s var(--ease);
}
.pill-cta-ghost:hover { background: rgba(242,169,0,.2); border-color: var(--amber); }
.pill-cta-ghost:active { transform: translateY(1px) scale(.98); transition-duration: 60ms; }
.pill-cta-ghost:focus-visible { outline-color: #fff; }

/* hamburger */
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  flex: none; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  background: rgba(255,255,255,.06); cursor: pointer;
}
.nav-toggle-bars { display: inline-block; width: 18px; height: 13px; position: relative; }
.nav-toggle-bars span {
  position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5.5px; }
.nav-toggle-bars span:nth-child(3) { top: 11px; }

/* mobile drawer — the EXISTING generated markup, not the mockup's hand-
   written panel (W2.4); visuals unchanged, a Tab-trap was added in JS only */
.nav-scrim {
  position: fixed; inset: 0; z-index: 240; background: rgba(17,24,32,.44);
  opacity: 0; transition: opacity .25s var(--ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nav-scrim.open { opacity: 1; }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 250; width: min(86vw, 340px);
  background: var(--white); border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px -30px rgba(17,24,32,.6);
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto;
  transform: translateX(100%); transition: transform .26s var(--ease);
  display: flex; flex-direction: column; gap: 6px;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nav-drawer-close {
  position: relative; border: 0; background: var(--slate-soft); border-radius: 8px; width: 34px; height: 34px;
  font-size: 1rem; color: var(--ink-soft); cursor: pointer;
}
/* 34px visual button; the inset pseudo extends the hit area to ≥44px (46px)
   without enlarging the glyph — WCAG 2.5.5 effective-target via hit-area. */
.nav-drawer-close::before { content: ""; position: absolute; inset: -6px; }
.nav-drawer-group { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--line); }
.nav-drawer-label {
  font-family: var(--display); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 2px 0 6px;
}
.nav-drawer-group a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1rem; padding: 11px 6px; border-radius: 8px; }
.nav-drawer-group a:hover, .nav-drawer-group a.is-active { background: var(--slate-soft); color: var(--ink-900); }
.nav-drawer-phone { font-size: .82rem; color: var(--ink-3); margin: 10px 4px 0; font-variant-numeric: tabular-nums; }

/* header layout: THREE-column pill — brand left · primary nav CENTRED · util
   cluster right. `1fr auto 1fr` makes the two side tracks equal width, so the
   auto middle track (the nav) is horizontally centred in the pill regardless
   of how wide brand vs. utils are (measured centreΔ ≈ 0). Mobile collapses to
   a hamburger. The 1211px collapse point is unchanged — measured to still fit
   all three tracks with no overlap at 1211 once the low-end gaps below tighten
   (util cluster ~336px vs. its ~350px+ side track; verified clean 1900→1211). */
@media (min-width: 1211px) {
  .pill-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(0.6rem, 1.3vw, 1.5rem);
  }
  .pill-row .brand { justify-self: start; }
  .site-nav-wrap { display: block; justify-self: center; }
  .pill-util { display: flex; justify-self: end; }
  .nav-toggle { display: none; }
}
@media (max-width: 1210px) {
  .site-nav-wrap, .pill-util { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* Tighten nav + util spacing across the low end of the desktop range so the
   three tracks never collide before the 1211 collapse (mid-width guard). */
@media (min-width: 1211px) and (max-width: 1360px) {
  .site-nav { gap: 15px; }
  .pill-util { gap: 12px; }
}

/* =========================================================================
   HOVER-LIFT GATING — the translateY lift on cards/labels only fires for a
   true hover+fine-pointer device (touch taps never leave a stuck lifted state).
   Colour/border/shadow hover states above stay ungated. Transforms live here;
   prefers-reduced-motion still snaps them via the block below.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  .hero-card:hover, #hero-tilt-card:hover { transform: translateY(-3px) !important; }
  .tilt-card:hover { transform: translateY(-3px) !important; }
  .price-card:hover { transform: translateY(-3px) !important; }
  .tech-card:hover { transform: translateY(-3px); }
  .speed-card label:hover { transform: translateY(-1px); }
  .calc-frac label:hover { transform: translateY(-1px); }
}

/* =========================================================================
   REDUCED MOTION — full fallbacks
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .radar-pulse { animation: none; opacity: .3; }
  .hero-card, .tilt-card, .price-card { transform: none !important; }
  .nav-drawer, .nav-scrim, .nav-dd-menu { transition: none !important; }
}