/* ============================================================
   Brentwood Plumbing — Workshop Press
   Design system: industrial-utilitarian, sign-painter clarity.
   One stylesheet. No build step. No external CSS deps.
   ============================================================ */

/* ---------- Self-hosted variable fonts (latin) ---------- */
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-var-latin.woff2") format("woff2-variations"),
       url("/fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Big Shoulders";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/big-shoulders-display-var-latin.woff2") format("woff2-variations"),
       url("/fonts/big-shoulders-display-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette — warm paper / ink / steel / signal */
  --paper:       #F7F3EC;
  --paper-dim:   #EFE9DE;
  --trim:        #D9CFBE;
  --ink:         #0B0B0E;
  --ink-2:       #2B2B33;
  --ink-mute:    #5C5C66;
  --steel:       #1B3A6F;
  --steel-deep:  #122951;
  --caution:     #E2473B;
  --caution-deep:#B3392F;
  --safe:        #1F8A4A;
  --hairline:    rgba(11,11,14,0.18);

  /* Type families */
  --ff-body:    "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-display: "Big Shoulders", "Plex Sans", system-ui, sans-serif;
  --ff-mono:    "Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Fluid sizes */
  --fs-micro: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
  --fs-small: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --fs-body:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lead:  clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-h3:    clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-h2:    clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h1:    clamp(2.5rem, 1.6rem + 4.4vw, 5rem);
  --fs-sign:  clamp(3rem, 1.6rem + 7vw, 7rem);
  --fs-phone: clamp(2rem, 1rem + 5vw, 4rem);

  /* Spacing */
  --space-3xs: clamp(0.25rem, 0.22rem + 0.1vw, 0.375rem);
  --space-2xs: clamp(0.375rem, 0.34rem + 0.15vw, 0.5rem);
  --space-xs:  clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  --space-md:  clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  --space-lg:  clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem);
  --space-xl:  clamp(2rem, 1.5rem + 2.2vw, 4rem);
  --space-2xl: clamp(3rem, 2rem + 4vw, 6rem);

  /* Layout */
  --container: 1240px;
  --border-w: 2px;
  --radius: 0;
  --shadow-press: 4px 4px 0 var(--ink);
  --shadow-press-sm: 3px 3px 0 var(--ink);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --d-fast: 140ms;
  --d-med: 280ms;

  color-scheme: light;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle, rgba(11,11,14,0.06) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 0 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a {
  color: var(--steel);
  text-decoration-color: var(--steel);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--caution); text-decoration-color: var(--caution); }
:focus-visible {
  outline: 3px solid var(--steel);
  outline-offset: 2px;
}
::selection { background: var(--ink); color: var(--paper); }

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

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.section { padding-block: var(--space-2xl); }
.section-tight { padding-block: var(--space-xl); }
.stack > * + * { margin-block-start: var(--space-md); }
.stack-sm > * + * { margin-block-start: var(--space-sm); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.eyebrow {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
}
.eyebrow--steel { color: var(--steel); }
.eyebrow--steel::before { background: var(--steel); }
.eyebrow--paper { color: var(--paper); }
.eyebrow--paper::before { background: var(--paper); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0; }
h4 { font-size: var(--fs-body); font-family: var(--ff-body); font-weight: 700; letter-spacing: 0.02em; text-transform: none; line-height: 1.3; }
p { margin: 0; max-width: 62ch; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 50ch; }

/* ---------- LIVE availability strip (top, screams "we're here now") ---------- */
.live-strip {
  background: var(--caution);
  color: var(--paper);
  border-block-end: var(--border-w) solid var(--ink);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.live-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding-block: 0.55rem;
  flex-wrap: wrap;
  text-align: center;
}
.live-strip-inner > span { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.live-strip-inner > span + span::before {
  content: "";
  width: 4px; height: 4px;
  background: rgba(247,243,236,0.6);
  display: inline-block;
  margin-inline-end: 0.5rem;
}
.live-dot {
  position: relative;
  width: 10px; height: 10px;
  background: #34D399;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px var(--caution);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #34D399;
  border-radius: 50%;
  animation: pulse-ring 1.6s ease-out infinite;
  opacity: 0.85;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; opacity: 0; }
}
.live-strip a {
  color: var(--paper);
  text-decoration-color: var(--paper);
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}
.live-strip a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- Marquee ticker strip (top of page) ---------- */
.ticker {
  background: var(--ink);
  color: var(--paper);
  border-block-end: var(--border-w) solid var(--ink);
  overflow: hidden;
  padding-block: 0.55rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ticker-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}
.ticker-track > span { display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; }
.ticker-track > span::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--caution);
  border-radius: 50%;
  display: inline-block;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------- Site header ---------- */
