/* ==========================================================================
   StreetHello public site: shared foundation ("Editorial" design system)
   Ported from the approved design (DESIGN-SPEC.md, design-system.css) plus the
   short-page layouts (pages.css D, E, F, H). Page stylesheets add the rest:
     assets/home.css           homepage                (homepage package)
     assets/quote.css          Quote planner            (Quote package)
     assets/quote-summary.css  saved Quote              (Quote package)
     assets/roi.css            ROI calculator           (ROI package)
     assets/legal.css          privacy, terms
   Controllers list page stylesheets in $pageStylesheets; header.ui.php renders
   them in <head> after this file. Bump $siteAssetVersion (init.ctrl.php) when
   this file changes.

    1. Fonts                 8. Feedback (alerts, status, spinner, skeleton)
    2. Tokens                9. Surfaces (cards, plates, tags, reference)
    3. Base                 10. Data (stats, rates table, definition lists)
    4. Layout               11. Shell (header, nav, menu sheet, footer, page head)
    5. Typography           12. Recorded campaign replay
    6. Actions              13. Disclosure (FAQ), steps, callouts
    7. Forms                14. Motion, forced colours, print, utilities
                            15. Short pages (forms, contact, services,
                                customer view, sign in)

   Logo artwork is used exactly as supplied (PNG). Never recolour, crop,
   filter or animate it with CSS.
   ========================================================================== */

/* 1. Fonts: self-hosted, SIL Open Font License 1.1 (assets/fonts/OFL-*.txt) ---
   Fontsource 5.3.0 latin subsets: Fraunces "standard" (opsz + wght axes),
   Instrument Sans (wght axis). header.ui.php preloads the two normal files;
   the italic loads on demand. The URLs must stay identical to the preload
   links (no query string): rename a file if its contents ever change. */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-standard-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans weight-only file. No sans italic is used. */
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks shown until the web fonts arrive (font-display: swap),
   so the swap barely moves the layout. Measured in Chromium against the woff2
   files: width ratio over a mixed sample at 20-48px (Fraunces sets its optical
   size from the font size) and the fonts' ascent/descent at 1000px. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  font-style: normal;
  size-adjust: 102%;
  ascent-override: 95.9%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 93%;
  ascent-override: 105.2%;
  descent-override: 27.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("ArialMT");
  font-style: normal;
  size-adjust: 101.2%;
  ascent-override: 95.9%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}

/* 2. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand anchors, sampled from the logo. Never altered. */
  --brand-green: #12352E;
  --brand-terracotta: #9D301F;

  /* Green scale */
  --green-950: #0B231E;
  --green-900: #12352E;
  --green-800: #1A463D;
  --green-700: #245A4E;
  --green-500: #4F7F71;
  --green-300: #A9C2B8;
  --green-200: #CFDDD6;
  --green-100: #E4ECE7;
  --green-50:  #F0F5F2;

  /* Terracotta scale */
  --terra-800: #7E2618;
  --terra-600: #9D301F;
  --terra-300: #E7A593;
  --terra-200: #F0C2B4;
  --terra-100: #F6E0D7;
  --terra-50:  #FBEAE5;

  /* Warm paper neutrals */
  --paper-0:   #FFFEFA;
  --paper-50:  #FFFDF8;
  --paper-100: #F7F2E8;
  --paper-200: #EFE7D8;
  --paper-300: #E3D8C4;

  /* Ochre, used only for the "adjust your area" warning */
  --ochre-700: #7A4E00;
  --ochre-100: #FBF1DC;

  /* Semantic roles — light surfaces (ratios measured on --paper-100) */
  --surface-page: var(--paper-100);
  --surface-alt: var(--paper-200);
  --surface-raised: var(--paper-50);
  --surface-field: var(--paper-0);
  --surface-inverse: var(--green-900);
  --text-strong: var(--green-900);   /* 11.95:1 */
  --text: #2B3A35;                   /* 10.70:1 */
  --text-muted: #5A6862;             /*  5.24:1 (4.76:1 on paper-200) */
  --accent-text: var(--terra-600);   /*  6.54:1 */
  --rule: rgba(18, 53, 46, 0.16);
  --rule-strong: var(--green-900);
  --field-border: #6F7F78;           /*  4.18:1 on paper-0, meets 3:1 non-text */
  --focus: var(--terra-600);
  /* Route mark glyph (kickers, section heads): three dashes of a target edge + one recorded position */
  --route-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cpath d='M0 4h4.5M8 4h4.5M16 4h4.5' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='26' cy='4' r='3.2'/%3E%3C/svg%3E");

  /* Semantic roles — green surfaces (ratios measured on --green-900) */
  --on-inverse: var(--paper-100);    /* 11.95:1 */
  --on-inverse-muted: #B9CBC3;       /*  7.87:1 */
  --on-inverse-accent: #EBA896;      /*  6.72:1 */
  --rule-inverse: rgba(247, 242, 232, 0.18);
  --focus-inverse: #F3BBA9;          /*  7.93:1 */

  /* Feedback */
  --error-text: var(--terra-800);    /*  8.27:1 on --error-bg */
  --error-bg: var(--terra-50);
  --error-border: var(--terra-600);
  --success-text: var(--green-700);  /*  6.59:1 on --success-bg */
  --success-bg: var(--green-100);
  --warning-text: var(--ochre-700);  /*  6.42:1 on --warning-bg */
  --warning-bg: var(--ochre-100);

  /* Recorded-route inks (must equal replay-canvas.js palette) */
  --route-1: #0072B2;
  --route-2: #D55E00;
  --route-3: #CC79A7;
  --route-4: #009E73;
  /* Customer-view illustration inks (match the customer portal) */
  --portal-area: #2E6B55;

  /* Typography */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-text: "Instrument Sans", "Instrument Sans Fallback", Arial, "Helvetica Neue", sans-serif;
  --display-weight: 380;

  --fs-display-xl: clamp(2.375rem, 1.1rem + 5.4vw, 3.5rem);   /* 38 → 56; hero ≥1080: 44 → 62 */
  --fs-display-l: clamp(2.125rem, 1.45rem + 2.6vw, 3.625rem);  /* 34 → 58 */
  --fs-display-m: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);    /* 26 → 36 */
  --fs-display-s: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);     /* 20 → 24 */
  --fs-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);     /* 18 → 21 */
  --fs-body: 1.0625rem;   /* 17 */
  --fs-small: 0.9375rem;  /* 15 */
  --fs-caption: 0.875rem; /* 14 */
  --fs-micro: 0.75rem;    /* 12, uppercase labels only */

  --lh-display: 1.0;
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --tracking-display: -0.022em;
  --tracking-caps: 0.14em;

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad: clamp(64px, 7vw, 108px);

  /* Layout */
  --container: 1280px;
  --container-narrow: 760px;
  /* Never less than the notch's safe area (landscape phones; the viewport uses viewport-fit=cover) */
  --gutter: max(clamp(16px, 5.2vw, 80px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 76px;

  /* Radii */
  --radius-xs: 2px;
  --radius-s: 4px;     /* maps, inputs */
  --radius-m: 8px;     /* plates, tiles */
  --radius-l: 14px;    /* cards, menus, sheets */
  --radius-pill: 999px;/* buttons, segmented control, tags */

  /* Elevation */
  --shadow-print: 0 1px 0 rgba(18, 53, 46, 0.05), 0 28px 56px -32px rgba(18, 53, 46, 0.42);
  --shadow-raise: 0 18px 40px -20px rgba(18, 53, 46, 0.35), 0 2px 6px rgba(18, 53, 46, 0.06);
  --shadow-bar: 0 -10px 30px -18px rgba(18, 53, 46, 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;

  /* Layers */
  --z-header: 40;
  --z-menu: 39;
  --z-skip: 100;
}

@media (max-width: 959px) {
  :root { --header-h: 64px; }
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Anything scrolled to (a fragment, a focused field, a script's scrollIntoView) lands 16px below the sticky
   header. The header's real height is its row plus a 1px border; site.js measures it as --header-block, so the
   offset follows the header when it wraps onto more rows (WCAG 1.4.12 text spacing, a larger default font). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(max(var(--header-h) + 1px, var(--header-block, 0px)) + 15px);
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }
/* Classic (space-taking) scrollbars: keep the gutter below 960px so locking the page for the
   menu sheet does not shift the header sideways. No effect with overlay scrollbars. */
@media (max-width: 959px) { html { scrollbar-gutter: stable; } }

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-inverse :focus-visible, .site-footer :focus-visible { outline-color: var(--focus-inverse); }
.on-inverse .on-paper :focus-visible { outline-color: var(--focus); }

[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-skip);
  padding: 12px 18px;
  background: var(--green-900);
  color: var(--paper-50);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-3); }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.num { font-variant-numeric: lining-nums tabular-nums; }

/* 4. Layout ---------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.section { padding-block: var(--section-pad); }
.section--alt { background: var(--surface-alt); }
.section--inverse { background: var(--surface-inverse); color: var(--on-inverse); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

.stack > * + * { margin-top: var(--stack, var(--space-4)); }

/* 5. Typography ------------------------------------------------------------ */
.display-xl, .display-l, .display-m, .display-s {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-optical-sizing: auto;
  color: var(--text-strong);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: -0.028em; }
.display-l  { font-size: var(--fs-display-l); line-height: 1.04; }
.display-m  { font-size: var(--fs-display-m); line-height: var(--lh-heading); letter-spacing: -0.015em; }
.display-s  { font-size: var(--fs-display-s); line-height: 1.2; letter-spacing: -0.01em; }

.display-xl em, .display-l em, .display-m em {
  font-style: italic;
  font-weight: calc(var(--display-weight) - 30);
  color: var(--accent-text);
}
.em-block em { display: block; }
.on-inverse .display-xl, .on-inverse .display-l, .on-inverse .display-m, .on-inverse .display-s { color: var(--on-inverse); }
.on-inverse .display-xl em, .on-inverse .display-l em, .on-inverse .display-m em { color: var(--on-inverse-accent); }

.lead { font-size: var(--fs-lead); line-height: 1.52; color: var(--text); text-wrap: pretty; }
.on-inverse .lead { color: var(--on-inverse-muted); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--text-muted); }

