/* =============================================================
   Milton Keynes End of Tenancy, site styles
   Identity "Grid and Redway": the city's modernist planning as the
   identity. Ordered, legible, structural. One jade accent on cool
   paper, near-black ink with a faint blue cast, square corners
   throughout, a visible modular grid, tabular figures on every price
   and statistic. Inter worked hard (bold tight display), calm
   purposeful motion. Vision-locked in DESIGN-VISION.md.
   ============================================================= */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Colours: cool paper surfaces, near-black ink with a faint blue cast,
     ONE jade accent. OKLCH canonical; never pure black or pure white.
     --text-2 holds WCAG AA against all three surfaces. */
  --surface:        oklch(97% 0.003 250);
  --surface-2:      oklch(93.5% 0.005 250);
  --surface-3:      oklch(90% 0.007 250);
  --text-2:         oklch(42% 0.018 255);
  --text-1:         oklch(22% 0.015 255);
  --rule:           oklch(87.5% 0.007 250);

  --accent:         oklch(48% 0.095 165);  /* jade, the single brand accent */
  --accent-strong:  oklch(41% 0.085 165);  /* hover / active */
  --accent-soft:    oklch(48% 0.095 165 / 0.10);
  /* Jade light enough to clear AA on the ink band. */
  --accent-on-ink:  oklch(70% 0.145 165);

  /* The one accent exception: star-rating glyphs render gold because
     gold IS the rating idiom; jade stars need decoding. */
  --stars:          oklch(72% 0.14 80);

  /* Ink band: the one dark ground (footer, trust band, specialist band).
     Near-black with a faint blue cast so the page reads as one voice. */
  --ink:            oklch(21% 0.024 200);
  --ink-2:          oklch(26% 0.028 200);
  --on-ink:         oklch(96.5% 0.004 250);
  --on-ink-muted:   oklch(78% 0.012 250);

  /* Typography */
  --font-display:   "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:      "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-tabular:   "Inter", -apple-system, sans-serif;

  /* Scale: display sized up and set heavy; hierarchy comes from
     weight contrast (650 display / 400 body), not thinness. */
  --size-display:   clamp(2.75rem, 6.5vw, 5rem);
  --size-headline:  clamp(1.875rem, 4vw, 3rem);
  --size-title:     1.25rem;
  --size-body:      1.0625rem;
  --size-label:     0.8125rem;

  /* Spacing: single ladder, used directly */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Geometry: a square-cornered system. Every corner on this site is 0,
     interactive controls, cards and panels alike. The three sizes stay as
     named hooks so the intent of each surface is still readable in the CSS,
     but all three resolve to 0.
     --r-pill is the single exception and is reserved for the reviews badge
     ONLY. Circular avatars keep their own 50%. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 999px;

  /* Container */
  --container: 1180px;
  --container-narrow: 920px;

  /* Motion (subtle and purposeful; reduced-motion collapses all) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 200ms;
  --dur-base: 360ms;
  --dur-slow: 560ms;

  /* Shadow vocabulary: sparing, ink-tinted */
  --shadow-hover: 0 12px 32px -16px oklch(21% 0.024 200 / 0.22),
                  0 4px 12px -8px oklch(21% 0.024 200 / 0.10);
  --shadow-focus: 0 0 0 3px oklch(48% 0.095 165 / 0.25);
}

/* ---------- 2. Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-1);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
  scroll-behavior: smooth;
  /* Anchor targets land below the sticky header instead of behind it. */
  scroll-padding-top: 88px;
}

body {
  min-height: 100dvh;
  /* No overflow-x rule here: `overflow-x: hidden` on <body> in this layout
     promotes <body> to a scroll container, which intermittently breaks
     fragment-anchor scrolling (e.g. clicking #quote-wizard). The site has no
     elements that horizontally overflow at any breakpoint, so clipping is
     unnecessary. The JS hash-link handler in js/site.js is the safety net. */
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Visually-hidden helper for SR-only labels */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--text-1);
}

/* ---------- 2b. Skip link ----------
   First focusable element on every page. Off-screen by default; pops in
   on keyboard focus so users with a keyboard or screen reader can jump
   past the nav chrome straight to <main>. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--text-1);
  color: var(--surface);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-weight: 500;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: var(--s-4);
  top: var(--s-4);
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------- 3. Typography ----------
   Inter worked hard: heavy, tight display against relaxed body.
   The weight gap (650 vs 400) IS the hierarchy. */
.display {
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: 650;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--text-1);
}

.headline {
  font-family: var(--font-display);
  font-size: var(--size-headline);
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: -0.028em;
}

.title {
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.body {
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-1);
  max-width: 64ch;
}

.body--muted { color: var(--text-2); }

.label {
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  font-feature-settings: "ss01", "tnum";
}

.tabular {
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
}

.lowercase { text-transform: lowercase; }

/* Accent keyword in display type: same family, brand jade.
   (Replaces the old highlighter underline; colour carries the emphasis.) */
.accent-underline {
  position: relative;
  white-space: nowrap;
  color: var(--accent);
}
.accent-underline::after {
  content: none;
}

/* ---------- 4. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--s-5);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--s-7); }
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--s-9);
}
@media (min-width: 768px) {
  .section { padding-block: var(--s-10); }
}

.section--surface-2 { background: var(--surface-2); }
.section--surface-3 { background: var(--surface-3); }

.divider {
  width: 100%;
  height: 1px;
  background: var(--rule);
  border: 0;
}

/* ---------- 5. Buttons ----------
   Primary = the brand jade, always. Tactile push on :active. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-sm);
  font-weight: 560;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  transition: background var(--dur-quick) var(--ease),
              color var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease),
              box-shadow var(--dur-quick) var(--ease);
  white-space: nowrap;
  min-height: 48px;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn--primary {
  background: var(--accent);
  color: var(--on-ink);
}
.btn--primary:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid oklch(22% 0.015 255 / 0.35);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.btn--lg {
  padding: var(--s-5) var(--s-7);
  font-size: 1rem;
  min-height: 56px;
}

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: oklch(97% 0.003 250 / 0.90);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-quick) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
.wordmark span {
  color: var(--accent);
}

.nav {
  display: none;
  align-items: center;
  gap: var(--s-6);
}
@media (min-width: 880px) {
  .nav { display: flex; }
}

.nav a {
  font-size: 0.9375rem;
  color: var(--text-1);
  position: relative;
  padding-block: var(--s-2);
}
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }

.header-phone {
  display: none;
  font-size: 0.9375rem;
  color: var(--text-1);
}
.header-phone .label {
  display: block;
  margin-bottom: 2px;
}
.header-phone strong {
  font-weight: 500;
  color: var(--text-1);
}
@media (min-width: 1024px) {
  .header-phone { display: block; text-align: right; }
}

/* Mobile nav toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  color: var(--text-1);
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (min-width: 880px) {
  .nav-toggle { display: none; }
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--surface);
  z-index: 55; /* above the sticky CTA bar (50) */
  padding: var(--s-7);
  /* Let the drawer scroll on short viewports. Once the Areas accordion is
     expanded (17 links × 48px ≈ 800px on top of the 4 top-level links and
     the close button), content can exceed an iPhone-SE-sized viewport.
     safe-area-inset-bottom keeps the last item clear of the home indicator. */
  overflow-y: auto;
  padding-bottom: max(var(--s-7), env(safe-area-inset-bottom));
  flex-direction: column;
  gap: var(--s-5);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__close {
  align-self: flex-end;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-1);
  /* Touch-target minimum applied at the base, not gated behind a
     max-width media query. The drawer is itself mobile-only (hamburger
     hidden above 880px), so this only affects users actually using it. */
  min-height: 48px;
  display: flex;
  align-items: center;
}
.mobile-nav .label { color: var(--text-2); }

/* ---------- 7. Hero ---------- */
.hero {
  padding-block: var(--s-8) var(--s-9);
  position: relative;
}
@media (min-width: 768px) {
  .hero { padding-block: var(--s-9) var(--s-10); }
}

/* Type-led hero: single column, the headline owns the viewport.
   The photo (last child aside) renders as a wide cinematic band
   below the content instead of a side column. */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: end;
}

/* Section kickers: the small line above a heading. Deliberately NOT
   uppercase-tracked stickers; a quiet semibold jade line. Applied to
   hero/feature/copy eyebrows so the repeated-label rhythm disappears. */
.hero__eyebrow,
.feature__eyebrow,
.copy__label,
.hero__mini-form__heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
  font-weight: 640;
  color: var(--accent);
}

.hero__eyebrow {
  margin-bottom: var(--s-5);
}

.hero__headline {
  margin-bottom: var(--s-6);
  max-width: 16ch;
  font-size: clamp(3rem, 7.5vw, 5.75rem);
}

.hero__sub {
  margin-bottom: var(--s-6);
  font-size: 1.0625rem;
  color: var(--text-2);
  max-width: 52ch;
  line-height: 1.65;
}
@media (min-width: 768px) {
  .hero__sub { font-size: 1.1875rem; }
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Macro detail card: replaces stock photo until real provided.
   Renders an editorial "address card" composition with a thin
   accent rule, evoking a property listing detail. */
.macro {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--rule);
}
@media (min-width: 880px) {
  .macro { aspect-ratio: 3 / 4; }
}

.macro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 80% 10%, oklch(97% 0.003 250) 0%, transparent 60%),
    radial-gradient(80% 50% at 20% 100%, oklch(85% 0.050 165 / 0.10) 0%, transparent 70%);
  z-index: -1;
}
.macro::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  opacity: 0.7;
  mix-blend-mode: multiply;
  z-index: -1;
}

.macro__rule {
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.macro__line {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.4;
}
.macro__line + .macro__line { margin-top: var(--s-2); }
.macro__small {
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}

.macro__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ---------- 8. Trust band ---------- */
.trust-band {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: var(--s-5);
  overflow: hidden;
}
.trust-band__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-7);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  font-weight: 480;
}
.trust-band__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--on-ink-muted);
}
.trust-band__item::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: oklch(58% 0.105 165);
}
.trust-band__item:first-child::before { display: none; }
@media (max-width: 600px) {
  .trust-band__item::before { display: none; }
}

/* ---------- 9. Service feature ---------- */
.feature {
  padding-block: var(--s-9);
}
@media (min-width: 768px) {
  .feature { padding-block: var(--s-10); }
}

.feature__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}

/* --- Variant 1: classic asymmetric split, image right --- */
@media (min-width: 880px) {
  .feature--split .feature__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--s-9);
  }
}

/* --- Variant 2: tinted band, image left, landscape --- */
@media (min-width: 880px) {
  .feature--band .feature__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-9);
  }
  .feature--band .feature__media { order: -1; }
}
.feature--band .feature__media {
  aspect-ratio: 4 / 3;
}