.site-header {
  background: var(--paper);
  border-block-end: var(--border-w) solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--caution);
  color: var(--paper);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.04em;
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-press-sm), inset 0 0 0 1.5px var(--paper);
}
.brand-sub {
  display: none;
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-block-start: 0.2rem;
}
@media (min-width: 600px) { .brand-sub { display: block; } }
.brand-stack { display: flex; flex-direction: column; line-height: 1; }

.nav-primary { display: none; }
@media (min-width: 900px) {
  .nav-primary {
    display: flex;
    gap: clamp(1rem, 1vw + 0.5rem, 1.75rem);
    justify-content: center;
    font-family: var(--ff-mono);
    font-size: var(--fs-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .nav-primary a {
    color: var(--ink);
    text-decoration: none;
    padding-block: 0.4rem;
    border-block-end: 2px solid transparent;
    transition: border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
  }
  .nav-primary a:hover,
  .nav-primary a[aria-current="page"] {
    color: var(--ink);
    border-block-end-color: var(--caution);
  }
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  border: var(--border-w) solid var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.header-cta:hover { background: var(--caution); color: var(--paper); transform: translateY(-1px); }
.header-cta-label { display: none; }
@media (min-width: 480px) { .header-cta-label { display: inline; } }

/* Mobile nav button */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  margin-inline-start: 0.5rem;
}
@media (min-width: 900px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-nav {
  border-block-start: var(--border-w) solid var(--ink);
  background: var(--paper);
  padding: var(--space-md) clamp(1rem, 4vw, 2rem);
}
.mobile-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.mobile-nav a {
  display: block;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--hairline);
}
.mobile-nav a[aria-current="page"] { color: var(--caution); }
.mobile-nav[hidden] { display: none; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
  box-shadow: var(--shadow-press);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(0,0); box-shadow: 2px 2px 0 var(--ink); }
.btn--caution { background: var(--caution); color: var(--paper); }
.btn--caution:hover { background: var(--caution-deep); color: var(--paper); }
.btn--steel { background: var(--steel); color: var(--paper); }
.btn--steel:hover { background: var(--steel-deep); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--big { min-height: 60px; padding: 1rem 1.6rem; font-size: var(--fs-body); }
.btn-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---------- Emergency hero (homepage, urgent variant) ---------- */
.hero-em {
  position: relative;
  padding-block: var(--space-lg) var(--space-xl);
  overflow: clip;
  background:
    radial-gradient(circle at 90% -10%, rgba(226,71,59,0.10), transparent 40%),
    radial-gradient(circle at -10% 110%, rgba(27,58,111,0.10), transparent 45%);
}
.hero-em::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.hero-em > * { position: relative; z-index: 1; }
.hero-em-grid {
  display: block;
  max-width: 880px;
}
.hero-em-grid > div { display: block; }
.hero-em-eyebrow {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--caution);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  border: var(--border-w) solid var(--caution);
  background: rgba(226,71,59,0.06);
}
.hero-em-eyebrow .live-dot { box-shadow: 0 0 0 2px var(--paper); }
.hero-em h1 {
  font-size: clamp(2.5rem, 1.6rem + 5.2vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-block-start: var(--space-md);
}
.hero-em h1 em {
  font-style: normal;
  color: var(--caution);
}
.hero-em h1 .underline {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.hero-em h1 .underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 0.12em;
  background: var(--caution);
  z-index: -1;
}
.hero-em-sub {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  margin-block-start: var(--space-md);
  max-width: 36ch;
}

/* Mega phone block — the loudest thing on the page */
.phone-mega {
  margin-block-start: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  border: var(--border-w) solid var(--ink);
  background: var(--caution);
  color: var(--paper);
  box-shadow: var(--shadow-press);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.phone-mega:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); color: var(--paper); }
.phone-mega-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.7rem 1rem;
  background: rgba(11,11,14,0.18);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-block-end: 1px solid rgba(247,243,236,0.25);
}
.phone-mega-top .live-dot { box-shadow: 0 0 0 2px var(--caution); }
.phone-mega-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 1.2rem + 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  padding: 1rem 0.75rem;
  color: var(--paper);
  white-space: nowrap;
}
.phone-mega-num svg { width: 0.85em; height: 0.85em; flex-shrink: 0; }
.phone-mega-num svg { width: 0.9em; height: 0.9em; flex-shrink: 0; }
.phone-mega-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem 0.8rem;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-block-start: 1px solid rgba(247,243,236,0.25);
  background: rgba(11,11,14,0.18);
}