/* Kicker — the department label above a heading */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-text);
}
.kicker::before {
  /* Route mark: a dashed target-area edge ending in a recorded position, drawn from the replay */
  content: "";
  flex: none;
  width: 30px;
  height: 8px;
  background: currentColor;
  -webkit-mask: var(--route-mark) no-repeat left center / 30px 8px;
  mask: var(--route-mark) no-repeat left center / 30px 8px;
}
.kicker--plain::before { display: none; }
.on-inverse .kicker { color: var(--on-inverse-accent); }

/* Section head — heavy rule, kicker, optional italic running head */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: 14px;
  border-top: 1px solid var(--rule-strong);
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.section-head .kicker { color: var(--accent-text); }
.on-inverse .section-head .kicker { color: var(--on-inverse-accent); }
.section-head__run {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--text-muted);
  text-align: right;
}
.on-inverse .section-head { border-top-color: var(--rule-inverse); }
.on-inverse .section-head__run { color: var(--on-inverse-muted); }
@media (max-width: 599px) { .section-head__run { display: none; } }

/* Long-form text (legal, service detail) */
.prose { max-width: 38rem; } /* about 70–75 characters of Instrument Sans at 17px (its wide figures make 68ch too long) */
.prose > * + * { margin-top: 1em; }
.prose h2 {
  margin-top: 2.2em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-s);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.prose h2 + p { margin-top: 0.6em; }
.prose a { color: var(--text-strong); font-weight: 600; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .prose a:hover { text-decoration-color: var(--accent-text); } }
.prose strong { color: var(--text-strong); font-weight: 600; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

/* 6. Actions --------------------------------------------------------------- */
.btn {
  --btn-bg: var(--green-900);
  --btn-fg: var(--paper-50);
  --btn-border: transparent;
  --btn-bg-hover: var(--green-800);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--btn-bg-hover); } }
.btn .icon { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .icon--arrow { transform: translateX(3px); } }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; --btn-bg: var(--paper-300); --btn-fg: var(--text-muted); --btn-bg-hover: var(--paper-300); }

/* Secondary on paper */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--green-900);
  --btn-border: rgba(18, 53, 46, 0.4);
  --btn-bg-hover: rgba(18, 53, 46, 0.06);
}
/* Primary on green surfaces: paper fill, deepest green text (16.2:1) */
.btn--light {
  --btn-bg: var(--paper-50);
  --btn-fg: var(--green-950);
  --btn-bg-hover: var(--paper-200);
}
/* Secondary on green surfaces */
.btn--ghost-inverse {
  --btn-bg: transparent;
  --btn-fg: var(--on-inverse);
  --btn-border: rgba(247, 242, 232, 0.45);
  --btn-bg-hover: rgba(247, 242, 232, 0.08);
}
.btn--small { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }

/* Busy state for submit buttons: paper on green-800 (10.6:1), even when also aria-disabled */
.btn[aria-busy="true"],
.btn[aria-busy="true"][aria-disabled="true"] { cursor: progress; --btn-bg: var(--green-800); --btn-fg: var(--paper-50); --btn-bg-hover: var(--green-800); --btn-border: transparent; }
.btn[aria-busy="true"] .icon--arrow { display: none; }

/* Action group: inline on wider screens, full-width stack below 760px */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
@media (max-width: 759px) {
  .cta-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cta-row > .btn { width: 100%; }
  .cta-row > .phone-link, .cta-row > .link-arrow, .cta-row > .link { justify-self: center; }
}

/* Icon-only button (44 × 44) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-strong);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: rgba(18, 53, 46, 0.06); border-color: rgba(18, 53, 46, 0.3); } }
.icon-btn .icon { width: 19px; height: 19px; }

/* Inline links */
.link {
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: rgba(18, 53, 46, 0.35);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: var(--accent-text); } }
.on-inverse .link { color: var(--on-inverse); text-decoration-color: rgba(247, 242, 232, 0.45); }
@media (hover: hover) and (pointer: fine) { .on-inverse .link:hover { text-decoration-color: var(--on-inverse-accent); } }
button.link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}
.link-arrow span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: rgba(18, 53, 46, 0.3);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .link-arrow:hover span { text-decoration-color: var(--accent-text); } }
.link-arrow .icon { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .icon { transform: translateX(3px); } }
.on-inverse .link-arrow { color: var(--on-inverse); }
.on-inverse .link-arrow span { text-decoration-color: rgba(247, 242, 232, 0.45); }

/* Phone links */
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.phone-link span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; text-decoration-color: rgba(18, 53, 46, 0.3); }
@media (hover: hover) and (pointer: fine) { .phone-link:hover span { text-decoration-color: var(--accent-text); } }
.phone-link .icon { color: var(--accent-text); }