/* --- Variant 3: panorama, narrow text then a full-width image band --- */
.feature--panorama .feature__inner {
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: start;
}
.feature--panorama .feature__text {
  max-width: 62ch;
}
.feature--panorama .feature__media {
  /* Full-width band; the bedroom asset is 1800px wide, generated for
     this treatment. */
  aspect-ratio: 21 / 8;
  width: 100%;
}
@media (min-width: 880px) {
  .feature--panorama .feature__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3) var(--s-6);
  }
  .feature--panorama .feature__text { max-width: none; }
  .feature--panorama .feature__body { max-width: 62ch; }
}

/* --- Variant 4: compact split, small square image, ruled list --- */
@media (min-width: 880px) {
  .feature--compact .feature__inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr);
    gap: var(--s-9);
  }
}
.feature--compact .feature__media {
  aspect-ratio: 1 / 1;
}
.feature--compact .feature__list {
  grid-template-columns: 1fr;
  gap: 0;
}
.feature--compact .feature__list li {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-3);
}
.feature--compact .feature__list li:first-child {
  border-top: 1px solid var(--rule);
}
.feature--compact .feature__list li::before {
  display: none;
}

.feature__eyebrow {
  margin-bottom: var(--s-4);
  color: var(--accent);
}

.feature__headline {
  margin-bottom: var(--s-5);
  max-width: 14ch;
}

.feature__body {
  margin-bottom: var(--s-6);
}

.feature__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-7);
  font-size: 0.9375rem;
}
.feature__list li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  color: var(--text-2);
  line-height: 1.5;
}
.feature__list li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* Feature media: same SVG noise / editorial card style as macro */
.feature__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  padding: var(--s-7);
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--rule);
}
@media (min-width: 880px) {
  .feature__media { aspect-ratio: 5 / 6; }
}

.feature__media--alt {
  background: var(--surface-3);
}

.feature__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(100% 70% at 70% 0%, oklch(97% 0.003 250) 0%, transparent 60%),
    radial-gradient(80% 50% at 30% 100%, oklch(85% 0.050 165 / 0.12) 0%, transparent 70%);
  z-index: -1;
}
.feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.65;
  mix-blend-mode: multiply;
  z-index: -1;
}

.feature__media-caption {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--text-1);
}
.feature__media-caption .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 10. Tertiary services index ---------- */
.tertiary {
  padding-block: var(--s-9);
}

.tertiary__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}
.tertiary__heading p {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.tertiary__list { border-top: 1px solid var(--rule); }

.tertiary__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-inline var(--dur-base) var(--ease);
}
.tertiary__item:hover {
  padding-inline-start: var(--s-3);
}
@media (max-width: 600px) {
  .tertiary__item {
    grid-template-columns: 1fr auto;
    gap: var(--s-3) var(--s-4);
  }
  .tertiary__item__num { display: none; }
}

.tertiary__item__num {
  font-family: var(--font-body);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--text-2);
  letter-spacing: 0.05em;
}

.tertiary__item__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.022em;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .tertiary__item__name { font-size: 1.875rem; }
}

.tertiary__item__desc {
  grid-column: 2;
  color: var(--text-2);
  font-size: 0.9375rem;
  margin-top: 4px;
  line-height: 1.5;
  max-width: 56ch;
}
@media (max-width: 600px) {
  .tertiary__item__desc { grid-column: 1 / -1; }
}

.tertiary__item__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--text-1);
  white-space: nowrap;
  transition: gap var(--dur-base) var(--ease), color var(--dur-quick) var(--ease);
}
.tertiary__item:hover .tertiary__item__cta {
  gap: var(--s-3);
  color: var(--accent);
}
.tertiary__item__cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 11. Testimonials ---------- */
.quotes { padding-block: var(--s-9); }

.quotes__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 880px) {
  .quotes__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
  }
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.quote__mark {
  /* The source glyph is a straight quote (aria-hidden decoration);
     render a proper typographic opening quote instead. */
  font-family: var(--font-display);
  font-size: 0;
  color: var(--accent);
}
.quote__mark::before {
  content: "\201C";
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.8;
  display: block;
}
.quote__body {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 520;
  line-height: 1.42;
  color: var(--text-1);
  letter-spacing: -0.018em;
  max-width: 36ch;
}
.quote__attr {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.875rem;
  color: var(--text-2);
}
.quote__attr strong {
  color: var(--text-1);
  font-weight: 500;
}
.quote__stars {
  color: var(--stars);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

/* ---------- 12. About snippet ---------- */
.about {
  padding-block: var(--s-9);
}

.about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: end;
}
@media (min-width: 880px) {
  .about__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--s-9);
  }
}

.about__headline { max-width: 16ch; margin-bottom: var(--s-2); }
.about__body { color: var(--text-2); margin-bottom: var(--s-5); }
.about__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.9375rem;
  color: var(--text-1);
  border-bottom: 1px solid var(--text-1);
  padding-bottom: 2px;
  transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.about__link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 13. Areas magazine index ---------- */
.areas {
  padding-block: var(--s-9);
}

.areas__heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}
@media (min-width: 768px) {
  .areas__heading {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--s-9);
    align-items: end;
  }
}
.areas__heading p {
  color: var(--text-2);
  font-size: 0.9375rem;
  max-width: 38ch;
}

.areas__list {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--s-9);
}
@media (min-width: 600px) {
  .areas__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .areas__list { grid-template-columns: 1fr 1fr 1fr; }
}

.areas__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 560;
  letter-spacing: -0.018em;
  color: var(--text-1);
  position: relative;
  transition: color var(--dur-base) var(--ease), padding-left var(--dur-base) var(--ease);
}
.areas__item:hover {
  color: var(--accent);
  padding-left: var(--s-3);
}
.areas__item__arrow {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 1rem;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.areas__item:hover .areas__item__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ---------- 14. Quote wizard ----------
   (scroll-margin-top defined once, further down: 96px) */
.wizard {
  background: var(--surface-2);
  padding-block: var(--s-9);
}
@media (min-width: 768px) {
  .wizard { padding-block: var(--s-10); }
}

.wizard__inner {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-5);
  border: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .wizard__inner { padding: var(--s-9) var(--s-8); }
}

.wizard__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}
@media (min-width: 600px) {
  .wizard__head {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
  }
}
.wizard__counter {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wizard__progress {
  height: 2px;
  width: 100%;
  background: var(--rule);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-7);
  overflow: hidden;
}
.wizard__progress-bar {
  height: 100%;
  width: 20%;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease);
  transform-origin: left;
}

.wizard__step {
  display: none;
}
.wizard__step.is-active {
  display: block;
  animation: stepIn var(--dur-base) var(--ease);
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wizard__question {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin-bottom: var(--s-7);
  max-width: 22ch;
  color: var(--text-1);
}

.wizard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  background: var(--surface);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease),
              color var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
  min-height: 48px;
}
.chip:hover {
  border-color: var(--text-1);
}
.chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.chip.is-selected {
  background: var(--accent);
  color: var(--on-ink);
  border-color: var(--accent);
}

.wizard__inputs {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-7);
}
@media (min-width: 600px) {
  .wizard__inputs { grid-template-columns: 1fr 1fr; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.field__label {
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.field__input {
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 1rem;
  color: var(--text-1);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.field__input:focus-visible {
  outline: none;
  border-color: var(--text-1);
  box-shadow: var(--shadow-focus);
}
.field__hint {
  font-size: 0.8125rem;
  color: var(--text-2);
}
.field__error {
  font-size: 0.8125rem;
  color: oklch(50% 0.15 25);
  font-weight: 500;
  margin-top: 2px;
}
.field__error[hidden] {
  display: none;
}
.field__input[aria-invalid="true"] {
  border-color: oklch(50% 0.15 25);
}

.wizard__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.wizard__back {
  font-size: 0.9375rem;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  min-height: 48px;
  visibility: hidden;
}
.wizard__back.is-visible { visibility: visible; }
.wizard__back:hover { color: var(--text-1); }

.wizard__alt {
  text-align: center;
  margin-top: var(--s-6);
  font-size: 0.9375rem;
  color: var(--text-2);
}
.wizard__alt a {
  color: var(--text-1);
  border-bottom: 1px solid var(--text-1);
  padding-bottom: 1px;
}
.wizard__alt a:hover { color: var(--accent); border-color: var(--accent); }

/* Trust microbar under the wizard heading. One muted line on desktop;
   allowed to wrap to two on narrow screens. No links. */
.wizard__trustbar {
  margin: var(--s-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-2);
}
.wizard__trustbar span[aria-hidden] {
  color: var(--accent);
}

/* The wizard section is the target of #quote-form anchor scrolls; keep
   its heading clear of the sticky header when scrolled into view. */
.wizard {
  scroll-margin-top: 96px;
}

/* ---------- Round 2: wizard calculator components ----------
   New components for the calculator-style wizard rebuild:
   - .wizard__price-reveal: step 1 instant-price panel
   - .wizard__chips--stacked + .chip--block: vertical chip layout for
     condition fork (step 2) and priced extras (step 5)
   - .wizard__banner: contextual messaging boxes (heavy condition,
     out-of-area, photo contract, photo skip)
   - .wizard__field-label: section heading inside merged step 3
   - .wizard__photo-skip: opt-out link for the photo branch
   - .wizard__total: live running total on step 5
   - .wizard__summary__total: headline price recap on step 6
   - .wizard__consent: dispute-protection checkbox row
*/

.wizard__price-reveal {
  margin-top: var(--s-6);
  padding: var(--s-6) var(--s-7);
  background: var(--accent-soft);
  border-radius: var(--r-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.wizard__price-reveal__label {
  color: var(--accent);
  margin: 0;
}
.wizard__price-reveal__value {
  font-size: 3rem;
  line-height: 1;
  margin: 0;
  color: var(--text-1);
}
.wizard__price-reveal__hint {
  max-width: 42ch;
  color: var(--text-2);
  font-size: 0.9375rem;
  margin: 0;
}
/* Neutral default state before a size is picked: "From £155". The prefix
   is hidden by JS as soon as a property size is selected. */
.wizard__price-reveal__from {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-right: var(--s-1);
}
.wizard__price-reveal__from[hidden] {
  display: none;
}
.wizard__price-reveal__cta {
  margin-top: var(--s-3);
}

/* Property profile checkboxes inside the price-reveal panel. Sit between
   the hint copy and the Continue CTA. Left-aligned in a center-aligned
   parent so the multi-line check labels read naturally. */
.wizard__profile {
  width: 100%;
  margin-top: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid oklch(87.5% 0.007 250 / 0.6);
  text-align: left;
}
.wizard__profile[hidden] {
  display: none;
}
/* Surcharge checklist sits inside a native <details>, closed by default.
   JS opens it when any flag is already ticked (restored state, back nav). */
.wizard__profile__summary {
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-1);
  padding: var(--s-2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.wizard__profile__summary:hover {
  color: var(--accent);
}
.wizard__profile__summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}
.wizard__profile__details[open] .wizard__profile__summary {
  margin-bottom: var(--s-3);
}
.wizard__profile__intro {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 var(--s-4);
}
.wizard__profile__check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  margin: 0 calc(var(--s-3) * -1);
  border-radius: var(--r-md);
  cursor: pointer;
  min-height: 48px;
  transition: background var(--dur-quick) var(--ease);
}
.wizard__profile__check:hover {
  background: oklch(93.5% 0.005 250 / 0.6);
}
.wizard__profile__check[hidden] {
  display: none;
}
.wizard__profile__check input[type="checkbox"] {
  margin: 3px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.wizard__profile__check__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.wizard__profile__check__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.4;
}
.wizard__profile__check__sub {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-2);
}

.wizard__chips--stacked {
  flex-direction: column;
  align-items: stretch;
}

.chip--block {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  white-space: normal;
}
.chip--block .chip__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.chip--block .chip__label {
  font-size: 1rem;
  font-weight: 500;
  display: block;
}
.chip--block .chip__sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-top: 2px;
  font-weight: 400;
  line-height: 1.4;
}
.chip--block.is-selected .chip__main .chip__sub {
  color: var(--on-ink-muted);
}
.chip--block.is-selected .chip__sub {
  color: var(--on-ink-muted);
}
.chip--block .chip__price {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  flex-shrink: 0;
}
.chip--block.is-selected .chip__price {
  color: var(--on-ink);
}

.wizard__field-label {
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}

.wizard__banner {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 0.9375rem;
  color: var(--text-1);
}
.wizard__banner p {
  margin: 0;
}
.wizard__banner strong {
  color: var(--accent);
}
.wizard__banner--heavy {
  border-left-color: oklch(70% 0.13 60);
  background: oklch(95% 0.04 60);
}
.wizard__banner--heavy strong {
  color: oklch(50% 0.13 50);
}
.wizard__banner--out {
  border-left-color: oklch(60% 0.10 50);
  background: oklch(94% 0.03 50);
}
.wizard__banner--out strong {
  color: oklch(45% 0.10 50);
}
.wizard__banner--skip {
  border-left-color: oklch(60% 0.13 30);
  background: oklch(95% 0.04 30);
}
.wizard__banner--skip strong {
  color: oklch(45% 0.15 25);
}
.wizard__banner--contract {
  margin-bottom: var(--s-5);
  margin-top: 0;
}
.wizard__banner--block {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.wizard__banner--block strong {
  color: var(--accent);
}
.wizard__banner__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.wizard__banner--block .wizard__banner__alt {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-top: var(--s-3);
}

/* GDPR Art. 13 notice at the point of submission. Sits between Turnstile
   and the submit button. Quiet, factual, with a Privacy Policy link. */
.wizard__privacy-notice {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-2);
  text-align: center;
  margin: 0 0 var(--s-5);
}
.wizard__privacy-notice a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--surface-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease), text-decoration-color var(--dur-quick) var(--ease);
}
.wizard__privacy-notice a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Success card headline focus ring (SR users land here after submit). */
.wizard__success__headline:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}

