/* =============================================================================
   ATR DEVELOPMENTS LIMITED — DESIGN SYSTEM
   =============================================================================
   Single stylesheet, no framework, no build step required.

   BRAND
   Palette and typefaces are the client's own:
     #6BD425 lime · #618B25 olive · #42113C plum · #370926 deep plum · #1C0118 ink
     Archivo (display, revised October 2026) · Roboto (text)

   White is the reading surface; plum anchors typography and closing
   sections. The supplied lime is reserved for dark surfaces and brand accents.
   Component
   surface tokens are scoped in the editorial-layout section before print.

   Contents
   01  Fonts
   02  Design tokens
   03  Reset and base
   04  Typography
   05  Layout: container, grid, rules, sections
   06  Buttons and links
   07  Placeholders and awaiting-content states
   08  Header and navigation
   09  Sticky mobile CTA bar
   10  Hero
   11  (removed)
   12  Audience fork
   13  Capability filter
   14  Process
   15  Commitments
   16  (removed)
   17  Sectors and service areas
   18  Enquiry block and forms
   19  Footer
   20  Motion and print
   21  Inner pages
   ============================================================================= */


/* 01  FONTS
   -----------------------------------------------------------------------------
   Self-hosted and subset to Latin plus the punctuation this site uses.
   Archivo variable is the current display face; Roboto is the text face.
   Both are self-hosted and preloaded. Earlier Poppins files remain available
   for the brand archive but are not requested by the current UI.

   Poppins 500 / 600 / 700 — display, wordmark, buttons, navigation
   Roboto (variable weight) — body copy, labels, tabular data
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}


/* 02  DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand — supplied */
  --lime:        #6BD425;   /* the single actionable colour */
  --olive:       #618B25;   /* graphics only — fails 4.5:1 on every ground here */
  --plum:        #42113C;   /* raised panels */
  --plum-deep:   #370926;   /* alternating sections */
  --ink:         #1C0118;   /* page ground */

  /* Brand — derived */
  --lime-deep:   #57B317;   /* hover on lime fills; ink text still 7.4:1 */
  --plum-lift:   #4E1547;   /* hover on plum panels */

  /* Neutrals — derived, carrying the brand hue */
  --paper:       #F6F1F4;   /* primary text — 17.6:1 on ink */
  --muted:       #B4A5AE;   /* secondary text — 8.4:1 on ink, 6.7:1 on plum */

  /* Rules — alpha, so they sit correctly on every ground */
  --rule:        rgba(246, 241, 244, 0.14);
  --rule-strong: rgba(246, 241, 244, 0.3);
  --rule-lime:   rgba(107, 212, 37, 0.45);

  --font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Base type scale; responsive architectural sizes are set below. */
  --t-display: clamp(2.25rem, 1.15rem + 4.3vw, 5.25rem);
  --t-h2:      clamp(1.75rem, 1.25rem + 2.2vw, 3.125rem);
  --t-h3:      clamp(1.125rem, 1.04rem + 0.44vw, 1.375rem);
  --t-lead:    clamp(1.0625rem, 0.99rem + 0.36vw, 1.3125rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-label:   0.6875rem;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(2.75rem, 5.2vw, 5.25rem);
  --gutter:    clamp(1.25rem, 4.2vw, 4.5rem);
  --measure:   64ch;
  --header-h:  66px;
  --radius:    0px;          /* sharp corners throughout — Poppins is round enough */

  color-scheme: dark;
}

@media (min-width: 900px) {
  :root { --t-body: 1.125rem; --header-h: 86px; }
}


/* 03  RESET AND BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}



img, svg, video { max-width: 100%; height: auto; display: block; }

/* Any component that sets its own `display` silently beats the `hidden`
   attribute's `display:none`. That left the closed menu laid out over the whole
   page, swallowing every tap. This makes `hidden` mean hidden, everywhere. */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
/* On the lime band the ring has to invert or it disappears. */
.data :focus-visible, .btn--onlime:focus-visible { outline-color: var(--ink); }

::selection { background: var(--lime); color: var(--ink); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--lime); color: var(--ink);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--sp-4); }

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


/* 04  TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
  color: inherit;
}
h1 { font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.042em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.24; letter-spacing: -0.018em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); }
.prose { max-width: var(--measure); }

/* Section marker. Roboto tracked out, rather than a third typeface — the brand
   specifies two, so labels are set in the text face. */
.marker {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.mono {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.tnum { font-variant-numeric: tabular-nums; }


/* 05  LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hr { border: 0; height: 1px; background: var(--rule-strong); margin: 0; }
.hr--lime { height: 2px; background: var(--lime); }

.sec { padding-block: var(--section-y); }
.sec--deep  { background: var(--plum-deep); }
.sec--plum  { background: var(--plum); }
.sec--tight { padding-block: clamp(1.75rem, 3.4vw, 3rem); }

/* Asymmetric section head: title left, supporting text offset right and
   dropped a line. This is what stops the page reading as a stack of bands. */
.head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: clamp(1.5rem, 2.8vw, 2.5rem);
}
.head__title { max-width: 18ch; }
.head__intro { max-width: 44ch; color: var(--muted); }

@media (min-width: 900px) {
  .head {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    row-gap: var(--sp-5);
    align-items: start;
  }
  .head .marker       { grid-column: 1 / -1; }
  .head__title        { grid-column: 1 / 8; max-width: none; }
  .head__intro        { grid-column: 8 / 13; padding-top: 0.7em; }
  .head--wide .head__title { grid-column: 1 / 9; }
  .head--wide .head__intro { grid-column: 9 / 13; }
}


/* 06  BUTTONS AND LINKS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  min-height: 54px;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-display);
  font-weight: 600; font-size: 1rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }

/* Lime fill, ink label — 10.4:1. The strongest pairing the palette has. */
.btn--primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn--primary:hover { background: var(--lime-deep); border-color: var(--lime-deep); }

.btn--ghost { background: transparent; color: var(--paper); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* For use on the lime band, where a lime fill would vanish. */
.btn--onlime { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--onlime:hover { background: var(--plum); border-color: var(--plum); }

.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 600;
  color: var(--lime); text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.link-arrow::after { content: '\2192'; transition: transform 0.18s ease; }
.link-arrow:hover { color: var(--paper); }
.link-arrow:hover::after { transform: translateX(4px); }


/* 06b  PHOTOGRAPHY
   -----------------------------------------------------------------------------
   Every <picture> carries real width and height attributes, so the browser
   reserves the right box before the file arrives and nothing on the page jumps.
   The wrapper sets the display aspect; the image covers it.
   -------------------------------------------------------------------------- */

.pic { display: block; }
.pic img { width: 100%; height: auto; display: block; }

.figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.figure__pic { overflow: hidden; background: var(--plum); }
.figure__pic img { width: 100%; height: 100%; object-fit: cover; }

.figure .figure__pic { aspect-ratio: 4 / 3; }
.figure--lead { margin-bottom: var(--sp-7); }
.figure--lead .figure__pic { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .figure--lead .figure__pic { aspect-ratio: 3 / 2; } }

.figure__cap {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}
.figure__stage {
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  border-left: 2px solid var(--lime);
  padding-left: var(--sp-2);
}

/* The sequence gallery. Ordered, because the photographs are in build order
   and that order is the story. */
.gallery {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 620px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .gallery { grid-template-columns: repeat(3, 1fr); } }


/* --- Projects index ---------------------------------------------------------
   One row per job: a single strong image and the facts beside it. The whole
   row is one destination, so the image, the title and the arrow all go to the
   same place — but only the title is in the tab order, so a keyboard user
   passes one link per project rather than three. */
.projlist { list-style: none; margin: 0; padding: 0; }
.projlist__item {
  display: grid; gap: var(--sp-5);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--rule);
  align-items: center;
}
.projlist__item:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) {
  .projlist__item { grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); }
}
.projlist__media { display: block; overflow: hidden; background: var(--plum); }
.projlist__pic { display: block; aspect-ratio: 3 / 2; }
.projlist__pic img { width: 100%; height: 100%; object-fit: cover; }
.projlist__media:hover img { transform: scale(1.02); }
.projlist__pic img { transition: transform 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .projlist__pic img { transition: none; } }

.projlist__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.15; margin: var(--sp-3) 0 var(--sp-4);
}
.projlist__title a { color: var(--paper); text-decoration: none; }
.projlist__title a:hover { color: var(--lime); }
.projlist__lead {
  font-size: var(--t-small); line-height: 1.6; color: var(--muted);
  margin: 0 0 var(--sp-5); max-width: 52ch;
}
.projlist__facts {
  margin: 0 0 var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.projlist__facts dt {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.projlist__facts dd {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 0.9375rem; line-height: 1.3; color: var(--paper);
}


/* --- Stage list -------------------------------------------------------------
   The build sequence on a project page. Every frame in a stage is the same
   size: the earlier version gave each stage one large frame and the rest small,
   which left a hole wherever a stage had the wrong number of photographs, and
   most of them did. */
.stagelist { list-style: none; margin: 0; padding: 0; }
.stagelist > li + li { margin-top: var(--sp-8); }

.stagelist__head {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.stagelist__num {
  font-family: var(--font-display); font-weight: 700; font-size: 0.875rem;
  color: var(--lime); flex: none;
}
.stagelist__title {
  margin: 0; flex: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem); line-height: 1.2;
  color: var(--paper);
}
.stagelist__rule { flex: 1 1 auto; height: 1px; background: var(--rule); transform: translateY(-0.35em); }
.stagelist__count {
  flex: none; font-family: var(--font-body); font-size: 0.6875rem;
  letter-spacing: 0.12em; color: var(--muted);
}

.shots {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (min-width: 1100px) { .shots { gap: var(--sp-5); } }

/* Chips that are links rather than labels. */
.chips--links li { padding: 0; border-color: var(--rule-strong); }
.chips--links a {
  display: block; padding: 10px 15px;
  color: var(--paper); text-decoration: none;
}
.chips--links li:hover { border-color: var(--lime); }
.chips--links a:hover { color: var(--lime); }


/* --- Job facts --------------------------------------------------------------
   The short factual header on a project: only things we actually know. No
   awaiting-content rows — an empty field says nothing worth the space. */
.jobfacts {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.jobfacts dt {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.jobfacts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--paper);
}


/* --- Build sequence ---------------------------------------------------------
   A job told in the order it happened. Each stage opens with a wide frame and
   the supporting shots sit beside it, so the eye moves stage to stage instead
   of scanning a uniform contact sheet. A stage with a single photograph gets
   the wide frame and nothing else, which is the correct result.

   The counters are decorative: the stage names carry the meaning, and the list
   is an <ol> so the order survives with styles off. */
.seq { list-style: none; margin: 0; padding: 0; }

.seq__stage + .seq__stage { margin-top: var(--sp-8); }

.seq__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.seq__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--lime);
  flex: none;
}
.seq__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.2;
  color: var(--paper);
  flex: none;
}
.seq__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
  /* Sits on the baseline of the heading rather than the middle of the row. */
  transform: translateY(-0.35em);
}
.seq__count {
  flex: none;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.seq__shots { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) {
  /* Lead frame one half, the supporting shots two-up in the other. Both halves
     size themselves, so a stage of two, three or four photographs all work
     without special cases. */
  .seq__shots { grid-template-columns: 1fr 1fr; }
  .seq__shots--solo { grid-template-columns: 1fr; }
}
.seq__shots--solo .seq__lead .figure__pic { aspect-ratio: 21 / 9; }
@media (max-width: 700px) {
  .seq__shots--solo .seq__lead .figure__pic { aspect-ratio: 3 / 2; }
}

.seq__rest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}