/* The large serif phone number (Talk card, contact page, fallbacks) */
.phone-display {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  letter-spacing: -0.015em;
  color: var(--text-strong);
  text-decoration: none;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.phone-display {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(157, 48, 31, 0.45);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.phone-display .icon { width: 22px; height: 22px; stroke-width: 1.6; color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) { .phone-display:hover { text-decoration-color: var(--accent-text); text-decoration-thickness: 2px; } }
/* Wraps (icon above the number) only when the row cannot fit, e.g. at 320px with WCAG 1.4.12 text spacing */
.phone-display--xl { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); gap: 16px; flex-wrap: wrap; max-width: 100%; }
.phone-display--xl .icon { width: 30px; height: 30px; }

/* A phone number inside alert text never breaks across lines ("0161 554" / "0212") */
.alert a[href^="tel:"], .phone-link span { white-space: nowrap; }

/* 7. Forms ----------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.field { display: grid; gap: 6px; }
fieldset.field > legend + * { margin-top: 6px; } /* legends are not grid items, so restore the label gap */
.field__label { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--text-strong); }
.field__label .opt { font-weight: 400; color: var(--text-muted); }
.field__hint { font-size: var(--fs-caption); line-height: 1.45; color: var(--text-muted); }
/* Contact and consultation forms: a field reached from the error summary, or by keyboard from below, lands with its
   label, hint and error in view under the sticky header. contact-form.js and enquiry-form.js set --field-lead to
   the height above each input within its field (or its row, where two fields sit side by side). Without JavaScript
   the fallbacks allow for a label and a message of up to three lines. A group target (fieldset) keeps no margin:
   its legend is its top. */
:is(.contact-form, .enquiry-form) :is(.input, .textarea) { scroll-margin-top: var(--field-lead, 72px); }
:is(.contact-form, .enquiry-form) .field--invalid :is(.input, .textarea) { scroll-margin-top: var(--field-lead, 7rem); }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--error-text);
}
.field__error .icon { width: 18px; height: 18px; margin-top: 1px; stroke-width: 2; }

.input, .textarea, .select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-s);
  background: var(--surface-field);
  color: var(--text-strong);
  font-size: 1.0625rem; /* 17px keeps iOS from zooming */
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: #7D8A84; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--green-900); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--green-900);
}
.input[readonly], .textarea[readonly], .input:disabled, .textarea:disabled, .select:disabled { background: var(--paper-200); color: var(--text-muted); border-color: rgba(18, 53, 46, 0.3); }
.input[readonly]:hover, .textarea[readonly]:hover { border-color: rgba(18, 53, 46, 0.3); }
.textarea { min-height: 140px; resize: vertical; }
.select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312352E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.input--code { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-transform: uppercase; }

.field--invalid .input, .field--invalid .textarea, .field--invalid .select,
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error-border);
  border-width: 2px;
  padding: 11px 13px;
  background: #FFFBF9;
}
.field--invalid .field__label { color: var(--error-text); }

/* Prefix / suffix (£, %) */
.input-affix { position: relative; display: flex; align-items: stretch; }
.input-affix__mark {
  position: absolute;
  top: 0; bottom: 0;
  display: grid;
  place-items: center;
  width: 40px;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
}
.input-affix--prefix .input-affix__mark { left: 0; }
.input-affix--prefix .input { padding-left: 36px; }
.input-affix--suffix .input-affix__mark { right: 0; }
.input-affix--suffix .input { padding-right: 40px; }
.input-affix .input { font-variant-numeric: tabular-nums; }

/* Inline field + button (search, postcode, reference) */
.input-row { display: flex; gap: var(--space-2); }
.input-row .input { flex: 1 1 auto; min-width: 0; }
.input-row .btn { flex: none; min-height: 52px; }

/* Attached action inside a field: same 4px family as the input, 44px target */
.input-attach { position: relative; display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; }
.input-attach .input { padding-right: 112px; }
.input-attach--icon .input { padding-right: 56px; }
.input-attach__btn {
  position: absolute;
  top: 4px; right: 4px; bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--green-50);
  box-shadow: inset 0 0 0 1px rgba(18, 53, 46, 0.14);
  color: var(--green-900);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .input-attach__btn:hover { background: var(--green-100); } }
.input-attach__btn:focus-visible { outline-offset: 1px; }
.input-attach__btn .icon { width: 18px; height: 18px; }
.input-attach--icon .input-attach__btn { width: 44px; padding: 0; }

/* Segmented control — native radios, styled as one control */
.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  background: var(--paper-200);
  gap: 3px;
}
.segmented--block { display: flex; width: 100%; }
.segmented__option { position: relative; flex: 1 1 0; display: flex; cursor: pointer; }
/* The hidden radio covers its whole option, so it is the hit target and shows the pointer. WebKit keeps an
   absolutely positioned radio at its 12px intrinsic size unless the size is set explicitly. */
.segmented__option input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.segmented__option input:disabled { cursor: not-allowed; }
.segmented__option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.segmented__option span .icon { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .segmented__option input:hover + span { background: rgba(18, 53, 46, 0.06); color: var(--text-strong); } }
.segmented__option input:checked + span {
  background: var(--paper-0);
  color: var(--green-900);
  box-shadow: inset 0 0 0 2px var(--green-900), 0 1px 3px rgba(18, 53, 46, 0.14);
}
.segmented__option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.segmented__option input:disabled + span { cursor: not-allowed; }
/* Frozen while a request is sending: the whole control dims, like read-only fields */
fieldset:disabled .segmented, .segmented.is-frozen { border-color: rgba(18, 53, 46, 0.3); }
fieldset:disabled .segmented__option span { color: var(--text-muted); }
fieldset:disabled .segmented__option input:checked + span { background: var(--paper-100); color: var(--text-muted); box-shadow: inset 0 0 0 1px rgba(18, 53, 46, 0.35); }

/* Choice (radio / checkbox rows) */
.choice { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 10px; cursor: pointer; }
.choice input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green-900); flex: none; }

/* Error summary (top of a form after a failed submit) */
.error-summary {
  padding: var(--space-5) var(--space-5) var(--space-3);
  border: 2px solid var(--error-border);
  border-radius: var(--radius-m);
  background: var(--error-bg);
  color: var(--error-text);
}
.error-summary h2 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.error-summary h2 .icon { width: 22px; height: 22px; stroke-width: 2; }
/* Each link is a 44px target. The links' own space above and below the text makes the gaps between the items
   (and most of the space under the heading and above the bottom border), so the list stays compact. */
.error-summary ul { margin-top: 4px; padding-left: 32px; }
.error-summary a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; line-height: 1.35; color: var(--error-text); font-weight: 600; text-underline-offset: 0.2em; }