/* Skip-photos affordance: a <button> for accessibility, styled as a muted
   underlined text link sitting under the primary action row. The morph to
   "Actually, I will send photos to lock the price" is unchanged. */
.wizard__photo-skip {
  display: block;
  width: 100%;
  margin: var(--s-4) auto 0;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.9375rem;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  cursor: pointer;
  min-height: 44px;
  transition: color var(--dur-quick) var(--ease), text-decoration-color var(--dur-quick) var(--ease);
}
.wizard__photo-skip:hover {
  color: var(--text-1);
  text-decoration-color: var(--text-2);
}
.wizard__photo-skip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}
.wizard__photo-skip[aria-pressed="true"] {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.wizard__photo-skip[hidden] {
  display: none;
}

.wizard__total {
  margin-bottom: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--surface-2);
  border-radius: var(--r-md);
  text-align: center;
}
.wizard__total .label {
  margin: 0;
  color: var(--text-2);
}
.wizard__total__value {
  font-size: 2.5rem;
  line-height: 1;
  margin: var(--s-2) 0;
  color: var(--text-1);
}
.wizard__total__breakdown {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-2);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.wizard__summary__total {
  font-size: 2rem;
  line-height: 1;
  margin: var(--s-3) 0 var(--s-2) 0;
  color: var(--text-1);
}
.wizard__summary__total__note {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-2);
  margin-top: 4px;
  font-family: var(--font-body);
}

.wizard__consent {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}
/* The consent wrap also has .field .field--full which both set display: flex,
   overriding the browser's UA [hidden] { display: none }. Re-assert it
   explicitly so the locked-branch-only checkbox actually hides on the
   on-arrival branch. */
.wizard__consent[hidden] {
  display: none;
}
.wizard__consent__label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
}
.wizard__consent__label input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.wizard__consent__text {
  font-size: 0.9375rem;
  color: var(--text-1);
  line-height: 1.5;
}
.wizard__consent input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid oklch(50% 0.15 25);
  outline-offset: 2px;
}

/* SPECIALIST referral consent. Shown only when state.condition is
   'Specialist case'. Soft-fallback by design: if the customer leaves it
   unticked we still capture the lead and phone them for verbal consent
   before sharing details with a partner. See js/site.js validateCurrentStep. */
.wizard__specialist-consent {
  margin-top: var(--s-4);
}
.wizard__consent__heading {
  display: block;
  margin-bottom: var(--s-3);
  font-size: 0.9375rem;
  color: var(--text-1);
}
.wizard__consent__fallback {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--text-2);
  line-height: 1.5;
}

.date-input {
  display: none;
  margin-top: var(--s-3);
}
.date-input.is-visible {
  display: block;
}

/* ---------- 15. Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--on-ink-muted);
  padding-block: var(--s-9) var(--s-7);
}

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

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
}
@media (min-width: 768px) {
  .footer__top {
    /* 6 columns: brand, Quick Links, Areas Covered, More Areas,
       Specialist Cleaning, Contact Us. Brand and Contact get slightly
       more room; the four middle list cols stay narrow. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 1.1fr);
    gap: var(--s-6);
  }
}

.footer__brand .wordmark {
  color: var(--on-ink);
  margin-bottom: var(--s-4);
  display: block;
}
.footer__brand .wordmark span { color: var(--on-ink); }

.footer__address {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--on-ink-muted);
  font-style: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
.footer__address strong { color: var(--surface); font-weight: 500; }

.footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--surface);
  margin-bottom: var(--s-4);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--s-2); font-size: 0.9375rem; }

.footer__map {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 0;
  display: block;
}

/* Placeholder card while GMB Share→Embed URL is pending */
.footer__map--placeholder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-5);
  background:
    linear-gradient(135deg, oklch(26% 0.028 200) 0%, oklch(21% 0.024 200) 100%);
  color: var(--on-ink);
  text-decoration: none;
  transition: transform var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease);
  position: relative;
  overflow: hidden;
}
.footer__map--placeholder::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
}
.footer__map--placeholder:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, oklch(29% 0.030 200) 0%, oklch(23% 0.026 200) 100%);
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-2);
  font-size: 0.8125rem;
  color: oklch(78% 0.012 250);
}
.footer__legal a { color: oklch(78% 0.012 250); }
.footer__legal a:hover { color: var(--surface); }

/* Social links in the footer brand block. Quiet editorial label+icon
   links that match the muted address tone on `.footer__address`. */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--on-ink-muted);
  letter-spacing: 0.01em;
  transition: color var(--dur-quick) var(--ease);
}
.footer__social a:hover { color: var(--surface); }
.footer__social a:focus-visible {
  outline: none;
  color: var(--surface);
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}
.footer__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ---------- 15b. Mobile sticky CTA bar ----------
   Bottom-fixed action bar shown only on phones: Call (jade, filled)
   plus "Get a free quote" (white). Hides when the wizard is in view. */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--on-ink);
  padding:
    var(--s-3)
    var(--s-4)
    calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  align-items: center;
  gap: var(--s-3);
  border-top: 1px solid var(--ink-2);
  box-shadow: 0 -8px 24px -12px oklch(21% 0.024 200 / 0.35);
  transition: transform var(--dur-base) var(--ease);
}

.mobile-cta-bar.is-hidden {
  transform: translateY(120%);
  pointer-events: none;
}

.mobile-cta-bar__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--on-ink);
  border-radius: var(--r-sm);
  text-decoration: none;
  min-height: 52px;
  font-weight: 600;
  font-size: 0.9375rem;
  flex-shrink: 0;
  transition: background var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.mobile-cta-bar__call:active { transform: scale(0.98); }
.mobile-cta-bar__call:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.mobile-cta-bar__quote {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--surface);
  color: var(--text-1);
  border-radius: var(--r-sm);
  text-decoration: none;
  min-height: 52px;
  font-weight: 560;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  transition: background var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.mobile-cta-bar__quote:hover { background: var(--surface-2); }
.mobile-cta-bar__quote:active { transform: scale(0.98); }
.mobile-cta-bar__quote:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.mobile-cta-bar__primary { white-space: nowrap; }

.mobile-cta-bar__arrow {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .mobile-cta-bar { display: flex; }
  /* Reserve space at the bottom of the document so the bar never
     overlaps the last line of the footer. Bar height ~76px + any
     device safe-area inset. */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 17. Entrance animations (responsive motion) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 18a. Page hero (smaller than home hero, used on sub-pages) ---------- */
.page-hero {
  padding-block: var(--s-9) var(--s-8);
}
@media (min-width: 768px) {
  .page-hero { padding-block: var(--s-10) var(--s-9); }
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: end;
}
@media (min-width: 880px) {
  .page-hero__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--s-9);
  }
}

.page-hero__crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-size: 0.8125rem;
  color: var(--text-2);
  flex-wrap: wrap;
}
.page-hero__crumbs a {
  color: var(--text-2);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.page-hero__crumbs a:hover { color: var(--text-1); border-color: var(--text-1); }
.page-hero__crumbs span[aria-hidden] { color: var(--text-2); opacity: 0.5; }

.page-hero__headline {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin-bottom: var(--s-5);
  color: var(--text-1);
  font-family: var(--font-display);
  max-width: 18ch;
}

.page-hero__sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 50ch;
  margin-bottom: var(--s-6);
}

