/* ==========================================================================
   MB MOVE AND BIN  |  FLAT BROADSHEET DESIGN SYSTEM
   --------------------------------------------------------------------------
   Everything sits flat on one printed surface. No cards, no rounded corners,
   no shadows anywhere in this file.

   Structure comes from two things only:
     1. hairline rules that separate blocks
     2. full-bleed images that act as section breaks

   Every ruled grid pads BOTH sides of a cell, so text never touches a rule.

   Type:
     headings -> Fraunces (the "We Move The Lot. We Take The Rest." face)
     body     -> Montserrat, one single size everywhere (--fs-body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- surface ------------------------------------------------------------ */
  --ink: #1A1C1A;             /* Aspen Near-Black / Dark Charcoal */
  --ink-soft: #242824;
  --paper: #FFFFFF;

  /* --- type on dark ------------------------------------------------------- */
  --cream: #F5F7F5;
  --cream-dim: #E3E9E3;   /* solid, not washed: fine print stays crisp on ink */
  --cream-soft: rgba(245, 247, 245, 0.15);
  --line-dark: rgba(245, 247, 245, 0.18);

  /* --- type on paper: pushed to near-black so every paragraph pops --------- */
  --text: #14170F;
  --body: #23281F;
  --muted-t: #4C544C;

  /* --- BRAND GREEN — ONE green for the whole site: the hero mint ----------- */
  --brand: #9CF8C7;           /* Mint Green / Light Seafoam, rgb(156,248,199) */
  --field: var(--brand);
  --green-light: var(--brand);
  --green: var(--brand);
  /* the brand green is light, so every mark that has to sit on white falls
     back to ink rather than inventing a second, darker green */
  --green-deep: var(--ink);
  --green-dark: var(--ink);
  --green-darker: var(--muted-t);

  --accent: var(--brand);        /* fills, rules, dots on dark bands */
  --accent-deep: var(--ink);     /* text + icons on white stay crisp */
  --focus: var(--ink);           /* focus ring that survives on white */

  --strip: #F97306;           /* the strip above the header: orange, ink type (6.1:1) */
  --star: #E3A21E;

  /* --- hairlines: crisp enough to read as printed rules ------------------- */
  --line: #DCE2DC;
  --line-strong: #A7B2A8;

  /* --- type families: Inter — the neutral Swiss grotesque both reference
         sites are built on (Suisse Intl / Inter). Mono carries the kickers. -- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- ONE size for all reading text, kickers included -------------------- */
  --fs-body: 1.08rem;
  --fs-label: 1rem;

  /* --- Crisp, high-impact heading scale ----------------------------------- */
  --fs-display: clamp(2.4rem, 10vw, 8.4rem);
  --fs-h1: clamp(2.2rem, 5.4vw, 4.4rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3: clamp(1.38rem, 2.3vw, 1.9rem);
  --fs-h4: clamp(1.18rem, 1.7vw, 1.4rem);

  /* --- the shared horizontal padding inside every ruled grid cell ---------- */
  --pad-x: clamp(20px, 2.4vw, 34px);

  /* --- FLAT: every surface token collapses to zero ------------------------ */
  --radius: 0;
  --radius-sm: 0;
  --radius-btn: 0;
  --radius-panel: 0;
  --radius-pill: 0;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* legacy aliases so nothing resolves to a stray value */
  --navy: var(--ink);
  --navy-deep: var(--ink);
  --navy-soft: var(--ink-soft);
  --mint: var(--accent);
  --mint-bright: var(--accent);
  --mint-deep: var(--accent);
  --mint-dark: var(--accent-deep);
  --mint-soft: transparent;
  --mint-softer: transparent;
  --orange: var(--accent);
  --orange-deep: var(--accent-deep);
  --orange-soft: transparent;
  --sand: var(--line);
  --fog: var(--paper);
  --mist: var(--paper);

  --page-max: 1440px;
  --gutter: clamp(18px, 5vw, 72px);
  --header-h: 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* crisper letterforms: real optical sizing, no synthetic bold/italic */
  font-optical-sizing: auto;
  font-synthesis: none;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; border-radius: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .18s var(--ease), opacity .18s var(--ease);
}

ul, ol { padding-left: 1.15em; }
p { margin: 0 0 1.15rem; text-wrap: pretty; }

/* --- the single heading voice: Clean Swiss Sans-Serif (Suisse Intl style) --- */
h1, h2, h3, h4, h5, h6,
.hero__display, .hero__display-line, .hero__display-line--xl,
.display, .marquee__item, .svc__title, .stat__num,
.notfound .big {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.036em;
  color: var(--text);
  margin: 0 0 .5em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 650; }
h4 { font-size: var(--fs-h4); font-weight: 650; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* mint highlight with ink text reads on white AND on the dark bands */
::selection { background: var(--brand); color: var(--ink); }

.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hidden { display: none !important; }
.muted { color: var(--muted-t); }
.accent { color: var(--accent-deep); }

.skip-link {
  position: absolute; left: 10px; top: -120px; z-index: 9999;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { top: 10px; }

/* --------------------------------------------------------------------------
   3. FLAT PRIMITIVES — rules, kickers, sections
   -------------------------------------------------------------------------- */
.section {
  padding-block: clamp(46px, 5.6vw, 82px);
  border-top: 1px solid var(--line);
}
.hero + .section, .marquee + .section, .page-hero + .section { border-top: 0; }
/* the stats strip already carries a bottom hairline, so the section that now
   follows it directly must not stack a second one on top */
.stats-strip + .section { border-top: 0; }

.section--mist, .section--mint, .section--fog, .process-section { background: var(--paper); }

.section-head { max-width: 820px; margin-bottom: clamp(26px, 3.4vw, 42px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p.lead,
.section-head .lead { font-size: var(--fs-body); font-weight: 500; color: var(--body); margin: 0; }
.section-head .big-num { display: block; }

/* kicker: Aspen style clean mono badge / tag */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .88rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 16px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--field); border: 1.5px solid var(--text); flex: 0 0 auto; }
.eyebrow--cream { color: var(--cream-dim); }
.eyebrow--cream::before { background: var(--field); border-color: var(--field); }
.eyebrow--mint { color: var(--cream-dim); }
.eyebrow--mint::before { background: var(--field); border-color: var(--field); }

.lead { font-size: var(--fs-body); line-height: 1.6; color: var(--body); }

/* --------------------------------------------------------------------------
   4. BUTTONS — square, flat, brand green
   -------------------------------------------------------------------------- */

/* On an ink band every mark flips to bright mint and the button becomes the
   logo green with ink text (8.25:1). On white it is the deeper green with
   white text (5.34:1). One block, every dark band handled. */
.site-header, .page-hero, .site-footer, .final-cta, .process-section,
.cta-banner, .regions-cta, .areas-panel, .marquee {
  --accent: var(--brand);
  --accent-deep: var(--brand);
  --focus: var(--brand);
  --btn-green-bg: var(--brand);
  --btn-green-fg: var(--ink);
  --btn-green-hover: #fff;
  --btn-green-fg-hover: var(--ink);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  border-radius: 0;
  font-family: var(--font);
  font-size: var(--fs-body); font-weight: 700; line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  box-shadow: none;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn svg { flex: 0 0 auto; }
.btn:active { transform: translateY(1px); }

/* On light surfaces the action is ink with white type and flips to the brand
   green on hover; on the dark bands the block above flips it the other way.
   One colour, two surfaces, always the crisper of the two options. */
.btn--mint,
.btn--mint-deep {
  background: var(--btn-green-bg, var(--ink));
  color: var(--btn-green-fg, #fff);
}
.btn--mint:hover,
.btn--mint-deep:hover {
  background: var(--btn-green-hover, var(--brand));
  color: var(--btn-green-fg-hover, var(--ink));
}

.btn--navy { background: transparent; color: var(--cream); border-color: var(--line-dark); }
.btn--navy:hover { background: var(--cream); color: var(--ink); }

.btn--orange { background: var(--ink); color: #fff; }
.btn--orange:hover { background: var(--brand); color: var(--ink); }

/* an outline button reads as cream on dark, ink on paper */
.btn--outline-cream { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--outline-cream:hover { background: var(--cream); color: var(--ink); }

.btn--outline-navy { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--outline-navy:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); }

.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--accent); color: var(--ink); }

.btn--sm { padding: 11px 20px; }
.btn--lg { padding: 17px 34px; }
.btn--block { width: 100%; }
.btn-arrow { display: inline-flex; transition: transform .18s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; background: none;
  font-size: var(--fs-body); font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: .08em; text-transform: uppercase;
}
.pill--orange { color: var(--accent-deep); }
.pill--navy { color: var(--cream); }

.rating-stars { color: var(--star); letter-spacing: 2px; }

.icon-badge { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-deep); background: none; margin-bottom: 14px; }

.card { background: none; border: 0; border-top: 1px solid var(--line); padding: 24px 0 0; box-shadow: none; }
a.card { display: block; }
.card:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   5. MASTHEAD — orange utility strip over a dark, cream-type bar
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
}
.site-header.is-scrolled { border-bottom-color: var(--accent); }

/* the strip above the header: orange over ink type, the one warm mark on an
   otherwise green and white page. Desktop only, the phone bar is the green. */
.header-strip {
  background: var(--strip);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  padding: 8px var(--gutter);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.header-strip__item { display: inline-flex; align-items: center; gap: 9px; }
.header-strip__item svg { flex: 0 0 auto; color: var(--ink); }
.header-strip__sep { width: 1px; align-self: stretch; background: rgba(25, 27, 30, 0.35); }
.header-strip__hide-sm { display: inline-flex; align-items: center; gap: 9px; }
@media (max-width: 900px) {
  .header-strip__hide-sm, .header-strip__sep { display: none; }
}

.header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 82px; padding-block: 11px; position: relative;
}
.header-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.header-logo img { height: 58px; width: auto; object-fit: contain; }
.header-logo__word { display: flex; flex-direction: column; line-height: 1.1; margin-left: 10px; }
.header-logo__word strong { font-size: var(--fs-body); font-weight: 800; color: var(--cream); }
.header-logo__word span { font-weight: 700; color: var(--accent); letter-spacing: .16em; text-transform: uppercase; }

.header-nav { display: flex; align-items: center; min-width: 0; }
.header-nav ul { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }

.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 13px;
  font-weight: 700; font-size: var(--fs-body); color: var(--cream);
  position: relative;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--cream); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link svg { transition: transform .22s var(--ease); flex: 0 0 auto; }

