/* ==========================================================================
   PrimeGuard Removals — site styles
   Direction: the premium end of the removals trade. Deep navy ground taken
   from the shield in the logo, one green accent from the leaf, serif display
   type for weight and a plain sans for everything you actually have to read.
   ========================================================================== */

:root {
  /* Colour ------------------------------------------------------------- */
  --navy-900: #0d1728;   /* ground — the darkest surface, near-black navy */
  --navy-850: #101d33;
  --navy-800: #14213d;   /* raised surface on dark */
  --navy-700: #1b2c4f;
  --navy-600: #233a68;
  --navy-crest: #102e60; /* sampled from the shield in the logo */
  --navy-300: #93a4c4;   /* muted text on dark — 7.13:1 on --navy-900 */

  --paper:   #f5f7fa;    /* page surface */
  --paper-2: #e8ecf3;    /* sunken surface on light */
  --line:    #ccd4e0;

  --green:      #57c93f; /* accent — the leaf. 8.4:1 against --navy-900 */
  --green-lift: #6bd854; /* hover only */
  /* Green for text on light surfaces. Must clear WCAG AA (4.5:1) against BOTH
     --paper and the darker --paper-2, or eyebrows fail on sunken sections.
     #1c6e29 = 5.91 on paper, 5.35 on paper-2. */
  --green-deep: #1c6e29;

  --ink:   #0d1728;
  --muted: #55627a;      /* 5.73:1 on paper, 5.19:1 on paper-2 */

  /* Type ---------------------------------------------------------------- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'Roboto Mono', ui-monospace, 'Cascadia Mono', monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.55rem + 2vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.75rem + 3.2vw, 4.6rem);

  /* Layout -------------------------------------------------------------- */
  --wrap: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --header-h: 70px;
  --callbar-h: 62px;   /* mobile sticky call bar */
  --radius: 5px;
}

/* Reset -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 60;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; font-variation-settings: 'opsz' 144; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-variation-settings: 'opsz' 30; letter-spacing: -0.005em; }
p  { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 0; top: 0;
  padding: 0.7rem 1.1rem;
  background: var(--green); color: var(--navy-900);
  font-weight: 700; z-index: 200;
  transform: translateY(-110%);
}
.skip-link:focus { transform: translateY(0); }

/* Utilities ---------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Eyebrow: a docket label, not decoration. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px;
  background: var(--green); flex: none;
}
.on-dark .eyebrow { color: var(--green); }

.lede { font-size: var(--step-1); line-height: 1.45; color: var(--muted); max-width: 58ch; }
.on-dark .lede { color: var(--navy-300); }

/* Display-weight opening line for a section whose real headings are the h2s
   inside it — the services block, where each service carries its own h2 and a
   wrapping "Services" heading would push those down a level. */
.statement {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: 'opsz' 90;
  font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink); max-width: 26ch;
}
.on-dark .statement { color: var(--paper); }