.page-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.page-hero__sidecard {
  background: var(--surface-2);
  padding: var(--s-6);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.page-hero__sidecard h3 {
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0;
}
.page-hero__sidecard ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 0.9375rem;
  color: var(--text-1);
}
.page-hero__sidecard ul li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.page-hero__sidecard ul li::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* ---------- 18b. Body sections (sub-pages) ---------- */
.copy {
  padding-block: var(--s-9);
}
.copy__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 880px) {
  .copy__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--s-9);
  }
}
.copy__label {
  /* Quiet kicker: muted, smaller than the accent eyebrows. The jade
     kicker is reserved for the hero and feature sections so it marks
     moments instead of repeating on every section. */
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.copy__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 630;
  line-height: 1.08;
  letter-spacing: -0.026em;
  color: var(--text-1);
  margin-bottom: var(--s-5);
  max-width: 22ch;
}
.copy__body p {
  margin-bottom: var(--s-4);
  color: var(--text-1);
  line-height: 1.7;
  font-size: 1.0625rem;
  max-width: 64ch;
  /* This is where the sourced ONS census statistics land on every area
     page (household counts, private-rented counts, percentages), so the
     figures are set tabular like every other number on the site. */
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.copy__body p:last-child { margin-bottom: 0; }
.copy__body p strong { color: var(--text-1); font-weight: 500; }

/* What's included: long checklist on service pages */
.included {
  padding-block: var(--s-9);
  background: var(--surface-2);
}
.included__heading {
  margin-bottom: var(--s-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 768px) {
  .included__heading {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: end;
  }
}
.included__heading p {
  color: var(--text-2);
  font-size: 0.9375rem;
  max-width: 40ch;
}

.included__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-7);
}
@media (min-width: 768px) {
  .included__groups { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .included__groups { grid-template-columns: 1fr 1fr 1fr; }
}

.included__group h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 610;
  letter-spacing: -0.022em;
  color: var(--text-1);
  margin-bottom: var(--s-4);
}
.included__group ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 0.9375rem;
}
.included__group ul li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  color: var(--text-2);
  line-height: 1.5;
}
.included__group ul li::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  transform: translateY(-3px);
}

/* What to expect: premium "honesty" section */
.expect {
  padding-block: var(--s-9);
}
.expect__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 880px) {
  .expect__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--s-9);
  }
}
.expect__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}
.expect__row:last-child { border-bottom: 0; }
.expect__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 680;
  color: var(--accent);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.expect__row h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: var(--s-2);
  color: var(--text-1);
}
.expect__row p {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* FAQ: uses native <details>/<summary> */
.faq {
  padding-block: var(--s-9);
}
.faq__heading { margin-bottom: var(--s-7); max-width: 24ch; }

.faq__item {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) 0;
}
.faq__item:first-child { border-top: 1px solid var(--rule); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 570;
  letter-spacing: -0.014em;
  color: var(--text-1);
  padding-block: var(--s-2);
  line-height: 1.3;
}
.faq__item summary:hover {
  color: var(--accent);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease);
  flex-shrink: 0;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer {
  padding-top: var(--s-4);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 64ch;
}
.faq__answer p + p { margin-top: var(--s-3); }

/* Areas served block: compact list on service pages */
.areas-served {
  padding-block: var(--s-9);
  background: var(--surface-2);
}
.areas-served__heading { margin-bottom: var(--s-6); max-width: 24ch; }
.areas-served__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-7);
}
@media (min-width: 768px) {
  .areas-served__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.areas-served__list a {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.0625rem;
  color: var(--text-1);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.areas-served__list a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Contact cards (large tappable) */
.contact-cards {
  padding-block: var(--s-9);
}
.contact-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
@media (min-width: 768px) {
  .contact-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
  color: var(--text-1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact-card:hover {
  background: var(--surface-3);
  border-color: var(--text-1);
  transform: translateY(-2px);
}
.contact-card .label { color: var(--text-2); }
.contact-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.contact-card__value.tabular { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.contact-card__hint {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-top: auto;
}

/* Office hours table */
.hours {
  padding-block: var(--s-9);
  background: var(--surface-2);
}
.hours__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 480px;
  margin-top: var(--s-5);
}
.hours__row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.hours__row strong { font-weight: 500; color: var(--text-1); }
.hours__row span { color: var(--text-2); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Testimonials gallery (full set on About page) */
.gallery {
  padding-block: var(--s-9);
}
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  margin-top: var(--s-7);
}
@media (min-width: 768px) {
  .gallery__grid { grid-template-columns: 1fr 1fr; }
}
.gallery__quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.gallery__quote blockquote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-1);
  letter-spacing: -0.014em;
}
.gallery__quote figcaption {
  font-size: 0.875rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.gallery__quote figcaption strong { color: var(--text-1); font-weight: 500; }
.gallery__quote .stars { color: var(--stars); letter-spacing: 0.1em; font-size: 0.9rem; }

.gallery__avatars-hero {
  margin: var(--s-7) auto var(--s-9);
  max-width: 480px;
  text-align: center;
}
.gallery__avatars-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
}
.gallery__avatars-hero figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Cross-link to neighbouring area pages */
.crosslinks {
  padding-block: var(--s-9);
}
.crosslinks__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
@media (min-width: 768px) {
  .crosslinks__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.crosslinks__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-1);
  transition: border-color var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
.crosslinks__link:hover {
  border-color: var(--text-1);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.crosslinks__link svg {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 1.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.5;
}

/* ---------- 17b. Photo variants: drop noise pattern, host real <img> / <picture> ---------- */
/* Add the --photo modifier alongside the base class to swap the editorial card for a photograph.
   Existing aspect-ratio, border-radius and hairline tokens are inherited from the base rule. */

.macro--photo,
.feature__media--photo {
  padding: 0;
  display: block;
}
.macro--photo::before,
.macro--photo::after,
.feature__media--photo::before,
.feature__media--photo::after { display: none; }

.macro--photo > picture,
.macro--photo > img,
.feature__media--photo > picture,
.feature__media--photo > img {
  display: block;
  width: 100%;
  height: 100%;
}
.macro--photo picture img,
.macro--photo > img,
.feature__media--photo picture img,
.feature__media--photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.page-hero__sidecard--photo {
  padding: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--rule);
  background: var(--surface-2);
}
.page-hero__sidecard--photo > picture,
.page-hero__sidecard--photo > img {
  display: block;
  width: 100%;
  height: 100%;
}
.page-hero__sidecard--photo picture img,
.page-hero__sidecard--photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Tertiary 3-up feature tiles (home page only) */
.tertiary__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-bottom: var(--s-9);
}
@media (max-width: 768px) {
  .tertiary__features {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-bottom: var(--s-7);
  }
}
.tertiary__features__item {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tertiary__features__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: var(--s-4);
  border: 1px solid var(--rule);
  transition: transform var(--dur-base) var(--ease);
}
.tertiary__features__item:hover .tertiary__features__media {
  transform: translateY(-2px);
}
.tertiary__features__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tertiary__features__caption {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--text-1);
  line-height: 1.3;
}
.tertiary__features__sub {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.5;
}

/* Inline figures used in copy sections (about story, home about block) */
.inline-figure {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  isolation: isolate;
}
.inline-figure > picture,
.inline-figure > img { display: block; width: 100%; height: 100%; }
.inline-figure picture img,
.inline-figure > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.inline-figure--portrait { aspect-ratio: 1 / 1; }
.inline-figure--landscape { aspect-ratio: 4 / 3; }

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =============================================================
   19. MOBILE OPTIMISATION PASS (<= 600px)
   The default section padding ladder is desktop-first. Without
   these overrides every section carries 96 + 96 = 192px of empty
   padding on a 375px phone, pushing the page to 18+ screens of
   scrolling. This block tightens spacing for thumb-scrolling,
   compresses trust band, reshapes hero photo aspect-ratio,
   collapses the tertiary dual pattern, halves the footer area
   list. Desktop and tablet are untouched.
   ============================================================= */
@media (max-width: 600px) {
  /* --- Section padding ladder: 96 -> 48 --- */
  .feature, .quotes, .about, .areas, .faq, .wizard,
  .copy, .included, .expect, .areas-served, .crosslinks,
  .contact-cards, .hours, .gallery, .tertiary {
    padding-block: var(--s-7);
  }

  /* --- Hero: less padding, tighter inner stack, shorter photo aspect --- */
  .hero { padding-block: var(--s-6) var(--s-7); }
  .hero__inner { gap: var(--s-6); }
  .hero__eyebrow { margin-bottom: var(--s-3); }
  .hero__headline { margin-bottom: var(--s-4); font-size: 2.625rem; }
  .hero__sub { margin-bottom: var(--s-5); font-size: 1rem; }
  .macro,
  .macro--photo { aspect-ratio: 16 / 10; }

  /* --- Page hero (sub-pages) --- */
  .page-hero { padding-block: var(--s-7); }
  .page-hero__inner { gap: var(--s-6); }
  .page-hero__headline { margin-bottom: var(--s-4); }
  .page-hero__sub { margin-bottom: var(--s-5); font-size: 1rem; }
  .page-hero__sidecard,
  .page-hero__sidecard--photo { aspect-ratio: 16 / 10; }
  /* Portrait variant (about page) keeps the photo's natural 4:5 so faces
     don't get top-and-bottom-cropped by object-fit: cover. */
  .page-hero__sidecard--portrait { aspect-ratio: 4 / 5; }

  /* --- Trust band: was 34% padding-to-content; halve it --- */
  .trust-band { padding-block: var(--s-3); }
  .trust-band__inner { gap: var(--s-2) var(--s-5); font-size: 0.8125rem; }

  /* --- Footer: tighter on mobile. Quick Links (2nd col) and the two
         area lists (3rd + 4th cols) all get 2-column inner layouts so the
         footer doesn't tower. Brand and Contact stay full-width. --- */
  .footer { padding-block: var(--s-7) var(--s-5); }
  .footer__top { gap: var(--s-6); margin-bottom: var(--s-6); }
  .footer__address { font-size: 0.875rem; line-height: 1.6; }
  .footer__col h3 { margin-bottom: var(--s-3); }
  .footer__col ul { gap: var(--s-2); }
  .footer__col:nth-child(2) ul,
  .footer__col:nth-child(3) ul,
  .footer__col:nth-child(4) ul,
  .footer__col:nth-child(5) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2) var(--s-5);
  }
  .footer__map { aspect-ratio: auto; height: 180px; }

  /* --- Tertiary: collapse the dual pattern + 2-column the cards.
         The 3-up cards (.tertiary__features) are kept (visually richer
         on mobile). The numbered list below repeats the same 4 items
         in a tap-row pattern; redundant on mobile, hidden here. The
         cards go 2-up on mobile (3 cards = 1 row of 2 + 1 alone) which
         halves the section height vs stacked-1-col. --- */
  .tertiary__list { display: none; }
  .tertiary__features {
    margin-bottom: 0;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
  }
  .tertiary__features__media { aspect-ratio: 4 / 5; }
  .tertiary__heading { margin-bottom: var(--s-5); }

  /* --- Feature blocks: tighter inner spacing + shorter photo aspect --- */
  .feature__inner { gap: var(--s-5); }
  .feature__eyebrow { margin-bottom: var(--s-3); }
  .feature__headline { margin-bottom: var(--s-3); }
  .feature__body { margin-bottom: var(--s-4); }
  .feature__list { margin-bottom: var(--s-5); gap: var(--s-2) var(--s-4); }
  .feature__media,
  .feature__media--photo { aspect-ratio: 16 / 10; }

  /* --- Included (service-page checklist) --- */
  .included__heading { margin-bottom: var(--s-5); }
  .included__groups { gap: var(--s-5); padding-top: var(--s-5); }
  .included__group h3 { margin-bottom: var(--s-3); }

  /* --- Expect rows (4-step process on service pages) --- */
  .expect__inner { gap: var(--s-5); }
  .expect__row { padding: var(--s-4) 0; gap: var(--s-4); }

  /* --- Quotes: smaller mark, tighter stacks --- */
  .quotes__inner { gap: var(--s-6); }
  .quote { gap: var(--s-3); }
  .quote__mark { font-size: 3rem; line-height: 0.6; }

  /* --- About: tighter sidecard. The 3 stats stacked vertically take
         ~280px on mobile; flow them horizontally as a 3-up row instead
         (each stat ~110px wide, total height ~110px). --- */
  .about__inner { gap: var(--s-5); }
  .about__headline { margin-bottom: var(--s-3); }
  .about__body { margin-bottom: var(--s-4); }
  .about__inner > div:last-child {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--rule);
    padding-top: var(--s-5) !important;
  }
  .about__inner > div:last-child dl {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: var(--s-3) var(--s-3) !important;
    align-items: end !important;
  }
  .about__inner > div:last-child dl > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: 100%;
  }
  .about__inner > div:last-child dl .display {
    font-size: 1.875rem !important;
  }

  /* --- Areas list: tighter row padding --- */
  .areas__heading { margin-bottom: var(--s-5); gap: var(--s-3); }
  .areas__item { padding: var(--s-4) 0; font-size: 1.25rem; }

  /* --- Wizard: tighter inner spacing --- */
  .wizard__inner { padding: var(--s-6) var(--s-5); }
  .wizard__head { margin-bottom: var(--s-5); }
  .wizard__progress { margin-bottom: var(--s-5); }
  .wizard__question { margin-bottom: var(--s-5); font-size: 1.5rem; }
  .wizard__chips { margin-bottom: var(--s-5); }
  .wizard__inputs { margin-bottom: var(--s-5); }

  /* --- FAQ: tighter rows + slightly smaller summary type --- */
  .faq__heading { margin-bottom: var(--s-5); }
  .faq__item { padding: var(--s-4) 0; }
  .faq__item summary { font-size: 1.0625rem; padding-block: var(--s-1); min-height: 48px; }

  /* --- Copy block (used in per-page copy sections) --- */
  .copy__inner { gap: var(--s-5); }
  .copy__heading { margin-bottom: var(--s-3); font-size: 1.625rem; }
  .copy__body p { margin-bottom: var(--s-3); font-size: 1rem; }

  /* --- Areas-served (compact list on service pages) --- */
  .areas-served__heading { margin-bottom: var(--s-4); }

  /* --- Touch targets: nav + mobile nav --- */
  .mobile-nav a { min-height: 48px; display: flex; align-items: center; }
  .areas-served__list a { min-height: 48px; display: inline-flex; align-items: center; }

  /* --- Reveal animations: disable on small phones for reliability.
         IntersectionObserver threshold/rootMargin combinations have an
         intermittent failure mode on iOS Safari low-power; on small
         viewports the animations are also less perceptible. Render
         instantly instead. --- */
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
   20. Additions for Manchester End of Tenancy Cleaning
   - Areas dropdown in primary nav
   - Mobile nav areas accordion
   - Quote form (select styling + status message)
   - Cookie consent banner
   - Crosslinks arrow SVG sizing
   ============================================================= */