/* dropdown — square printed panel, hairline edge, no shadow */
.nav-dropdown { position: relative; }
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown:hover .nav-link svg,
.nav-dropdown:focus-within .nav-link svg { transform: rotate(180deg); }
.nav-dropdown__panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  box-shadow: none;
  padding: 22px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  min-width: 320px; z-index: 95;
}
.nav-dropdown__panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dropdown__panel--wide { min-width: 860px; }
.nav-dropdown__panel ul { list-style: none; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; }
.nav-dropdown__panel a {
  display: block;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
  font-size: var(--fs-body); font-weight: 600; color: var(--cream-dim);
  transition: color .16s var(--ease), padding-left .16s var(--ease);
}
.nav-dropdown__panel a:hover { color: var(--cream); padding-left: 8px; }
.nav-dropdown__panel .dd-icon { display: none; }
.nav-dropdown__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.nav-dropdown__cols > div:only-child { grid-column: span 3; }
.dd-heading {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); padding: 10px 2px 6px; margin: 0;
  overflow-wrap: anywhere;
}
.nav-dropdown__panel .dd-featured {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding: 16px 0 0;
  border-top: 1px solid var(--line-dark);
  background: none; color: var(--cream);
}
.nav-dropdown__panel .dd-featured span { font-weight: 700; }
.nav-dropdown__panel .dd-featured small { display: block; color: var(--cream-dim); font-weight: 600; }
.nav-dropdown__panel .dd-featured svg { color: var(--accent); }

/* The Services panel is a flat list of eight links, so it shared the Areas
   panel's three column grid, and at the 320px minimum each column came out
   about 76px: every label wrapped onto three or four lines and the menu read as
   a block of broken type. Two columns as wide as their own contents, one line
   per link, and the panel sizes itself around them. */
.nav-dropdown__panel:not(.nav-dropdown__panel--wide) .nav-dropdown__cols {
  grid-template-columns: repeat(2, max-content);
}
.nav-dropdown__panel:not(.nav-dropdown__panel--wide) .nav-dropdown__cols a {
  white-space: nowrap;
}

.header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header-call { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.header-call small { font-weight: 700; color: var(--cream-dim); letter-spacing: .1em; text-transform: uppercase; }
.header-call a { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-body); font-weight: 800; color: var(--cream); white-space: nowrap; }

/* phone numbers stay in the normal body face — Fraunces reads badly on digits */
.header-call a svg { color: var(--accent); }
.header-call a:hover { color: var(--accent); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: transparent; color: var(--cream);
  border: 1px solid var(--line-dark); cursor: pointer;
}
.nav-toggle:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.header-call-mobile {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--green); color: var(--ink);
}
.header-call-mobile:hover { background: var(--green-light); color: var(--ink); }

/* mobile drawer */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(15, 17, 20, 0.6);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s; z-index: 100;
}
.drawer-overlay.active { opacity: 1; visibility: visible; }

/* the menu drawer is a white sheet: only the top bar carries the brand green,
   so the links sit on paper instead of on a tint */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
  background: #FFFFFF; color: var(--ink); z-index: 101; overflow-y: auto;
  transform: translateX(102%); transition: transform .34s var(--ease);
  border-left: 1px solid rgba(26, 28, 26, .22);
  display: flex; flex-direction: column;
  --accent-deep: var(--ink);
  --muted-t: #3B4239;
}
.drawer.active { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(26, 28, 26, .22); background: var(--brand);
}
/* the logo is drawn for a dark bar, so on the green bar it is knocked to ink */
.drawer__head img { height: 46px; width: auto; filter: brightness(0); opacity: .9; }
.drawer__close {
  width: 42px; height: 42px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.drawer__close:hover { background: var(--ink); color: var(--brand); }

.drawer__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid rgba(26, 28, 26, .22); }
.drawer__quick a {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 12px; font-weight: 700; font-size: var(--fs-body);
}
.drawer__quick a:first-child { background: var(--ink); color: var(--brand); }
.drawer__quick a:last-child { background: transparent; color: var(--ink); border-left: 1px solid rgba(26, 28, 26, .22); }
.drawer__quick a:last-child svg { color: var(--ink); }