.section { padding-block: clamp(3.25rem, 8vw, 6.5rem); }
.section-dark { background: var(--navy-900); color: var(--paper); }
.section-sunk { background: var(--paper-2); }
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--green); color: var(--navy-900); border-color: var(--green); }
.btn-primary:hover { background: var(--green-lift); border-color: var(--green-lift); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.on-dark .btn-ghost { color: var(--paper); border-color: rgba(245, 247, 250, 0.45); }
.on-dark .btn-ghost:hover { background: var(--paper); color: var(--navy-900); border-color: var(--paper); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-arrow { transition: transform 0.15s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* WhatsApp keeps a green of its own — people scan for it — but a deeper one
   than the brand accent. WhatsApp's own #25D366 with white text lands at 2.4:1,
   which fails AA at this text size; #12803c clears it at 5.02:1. */
.btn-wa { background: #12803c; color: #fff; border-color: #12803c; }
.btn-wa:hover { background: #0f6c32; border-color: #0f6c32; }

/* Header ------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13, 23, 40, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(245, 247, 250, 0.12);
  color: var(--paper);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--header-h);
}
.logo {
  display: inline-flex; align-items: center; gap: 0.65rem;
  text-decoration: none; color: var(--paper);
}
.logo-mark { width: 34px; height: 40px; flex: none; }
.logo-text { display: grid; line-height: 1; }
.logo-name {
  font-family: var(--display); font-weight: 800; font-variation-settings: 'opsz' 90;
  font-size: 1.28rem; letter-spacing: -0.02em;
}
.logo-name em { font-style: normal; color: var(--green); }
.logo-sub {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--navy-300); margin-top: 0.28rem;
}

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.75rem); }
.nav-link {
  text-decoration: none; font-size: 0.95rem; font-weight: 500;
  color: var(--paper); opacity: 0.82; white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-current='page'] { opacity: 1; color: var(--green); }
.nav .btn { padding: 0.6rem 1.05rem; font-size: 0.93rem; }
.nav-phone {
  font-family: var(--mono); font-weight: 500; font-size: 0.95rem;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.nav-phone:hover { color: var(--green); }
.nav-phone svg { width: 15px; height: 15px; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 0.4rem;
  color: var(--paper); cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* 1000, not 900: the Guides link pushed the desktop nav to within 16px of the
   logo at the old breakpoint. The call bar below uses the same value so the two
   mobile affordances always appear together. */
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(245, 247, 250, 0.14);
    padding: 0.5rem var(--gutter) 1.4rem;
    transform: translateY(-140%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav[data-open='true'] { transform: translateY(0); }
  .nav-link { padding: 0.85rem 0; border-bottom: 1px solid rgba(245, 247, 250, 0.1); opacity: 1; }
  .nav-phone { padding: 0.95rem 0; }
  .nav .btn { margin-top: 1rem; }
}

/* Anchor targets must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Hero --------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--navy-900); color: var(--paper);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* Framed on the van and the boxes, not on the kerbside figure. */
  object-position: 62% center;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      var(--navy-900) 0%,
      rgba(13, 23, 40, 0.97) 42%,
      rgba(13, 23, 40, 0.80) 68%,
      rgba(13, 23, 40, 0.58) 100%),
    linear-gradient(to top, rgba(13, 23, 40, 0.9) 0%, rgba(13, 23, 40, 0) 45%);
}
.hero-grid {
  display: grid; gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { object-position: 72% center; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(13, 23, 40, 0.94) 0%, rgba(13, 23, 40, 0.9) 55%, rgba(13, 23, 40, 0.97) 100%);
  }
}

.hero h1 { margin-bottom: 1.3rem; }
.hero h1 .hl { color: var(--green); }
.hero-sub { font-size: var(--step-1); color: var(--navy-300); max-width: 48ch; margin-bottom: 1.9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.9rem; }
/* Three CTAs at three different widths reads as clutter on a phone. Stack them
   full-width instead — they are the whole point of the hero on mobile. */
@media (max-width: 600px) {
  .hero-actions, .service-actions { flex-direction: column; align-items: stretch; }
}

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-family: var(--mono); font-size: var(--step--1);
  color: var(--navy-300); letter-spacing: 0.02em;
  padding: 1.4rem 0 0; margin: 0;
  border-top: 1px solid rgba(245, 247, 250, 0.16);
}
.hero-facts li { list-style: none; }
.hero-facts li::before { content: '✓ '; color: var(--green); }

/* Signature element: the quote docket. A worked example of the quote you get,
   labelled as a sample. It is not a price list and must never read as one. */
.docket {
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  max-width: 400px; margin-inline: auto; width: 100%;
}
.docket-top {
  background: var(--green); color: var(--navy-900);
  padding: 0.6rem 1.1rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
}
.docket-body { padding: 1.25rem 1.35rem 1.4rem; }
.docket-title {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: 'opsz' 30;
  font-size: 1.3rem; line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
}
.docket-rows { margin: 0 0 1.1rem; display: grid; gap: 0.55rem; }
.docket-rows div {
  display: grid; grid-template-columns: 92px 1fr; gap: 0.75rem;
  font-size: 0.92rem; align-items: baseline;
}
.docket-rows dt {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.docket-rows dd { margin: 0; font-weight: 600; }
.docket-note {
  font-size: 0.8rem; color: var(--muted); line-height: 1.45;
  border-top: 1px dashed var(--line); padding-top: 0.85rem;
}

/* Trust bar ---------------------------------------------------------------- */
.trust {
  background: var(--navy-800); color: var(--paper);
  border-block: 1px solid rgba(245, 247, 250, 0.1);
}
.trust-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: 0; padding: 0; list-style: none;
  background: rgba(245, 247, 250, 0.1);
}
@media (max-width: 900px) { .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .trust-list { grid-template-columns: 1fr; } }
.trust-list li {
  background: var(--navy-800);
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1.15rem clamp(0.9rem, 2vw, 1.5rem);
}
.trust-list svg { width: 26px; height: 26px; flex: none; color: var(--green); }
.trust-list b { display: block; font-size: 0.98rem; font-weight: 700; line-height: 1.25; }
.trust-list span { display: block; font-size: 0.82rem; color: var(--navy-300); line-height: 1.35; }

/* Badge shelf — real credentials go here once supplied. */
.badge-shelf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 1rem 0 0; margin: 1.5rem 0 0; list-style: none;
  border-top: 1px solid rgba(245, 247, 250, 0.14);
}
.badge-shelf li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy-300);
  border: 1px dashed rgba(245, 247, 250, 0.3);
  border-radius: 3px; padding: 0.42rem 0.8rem;
}
/* Dashed = still pending. Solid = confirmed and safe to publish. The visual
   difference is the point: it should be obvious at a glance which claims are
   backed by something. */
