/* ==========================================================================
   WiltshireTech — site.css
   One stylesheet. Tokens first, then components.
   Edit the tokens and the whole site follows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Metric-matched fallbacks
   Public Sans is ~5.6% wider than Arial and Bitter ~8% narrower than Georgia.
   While the web fonts were loading, every ch-based max-width and every button
   label was measured against the narrower system face, so widths and wrapping
   points jumped the moment the real fonts swapped in. On the Business page
   that moved the hero CTA row from two lines to one and produced a 0.11 CLS.
   Ratios measured against the real faces at 200px; these only affect the
   fallback shown during loading, never the final rendering.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Liberation Sans");
  size-adjust: 105.6%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: "Bitter Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 91.8%;
  line-gap-override: 0%;
  font-display: swap;
}

:root {
  /* Brand greens — the base identity */
  --green-900: #0E332C;
  --green-800: #12463C;
  --green-700: #165B4E;   /* primary brand colour */
  --green-600: #1D6F60;
  --green-100: #DCEAE4;
  --green-50:  #EDF4F0;

  /* Route colour: home customers (warm) */
  --sand-800: #7A4E0C;    /* text-safe on light */
  --sand-500: #C98A22;
  --sand-100: #F7E8C9;
  --sand-50:  #FCF6EA;

  /* Neutrals — chalk downland, not cream */
  --ink:       #17211F;
  --ink-soft:  #4C5A56;
  --line:      #DBDFD9;
  --chalk:     #F3F5F1;
  --white:     #FFFFFF;

  /* Type */
  --font-display: "Bitter", "Bitter Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", "Public Sans Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --step--1: 0.9375rem;
  --step-0:  clamp(1.0625rem, 1.0125rem + 0.22vw, 1.1875rem);
  --step-1:  clamp(1.1875rem, 1.125rem + 0.3vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --step-3:  clamp(1.625rem, 1.4rem + 1.05vw, 2.25rem);
  --step-4:  clamp(2.125rem, 1.75rem + 1.85vw, 3.25rem);

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

  /* Shape */
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(23, 33, 31, 0.06);
  --shadow-md: 0 6px 20px rgba(23, 33, 31, 0.09);

  --container: 1120px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--green-900);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

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

a { color: var(--green-700); text-underline-offset: 3px; }
a:hover { color: var(--green-900); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

strong { font-weight: 600; }

/* Focus — one dark ring, visible on every background we use */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--green-900);
  color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: var(--white); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 780px; }

.section { padding-block: clamp(3rem, 5.5vw, 6.5rem); }
.section--tight { padding-block: clamp(2.25rem, 3.5vw, 4.5rem); }
.section--chalk { background: var(--chalk); }
.section--green { background: var(--green-800); color: #E6EFEB; }
.section--green h2,
.section--green h3 { color: var(--white); }

.section-head { max-width: 60ch; margin-bottom: var(--sp-6); }
.section-head p { color: var(--ink-soft); margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}
.eyebrow--home { color: var(--sand-800); }

.lead {
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.55;
}

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 54px;
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary { background: var(--green-700); color: var(--white); }
.btn--primary:hover { background: var(--green-900); color: var(--white); }

.btn--secondary {
  background: var(--white);
  color: var(--green-800);
  border-color: var(--green-700);
}
.btn--secondary:hover { background: var(--green-50); color: var(--green-900); }

.btn--ghost { background: transparent; color: var(--green-800); border-color: var(--line); }
.btn--ghost:hover { background: var(--chalk); color: var(--green-900); }

.btn--light { background: var(--white); color: var(--green-800); }
.btn--light:hover { background: var(--green-50); color: var(--green-900); }

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

.btn svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 76px;
  padding-block: var(--sp-3);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  align-content: center;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--green-900);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--green-600); }
.logo:hover { color: var(--green-900); }

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

.header-phone {
  display: none;
  align-items: center;
  min-height: 44px;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--green-800);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--green-900); text-decoration: underline; }

/* Visible phone action below the desktop breakpoint, where .header-phone hides */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--green-700);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.header-call:hover { background: var(--green-900); color: var(--white); }

/* --------------------------------------------------------------------------
   Temporary phone state.

   The public number is not settled yet, so the site shows 01672 XXXXXX. That
   cannot be dialled, so nothing displaying it is a link any more — the markup
   is spans carrying the same classes, which keeps every layout identical for
   the swap back. These rules take away what is left of the interactive
   *look*: the pointer, the hover change and the pressed state. Delete this
   block, and restore the tel: hrefs, once the real number is in.
   -------------------------------------------------------------------------- */