/* ---------- 20a. Header areas dropdown ---------- */
.nav__dropdown {
  position: relative;
}
.nav__dropdown-toggle {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-1);
  padding-block: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  position: relative;
}
.nav__dropdown-toggle::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.nav__dropdown-toggle:hover::after,
.nav__dropdown-toggle:focus-visible::after,
.nav__dropdown.is-open .nav__dropdown-toggle::after {
  transform: scaleX(1);
}
.nav__dropdown-toggle svg {
  transition: transform var(--dur-quick) var(--ease);
}
.nav__dropdown.is-open .nav__dropdown-toggle svg {
  transform: rotate(180deg);
}
.nav__dropdown-panel {
  position: absolute;
  top: calc(100% + var(--s-3));
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-hover);
  padding: var(--s-3);
  min-width: 260px;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-1) var(--s-3);
  z-index: 35;
}
.nav__dropdown.is-open .nav__dropdown-panel {
  display: grid;
  animation: dropdownIn var(--dur-base) var(--ease);
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(-4px); }
}
.nav__dropdown-panel a {
  font-size: 0.875rem;
  padding: var(--s-2) var(--s-3);
  color: var(--text-1);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.nav__dropdown-panel a:hover,
.nav__dropdown-panel a:focus-visible {
  background: var(--surface-2);
  color: var(--accent);
  outline: none;
}

.nav__cta {
  font-weight: 500;
  color: var(--accent) !important;
}

/* ---------- 20b. Mobile nav areas accordion ---------- */
.mobile-nav__areas {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--text-1);
}
.mobile-nav__areas summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-2);
  min-height: 48px;
}
.mobile-nav__areas summary::-webkit-details-marker { display: none; }
.mobile-nav__areas summary svg {
  transition: transform var(--dur-quick) var(--ease);
}
.mobile-nav__areas[open] summary svg {
  transform: rotate(180deg);
}
.mobile-nav__areas > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  padding-left: var(--s-4);
  border-left: 1px solid var(--rule);
  margin-top: var(--s-3);
}
.mobile-nav__areas > div a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-1);
  padding-block: var(--s-2);
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* ---------- 20c. Quote form (select + status) ---------- */
.quote-form select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-7);
  cursor: pointer;
}
.quote-form textarea.field__input {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.quote-form .wizard__inputs {
  margin-bottom: var(--s-5);
}
.quote-form__status {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ---------- 20d. Cookie consent banner ----------
   Compact bottom-right card on desktop, full-width bar on mobile. Cream
   surface to sit calmly against the page rather than a heavy dark slab.
   --------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: auto;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 60;
  background: var(--surface);
  color: var(--text-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--r-md);
  box-shadow: 0 14px 40px -16px oklch(21% 0.024 200 / 0.30);
  padding: var(--s-4) var(--s-5);
  display: none;
  max-width: 440px;
  width: calc(100% - var(--s-8));
}
.cookie-banner.is-visible {
  display: block;
  animation: cookieIn var(--dur-base) var(--ease);
}
@keyframes cookieIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.cookie-banner__copy {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
  color: var(--text-2);
}
.cookie-banner__copy a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--surface-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease), text-decoration-color var(--dur-quick) var(--ease);
}
.cookie-banner__copy a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.cookie-banner__actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-end;
}
/* ICO/PECR consent parity: Accept and Reject must have equal visual
   weight, so rejection is "as easy as" acceptance. Both buttons share
   identical treatment (outlined, equal padding/weight). The modifier
   classes remain for semantic targeting but carry no visual difference. */
.cookie-banner__btn {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--text-1);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.cookie-banner__btn:hover {
  background: var(--text-1);
  color: var(--surface);
}
.cookie-banner__btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
@media (max-width: 600px) {
  .cookie-banner {
    left: var(--s-3);
    right: var(--s-3);
    bottom: calc(var(--s-3) + 76px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    width: auto;
    padding: var(--s-4);
  }
  .cookie-banner__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .cookie-banner__btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ---------- 20e. Crosslinks arrow ---------- */
.crosslinks__link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}

/* ---------- 20f. Tertiary item cta svg fix (used in areas grid) ---------- */
.tertiary__item__cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 20g. Cookie footer link colour fix ---------- */
.footer__legal #cookieSettingsLink {
  color: oklch(78% 0.012 250);
  cursor: pointer;
}
.footer__legal #cookieSettingsLink:hover {
  color: var(--surface);
}

/* ---------- 20h. Brand wordmark with grid mark ----------
   Horizontal lockup: the square grid mark plus the wordmark, both set
   in Inter. The place name sits at standard weight and the second line
   carries the emphasis on weight alone, which gives a two-tier
   hierarchy inside a single-line nav constraint. */
.wordmark--mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--text-1);
}
/* The mark sits in a soft jade badge so it holds its own weight against
   the wordmark text. Square corners, in line with the rest of the site. */
.wordmark__mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
  background: var(--accent-soft);
  padding: 6px;
  border-radius: var(--r-sm);
  box-sizing: content-box;
}
.wordmark__text {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.05;
  display: inline-flex;
  flex-direction: column;
  letter-spacing: -0.005em;
}
.wordmark__text em {
  /* Weight carries the emphasis; only the upright Inter file is loaded,
     so italic here would be a synthetic oblique. */
  font-style: normal;
  font-weight: 640;
  font-size: 1.125rem;
  color: var(--text-1);
  letter-spacing: -0.022em;
  margin-top: 1px;
}
@media (min-width: 640px) {
  .wordmark__mark { width: 44px; height: 44px; padding: 7px; border-radius: var(--r-sm); }
  .wordmark__text { font-size: 1.0625rem; }
  .wordmark__text em { font-size: 1.25rem; }
}

/* Footer variant: larger badge, slightly more opaque background so it
   reads against the dark footer ground. */
.wordmark--footer {
  margin-bottom: var(--s-4);
  color: var(--surface);
}
.wordmark--footer .wordmark__mark {
  width: 48px;
  height: 48px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: oklch(48% 0.095 165 / 0.35);
}
.wordmark--footer .wordmark__text { color: var(--surface); }
.wordmark--footer .wordmark__text em { color: var(--surface); }

/* Tighter on very narrow phones so the wordmark never wraps */
@media (max-width: 380px) {
  .wordmark--mark { gap: var(--s-2); }
  .wordmark__mark { width: 32px; height: 32px; padding: 5px; border-radius: var(--r-sm); }
  .wordmark__text { font-size: 0.875rem; }
  .wordmark__text em { font-size: 0.9375rem; }
}

/* ---------- 20i. Hero trust strip + reviews badge ----------
   Under-the-CTA microcopy showing rating + review count + key trust signals.
   The reviews-badge variant sits above the testimonials grid as the
   review-section heading anchor. */
.hero__trust {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 60ch;
}
.hero__trust strong {
  color: var(--text-1);
  font-weight: 500;
}
.hero__trust-stars {
  color: var(--stars);
  font-size: 1rem;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  color: var(--text-1);
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.reviews-badge strong {
  font-weight: 500;
}
.reviews-badge__stars {
  color: var(--stars);
  letter-spacing: 0.05em;
  font-size: 1rem;
}
@media (max-width: 600px) {
  .hero__trust {
    font-size: 0.875rem;
    gap: var(--s-2);
  }
  .reviews-badge {
    font-size: 0.875rem;
    padding: var(--s-2) var(--s-4);
  }
}

/* ---------- 21. Hero price ribbon ----------
   The five sizes as a quiet inline strip under the subtitle. The old
   middle-dot separators are hidden; hairline dividers do the separating. */
.hero__prices {
  /* Quiet index line; the price-tile rail below is THE price moment. */
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) 0;
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--text-2);
  line-height: 1.4;
  max-width: 64ch;
}
.hero__sub + .hero__prices {
  margin-top: calc(var(--s-4) * -1);
}
.hero__prices > span {
  white-space: nowrap;
  padding-inline: var(--s-4);
  border-left: 1px solid var(--rule);
}
.hero__prices > span:first-child {
  padding-inline-start: 0;
  border-left: 0;
}
.hero__prices > span[aria-hidden] {
  display: none;
}
@media (max-width: 600px) {
  .hero__prices {
    font-size: 0.875rem;
  }
  .hero__prices > span { padding-inline: var(--s-3); }
  .hero__prices > span:first-child { padding-inline-start: 0; }
}