.badge-shelf li.is-confirmed {
  border-style: solid;
  border-color: rgba(87, 201, 63, 0.55);
  color: var(--paper);
}
.badge-shelf li.is-confirmed svg { width: 13px; height: 13px; color: var(--green); flex: none; }

/* About -------------------------------------------------------------------- */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.figure-plain { margin: 0; }
.figure-plain img { border-radius: var(--radius); width: 100%; height: auto; }
.figure-plain figcaption {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--muted); margin-top: 0.7rem;
}

/* A hairline label that splits a long text block in two. Used sparingly — the
   point is to give the eye a rest, not to decorate. */
.mini-label {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin: 1.9rem 0 1.1rem;
}
.mini-label::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.on-dark .mini-label { color: var(--navy-300); }
.on-dark .mini-label::after { background: rgba(245, 247, 250, 0.18); }

.checklist { margin: 0 0 2rem; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
/* Each line gets its own icon rather than a repeated bullet — four identical
   squares read as one grey block at a glance; four different marks give the
   eye something to land on per line. */
.checklist li {
  display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem;
  align-items: start;
}
.checklist svg {
  width: 20px; height: 20px; color: var(--green-deep);
  margin-top: 0.15em; flex: none;
}
.on-dark .checklist svg { color: var(--green); }

/* A block the client fills with a real photo. Deliberately obvious. */
.photo-slot {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
  display: grid; place-content: center; gap: 0.5rem;
  padding: 1.5rem; text-align: center;
}
.on-dark .photo-slot { border-color: rgba(245, 247, 250, 0.28); background: var(--navy-800); }
.photo-slot b {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep);
}
.on-dark .photo-slot b { color: var(--green); }
.photo-slot span { font-size: 0.9rem; color: var(--muted); max-width: 34ch; }
.on-dark .photo-slot span { color: var(--navy-300); }

/* Services ----------------------------------------------------------------- */
.services { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.service {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.service:nth-child(even) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.service:nth-child(even) .service-media { order: 2; }
@media (max-width: 820px) {
  .service, .service:nth-child(even) { grid-template-columns: 1fr; }
  .service:nth-child(even) .service-media { order: 0; }
}
.service-media { position: relative; min-height: 260px; }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-no {
  position: absolute; left: 0; top: 0;
  background: var(--navy-900); color: var(--green);
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.12em; padding: 0.45rem 0.85rem;
}
.service-body { padding: clamp(1.5rem, 3.5vw, 2.6rem); display: flex; flex-direction: column; }
.service-body h2 { font-size: var(--step-2); margin-bottom: 0.85rem; }
.service-body h2 .sep { color: var(--green-deep); font-weight: 400; }
.service-body > p { color: var(--muted); margin-bottom: 1.15rem; max-width: 54ch; }
.service-for {
  font-size: 0.92rem; color: var(--ink);
  background: var(--paper-2); border-left: 3px solid var(--green);
  padding: 0.75rem 1rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.5rem;
}
/* Same label treatment as .local-note on the town pages, so the two page types
   read as one system. */
.service-for b {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep);
  margin-bottom: 0.35rem;
}
.service-for b svg { width: 14px; height: 14px; flex: none; }
.service-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: auto; }