.drawer__label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); padding: 20px 22px 8px; margin: 0;
}
.drawer__list { list-style: none; margin: 0; padding: 0 14px; }
.drawer__list a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(26, 28, 26, .16);
  color: var(--ink); font-weight: 700; font-size: var(--fs-body);
}
.drawer__list a:hover { color: var(--ink); background: rgba(156, 248, 199, .38); }
.drawer__list .d-icon { color: var(--ink); display: inline-flex; flex: 0 0 auto; }
.drawer__list .d-arrow { margin-left: auto; color: var(--ink); opacity: .6; }
.drawer__sub { list-style: none; margin: 0; padding: 0; display: none; }
.drawer__sub a { padding: 12px 8px 12px 30px; color: #2C332A; font-weight: 600; }
.drawer__sub a:hover { color: var(--ink); }
.drawer__parent.open > .drawer__sub { display: block; }
.drawer__parent > a { cursor: pointer; }
.drawer__foot {
  margin-top: auto; padding: 20px 22px 26px; border-top: 1px solid rgba(26, 28, 26, .22);
  color: #2C332A; font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. HERO — flat printed masthead on the bright brand field, 2x2 selector,
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* the one brand green, gently graded so the field reads saturated, not flat */
  background:
    radial-gradient(115% 78% at 88% -12%, #CBFFE4 0%, rgba(203, 255, 228, 0) 58%),
    linear-gradient(170deg, #ABFCD4 0%, #9CF8C7 44%, #89F2B9 100%);
  overflow: hidden;
}
.hero__title {  /* visually hidden H1 copy for search engines */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  margin: -1px; padding: 0;
}
.hero__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: clamp(26px, 3vw, 46px);
  padding-bottom: clamp(90px, 7.6vw, 120px); /* clears the marquee pinned at the bottom */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 3.6vw, 68px);
  row-gap: clamp(16px, 2vw, 30px);
  /* the masthead owns the whole width so it can be set enormous, left to
     right, exactly like the reference; the coupon and the van share the row
     underneath it, so the form can never be pushed down the page. */
  grid-template-areas:
    "intro intro"
    "form  visual";
  align-items: start;
  position: relative;
}

.hero__content { display: contents; }
.hero__intro { grid-area: intro; min-width: 0; }
.hero__visual { grid-area: visual; min-width: 0; }
.hero__form { grid-area: form; }
.hero__panel { min-width: 0; }

/* the masthead: DARK display type on the mint field — Aspen style. */
.hero__display { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.hero__display-line {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.hero__display-line--xl {
  /* The masthead runs the full page width at every size, so one fluid rule
     covers it: the longer line "Rubbish Clearance." measures ~8.6em at this
     weight, and the content box is never narrower than 9.2vw, so 9.6vw can
     never wrap. Left-aligned, tight tracking, heavy weight — the Suisse /
     Aspen display voice. */
  font-size: clamp(1.8rem, 9.8vw, 8.7rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.045em;
  text-align: left;
  text-transform: none;
}
/* the van: a full cut-out in the right column — its wheels dissolve into the
   mint field, exactly the mepro treatment, and the four choices come to rest
   on the tyres */
.hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__van-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  /* the bloom is welded to the wheels and clipped here, so it can never
     reach the four choices or the coupon underneath */
  overflow: hidden;
}
.hero__van {
  display: block;
  width: min(100%, clamp(258px, 29vw, 420px));
  height: auto;
  /* the cut-out is cropped to the van itself, so only the tyres fade into the
     field. 78% keeps the wheels solid and lets the last sliver dissolve. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0) 100%);
}
/* the bloom is welded to the bottom of the van: the wheels dissolve into the
   field, and nowhere else. It never sits under the four choices or the coupon. */
.hero__cloud {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72%;
  height: 26%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(50% 62% at 50% 100%,
    rgba(214, 255, 236, 0.99) 0%,
    rgba(176, 253, 214, 0.92) 46%,
    rgba(156, 248, 199, 0) 100%);
}

/* the four choices: printed boxes, mint fill inside an ink rule, sitting on
   the clean field just below the wheels so nothing sits on the picture */
.hero__panel {
  position: relative;
  width: 100%;
  z-index: 2;
  /* the choices ride up onto the tyres instead of floating below the van.
     vw keeps the overlap proportional, because the van is sized in vw too. */
  margin-top: -2vw;
}
.hero__selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 0;
}
.hero__cat {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  min-height: clamp(94px, 8.8vw, 116px);
  padding: clamp(14px, 1.3vw, 18px) clamp(14px, 1.3vw, 18px) clamp(30px, 2.6vw, 38px);
  background: var(--brand);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.hero__cat-no {
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  color: var(--ink);
}
.hero__cat-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.034em;
  color: var(--ink);
  padding-right: 28px; /* clears the arrow */
  text-wrap: balance;
}
.hero__cat-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; right: clamp(12px, 1.2vw, 16px); bottom: clamp(10px, 1.1vw, 14px);
  color: var(--ink);
  transition: transform .2s var(--ease), color .18s var(--ease);
}
.hero__cat:hover, .hero__cat:focus-visible { background: #fff; }
.hero__cat:hover .hero__cat-arrow,
.hero__cat:focus-visible .hero__cat-arrow,
.hero__cat[aria-expanded="true"] .hero__cat-arrow { transform: translateX(4px); }
/* the chosen service prints as an ink block with mint type */
.hero__cat[aria-expanded="true"] { background: var(--ink); }
.hero__cat[aria-expanded="true"] .hero__cat-no,
.hero__cat[aria-expanded="true"] .hero__cat-name,
.hero__cat[aria-expanded="true"] .hero__cat-arrow { color: var(--brand); }
.hero__cat:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the quote form: a WHITE coupon that is on the page from the start, already
   set to House & Flat Moves, so a price is never more than one field away.
   Tapping any tile above re-points it at that service. */
.hero__form {
  width: 100%;
  align-self: stretch;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px, 2.4vw, 30px);
  background: #fff;
  border: 1px solid rgba(26, 28, 26, .22);
  border-top: 3px solid var(--ink);
  color: var(--ink);
  margin-top: 2px;
  /* the coupon sits on the green field, so every mark inside it is ink */
  --accent: var(--ink);
  --accent-deep: var(--ink);
  --focus: var(--ink);
  --btn-green-bg: var(--ink);
  --btn-green-fg: #fff;
  --btn-green-hover: var(--brand);
  --btn-green-fg-hover: var(--ink);
}
.hero__form[hidden] { display: none; }
.hero__form-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: 700; line-height: 1.25;
  margin: 0;
  max-width: 44ch;
}
.hero__form-cat {
  display: inline-block;
  background: var(--ink); color: #fff;
  padding: 2px 8px 3px; margin-right: 6px;
  letter-spacing: .04em;
}
/* the fields sit on a 6 column grid so the rows always fill: three to a row on
   a wide desktop, two on a laptop, and pick-up and drop-off side by side on a
   phone. No ragged half rows. */
.hero__fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px; }
.hero__field {
  position: relative;
  grid-column: span 2;
  padding: 12px 0 8px;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(25, 27, 30, 0.3);
  cursor: text;
}
/* name and phone take half the row, the two dropdowns take all of it */
.hero__field--trio { grid-column: span 3; }
.hero__field--full { grid-column: 1 / -1; }
.hero__field:focus-within { border-bottom-color: var(--accent); }

/* between 1081 and 1180 the hero column is at its narrowest, and three fields
   per row would squeeze the labels, so that band goes two per row instead */
@media (min-width: 1081px) and (max-width: 1180px) {
  .hero__field, .hero__field--trio, .hero__field--full { grid-column: span 3; }
  .hero__field--full:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .hero__field, .hero__field--full, .hero__field--full:last-child { grid-column: 1 / -1; }
  .hero__field--half, .hero__field--trio { grid-column: span 1; }
}
/* below 380 the two-up fields would crowd the labels, so they go full width */
@media (max-width: 380px) {
  .hero__field--half, .hero__field--trio { grid-column: 1 / -1; }
}
.hero__field-input {
  width: 100%; color: var(--ink); background: transparent;
  border: none; outline: none; padding: 0;
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.5;
}
.hero__field-select { color: var(--ink); }
.hero__field-select option { color: #14161A; }
.hero__field-label {
  color: rgba(25, 27, 30, 0.62); pointer-events: none;
  font-size: var(--fs-body); line-height: 1.5;
  transition: opacity .15s;
  position: absolute; top: 12px; left: 0;
  white-space: nowrap;
}
/* the date field keeps its label: a native date box already prints dd/mm/yyyy
   inside itself, so a floating label would land on top of it. The label sits
   above the value and the calendar icon opens the picker. */
.hero__field--date .hero__field-label {
  top: 0;
  font-size: .68rem; font-weight: 700; line-height: 1.1;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(25, 27, 30, 0.7);
}
.hero__field--date .hero__field-input[type="date"]:valid + .hero__field-label { opacity: 1; }
.hero__field-input[type="date"] { cursor: pointer; }
.hero__field-input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .85; }
.hero__field-input:not([type="date"]):not(select):not(:placeholder-shown) + .hero__field-label,
.hero__field-input[type="date"]:valid + .hero__field-label,
.hero__field-select:valid + .hero__field-label { opacity: 0; }
.hero__field-select {
  appearance: none; cursor: pointer; padding-right: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 6 6.5l5-5' stroke='%2323262B' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-position: right 0 center; background-repeat: no-repeat;
  background-size: 12px 8px;
}
/* the GET PRICE action: solid green, square corners, full width */
.hero__submit {
  width: 100%;
  background: var(--ink); color: #fff;
  border: 0;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 17px 28px;
}
.hero__submit:hover { background: var(--brand); color: var(--ink); }
.hero__form-switch { margin: -6px 0 0; color: var(--muted-t); font-size: .92rem; font-weight: 600; }
.hero__linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.hero__linkbtn:hover { color: var(--muted-t); }
.hero__privacy { color: rgba(25, 27, 30, 0.66); margin: 0; }

/* a big OR between two hairlines, then the number. The call fallback lives
   inside the coupon so nobody has to scroll back up the page for it. */
.hero__or {
  display: flex; align-items: center; gap: 16px;
  margin: auto 0 0; /* pins the phone fallback to the foot of the coupon */
  color: var(--ink);
}
.hero__or::before,
.hero__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-strong); }
.hero__or span {
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  line-height: 1;
}
.hero__call {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center;
}
.hero__call-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--body); font-weight: 700;
}
.hero__call-kicker svg { color: var(--ink); flex: 0 0 auto; }
.hero__call-number {
  font-size: clamp(1.5rem, 5.4vw, 1.95rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ink);
}
.hero__call:hover .hero__call-number { color: var(--muted-t); }
.hero__perks { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.hero__perk { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); }
.hero__perk svg { color: var(--accent-deep); flex: 0 0 auto; }

.hero-form__msg { display: none; align-items: flex-start; gap: 11px; padding: 14px 0 14px 16px; border-left: 3px solid var(--accent); font-weight: 600; color: var(--ink); }
.hero-form__msg.show { display: flex; }
.hero-form__msg svg { flex: 0 0 auto; margin-top: 4px; color: var(--accent-deep); }

/* the trust strip at the bottom of the hero: no band and no rule, so it is the
   hero's own field with the type drifting across it. .hero { overflow:hidden }
   clips the track and script.js clones the items ([data-marquee-clone]). */