/* ---------- 22. Hero price rail ----------
   The five property-size links styled as proper price tiles: size on
   top, price big and bold below. The designed feature of the hero.
   Each links into the wizard with ?property_type=… pre-set. */
.hero__mini-form {
  margin-top: var(--s-7);
}
.hero__mini-form__heading {
  margin-bottom: var(--s-4);
  color: var(--text-2);
}
.hero__mini-form__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (min-width: 720px) {
  /* Six tiles: 3 + 3 keeps each price legible in the hero column. */
  .hero__mini-form__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-hero .hero__mini-form__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hero__mini-form__chips .chip--lg {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  min-height: 96px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 520;
  color: var(--text-2);
  transition: border-color var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease),
              box-shadow var(--dur-quick) var(--ease);
}
.hero__mini-form__chips .chip--lg .chip__price {
  font-size: 1.5rem;
  font-weight: 680;
  letter-spacing: -0.025em;
  color: var(--text-1);
}
.hero__mini-form__chips .chip--lg:hover {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.hero__mini-form__chips .chip--lg:hover .chip__price {
  color: var(--accent);
}
/* Six tiles in a 2-col grid fill three even rows: no orphan to span. */

/* ---------- 23. Chip, large variant ----------
   Extension of the existing .chip used in the quote wizard. Larger touch
   target, embedded price tag on the right, anchor (link) semantics for
   the mini-form rather than button semantics. */
.chip--lg {
  padding: var(--s-3) var(--s-5);
  font-size: 1rem;
  min-height: 48px;
  gap: var(--s-4);
  font-weight: 500;
  text-decoration: none;
}
.chip--lg:hover {
  background: var(--accent);
  color: var(--on-ink);
  border-color: var(--accent);
}
.chip__price {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.9375rem;
}
.chip--lg:hover .chip__price {
  color: var(--on-ink);
}

/* ---------- 24. Sub-areas grid (per area page) ----------
   Replaces the inline comma-separated sub-area list with H3 sub-headings
   in a 3 / 2 / 1 column grid. Restrained, these are keyword-relevant
   text, not page headings. Border-led layout keeps visual rhythm calm. */
.sub-areas {
  margin-top: var(--s-7);
}
.sub-areas__intro {
  color: var(--text-2);
  font-size: 0.9375rem;
  margin-bottom: var(--s-4);
}
.sub-areas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
@media (min-width: 600px) {
  .sub-areas__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 880px) {
  .sub-areas__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.sub-area {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: -0.005em;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  margin: 0;
  line-height: 1.4;
}

/* ---------- 25. Add-ons block ----------
   Compact "Common add-ons" list shown beneath pricing on home + area pages.
   Pre-empts the "you didn't tell me the oven was extra" objection. */
.addons-block {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  max-width: 560px;
  margin: 0 auto;
}
.addons-block__heading {
  margin-bottom: var(--s-3);
  color: var(--text-2);
}
.addons-block__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.addons-block__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 0.9375rem;
  color: var(--text-1);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.addons-block__list li:last-child {
  border-bottom: 0;
}
.addons-block__price {
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- 26. Wizard, what-happens-next block ----------
   Reassurance below the submit button. Three numbered steps. */
.wizard__next-steps {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-5);
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.wizard__next-steps__heading {
  margin-bottom: var(--s-3);
  color: var(--text-2);
}
.wizard__next-steps__list {
  list-style: decimal;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 0.9375rem;
  color: var(--text-1);
  line-height: 1.55;
}
.wizard__next-steps__list li {
  padding-left: var(--s-2);
}

/* ---------- 27. Hero photo band ----------
   The hero photo renders as a wide cinematic band below the type-led
   content. The skyline asset is 2048px wide, generated for exactly
   this full-bleed treatment. */
.hero .macro--photo {
  /* The hairline comes from .macro, which this element always carries. */
  aspect-ratio: 21 / 8;
  width: 100%;
  border-radius: var(--r-lg);
  margin-top: var(--s-4);
}
@media (max-width: 600px) {
  /* On phones the photo stays, as a short strip below the price rail:
     one proof image on the first screens without pushing the rail down. */
  .hero .macro--photo {
    aspect-ratio: 21 / 7;
    margin-top: var(--s-5);
  }
  .hero__sub + .hero__prices {
    margin-top: 0;
  }
}

/* ---------- 28. Blog index ----------
   List of posts on /blog.html. Stacked cards (no thumbnails, reading-flow). */
.blog-index {
  padding-block: var(--s-9);
}
@media (min-width: 768px) {
  .blog-index { padding-block: var(--s-10); }
}
.blog-index__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.blog-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.blog-card:hover {
  border-color: var(--text-1);
  transform: translateY(-2px);
}
.blog-card__link {
  display: block;
  padding: var(--s-6) var(--s-7);
  color: var(--text-1);
}
@media (max-width: 600px) {
  .blog-card__link { padding: var(--s-5); }
}
.blog-card__meta {
  margin-bottom: var(--s-3);
  color: var(--text-2);
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-bottom: var(--s-3);
  color: var(--text-1);
}
.blog-card__excerpt {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--s-4);
  max-width: 64ch;
}
.blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
}
.blog-card:hover .blog-card__cta { gap: var(--s-3); }

/* ---------- 29. Post hero (smaller, reading-focused) ---------- */
.post-hero {
  padding-block: var(--s-9) var(--s-7);
}
@media (min-width: 768px) {
  .post-hero { padding-block: var(--s-10) var(--s-8); }
}
.post-hero__meta {
  margin-bottom: var(--s-4);
  color: var(--text-2);
}
.post-hero__headline {
  max-width: 26ch;
}
/* Default post hero is text-only, single column. When a heroImage is set on
   the post, the --with-image modifier flips to the standard 2-column page-hero
   layout (text left, image right) on desktop. Stacks on mobile. */
.post-hero .page-hero__inner {
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .post-hero .page-hero__inner--with-image {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-9);
    align-items: start;
  }
}
.post-hero__image {
  /* Slightly tighter aspect ratio than area page heroes; reads as
     editorial book-jacket rather than full landing-page hero */
  aspect-ratio: 4 / 5;
}
.post-hero__updated {
  margin-top: var(--s-5);
  color: var(--text-2);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.post-hero__updated-label {
  color: var(--text-2);
}
.post-hero__updated time {
  color: var(--text-1);
  font-weight: 500;
}

/* ---------- 30. Post body, long-form typography ----------
   Single column, ~65ch max line length, generous leading. Heading ladder
   from h2 down. Lists, tables, blockquotes styled editorial. */
.post-body {
  padding-block: var(--s-7) var(--s-9);
}
@media (min-width: 768px) {
  .post-body { padding-block: var(--s-8) var(--s-10); }
}
.post-body__inner {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-1);
  max-width: 65ch;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .post-body__inner { font-size: 1.125rem; }
}
.post-body__inner > * + * {
  margin-top: var(--s-5);
}
.post-body__inner > h2 + *,
.post-body__inner > h3 + * {
  margin-top: var(--s-4);
}
.post-body__inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-top: var(--s-8);
  margin-bottom: var(--s-2);
  color: var(--text-1);
}
.post-body__inner h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  color: var(--text-1);
}
.post-body__inner p {
  margin-bottom: 0;
}
.post-body__inner ul,
.post-body__inner ol {
  padding-left: var(--s-6);
  list-style: revert;
}
.post-body__inner ul li,
.post-body__inner ol li {
  margin-bottom: var(--s-2);
  padding-left: var(--s-2);
}
.post-body__inner ul li::marker { color: var(--accent); }
.post-body__inner ol li::marker { color: var(--accent); font-weight: 500; }
.post-body__inner strong {
  color: var(--text-1);
  font-weight: 500;
}
.post-body__inner a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-quick) var(--ease);
}
.post-body__inner a:hover {
  color: var(--accent-strong);
}
/* Markdown blockquotes are used as AEO callout boxes (Quick Answer, "In most
   Manchester rentals", landlord/agent callouts). Distinct visual treatment so
   AI engines and human scanners both spot them immediately. */
.post-body__inner blockquote {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  margin-block: var(--s-6);
  font-style: normal;
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.65;
}
.post-body__inner blockquote > p {
  margin-bottom: var(--s-3);
}
.post-body__inner blockquote > p:last-child {
  margin-bottom: 0;
}
.post-body__inner blockquote strong:first-child {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (max-width: 600px) {
  .post-body__inner blockquote {
    padding: var(--s-4) var(--s-5);
    font-size: 0.9375rem;
  }
}
.post-body__inner hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin-block: var(--s-7);
}
.post-body__inner table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--s-5);
  font-size: 0.9375rem;
  font-feature-settings: "tnum";
}
.post-body__inner thead th {
  text-align: left;
  border-bottom: 2px solid var(--text-1);
  padding: var(--s-3) var(--s-2);
  font-weight: 500;
  color: var(--text-1);
}
.post-body__inner tbody td {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) var(--s-2);
  vertical-align: top;
}
.post-body__inner tbody tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 600px) {
  /* Tables get hairy on phones, allow horizontal scroll instead. */
  .post-body__inner table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
.post-body__inner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
/* First paragraph (the Quick Answer) gets lede weight */
.post-body__inner > p:first-child {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-1);
}
@media (min-width: 768px) {
  .post-body__inner > p:first-child { font-size: 1.1875rem; }
}

/* ---------- 31. Post CTA + cross-link grid ---------- */
.post-cta {
  padding-block: var(--s-8);
}

/* The one dark moment on the page: specialist referral band on the ink ground.
   Big type, white CTA. */
.post-cta--ink {
  background: var(--ink);
  color: var(--on-ink-muted);
  padding-block: var(--s-9);
}
.post-cta--ink .headline {
  color: var(--on-ink);
  margin-block: var(--s-3) var(--s-4);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
}
.post-cta--ink p {
  max-width: 56ch;
  margin-inline: auto;
  line-height: 1.65;
}
.post-cta--ink .feature__eyebrow {
  color: var(--accent-on-ink);
}
.post-cta--ink .btn--primary {
  margin-top: var(--s-6);
  background: var(--on-ink);
  color: var(--ink);
}
.post-cta--ink .btn--primary:hover {
  background: oklch(90% 0.007 250);
  color: var(--ink);
}
.post-cta--ink .container--narrow {
  text-align: center;
}

/* Price cards (homepage pricing summary): paper cards, ink numerals. */
.price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (min-width: 900px) {
  .price-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The fixed price ladder. Every figure on it is tabular so the four
   values line up on the same digit column across the row of cards. */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  padding: var(--s-8) var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--text-1);
  transition: border-color var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.price-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