/* Areas -------------------------------------------------------------------- */
.board {
  background: var(--navy-900); color: var(--paper);
  border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem);
}
.board h3 { color: var(--paper); margin-bottom: 1.1rem; }
.board-list {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 1.5rem; padding: 0; list-style: none;
}
.board-list li {
  font-family: var(--mono); font-size: 0.88rem;
  border: 1px solid rgba(245, 247, 250, 0.28);
  padding: 0.4rem 0.8rem; border-radius: 3px;
}
.board-list li.is-home { background: var(--green); color: var(--navy-900); border-color: var(--green); font-weight: 500; }
.board-list li.is-home:has(a):hover { background: var(--green-lift); border-color: var(--green-lift); color: var(--navy-900); }
.board p { color: var(--navy-300); max-width: 62ch; }

/* How it works ------------------------------------------------------------- */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 2px solid var(--green); padding-top: 1.1rem; }
.step-no {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--navy-300); display: block; margin-bottom: 0.6rem;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--navy-300); font-size: 0.96rem; }

/* Testimonials ------------------------------------------------------------- */
.quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--paper); padding: clamp(1.4rem, 3vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.quote-mark {
  font-family: var(--display); font-size: 2.6rem; font-weight: 800;
  line-height: 0.6; color: var(--line);
}
.quote p { color: var(--muted); font-style: italic; }
.quote footer {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green-deep); margin-top: auto;
}

/* Form --------------------------------------------------------------------- */
.form-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start;
}
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }

.form-card {
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); padding: clamp(1.4rem, 3.5vw, 2.2rem);
}
.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.88rem; font-weight: 600; }
.field .hint { font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0.9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 1rem;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-600); }
.field textarea { resize: vertical; min-height: 92px; }
.field-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-card .btn { width: 100%; margin-top: 0.4rem; }
.form-small { font-size: 0.82rem; color: var(--muted); margin-top: 0.9rem; text-align: center; }
.hp { position: absolute; left: -9999px; }