/* 07  PLACEHOLDERS
   -----------------------------------------------------------------------------
   Placeholder helpers remain available for explicitly marked client content.
   Published photography uses only the supplied, approved photographs.
   -------------------------------------------------------------------------- */

.ph {
  position: relative; display: block; width: 100%;
  background: #2A0620;
  background-image:
    linear-gradient(rgba(246, 241, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 241, 244, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  overflow: hidden;
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--3x2  { aspect-ratio: 3 / 2; }
.ph--4x3  { aspect-ratio: 4 / 3; }

.ph__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: var(--sp-2); padding: clamp(1rem, 2.4vw, 1.75rem);
}
.ph__tag {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lime);
  border: 1px solid var(--rule-lime);
  padding: 5px 9px;
}
.ph__desc {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.75rem; line-height: 1.65; letter-spacing: 0.02em;
  color: var(--muted);
  max-width: 40ch; margin: 0;
}

.awaiting { border-top: 1px solid var(--rule-strong); padding-top: var(--sp-5); }
.awaiting__tag {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lime); display: block; margin-bottom: var(--sp-3);
}
.awaiting p { color: var(--muted); font-size: var(--t-small); }
.awaiting__fields {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.awaiting__fields li {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule); padding: 5px 9px;
}

.form button:disabled { opacity: .55; cursor: not-allowed; }

/* A plain list of terms set as chips — trades, disciplines, anything that is a
   set of short labels rather than prose. Same shape as .awaiting__fields, but
   this one is content rather than a marker, so it reads at full strength. */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips li {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--paper); border: 1px solid var(--rule-strong);
  padding: 8px 13px;
}

.areas-more { margin: var(--sp-6) 0 0; }

/* A marked list inside a panel. Replaces the inline styles this pattern was
   carrying in three templates. */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ticks li {
  font-size: var(--t-small); line-height: 1.5; color: var(--muted);
  display: grid; grid-template-columns: 14px 1fr; gap: var(--sp-3); align-items: start;
}
.ticks li::before {
  content: ""; width: 8px; height: 8px; background: var(--lime); margin-top: 0.45em;
}

/* A postcode area on the service areas index: the town's name, then its
   districts. */
.pcgroup + .pcgroup { margin-top: var(--sp-7); }
.pcgroup__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule);
}
.pcgroup__title {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem); color: var(--paper);
}
.pcgroup__meta {
  font-family: var(--font-body); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}

/* --- Postcode grid ----------------------------------------------------------
   The other districts in the same postcode area. Dense on purpose: this is
   navigation, and twenty-eight links set as cards would bury the page. */
.pcgrid {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
}
.pcgrid a {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink);
  text-decoration: none;
  min-height: 46px;
}
.sec--deep .pcgrid a { background: var(--plum-deep); }
.pcgrid a:hover { background: var(--plum); }
.pcgrid__code {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
  color: var(--lime); flex: none; min-width: 3.1em;
}
.pcgrid__name {
  font-size: 0.8125rem; color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Inline placeholder for a value not yet supplied. Deliberately conspicuous —
   it must never be mistaken for real content. */
.pv {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.86em; letter-spacing: 0.06em;
  color: var(--lime);
  border-bottom: 1.5px dotted currentColor; white-space: nowrap;
}


/* 08  HEADER
   -----------------------------------------------------------------------------
   The phone number is present at every viewport width, at all times. The
   wordmark sits in its own slot, so a real logo file replaces it without the
   header layout changing.
   -------------------------------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); height: var(--header-h);
  /* Without this a flex item refuses to shrink below its content width, which
     is how the row used to push past the viewport and give the whole site a
     horizontal scrollbar on any laptop narrower than about 1340px. */
  min-width: 0;
}

/* The logo slot. A different logo file is a one-line change; nothing about the
   header layout depends on this particular artwork.
   Desktop 300x41, mobile 190x26 — both measured against the real header. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 26px; width: auto; display: block; }
@media (min-width: 700px)  { .logo img { height: 34px; } }
/* The wordmark is 7.3:1, so every pixel of height costs seven of width. It only
   goes back up to full size once the row has room to spare for it. */
@media (min-width: 1400px) { .logo img { height: 41px; } }

.logo-stacked { width: clamp(140px, 34vw, 190px); height: auto; }

/* Retained: the typographic wordmark still stands in anywhere the logo file
   is not appropriate, and it is the fallback if the SVG ever fails to load. */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.42em;
  text-decoration: none; color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase; line-height: 1;
  font-size: clamp(1rem, 3.1vw, 1.25rem);
  letter-spacing: 0.06em; white-space: nowrap;
}
.wordmark__b { font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }
.wordmark--stacked {
  flex-direction: column; align-items: flex-start; gap: 0.24em;
  font-size: clamp(1.1875rem, 4.8vw, 1.625rem);
}

.nav { display: none; }
@media (min-width: 1080px) {
  .nav {
    display: flex; align-items: center;
    gap: clamp(0.875rem, 1.5vw, 1.75rem);
    margin-inline: auto; padding-inline: clamp(0.5rem, 1.6vw, 2rem);
    min-width: 0;
  }
  .nav a {
    font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem;
    color: var(--paper); text-decoration: none; white-space: nowrap;
    padding: var(--sp-2) 0; border-bottom: 2px solid transparent;
  }
  .nav a:hover, .nav a[aria-current='page'] { border-bottom-color: var(--lime); }
}

.header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.header__phone {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-2);
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--paper); text-decoration: none; white-space: nowrap;
}
.header__phone:hover { color: var(--lime); }
.header__phone svg { width: 16px; height: 16px; flex: none; }
.header__phone-text { display: none; }
@media (min-width: 560px) { .header__phone-text { display: inline; } }

/* Desktop enquiry action; smaller screens use plain menu links. */
.header .btn { display: none; min-height: 46px; padding-inline: var(--sp-4); font-size: 0.9375rem; white-space: nowrap; }
@media (min-width: 1340px) { .header .btn { display: inline-flex; padding-inline: var(--sp-5); } }

.menu-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 12px;
  background: none; border: 1px solid var(--rule-strong); cursor: pointer;
}
@media (min-width: 1080px) { .menu-btn { display: none; } }
.menu-btn span { display: block; height: 1.5px; background: var(--paper); transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-btn[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Full-screen text navigation. Background scroll and focus are contained. */
.menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.menu[data-open='true'] { opacity: 1; }
@media (min-width: 1080px) { .menu { display: none !important; } }

.menu__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.menu-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: none; border: 1px solid var(--rule-strong); cursor: pointer;
  color: var(--paper);
}
.menu-close svg { width: 20px; height: 20px; }
.menu-close:hover { border-color: var(--lime); color: var(--lime); }

.menu__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5) var(--gutter) var(--sp-6);
}

/* Scroll lock, set on <html> so iOS honours it. */
html.menu-open, html.menu-open body { overflow: hidden; }


/* --- Cookie consent ---------------------------------------------------------
   A bar across the bottom, not a modal: it does not block reading the page, it
   does not need a focus trap, and it cannot be missed either.

   Accept and Reject are the same size and sit side by side. Making Reject
   smaller, greyer or one level deeper is the standard dark pattern and it is
   also, in the UK, not valid consent. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
  background: var(--plum-deep);
  border-top: 1px solid var(--lime);
  padding: var(--sp-5) 0 calc(var(--sp-5) + env(safe-area-inset-bottom));
}
.consent__inner {
  width: min(100% - 2 * var(--gutter), 1180px);
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-5);
}
.consent__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; color: var(--paper); margin: 0 0 var(--sp-2);
}
.consent__text {
  font-size: var(--t-small); line-height: 1.55; color: var(--muted);
  margin: 0; max-width: 62ch;
}
.consent__text a { color: var(--lime); }
/* --- Service columns --------------------------------------------------------
   Two plain link columns, used where a card grid would mean repeating sixteen
   descriptions on every one of six pages. */
.svc-cols {
  display: grid; gap: var(--sp-7);
  border-top: 1px solid var(--rule); padding-top: var(--sp-6);
}
@media (min-width: 760px) { .svc-cols { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); } }
.svc-cols__head {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime); margin: 0 0 var(--sp-4);
}
.svc-cols__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.svc-cols__list li + li { border-top: 1px solid var(--rule); }
.svc-cols__list a {
  display: block; padding: var(--sp-3) 0;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  color: var(--paper); text-decoration: none;
}
.svc-cols__list a:hover { color: var(--lime); }

/* The cookie table on the policy page. Scrolls inside itself on a phone rather
   than making the whole page scroll sideways. */
.ctable-wrap { overflow-x: auto; margin: 0 0 var(--sp-6); }
.ctable { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 34rem; }
.ctable th, .ctable td {
  text-align: left; vertical-align: top;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
.ctable th {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ctable td { color: var(--muted); line-height: 1.5; }
.ctable code {
  font-family: var(--font-body); font-weight: 500;
  color: var(--lime); white-space: nowrap;
}

.consent__actions { display: flex; gap: var(--sp-3); flex: none; }
.consent__actions .btn { min-width: 116px; justify-content: center; }
@media (max-width: 560px) {
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1 1 0; min-width: 0; }
}


/* 10  HERO
   -----------------------------------------------------------------------------
   Full bleed. The photograph runs the whole width and the type sits on it.
   Two scrims do the work: a horizontal one that takes the left third to near
   solid ink, and a vertical one that stops the top of the image fighting the
   header. Measured at 12:1 behind the headline.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  display: grid;
  isolation: isolate;
}
.hero > * { grid-area: 1 / 1; }

.hero__media { position: relative; z-index: 0; }
.hero__pic { height: 100%; }
.hero__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 55%;
}

.hero__scrim {
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(28,1,24,0.75) 0%, rgba(28,1,24,0) 34%),
    linear-gradient(100deg,
      rgba(28,1,24,0.97) 0%,
      rgba(28,1,24,0.93) 30%,
      rgba(28,1,24,0.72) 56%,
      rgba(28,1,24,0.34) 100%);
}
@media (max-width: 767px) {
  /* Portrait screens need the scrim vertical, not diagonal, or the lower
     half of the type sits over open sky. */
  .hero__scrim {
    background: linear-gradient(to bottom,
      rgba(28,1,24,0.86) 0%,
      rgba(28,1,24,0.80) 42%,
      rgba(28,1,24,0.93) 78%,
      rgba(28,1,24,0.97) 100%);
  }
}

.hero__inner {
  position: relative; z-index: 2;
  align-self: center;
  display: flex; flex-direction: column;
  gap: var(--sp-5);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  max-width: 1400px;
}
.hero__media, .hero__scrim { min-height: clamp(460px, 78vh, 720px); }

.hero h1 { max-width: 15ch; }
.hero__lead {
  font-size: var(--t-lead); line-height: 1.5;
  color: rgba(246, 241, 244, 0.9);
  max-width: 44ch; margin: 0;
}

.hero__kicker {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--lime); margin: 0;
}
.hero__kicker b { color: var(--paper); font-weight: 500; }

.hero__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
@media (min-width: 520px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { min-width: 196px; }
}


/* 11  (removed — the company details strip moved to the footer, where a
       procurement reader actually looks for it. See .facts below.)
   -------------------------------------------------------------------------- */