/* Tag floats in the reserved top zone so all four price values align. */
.price-card__tag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-5);
  font-size: 0.8125rem;
  font-weight: 640;
  color: var(--accent);
}
.price-card__value {
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s-2);
}
.price-card__tier {
  font-size: 0.9375rem;
  font-weight: 520;
  color: var(--text-2);
  margin-bottom: var(--s-4);
}
.price-card__caption {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  font-weight: 560;
  color: var(--text-1);
}
.price-card__sub {
  font-size: 0.8125rem;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: var(--s-1);
}
.post-cta__inner {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}
.post-cta__inner .copy__label { margin-bottom: var(--s-3); }
.post-cta__inner .copy__heading { margin-bottom: var(--s-4); }
.post-cta__inner .body {
  margin-bottom: var(--s-6);
  margin-left: auto;
  margin-right: auto;
}
.post-cta__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

.post-more {
  padding-block: var(--s-8) var(--s-9);
}
.post-more__heading {
  margin-bottom: var(--s-6);
}
.post-more__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 768px) {
  .post-more__grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-5); }
}
.post-more__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--text-1);
  transition: border-color var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.post-more__card:hover {
  border-color: var(--text-1);
  transform: translateY(-2px);
}
.post-more__card .label { color: var(--text-2); }
.post-more__card h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-1);
}
.post-more__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  margin-top: auto;
}


/* ---------- 32. Wizard photos + summary + success ----------
   Wizard expansion: optional photo upload step (4), summary card
   at the top of the contact step (5), and the post-submit success
   card that replaces the form contents on a successful POST. */

.wizard__sub {
  color: var(--text-2);
  max-width: 56ch;
  margin-bottom: var(--s-6);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.wizard__photos {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.wizard__photo-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-5);
  border: 2px dashed var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-quick) var(--ease),
              background var(--dur-quick) var(--ease);
}
.wizard__photo-input:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.wizard__photo-input:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.wizard__photo-input.is-compressing {
  pointer-events: none;
  opacity: 0.75;
  border-style: solid;
  border-color: var(--accent);
  cursor: progress;
}
.wizard__photo-input.is-compressing .wizard__photo-input__primary {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.wizard__photo-input__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.wizard__photo-input__primary {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-1);
}

.wizard__photo-input__hint {
  font-size: 0.8125rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.wizard__photo-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 600px) {
  .wizard__photo-list { grid-template-columns: repeat(3, 1fr); }
}

.wizard__photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.wizard__photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wizard__photo-remove {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.75);
  color: var(--surface);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-quick) var(--ease);
}
.wizard__photo-remove:hover { background: rgba(20, 20, 20, 0.95); }
.wizard__photo-remove:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------- Summary card on step 5 ---------- */
.wizard__summary {
  padding: var(--s-5);
  background: var(--surface-2);
  border-radius: var(--r-md);
  margin-bottom: var(--s-6);
}
.wizard__summary__heading {
  margin: 0 0 var(--s-3);
}
.wizard__summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 0.9375rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wizard__summary__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-1);
}
.wizard__summary__edit {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.wizard__summary__edit:hover { text-decoration: underline; }
.wizard__summary__edit:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}

/* ---------- Success card ---------- */
.wizard__success {
  padding: var(--s-7) var(--s-5);
  text-align: center;
}

.wizard__success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  margin: 0 auto var(--s-5);
}

.wizard__success__headline {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--text-1);
  margin: 0 0 var(--s-4);
}
.wizard__success__headline:focus { outline: none; }

.wizard__success__lede {
  color: var(--text-2);
  max-width: 50ch;
  margin: 0 auto var(--s-7);
  font-size: 1rem;
  line-height: 1.6;
}

.wizard__success__section {
  text-align: left;
  max-width: 460px;
  margin: 0 auto var(--s-6);
}
.wizard__success__section .label {
  margin-bottom: var(--s-3);
}

.wizard__success__section--summary {
  background: var(--surface-2);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
}

.wizard__success__summary {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-1);
  margin: 0;
}

.wizard__success__steps {
  padding-left: var(--s-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  color: var(--text-1);
  line-height: 1.5;
}

.wizard__success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.wizard__success__followup {
  color: var(--text-2);
  font-size: 0.875rem;
  max-width: 50ch;
  margin: 0 auto;
  text-align: center;
}
.wizard__success__followup a {
  color: var(--accent);
  text-decoration: underline;
}


/* ---------- 32b. Wizard notes textarea ----------
   Optional free-text notes field on step 5. Sits below the contact
   inputs as a full-width row regardless of the 2-col layout above. */

.field.field--full {
  grid-column: 1 / -1;
  margin-bottom: var(--s-5);
}

.field__input--textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
}

.field__label-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-2);
  font-size: 0.75rem;
  margin-left: var(--s-2);
}

/* ---------- Secondary enquiry forms (portfolio + general) ----------
   Reuse the wizard's .field / .wizard__inputs / .wizard__success classes.
   Only the honeypot, the select chevron (the wizard rule is scoped to
   .quote-form) and top spacing need their own rules. */
.enquiry-form {
  margin-top: var(--s-6);
}
.enquiry-form select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-7);
  cursor: pointer;
}
.enquiry-form textarea.field__input {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.enquiry-form .wizard__inputs {
  margin-bottom: var(--s-5);
}
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.enquiry-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.enquiry-form__success {
  margin-top: var(--s-6);
  text-align: center;
}

/* ----------------------------------------------------------------
   Inline editorial CTA
   Used on area pages (after each deepContent H2 sub-section) and in
   blog posts (injected at natural breakpoints). Text-link style with
   an arrow that nudges on hover. Uses existing accent + soft tokens;
   no new design tokens introduced. The wrap centres the CTA in its
   own vertical rhythm so it doesn't fight the prose around it.
   ---------------------------------------------------------------- */
.inline-cta-wrap {
  margin: var(--s-7) 0;
  text-align: left;
}
.inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 0.2em;
  border-bottom: 2px solid var(--accent-soft);
  transition: border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.inline-cta:hover,
.inline-cta:focus {
  border-bottom-color: var(--accent);
  outline: none;
}
.inline-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}
.inline-cta__arrow {
  display: inline-block;
  transition: transform var(--dur-quick) var(--ease);
  font-variant-numeric: tabular-nums;
}
.inline-cta:hover .inline-cta__arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .inline-cta__arrow,
  .inline-cta {
    transition: none;
  }
}

/* ---- Mobile-first layout refinements (June 2026) ---- */

/* Four-card pricing summary: 4-up desktop, 2x2 on mobile.
   minmax(0, 1fr) lets cards shrink below their min-content width;
   without it the 3rem price text forces the second column past the
   container edge on phones. */
.tertiary__features--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tertiary__features--quad .tertiary__features__caption,
.tertiary__features--quad .tertiary__features__sub { text-align: center; }
@media (max-width: 900px) {
  .tertiary__features--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .tertiary__features--quad .tertiary__features__media { padding: var(--s-5) !important; }
  .tertiary__features--quad .display { font-size: 2rem !important; }
}

/* Two-card includes section: side by side at every width */
.tertiary__features--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .tertiary__features--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}

/* Mid-page quote links */
.inline-cta-block { text-align: center; padding-bottom: var(--s-8); }
.inline-cta-block .inline-cta-wrap { text-align: center; }

/* Areas grid: collapse past six entries on small screens only */
.areas__toggle { display: none; }
@media (max-width: 599px) {
  .areas__list[data-collapsed] .areas__item:not(.areas__item--featured) { display: none; }
  .areas__toggle { display: inline-flex; margin-top: var(--s-5); }
}

/* ---- Wizard mobile compaction (June 2026) ----
   Target: every step at or near one phone screen. The furniture was
   sized for desktop generosity; on mobile it forced 1.3 to 1.6 screens
   per step and constant scroll correction. */
@media (max-width: 768px) {
  .wizard { padding-block: var(--s-7); }
  .wizard__chips { gap: 6px; margin-bottom: var(--s-5); }
  .wizard__chips .chip { padding: var(--s-2) var(--s-4); font-size: 0.875rem; }
  .wizard__chips--stacked .chip,
  .wizard__chips .chip--block { padding: var(--s-3) var(--s-4); }
  .chip--block .chip__sub { font-size: 0.8125rem; line-height: 1.35; }
  .wizard__price-reveal { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); }
}

/* ---- Wizard structural mobile fixes (June 2026, round 2) ---- */

/* Sticky action bar: Continue/Back pin to the viewport bottom inside the
   wizard, so tall steps never need a scroll-to-advance. Mobile only. */
@media (max-width: 768px) {
  .wizard__actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-7);
    background: var(--surface-2);
    border-top: 1px solid var(--rule);
    padding: var(--s-3) 0 max(var(--s-3), env(safe-area-inset-bottom));
    margin-top: var(--s-4);
  }
  .wizard__actions .wizard__photo-skip { flex-basis: 100%; text-align: center; margin-top: var(--s-2); }
}

/* Area chips: featured six + "All areas" expander on mobile; desktop shows
   everything and never sees the toggle. */
.wizard__chips-toggle { display: none; }
@media (max-width: 768px) {
  .wizard__chips--collapsible:not(.wizard__chips--expanded) .chip--more { display: none; }
  .wizard__chips--collapsible:not(.wizard__chips--expanded) .wizard__chips-toggle { display: inline-flex; color: var(--accent); border-style: dashed; }
}

/* Step 6 summary: heading + total always visible; the row list collapses
   on mobile behind the Show details toggle. */
.wizard__summary__toggle { display: none; }
@media (max-width: 768px) {
  .wizard__summary__toggle {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    margin: var(--s-2) 0 0;
    font-size: 0.875rem;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .wizard__summary:not(.wizard__summary--expanded) .wizard__summary__list { display: none; }
}

/* Notes field starts compact, grows on focus */
@media (max-width: 768px) {
  #contactNotes { min-height: 56px; transition: min-height 0.15s ease; }
  #contactNotes:focus { min-height: 112px; }
}

/* Consent modules: the long retract email cannot wrap by default and
   forces the box past the viewport edge on phones. */
.wizard__consent { min-width: 0; }
.wizard__consent .field__label,
.wizard__consent p { overflow-wrap: anywhere; }

/* Consent modules on mobile: tick centred ABOVE the text so the copy gets
   the full width of the box instead of being squeezed beside the checkbox. */
@media (max-width: 768px) {
  .wizard__consent__label { flex-direction: column; align-items: center; gap: var(--s-3); }
  .wizard__consent__label input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex-shrink: 0; }
  .wizard__consent__text { width: 100%; }
}