/* Contact-method picker: all three channels, pick any. */
.choice-set { border: 0; padding: 0; margin: 0 0 1.15rem; }
.choice-set legend { font-size: 0.88rem; font-weight: 600; padding: 0; margin-bottom: 0.5rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 0.5rem 0.95rem;
  font-size: 0.92rem; cursor: pointer;
}
.choice input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--green-deep); }
.choice:hover { border-color: var(--navy-600); }
.choice:has(input:checked) { border-color: var(--green-deep); background: #eef8ec; font-weight: 600; }

.assurances { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.assurances li { padding-left: 1.9rem; position: relative; color: var(--navy-300); }
.assurances strong { color: var(--paper); display: block; font-weight: 600; }
.assurances li::before {
  content: ''; position: absolute; left: 0; top: 0.35em;
  width: 11px; height: 11px; background: var(--green); border-radius: 1px;
}

/* Location pages ----------------------------------------------------------- */
/* Shares every token, component and breakpoint above. Nothing here forks the
   design — it only adds the three shapes the town pages need that the homepage
   does not: the hero facts card, the service summary cards, and the area links. */

/* Hero side card: the same frame as the quote docket, carrying local facts
   instead of a sample quote. */
.local-card { max-width: 400px; margin-inline: auto; width: 100%; }
.local-facts { margin: 0; display: grid; gap: 0.7rem; }
.local-facts div {
  display: grid; grid-template-columns: 104px 1fr; gap: 0.75rem;
  align-items: baseline; font-size: 0.93rem;
}
.local-facts dt {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.local-facts dd { margin: 0; font-weight: 600; }
.local-facts dd .mono { font-family: var(--mono); font-weight: 500; }
/* On a narrow phone a 104px label column leaves too little for the value —
   "Adeyfield, Grovehill, Boxmoor…" ends up one word per line. Stack instead. */
@media (max-width: 400px) {
  .local-facts div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* A practical, town-specific note — narrow streets, permit bays, lift access.
   This is the part of each page that has to be genuinely different. */
.local-note {
  border-left: 3px solid var(--green);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
  margin-top: 1.75rem;
  max-width: 62ch;
}
.local-note b {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep);
  margin-bottom: 0.4rem;
}
.local-note b svg { width: 14px; height: 14px; flex: none; }
.local-note p { color: var(--muted); font-size: 0.96rem; }

/* Service summaries. Deliberately lighter than the homepage .service blocks —
   these are pointers back to the full copy, not a second copy of it. */
.svc-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .svc-cards { grid-template-columns: 1fr; } }
.svc-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.8rem);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.svc-card-icon {
  width: 34px; height: 34px; color: var(--green-deep);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.3rem; background: var(--paper-2);
}
.svc-card h2 { font-size: var(--step-1); }
.svc-card p { color: var(--muted); font-size: 0.96rem; }
.svc-card a {
  margin-top: auto; font-weight: 600; font-size: 0.94rem;
  color: var(--green-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.svc-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-card a span { transition: transform 0.15s ease; }
.svc-card a:hover span { transform: translateX(3px); }

/* Area chips become links on the town pages and on the homepage. */
.board-list a {
  text-decoration: none; display: block;
  margin: -0.4rem -0.8rem; padding: 0.4rem 0.8rem;
}
.board-list li:has(a):hover { border-color: var(--green); color: var(--green); }
.board-list li.is-current { background: var(--paper); color: var(--navy-900); border-color: var(--paper); font-weight: 600; }

/* Blog + long-form guides --------------------------------------------------- */
/* A guide is far more text than a location page, so it gets a reading column, a
   contents list and a checklist treatment that turns prose into something you
   can work down. Same tokens as everything else — no new palette, no new type. */

.article-layout {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1040px) { .article-layout { grid-template-columns: 1fr; } }

.article { max-width: 68ch; }
.article > p { color: var(--muted); margin-bottom: 1.1rem; }
.article > p strong { color: var(--ink); font-weight: 600; }
.article a { color: var(--green-deep); text-underline-offset: 3px; }

/* Contents. Sticky beside the article on a wide screen, a plain card above it
   on anything narrower — one piece of markup, placed differently. */
.toc { font-size: 0.94rem; }
@media (min-width: 1041px) {
  .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
@media (max-width: 1040px) {
  .toc {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); padding: 1.2rem 1.4rem;
  }
}
.toc h2 {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.9rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.3rem;
  padding: 0.42rem 0; text-decoration: none; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.76rem; color: var(--green-deep);
}
.toc a:hover { color: var(--ink); }

/* One block per time period. The number comes from a counter so it cannot
   drift out of step with the headings if a stage is added or moved. */
.stages { counter-reset: stage; }
.stage {
  counter-increment: stage;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.stage:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.stage h2 {
  font-size: var(--step-2);
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: center;
  margin-bottom: 0.9rem;
}
.stage h2::before {
  content: counter(stage, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.06em; color: var(--green-deep);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.32rem 0.55rem;
  line-height: 1;
}
.stage > p { color: var(--muted); margin-bottom: 1.25rem; max-width: 66ch; }

/* Tickable checklist. Real checkboxes, so keyboard and screen-reader behaviour
   comes for free; js/checklist.js only layers persistence on top. */
.task-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.task-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.8rem;
  align-items: start; border-bottom: 1px solid var(--line);
}
.task-list li:first-child { border-top: 1px solid var(--line); }
.task-list input[type='checkbox'] {
  width: 1.05rem; height: 1.05rem; margin: 0.95rem 0 0;
  accent-color: var(--green-deep); cursor: pointer;
}
/* The whole label row is the real tap target, but people aim at the box, and
   17px is fiddly with a thumb. */
@media (max-width: 640px) {
  .task-list input[type='checkbox'] { width: 1.3rem; height: 1.3rem; margin-top: 0.85rem; }
}
.task-list label { padding: 0.75rem 0; cursor: pointer; }
.task-list label em {
  display: block; font-style: normal; font-size: 0.88rem;
  color: var(--muted); margin-top: 0.15rem;
}
.task-list li:has(input:checked) label { color: var(--muted); }
.task-list li:has(input:checked) label > span { text-decoration: line-through; }

/* Progress readout. Hidden until the script fills it in, so it never shows a
   wrong count with JavaScript off. */
.task-progress {
  display: none; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); padding: 0.7rem 1rem; margin-bottom: 1.6rem;
}
.task-progress[data-ready='true'] { display: flex; }
.task-progress b { color: var(--green-deep); font-weight: 500; }
.task-progress button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.task-progress button:hover { color: var(--ink); }

/* Pull-out for the thing people most often get wrong at that stage. */
.callout {
  border-left: 3px solid var(--green);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem; margin: 1.6rem 0;
}
.callout b {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep);
  margin-bottom: 0.4rem;
}
.callout b svg { width: 14px; height: 14px; flex: none; }
.callout p { color: var(--muted); font-size: 0.96rem; }
.callout p + p { margin-top: 0.6rem; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em;
  color: var(--navy-300); margin-top: 1.3rem;
}
.article-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.article-meta svg { width: 14px; height: 14px; }

/* Closing CTA on a guide — quieter than the homepage form section. */
.article-cta {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); padding: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.article-cta h2 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.article-cta p { color: var(--muted); margin-bottom: 1.3rem; max-width: 60ch; }
.article-cta .hero-actions { margin-bottom: 0; }

/* Blog index --------------------------------------------------------------- */
.post-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .post-cards { grid-template-columns: 1fr; } }
.post-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: clamp(1.4rem, 3vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.post-card h2 { font-size: var(--step-1); }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { color: var(--green-deep); }
.post-card p { color: var(--muted); font-size: 0.96rem; }
.post-card-meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.post-card-more {
  margin-top: auto; font-weight: 600; font-size: 0.94rem;
  color: var(--green-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.post-card-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-card-more span { transition: transform 0.15s ease; }
.post-card-more:hover span { transform: translateX(3px); }

/* Says what is coming next, rather than padding the grid with filler cards. */
.post-card-empty {
  border-style: dashed; background: var(--paper-2);
  justify-content: center; gap: 0.5rem;
}
.post-card-empty b {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep);
}

/* Breadcrumb --------------------------------------------------------------- */
.breadcrumb {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em;
  margin-bottom: 1.1rem;
}
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; opacity: 0.5; }
.breadcrumb a { color: var(--navy-300); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb [aria-current] { color: var(--paper); }

/* Print. A moving checklist is something people actually print. */
@media print {
  .site-header, .callbar, .toc, .article-cta, .site-footer,
  .hero-media, .skip-link, .task-progress, .breadcrumb { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .hero, .section, .section-dark, .section-sunk {
    background: #fff !important; color: #000 !important; padding-block: 0.5rem;
  }
  .hero::after { display: none; }
  .hero h1, .on-dark h1, .on-dark h2, .on-dark p, .on-dark .lede { color: #000 !important; }
  .article-layout { grid-template-columns: 1fr; }
  .article { max-width: none; }
  .stage, .task-list li, .callout { break-inside: avoid; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
  a[href^='#']::after, a[href^='/']::after { content: ''; }
}

/* Prose pages -------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin: 2.5rem 0 0.9rem; }
.prose h3 { margin: 1.75rem 0 0.6rem; }
.prose p, .prose li { color: var(--muted); }
.prose p { margin-bottom: 1rem; }
.prose ul { padding-left: 1.2rem; margin-bottom: 1rem; display: grid; gap: 0.4rem; }
.prose a { color: var(--green-deep); text-underline-offset: 3px; }

.page-head { background: var(--navy-900); color: var(--paper); padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.page-head p { color: var(--navy-300); }

/* Footer ------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--navy-300); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  padding-bottom: 2.25rem; border-bottom: 1px solid rgba(245, 247, 250, 0.14);
}
/* Four columns need real room — the email address is long enough to collide
   with the next column before this. */
@media (max-width: 1060px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { width: 132px; height: auto; margin-bottom: 1rem; }
.footer-brand p { max-width: 42ch; font-size: 0.94rem; }
/* Footer column labels are h2, not h4 — an h4 here follows the page's last h2
   and skips two levels, which breaks heading navigation for screen readers. */
.site-footer h2 {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper);
  line-height: 1.4; margin: 0 0 0.9rem;
}
.footer-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; font-size: 0.94rem; }
.footer-list li { overflow-wrap: anywhere; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { color: var(--green); }
.footer-list .mono { font-family: var(--mono); }
.footer-legal {
  padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between; font-size: 0.84rem;
}
.footer-legal p { margin: 0; }
.footer-legal .co-no { font-family: var(--mono); }

/* Mobile sticky call bar --------------------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245, 247, 250, 0.15);
  border-top: 1px solid rgba(245, 247, 250, 0.15);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  height: var(--callbar-h);
  background: var(--navy-900); color: var(--paper);
  text-decoration: none; font-size: 0.9rem; font-weight: 700;
}
.callbar a svg { width: 18px; height: 18px; }
.callbar .cb-call { background: var(--green); color: var(--navy-900); }
.callbar .cb-wa { background: #12803c; color: #fff; }

/* Must match the nav breakpoint above. */
@media (max-width: 1000px) {
  .callbar { display: grid; }
  body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom)); }
}

/* Motion ------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal-in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }

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