/* =============================================================
   Glasgow End of Tenancy Cleaning: site styles
   Identity "Thistle and Stone", vision-locked 2026-07-31.
   Cool stone surfaces, ONE heather violet accent, near-black
   violet-tinted ink, Inter worked hard (bold tight display),
   hairline rules doing real organising work, calm vertical
   rhythm. Semantic colours (star gold, wizard banners, error
   red) keep their own hues on purpose.
   ============================================================= */

@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 stone surfaces, near-black violet-tinted ink, ONE heather
     violet accent. OKLCH canonical; never pure black or pure white.
     Measured against the stone surface: accent 6.39:1, ink 15.67:1,
     --text-2 7.37:1. --text-2 also holds AA on the deepest tint band
     (5.64:1) and the accent still clears it there (4.89:1). */
  --surface:        oklch(96.5% 0.004 300);
  --surface-2:      oklch(93% 0.015 300);
  --surface-3:      oklch(88% 0.030 305);
  --text-2:         oklch(43% 0.020 300);
  --text-1:         oklch(22% 0.015 300);
  --rule:           oklch(88% 0.010 300);

  --accent:         oklch(48% 0.16 305);  /* heather violet, the single brand accent */
  --accent-strong:  oklch(42% 0.16 305);  /* hover and active */
  --accent-soft:    oklch(48% 0.16 305 / 0.09);

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

  /* Ink band: the one dark ground (footer, trust band, specialist band).
     Same violet hue family as the accent so the page reads as one voice. */
  --ink:            oklch(22% 0.015 300);
  --ink-2:          oklch(28% 0.020 302);
  --on-ink:         oklch(96.5% 0.004 300);
  --on-ink-muted:   oklch(80% 0.012 300);

  /* 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 (700 display against 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: ONE radius system, documented:
     interactive (buttons, chips, inputs) = --r-sm 10px
     cards and panels = --r-md 16px, large panels = --r-lg 20px
     --r-pill reserved for the reviews badge ONLY. */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --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 and ink-tinted. Hairlines and spacing do
     the separating work; shadow is reserved for hover lift and focus. */
  --shadow-hover: 0 10px 28px -18px oklch(22% 0.015 300 / 0.20),
                  0 3px 10px -8px oklch(22% 0.015 300 / 0.09);
  --shadow-focus: 0 0 0 3px oklch(48% 0.16 305 / 0.28);
}

/* ---------- 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: bold, tight display against relaxed body.
   The weight gap (740 against 400) IS the hierarchy. */
.display {
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: 740;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--text-1);
}

.headline {
  font-family: var(--font-display);
  font-size: var(--size-headline);
  font-weight: 710;
  line-height: 1.08;
  letter-spacing: -0.024em;
}

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