/* Dispatch row — 3 chevroned steps */
.dispatch-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-block-start: var(--space-md);
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
}
@media (min-width: 540px) { .dispatch-row { grid-template-columns: repeat(3, 1fr); } }
.dispatch-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-inline-end: 1px solid var(--hairline);
  border-block-end: 1px solid var(--hairline);
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
}
.dispatch-cell:last-child { border-inline-end: 0; border-block-end: 0; }
@media (min-width: 540px) { .dispatch-cell { border-block-end: 0; } }
.dispatch-cell-num {
  display: inline-grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.dispatch-cell strong { font-weight: 500; color: var(--ink); }
.dispatch-cell span { color: var(--ink-mute); display: block; font-size: var(--fs-micro); }

/* ---------- Emergency triage ("first 60 seconds") ---------- */
.triage {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--space-xl);
  border-block-start: var(--border-w) solid var(--ink);
  border-block-end: var(--border-w) solid var(--ink);
  position: relative;
  overflow: clip;
}
.triage::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(226,71,59,0.06) 0 12px, transparent 12px 24px);
  pointer-events: none;
}
.triage-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-block-end: var(--space-lg);
}
.triage-head h2 {
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--paper);
  max-width: 18ch;
}
.triage-head .eyebrow {
  color: var(--caution);
}
.triage-head .eyebrow::before { background: var(--caution); }
.triage-tag {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--caution);
  padding: 0.45rem 0.8rem;
  border: var(--border-w) solid var(--paper);
}
.triage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: var(--border-w) solid var(--paper);
}
@media (min-width: 720px) { .triage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .triage-grid { grid-template-columns: repeat(3, 1fr); } }
.triage-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-inline-end: 1px solid rgba(247,243,236,0.2);
  border-block-end: 1px solid rgba(247,243,236,0.2);
}
.triage-item-num {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--caution);
  padding-block-start: 0.2rem;
}
.triage-item h3 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--paper);
}
.triage-item p {
  margin-block-start: 0.4rem;
  color: rgba(247,243,236,0.78);
  font-size: var(--fs-small);
}