/* ---------------- Printable checklist asset (/end-of-tenancy-checklist) ---------------- */
.ckl-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); margin-top: var(--s-6); }
@media (max-width: 860px) { .ckl-groups { grid-template-columns: 1fr; } }
.ckl-group { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); padding: var(--s-5); }
.ckl-group h2 { font-family: var(--font-display); font-size: var(--size-title); margin: 0 0 var(--s-2); color: var(--text-1); }
.ckl-group > p { font-size: 0.9375rem; color: var(--text-2); margin: 0 0 var(--s-3); }
.ckl-group ul { list-style: none; margin: 0; padding: 0; }
.ckl-item { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; color: var(--text-1); }
.ckl-item:first-child { border-top: 0; }
.ckl-item input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.ckl-item label { cursor: pointer; }
.ckl-print-only { display: none; }

/* Live progress counter + reset. Screen only: carries .ckl-no-print so the
   print rule below hides it with the rest of the chrome. Sticky so the count
   stays in view while scrolling the list. */
.ckl-progress {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
}
.ckl-progress__count { margin: 0; font-weight: 600; color: var(--text-1); }
.ckl-progress__reset {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.ckl-progress__reset:hover { text-decoration: none; }

@media print {
  [data-mount], .skip-link, .ckl-no-print, .ckl-progress, .page-hero__ctas, .btn, .page-hero__crumbs { display: none !important; }
  body { background: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .page-hero { padding: 0 0 10pt; }
  .page-hero__headline { font-size: 19pt; }
  .page-hero__sub { font-size: 10pt; }
  .copy { padding: 0; }
  .ckl-groups { grid-template-columns: repeat(2, 1fr); gap: 9pt; margin-top: 9pt; }
  .ckl-group { padding: 9pt; border: 1pt solid #888; border-radius: 0; page-break-inside: avoid; break-inside: avoid; }
  .ckl-group h2 { font-size: 11pt; }
  .ckl-group > p { font-size: 8.5pt; }
  .ckl-item { font-size: 8.5pt; padding: 2pt 0; gap: 6pt; }
  .ckl-item input[type="checkbox"] { width: 9pt; height: 9pt; margin-top: 1pt; }
  .ckl-print-only { display: block; margin-top: 10pt; font-size: 8pt; color: #444; }
  a { color: inherit; text-decoration: none; }
}

/* ---------------- Price tables (pricing page) ----------------
   The money tables, styled to the same standard as the guide tables. */
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
/* Stated on the cells as well as the table, so a later font rule on a
   cell cannot silently drop the tabular figures out of the money column. */
.price-table thead th,
.price-table tbody th[scope="row"],
.price-table tbody td {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.price-table + .price-table { margin-top: var(--s-6); }
.price-table caption {
  text-align: left;
  margin-bottom: var(--s-3);
}
.price-table thead th {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 2px solid var(--text-1);
  font-weight: 560;
  color: var(--text-1);
}
.price-table tbody th[scope="row"] {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule);
  font-weight: 560;
  color: var(--text-1);
  vertical-align: top;
}
.price-table tbody td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.price-table tbody tr:last-child td,
.price-table tbody tr:last-child th[scope="row"] {
  border-bottom: 0;
}
.price-table tbody tr:hover td,
.price-table tbody tr:hover th[scope="row"] {
  background: var(--surface-2);
}
.price-table strong {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ---------------- Related-links list (money pages) ---------------- */
.related-links { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.related-links li { margin: 0; }
.related-links a { color: var(--accent); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--accent-soft); padding-bottom: 1px; }
.related-links a:hover { border-bottom-color: var(--accent); }

/* ---------------- Instant cost calculator (calculator money page) ----------------
   Reuses .chip, .chip--block, .btn and the token system. New rules cover only
   the calculator shell, the size grid and the carpet stepper. */
.eot-calc-section { padding-block: var(--s-8); }
.eot-calc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-7);
}
.eot-calc__head { margin-bottom: var(--s-6); }
.eot-calc__head .copy__heading { margin-bottom: var(--s-3); max-width: none; }
.eot-calc__intro {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}
.eot-calc__group {
  border: 0;
  margin: 0 0 var(--s-6) 0;
  padding: 0;
}
.eot-calc__group legend { padding: 0; }
.eot-calc__sizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (min-width: 640px) {
  .eot-calc__sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.eot-calc__size {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  min-height: 72px;
}
.eot-calc__size-label { font-weight: 500; font-size: 1rem; }
.eot-calc__size .chip__price { color: var(--text-2); }
.eot-calc__size.is-selected .chip__price { color: var(--on-ink); }
.eot-calc__addons { display: grid; gap: var(--s-3); }
.eot-calc__stepper { cursor: default; }
.eot-calc__stepper:hover { border-color: var(--rule); }
.eot-calc__stepper.is-selected {
  background: var(--accent);
  color: var(--on-ink);
  border-color: var(--accent);
}
.eot-calc__stepper.is-selected .chip__sub { color: var(--on-ink-muted); }
.eot-calc__stepper-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}
.eot-calc__step-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-1);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease);
}
.eot-calc__step-btn:hover { border-color: var(--text-1); }
.eot-calc__step-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.eot-calc__step-count {
  min-width: 1.5ch;
  text-align: center;
  font-weight: 600;
  font-size: 1.125rem;
}
.eot-calc__total {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--surface-2);
  border-radius: var(--r-md);
  text-align: center;
}
.eot-calc__total .label { margin: 0; color: var(--text-2); }
.eot-calc__total-value {
  font-size: 2.75rem;
  line-height: 1;
  margin: var(--s-2) 0;
  color: var(--text-1);
}
.eot-calc__total-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-2);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.eot-calc__cta { text-align: center; }
.eot-calc__cta .btn { width: 100%; }
@media (min-width: 640px) {
  .eot-calc__cta .btn { width: auto; }
}
.eot-calc__cta-note {
  margin: var(--s-3) 0 0;
  font-size: 0.8125rem;
  color: var(--text-2);
}
@media (max-width: 560px) {
  .eot-calc { padding: var(--s-5); }
}

/* ---------- 40. Living-skyline hero band (homepage only) ----------
   A slow drone drift across the Manchester skyline, built from 8 aerial
   frames that cross-fade in order. Frame 1 is baked into the HTML and fills
   the band on its own; frames 2 to 8 are layered in by js/site.js after the
   page loads, and only when the visitor hasn't asked for reduced motion or
   data saving. Opacity is the only animated property, so the fade stays on
   the GPU and does no layout work. The band box (aspect-ratio, radius,
   hairline) is inherited from .hero .macro--photo, so nothing here shifts it. */
.skyline {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.skyline__frame,
.skyline__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* JS adds the fade layers absolutely on top of the base frame. They start
   transparent and the active one is faded in. Cross-fade about 1.5s. */
.skyline__frame--layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.skyline__frame--layer.is-active {
  opacity: 1;
}
/* Instant cut between frames, no cross-fade: dissolves read as motion and
   can be nauseating. When the loop returns to frame 1, all layers switch
   off and the base frame shows through. */

@media (prefers-reduced-motion: reduce) {
  .skyline__frame--layer {
    transition: none;
  }
}

/* ---------- Cinematic hero (homepage, ported from the Clapham sibling
   2026-07-31 on Hugh's instruction) ---------- The canal loop is the hero.
   Title ON the footage: top of frame over the sky on phones (4:5 crop,
   full bleed), bottom of frame over the water on wider screens (2:1 crop,
   square-cornered per this fork's identity, --r-lg is 0). The scrims are
   part of the measured contrast case in build.mjs (white 8.9:1+, on-image
   jade #8fdcbb 5.6:1+ against the loop's brightest frame); retune them and
   the measurement must be re-run. */
.hero--cine .hero-cine {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 4 / 5;
  margin-inline: calc(-1 * var(--s-5));
  background: oklch(21% 0.024 200);
}
@media (min-width: 768px) {
  .hero--cine .hero-cine {
    aspect-ratio: 2 / 1;
    border-radius: var(--r-lg);
    margin-inline: 0;
  }
}
.hero--cine .hero-cine__poster img,
.hero--cine .hero-cine__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The scrim. Phones: darkest at the top where the title sits over the sky.
   Wider screens: flipped, darkest at the bottom over the water. */
.hero-cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(6, 12, 14, 0.62) 0%, rgba(6, 12, 14, 0.50) 26%, rgba(8, 14, 16, 0.16) 52%, rgba(8, 14, 16, 0.16) 100%);
}
@media (min-width: 768px) {
  .hero-cine::after {
    background: linear-gradient(to top, rgba(6, 12, 14, 0.66) 0%, rgba(6, 12, 14, 0.44) 30%, rgba(8, 14, 16, 0.12) 58%, rgba(8, 14, 16, 0.12) 100%);
  }
}
.hero-cine__overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--s-5) var(--s-5) 0;
}
@media (min-width: 768px) {
  .hero-cine__overlay {
    top: auto;
    bottom: 0;
    padding: 0 var(--s-7) var(--s-6);
  }
}
.hero--cine .hero__eyebrow {
  color: rgba(255, 255, 255, 0.85);
}
.hero--cine .hero__headline {
  color: #fff;
  margin-bottom: 0;
  max-width: none;
  text-shadow: 0 2px 14px rgba(6, 12, 14, 0.45);
}
/* The on-image jade: two steps lighter than the brand accent so it clears
   the 3:1 large-text bar against the loop's brightest sky frame. The
   nbsp in the markup keeps the two-word city name on one line. */
.hero__headline-city {
  color: #8fdcbb;
}
/* The long city name needs smaller sizes than Clapham's at every width:
   two lines and no more, so the buildings stay clear. */
@media (max-width: 767px) {
  .hero--cine .hero__headline {
    font-size: clamp(1.55rem, 7.4vw, 1.8rem);
  }
}
@media (min-width: 768px) {
  .hero--cine .hero__headline {
    font-size: clamp(2.1rem, 4vw, 3rem);
  }
}
.hero__below {
  margin-top: var(--s-6);
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine__video {
    display: none;
  }
}

/* Ken Burns variant: one still, a slow zoom deep into the tower cluster and
   back out. The zoom animates the img; the scroll parallax translates the
   wrapping picture element, so the two transforms never fight. Both are
   transform-only, so they stay on the GPU. The container's overflow: hidden
   crops the zoomed edges inside the band box. */
.skyline--kenburns img {
  animation: skyline-kenburns 36s ease-in-out infinite alternate;
  transform-origin: 45% 20%;
}
.skyline--kenburns .skyline__frame--base {
  will-change: transform;
}
@keyframes skyline-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .skyline--kenburns img {
    animation: none;
  }
}

/* Demo host only: concept prelaunch note. Injected by make-demo.mjs. */
.footer-demo-note {
  margin-top: var(--s-5, 1.5rem);
  padding-top: var(--s-5, 1.5rem);
  border-top: 1px solid var(--on-ink-muted, rgba(255, 255, 255, 0.25));
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--on-ink-muted, rgba(255, 255, 255, 0.7));
}
.footer-demo-note p { margin: 0 0 0.5rem; }
.footer-demo-note p:last-child { margin-bottom: 0; }
.footer-demo-note strong { color: var(--on-ink, #fff); }
.footer-demo-note a { color: inherit; text-decoration: underline; }