/* 12  AUDIENCE FORK
   -----------------------------------------------------------------------------
   Full-bleed, edge to edge, two halves meeting on a lime rule. Each half is one
   large tap target, not a card with a small link inside it. The two grounds sit
   close together in value on purpose — the separation is the rule and the type,
   which is how it works on a dark page.
   -------------------------------------------------------------------------- */

.fork { display: grid; }
@media (min-width: 880px) { .fork { grid-template-columns: 1fr 1fr; } }

.fork__panel {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: clamp(2.25rem, 4.5vw, 4rem) var(--gutter);
  text-decoration: none; color: inherit;
  transition: background-color 0.2s ease;
}
@media (min-width: 880px) {
  .fork__panel--a { padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  .fork__panel--b { padding-right: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
}

.fork__panel--a { background: var(--plum); border-bottom: 2px solid var(--lime); }
.fork__panel--a:hover { background: var(--plum-lift); }
@media (min-width: 880px) {
  .fork__panel--a { border-bottom: 0; border-right: 2px solid var(--lime); }
}

.fork__panel--b { background: var(--ink); }
.fork__panel--b:hover { background: var(--plum-deep); }

.fork__panel h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); max-width: 14ch; }
.fork__panel p { max-width: 40ch; margin: 0; color: var(--muted); }

.fork__services {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}
@media (min-width: 460px) { .fork__services { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); } }
.fork__services li {
  border-top: 1px solid var(--rule);
  padding: var(--sp-3) 0;
  font-size: var(--t-small); color: var(--muted);
}
.fork__panel .link-arrow { margin-top: auto; align-self: flex-start; }


/* 13  CAPABILITY FILTER
   -----------------------------------------------------------------------------
   This replaced a three-column matrix of marks. The matrix asked the reader to
   hold a column heading in their head while their eye crossed the full width of
   the screen to a 10px square — and then to mentally filter a grid that neither
   audience wanted whole.

   Now the audience is a control. Pick a route, the list narrows. Every row
   carries its own audience tags, so the information is complete before anyone
   touches a filter and with JavaScript switched off entirely.
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.filters__label {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.filters__set { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 46px;                       /* comfortable target on a phone */
  padding: 0 var(--sp-4);
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--paper);
  background: transparent;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.chip:hover { border-color: var(--lime); }
.chip__n {
  font-family: var(--font-body); font-weight: 500; font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.chip[aria-pressed='true'] {
  background: var(--lime); color: var(--ink); border-color: var(--lime);
  font-weight: 600;
}
.chip[aria-pressed='true'] .chip__n { color: var(--ink); opacity: 0.72; }

/* --- The list ------------------------------------------------------------ */

.caps { display: flex; flex-direction: column; gap: var(--sp-7); }

.capgroup[hidden] { display: none; }

.capgroup__name {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}

/* Cards, not rows. As a list of names and hairlines this read like a glossary
   and every service looked the same weight. Each one is now an object with a
   name, a scope line and its audiences — something you land on rather than
   something you scan past. */
/* Hairlines come from a ring on each card, not from a coloured grid gap —
   a gap background paints the empty cells of an incomplete last row as solid
   blocks, which is exactly what it looked like. */
.capitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
@media (min-width: 640px)  { .capitems { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .capitems { grid-template-columns: repeat(3, 1fr); } }
.capitems li[hidden] { display: none; }

.capcard {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-4) var(--sp-4);
  background: var(--plum);
  box-shadow: 0 0 0 1px var(--rule);
  text-decoration: none; color: var(--paper);
  position: relative;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.capcard::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--lime);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.capcard:hover { background: var(--plum-lift); box-shadow: 0 0 0 1px var(--rule-strong); }
.capcard:hover::before { transform: scaleY(1); }

.capcard__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3);
}
.capcard__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.125rem; line-height: 1.22; letter-spacing: -0.028em;
  text-wrap: balance;
}
.capcard__go {
  font-size: 1.0625rem; line-height: 1; color: var(--lime);
  flex: none; padding-top: 3px;
  transform: translateX(-4px); opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.capcard:hover .capcard__go,
.capcard:focus-visible .capcard__go { transform: none; opacity: 1; }

.capcard__desc {
  font-size: 0.875rem; line-height: 1.55;
  color: var(--muted);
  margin-bottom: auto;
}
.capcard__tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}
@media (min-width: 640px) { .capcard { padding: var(--sp-5); } }

.caps__none {
  margin: var(--sp-6) 0 0;
  color: var(--muted);
}
.linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--lime); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}


/* 14  PROCESS
   -----------------------------------------------------------------------------
   The one place on this page where numbering means something: these steps
   happen in this order, and the order is the point.
   -------------------------------------------------------------------------- */

.process { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
@media (min-width: 760px)  { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .process { grid-template-columns: repeat(5, 1fr); } }

.process li {
  counter-increment: step;
  border-top: 2px solid var(--rule-strong);
  padding: var(--sp-4) var(--sp-5) var(--sp-6) 0;
}
.process li::before {
  content: '0' counter(step);
  display: block;
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--t-label); letter-spacing: 0.18em;
  color: var(--lime);
  margin-bottom: var(--sp-4);
}
.process h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.process p { font-size: var(--t-small); color: var(--muted); margin: 0; }


/* 15  COMMITMENTS
   -------------------------------------------------------------------------- */

.commit { list-style: none; margin: 0; padding: 0; }
@media (min-width: 820px) {
  .commit { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
}
.commit li {
  border-top: 1px solid var(--rule);
  padding: var(--sp-5) 0;
  display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-4);
  align-items: start;
}
.commit__key {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime); padding-top: 0.5em;
}
.commit h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.commit p { font-size: var(--t-small); color: var(--muted); margin: 0; }


/* 16  (removed — the project index table was a grid of "Awaiting" and earned
       its place on no one's screen. The photography carries this section.)
   -------------------------------------------------------------------------- */


/* 17  SECTORS AND SERVICE AREAS
   -----------------------------------------------------------------------------
   Typographic lists rather than grids of boxes. Leeds is set larger than the
   rest because it genuinely is the primary service area, not for decoration.
   -------------------------------------------------------------------------- */

.tlist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--lime); }
.tlist li { border-bottom: 1px solid var(--rule); }
.tlist a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-5);
  padding: clamp(0.875rem, 1.6vw, 1.25rem) 0;
  text-decoration: none; color: var(--paper);
}
.tlist a:hover { color: var(--lime); }
.tlist__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1875rem, 2.4vw, 1.75rem);
  letter-spacing: -0.028em; line-height: 1.18;
}
.tlist__note {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-align: right; flex: none;
}
.tlist .is-primary .tlist__name { font-size: clamp(1.625rem, 4vw, 2.75rem); }


/* 18  ENQUIRY BLOCK AND FORMS
   -----------------------------------------------------------------------------
   Five fields. Nothing else. Every extra field costs conversions, and plans and
   drawings belong on the full quote form where the upload lives.
   -------------------------------------------------------------------------- */

.enquire__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 980px) {
  .enquire__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-9); }
}

.routes { list-style: none; margin: var(--sp-6) 0 0; padding: 0; border-top: 2px solid var(--lime); }
.routes li { border-bottom: 1px solid var(--rule); }
.routes a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4) 0;
  text-decoration: none; color: var(--paper);
}
.routes a:hover { color: var(--lime); }
.routes__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; }
.routes__note {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-align: right;
}

.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form__row { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (min-width: 560px) { .form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }

.form label {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.form .req { color: var(--lime); }

.form input, .form select, .form textarea {
  width: 100%; min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body); font-size: 1rem;
  color: var(--paper);
  background: rgba(28, 1, 24, 0.45);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  appearance: none;
}
.form textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--lime); }
.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236BD425' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
  padding-right: 44px;
}
.form select option { color: var(--paper); background: var(--plum); }

/* File input. The browser's default button is a grey system control that looks
   like nothing else on the page, and it is the one element a homeowner is asked
   to use while deciding whether this firm is careful about detail. The field
   itself keeps every native behaviour — click, keyboard, drag and drop, the
   file-name list — only the button inside it is restyled. */
.form input[type='file'] {
  padding: var(--sp-3);
  cursor: pointer;
  line-height: 1.5;
  color: var(--muted);
  font-size: 0.9375rem;
}
.form input[type='file']::file-selector-button {
  margin-right: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--plum-lift);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.form input[type='file']:hover::file-selector-button,
.form input[type='file']::file-selector-button:hover {
  background: var(--plum);
  border-color: var(--lime);
}

.form__hint { font-size: 0.8125rem; line-height: 1.55; color: var(--muted); margin: 0; }
.form__hint a { color: var(--lime); }

/* Honeypot — hidden from people, visible to naive bots. Not display:none,
   which some bots specifically skip. */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* 19  FOOTER
   -------------------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--muted); border-top: 1px solid var(--rule); }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--lime); }

.footer__top { padding-block: var(--sp-8) var(--sp-7); display: grid; gap: var(--sp-8); }
@media (min-width: 940px) { .footer__top { grid-template-columns: 1fr 2fr; gap: var(--sp-9); } }

.footer__nav { display: grid; gap: var(--sp-6); }
@media (min-width: 560px) { .footer__nav { grid-template-columns: repeat(3, 1fr); } }

.footer__col h3 {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lime); margin-bottom: var(--sp-4);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col li { font-size: var(--t-small); line-height: 1.4; }

.facts {
  margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: var(--sp-3);
}
@media (min-width: 420px) { .facts { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5); } }
.facts > div { display: flex; flex-direction: column; gap: 3px; }
.facts dt {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lime);
}
.facts dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.9375rem; letter-spacing: -0.015em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.footer address { font-style: normal; font-size: var(--t-small); line-height: 1.7; margin-top: var(--sp-5); }
.footer .wordmark { color: var(--paper); }

.footer__legal {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 2; color: var(--muted);
}
@media (min-width: 940px) {
  .footer__legal { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); }
}
.footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }



/* 21  INNER PAGES
   -----------------------------------------------------------------------------
   Everything the other forty-six pages sit on: breadcrumbs, the compact page
   hero, long-form prose, and the content components the service and company
   pages are assembled from.
   -------------------------------------------------------------------------- */

/* --- Breadcrumbs --------------------------------------------------------- */
.crumbs { margin-bottom: var(--sp-5); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: '/'; color: var(--muted); opacity: 0.6; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--lime); }
.crumbs [aria-current] { color: var(--paper); }

/* --- Page hero ------------------------------------------------------------ */
.phero { background: var(--plum-deep); display: grid; isolation: isolate; }
.phero > * { grid-area: 1 / 1; }

.phero__inner {
  position: relative; z-index: 2;
  align-self: center;
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  max-width: 1400px;
}
.phero h1 { max-width: 20ch; }
.phero__eyebrow { color: var(--lime); }
.phero__lead { max-width: 56ch; }
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

.phero--photo { background: var(--ink); }

/* The photograph is a background, not content: it is taken out of the flow so
   the hero's height comes from the heading and the buttons, never from the
   image's own proportions. Left in the flow, a portrait phone photo stretched
   the hero to 1707px on a 1280px screen — nearly two full screens of picture
   before a visitor reached a single word. */