/* ---------- ETA panel ---------- */
.eta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
}
@media (min-width: 720px) { .eta { grid-template-columns: repeat(3, 1fr); } }
.eta-cell {
  padding: var(--space-lg);
  border-inline-end: 1px solid var(--hairline);
  border-block-end: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.eta-cell:last-child { border-inline-end: 0; }
@media (min-width: 720px) { .eta-cell { border-block-end: 0; } }
.eta-time {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.eta-time small {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.45em;
  margin-inline-start: 0.3em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eta-where {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--caution);
}
.eta-note { color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- Quote-capture card (hero right column) ---------- */
.quote-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
  position: relative;
}
.quote-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-block-end: var(--border-w) solid var(--ink);
}
.quote-card-head strong {
  color: var(--caution);
  font-weight: 500;
}
.quote-card-head-stars {
  color: var(--caution);
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  line-height: 1;
}
.quote-card-body {
  padding: var(--space-md) var(--space-md) var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}
.quote-card h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.quote-card-sub {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: 0.25rem;
}
.quote-card label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-block-end: 0.3rem;
}
.quote-card input,
.quote-card select {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  border-radius: 0;
  color: var(--ink);
}
.quote-card input:focus,
.quote-card select:focus {
  outline: none;
  background: var(--paper-dim);
  border-color: var(--steel);
}
.quote-card .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.quote-card-submit {
  margin-block-start: 0.4rem;
  width: 100%;
  min-height: 56px;
  background: var(--caution);
  color: var(--paper);
  border: var(--border-w) solid var(--ink);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.quote-card-submit:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); background: var(--caution-deep); }
.quote-card-orcall {
  text-align: center;
  padding: 0.85rem 1rem;
  background: var(--paper-dim);
  border-block-start: var(--border-w) solid var(--ink);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.quote-card-orcall a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: 0.4rem;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  font-size: 1rem;
  text-decoration: none;
}
.quote-card-orcall a:hover { color: var(--caution); }

/* ---------- Guarantee pills (under phone in hero) ---------- */
.guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: var(--space-md);
  list-style: none;
  padding: 0;
}
.guarantees li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.guarantees li svg {
  width: 0.95rem; height: 0.95rem;
  color: var(--safe);
}