.hero__marquee {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0; padding: 16px 0;
  list-style: none;
  display: flex; align-items: center;
  width: max-content;
  /* no band, no rule: the strip is the hero's field, so the words read as
     printed on the page and simply move across it */
  background: transparent;
  animation: marqueeScroll 36s linear infinite;
  z-index: 3;
}
.hero__marquee li {
  list-style: none;
  display: flex; align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero__marquee li + li::before {
  content: "";
  width: 5px; height: 5px; background: var(--ink);
  border-radius: 50%;
  margin-right: 28px; margin-left: 28px;
  flex: 0 0 auto;
}
.hero__marquee a {
  color: var(--ink); font-weight: 700;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 1px;
}
.hero__marquee a:hover { border-bottom-width: 3px; }
/* One face and one weight, so the strip reads as a printed line of type moving
   across the field. It used to mix two faces, three weights, two sizes and a
   faded item: that read as broken type rather than as a repeating band. */
.hero__marquee li { font-weight: 700; }

/* --------------------------------------------------------------------------
   7. STATS STRIP + PROMISE MARQUEE
   -------------------------------------------------------------------------- */
.stats-strip { 
  background: #FFFFFF;
  border-top: 1px solid var(--line); 
  border-bottom: 1px solid var(--line); 
}
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
  padding: clamp(30px, 4vw, 48px) var(--pad-x);
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat:first-child { padding-left: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800;
  color: var(--text); 
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.stat__num .accent { color: var(--accent-deep); }
.stat__label { 
  margin: 14px 0 0; 
  color: var(--body); 
  font-weight: 500; 
  font-size: 1rem;
  line-height: 1.45;
  max-width: 24ch; 
}

/* the marquee you liked: ink band, cream serif, accent dots.
   It is the CLOSING band now, sitting between the final CTA and the footer.
   All three of those are ink, so without these two hairlines the page would end
   in one long dark block and you would not know where the marquee started. */
/* the closing band is mint on ink type, like the rest of the page: flat, printed,
   and it hands over to the dark footer instead of being a second dark block */
.marquee { background: var(--brand); overflow: hidden; padding: 20px 0; }
.marquee + .site-footer,
main + .marquee { border-top: 1px solid rgba(26, 28, 26, 0.18); }
.marquee__track { display: flex; align-items: center; width: max-content; animation: marqueeScroll 42s linear infinite; }
.marquee__item {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  margin: 0;
}
.marquee__dot { color: var(--ink); font-size: 1.1rem; margin: 0 32px; }
/* One face, one weight, one colour: the closing band is a single crisp line of
   type. It used to mix three weights, fade two of the five marks and draw one as
   an outline, which is what made the type look broken rather than set. */
.marquee__item { font-family: var(--font-display); font-weight: 700; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* --------------------------------------------------------------------------
   8. SERVICES — three ruled columns
   -------------------------------------------------------------------------- */
.svc__intro { max-width: 900px; margin-bottom: clamp(26px, 3.4vw, 42px); }
.svc__intro h2 { margin-bottom: 14px; }
.svc__lead { color: var(--body); max-width: 62ch; margin: 0; }

.svc__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.svc-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(24px, 2.8vw, 34px) var(--pad-x);
  border-right: 1px solid var(--line);
  transition: background-color .2s var(--ease);
}
.svc-card:first-child { padding-left: 0; }
.svc-card:last-child { border-right: 0; }
.svc-card:hover {  background: rgba(156, 248, 199, 0.38); }
.svc-card__badge { position: absolute; top: 30px; right: var(--pad-x); color: var(--accent-deep); display: inline-flex; }
.svc-card:hover .svc-card__badge { transform: translateX(4px); }
.svc-card__icon { display: inline-flex; color: var(--accent-deep); }
.svc-card__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text); line-height: 1.1; }

.svc__more { margin-top: clamp(26px, 3.4vw, 40px); }
.svc__more-title {
  font-family: var(--font-display);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0;
}
.svc__pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 14px; }
.svc-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px var(--pad-x);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--text);
  transition: color .18s var(--ease);
}
.svc-pill:nth-child(odd) { padding-left: 0; }
.svc-pill:nth-child(even) { border-right: 0; }
.svc-pill:last-child, .svc-pill:nth-last-child(2) { border-bottom: 0; }
.svc-pill:hover { color: var(--accent-deep); }
.svc-pill__arrow { color: var(--accent-deep); transition: transform .18s var(--ease); flex: 0 0 auto; }
.svc-pill:hover .svc-pill__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   9. GALLERY / PROCESS / WHY
   -------------------------------------------------------------------------- */
/* recent work: one big square leading photo holding the top-left 2x2 block and
   four squares filling the rest, so every edge and every caption lines up on the
   grid. Each one is photo, one hairline, then the area it was done in. */
.moves-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.move { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.move--lead { grid-column: span 2; grid-row: span 2; }
.move img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: var(--line); /* flat grey until the file paints */
  /* the picture takes up the slack when the grid stretches a row, so every
     caption in the mosaic sits on the same line */
  flex: 1 1 auto;
  min-height: 0;
}
/* the lead holds the top-left 2x2 block; its own aspect ratio sets the height
   of both rows and it is shown almost uncropped at that size */
.move--lead img { aspect-ratio: auto; object-position: center 42%; }
/* the photo does the talking: the area and what that job saved, under a rule */
.move__cap {
  margin-top: 14px; padding-top: 12px;
  border-top: 1.5px solid var(--ink);
}
.move__save {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-t);
}
.move__save b {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1;
  color: var(--ink);
}
.move__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1.25vw, 1.26rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -0.034em;
  color: var(--text);
}
.moves-note {
  margin: clamp(28px, 3.2vw, 44px) 0 0;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
  font-weight: 600; color: var(--text);
}
.moves-note a { border-bottom: 2px solid var(--ink); padding-bottom: 1px; }
.moves-note a:hover { background: var(--brand); }

/* phones and small tablets: the mosaic becomes one swipeable rail of photos,
   with the next one peeking, so it is obvious there is more to see. A tall
   stack of five photos was the ugliest thing on the page. */
@media (max-width: 860px) {
  .moves-grid {
    display: flex;
    align-items: flex-start; /* never stretch a card, so no picture looks tall */
    gap: 14px;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .moves-grid::-webkit-scrollbar { display: none; }
  .move, .move--lead {
    flex: 0 0 72%;
    grid-column: auto; grid-row: auto;
    scroll-snap-align: start;
  }
  /* every photo in the rail is the same 4:5 box, whatever the file is */
  .move img, .move--lead img { aspect-ratio: 4 / 5; height: auto; flex: 0 0 auto; }
  .move__cap { margin-top: 12px; padding-top: 10px; }
  .move__title { font-size: 1.14rem; }
}
/* on a tablet the rail holds two photos with a third peeking, which reads
   better than one huge card per screen */
@media (min-width: 600px) and (max-width: 860px) {
  .move, .move--lead { flex: 0 0 44%; }
}

/* process — one full-bleed ink band, three ruled columns */
.process-section { border-top: 0; background: var(--ink); color: var(--cream); }
.process-section h2, .process-section h3 { color: var(--cream); }
.process-section p { color: var(--cream-dim); }
.process-section .eyebrow { color: var(--accent); }
.process-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.process-card {
  display: flex; flex-direction: column;
  padding: 0 var(--pad-x);
  border-right: 1px solid var(--line-dark);
}
.process-card:first-child { padding-left: 0; }
.process-card:last-child { border-right: 0; }
.process-card__media { position: relative; display: block; }
.process-card__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.process-card__phase {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(15, 17, 20, 0.88), rgba(15, 17, 20, 0));
  color: var(--cream);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 14px 16px 34px;
}
.process-card__body { padding: clamp(20px, 2.4vw, 28px) 0 clamp(26px, 3vw, 34px); color: var(--cream); display: flex; flex-direction: column; gap: 10px; }
.process-card__body h3 { margin: 0; }
.process-card__body p { margin: 0; }
.process-card__body ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; }
.process-card__body li { display: flex; align-items: center; gap: 10px; color: var(--cream); font-weight: 600; }
.process-card__body li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: 0 0 auto; }
.process-cta { margin-top: clamp(28px, 4vw, 42px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.process-cta__note { font-weight: 600; color: var(--cream-dim); margin: 0; }

/* why — four ruled facts in one clean row */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.why-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(22px, 2.6vw, 30px) var(--pad-x);
  border-right: 1px solid var(--line);
}
.why-card:first-child { padding-left: 0; }
.why-card:last-child { border-right: 0; }
.why-card .why-num { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }
.why-card h3 { margin: 0; }
.why-card p { color: var(--body); margin: 0; }

/* --------------------------------------------------------------------------
   10. AREAS + REGIONS
   -------------------------------------------------------------------------- */
.area-stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.area-stats .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.area-stats .stat { padding: 26px var(--pad-x); }
.area-stats .stat:first-child { padding-left: 0; }
.area-stats .stat:last-child { border-right: 0; }
.area-stats .stat__num { color: var(--text); }
.area-stats .stat__label { max-width: none; }

.area-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.area-split__media { position: relative; }
.area-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.area-split__chip {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(15, 17, 20, 0.92), rgba(15, 17, 20, 0));
  padding: 46px 16px 14px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--cream);
  letter-spacing: .08em; text-transform: uppercase;
}
.area-split__chip svg { color: var(--accent); flex: 0 0 auto; }

.areas-wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.area-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.area-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px var(--pad-x);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--text);
}
.area-pill:nth-child(odd) { padding-left: 0; }
.area-pill:nth-child(even) { border-right: 0; }
.area-pill:hover, .area-pill.active {  background: rgba(156, 248, 199, 0.38); color: var(--accent-deep); }
.area-pill small { font-weight: 700; color: var(--accent-deep); letter-spacing: .08em; }
.area-pill svg { color: var(--accent-deep); flex: 0 0 auto; }