.phero--photo .phero__media {
  position: relative; z-index: 0; overflow: hidden;
  min-height: clamp(340px, 46vh, 480px);
}
.phero--photo .phero__pic { position: absolute; inset: 0; }
.phero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.phero--photo .phero__scrim { min-height: clamp(340px, 46vh, 480px); }
.phero__scrim {
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(28,1,24,0.75) 0%, rgba(28,1,24,0) 40%),
    linear-gradient(100deg, rgba(28,1,24,0.96) 0%, rgba(28,1,24,0.9) 34%,
                    rgba(28,1,24,0.66) 62%, rgba(28,1,24,0.36) 100%);
}
@media (max-width: 767px) {
  .phero__scrim {
    background: linear-gradient(to bottom, rgba(28,1,24,0.84) 0%,
                rgba(28,1,24,0.8) 40%, rgba(28,1,24,0.95) 100%);
  }
}

/* --- Long-form prose ------------------------------------------------------ */
.prose-block { max-width: 68ch; }
.prose-block h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.prose-block h2:first-child { margin-top: 0; }
.prose-block h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose-block p { margin-bottom: var(--sp-4); color: var(--muted); }
.prose-block strong { color: var(--paper); font-weight: 500; }
.prose-block a { color: var(--lime); text-underline-offset: 3px; }
.prose-block ul, .prose-block ol { margin: 0 0 var(--sp-5); padding-left: 1.15em; color: var(--muted); }
.prose-block li { margin-bottom: var(--sp-2); }
.prose-block li::marker { color: var(--lime); }

/* --- Two-column split (copy left, aside right) ---------------------------- */
.split { display: grid; gap: var(--sp-7); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--sp-9); align-items: start; }
}

/* --- Numbered stage list -------------------------------------------------- */
.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; display: grid; gap: 0; }
.stages li {
  counter-increment: stage;
  display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rule);
}
.stages li:last-child { border-bottom: 1px solid var(--rule); }
.stages li::before {
  content: '0' counter(stage);
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.16em;
  color: var(--lime); padding-top: 0.4em;
}
.stages h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.stages p { font-size: var(--t-small); color: var(--muted); margin: 0; }

/* --- Included / not included --------------------------------------------- */
.incl { display: grid; gap: var(--sp-5); }
@media (min-width: 760px) { .incl { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.incl__col { padding: var(--sp-5); background: var(--plum); box-shadow: 0 0 0 1px var(--rule); }
.incl__col h3, .incl__col .panel__title {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.incl__col--yes h3 { color: var(--lime); }
.incl__col--no h3 { color: var(--muted); }
.incl__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.incl__col li {
  font-size: var(--t-small); line-height: 1.5; color: var(--muted);
  display: grid; grid-template-columns: 14px 1fr; gap: var(--sp-3); align-items: start;
}
.incl__col li::before { content: ''; width: 8px; height: 8px; margin-top: 0.45em; }
.incl__col--yes li::before { background: var(--lime); }
.incl__col--no li::before { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }

/* --- Key/value fact panel ------------------------------------------------- */
.panel {
  background: var(--plum); box-shadow: 0 0 0 1px var(--rule);
  padding: var(--sp-5);
}
.panel__title {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lime); margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule);
}
.panel dl { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.panel dt {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.panel dd { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--paper); }
/* Body copy inside a panel, where the panel is making a point rather than
   listing facts. Replaces the inline styles this used to need. */
.panel__note { font-size: var(--t-small); line-height: 1.6; color: var(--muted); }

/* --- FAQs ----------------------------------------------------------------- */
.faqs { display: flex; flex-direction: column; max-width: 78ch; }
.faq { border-top: 1px solid var(--rule); }
.faq:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  min-height: 60px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.0625rem; letter-spacing: -0.02em;
  color: var(--paper);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--lime); }
.faq__mark { position: relative; width: 14px; height: 14px; flex: none; }
.faq__mark::before, .faq__mark::after {
  content: ''; position: absolute; background: var(--lime);
  transition: transform 0.2s ease;
}
.faq__mark::before { inset: 6px 0 6px 0; height: 2px; }
.faq__mark::after  { inset: 0 6px 0 6px; width: 2px; }
.faq[open] .faq__mark::after { transform: scaleY(0); }
.faq__body { padding: 0 0 var(--sp-5); max-width: 66ch; }
.faq__body p { color: var(--muted); font-size: var(--t-small); line-height: 1.6; margin: 0; }

/* --- Closing enquiry block ------------------------------------------------ */
.cta-block { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .cta-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-9); align-items: start; }
}
.cta-block h2 { margin-bottom: var(--sp-4); max-width: 16ch; }
.cta-block .lead { max-width: 42ch; }
.cta-block .routes { margin-top: 0; }

/* --- Card grid (hubs, sector and area listings) --------------------------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  height: 100%; padding: var(--sp-5);
  background: var(--plum); box-shadow: 0 0 0 1px var(--rule);
  text-decoration: none; color: var(--paper);
  position: relative;
  transition: background-color 0.18s ease;
}
.card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--lime); transform: scaleY(0); transform-origin: top;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card:hover { background: var(--plum-lift); }
.card:hover::before { transform: scaleY(1); }
.card__eyebrow {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lime);
}
.card__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.03em;
}
.card__desc { font-size: 0.875rem; line-height: 1.55; color: var(--muted); margin-bottom: auto; }
.card__go { color: var(--lime); font-size: 1rem; padding-top: var(--sp-2); }


/* 20  MOTION AND PRINT
   -----------------------------------------------------------------------------
   Fades with a small upward translation. Nothing bounces, nothing parallaxes.
   Content is visible by default, so it can never get stuck hidden.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.js .reveal[data-revealed='true'] { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

@media print {
  .header, .menu { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   GUIDES
   Long-form regulatory content. The prose column is narrower than the site's
   default measure because these pages are read rather than scanned, and 68
   characters is where reading speed stops improving.
   --------------------------------------------------------------------------- */

/* The index. One row per guide, same discipline as the project index. */
.guidelist { list-style: none; margin: 0; padding: 0; }
.guiderow {
  display: grid; gap: var(--sp-3) var(--sp-5); align-items: baseline;
  grid-template-columns: 1fr auto;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.guidelist li:last-child .guiderow { border-bottom: 1px solid var(--rule); }
.guiderow__main { grid-column: 1; }
.guiderow__name {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem); line-height: 1.2;
  color: var(--paper); letter-spacing: -0.01em;
}
.guiderow__desc {
  display: block; margin-top: var(--sp-3);
  font-size: var(--t-small); line-height: 1.6; color: var(--muted);
  max-width: 62ch;
}
.guiderow__meta {
  grid-column: 2; grid-row: 1;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.guiderow__go { grid-column: 2; grid-row: 1; display: none; }
.guiderow:hover .guiderow__name { color: var(--lime); }
.guiderow:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

/* The article body. */
.guide { max-width: 68ch; }
.guide__sec + .guide__sec { margin-top: var(--sp-7); }
.guide__h {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem); line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 var(--sp-4);
  padding-top: var(--sp-5); border-top: 1px solid var(--rule);
}
.guide__sec:first-child .guide__h { padding-top: 0; border-top: 0; }
.guide p { font-size: var(--t-body); line-height: 1.75; margin: 0 0 var(--sp-4); }
.guide p:last-child { margin-bottom: 0; }
.guide__lh {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: var(--sp-5) 0 var(--sp-4);
}
/* Inside a guide the marked list is body-sized: it is content, not a sidebar. */
.ticks--guide li { font-size: var(--t-small); color: var(--paper); }