span.header-phone,
span.header-call,
span.contact-methods__value,
.btn--static,
.contact-cta__phone { cursor: default; }

span.header-phone:hover { color: var(--green-800); text-decoration: none; }
span.header-call:hover { background: var(--green-700); }
.btn--static:hover,
.btn--static:active { transform: none; box-shadow: none; }

/* Matches the inline phone treatment beside it in the closing CTA. */
.contact-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--white);
  font-weight: 700;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--green-800);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--chalk); }

.site-nav {
  display: none;
  flex-basis: 100%;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.site-nav.is-open { display: block; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--sp-3) 0 var(--sp-5);
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: var(--sp-3) 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--green-900);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.site-nav a:hover { color: var(--green-600); }
.site-nav a[aria-current="page"] { color: var(--green-600); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .header-call { display: none; }
  .header-phone { display: inline-flex; }
  .header-inner { flex-wrap: nowrap; justify-content: flex-start; }
  .logo { order: 1; }
  .site-nav {
    display: block;
    flex-basis: auto;
    order: 2;
    margin-left: var(--sp-8);
    border-top: 0;
    background: transparent;
  }
  .site-nav ul { display: flex; gap: var(--sp-5); padding: 0; }
  .site-nav a { padding: var(--sp-2) 0; border-bottom: 3px solid transparent; font-size: 1rem; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--green-600); }
  .header-actions { order: 3; margin-left: auto; }
}

/* Small helpers used on the homepage */
.hero__note { margin-top: var(--sp-6); }
.section--green .lead { color: #CBDAD4; }
.price-card__unit { font-size: 1rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--chalk);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 4.5vw, 5.25rem);
}

.hero__intro { max-width: 44ch; margin-bottom: var(--sp-7); }
.hero__intro .lead { margin-bottom: 0; }
.hero__headline { margin-bottom: var(--sp-5); }
.hero h1 { margin-bottom: 0; }

/* On laptops and up the intro runs across two columns: the headline holds the
   left, the supporting line and reassurances sit alongside it rather than
   below. Saves roughly 140px of height, so both doors stay near the fold. */
@media (min-width: 1000px) {
  .hero__intro {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-6) var(--sp-8);
    align-items: end;
    max-width: none;
    margin-bottom: var(--sp-6);
  }
  .hero__headline { margin-bottom: 0; }
  .hero__meta { margin-top: var(--sp-4); }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
}
.hero__meta li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}
.hero__meta svg { color: var(--green-600); }

/* --------------------------------------------------------------------------
   7. The two doors — the signature element
   -------------------------------------------------------------------------- */
.doors { display: grid; gap: var(--sp-5); }
@media (min-width: 820px) { .doors { grid-template-columns: 1fr 1fr; } }

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 8px solid var(--green-600);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.door:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--ink);
}
.door--home { border-left-color: var(--sand-500); background: var(--sand-50); }
.door--business { border-left-color: var(--green-600); background: var(--white); }

.door__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  color: var(--green-700);
}
.door--home .door__icon { color: var(--sand-800); }

.door__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand-800);
  margin-bottom: var(--sp-2);
}
.door--business .door__label { color: var(--green-700); }

.door h2 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.door p { color: var(--ink-soft); margin-bottom: var(--sp-4); }

.door__examples {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.door__examples li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: var(--sp-2);
}
.door__examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sand-500);
}
.door--business .door__examples li::before { background: var(--green-600); }

.door__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-800);
}
.door--home .door__go { color: var(--sand-800); }
.door:hover .door__go { text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
}
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 0; }
.card__icon { width: 32px; height: 32px; margin-bottom: var(--sp-3); color: var(--green-600); }
.card--home .card__icon { color: var(--sand-800); }
.card--home { background: var(--sand-50); border-color: #EDE0C8; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   9. Trust band (the person behind it)
   -------------------------------------------------------------------------- */
.trust { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 800px) { .trust { grid-template-columns: 280px 1fr; gap: var(--sp-8); } }

/* 4:5 to match the photograph, so nothing is squeezed or cropped a second
   time by the layout. object-position sits slightly high because the head is
   in the upper part of the frame — if the box is ever shorter than the image,
   the shirt gives way before the face does. */
.trust__photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--chalk);
}
/* On a phone the block stacks, and a full-width portrait would push the
   words that matter off the screen. */
@media (max-width: 799px) {
  .trust__photo { max-width: 220px; }
}

.trust__points {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 620px) { .trust__points { grid-template-columns: 1fr 1fr; } }
.trust__points li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: 0;
  font-size: var(--step--1);
  font-weight: 500;
}
.trust__points svg { flex-shrink: 0; color: var(--green-600); margin-top: 3px; }