.areas-panel { background: var(--ink); padding: clamp(26px, 3.4vw, 40px); color: var(--cream); display: flex; flex-direction: column; }
.areas-panel h3 { color: var(--cream); margin-bottom: 8px; }
.areas-panel p { color: var(--cream-dim); }
.areas-panel__stat {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--line-dark);
  font-weight: 600; color: var(--cream);
}
.areas-panel__stat svg { color: var(--accent); flex: 0 0 auto; }
.areas-panel .btn { margin-top: 26px; align-self: flex-start; }

.regions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.region-card { padding: 0 var(--pad-x); border-right: 1px solid var(--line); }
.region-card:first-child { padding-left: 0; }
.region-card:last-child { border-right: 0; }
.region-card__media { position: relative; display: block; overflow: hidden; }
.region-card__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.region-card__chip {
  position: absolute; top: 14px; left: 14px;
  color: var(--cream);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(15, 17, 20, .95);
}
.region-card__body { padding: clamp(18px, 2.4vw, 26px) 0 clamp(20px, 2.6vw, 28px); }
.region-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.region-card__pin { display: inline-flex; color: var(--accent-deep); flex: 0 0 auto; margin-top: 4px; }
.region-card__head h3 { margin: 0 0 4px; }
.region-card__head p { margin: 0; font-weight: 700; color: var(--accent-deep); letter-spacing: .1em; text-transform: uppercase; }
.region-card__cities { list-style: none; margin: 0; padding: 0; }
.region-card__cities li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  transition: padding-left .18s var(--ease);
}
.region-card__cities li:last-child { border-bottom: 0; }
.region-card__cities li::before { content: ""; width: 5px; height: 5px; background: var(--accent-deep); flex: 0 0 auto; }
.region-card__cities a { color: var(--text); display: block; width: 100%; }
.region-card__cities li:hover { padding-left: 8px; }
.region-card__cities li:hover a { color: var(--accent-deep); }

.regions-cta {
  margin-top: clamp(28px, 4vw, 44px);
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--ink);
  padding: clamp(26px, 4vw, 44px) max(var(--gutter), calc(50vw - 500px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.regions-cta__text h3 { color: var(--cream); margin: 0 0 6px; }
.regions-cta__text p { color: var(--cream-dim); margin: 0; max-width: 56ch; }
.regions-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   11. REVIEWS — ruled columns, one size
   -------------------------------------------------------------------------- */
.reviews-section { overflow: clip; }
.reviews-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0; }
.reviews-platforms a {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; color: var(--text);
  border-bottom: 2px solid var(--accent-deep);
  padding: 2px 0 4px;
}
.reviews-platforms a:hover { color: var(--accent-deep); }
.reviews-platforms a strong { color: var(--accent-deep); }
.reviews-platforms__note { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); }
.reviews-platforms__note svg { color: var(--accent-deep); }
.reviews-platforms .pill-stars { color: var(--star); letter-spacing: 2px; }
.rp-logo { display: inline-flex; align-items: center; justify-content: center; }
.reviews-platforms__wa { display: inline-flex !important; }
.reviews-note { text-align: center; font-weight: 600; margin: 26px 0 0; }
.reviews-note a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

.reviews-feed-wrap { padding-inline: var(--gutter); max-width: var(--page-max); margin-inline: auto; }
.reviews-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(26px, 3.4vw, 42px); border-top: 1px solid var(--line); }
.feed-card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.8vw, 32px) var(--pad-x);
  border-right: 1px solid var(--line);
}
.feed-card:first-child { padding-left: 0; }
.feed-card:nth-child(3n) { border-right: 0; }
.feed-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.feed-card__avatar {
  width: 42px; height: 42px; flex: 0 0 auto;
  background: var(--ink); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display);
}
.feed-card__who { min-width: 0; }
.feed-card__name { font-weight: 700; line-height: 1.3; color: var(--text); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.feed-card__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-deep);
}
.feed-card__badge--fb, .feed-card__badge--wa { color: var(--accent-deep); }
.feed-card__meta { color: var(--muted-t); font-weight: 600; margin: 2px 0 0; }
.feed-card__stars { margin-bottom: 12px; color: var(--star); letter-spacing: 2px; }
.feed-card__text { color: var(--body); margin: 0; flex: 1 1 auto; }
.feed-card__time {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--muted-t);
}
.feed-card__time time { color: var(--accent-deep); font-weight: 700; }
.feed-card__live { width: 7px; height: 7px; flex: 0 0 auto; background: var(--brand); animation: livePulse 2.4s var(--ease) infinite; }
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; border-top: 1px solid var(--line); }
.reviews-grid .review-card { width: auto; flex: none; }

/* --------------------------------------------------------------------------
   12. FAQ — numbered, ruled open
   -------------------------------------------------------------------------- */
.faq-wrap { display: grid; grid-template-columns: 1fr; max-width: 960px; border-top: 1px solid var(--line-strong); }
.faq-wrap--center { margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); counter-increment: faq-count; }
.faq-list-c { counter-reset: faq-count; }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 22px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700;
  color: var(--text); text-align: left; line-height: 1.25;
}
.faq-q::before {
  content: counter(faq-count, decimal-leading-zero);
  font-family: var(--font);
  font-weight: 700; color: var(--accent-deep);
  flex: 0 0 auto;
}
.faq-q svg { flex: 0 0 auto; color: var(--accent-deep); transition: transform .3s var(--ease); margin-left: auto; }
.faq-item.active .faq-q svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-item.active .faq-a { grid-template-rows: 1fr; }
.faq-a p { padding: 0 0 24px 42px; margin: 0; color: var(--body); }

/* --------------------------------------------------------------------------
   13. FINAL CTA — one full-bleed ink band
   -------------------------------------------------------------------------- */
.final-cta { border-top: 0; background: var(--ink); color: var(--cream); }
.final-cta__card { display: block; }
.final-cta__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.final-cta__copy h2 { color: var(--cream); margin-bottom: 14px; }
.final-cta__lead { color: var(--cream-dim); max-width: 52ch; margin: 0 0 24px; }
.final-cta__actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 26px 0 0;
  border-top: 1px solid var(--line-dark);
}
.final-cta__label { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
/* the phone number is NOT display type: Fraunces reads badly on digits, so it
   is set in the normal body face everywhere on the site */
.final-cta__number {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font); font-weight: 700; letter-spacing: 0; line-height: 1.2;
  color: var(--cream); font-size: var(--fs-h3);
}
.final-cta__number svg { color: var(--accent); }
.final-cta__number:hover { color: var(--accent); }
.final-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 2px; }
.final-cta__note { color: var(--cream-dim); font-weight: 600; }
.final-cta__or { color: var(--cream-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   14. FOOTER — flat ink, evenly spaced columns
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--cream-dim); padding-top: clamp(46px, 6vw, 74px); }
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: clamp(26px, 3.4vw, 48px);
  align-items: start;
  padding-bottom: clamp(34px, 4.4vw, 56px);
  border-bottom: 1px solid var(--line-dark);
}
.footer-logo { display: inline-block; margin-bottom: 18px; }
.footer-logo img { width: 160px; height: auto; }
.footer-col--brand p { max-width: 40ch; margin: 0; color: var(--cream-dim); }
/* The column titles sit ABOVE the reading size, not level with it. At --fs-label
   they were byte for byte the same size as the links, so "Our address", "Contact
   us" and "Our services" read as three more lines of the same grey block instead
   of as structure. They are 20px against 17.28px links now. */
.footer-col h4, .footer-col .footer-h {
  color: #fff; font-family: var(--font-display);
  font-size: 1.28rem; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 16px; font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { color: #EDF1ED; font-weight: 600; }
.footer-col a:hover { color: var(--accent); }
.footer__contact li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; line-height: 1.5; }
.footer__contact svg { color: var(--accent); flex: 0 0 auto; margin-top: 5px; }
.footer__contact a { color: var(--cream); font-weight: 700; }
.footer__contact a:hover { color: var(--accent); }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--cream); border: 1px solid var(--line-dark);
}
.footer__social a:hover { background: var(--green); border-color: var(--green); color: var(--ink); }
.footer__bottom {
  padding: 22px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 600;
}
.footer__bottom p { margin: 0; }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer__bottom a:hover { color: var(--accent); }
.footer__license {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  color: var(--cream-dim); display: flex; gap: 12px; align-items: flex-start;
}
.footer__license svg { color: var(--accent); flex: 0 0 auto; margin-top: 4px; }

/* Footer text sits one step BELOW the reading size so the column titles can sit
   above it and actually read as titles. Headings 20px / body 16px / fine print
   15.2px — a 25% step at every width, instead of the dead level it was before,
   where headings and links were both 17.28px and read as one grey block. */