.char-count { justify-self: end; font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.form-note { font-size: var(--fs-caption); line-height: 1.5; color: var(--text-muted); }
.form-note a { color: var(--text-strong); font-weight: 600; text-underline-offset: 0.2em; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 8. Feedback -------------------------------------------------------------- */
.alert {
  --alert-fg: var(--text-strong);
  --alert-bg: var(--surface-raised);
  --alert-bar: var(--green-900);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  border-left: 3px solid var(--alert-bar);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--alert-bg);
  color: var(--alert-fg);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.alert > .icon { width: 22px; height: 22px; margin-top: 1px; stroke-width: 1.9; }
.alert__title { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.alert__body > * + * { margin-top: 6px; }
.alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.alert--success { --alert-fg: var(--success-text); --alert-bg: var(--success-bg); --alert-bar: var(--green-700); }
.alert--success .alert__title { color: var(--green-900); }
.alert--warning { --alert-fg: var(--warning-text); --alert-bg: var(--warning-bg); --alert-bar: var(--ochre-700); }
.alert--error { --alert-fg: var(--error-text); --alert-bg: var(--error-bg); --alert-bar: var(--error-border); }
.alert--warning .alert__body p, .alert--error .alert__body p { color: var(--text); }
.alert--warning .alert__title, .alert--error .alert__title { color: inherit; }

.status-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--text-muted); }
.status-line::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; opacity: 0.7; }

.spinner {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.skeleton {
  display: block;
  border-radius: var(--radius-s);
  background: linear-gradient(90deg, var(--paper-200) 0%, var(--paper-100) 50%, var(--paper-200) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s var(--ease-out) infinite;
}

/* 9. Surfaces -------------------------------------------------------------- */
.card {
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  background: var(--surface-raised);
}
.card--plain { background: transparent; }
.card--inverse { background: var(--green-900); border-color: transparent; color: var(--on-inverse); }

/* Plate — printed-photograph framing for maps and screenshots */
.plate {
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  box-shadow: var(--shadow-print);
}

.aside-card {
  padding: var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
}
.aside-card__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.aside-card__label .icon { width: 18px; height: 18px; color: var(--accent-text); }

/* Tags — small labels on fields and rows */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--green-100);
  color: var(--green-900);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tag--own { background: var(--terra-100); color: var(--terra-800); }
.tag--neutral { background: var(--paper-200); color: var(--text); }
.tag--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: var(--text-muted); }

/* Quote reference (SH-XXXX-XXXX) */
.ref {
  font-family: var(--font-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--text-strong);
}
.ref--lg { font-size: 1.375rem; }

/* 10. Data ----------------------------------------------------------------- */
.stat { display: grid; gap: 4px; }
.stat__label { font-size: var(--fs-caption); font-weight: 500; color: var(--text-muted); }
.stat__value {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__value--empty { color: var(--text-muted); }
.on-inverse .stat__label { color: var(--on-inverse-muted); }
.on-inverse .stat__value { color: var(--on-inverse); }

/* Rates table — the unchanged Quote tariff */
.rates { width: 100%; font-variant-numeric: lining-nums tabular-nums; }
.rates caption {
  padding-bottom: var(--space-3);
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rates th, .rates td { padding: 12px 0; border-top: 1px solid var(--rule); text-align: left; font-weight: 400; vertical-align: baseline; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.rates thead th { padding: 0 0 8px; border-top: 0; font-size: var(--fs-caption); color: var(--text-muted); }
.rates thead th:last-child { text-align: right; }
.rates tbody th { color: var(--text-strong); }
.rates td {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 380;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.rates tr.is-current th, .rates tr.is-current td { background: var(--green-100); }
.rates tr.is-current th { padding-left: 10px; box-shadow: inset 3px 0 0 var(--green-900); }
.rates tr.is-current td { padding-right: 10px; }
.rates .tag { margin-left: 8px; vertical-align: 2px; }
.rates tr.is-current .tag { background: var(--green-900); color: var(--paper-50); }
.rates--compact th, .rates--compact td { padding-block: 9px; }
.rates--compact td { font-size: 1.25rem; }
.on-inverse .rates caption, .on-inverse .rates thead th { color: var(--on-inverse-muted); }
.on-inverse .rates th, .on-inverse .rates td { border-color: var(--rule-inverse); }
.on-inverse .rates tbody th, .on-inverse .rates td { color: var(--on-inverse); }
.on-inverse .rates td { font-size: 1.75rem; }

.dl-rows { display: grid; }
.dl-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: 12px; border-top: 1px solid var(--rule); }
.dl-rows dt { color: var(--text); }
.dl-rows dd { font-weight: 600; color: var(--text-strong); font-variant-numeric: lining-nums tabular-nums; text-align: right; }

/* 11. Shell ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(247, 242, 232, 0.95);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--rule);
}
/* The header row holds while its controls fit the viewport, including the right gutter they
   already reach at some phone widths; only content wider than that (WCAG 1.4.12 text spacing,
   a larger default font) wraps onto another row instead of overflowing the page. The actions'
   negative right margin makes them count one gutter less when the row is filled, and the empty
   ::after spacer (it grows to one gutter at most, before the auto margins share the rest) puts
   them back in place whenever there is room, so the header at ordinary spacing is unchanged. */
.site-header__inner { --header-gap: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--header-gap); row-gap: var(--space-2); min-height: var(--header-h); }
.site-header__inner::after { content: ""; flex: 1 0 0; max-width: var(--gutter); margin-left: calc(-1 * var(--header-gap)); pointer-events: none; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; border-radius: var(--radius-s); }
.brand picture { display: block; }
.brand img { --logo-w: 188px; width: var(--logo-w); height: auto; margin-left: calc(var(--logo-w) * -0.0375); }

.nav { display: flex; align-items: center; gap: 0; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  border-radius: var(--radius-s);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 9px;
  height: 1px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link[aria-expanded="true"]::after, .nav__link[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); } }
.nav__link[aria-current]::after { height: 2px; }
.nav__link .icon--chevron { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.nav__link[aria-expanded="true"] .icon--chevron { transform: rotate(180deg); }

.subnav {
  position: absolute;
  top: calc(100% + 12px);
  left: -8px;
  width: 404px;
  padding: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raise);
  animation: rise-in var(--dur-base) var(--ease-out);
}
.subnav a { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 12px 14px; border-radius: var(--radius-m); text-decoration: none; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { background: var(--paper-100); } }
.subnav a[aria-current] { background: var(--green-50); }
.subnav__num { grid-row: span 2; font-family: var(--font-display); font-style: italic; color: var(--accent-text); font-size: 1rem; line-height: 1.6; }
.subnav__title { font-family: var(--font-display); font-weight: 420; font-size: 1.1875rem; line-height: 1.3; color: var(--text-strong); letter-spacing: -0.01em; }
.subnav__desc { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.45; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-right: calc(-1 * var(--gutter)); padding-left: var(--space-4); border-left: 1px solid var(--rule); }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  border-radius: var(--radius-s);
}
.header-phone .icon { width: 17px; height: 17px; color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) { .header-phone:hover span { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--accent-text); } }
.header-call { display: none; }
.signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-s);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .signin:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.25em; } }
.signin[aria-current] { color: var(--text-strong); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent-text); text-underline-offset: 0.45em; }