/* --------------------------------------------------------------------------
   10. Service cards with example lists
   -------------------------------------------------------------------------- */
.card__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  font-size: var(--step--1);
}
.card__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--sp-2);
  color: var(--ink);
}
.card__list li:last-child { margin-bottom: 0; }
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
}
.card--home .card__list li::before { background: var(--sand-500); }

/* --------------------------------------------------------------------------
   11. Steps — numbered because the order genuinely matters
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.steps li {
  margin: 0;
  padding-left: 3.75rem;
  position: relative;
  min-height: 3rem;
}
.steps h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.steps p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0; }

.step__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--sand-100);
  color: var(--sand-800);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
}
.steps--business .step__num { background: var(--green-100); color: var(--green-800); }

/* --------------------------------------------------------------------------
   12. Safety panel
   -------------------------------------------------------------------------- */
.safety {
  padding: var(--sp-6) var(--sp-5);
  background: var(--white);
  border: 2px solid var(--green-700);
  border-radius: var(--radius-lg);
}
@media (min-width: 720px) { .safety { padding: var(--sp-7); } }

.safety__statement {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-900);
  margin: 0 0 var(--sp-5);
  max-width: 34ch;
}

.safety__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .safety__list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); } }
.safety__list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: 0;
  font-size: var(--step--1);
}
.safety__list svg { flex-shrink: 0; margin-top: 4px; color: var(--green-700); }

.safety__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   13. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--sand-50);
  border-bottom: 1px solid #EDE0C8;
  padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
}
.page-hero--business { background: var(--green-50); border-bottom-color: var(--green-100); }
.page-hero__inner { max-width: 60ch; }
.page-hero h1 { margin-bottom: var(--sp-4); }
.page-hero .lead { margin-bottom: 0; }
.page-hero .cta-row { margin-top: var(--sp-6); }
.page-hero__aside {
  margin: var(--sp-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* A quiet line under a section's buttons, pointing at what is worth seeing
   next. Same weight as .page-hero__aside so the two read as one device. */
.section-aside {
  margin: var(--sp-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* Anchored jumps must clear the sticky header */
[id] { scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   14. Pricing strip
   -------------------------------------------------------------------------- */
.price-card {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
}
.price-card__amount {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--green-700);
  line-height: 1.1;
  margin-bottom: var(--sp-2);
}
.price-card__from {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.price-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.price-card p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0; }

.price-note {
  margin-top: var(--sp-5);
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form { max-width: 34rem; }

.field { margin-bottom: var(--sp-5); }

.field > label,
.fieldset legend {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--green-900);
}

.field__hint {
  display: block;
  margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 2px solid #B9C2BD;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }

/* On a narrow screen the example wraps to four or five lines, and at 7rem the
   last line was cut off mid-letter — which reads as a broken box rather than
   a hint. Tall enough here for the longest example to sit inside it. */
@media (max-width: 700px) {
  .field textarea { min-height: 10.5rem; }
}

.field input:hover,
.field textarea:hover { border-color: var(--green-600); }

/* Example text. Clearly lighter than real input, but still readable —
   4.8:1 against white, well above the 4.5:1 minimum. Firefox dims
   placeholders by default, hence the explicit opacity. */
.field input::placeholder,
.field textarea::placeholder {
  color: #626E6A;
  opacity: 1;
}

.fieldset {
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
}
.fieldset legend { padding: 0; }

.choices { display: grid; gap: var(--sp-3); }
@media (min-width: 480px) { .choices--2 { grid-template-columns: 1fr 1fr; } }

.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 54px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 2px solid #B9C2BD;
  border-radius: var(--radius);
  font-weight: 500;
  cursor: pointer;
}
.choice:hover { border-color: var(--green-600); background: var(--green-50); }
.choice input { width: 22px; height: 22px; accent-color: var(--green-700); flex-shrink: 0; }
.choice:has(input:checked) { border-color: var(--green-700); background: var(--green-50); }

.form__required { color: var(--sand-800); font-weight: 700; }

.form__note {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Honeypot: hidden from people, visible to the bots that fill everything in */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact methods list */
.contact-methods { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.contact-methods li { margin: 0; }
.contact-methods h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.contact-methods p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.contact-methods__value {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--green-800);
  text-decoration: none;
}
.contact-methods__value:hover { color: var(--green-900); text-decoration: underline; }

.contact-layout { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) {
  /* The form leads and takes the wider column; phone and email sit beside it
     as the alternative for people who would rather not type, rather than as an
     equal third of the page. */
  .contact-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
}

/* Quieter than the form: smaller heading, lighter rule, no card chrome. */
.contact-layout > div:last-child { align-self: start; }
.contact-layout > div:last-child > h2 {
  font-size: var(--step-1);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--line);
}
@media (min-width: 900px) {
  .contact-layout > div:last-child > h2 { border-top: 0; padding-top: 0; }
}


/* --------------------------------------------------------------------------
   Context-aware enquiry forms
   -------------------------------------------------------------------------- */
.enquiry-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--sand-50);
  border-left: 5px solid var(--sand-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 34rem;
}
.enquiry-context[hidden] { display: none; }
.enquiry-context span {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--sand-800);
}
.enquiry-context b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--green-900);
}