.footer-col a,
.footer-col--brand p,
.footer__contact li { font-size: 1rem; }
.footer__license,
.footer__bottom { font-size: .98rem; color: #D6DDD6; }

/* --------------------------------------------------------------------------
   15. INNER PAGE HERO + BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
  padding: 18px 0 0; font-weight: 700;
  color: var(--cream-dim); display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  letter-spacing: .08em; text-transform: uppercase;
}
.breadcrumb a { color: var(--cream-dim); }
.breadcrumb a:hover { color: var(--cream); }
.breadcrumb .sep { color: var(--accent); }
.breadcrumb .current { color: var(--cream); }

.page-hero { background: var(--ink); padding: clamp(40px, 5vw, 76px) 0 clamp(34px, 4.4vw, 58px); }
.page-hero__inner { max-width: 960px; }
.page-hero h1 { color: var(--cream); margin-bottom: 16px; }
.page-hero .lead { color: var(--cream-dim); max-width: 74ch; margin-bottom: 26px; }
.page-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.page-hero__cta .phone-note { font-weight: 600; color: var(--cream-dim); }

/* --------------------------------------------------------------------------
   16. PROSE — article / service / area body
   -------------------------------------------------------------------------- */
.prose { max-width: 860px; margin-inline: auto; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.5em; }
.prose p, .prose ul, .prose ol { color: var(--body); }
.prose li { margin-bottom: .65em; }
.prose strong { color: var(--text); }
.prose img { margin: 28px 0; width: 100%; }
.prose a { font-weight: 700; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-deep); }

.prose blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 24px;
  border-left: 4px solid var(--accent);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4);
  color: var(--text); line-height: 1.4;
}
.prose blockquote p { color: inherit; font-size: inherit; }

.prose .note {
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  padding: 16px 0; font-weight: 700; color: var(--accent-deep); margin: 1.6em 0;
}
.prose .ticks { list-style: none; padding: 0; display: grid; gap: 12px; }
.prose .ticks li { display: flex; align-items: flex-start; gap: 12px; }
.prose .ticks svg { color: var(--accent-deep); flex: 0 0 auto; margin-top: 5px; }

/* facts -> a ruled row of plain figures */
.facts-box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin: 30px 0; }
.fact {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px var(--pad-x);
  border-right: 1px solid var(--line);
}
.fact:first-child { padding-left: 0; }
.fact:last-child { border-right: 0; }
.fact__ic { display: inline-flex; color: var(--accent-deep); margin-bottom: 8px; }
.fact__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.2; color: var(--text); }
.fact__label { font-weight: 700; color: var(--muted-t); text-transform: uppercase; letter-spacing: .1em; }

/* in-article CTA prints as a full-bleed ink band */
.cta-banner {
  background: var(--ink); color: var(--cream);
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(28px, 3.6vw, 44px) max(var(--gutter), calc(50vw - 430px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: clamp(34px, 4vw, 52px); margin-bottom: clamp(34px, 4vw, 52px);
}
.cta-banner h2 { color: var(--cream); margin-bottom: 6px; }
.cta-banner p { color: var(--cream-dim); margin: 0; }

.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.rl-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px var(--pad-x);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--text);
}
.rl-card:nth-child(odd) { padding-left: 0; }
.rl-card:nth-child(even) { border-right: 0; }
.rl-card:hover {  background: rgba(156, 248, 199, 0.38); color: var(--accent-deep); }
.rl-card strong { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; }
.rl-card small { color: var(--muted-t); font-weight: 600; }
.rl-card--area .na-code { font-weight: 700; color: var(--accent-deep); letter-spacing: .12em; text-transform: uppercase; }

.neighbour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin: 26px 0; }
.neighbour-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px var(--pad-x);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-weight: 700; color: var(--text);
}
.neighbour-link:nth-child(4n+1) { padding-left: 0; }
.neighbour-link:nth-child(4n) { border-right: 0; }
.neighbour-link:hover {  background: rgba(156, 248, 199, 0.38); color: var(--accent-deep); }
.neighbour-link small { color: var(--muted-t); font-weight: 600; }

.local-resources {
  margin: 30px 0; padding: 18px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--body);
}

/* --------------------------------------------------------------------------
   17. BLOG
   -------------------------------------------------------------------------- */
.blog-grid, .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.post-card {
  display: flex; flex-direction: column; padding: 0 var(--pad-x) 26px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.post-card:nth-child(3n+1) { padding-left: 0; }
.post-card:nth-child(3n) { border-right: 0; }
.post-card__img, .post-card__media { display: block; overflow: hidden; }
.post-card__img img, .post-card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.post-card__body { padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__meta { font-weight: 700; color: var(--accent-deep); letter-spacing: .1em; text-transform: uppercase; }
.post-card__title, .post-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin: 0; line-height: 1.15; display: block; }
.post-card p { color: var(--body); margin: 0; }
.post-card .btn { margin-top: auto; align-self: flex-start; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
  font-weight: 700; color: var(--muted-t);
  letter-spacing: .08em; text-transform: uppercase;
}
.article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.article-meta svg { color: var(--accent-deep); }

.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; }
.prose th, .prose td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.prose th { color: var(--text); font-weight: 700; border-bottom: 2px solid var(--ink); }
.prose tr:last-child td { border-bottom: 0; }
.prose .table-wrap { border: 1px solid var(--line); overflow: hidden; overflow-x: auto; margin: 1.6em 0; }

/* --------------------------------------------------------------------------
   18. FORMS (book online)
   -------------------------------------------------------------------------- */
.form-card { max-width: 880px; margin-inline: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.form-field { margin-bottom: 2px; }
.form-field--full { grid-column: 1 / -1; }
.form-label { display: block; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; color: var(--muted-t); }
.form-label span { color: var(--accent-deep); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--line-strong); background: none;
  font-family: var(--font); font-size: var(--fs-body); font-weight: 600; color: var(--text);
  transition: border-color .18s var(--ease);
  appearance: none;
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 24 24' fill='none' stroke='%2323262B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center;
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-bottom-color: var(--accent-deep); border-bottom-width: 2px; }
.form-hint { color: var(--muted-t); font-weight: 600; margin-top: 8px; }
.form-msg { display: none; align-items: flex-start; gap: 11px; padding: 14px 0 14px 16px; border-left: 3px solid var(--accent-deep); font-weight: 600; color: var(--accent-deep); margin-top: 20px; }
.form-msg.show { display: flex; }
.form-msg svg { flex: 0 0 auto; margin-top: 4px; }

.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.how-step { padding: 22px var(--pad-x); border-right: 1px solid var(--line); }
.how-step:first-child { padding-left: 0; }
.how-step:last-child { border-right: 0; }

/* --------------------------------------------------------------------------
   19. 404 + LEGAL
   -------------------------------------------------------------------------- */
.notfound { text-align: center; padding: clamp(60px, 9vw, 120px) 0; }
.notfound .big { font-size: clamp(6rem, 18vw, 10rem); line-height: 1; color: var(--line); letter-spacing: -0.04em; }
.notfound h1 { margin: -.55em 0 14px; }
.legal { max-width: 820px; margin-inline: auto; }
.legal h2 { margin-top: 1.8em; }
.legal p, .legal li { color: var(--body); }
.legal .legal-updated { font-weight: 700; color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   20. REVEAL + FLOATING ACTIONS
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

.hero-anim { animation: heroIn .75s var(--ease) both; }
.hero-anim.in { animation: none; opacity: 1; transform: none; }
.hero-anim-1 { animation-delay: .05s; }
.hero-anim-2 { animation-delay: .12s; }
.hero-anim-3 { animation-delay: .2s; }
.hero-anim-4 { animation-delay: .3s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.to-top {
  position: fixed; right: 18px; bottom: 84px; z-index: 80;
  width: 48px; height: 48px; border: 0;
  background: var(--ink); color: var(--cream); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s var(--ease), visibility .25s, transform .25s var(--ease);
  box-shadow: none;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand); color: var(--ink); }

/* WhatsApp used to float over the page on its own. It now lives in the sticky
   booking bar as a proper action, so this rule only guards against the old
   markup (still shipped on the generated pages) showing up again. */
.wa-float { display: none !important; }

/* --------------------------------------------------------------------------
   20B. STICKY BOOKING BAR — crisp dark band with call + reserve CTA
   -------------------------------------------------------------------------- */
/* always on, on every page: this is the site-wide way to book, so it never
   waits for a scroll. script.js adds it to pages that do not ship the markup
   and reserves body padding so it never covers the footer. */
.sticky-booking {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  padding: 12px var(--gutter);
  transform: translateY(0);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}
.sticky-booking.show {
  transform: translateY(0);
}
body.has-sticky-bar { padding-bottom: 72px; }
.sticky-booking__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sticky-booking__text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  font-family: var(--font);
}
.sticky-booking__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-light);
  display: inline-block;
  animation: livePulse 2s infinite ease-in-out;
}
.sticky-booking__text strong {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: #fff;
}
.sticky-booking__sub {
  color: var(--cream-dim);
  font-size: .95rem;
  font-weight: 500;
}
.sticky-booking__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sticky-booking__quote {
  padding: 10px 20px;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.sticky-booking__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--green-light);
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  transition: background-color .18s var(--ease);
}
.sticky-booking__call:hover {
  background: #fff;
  color: var(--ink);
}
.sticky-booking__call svg {
  color: var(--ink);
}
/* the secondary action of the bar: quiet outline, so the green fill stays the
   loudest thing on the band */