.menu-button {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
}
.menu-button__bars { position: relative; width: 16px; height: 10px; }
.menu-button__bars::before, .menu-button__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.menu-button__bars::before { top: 1px; }
.menu-button__bars::after { top: 7.5px; }
.menu-button[aria-expanded="true"] .menu-button__bars::before { top: 4.25px; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-button__bars::after { top: 4.25px; transform: rotate(-45deg); }

/* Header between 960 and 1279: phone collapses to an icon button */
@media (max-width: 1279px) {
  .site-header__inner { --header-gap: var(--space-4); }
  .brand img { --logo-w: 168px; }
  .nav__link { padding: 0 10px; }
  .nav__link::after { left: 10px; right: 10px; }
  .header-phone { display: none; }
  .header-call { display: inline-grid; }
  .header-actions { padding-left: var(--space-3); gap: 6px; }
}
/* Between 960 and 1023 the full navigation fits the container only with a smaller logo
   and tighter link padding (the design was checked at 1024 and 768, not in between). */
@media (min-width: 960px) and (max-width: 1023px) {
  .site-header__inner { --header-gap: var(--space-3); }
  .brand img { --logo-w: 148px; }
  .nav__link { padding: 0 8px; }
  .nav__link::after { left: 8px; right: 8px; }
  .header-actions { padding-left: var(--space-2); gap: 4px; }
}
/* Below 960: navigation moves into the menu sheet */
@media (max-width: 959px) {
  .site-header__inner { --header-gap: var(--space-2); }
  .nav, .signin { display: none; }
  .header-actions { margin-left: auto; padding-left: 0; border-left: 0; }
  .menu-button { display: inline-flex; }
  .brand img { --logo-w: 160px; }
}
@media (max-width: 599px) {
  .brand img { --logo-w: 140px; }
  .header-actions { gap: 6px; }
  .menu-button { padding: 0; justify-content: center; width: 44px; }
  .menu-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-actions .btn--small { padding: 0 16px; }
}
@media (max-width: 374px) {
  .brand img { --logo-w: 116px; }
  .header-actions { gap: 4px; }
  .header-actions .btn--small { padding: 0 14px; }
  .kicker::before { display: none; }
}
.label-short { display: none; }
/* The design shortened the label below 375px, but "Get a Quote" still overflows the
   viewport between 375 and 389px; it shortens below 390px instead. */
@media (max-width: 389px) {
  .label-long { display: none; }
  .label-short { display: inline; }
}
/* Without JavaScript the Services menu and the menu sheet cannot open, so their buttons are
   hidden; the footer carries every destination. header.ui.php swaps no-js for js in <head>. */
.no-js .nav__item, .no-js .menu-button { display: none; }

/* Mobile menu sheet */
.menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-menu);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-page);
  padding: var(--space-4) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom));
  animation: sheet-in var(--dur-base) var(--ease-out);
}
.menu__list { display: grid; }
.menu__list > li { border-bottom: 1px solid var(--rule); }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.75rem;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  text-decoration: none;
}
.menu__link .icon { width: 20px; height: 20px; color: var(--text-muted); }
.menu__label { display: flex; align-items: center; min-height: 40px; padding-top: 8px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.menu__sub { display: grid; gap: 0; padding: 0 0 10px; }
.menu__sub a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.375rem; letter-spacing: -0.01em; color: var(--text-strong); text-decoration: none; }
.menu__sub .menu__num { font-style: italic; color: var(--accent-text); font-size: 0.9375rem; width: 22px; }
.menu__actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.menu__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
}
/* Account links in the sheet keep 44px targets, like the phone link beside them (spec §8). */
.menu__meta .link { display: inline-flex; align-items: center; min-height: 44px; }
/* The current destination in the sheet: the 2px terracotta underline of the desktop header. */
.menu__link[aria-current], .menu__sub a[aria-current] .menu__title { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent-text); text-underline-offset: 0.3em; }
.menu__meta .link[aria-current] { text-decoration-thickness: 2px; text-decoration-color: var(--accent-text); }

/* Breadcrumb */
.breadcrumb { font-size: var(--fs-caption); color: var(--text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: inline-flex; align-items: center; min-height: 32px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--paper-300); }
/* 44px touch target (spec §8); the negative margins keep the 32px row and the text where it was. */
.breadcrumb a { color: var(--text); text-decoration: none; display: inline-flex; min-height: 44px; margin: -6px -6px; padding-inline: 6px; align-items: center; }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { text-decoration: underline; text-underline-offset: 0.22em; } }

/* Page head for inner pages */
.page-head { padding-block: clamp(32px, 5vw, 72px) clamp(28px, 3.6vw, 48px); }
.page-head .kicker { margin-bottom: clamp(16px, 1.8vw, 24px); }
.page-head .lead { margin-top: clamp(16px, 2vw, 24px); max-width: 36em; }
.page-head .breadcrumb { margin-bottom: var(--space-5); }

/* Footer */
.site-footer { background: var(--green-950); color: var(--on-inverse); padding-block: clamp(56px, 6vw, 88px) var(--space-6); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule-inverse); }
.footer__brand img { --logo-w: 188px; }
.footer__brand p { margin-top: var(--space-5); max-width: 24ch; text-wrap: balance; font-family: var(--font-display); font-weight: 340; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--on-inverse); }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.footer__col h2 { margin-bottom: var(--space-3); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-inverse-muted); }
.footer__col ul { display: grid; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-inverse); text-decoration: none; font-size: var(--fs-small); }
@media (hover: hover) and (pointer: fine) { .footer__col a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--on-inverse-accent); } }
/* The number stays on one line while it fits its column; with WCAG 1.4.12 text spacing at the narrowest widths it
   wraps between its digit groups instead of running into the next column. */
.footer__phone { font-family: var(--font-display); font-size: 1.25rem !important; letter-spacing: -0.005em; font-variant-numeric: lining-nums; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-top: var(--space-5); font-size: var(--fs-caption); color: var(--on-inverse-muted); }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.footer__bottom a { color: var(--on-inverse-muted); text-decoration: none; display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .footer__bottom a:hover { color: var(--on-inverse); text-decoration: underline; text-underline-offset: 0.25em; } }
.footer__bottom p { display: flex; align-items: center; min-height: 44px; }
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }

/* 12. Recorded campaign replay -------------------------------------------- */
.replay { margin: 0; container-type: inline-size; }
.replay__frame {
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  box-shadow: var(--shadow-print);
}
.replay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 2px 4px 11px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.replay__label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); }
.replay__label .icon, .replay__chip .icon { width: 15px; height: 15px; stroke-width: 2; color: var(--accent-text); }
.replay__meta { color: var(--text-muted); font-weight: 500; }

.replay__viewport {
  /* Display crop of the 1000 × 1000 replay canvas — presentation only, data untouched */
  --crop-x: 58;
  --crop-y: 274;
  --crop-w: 884;
  --crop-h: 562;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--crop-w) / var(--crop-h);
  border-radius: var(--radius-s);
  background: #ECEAE2;
  isolation: isolate;
}
.replay__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(18, 53, 46, 0.1);
  pointer-events: none;
}
/* The poster's <picture> (a lossless WebP source with the PNG fallback) adds no box of its own. */
.replay__viewport > picture { display: contents; }
.replay__viewport > img, .replay__viewport > picture > img, .replay__viewport > canvas {
  position: absolute;
  top: 0; left: 0;
  width: calc(100% * 1000 / var(--crop-w));
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-left: calc(-100% * var(--crop-x) / var(--crop-w));
  margin-top: calc(-100% * var(--crop-y) / var(--crop-w));
}
/* On-map chips: replay label (narrow screens) and state ("Still …") */
.replay__chips { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; pointer-events: none; }
@media (max-width: 759px) { .replay__chips { right: auto; left: 10px; justify-content: flex-start; } }
.replay__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 0 0 1px rgba(18, 53, 46, 0.12), 0 4px 10px -6px rgba(18, 53, 46, 0.4);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}
.replay__chip--label { display: none; }
.replay__chip--state { background: var(--green-900); color: var(--paper-50); box-shadow: none; }
.replay__credit {
  position: absolute;
  right: 6px; bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-s);
  background: rgba(255, 253, 248, 0.9);
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .replay__credit:hover { color: var(--text-strong); text-decoration: underline; } }