/* ---------- Trade badges row ---------- */
.badges {
  background: var(--paper);
  border-block-start: var(--border-w) solid var(--ink);
  border-block-end: var(--border-w) solid var(--ink);
}
.badges-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 720px) { .badges-inner { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .badges-inner { grid-template-columns: repeat(5, 1fr); } }
.badge {
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  border-inline-end: 1px solid var(--hairline);
  border-block-end: 1px solid var(--hairline);
}
.badge:last-child { border-inline-end: 0; }
.badge-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  border: var(--border-w) solid var(--ink);
  padding: 0.5rem 0.75rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  white-space: nowrap;
}
.badge-mark--gassafe { background: #FFC72C; color: var(--ink); }
.badge-mark--watersafe { background: var(--steel); color: var(--paper); border-color: var(--steel); }
.badge-mark--ciphe { background: var(--paper); color: var(--ink); }
.badge-mark--checkatrade { background: #002B5C; color: var(--paper); border-color: #002B5C; }
.badge-mark--google { background: var(--paper); color: var(--ink); }
.badge-mark--google .stars { color: #FBBC05; letter-spacing: 0.05em; margin-inline-end: 0.3rem; }
.badge-name {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Big numbers strip (Pimlico-style) ---------- */
.numbers {
  background: var(--steel);
  color: var(--paper);
  border-block-end: var(--border-w) solid var(--ink);
}
.numbers-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 720px) { .numbers-inner { grid-template-columns: repeat(4, 1fr); } }
.numbers-cell {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-inline-end: 1px solid rgba(247,243,236,0.18);
  border-block-end: 1px solid rgba(247,243,236,0.18);
  text-align: left;
}
.numbers-cell:last-child { border-inline-end: 0; }
.numbers-big {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--paper);
}
.numbers-big small {
  font-size: 0.4em;
  color: var(--caution);
  margin-inline-start: 0.2em;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.numbers-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,243,236,0.75);
}

/* ---------- Why Choose Us cards ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 600px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-press-sm);
  position: relative;
}
.why-card::before {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: -2px;
  width: 28%;
  height: 6px;
  background: var(--caution);
}
.why-card-icon {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border: var(--border-w) solid var(--ink);
}
.why-card-icon svg { width: 1.5rem; height: 1.5rem; }
.why-card-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.why-card-desc { font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- Reviews / testimonials ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 720px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-press-sm);
  position: relative;
}
.review-stars {
  color: #FBBC05;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  line-height: 1;
}
.review-quote {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
  position: relative;
  padding-inline-start: 0;
}
.review-quote::before {
  content: "“";
  position: absolute;
  font-family: var(--ff-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--caution);
  inset-inline-start: -0.4rem;
  inset-block-start: -0.3rem;
  opacity: 0.18;
  pointer-events: none;
}
.review-meta {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.review-name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.review-loc {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Full-bleed signature banner strip ---------- */
.signature-strip {
  background: var(--ink);
  border-block-start: var(--border-w) solid var(--ink);
  border-block-end: var(--border-w) solid var(--ink);
  padding-block: var(--space-lg);
}
.signature-strip-inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 880px) {
  .signature-strip-inner { grid-template-columns: 0.9fr 1.4fr; gap: var(--space-lg); }
}
.signature-strip-text { color: var(--paper); }
.signature-strip-text h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.4rem);
  line-height: 1;
  color: var(--paper);
}
.signature-strip-text p {
  margin-block-start: var(--space-sm);
  color: rgba(247,243,236,0.8);
  font-size: var(--fs-small);
}
.signature-strip-img {
  border: var(--border-w) solid var(--paper);
  overflow: hidden;
}
.signature-strip-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--space-xl) var(--space-2xl);
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); }
}
.hero-head .eyebrow { margin-block-end: var(--space-md); }
.hero-title {
  font-size: var(--fs-h1);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.hero-title em {
  font-style: normal;
  color: var(--steel);
  display: inline-block;
}
.hero-lead { margin-block-start: var(--space-md); }
.hero-actions {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Hero image card */
.hero-banner {
  position: relative;
  border: var(--border-w) solid var(--ink);
  background: var(--ink);
  box-shadow: var(--shadow-press);
}
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}
.hero-banner::after {
  content: "BRENTWOOD · ESSEX · CB & CM POSTCODES";
  position: absolute;
  inset-block-end: -1.05rem;
  inset-inline-start: var(--space-md);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  padding: 0.35rem 0.7rem;
  border: var(--border-w) solid var(--ink);
}

/* Phone display card (sign-painter scale) */
.phone-card {
  margin-block-start: var(--space-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: stretch;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-press);
  overflow: hidden;
}
.phone-card-stub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.9rem 0.8rem;
  background: var(--caution);
  color: var(--paper);
  border-inline-end: var(--border-w) solid var(--ink);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.phone-card-body {
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  justify-content: center;
}
.phone-card-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.phone-card-num {
  display: block;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-phone);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.phone-card-num:hover { color: var(--caution); }
.phone-card-meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block-start: 0.25rem;
}
.phone-card-meta strong { color: var(--caution); font-weight: 500; }

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--ink);
  color: var(--paper);
  border-block-start: var(--border-w) solid var(--ink);
  border-block-end: var(--border-w) solid var(--ink);
}
.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 0;
}
@media (min-width: 720px) { .trust-bar-inner { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .trust-bar-inner { grid-template-columns: repeat(5, 1fr); } }
.trust-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: var(--space-md) clamp(0.85rem, 2vw, 1.25rem);
  border-inline-end: 1px solid rgba(247,243,236,0.18);
  border-block-end: 1px solid rgba(247,243,236,0.18);
}
.trust-cell:last-child { border-inline-end: 0; }
.trust-cell-num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.trust-cell-num small {
  font-size: 0.6em;
  color: var(--caution);
  font-weight: 700;
  margin-inline-start: 0.15em;
}
.trust-cell-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,243,236,0.7);
}