.sticky-booking__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(156, 248, 199, .45);
  color: var(--green-light);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.sticky-booking__wa:hover, .sticky-booking__wa:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
}
.sticky-booking__wa svg { flex: 0 0 auto; }
/* nothing in the bar may wrap — a wrapping label makes the band twice as tall */
.sticky-booking__wa, .sticky-booking__quote, .sticky-booking__call,
.sticky-booking__text strong, .sticky-booking__sub { white-space: nowrap; }

@media (max-width: 768px) {
  body.has-sticky-bar { padding-bottom: 62px; }
  .sticky-booking {
    padding: 10px 14px;
  }
  .sticky-booking__quote {
    display: none;
  }
  .sticky-booking__wa {
    padding: 9px 11px;
  }
  .sticky-booking__wa span {
    display: none;
  }
  .sticky-booking__call {
    padding: 9px 13px;
    font-size: .92rem;
  }
}

/* on a phone the bar stays readable: the pitch holds the left, the WhatsApp
   icon and the number sit together on the right, and nothing wraps */
@media (max-width: 1040px) {
  .sticky-booking { padding: 10px 14px; }
  .sticky-booking__inner { gap: 10px; }
  .sticky-booking__text { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .sticky-booking__text strong {
    font-size: clamp(.8rem, 2.6vw, .95rem);
    overflow: hidden; text-overflow: ellipsis;
  }
  .sticky-booking__sub { display: none; }
  .sticky-booking__dot { width: 7px; height: 7px; }
  .sticky-booking__actions { flex: 0 0 auto; gap: 8px; }
  .sticky-booking__quote { display: none; }
}

@media (max-width: 480px) {
  .sticky-booking__call span { font-size: .84rem; }
  .sticky-booking__call { padding: 9px 11px; gap: 6px; }
  .sticky-booking__wa { padding: 9px 10px; }
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .header-nav { display: none; }
  .header-call { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn { display: none; }
  .header-actions .header-call-mobile { display: inline-flex; }
}

@media (max-width: 1080px) {
  /* ------------------------------------------------------------------------
     MOBILE HERO: the field colour takes the whole top of the page and the grid
     stacks title -> selector -> form -> ticker. Ink type everywhere; nothing
     small sits on the field except the uppercase ticker, which is set bold.
     ------------------------------------------------------------------------ */
  .hero {
    border-top: 1px solid rgba(0, 0, 0, .18);
  }

  /* the top bar takes the hero's own green, so the page opens as one
     continuous mint block and the logo knocks back to ink on it */
  .site-header { background: var(--brand); border-bottom-color: rgba(26, 28, 26, .14); }
  .site-header.is-scrolled { border-bottom-color: rgba(26, 28, 26, .3); }
  .header-strip { background: var(--strip); color: var(--ink); font-size: 1.02rem; font-weight: 800; border-bottom: 1px solid rgba(26, 28, 26, .18); }
  .header-strip__item svg { color: var(--ink); }
  .header-strip__sep { background: rgba(26, 28, 26, .32); }
  .nav-toggle { color: var(--ink); border-color: rgba(26, 28, 26, .28); }
  .nav-toggle:hover { background: var(--ink); color: var(--brand); border-color: var(--ink); }
  .header-call-mobile { background: var(--ink); color: var(--brand); }
  .header-call-mobile:hover { background: #fff; color: var(--ink); }
  /* the logo is drawn for a dark bar, so on the mint field it is knocked to ink */
  .header-logo img { filter: brightness(0); opacity: .88; }

  /* hero stacks: masthead, then the van with the four choices on its tyres,
     then the coupon. Left-aligned throughout, like a printed front page. */
  .hero__inner {
    display: flex; flex-direction: column;
    /* the stacked layout must stretch its children — the grid rule above
       starts them instead, which left the tiles content-sized */
    align-items: stretch;
    padding-top: clamp(28px, 4.6vw, 48px);
    padding-bottom: 84px; /* clears the marquee */
    position: relative; z-index: 2;
  }
  .hero__content { display: contents; }
  .hero__intro { order: 1; align-self: stretch; }
  .hero__visual { order: 2; }
  .hero__form { order: 3; }
  /* stacked, the van can afford to be generous again */
  .hero__van { width: min(100%, 430px); }
  .hero__panel { margin-top: -3vw; }

  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-card:nth-child(2n) { border-right: 0; }
  .why-card:nth-child(2n+1) { padding-left: 0; }
  .stats-grid, .area-stats .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(2n+1) { padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .feed-card:nth-child(2n) { border-right: 0; }
  .feed-card:nth-child(2n+1) { padding-left: 0; }
  .regions-grid { grid-template-columns: 1fr; }
  .region-card { padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .region-card:last-child { border-bottom: 0; }
  .region-card__body { padding-left: 0; }
  .related-grid { grid-template-columns: 1fr; }
  .rl-card { border-right: 0; padding-left: 0; }
  .facts-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(2n) { border-right: 0; }
  .neighbour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .neighbour-link:nth-child(4n) { border-right: 1px solid var(--line); }
  .neighbour-link:nth-child(2n) { border-right: 0; }
  .neighbour-link:nth-child(2n+1) { padding-left: 0; }
  .blog-grid, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .post-card:nth-child(2n) { border-right: 0; }
  .post-card:nth-child(2n+1) { padding-left: 0; }
  .review-card { border-right: 0; }
  .area-split, .areas-wrap, .final-cta__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .process-row { grid-template-columns: 1fr; }
  .process-card { padding: 0; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .process-card:last-child { border-bottom: 0; }
  .svc__cards { grid-template-columns: 1fr; }
  .svc-card { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }
  .svc-card:last-child { border-bottom: 0; }
  .svc-card__badge { right: 0; }
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .neighbour-grid { grid-template-columns: 1fr; }
  .neighbour-link { padding-left: 0; border-right: 0; }
  .how-grid { grid-template-columns: 1fr; }
  .how-step { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .how-step:last-child { border-bottom: 0; }
  .area-stats .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   21. NEW COMPONENT STYLES
   -------------------------------------------------------------------------- */

/* Problems section */
.problems-section {
  border-top: 1px solid var(--line);
}
.problems-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pad-x);
}
.problem-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 2.8vw, 34px) var(--pad-x);
  background: var(--paper);
  border: 0;
  border-top: 2px solid var(--line);
}
.problem-icon {
  display: inline-flex;
  color: var(--accent-deep);
  flex-shrink: 0;
}
.problem-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}
.problem-card p {
  color: var(--body);
  margin: 0;
  line-height: 1.6;
}

/* What's Included Free */
.included-free {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
}
.included-free__title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 16px;
}
.included-free__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.included-free__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--body);
  line-height: 1.5;
}
.included-free__list svg {
  color: var(--accent-deep);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Work with us — the hero's mint band carried down the page, then six rows in
   one open editorial list: number, rule, heading, copy. No cards, no boxes,
   nothing wrapped around the text. Composition borrowed from the Aspen
   divide-x / divide-y grid language and the mepro trade grid. */
.work-section {
  background:
    radial-gradient(115% 78% at 88% -12%, #CBFFE4 0%, rgba(203, 255, 228, 0) 58%),
    linear-gradient(170deg, #ABFCD4 0%, #9CF8C7 44%, #89F2B9 100%);
  border-top: 0;
  --accent: var(--ink);
  --accent-deep: var(--ink);
  --focus: var(--ink);
}
.work-section .eyebrow { color: var(--ink); }
.work-section .eyebrow::before { background: var(--ink); border-color: var(--ink); }
.work-head {
  max-width: 1000px;
  margin-bottom: clamp(30px, 3.6vw, 52px);
}
.work-head h2 { max-width: 22ch; margin-bottom: 18px; }
.work-lead {
  color: rgba(26, 28, 26, 0.78);
  max-width: 66ch;
  margin: 0;
  line-height: 1.6;
}
/* six rows, separated by hairlines only */
.work-grid {
  counter-reset: work;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(26, 28, 26, 0.22);
}
.work-card {
  position: relative;
  padding: clamp(22px, 2.4vw, 34px) 0 clamp(22px, 2.4vw, 32px);
  border-bottom: 1px solid rgba(26, 28, 26, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.work-card:nth-child(odd) {
  padding-right: clamp(22px, 3vw, 56px);
  border-right: 1px solid rgba(26, 28, 26, 0.22);
}
.work-card:nth-child(even) { padding-left: clamp(22px, 3vw, 56px); }
/* the number is set in the rule, never boxed */
.work-card::before {
  counter-increment: work;
  content: counter(work, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  color: rgba(26, 28, 26, 0.6);
}
.work-card__icon {
  position: absolute;
  top: clamp(22px, 2.4vw, 34px);
  right: 0;
  display: inline-flex;
  color: var(--ink);
  opacity: .55;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.work-card:nth-child(odd) .work-card__icon { right: clamp(22px, 3vw, 56px); }
.work-card:hover .work-card__icon { opacity: 1; transform: translateX(3px); }
.work-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.6vw, 1.42rem);
  line-height: 1.13;
  letter-spacing: -0.032em;
  margin: 0;
  max-width: 24ch;
  padding-right: 34px;
}
.work-card p {
  margin: 0;
  color: rgba(26, 28, 26, 0.8);
  line-height: 1.6;
  max-width: 48ch;
}
.work-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(30px, 3.4vw, 46px);
}
.work-section .btn--orange:hover { background: #fff; color: var(--ink); }

/* Responsive for new components */
@media (max-width: 1024px) {
  .problems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .included-free__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .problems-grid { grid-template-columns: 1fr; }
  .included-free__list { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  /* one column, so the inner vertical rule goes with it */
  .work-card:nth-child(odd) { padding-right: 0; border-right: 0; }
  .work-card:nth-child(even) { padding-left: 0; }
  .work-card:nth-child(odd) .work-card__icon { right: 0; }
}

/* Reduced motion for new components */
@media (prefers-reduced-motion: reduce) {
  .problems-grid, .included-free__list, .work-grid {
    animation: none;
  }
}

@media (max-width: 720px) {
  /* the announcement strip is desktop-only. On phones the top bar itself takes
     the hero's green, so the page opens as one continuous mint block. */
  .header-strip { display: none; }
  .site-header { background: var(--brand); border-bottom-color: rgba(26, 28, 26, .14); }
  .site-header.is-scrolled { border-bottom-color: rgba(26, 28, 26, .3); }
  /* the logo is drawn for a dark bar, so on the mint field it is knocked to ink */
  .header-logo img { height: 52px; filter: brightness(0); opacity: .88; }
  .nav-toggle { color: var(--ink); border-color: rgba(26, 28, 26, .28); }
  .nav-toggle:hover, .nav-toggle:focus-visible { background: var(--ink); color: var(--brand); border-color: var(--ink); }
  .header-call-mobile { background: var(--ink); color: var(--brand); }
  .header-call-mobile:hover { background: #fff; color: var(--ink); }
  .header-bar { min-height: 62px; padding-block: 9px; }
  .header-actions { gap: 8px; }
  .nav-toggle, .header-call-mobile { width: 42px; height: 42px; }

  /* fine print on ONE line. The wording is tightened on purpose: the original
     92-character sentence cannot fit 304px above roughly 6px, which is not
     readable. This is the one deliberate exception to the single reading size. */
  .hero__privacy { font-size: .81rem; line-height: 1.45; color: rgba(25, 27, 30, .8); }

  /* one column on a phone: masthead, then the van with the four choices on its
     tyres, then the coupon — so the form sits high on the page */
  .hero__inner { padding-top: 20px; padding-bottom: 82px; }
  .hero__display { gap: 8px; text-align: left; }
  .hero__van { width: min(100%, clamp(232px, 62vw, 340px)); }
  .hero__panel { margin-top: -4vw; width: min(100%, 480px); }
  /* the bloom shrinks with the van: wheels only, never under the boxes */
  .hero__cloud { width: 84%; height: 28%; }
  /* the 2x2 grid holds: four choices beat a tall stack */
  .hero__selector { gap: 8px; }
  .hero__cat { min-height: clamp(92px, 24vw, 112px); padding: 12px 12px 30px; }
  .hero__cat-name { font-size: clamp(1.02rem, 3.9vw, 1.18rem); padding-right: 0; }
  .hero__cat-arrow { right: 10px; bottom: 8px; }
  .hero__form { padding: 20px 16px; }
  .hero__marquee li + li::before { margin-left: 24px; margin-right: 24px; }

  .section { padding-block: 44px; }
  .svc__pills { grid-template-columns: 1fr; }
  .svc-pill { border-right: 0; padding-left: 0; }
  .svc-pill:last-child, .svc-pill:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .svc-pill:last-child { border-bottom: 0; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }
  .why-card:last-child { border-bottom: 0; }
  .stats-grid, .area-stats .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .area-stats .stat { border-right: 0; padding-left: 0; }
  .reviews-feed { grid-template-columns: 1fr; }
  .feed-card { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--line); }
  .feed-card:last-child { border-bottom: 0; }
  .reviews-grid { grid-template-columns: 1fr; }
  .area-pills { grid-template-columns: 1fr; }
  .area-pill { border-right: 0; padding-left: 0; }
  .facts-box { grid-template-columns: 1fr; }
  .fact { border-right: 0; padding-left: 0; }
  .blog-grid, .post-grid { grid-template-columns: 1fr; }
  .post-card { border-right: 0; padding-left: 0; }
  .related-grid { grid-template-columns: 1fr; }
  /* The footer steps down one size on phones. It is the one block on the page
     with nothing to read, and at full reading size the column headings, the links
     and the legal line all shouted at exactly the same volume — that is what made
     it feel cluttered. The headings become small caps labels instead of competing
     headings. This is a deliberate exception to the single reading size. */
  .footer-top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 30px; }
  /* on phones the links are already down to 15.2px, so the titles only have to
     clear that: 19.2px against 15.2px, a 26% step instead of a 16% deficit */
  .footer-col h4, .footer-col .footer-h { font-size: 1.2rem; letter-spacing: .12em; margin-bottom: 12px; }
  .footer-col ul { gap: 8px; }
  .footer-col a,
  .footer-col--brand p,
  .footer__contact li { font-size: .95rem; }
  .footer__license { font-size: .9rem; margin-top: 16px; padding-top: 16px; }
  .footer-logo { margin-bottom: 14px; }
  .footer-logo img { width: 128px; }
  .footer__social { margin-top: 16px; }
  .footer__social a { width: 40px; height: 40px; }
  .footer__bottom { justify-content: flex-start; padding: 16px 0; font-size: .875rem; }
  .footer__bottom ul { gap: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-banner, .regions-cta { padding-inline: var(--gutter); }
  .faq-a p { padding-left: 0; }
}

@media (max-width: 480px) {
  /* 2x2 still holds at 320px: each card is ~137px, enough for the service
     names, and the grid stays the neatest way to show the four choices */
  .hero__selector { gap: 8px; }
  .hero__van-wrap { max-width: min(100%, 320px); }
  .hero__cat { min-height: clamp(92px, 28vw, 112px); padding: 11px 11px 30px; }
  .hero__cat-no { font-size: .72rem; }
  .hero__cat-arrow { right: 10px; bottom: 9px; }
}

/* --------------------------------------------------------------------------
   22. REDUCED MOTION (kept last so it always wins over the animation rules)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero__marquee { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .marquee__track { flex-wrap: wrap; justify-content: center; width: 100%; gap: 4px 12px; }
  .marquee__dot { margin: 0 8px; }
}

/* ==========================================================================
   WORDPRESS BLOCKS
   Added when the site became a theme. Used by the HTML sitemap, the search
   results, and the templates that draw content written in the editor later.
   Same language as the rest of the site: flat, hairline rules, no boxes.
   ========================================================================== */

.mb-list {
  list-style: none;
  margin: 0 0 38px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.mb-list li {
  display: grid;
  gap: 5px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.mb-list a {
  justify-self: start;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  text-decoration: none;
  border-bottom: 2px solid var(--brand);
}
.mb-list a:hover { border-bottom-color: var(--ink); }
.mb-list span {
  color: var(--muted-t);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 92ch;
}
.mb-list__kind {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (min-width: 760px) {
  /* Search results get a label rail down the left so the page name lines up
     with every other page name above and below it. */
  .mb-list--results li {
    grid-template-columns: 136px minmax(0, 1fr);
    column-gap: 24px;
    align-items: baseline;
  }
  .mb-list--results .mb-list__kind { padding-top: 4px; }
  .mb-list--results a,
  .mb-list--results span { grid-column: 2; }
}

/* --- search form ---------------------------------------------------------- */

.mb-search {
  margin: 0 0 44px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.mb-search__label {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.mb-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mb-search__field {
  flex: 1 1 260px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.mb-search__field:focus {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.mb-search__note {
  margin: 0 0 30px;
  color: var(--muted-t);
}

/* --- post lists ----------------------------------------------------------- */

.mb-loop {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.mb-loop__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.mb-loop__meta {
  margin: 0 0 9px;
  color: var(--muted-t);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mb-loop__title {
  margin: 0 0 9px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.15;
}
.mb-loop__title a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--brand);
}
.mb-loop__title a:hover { border-bottom-color: var(--ink); }
.mb-loop__excerpt {
  margin: 0 0 12px;
  max-width: 74ch;
  color: var(--body);
  line-height: 1.62;
}
.mb-loop__more {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
}

@media (min-width: 900px) {
  .mb-loop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 52px;
  }
}

/* --- pagination ----------------------------------------------------------- */

.mb-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-top: 26px;
}
.mb-pager a,
.mb-pager span {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.mb-pager a { border-bottom: 2px solid var(--brand); }
.mb-pager a:hover { border-bottom-color: var(--ink); }
.mb-pager .current { border-bottom: 3px solid var(--ink); }

/* --- odds and ends -------------------------------------------------------- */

.mb-tags {
  margin: 30px 0 0;
  color: var(--muted-t);
  font-size: 0.95rem;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}