.replay__controls { display: flex; align-items: center; gap: 12px; padding: 12px 4px 2px; }
.replay__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--green-900);
  color: var(--paper-50);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .replay__toggle:hover { background: var(--green-800); } }
.replay__toggle svg { width: 18px; height: 18px; fill: currentColor; }
.replay__toggle .i-pause { display: none; }
.replay__toggle[data-playing="true"] .i-play { display: none; }
.replay__toggle[data-playing="true"] .i-pause { display: block; }

.replay__seek {
  --progress: 0%;
  flex: 1 1 auto;
  min-width: 72px;
  height: 44px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.replay__seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--green-900) var(--progress), rgba(18, 53, 46, 0.16) var(--progress)); }
.replay__seek::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(18, 53, 46, 0.16); }
.replay__seek::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--green-900); }
.replay__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: var(--green-900); border: 3px solid var(--paper-50); box-shadow: 0 0 0 1px rgba(18, 53, 46, 0.35); }
.replay__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--green-900); border: 3px solid var(--paper-50); box-shadow: 0 0 0 1px rgba(18, 53, 46, 0.35); }
.replay__seek:focus-visible { outline-offset: 0; }
.replay__pct { flex: none; min-width: 3.4em; font-size: var(--fs-caption); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; text-align: right; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 0.8125rem; color: var(--text-muted); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend__area { width: 18px; height: 12px; border: 1.5px dashed #3E5A52; border-radius: 2px; }
.legend__route { width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--route-1) 0 25%, var(--route-2) 25% 50%, var(--route-3) 50% 75%, var(--route-4) 75% 100%); }
.replay__controls .legend { flex: none; margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--rule); }

.replay__caption { display: grid; gap: 6px; padding: 16px 4px 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-muted); }
.replay__caption > p { max-width: 64ch; }
.replay__status { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-strong); }
.replay__status::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--green-700); }
.replay__status[data-tone="muted"] { color: var(--text-muted); font-weight: 500; }
.replay__status[data-tone="muted"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.replay__caption .replay__credit-text { display: none; }
.replay__caption .legend { display: none; }
.replay.is-unavailable .replay__controls { display: none; }

@media (max-width: 1079px) {
  .replay__controls .legend { display: none; }
  .replay__caption .legend { display: flex; margin-bottom: 4px; }
}
/* Square crop (phones, service figure): x 184, y 286, 560 × 548 of the 1000-px canvas.
   Its edges miss every whole label except two fragments ("Station Road / Cheadle Hulme" at the
   left, "Jacksons Lane" at the right); soft plate-coloured patches fade those out with the edges. */
:root {
  --crop-square-mask:
    radial-gradient(ellipse 23% 6% at 8% 14.3%, #ECEAE2 62%, rgba(236, 234, 226, 0) 100%),
    radial-gradient(ellipse 8% 4.5% at 2% 6.8%, #ECEAE2 60%, rgba(236, 234, 226, 0) 100%),
    radial-gradient(ellipse 6% 4.5% at 100% 20.6%, #ECEAE2 50%, rgba(236, 234, 226, 0) 100%),
    linear-gradient(180deg, #ECEAE2 0, rgba(236, 234, 226, 0) 28px),
    linear-gradient(90deg, rgba(236, 234, 226, 0.9) 0, rgba(236, 234, 226, 0) 14px, rgba(236, 234, 226, 0) calc(100% - 14px), rgba(236, 234, 226, 0.9) 100%);
}
.crop-square { --crop-x: 184; --crop-y: 286; --crop-w: 560; --crop-h: 548; }
.crop-square::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--crop-square-mask);
}
@media (max-width: 759px) {
  /* Maps go edge to edge on phones; text and cards stay on the 20px gutter */
  .replay__frame { margin-inline: calc(-1 * var(--gutter)); padding: 0 0 6px; border-radius: 0; border-inline: 0; box-shadow: none; }
  .replay__bar { display: none; }
  .replay__chip--label { display: inline-flex; }
  .replay__viewport { --crop-x: 184; --crop-y: 286; --crop-w: 560; --crop-h: 548; border-radius: 0; }
  .replay__viewport::after { box-shadow: none; }
  .replay__viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--crop-square-mask);
  }
  /* One chip on small maps: "Recorded campaign replay · Still" */
  .replay.is-still .replay__chip--state { display: none; }
  .replay.is-still .replay__chip--label::after { content: "· Still"; margin-left: 2px; color: var(--accent-text); }
  .replay__credit { display: none; }
  .replay__caption .replay__credit-text { display: block; }
  .replay__credit-text a { color: inherit; text-underline-offset: 0.2em; }
  .replay__controls { padding: 6px var(--gutter) 0; gap: 10px; }
  .replay__caption { padding: 12px 0 4px; }
}

/* 13. Disclosure, steps, callouts ----------------------------------------- */
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-s);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.faq__item summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq__item summary:hover { color: var(--green-700); } }
@media (hover: hover) and (pointer: fine) { .faq__item summary:hover .faq__toggle { border-color: var(--green-900); } }
.faq__toggle { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: var(--text-strong); transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-out); }
.faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__toggle { background: var(--green-900); border-color: var(--green-900); }
.faq__item[open] .faq__toggle::before, .faq__item[open] .faq__toggle::after { background: var(--paper-50); }
.faq__item[open] .faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__answer { padding: 0 var(--space-8) var(--space-5) 0; color: var(--text); max-width: 40em; }
.faq__answer p + p { margin-top: var(--space-3); }
@media (max-width: 759px) {
  .faq__answer { padding-right: 0; }
  .faq__item summary { font-size: 1.25rem; text-wrap: balance; }
}

.steps { display: grid; padding: 0; margin: 0; list-style: none; counter-reset: step; }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-3); padding-block: var(--space-6); border-top: 1px solid var(--rule); }
.step:first-child { border-top: 0; padding-top: 0; }
.step::before { counter-increment: step; content: counter(step); font-family: var(--font-display); font-style: italic; font-weight: 340; font-size: var(--fs-display-m); line-height: 1.1; color: var(--accent-text); }
.step p { margin-top: var(--space-3); color: var(--text); max-width: 30em; }

/* Callout — the GPS honesty line and other plain statements */
.callout {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  border-left: 2px solid var(--green-900);
  background: rgba(255, 253, 248, 0.7);
  font-size: var(--fs-small);
  color: var(--text);
}
.callout .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--green-700); }

/* Dashed list marker used in service lists */
.ticks { display: grid; gap: 8px; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 12px; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 12px; height: 1px; background: var(--accent-text); transform: translateY(-4px); }