/* ---------- Section heading ---------- */
.section-head {
  display: grid;
  gap: var(--space-sm);
  margin-block-end: var(--space-xl);
  max-width: 60ch;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-self: center; }
.section-head-title {
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* ---------- Service rows (catalogue style) ---------- */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: var(--border-w) solid var(--ink);
}
.service-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--hairline);
  position: relative;
  transition: background var(--d-fast) var(--ease-out);
}
.service-row:last-child { border-block-end: var(--border-w) solid var(--ink); }
.service-row:hover { background: var(--paper-dim); }
.service-row:hover .service-num { color: var(--caution); }
.service-num {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  min-width: 4.5rem;
  padding-block-start: 0.3rem;
  transition: color var(--d-fast) var(--ease-out);
}
.service-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}
@media (min-width: 760px) {
  .service-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; }
  .service-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr); gap: var(--space-lg); align-items: baseline; }
}
.service-title {
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.01em;
}
.service-desc { color: var(--ink-2); font-size: var(--fs-body); }
.service-tag {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  justify-self: start;
}
.service-tag--emergency { background: var(--caution); color: var(--paper); border-color: var(--caution); }

/* ---------- Area grid ---------- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
}
@media (min-width: 720px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }
.area-cell {
  padding: var(--space-md);
  border-inline-end: 1px solid var(--hairline);
  border-block-end: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--paper);
  transition: background var(--d-fast) var(--ease-out);
}
.area-cell:hover { background: var(--paper-dim); }
.area-cell-name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.area-cell-postcode {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Steps (how it works) ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  padding: var(--space-lg);
  border-inline-end: 1px solid var(--hairline);
  border-block-end: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--paper);
}
.step:last-child { border-inline-end: 0; border-block-end: 0; }
@media (min-width: 760px) {
  .step { border-block-end: 0; }
  .step:not(:last-child) { border-inline-end: 1px solid var(--hairline); }
}
.step-num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-sign);
  line-height: 0.85;
  color: var(--steel);
  letter-spacing: -0.04em;
}
.step h3 { font-size: var(--fs-h3); }
.step p { color: var(--ink-2); }

/* ---------- Callout (huge sign block) ---------- */
.callout {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--space-2xl);
  position: relative;
  overflow: clip;
}
.callout::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(247,243,236,0.04) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.callout-sign {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: var(--fs-sign);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--paper);
}
.callout-sign em {
  font-style: normal;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--paper);
  text-stroke: 2px var(--paper);
  color: transparent;
}
.callout-strap {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--caution);
  margin-block-end: var(--space-md);
}
.callout p { color: rgba(247,243,236,0.85); }
.callout .btn { margin-block-start: var(--space-lg); }

/* ---------- FAQ ---------- */
.faq { border-block-start: var(--border-w) solid var(--ink); }
.faq details {
  border-block-end: 1px solid var(--hairline);
  padding-block: var(--space-md);
}
.faq details:last-child { border-block-end: var(--border-w) solid var(--ink); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border: var(--border-w) solid var(--ink);
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.faq details[open] summary::after {
  content: "−";
  background: var(--ink);
  color: var(--paper);
}
.faq details p {
  margin-block-start: var(--space-sm);
  color: var(--ink-2);
}

/* ---------- Forms ---------- */
.form {
  display: grid;
  gap: var(--space-md);
  max-width: 38rem;
  padding: var(--space-lg);
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-press);
}
.form-row { display: grid; gap: 0.35rem; }
.form-row label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 1rem; /* >=16px prevents iOS zoom */
  padding: 0.75rem 0.85rem;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.form-row textarea { resize: vertical; min-height: 8rem; line-height: 1.45; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: none; background: var(--paper-dim); border-color: var(--steel); }