.form__note--top { margin-top: 0; }

.form__warn {
  padding: var(--sp-3) var(--sp-4);
  background: var(--chalk);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 500;
}

.form__error {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: #FBEAE6;
  border-left: 5px solid #A32E14;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: #7A2410;
}
.form__error[hidden] { display: none; }

.field input[aria-invalid="true"] { border-color: #A32E14; }

.enquiry-confirm {
  max-width: 34rem;
  padding: var(--sp-6);
  background: var(--green-50);
  border: 2px solid var(--green-700);
  border-radius: var(--radius-lg);
}
.enquiry-confirm[hidden] { display: none; }
.enquiry-confirm__tick {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-800);
}
.enquiry-confirm h2 { margin-bottom: var(--sp-3); }
.enquiry-confirm h2:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.enquiry-confirm p { margin-bottom: 0; }

/* Quiet per-card route into a tailored enquiry */
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--green-800);
  text-decoration: none;
}
.card--home .card__cta { color: var(--sand-800); }
.card__cta:hover { text-decoration: underline; }
.card__cta svg { transition: transform 0.15s ease; }
.card__cta:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .card__cta:hover svg { transform: none; }
}

/* --------------------------------------------------------------------------
   16. Coverage
   -------------------------------------------------------------------------- */
.towns {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.towns li {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   17. Contact CTA
   -------------------------------------------------------------------------- */
.contact-cta { text-align: left; }
.contact-cta p { color: #CBDAD4; }
.contact-cta .cta-row { margin-top: var(--sp-6); }

.contact-phone {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
}
.contact-phone:hover { color: var(--white); text-decoration: underline; }

/* The quieter second route out of a closing CTA. Phone and email stay plainly
   visible and easy to tap, but they no longer compete with the enquiry button
   as a third equal option. */
.contact-cta__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-5) 0 0;
  font-size: var(--step--1);
  color: #CBDAD4;
}
.contact-cta__alt a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-cta__alt a:hover { text-decoration-thickness: 2px; }

/* A short reassurance under a primary enquiry button. */
.cta-note {
  max-width: 54ch;
  margin: var(--sp-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--green-900);
  color: #C3D3CD;
  /* A footer, not another section: the old 48px/32px block made this read as
     a final content band on a 1440px screen. */
  padding-block: var(--sp-6) var(--sp-5);
  font-size: var(--step--1);
}

/* Grouped rather than spread edge to edge. The columns keep the site's left
   margin but stop short of the far side, so they read as one block. */
.footer-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sp-6);
    max-width: 60rem;
  }
}

.site-footer h2 {
  font-size: 0.8125rem;
  color: var(--white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
  font-weight: 700;
}

.site-footer .logo { color: var(--white); margin-bottom: var(--sp-2); }
.site-footer .logo span { color: #7FBDA9; }
.site-footer p { color: #C3D3CD; margin: 0; max-width: 34ch; line-height: 1.5; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }

/* The hit area comes from padding rather than a rigid 44px min-height: with a
   12px list margin on top, that combination produced a 56px gap per link and
   was most of the old footer's height. Coarse pointers get the full 44px back
   below. */
.site-footer a {
  display: inline-flex;
  align-items: center;
  padding-block: 5px;
  color: var(--white);
  text-decoration: none;
}
.site-footer li > span,
.site-footer li:not(:has(a)) { display: inline-flex; padding-block: 5px; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

/* Touch devices and stacked layouts keep a full-size target. */
@media (max-width: 719px), (pointer: coarse) {
  .site-footer a { min-height: 44px; }
}

.footer-bottom {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #A9BFB8;
}

/* --------------------------------------------------------------------------
   Legal pages (privacy, terms)
   Plain reading pages. No new visual language - just a comfortable measure
   and a little more air between sections than a marketing page needs.
   -------------------------------------------------------------------------- */
.page-hero--plain { padding-block: var(--sp-8) var(--sp-6); background: var(--chalk); }
.legal-updated { margin: var(--sp-5) 0 0; font-size: var(--step--1); color: var(--ink-soft); }

.legal h2 {
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--line);
  font-size: var(--step-2);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--step-0); }
.legal p { margin: 0 0 var(--sp-4); max-width: 68ch; }
.legal ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); max-width: 68ch; }
.legal li { margin-bottom: var(--sp-2); }
.legal li::marker { color: var(--green-600); }
.legal a { color: var(--green-800); text-underline-offset: 3px; }