/* 14. Motion, preferences, utilities -------------------------------------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .skeleton { animation: none; }
}

@media (forced-colors: active) {
  .btn, .menu-button, .replay__toggle, .segmented, .icon-btn, .tag { border: 1px solid ButtonText; }
  .kicker::before, .ticks li::before, .legend__route { background: CanvasText; }
  .segmented__option input:checked + span { outline: 2px solid Highlight; }
  /* Shell marks drawn with background-color: the menu bars and close X, the current-page
     underline, and the current service in the Services menu. */
  .menu-button__bars::before, .menu-button__bars::after, .nav__link::after { background: CanvasText; }
  .subnav a[aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
  /* The scrubber's track is a background gradient, which forced colours remove: draw it in system colours
     (each vendor pseudo-element in its own rule, so one unknown selector cannot drop the others) */
  .replay__seek { forced-color-adjust: none; }
  .replay__seek:focus-visible { outline-color: Highlight; }
  .replay__seek::-webkit-slider-runnable-track { background: linear-gradient(to right, Highlight var(--progress), CanvasText var(--progress)); }
  .replay__seek::-moz-range-track { background: CanvasText; }
  .replay__seek::-moz-range-progress { background: Highlight; }
  .replay__seek::-webkit-slider-thumb { background: ButtonText; border-color: Canvas; box-shadow: 0 0 0 1px ButtonText; }
  .replay__seek::-moz-range-thumb { background: ButtonText; border-color: Canvas; box-shadow: 0 0 0 1px ButtonText; }
}

@media print {
  .site-header, .menu, .site-footer, .skip-link, .replay__controls { display: none !important; }
  body { background: #fff; }
}

/* 15. Short pages ========================================================= */

/* Form pages (consultation) */
.form-page { padding-bottom: var(--section-pad); }
.form-page__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 1080px) { .form-page__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; } }
.form-page__head { padding-bottom: clamp(24px, 3vw, 36px); }
/* After a confirmed request the confirmation card replaces the head (emptied and marked .is-empty by the
   server or enquiry-form.js): the card sits 16px below the header. The head never transitions (the
   reduced-motion rule gives every property a 0.01ms transition), so the card's place is final at once. */
.form-page__head { transition-property: none; }
.form-page__head.is-empty { padding-block: var(--space-4) 0; }
.form-page__call { display: none; }
@media (max-width: 1079px) { .form-page__call:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: var(--space-3); font-size: var(--fs-small); color: var(--text-muted); } }
.form-card { display: grid; gap: var(--space-5); padding: clamp(20px, 3vw, 40px); box-shadow: var(--shadow-print); }
.form-via { max-width: 360px; }
.form-success { display: grid; gap: var(--space-3); padding-block: var(--space-4); }
.form-success h1, .form-success h2 { max-width: 18em; }
.form-success__next { margin-top: var(--space-3); }
.form-page__aside { display: grid; gap: var(--space-5); }
@media (min-width: 1080px) { .form-page__aside { position: sticky; top: calc(var(--header-h) + 24px); margin-top: clamp(32px, 5vw, 72px); } }
/* Confirmed request: the head is emptied to its 16px top space, so the aside's top rule starts level with the
   confirmation card instead of 56px lower (the two columns share a top line, as in the design). Its sticky
   offset matches html's scroll-padding-top, where the script scrolls the card to. */
@media (min-width: 1080px) { .form-page__grid:has(.form-page__head.is-empty) > .form-page__aside { top: calc(var(--header-h) + 16px); margin-top: var(--space-4); } }
.aside-panel { padding-top: var(--space-4); border-top: 1px solid var(--rule-strong); }
.aside-panel > * + * { margin-top: var(--space-3); }
.aside-panel .kicker { display: flex; }
.field--short .input { max-width: 26rem; }
.mini-steps { display: grid; gap: var(--space-3); }
.mini-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: var(--fs-small); }
.mini-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-100); color: var(--green-900); font-size: 0.75rem; }
@media (max-width: 759px) { .form-actions .btn { width: 100%; } }

/* Contact: the general message form in a card (ui/contact-form.ui.php, assets/contact-form.js), with the call
   panel and the other ways in beside it from 1080px and below it on narrower screens, where the head's call line
   keeps the number one tap away. */
.contact-page { padding-bottom: var(--section-pad); }
.contact-head .lead { max-width: 30em; }
.contact-head__call { display: none; }
@media (max-width: 1079px) { .contact-head__call { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: var(--space-3); font-size: var(--fs-small); color: var(--text-muted); } }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 1080px) { .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; } }
.contact-card__head { margin-bottom: var(--space-5); }
.contact-card__head p { margin-top: var(--space-2); max-width: 34em; color: var(--text); }
.contact-status:focus { outline: none; }
.contact-status:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-m); }
/* Around the confirmation the ring keeps success semantics: green-700 instead of the terracotta that marks errors. */
.contact-status:has(> .contact-received):focus-visible { outline-color: var(--green-700); }
.contact-status > .error-summary, .contact-status > .alert { margin-bottom: var(--space-5); }
.contact-status .error-summary h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.contact-status .error-summary h3 .icon { width: 22px; height: 22px; stroke-width: 2; }
.contact-status .alert--error .contact-status-message { color: var(--text); }
.contact-pair { display: grid; gap: var(--space-5); }
/* Inputs stay level when only one field of the pair shows an error. */
@media (min-width: 760px) { .contact-pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; } }
.contact-form .textarea { min-height: 168px; }
.contact-submit [hidden] { display: none !important; }
/* Without JavaScript the counter cannot follow the typing, so it is not shown (maxlength still applies). */
.no-js .contact-form .char-count { display: none; }
.contact-received .success__icon { width: 44px; height: 44px; color: var(--green-700); stroke-width: 1.5; }
.contact-received p { max-width: 36em; }
.contact-received__email { overflow-wrap: anywhere; }
.contact-aside { display: grid; gap: var(--space-6); }
.contact-call { padding-top: var(--space-4); border-top: 1px solid var(--rule-strong); }
.contact-call__label { font-family: var(--font-display); font-style: italic; font-weight: 360; font-size: var(--fs-display-s); color: var(--accent-text); }
.contact-call .phone-display { margin-top: var(--space-2); max-width: 100%; }
.contact-options { display: grid; border-top: 1px solid var(--rule); }
.contact-option { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--rule); }
.contact-option__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-strong); }
.contact-option p { margin-top: 4px; max-width: 34em; font-size: var(--fs-small); color: var(--text); }
.contact-option .link-arrow { justify-self: start; }
@media (min-width: 760px) and (max-width: 1079px) { .contact-option { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-6); } }
.form-success .num { white-space: nowrap; }