.form-hint {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- Photo-led services row ---------- */
.photo-svc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 600px) { .photo-svc-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .photo-svc-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .photo-svc-row { grid-template-columns: repeat(5, 1fr); } }
.photo-svc {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
  box-shadow: var(--shadow-press-sm);
}
.photo-svc:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.photo-svc-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border-block-end: var(--border-w) solid var(--ink);
  overflow: hidden;
  background-image:
    repeating-linear-gradient(45deg, rgba(247,243,236,0.05) 0 10px, transparent 10px 20px);
}
.photo-svc-img > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.photo-svc-img > svg {
  width: 42%;
  height: 42%;
  color: var(--paper);
  filter: drop-shadow(0 2px 0 rgba(11,11,14,0.25));
}
.photo-svc-img--emergency { background: var(--caution); }
.photo-svc-img--pipes    { background: var(--steel); }
.photo-svc-img--drains   { background: var(--ink); }
.photo-svc-img--boilers  { background: var(--steel-deep); }
.photo-svc-img--taps     { background: var(--caution-deep); }
.photo-svc-img::after {
  content: attr(data-tag);
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-start: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 0.22rem 0.5rem;
  background: rgba(11,11,14,0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.photo-svc-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.photo-svc-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.photo-svc-desc {
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.45;
}
.photo-svc-link {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--hairline);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.photo-svc-link::after { content: "→"; transition: transform var(--d-fast) var(--ease-out); }
.photo-svc:hover .photo-svc-link::after { transform: translateX(3px); }

/* ---------- Service summary tile (used in homepage grid) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 720px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-press-sm);
  position: relative;
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.tile:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.tile-icon {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: var(--steel); color: var(--paper);
  border: var(--border-w) solid var(--ink);
}
.tile-icon svg { width: 1.4rem; height: 1.4rem; }
.tile-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.tile-desc { font-size: var(--fs-small); color: var(--ink-2); }
.tile-link {
  margin-block-start: auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.tile-link::after { content: "→"; transition: transform var(--d-fast) var(--ease-out); }
.tile:hover .tile-link::after { transform: translateX(3px); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--space-2xl) var(--space-md);
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 720px) { .site-footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.footer-brand { font-family: var(--ff-display); font-weight: 800; font-size: 2rem; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.footer-tagline { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,243,236,0.6); margin-block-start: var(--space-sm); }
.footer-col h4 {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--caution);
  margin-block-end: var(--space-sm);
  font-weight: 500;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.footer-col a { color: var(--paper); text-decoration: none; }
.footer-col a:hover { color: var(--caution); }
.footer-bottom {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid rgba(247,243,236,0.2);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  justify-content: space-between;
  font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(247,243,236,0.55);
}

/* ---------- Sticky mobile call bar ---------- */
.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--caution);
  color: var(--paper);
  border-block-start: var(--border-w) solid var(--ink);
  padding: 0.7rem clamp(0.75rem, 3vw, 1.25rem);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  z-index: 80;
  box-shadow: 0 -2px 0 rgba(11,11,14,0.2);
}
.call-bar-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
}
.call-bar-label strong { display: block; font-size: 0.9rem; font-weight: 500; }
.call-bar a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 0.65rem 0.9rem;
  border: 2px solid var(--ink);
  text-decoration: none;
  min-height: 44px;
  white-space: nowrap;
}
.call-bar a:hover { background: var(--paper); color: var(--ink); }
@media (min-width: 760px) { .call-bar { display: none; } }
@media (max-width: 759px) { body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } }

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  background: var(--paper);
  padding-block: var(--space-xl) var(--space-lg);
  border-block-end: var(--border-w) solid var(--ink);
}
.page-header h1 { font-size: var(--fs-h1); }
.crumb {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: var(--space-sm);
}
.crumb a { color: var(--ink-mute); text-decoration: none; }
.crumb a:hover { color: var(--caution); }