/* Key facts panel — a figure and what it means. */
.dl-facts { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.dl-facts > div + div { padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.dl-facts dt {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.2; color: var(--lime);
  margin-bottom: 4px;
}
.dl-facts dd {
  margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--muted);
}

/* Primary sources. Marked as external because they are, and because a reader
   checking a regulation should not lose the page they were reading. */
.srclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.srclist li + li { padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.srclist a {
  font-size: var(--t-small); line-height: 1.5; color: var(--paper);
  text-decoration: none; display: inline-block;
}
.srclist a:hover { color: var(--lime); }
.srclist__ext { margin-left: 6px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   CAPABILITY STATEMENT
   Built as a page rather than a PDF, because a PDF is a snapshot that goes
   stale the moment a cover level changes and the copy in a buyer's folder is
   never the current one. The print rules at the end of this block turn it into
   a clean A4 document the buyer saves themselves.
   --------------------------------------------------------------------------- */

.capgrid {
  margin: 0; display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.capgrid > div {
  padding: var(--sp-4) 0; border-top: 1px solid var(--rule);
  padding-right: var(--sp-5);
}
.capgrid dt {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.capgrid dd {
  margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--paper);
}
.capgrid dd a { color: var(--lime); }

.capnote {
  margin: var(--sp-5) 0 0; max-width: 64ch;
  font-size: var(--t-small); line-height: 1.6; color: var(--muted);
}

.capgroup + .capgroup { margin-top: var(--sp-6); }
.capgroup__title {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule);
}
.caplist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .caplist { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-7); } }
.caplist li { display: flex; flex-direction: column; gap: 3px; }
.caplist a {
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem;
  color: var(--paper); text-decoration: none; line-height: 1.3;
}
.caplist a:hover { color: var(--lime); }
.caplist__aud { font-size: 0.6875rem; letter-spacing: 0.05em; color: var(--muted); }

.capdate {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}

/* Premium editorial layouts. Legacy component token names remain as aliases
   so every generated page participates in the same light/dark surface system. */
:root {
  --brand-plum: #370926;
  --brand-lime: #6BD425;
  --ink: #ffffff;
  --paper: #202020;
  --muted: #595959;
  --plum: #f4f4f4;
  --plum-deep: #f7f7f7;
  --plum-lift: #ededed;
  --lime: #370926;
  --lime-deep: #51223f;
  --rule: rgba(43,22,39,.16);
  --rule-strong: rgba(43,22,39,.32);
  --rule-lime: rgba(59,98,37,.35);
  --t-display: clamp(2.6rem, 1.4rem + 3.5vw, 4.8rem);
  --t-h2: clamp(2rem, 1.15rem + 2.7vw, 3.8rem);
  --t-body: 1.0625rem;
  --t-label: .6875rem;
  --section-y: clamp(4rem, 7.5vw, 7rem);
  --gutter: clamp(1.25rem, 4.4vw, 5rem);
  --header-h: 84px;
  color-scheme: light;
}
.on-dark, .sec--plum, .home-method {
  --ink: #202020; --paper: #ffffff; --muted: #d0d0d0;
  --plum: #3c2035; --plum-deep: #31182b; --plum-lift: #482b41;
  --lime: #92d86a; --lime-deep: #a4e47e;
  --rule: rgba(248,247,242,.17); --rule-strong: rgba(248,247,242,.38);
  --rule-lime: rgba(146,216,106,.4);
  background: var(--ink); color: var(--paper); color-scheme: dark;
}
body { line-height: 1.7; }
a { text-underline-offset: .22em; }
h1,h2,h3,h4 { font-weight: 780; letter-spacing: -.045em; line-height: 1.04; }
h1 { line-height: 1.07; }
.container { max-width: 1536px; }
.marker { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: 18px; }
.head { margin-bottom: 48px; }
.head .marker { margin-bottom: 0; }
.head__intro { font-size: 1rem; line-height: 1.75; }
.head__title { max-width: 21ch; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.btn { min-height: 55px; font-size: .875rem; font-weight: 500; padding: 14px 25px; gap: 24px; border-width: 1px; }
.btn--primary { background: var(--brand-plum); border-color: var(--brand-plum); color: #fff; }
.btn--primary:hover { background: #51223f; border-color: #51223f; }
.on-dark .btn--primary, .sec--plum .btn--primary { background: var(--brand-lime); border-color: var(--brand-lime); color: #1c0118; }
.btn span[aria-hidden] { font-size: 1.25rem; line-height: 1; }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; color: var(--paper); font-size: .9rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.text-link:hover { color: var(--lime); border-color: var(--lime); }
.text-link span { font-size: 1.3rem; }
.link-arrow { font-size: .9375rem; font-weight: 500; }
.pv { white-space: normal; overflow-wrap: anywhere; }

/* A quieter, usable masthead at every width. */
.header { background: #ffffff; }
.header__inner { max-width: 1600px; }
.logo img { height: 29px; }
.header__phone { padding: 0; }
.header__phone-text { display: none; }
.header .btn { display: inline-flex; font-size: .8125rem; padding-inline: 20px; min-height: 46px; }
.nav { padding-inline: 15px; gap: 26px; }
.nav a { font-size: .8125rem; min-height: 44px; display: inline-flex; align-items: center; }
.header__actions { gap: 20px; }
.menu-btn, .menu-close { border: 0; }
.no-js .menu-btn { display: none; }
.no-js .nav { display: flex; flex-wrap: wrap; padding: 0; gap: 6px 18px; }
.no-js .header__inner { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding-block: 15px; }
.no-js .nav a { color: var(--paper); font-size: .875rem; text-decoration: none; }
@media (min-width: 1500px) { .logo img { height: 34px; } }
@media (max-width: 1079px) { .header .btn, .header__phone { display: none; } }
@media (max-width: 620px) {
  :root { --header-h: 72px; }
  .logo img { height: 25px; }
  .header .btn, .header__phone { display: none; }
  .header__actions { gap: 0; }
}
@media (max-width: 360px) { .logo img { height: 22px; } }

.section-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.section-intro h2 { max-width: 24ch; }
.section-intro > p, .section-intro > div + div { max-width: 42ch; color: var(--muted); font-size: 1rem; }
.section-intro p:last-child { margin: 0; }
.section-intro .text-link { margin-top: 8px; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-strong); }
.audience { display: flex; flex-direction: column; padding: 42px 50px 30px 0; text-decoration: none; color: var(--paper); }
.audience + .audience { padding-left: 50px; padding-right: 0; border-left: 1px solid var(--rule); }
.audience__label { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 30px; }
.audience h3 { font-size: clamp(2rem,3.3vw,3rem); margin-bottom: 24px; }
.audience p { max-width: 43ch; color: var(--muted); font-size: 1rem; }
.audience__bottom { border-bottom: 1px solid var(--rule); padding-block: 28px 18px; margin-top: auto; display: flex; justify-content: space-between; font-weight: 500; font-size: .9375rem; }
.audience__bottom span { width: 42px; height: 42px; margin-top: -10px; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: 50%; font-size: 1.4rem; transition: background .18s,color .18s; }
.audience:hover .audience__bottom span { background: var(--brand-plum); border-color: var(--brand-plum); color: #fff; }
.work-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.work-card { color: var(--paper); text-decoration: none; }
.work-card + .work-card { margin-top: 90px; }
.work-card__photo { aspect-ratio: 4/3; overflow: hidden; background: var(--plum); }
.work-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-card:hover img { transform: scale(1.025); }
.work-card__meta { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .13em; font-size: .625rem; color: var(--muted); padding-block: 23px 12px; }
.work-card h3 { display: flex; justify-content: space-between; gap: 20px; font-size: clamp(1.25rem,2vw,1.75rem); }
.work-card p { font-size: .9375rem; color: var(--muted); margin-top: 14px; max-width: 48ch; }
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.method-intro h2 { font-size: clamp(2.5rem,4.6vw,4.5rem); margin-bottom: 30px; }
.method-intro > p:not(.marker) { color: var(--muted); max-width: 36ch; margin-bottom: 28px; }
.method-steps { margin: 0; padding: 0; list-style: none; counter-reset: method; }
.method-steps li { counter-increment: method; display: grid; grid-template-columns: 40px 1fr; gap: 20px; border-top: 1px solid var(--rule); padding: 25px 0; }
.method-steps li::before { content: counter(method, decimal-leading-zero); color: var(--lime); font-size: .6875rem; padding-top: 4px; }
.method-steps h3 { font-size: 1.25rem; margin-bottom: 10px; }
.method-steps p { font-size: .9375rem; color: var(--muted); }
.service-explorer { border-block: 1px solid var(--rule-strong); }
.service-explorer > summary { cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 26px 0; font-size: 1.25rem; font-family: var(--font-display); list-style: none; }
.service-explorer > summary::-webkit-details-marker { display: none; }
.service-explorer > summary > span { display: flex; align-items: center; gap: 32px; font-size: .8125rem; font-family: var(--font-body); color: var(--muted); }
.service-explorer > summary span span { font-size: 1.4rem; transition: transform .2s; }
.service-explorer[open] > summary span span { transform: rotate(45deg); }
.service-explorer__body { padding: 20px 0 40px; }
.capitems { gap: 16px; }
.capcard { background: transparent; padding: 24px; }
.capcard__go { opacity: 1; transform: none; }
.capcard__name { font-weight: 750; font-size: 1rem; line-height: 1.4; letter-spacing: -.02em; }
.capcard__tags { font-size: .65rem; }
.commercial-signpost { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; padding-top: 30px; }
.commercial-signpost p { flex: 1; min-width: 220px; margin: 0; font-size: .9375rem; color: var(--muted); }
.area-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.area-feature h2 { margin-bottom: 26px; }
.area-feature p:not(.marker) { color: var(--muted); max-width: 43ch; font-size: 1rem; }
.area-links { list-style: none; margin: 0; padding: 0; }
.area-links a { display: flex; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: 1.25rem; text-decoration: none; color: var(--paper); }
.area-links a:hover { color: var(--lime); }
.home-enquiry h2 { font-size: clamp(3rem,5.5vw,5.4rem); margin-bottom: 30px; }
.home-enquiry .lead { max-width: 33ch; margin-bottom: 30px; }
.enquiry-note { font-size: .875rem; color: var(--muted); max-width: 37ch; }
.enquiry-note a { color: var(--paper); }
.enquiry-form-wrap { background: var(--plum-deep); padding: clamp(24px,3vw,44px); }
.form-intro { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.6; margin-bottom: 30px; }
.form-intro span { font-family: var(--font-body); font-size: .8125rem; color: var(--muted); }

/* Inner-page heroes preserve the real photo without placing copy over it.
   The image sizes match the preload in base.njk and the picture macro. */
.phero { display: block; background: var(--plum-deep); border-bottom: 1px solid var(--rule); }
.phero__inner { padding-block: 44px 64px; max-width: 1536px; gap: 20px; }
.phero h1 { max-width: 23ch; }
.phero__eyebrow { margin: 0; }
.phero__lead { font-size: 1.0625rem; line-height: 1.75; }
.crumbs { margin-bottom: 24px; }
.crumbs ol { font-size: .625rem; letter-spacing: .07em; }
.phero--photo { display: grid; grid-template-columns: 54% 46%; position: relative; }
.phero--photo > * { grid-area: auto; }
.phero--photo .phero__inner { grid-column: 1; grid-row: 1; padding-right: clamp(24px,4vw,60px); }
.phero--photo .phero__media { grid-column: 2; grid-row: 1; min-height: 420px; }
.phero--photo .phero__pic { position: absolute; inset: 0; }
.phero--photo h1 { font-size: clamp(2.5rem,3.7vw,3.75rem); }
.phero--photo .phero__actions .btn { padding-inline: 20px; }
.phero__actions { align-items: center; gap: 16px 24px; }
.panel, .incl__col { padding: 32px; box-shadow: none; border-top: 2px solid var(--lime); }
.panel__title, .incl__col h3 { font-size: .75rem; }
.panel dt, .capgrid dt, .jobfacts dt, .projlist__facts dt { font-size: .6875rem; letter-spacing: .08em; }
.panel dl { gap: 23px; }
.panel dd { line-height: 1.7; }
.prose-block h2 { font-size: clamp(1.75rem,2.6vw,2.65rem); line-height: 1.2; margin-bottom: 24px; }
.prose-block p { line-height: 1.8; }
.cards { gap: 20px; }
.card { padding: 32px; background: transparent; }
.card__eyebrow { font-size: .6875rem; }
.card__name { font-weight: 750; font-size: 1.35rem; line-height: 1.3; }
.card__desc { font-size: .9375rem; line-height: 1.7; }
.card__go { font-size: 1.4rem; }
.faqs { max-width: 900px; }
.faq summary { padding-block: 25px; font-size: 1.125rem; }
.faq__body p { font-size: 1rem; line-height: 1.8; }
.projlist__item { padding-block: 50px; }
.projlist__title { font-weight: 750; font-size: clamp(1.75rem,3vw,2.75rem); }
.projlist__facts { padding-top: 24px; }
.guiderow { padding-block: 32px; }
.guiderow__name { font-weight: 750; }
.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 68ch); justify-content: space-between; gap: 60px; }
.guide-toc { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; font-size: .875rem; border-top: 2px solid var(--lime); padding-top: 24px; }
.guide-toc ol { padding: 0; margin: 0 0 24px; list-style: none; }
.guide-toc a { color: var(--muted); display: block; padding-block: 10px; text-decoration: none; border-bottom: 1px solid var(--rule); }
.guide-toc a:hover { color: var(--lime); }
.guide__h { font-size: clamp(1.6rem,2.4vw,2.4rem); }
.form { gap: 24px; }
.form__pair { display: grid; gap: 24px; }
.form label { font-size: .875rem; letter-spacing: 0; text-transform: none; color: var(--paper); }
.form input, .form select, .form textarea { background-color: var(--ink); border-color: var(--rule-strong); padding: 14px 16px; }
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233b6225' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
.form input[type='file'] { border-style: dashed; min-height: 80px; }
.form input[aria-invalid='true'], .form textarea[aria-invalid='true'], .form select[aria-invalid='true'] { border-color: #9c2938; }
.form-error { color: #9c2938; font-size: .8125rem; margin: 0; }
.form-summary { padding: 18px; border-left: 3px solid #9c2938; background: #fce9e9; color: #75202c; font-size: .9375rem; }
.form__hint { line-height: 1.7; }
.routes { border-top-width: 1px; }
.routes a { padding-block: 24px; }
.routes__name { font-weight: 750; }
.routes__note { letter-spacing: .07em; }
.footer { border-top: 0; }
.footer__top { padding-block: 72px 55px; }
.footer .logo-stacked { width: 160px; }
.footer__col h3, .facts dt { font-size: .625rem; color: var(--paper); }
.footer__col a { display: inline-block; padding-block: 3px; }
.footer__legal { text-transform: none; letter-spacing: .01em; }
/* Content stays visible. Motion is limited to small hover feedback, so neither
   scrolling nor slow scripts can hide a paragraph or delay a form appearing. */
html.js .reveal { opacity: 1; transform: none; }
@media (max-width: 1100px) {
  .method-grid, .area-feature { gap: 40px; }
  .guide-layout { grid-template-columns: 210px minmax(0,1fr); gap: 40px; }
}
@media (max-width: 899px) {
  .section-intro { grid-template-columns: 1fr; gap: 24px; }
  .section-intro > p { max-width: 55ch; }
  .method-grid, .area-feature { grid-template-columns: 1fr; }
  .method-intro h2 br { display: none; }
  .method-intro h2 { max-width: 15ch; }
  .phero--photo { display: flex; flex-direction: column; }
  .phero--photo .phero__inner { order: -1; padding-right: var(--gutter); }
  .phero--photo .phero__media { min-height: 0; height: 300px; margin-inline: var(--gutter); margin-bottom: 30px; }
  .phero--photo h1 { font-size: var(--t-display); }
  .guide-layout { display: block; }
  .guide-toc { position: static; margin-bottom: 48px; }
  .guide-toc ol { columns: 2; column-gap: 30px; }
  .guide-toc li { break-inside: avoid; }
}
@media (max-width: 620px) {
  .audience-grid { grid-template-columns: 1fr; }
  .audience, .audience + .audience { padding: 30px 0; border-left: 0; }
  .audience + .audience { border-top: 1px solid var(--rule); }
  .audience__label { margin-bottom: 20px; }
  .work-grid { grid-template-columns: 1fr; gap: 36px; }
  .work-card + .work-card { margin-top: 0; }
  .section-intro { margin-bottom: 32px; }
  .service-explorer > summary { font-size: 1.05rem; }
  .service-explorer > summary > span { gap: 12px; font-size: .75rem; }
  .head { margin-bottom: 32px; }
  .panel, .incl__col, .card { padding: 24px; }
  .phero__inner { padding-block: 28px 40px; }
  .phero__actions { flex-direction: column; align-items: stretch; }
  .phero__actions .text-link { align-self: flex-start; }
  .phero--photo .phero__media { height: 230px; }
  .guide-toc ol { columns: 1; }
  .routes a { flex-wrap: wrap; gap: 8px; }
  .footer__nav { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer__col:last-child { grid-column: 1/-1; }
  .footer__col:last-child ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .footer__top { padding-block: 50px; gap: 44px; }
  .footer__col li { font-size: .875rem; }
  .capgrid { grid-template-columns: 1fr; }
  .stagelist__head { flex-wrap: wrap; }
  .stagelist__title { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .guide-toc, .assurance-strip { display: none; }
  .on-dark, .sec--plum { background: white !important; color: #111 !important; }
}

/* ---------------------------------------------------------------------------
   PRINT
   Anything a buyer might print — the capability statement above all — has to
   come out of a browser as a usable document. Dark backgrounds are dropped
   because they waste toner and read badly; links print with their destination
   so a paper copy is still checkable; and sections are kept off page breaks.
   --------------------------------------------------------------------------- */
@media print {
  @page { size: A4; margin: 16mm 14mm; }

  .header, .menu, .cta-block, .consent, .breadcrumbs,
  .skip-link, .form, .link-arrow { display: none !important; }

  html, body { background: #fff !important; color: #111 !important; }
  body { padding-bottom: 0; font-size: 10.5pt; }

  .sec, .sec--deep { background: #fff !important; padding-block: 10mm !important; }
  .container { max-width: none; padding-inline: 0; }

  h1, h2, h3, .head__title, .capgroup__title, .guide__h {
    color: #111 !important; page-break-after: avoid;
  }
  p, li, dd { color: #222 !important; }
  .marker, .capgrid dt, .caplist__aud, .capnote, .head__intro { color: #555 !important; }

  .panel { background: #f4f4f4 !important; border: 1px solid #ddd; }
  .hr, .capgrid > div, .capgroup__title, .capdate { border-color: #ccc !important; }

  /* A placeholder must survive printing — it is the whole point of the page. */
  .pv { color: #111 !important; background: #ffe9b8; border-bottom: 1.5px dotted #111; }

  a { color: #111 !important; text-decoration: underline; }
  .capgrid dd a::after, .caplist a::after, .ticks a::after {
    content: " (" attr(href) ")"; font-size: 8pt; color: #666;
  }

  section, .capgroup, .stages li, .guide__sec { page-break-inside: avoid; }
  .footer { border-top: 1px solid #ccc; }
}

/* Plain text navigation; no sticky contact bar or boxed menu actions. */
.menu__scroll { display: grid; grid-template-columns: 1fr .75fr; align-content: start; gap: 70px; padding-block: 45px; }
.menu__primary { list-style: none; margin: 0; padding: 0; }
.menu__primary a { display: block; padding: 10px 0; font-family: var(--font-display); font-size: clamp(1.7rem,4vw,2.8rem); line-height: 1.25; letter-spacing: -.04em; color: var(--paper); text-decoration: none; }
.menu__primary a[aria-current], .menu__primary a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.menu__secondary a { display: block; width: fit-content; min-height: 44px; padding-block: 9px; color: var(--muted); font-size: .9375rem; text-decoration: none; }
.menu__secondary a:hover { color: var(--paper); text-decoration: underline; }
.menu__label { margin: 22px 0 8px; font-size: .625rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.menu__label:first-child { margin-top: 14px; }
.menu__meta { font-size: .75rem; color: var(--muted); margin-top: 32px; }

/* Coverage: a working postcode finder, six destinations and evidenced work. */
.coverage h1 { font-size: clamp(3rem,6.5vw,6.25rem); letter-spacing: -.065em; line-height: 1.08; }
.coverage h2 { font-size: clamp(2rem,3.4vw,3.25rem); }
.coverage-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; padding-block: 75px 90px; align-items: center; }
.coverage-hero__lead { color: var(--muted); max-width: 47ch; margin-block: 28px; font-size: 1rem; }
.coverage-check { border-top: 3px solid var(--brand-plum); padding-top: 25px; }
.coverage-check__label { display: block; text-transform: uppercase; letter-spacing: .13em; font-size: .625rem; color: var(--muted); margin-bottom: 25px; }
.coverage-check h2 { font-size: clamp(1.5rem,2.4vw,2rem); margin-bottom: 14px; }
.coverage-check > p { color: var(--muted); font-size: .9375rem; max-width: 32ch; }
.coverage-check label { display: block; font-size: .8125rem; margin-block: 28px 8px; }
.coverage-check__input { display: flex; border-bottom: 1px solid var(--paper); }
.coverage-check__input input { min-width: 0; flex: 1; width: 100%; padding: 14px 0; background: transparent; border: 0; font: inherit; font-size: 1.1rem; color: var(--paper); border-radius: 0; }
.coverage-check__input input::placeholder { color: #716a6f; font-size: .9375rem; }
.coverage-check__input button { width: 54px; flex: none; border: 0; background: var(--brand-plum); color: #fff; font-size: 1.6rem; cursor: pointer; }
.coverage-check__input button:hover { background: #51223f; }
.coverage-check .coverage-check__hint { font-size: .75rem; color: var(--muted); line-height: 1.6; margin-top: 12px; }
#coverage-result:not(:empty) { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--rule); font-size: .9375rem; }
#coverage-result p { margin-bottom: 6px; }
#coverage-result a { color: var(--paper); }
.coverage-areas { border-top: 1px solid var(--rule); padding-block: 65px 80px; }
.coverage-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7vw; padding: 0; margin: 0; list-style: none; }
.coverage-list > li { border-top: 1px solid var(--rule-strong); }
.coverage-list a { display: grid; grid-template-columns: 30px 1fr 24px; gap: 20px; padding-block: 30px; text-decoration: none; color: var(--paper); height: 100%; }
.coverage-list__number { font-size: .6875rem; color: var(--muted); padding-top: 6px; }
.coverage-list h3 { font-size: clamp(1.6rem,2.5vw,2.25rem); margin-bottom: 12px; }
.coverage-list p { color: var(--muted); font-size: .9375rem; line-height: 1.65; max-width: 36ch; margin-bottom: 18px; }
.coverage-list__code { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; }
.coverage-list__arrow { font-size: 1.6rem; }
.coverage-list a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .17em; }
.coverage-project { display: grid; grid-template-columns: 1.1fr .9fr; }
.coverage-project__image { position: relative; min-height: 450px; }
.coverage-project__image picture, .coverage-project__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coverage-project__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px,5vw,80px); }
.coverage-project__copy h2 { margin-bottom: 25px; }
.coverage-project__copy > p:not(.marker) { color: var(--muted); max-width: 37ch; font-size: 1rem; margin-bottom: 25px; }
.coverage-outside { display: grid; grid-template-columns: 1fr .8fr; gap: 10vw; align-items: center; }
.coverage-outside > div > p:not(.marker) { color: var(--muted); font-size: 1rem; margin-bottom: 25px; max-width: 45ch; }
.area-heading { padding-block: 32px 0; }
.area-back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); font-size: .8125rem; }
.area-heading__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 7vw; padding-block: 40px 60px; align-items: end; }
.area-heading__grid > div > p:not(.marker) { color: var(--muted); font-size: 1rem; max-width: 46ch; }
.area-heading__grid .area-heading__lead { font-size: 1.3rem!important; color: var(--paper)!important; line-height: 1.5; }
.area-jumps { display: flex; flex-wrap: wrap; gap: 10px 32px; padding-block: 16px; border-block: 1px solid var(--rule); }
.area-jumps a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .8125rem; color: var(--paper); }
.area-jumps a:hover { text-decoration: underline; }
.area-planning, .area-resources, .area-postcodes { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; }
.area-planning > div > p:not(.marker), .area-resources > div > p:not(.marker), .area-postcodes > div > p:not(.marker) { margin-top: 25px; font-size: 1rem; color: var(--muted); max-width: 35ch; }
.area-checks { counter-reset: checks; list-style: none; padding: 0; margin: 0; }
.area-checks li { position: relative; counter-increment: checks; padding: 0 0 30px 50px; border-bottom: 1px solid var(--rule); margin-bottom: 30px; }
.area-checks li:last-child { margin-bottom: 0; }
.area-checks li::before { content: counter(checks, decimal-leading-zero); position: absolute; left: 0; top: 4px; font-size: .6875rem; color: var(--muted); }
.area-checks h3 { font-size: 1.45rem; margin-bottom: 17px; }
.area-checks p { font-size: .9375rem; color: var(--muted); }
.area-checks .area-checks__bring { font-size: .8125rem; padding-top: 6px; }
.area-checks__bring span { color: var(--paper); display: block; font-weight: 500; }
.area-resources__links > a { display: flex; justify-content: space-between; gap: 20px; padding-block: 25px; border-bottom: 1px solid var(--rule-strong); color: var(--paper); text-decoration: none; }
.area-resources__links > a:first-child { border-top: 1px solid var(--rule-strong); }
.area-resources__links strong { display: block; font-size: 1.125rem; font-weight: 500; }
.area-resources__links small { display: block; color: var(--muted); margin-top: 8px; font-size: .875rem; }
.area-resources__links a:hover strong { text-decoration: underline; }
.area-source-date { font-size: .6875rem; color: var(--muted); margin-top: 20px; }
.coverage-districts { align-self: start; border-block: 1px solid var(--rule-strong); }
.coverage-districts summary { display: flex; justify-content: space-between; align-items: center; padding-block: 24px; min-height: 60px; cursor: pointer; list-style: none; font-size: 1.25rem; }
.coverage-districts summary::-webkit-details-marker { display: none; }
.coverage-districts summary > span { font-size: 1.5rem; }
.coverage-districts[open] summary > span { transform: rotate(45deg); }
.coverage-districts ul { list-style: none; padding: 0; margin: 0 0 24px; }
.coverage-districts li a { display: grid; grid-template-columns: 54px 1fr 15px; gap: 15px; padding-block: 14px; border-top: 1px solid var(--rule); color: var(--paper); text-decoration: none; font-size: .875rem; }
.coverage-districts li a:hover { text-decoration: underline; }
.coverage-districts li strong { font-weight: 500; }
.coverage-districts li a > span:first-of-type { color: var(--muted); }
.area-enquiry { border-top: 1px solid var(--rule); }
@media (max-width: 799px) {
  .coverage-hero { grid-template-columns: 1fr; gap: 45px; padding-block: 45px 55px; }
  .coverage-hero h1 { font-size: clamp(3rem,9vw,4.8rem); }
  .coverage-check { max-width: 100%; }
  .coverage-check > p { max-width: none; }
  .coverage-check__label { margin-bottom: 15px; }
  .coverage-list { column-gap: 35px; }
  .coverage-list a { grid-template-columns: 1fr 20px; gap: 10px; }
  .coverage-list__number { display: none; }
  .coverage-project { grid-template-columns: 1fr; }
  .coverage-project__image { min-height: 0; aspect-ratio: 4/3; }
  .coverage-project__copy { padding: 40px var(--gutter); }
  .coverage-outside, .area-heading__grid, .area-planning, .area-resources, .area-postcodes { grid-template-columns: 1fr; gap: 32px; }
  .area-heading__grid { padding-block: 25px 40px; }
  .area-heading__grid > div > p, .area-planning > div > p:not(.marker), .area-resources > div > p:not(.marker), .area-postcodes > div > p:not(.marker) { max-width: none; }
  .area-checks li { padding-left: 35px; }
}
@media (max-width: 519px) {
  .menu__scroll { grid-template-columns: 1fr; gap: 30px; padding-top: 20px; }
  .menu__primary a { font-size: 1.75rem; padding-block: 8px; }
  .menu__secondary { border-top: 1px solid var(--rule); padding-top: 10px; }
  .coverage-list { grid-template-columns: 1fr; }
  .coverage-list a { padding-block: 25px; }
  .coverage-list h3 { font-size: 1.9rem; }
  .coverage-list p { max-width: 32ch; margin-bottom: 10px; }
  .coverage-list__arrow { padding-top: 0; }
  .coverage-areas .section-intro { margin-bottom: 30px; }
  .area-jumps { gap: 2px 22px; }
  .area-jumps a { font-size: .75rem; }
}

/* District guides: editorial covers, visible decisions and progressive detail. */
.district-cover { padding-top: 32px; }
.district-cover .crumbs { padding-top: 10px; }
.district-cover__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 7vw; align-items: center; padding: 32px 0 48px; }
.district-location { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-strong); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 25px; }
.district-location span:last-child { white-space: nowrap; }
.district-cover h1 { font-size: clamp(2.2rem,3.8vw,4rem); line-height: 1.08; letter-spacing: -.055em; max-width: 17ch; text-wrap: balance; margin-bottom: 22px; }
.district-standfirst { font-size: 1.1rem; color: var(--muted); max-width: 30ch; line-height: 1.6; }
.district-download { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: fit-content; max-width: 100%; min-height: 44px; border-bottom: 1px solid var(--rule-strong); color: var(--paper); font-size: .875rem; text-decoration: none; margin-top: 28px; }
.district-download:hover { border-color: var(--paper); }
.district-download span { font-size: 1.3rem; }
.district-download__note { display: block; font-size: .6875rem; margin-top: 9px; color: var(--muted); }
.district-study { margin: 0; min-width: 0; }
.district-study > img, .district-study > .pic { display: block; width: 100%; aspect-ratio: 3/2; height: auto; object-fit: cover; }
.district-study .pic img { width: 100%; height: 100%; object-fit: cover; }
.district-study figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 13px; font-size: .625rem; letter-spacing: .04em; color: var(--muted); }
.district-study figcaption a { color: var(--paper); min-height: 32px; }
.district-index { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--rule-strong); gap: 30px; }
.district-index a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; color: var(--paper); font-size: .8125rem; text-decoration: none; }
.district-index span { font-size: .625rem; color: var(--muted); }
.district-index a:hover { text-decoration: underline; }
.district-brief { padding-block: 45px 70px; }
.district-guide summary { cursor: pointer; list-style: none; }
.district-guide summary::-webkit-details-marker { display: none; }
.district-context { border-bottom: 1px solid var(--rule); margin-bottom: 35px; }
.district-context summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 0 20px; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.03em; }
.district-context > div { max-width: 72ch; padding-bottom: 12px; }
.district-context p { color: var(--muted); font-size: 1rem; }
.district-context .district-editorial-note { font-size: .75rem; }
.district-expand { font: 1.4rem var(--font-body); font-weight: 300; flex-shrink: 0; transition: transform .2s; }
.district-guide details[open] > summary > .district-expand { transform: rotate(45deg); }
.district-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.district-decision__number { font-size: .625rem; letter-spacing: .1em; color: var(--muted); margin-bottom: 18px; }
.district-decision h2 { font-size: clamp(1.6rem,2.4vw,2.2rem); line-height: 1.2; letter-spacing: -.045em; max-width: 23ch; margin-bottom: 24px; text-wrap: balance; }
.district-gather { font-size: .9375rem; color: var(--muted); max-width: 43ch; margin-bottom: 14px; }
.district-gather > span { display: block; font-size: .625rem; letter-spacing: .09em; text-transform: uppercase; color: var(--paper); margin-bottom: 8px; }
.district-explanation summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--rule-strong); font-size: .8125rem; }
.district-explanation > p { margin: 18px 0 0; font-size: .9375rem; color: var(--muted); }
.district-records { border-block: 1px solid var(--rule); background: #f6f6f6; padding-block: 65px; }
.district-records__grid, .district-work { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8vw; }
.district-records h2, .district-work h2 { font-size: clamp(1.9rem,3vw,3rem); line-height: 1.13; letter-spacing: -.045em; }
.district-records__intro > p:not(.marker) { font-size: .9375rem; color: var(--muted); margin-top: 20px; max-width: 32ch; }
.district-record { border-top: 1px solid var(--rule-strong); }
.district-record summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; font-size: 1rem; }
.district-record small { display: block; color: var(--muted); font-size: .6875rem; margin-top: 5px; }
.district-record > div { padding-bottom: 22px; }
.district-record p { font-size: .875rem; color: var(--muted); }
.district-record a { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding-block: 8px; font-size: .8125rem; color: var(--paper); }
.district-record a span { flex-shrink: 0; }
.district-source-note { color: var(--muted); font-size: .75rem; line-height: 1.6; margin-top: 22px; max-width: 60ch; }
.district-work { padding-block: 65px; }
.district-work .text-link { margin-top: 18px; }
.district-service { display: block; padding-block: 24px; border-top: 1px solid var(--rule-strong); color: var(--paper); text-decoration: none; }
.district-service h3 { display: flex; justify-content: space-between; gap: 18px; font-size: 1.25rem; margin-bottom: 10px; }
.district-service p { font-size: .875rem; color: var(--muted); margin: 0; }
.district-service:hover h3 { text-decoration: underline; }
.district-footer { border-top: 1px solid var(--rule); padding-block: 28px; }
.district-footer > p { font-size: .8125rem; color: var(--muted); max-width: 90ch; }
.district-footer strong { color: var(--paper); font-weight: 500; }
@media(max-width:799px) {
  .district-cover { padding-top: 20px; }
  .district-cover .crumbs { font-size: .5625rem; }
  .district-cover__grid { grid-template-columns: 1fr; gap: 27px; padding-top: 20px; padding-bottom: 28px; }
  .district-location { margin-bottom: 22px; padding-bottom: 13px; font-size: .6875rem; }
  .district-cover h1 { font-size: clamp(2.1rem,7vw,3.2rem); max-width: 20ch; margin-bottom: 16px; }
  .district-standfirst { font-size: 1rem; max-width: 30ch; margin-bottom: 12px; }
  .district-download { margin-top: 18px; }
  .district-study > img, .district-study > .pic { aspect-ratio: 1.8; }
  .district-study > img { object-fit: cover; }
  .district-index { gap: 16px; }
  .district-index a { font-size: .6875rem; padding-block: 15px; }
  .district-index span { display: none; }
  .district-brief { padding-block: 30px 42px; }
  .district-context { margin-bottom: 28px; }
  .district-context summary { font-size: 1.1rem; padding-bottom: 18px; }
  .district-decisions { grid-template-columns: 1fr; gap: 32px; }
  .district-decision h2 { font-size: 1.7rem; max-width: 25ch; margin-bottom: 19px; }
  .district-decision__number { margin-bottom: 12px; }
  .district-records { padding-block: 40px; }
  .district-records__grid, .district-work { grid-template-columns: 1fr; gap: 30px; }
  .district-records h2, .district-work h2 { font-size: 2rem; }
  .district-records__intro .marker { margin-bottom: 16px; }
  .district-records__intro > p:not(.marker) { margin-block: 16px 8px; }
  .district-records__intro .text-link { font-size: .8125rem; }
  .district-work { padding-block: 42px; }
}
@media print {
  .district-guide details > * { display: block!important; }
  .district-guide summary .district-expand { display: none; }
}

/* Location photography is a separate, credited collection from ATR's work. */
.district-study--location > .pic { aspect-ratio: 3/2; }
.district-study--location figcaption { display: block; padding-top: 14px; letter-spacing: 0; }
.district-photo-place { display: block; font-size: .8125rem; color: var(--paper); line-height: 1.5; }
.district-photo-context { display: block; margin-top: 5px; font-size: .6875rem; color: var(--muted); }
.district-photo-credit { margin-top: 5px; }
.district-photo-credit summary { display: flex; align-items: center; gap: 12px; min-height: 36px; width: fit-content; font-size: .6875rem; }
.district-photo-credit summary span { font-size: 1rem; }
.district-photo-credit[open] summary span { transform: rotate(45deg); }
.district-photo-credit p { font-size: .75rem; line-height: 1.6; margin: 3px 0 0; color: var(--muted); }
.district-photo-credit p a { display: inline; min-height: 0; overflow-wrap: anywhere; }
.district-evidenced-project { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7vw; padding-block: 65px; border-bottom: 1px solid var(--rule); }
.district-evidenced-project .pic { display: block; aspect-ratio: 3/2; }
.district-evidenced-project img { width: 100%; height: 100%; object-fit: cover; }
.district-evidenced-project h2 { font-size: clamp(1.8rem,3vw,3rem); }
.district-evidenced-project p:not(.marker) { color: var(--muted); font-size: .9375rem; margin-top: 20px; }
@media(max-width:799px) {
  .district-study--location > .pic { aspect-ratio: 3/2; }
  .district-evidenced-project { grid-template-columns: 1fr; gap: 28px; padding-block: 42px; }
}

/* Architectural direction: bold type, full-bleed work and explicit contrast.
   White and charcoal are surfaces; the original plum remains the action colour.
   Photographs are actual supplied work or separately credited local views. */
@media screen {
  :root { --t-display: clamp(3rem, 2rem + 4vw, 6.5rem); --t-h2: clamp(2.25rem,1.2rem + 3.5vw,4.5rem); --section-y: clamp(3.75rem,7vw,7rem); }
  .header { border-bottom: 1px solid #dedede; }
  .nav a { font-weight: 650; font-size: .9rem; }
  .header .btn { font-weight: 650; }
  .btn { font-family: var(--font-body); font-weight: 650; min-height: 54px; border: 1px solid currentColor; transition: background .18s,color .18s,border-color .18s; }
  .btn--primary { background: #370926; color: #fff; border-color: #370926; }
  .btn--primary:hover { background: #572342; color: #fff; border-color: #572342; }
  .btn--ghost { color: var(--paper); background: transparent; border-color: currentColor; }
  .btn--ghost:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
  .on-dark .btn--primary, .sec--plum .btn--primary { background: #fff; color: #202020; border-color: #fff; }
  .on-dark .btn--primary:hover, .sec--plum .btn--primary:hover { background: #e7e7e7; color: #202020; border-color: #e7e7e7; }
  .btn--onlime { background: #202020; color: #fff; border-color: #202020; }
  .btn--onlime:hover { background: #454545; color: #fff; border-color: #454545; }
  .text-link { font-weight: 600; font-size: 1rem; }
  .on-dark .text-link:hover, .sec--plum .text-link:hover { color: #fff; border-color: #fff; }
  :focus-visible { outline: 3px solid #702856; outline-offset: 4px; }
  .on-dark :focus-visible, .sec--plum :focus-visible { outline-color: #b5e996; }

  .home-hero { position: relative; isolation: isolate; display: grid; min-height: min(840px, calc(100svh - var(--header-h))); padding: 70px var(--gutter) 112px; align-items: center; overflow: hidden; }
  .home-hero__figure { position: absolute; inset: 0; margin: 0; }
  .home-hero__photo { position: absolute; inset: 0; z-index: -2; }
  .home-hero__photo, .home-hero__photo img { display: block; width: 100%; height: 100%; }
  .home-hero__photo img { object-fit: cover; object-position: center 52%; }
  .home-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.54) 44%,rgba(0,0,0,.08) 80%),linear-gradient(0deg,rgba(0,0,0,.75),transparent 28%); }
  .home-hero__copy { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin-inline: auto; }
  .home-hero h1 { font-size: clamp(4.5rem,8.2vw,8rem); line-height: .94; letter-spacing: -.055em; font-weight: 850; margin: 0 0 28px; text-wrap: initial; }
  .home-hero__description { font-size: clamp(1rem,1.3vw,1.2rem); line-height: 1.55; max-width: 35ch; color: #fff; margin-bottom: 28px; }
  .home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
  .home-hero__actions .text-link { color: #fff; border-color: rgba(255,255,255,.7); }
  .home-hero__figure figcaption { position: absolute; z-index: 2; bottom: 28px; right: var(--gutter); left: var(--gutter); display: flex; justify-content: flex-end; font-size: .8125rem; color: #fff; }
  .home-hero__figure figcaption a { color: #fff; text-decoration: none; min-height: 44px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.6); }
  .section-intro h2 { line-height: 1.02; }
  .section-intro { margin-bottom: 50px; }
  .audience-grid { gap: 0; border: 0; }
  .audience, .audience + .audience { padding: clamp(28px,4vw,60px); border: 0; background: #ededed; }
  .audience--commercial { --paper: #fff; --muted: #d0d0d0; --rule: #626262; --rule-strong: #b7b7b7; }
  .audience.audience--commercial { background: #202020; color: #fff; }
  .audience__label { text-transform: none; letter-spacing: 0; font-size: .9375rem; margin-bottom: 52px; }
  .audience h3 { font-size: clamp(2.1rem,3.6vw,3.5rem); font-weight: 800; letter-spacing: -.04em; margin-bottom: 22px; }
  .audience__bottom { border-bottom: 0; border-top: 1px solid var(--rule); padding-bottom: 0; margin-top: 28px; }
  .audience__bottom span { border: 0; border-radius: 0; font-size: 2rem; }
  .audience:hover .audience__bottom span { background: transparent; color: inherit; transform: translate(3px,-3px); }
  .selected-work { background: #fff; padding-top: 0; }
  .work-grid { grid-template-columns: 1.6fr 1fr; gap: 5vw; }
  .work-card + .work-card { margin-top: 130px; }
  .work-card__photo { aspect-ratio: 5/4; }
  .work-card + .work-card .work-card__photo { aspect-ratio: 1; }
  .work-card__meta { text-transform: none; letter-spacing: 0; font-size: .875rem; }
  .work-card__meta > span:last-child { display: none; }
  .work-card h3 { font-weight: 750; }
  .home-method { background: #202020; }
  .method-intro h2 { font-weight: 800; font-size: clamp(3rem,5vw,5rem); }
  .method-steps li { grid-template-columns: 1fr; }
  .method-steps li::before { content: none; }
  .method-steps h3 { font-size: 1.4rem; font-weight: 700; }
  .service-explorer > summary { font-weight: 700; }
  .capcard, .card { border: 0; border-top: 1px solid var(--rule-strong); padding: 30px 0; background: transparent; box-shadow: none; }
  .capitems, .cards { column-gap: 36px; row-gap: 8px; }
  .card::before, .capcard::before { display: none; }
  .card:hover, .capcard:hover { background: transparent; box-shadow: none; }
  .card:hover .card__name, .capcard:hover .capcard__name { text-decoration: underline; text-underline-offset: .18em; }
  .card__eyebrow, .capcard__tags { text-transform: none; letter-spacing: 0; }
  .card__name { font-size: 1.5rem; }
  .area-feature h2 { font-weight: 800; }
  .area-links a { font-weight: 700; font-size: 1.6rem; padding-block: 22px; }
  .enquiry-form-wrap { background: #f2f2f2; }
  .form input, .form select, .form textarea { border: 1px solid #8b8b8b; background-color: #fff; color: #202020; }
  .form input:focus, .form select:focus, .form textarea:focus { border-color: #370926; outline: 2px solid #370926; outline-offset: 2px; }
  .phero { background: #fff; border-bottom: 1px solid #c9c9c9; }
  .phero__inner { padding-block: 42px 70px; gap: 25px; }
  .phero h1 { font-weight: 820; max-width: 20ch; }
  .phero__lead { line-height: 1.65; max-width: 54ch; }
  .phero--photo { background: #202020; --ink: #202020; --paper: #fff; --muted: #d0d0d0; --lime: #fff; --rule-strong: #b0b0b0; color: #fff; }
  .phero--photo h1 { font-size: clamp(2.8rem,4.8vw,5rem); }
  .phero--photo .btn--primary { background: #fff; color: #202020; border-color: #fff; }
  .phero--photo .btn--primary:hover { background: #e7e7e7; border-color: #e7e7e7; }
  .phero--photo :focus-visible { outline-color: #b5e996; }
  .crumbs ol { text-transform: none; letter-spacing: 0; font-size: .75rem; }
  .panel { background: #f1f1f1; border: 0; }
  .panel__title, .incl__col h3 { text-transform: none; letter-spacing: 0; font-size: 1.25rem; font-weight: 750; }
  .panel dt, .capgrid dt, .jobfacts dt, .projlist__facts dt { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 700; }
  .faq summary { font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; }
  .routes__name { font-size: 1.25rem; }
  .routes__note { text-transform: none; letter-spacing: 0; }
  .menu__primary a { font-weight: 800; }
  .menu__label { text-transform: none; letter-spacing: 0; font-size: .8125rem; font-weight: 700; }
  .coverage h1 { font-weight: 820; }
  .coverage-check { background: #f1f1f1; padding: 30px; border: 0; }
  .coverage-check__label { text-transform: none; letter-spacing: 0; font-size: .875rem; }
  .coverage-list h3 { font-weight: 780; }
  .district-cover__grid { gap: 5vw; align-items: start; padding-top: 28px; }
  .district-location { text-transform: none; letter-spacing: 0; font-size: 1rem; border: 0; margin-bottom: 24px; padding: 0; font-weight: 600; }
  .district-location span:last-child { font-weight: 800; }
  .district-cover h1 { font-weight: 820; font-size: clamp(2.8rem,4.5vw,4.8rem); line-height: 1.02; letter-spacing: -.045em; }
  .district-study--location > .pic { aspect-ratio: 1.12; }
  .district-index { border-top: 2px solid #202020; }
  .district-index a { font-size: .9375rem; font-weight: 650; }
  .district-decision h2 { font-weight: 750; }
  .district-gather > span { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: .875rem; }
  .district-records { background: #ededed; }
  .district-records h2, .district-work h2 { font-weight: 780; }
  .district-record summary { font-weight: 650; }
  .district-download { padding: 12px 16px; border: 1px solid #202020; font-weight: 600; }
  .district-download:hover { background: #202020; color: #fff; }
  .footer { border-top: 1px solid #555; background: #202020; }
  .footer__col h3 { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 750; }
}
@media screen and (max-width: 899px) {
  .home-hero { min-height: 760px; padding-top: 72px; }
  .home-hero h1 { font-size: clamp(4.5rem,10vw,6.5rem); }
  .home-hero::before { background: linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.28)),linear-gradient(0deg,rgba(0,0,0,.7),transparent 40%); }
  .phero--photo .phero__media { margin: 0; height: 380px; }
  .phero--photo .phero__inner { padding-bottom: 40px; }
  .phero--photo h1 { font-size: clamp(2.6rem,6.5vw,4.5rem); }
}
@media screen and (max-width: 620px) {
  .home-hero { min-height: 700px; min-height: max(680px,calc(100svh - var(--header-h))); padding: 55px var(--gutter) 108px; align-items: center; }
  .home-hero h1 { font-size: clamp(3.6rem,15vw,5.7rem); line-height: .98; margin-bottom: 26px; }
  .home-hero__photo img { object-position: center; }
  .home-hero__description { max-width: 29ch; font-size: 1.0625rem; }
  .home-hero__actions { align-items: flex-start; flex-direction: column; gap: 13px; }
  .home-hero__actions .btn { width: auto; }
  .home-hero__figure figcaption { bottom: 22px; font-size: .75rem; justify-content: flex-start; }
  .home-hero__figure figcaption a { gap: 12px; }
  .audience__label { margin-bottom: 32px; }
  .audience h3 { font-size: 2.5rem; }
  .work-grid { grid-template-columns: 1fr; gap: 38px; }
  .work-card + .work-card { margin-top: 0; }
  .work-card + .work-card .work-card__photo { aspect-ratio: 5/4; }
  .method-intro h2 { font-size: 3rem; }
  .phero__inner { padding-block: 28px 42px; gap: 22px; }
  .phero h1 { font-size: clamp(2.6rem,10vw,3.8rem); }
  .phero--photo .phero__media { height: 270px; }
  .phero__actions { align-items: flex-start; }
  .phero__actions .btn { width: auto; }
  .district-cover h1 { font-size: clamp(2.6rem,10vw,3.6rem); }
  .district-cover__grid { gap: 30px; }
  .district-study--location > .pic { aspect-ratio: 1.35; }
  .district-index { gap: 14px; }
  .district-index a { font-size: .75rem; }
  .district-location { font-size: .9375rem; margin-bottom: 20px; }
  .district-download { margin-top: 22px; }
  .coverage-check { padding: 24px; }
  .section-intro { margin-bottom: 32px; }
  .home-enquiry h2 { font-size: 3.25rem; }
}

@media screen {
  .filters__label, .capgroup__name, .tag, .footer__strap, .facts dt { text-transform: none; letter-spacing: 0; }
  .capgroup__name { font-size: 1.25rem; font-weight: 750; }
  .filters__label { font-size: .875rem; }
}
@media screen and (max-width: 360px) {
  .phero h1, .district-cover h1, .coverage h1 { font-size: 2.25rem; }
  h1, h2, h3 { overflow-wrap: anywhere; }
}