/* Service pages */
.service-hero { padding-block: clamp(24px, 3.4vw, 48px) clamp(48px, 6vw, 88px); }
.service-hero .breadcrumb { margin-bottom: clamp(20px, 3vw, 40px); }
.service-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 1080px) { .service-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; } }
.service-hero__text .kicker { margin-bottom: clamp(16px, 1.8vw, 24px); }
.service-hero__tag { margin-top: 6px; font-family: var(--font-display); font-style: italic; font-weight: 340; font-size: var(--fs-display-m); line-height: 1.15; letter-spacing: -0.015em; color: var(--accent-text); text-wrap: balance; }
.service-hero__text .lead { margin-top: var(--space-5); max-width: 30em; }
.service-hero__ctas { margin-top: var(--space-6); }
.service-figure { margin: 0; }
.service-figure .caption { margin-top: var(--space-3); padding-inline: 4px; }
.service-figure .replay__viewport { border-radius: var(--radius-s); }
/* Dedicated hero illustrations: drawn at 600 × 450 on the muted basemap, same plate as the Tracked figure */
.service-illo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-s); background: #EEEBE3; }
.illo-wash { fill: rgba(247, 242, 232, 0.42); }
.illo-area { fill: rgba(157, 48, 31, 0.08); stroke: var(--terra-600); stroke-width: 2.5; stroke-dasharray: 9 6; stroke-linejoin: round; }
.illo-ring { fill: rgba(157, 48, 31, 0.06); stroke: var(--terra-600); stroke-width: 2; stroke-dasharray: 8 6; }
.illo-ring--inner { fill: none; stroke: rgba(157, 48, 31, 0.35); stroke-dasharray: none; }
.illo-pin { fill: var(--green-900); stroke: var(--paper-0); stroke-width: 3; }
.illo-pin-dot { fill: var(--paper-0); }
.illo-paper { fill: var(--paper-0); stroke: rgba(18, 53, 46, 0.55); stroke-width: 2; }
.illo-ink { fill: var(--green-900); }
.illo-terra { fill: var(--terra-600); }
.illo-bar { fill: rgba(18, 53, 46, 0.22); }
.illo-bar--strong { fill: rgba(18, 53, 46, 0.7); }
.illo-tile { fill: var(--green-100); }
.illo-tile-line { fill: none; stroke: var(--green-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illo-cut { fill: none; stroke: rgba(18, 53, 46, 0.5); stroke-width: 1.5; stroke-dasharray: 5 4; }
.illo-device { fill: #FBFAF6; stroke: var(--green-900); stroke-width: 2.5; }
.illo-screen { fill: #F3EFE6; }
.illo-chip { fill: var(--paper-0); stroke: rgba(18, 53, 46, 0.25); stroke-width: 1.5; }
.illo-text { font-family: var(--font-text); font-size: 13px; font-weight: 600; fill: var(--text-muted); letter-spacing: 0.02em; }
.illo-btn { fill: var(--green-900); }
.illo-shadow { filter: drop-shadow(0 22px 24px rgba(18, 53, 46, 0.28)); }
.service-body { padding-bottom: var(--section-pad); }
.service-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 900px) {
  .service-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .service-points li { padding-inline: clamp(20px, 2.4vw, 36px); }
  .service-points li:first-child { padding-left: 0; }
  .service-points li:last-child { padding-right: 0; }
  .service-points li + li { border-left: 1px solid var(--rule); }
}
.service-points li + li { padding-top: var(--space-6); border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .service-points li + li { padding-top: 0; border-top: 0; } }
.service-points__num { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--accent-text); }
.service-points h3 { margin-top: var(--space-2); }
.service-points p { margin-top: var(--space-3); max-width: 28em; }
.service-body__callout { margin-top: clamp(32px, 4vw, 56px); max-width: 44rem; }
/* A point's or delivery area's own link, under its paragraph (e.g. "About tracked distribution") */
.service-points .link-arrow { margin-top: var(--space-2); }
/* Where we deliver (leaflet distribution only): two plain points, the Quote area and the rest of Greater Manchester */
@media (min-width: 900px) { .service-points--plain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.service-points--plain h3 { margin-top: 0; }
.service-next { padding-block: var(--section-pad); background: var(--surface-alt); }
.service-next__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 1080px) { .service-next__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 7vw, 120px); align-items: end; } }
.service-next .kicker { margin-bottom: var(--space-4); }
.service-next__grid > div > p { margin-top: var(--space-4); max-width: 34em; }
.service-next__ctas { margin-top: var(--space-6); }
.other-services ul { display: grid; margin-top: var(--space-3); border-top: 1px solid var(--rule-strong); }
.other-services a, .other-services__here { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 4px; min-height: 64px; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: var(--fs-display-s); color: var(--text-strong); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .other-services a:hover span:nth-child(2) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--accent-text); } }
.other-services__here { color: var(--text-muted); }
.other-services__here .tag { font-family: var(--font-text); }
.other-services__num { font-style: italic; font-size: 1rem; color: var(--accent-text); }
.other-services .icon { width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .other-services a:hover .icon { transform: translateX(3px); } }
.other-services .kicker { margin-bottom: 0; color: var(--text-muted); }

/* What customers see */
.cv-head { padding-bottom: clamp(32px, 4vw, 56px); }
.cv-head .lead { max-width: 34em; }
.cv-head__note { display: flex; align-items: center; gap: 8px; margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--text-muted); }
.cv-head__note .icon { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
.cv-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule-strong); }
@media (min-width: 1080px) {
  .cv-row { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; }
  .cv-row--flip { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); }
  .cv-row--flip .cv-shot { order: 2; }
}
.cv-shot { margin: 0; }
.cv-shot .caption { margin-top: var(--space-3); padding-inline: 4px; }
.cv-text__num { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--accent-text); }
.cv-text h2 { margin-top: var(--space-2); }
.cv-text > p:not(.cv-text__num) { margin-top: var(--space-4); max-width: 30em; }
.cv-text .callout { margin-top: var(--space-5); }
.ui-detail { margin: var(--space-5) 0 0; }
.ui-detail img { box-sizing: border-box; max-width: 100%; height: auto; padding: 10px; border: 1px solid var(--rule); border-radius: var(--radius-m); background: #FFFDF7; }
.ui-detail figcaption { margin-top: 8px; font-size: var(--fs-caption); color: var(--text-muted); }
.cv-end { padding-block: var(--section-pad); background: var(--surface-alt); }
.cv-end__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 900px) { .cv-end__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 120px); } .cv-end__grid > div + div { padding-left: clamp(32px, 4vw, 64px); border-left: 1px solid var(--rule); } }
.cv-end__grid p { margin-top: var(--space-3); max-width: 32em; }
.cv-end__grid .link-arrow { margin-top: var(--space-2); }
.cv-end__ctas { margin-top: var(--space-5); }

/* Sign in. The grid children are head, card, more in DOM order, so the reading and Tab
   order match the screen: below 900px the card follows the H1 (spec §6.9, Sign in button in
   the first screen); from 900px the head and the rest of the intro sit in column 1 and the
   card spans column 2, centred against them. */
.login-page { padding-block: clamp(32px, 6vw, 96px) var(--section-pad); }
.login-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
.login-intro__head .kicker { margin-bottom: clamp(16px, 1.8vw, 24px); }
.login-intro__head .display-xl { margin-top: 0; }
.login-intro__more .lead { max-width: 26em; }
@media (max-width: 759px) { .login-intro__head .display-xl { font-size: 2.375rem; } }
@media (min-width: 760px) and (max-width: 899px) { .login-intro__more { margin-top: var(--space-5); } }
@media (min-width: 900px) {
  .login-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(48px, 8vw, 140px); row-gap: 0; }
  .login-intro__head { grid-area: 2 / 1; }
  .login-intro__more { grid-area: 3 / 1; }
  .login-intro__more .lead { margin-top: var(--space-5); }
  .login-card { grid-area: 1 / 2 / 5 / 3; align-self: center; }
}
/* The note is ordinary text, so "Call 0161 554 0212" (one unbreakable unit) follows the sentence as in the
   design. The number keeps its 44px tel target: negative block margins (half the difference between the line
   and 44px) stop the taller link from opening up the line spacing; the px value is the fallback where lh is
   unsupported. */
.login-intro__note { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule); max-width: 30rem; font-size: var(--fs-small); color: var(--text-muted); }
.login-intro__call { white-space: nowrap; }
.login-intro__call .phone-link { margin-block: -10px; margin-block: calc((1lh - 44px) / 2); vertical-align: middle; }
.login-card { display: grid; gap: var(--space-5); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-print); }
.login-card__foot { padding-top: var(--space-4); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--text-muted); }
/* Keep "Request a consultation" on one line rather than breaking mid-phrase at 390 and 320. */
.login-card__foot .link { white-space: nowrap; }
.login-card__notice { align-items: center; }