/* A quiet legal row inside the existing compact footer: it shares the bottom
   bar rather than adding a fourth column, so the footer keeps its height. */
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
/* min-height:0 kept the footer compact but left these at 31px, under the
   40px the rest of the site holds to. Padding gets the height back
   without adding a row. */
.footer-legal a {
  min-height: 40px;
  min-width: 44px;
  justify-content: center;
  padding: var(--sp-2) var(--sp-1);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.stack > * + * { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   20. Screen tiers
   -------------------------------------------------------------------------- */

/* Grid children default to min-width:auto, which lets long words force
   horizontal scroll. This is the guard against that. */
.grid > *, .doors > *, .trust > *, .footer-grid > * { min-width: 0; }
.card p, .door p, .price-card p, .site-footer p { overflow-wrap: break-word; }

/* --- Phones: keep the header on one row so the sticky bar stays shallow.
       Call keeps its label because it is the primary action; Menu drops to
       its icon but keeps its name for screen readers. --- */
@media (max-width: 439px) {
  .logo { font-size: 1.2rem; }
  .header-inner { gap: var(--sp-2); }
  .header-call { padding: var(--sp-2) var(--sp-3); }
  .nav-toggle { padding: var(--sp-2) var(--sp-3); }
  .nav-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .site-nav { flex-basis: 100%; }
}

/* --- Very small phones (down to 320px) --- */
@media (max-width: 379px) {
  .door { padding: var(--sp-5) var(--sp-4) var(--sp-4); border-left-width: 6px; }
  .btn { padding-inline: var(--sp-4); width: 100%; }
  .cta-row { gap: var(--sp-3); }
  .contact-phone { font-size: var(--step-1); }
}

/* --- Phones: stack CTAs full width so nothing is a narrow target --- */
@media (max-width: 519px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .hero__meta { gap: var(--sp-2) var(--sp-4); }
}

/* --- Laptops with limited vertical space: keep both doors near the fold --- */
@media (min-width: 1000px) and (max-height: 940px) {
  .hero { padding-block: 2.5rem 3.25rem; }
  .hero__intro { margin-bottom: var(--sp-6); }
  .header-inner { min-height: 68px; }
}

/* --- Large displays: widen the measure and open the spacing.
       Beyond 1900px the root size steps up too, so the whole design scales
       rather than sitting as a small island in the middle of the screen.
       Every size in this file is in rem, so this is all it takes. --- */
@media (min-width: 1600px) {
  :root {
    --container: 1240px;
    --gutter: 3rem;
  }
  .doors { gap: var(--sp-6); }
  .trust { grid-template-columns: 20rem 1fr; }
  .trust__photo { max-width: 20rem; }
  .section-head { margin-bottom: var(--sp-7); }
}

@media (min-width: 1900px) {
  html { font-size: 107.5%; }
  :root { --container: 1340px; }
}

@media (min-width: 2400px) {
  html { font-size: 115%; }
  :root { --container: 1480px; }
}

/* --- Landscape phones and ~200% browser zoom: release the sticky header
       so it cannot swallow the viewport --- */
@media (max-height: 500px) {
  .site-header { position: static; }
}

/* --------------------------------------------------------------------------
   21. Motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .door:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Restored enquiry draft
   Shown only when enquiry.js actually put something back. Deliberately
   quieter than the context strip above it: this is a reassurance, not a
   status the visitor has to act on.
   -------------------------------------------------------------------------- */
.enquiry-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--green-50);
  border-left: 5px solid var(--green-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 34rem;
  font-size: var(--step--1);
  color: var(--green-900);
}
.enquiry-draft[hidden] { display: none; }
.enquiry-draft svg { flex-shrink: 0; color: var(--green-700); }
/* 9rem, not 14: at 320px a 14rem basis pushed the icon onto a line of its
   own, which read as a stray mark above the text. */
.enquiry-draft span { flex: 1 1 9rem; min-width: 0; }

.enquiry-draft button {
  min-height: 44px;
  /* No side padding: when the button wraps to its own row it then lines up
     with the text above it rather than sitting slightly indented. */
  padding: var(--sp-2) 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--green-800);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.enquiry-draft button:hover { color: var(--green-900); }