/* ---------- Two column prose layout ---------- */
.prose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 880px) { .prose-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); } }
.prose-grid h2 { font-size: var(--fs-h2); line-height: 0.95; letter-spacing: -0.02em; }
.prose-grid > div > * + * { margin-block-start: var(--space-md); }
.fact-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-xs);
}
.fact-list li {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--hairline);
  font-family: var(--ff-mono); font-size: var(--fs-small);
}
.fact-list li:last-child { border-block-end: 0; }
.fact-list dt, .fact-list .k {
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
  padding-block-start: 0.15rem;
}
.fact-list dd, .fact-list .v { margin: 0; color: var(--ink); }

/* ---------- Quick-jump chip nav ---------- */
.chip-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: var(--space-lg);
}
.chip-nav a {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.chip-nav a:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}

/* ---------- Check-list (services / about "what we do") ---------- */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.check-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.45;
}
.check-list li > svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--safe);
  margin-block-start: 0.32rem;
  flex-shrink: 0;
}

/* Bullet-list with mono caret */
.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.bullet-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.45;
}
.bullet-list li::before {
  content: "›";
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--caution);
}

/* ---------- Service detail block (services page) ---------- */
.svc-block {
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--hairline);
}
.svc-block:first-of-type { border-block-start: var(--border-w) solid var(--ink); }
.svc-block:last-of-type { border-block-end: var(--border-w) solid var(--ink); }
.svc-block-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 880px) {
  .svc-block-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-2xl);
  }
}
.svc-block-num {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-block-end: var(--space-sm);
}
.svc-block h2 {
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.svc-block .lead { margin-block-start: var(--space-md); max-width: 30ch; }
.svc-block-tag {
  display: inline-block;
  margin-block-start: var(--space-md);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.svc-block-tag--emergency { background: var(--caution); color: var(--paper); border-color: var(--caution); }
.svc-block-tag--routine { background: var(--steel); color: var(--paper); border-color: var(--steel); }
.svc-block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}
.svc-block-body h3 {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block-end: var(--space-sm);
}
.svc-block-body h3:not(:first-of-type) { margin-block-start: var(--space-lg); }
.svc-block-body > h3::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 2px;
  background: var(--caution);
  margin-inline-end: 0.6rem;
  vertical-align: middle;
}

/* ---------- Promise grid (about) ---------- */
.promise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 720px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .promise-grid { grid-template-columns: repeat(3, 1fr); } }
.promise-card {
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-press-sm);
  position: relative;
}
.promise-card-num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  line-height: 0.85;
  color: var(--caution);
  letter-spacing: -0.04em;
}
.promise-card h3 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.promise-card p {
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* ---------- Town detail block (areas page) ---------- */
.town-block {
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--hairline);
}
.town-block:first-of-type { border-block-start: var(--border-w) solid var(--ink); }
.town-block:last-of-type { border-block-end: var(--border-w) solid var(--ink); }
.town-block-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 880px) {
  .town-block-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); }
}
.town-block h2 {
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.town-block-postcode {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--caution);
  display: block;
  margin-block-end: var(--space-sm);
}
.town-block-eta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: var(--space-md);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  padding: 0.45rem 0.7rem;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
}
.town-block-eta strong { color: var(--caution); font-weight: 500; font-size: 1rem; }
.town-block-body h3 {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block-end: var(--space-sm);
}
.town-block-body h3:not(:first-of-type) { margin-block-start: var(--space-lg); }
.town-block-body > h3::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 2px;
  background: var(--caution);
  margin-inline-end: 0.6rem;
  vertical-align: middle;
}
.town-block .neighbourhoods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.town-block .neighbourhoods li {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--hairline);
  background: var(--paper);
}

/* ---------- 404 ---------- */
.notfound {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-2xl);
}
.notfound-num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(6rem, 4rem + 18vw, 14rem);
  line-height: 0.85;
  color: var(--steel);
  letter-spacing: -0.04em;
}

/* ---------- Print ---------- */
@media print {
  .ticker, .call-bar, .menu-toggle, .nav-primary { display: none !important; }
  body { background: white; padding: 0; }
  body::before { display: none; }
  .btn { box-shadow: none; }
}