.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 blue.
   (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 blue, 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 300 / 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(96.5% 0.004 300 / 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 blue 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;
  box-shadow: var(--shadow-hover);
}
@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(98.5% 0.003 300) 0%, transparent 60%),
    radial-gradient(80% 50% at 20% 100%, oklch(80% 0.060 305 / 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(60% 0.13 305);
}
.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;
  box-shadow: var(--shadow-hover);
}
@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(98.5% 0.003 300) 0%, transparent 60%),
    radial-gradient(80% 50% at 30% 100%, oklch(80% 0.060 305 / 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);
  box-shadow: var(--shadow-hover);
}
@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: 1px;
  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(88% 0.010 300 / 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% 0.015 300 / 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(28% 0.020 302) 0%, oklch(23% 0.016 300) 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(31% 0.022 302) 0%, oklch(25% 0.017 300) 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(74% 0.012 300);
}
.footer__legal a { color: oklch(74% 0.012 300); }
.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: 2px;
}
.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 (blue, 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(22% 0.015 300 / 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 blue
     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;
}
.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-radius: var(--r-md);
  transition: background var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
  color: var(--text-1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact-card:hover {
  background: var(--surface-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.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 box-shadow 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;
  box-shadow: var(--shadow-hover);
  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);
  box-shadow: var(--shadow-hover);
  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;
  box-shadow: var(--shadow-hover);
  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(22% 0.015 300 / 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(74% 0.012 300);
  cursor: pointer;
}
.footer__legal #cookieSettingsLink:hover {
  color: var(--surface);
}

/* ---------- 20h. Brand wordmark with the geometric G mark ----------
   Horizontal lockup: heather violet tile carrying a stone G, then the
   wordmark. "Glasgow" sits at standard weight and "End of Tenancy
   Cleaning" carries the emphasis in bold, which fits a single-line nav
   constraint. The mark IS the tile, so it needs no badge behind it. */
.wordmark--bee {
  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 ships as a self-contained rounded tile, so no badge, no
   padding: the SVG carries its own ground and corner radius. */
.wordmark__bee {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
  border-radius: 10px;
  box-sizing: border-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: 700;
  font-size: 1.125rem;
  color: var(--text-1);
  letter-spacing: -0.022em;
  margin-top: 1px;
}
@media (min-width: 640px) {
  .wordmark__bee { width: 48px; height: 48px; border-radius: 11px; }
  .wordmark__text { font-size: 1.0625rem; }
  .wordmark__text em { font-size: 1.25rem; }
}

/* Footer variant: larger mark against the dark footer ground. */
.wordmark--footer {
  margin-bottom: var(--s-4);
  color: var(--surface);
}
.wordmark--footer .wordmark__bee {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
.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--bee { gap: var(--s-2); }
  .wordmark__bee { width: 36px; height: 36px; border-radius: 8px; }
  .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. */
  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, because 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 {
  aspect-ratio: 21 / 8;
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hover);
  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),
              box-shadow var(--dur-quick) var(--ease);
}
.blog-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.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, so 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: 4px;
}
/* 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 ink navy.
   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: oklch(78% 0.07 305);
}
.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(92% 0.008 300);
  color: var(--ink);
}
.post-cta--ink .container--narrow {
  text-align: center;
}

/* Price cards (homepage pricing summary): white cards, navy 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)); }
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  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),
              box-shadow var(--dur-quick) var(--ease);
}
.price-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
/* 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-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: 2px;
}
.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";
  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);
  box-shadow: var(--shadow-hover);
}
.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,
   shadow) 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;
  }
}

/* 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;
  }
}

/* ---------- 41. Cinematic video hero (homepage only, 2026-08-08) ----------
   The West End loop is the hero and the headline sits ON the footage. Phones
   get a 4:5 crop, full bleed, title at the top over the sky; wider screens get
   a 2:1 crop with the title at the bottom over the rooftops. Glasgow's own
   identity is untouched: Inter bold headline, heather accent, the same
   buttons. Only the layout changed.

   The scrim below is the measured one. Against the brightest frame of the loop
   inside each text band: --on-ink headline 6.42:1 desktop and 6.67:1 mobile,
   the eyebrow 5.99:1 and 6.22:1, the
   on-image heather #E4D6F8 5.16:1 and 5.36:1. Retune these stops and that
   measurement has to be re-run (scripts in the round's LOG entry). Never bake
   a scrim into the footage. */
.hero--cine .hero-cine {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 4 / 5;
  margin-inline: calc(-1 * var(--s-5));
  background: rgb(8, 7, 16);
}
@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;
}
/* Phones: darkest at the top, where the title sits over bright sky.
   Wider screens: flipped, darkest at the bottom over the rooftops. */
.hero-cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(8, 7, 16, 0.86) 0%, rgba(8, 7, 16, 0.74) 26%, rgba(8, 7, 16, 0.18) 52%, rgba(8, 7, 16, 0.18) 100%);
}
@media (min-width: 768px) {
  .hero-cine::after {
    background: linear-gradient(to bottom, rgba(8, 7, 16, 0.14) 0%, rgba(8, 7, 16, 0.14) 42%, rgba(8, 7, 16, 0.52) 70%, rgba(8, 7, 16, 0.74) 100%);
  }
}
.hero-cine__overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--s-6) 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: #EFE9FA;
  margin-bottom: var(--s-3);
}
.hero--cine .hero__headline {
  color: var(--on-ink);
  margin-bottom: 0;
  max-width: none;
  text-shadow: 0 2px 14px rgba(8, 7, 16, 0.45);
}
/* The on-image heather: lifted well above the brand accent so it clears the
   bar against the loop's brightest frame. The brand violet itself stays the
   accent everywhere else on the page. */
.hero--cine .hero__headline-city {
  color: #E4D6F8;
}
@media (max-width: 767px) {
  .hero--cine .hero__headline {
    font-size: clamp(1.9rem, 8.6vw, 2.4rem);
  }
}
@media (min-width: 768px) {
  .hero--cine .hero__headline {
    font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  }
}
.hero--cine .hero__below {
  margin-top: var(--s-6);
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine__video {
    display: none;
  }
}