/* ==========================================================================
   VC Electrical Contractors — site stylesheet
   Ported from the Claude Design prototypes (project/*.dc.html).

   The prototypes carried every rule as an inline style because that is how
   the design tool works. Here the same values live as tokens + component
   classes so the visual output is identical but the markup stays readable.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Layout primitives
     4.  Typography
     5.  Buttons & links
     6.  Site header / nav / mobile call bar
     7.  Site footer
     8.  Hero
     9.  Trust strip
     10. Panels, rate lines, process line, tables
     11. Triage rows & routing lists
     12. Duotone imagery
     13. Testimonial band
     14. FAQ accordion
     15. Interactive tools (shared shell)
     16. Forms & GHL embed placeholder
     17. Enquiry band
     18. Utilities
     19. Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — darkest to lightest */
  --ink: #101215;          /* page ground */
  --ink-deep: #0c0e11;     /* trust strip, footer */
  --ink-raised: #131519;   /* alternate section band */
  --panel: #17191d;        /* cards, form card, testimonial band */
  --panel-hi: #1f2229;     /* selected tile */

  /* Lines */
  --line: #2a2d33;
  --line-field: #2f3339;
  --line-ghost: #3a3e45;

  /* Text */
  --text: #d8d9db;
  --text-bright: #fff;
  --text-soft: #c4c7cc;
  --muted: #8a8f96;
  --muted-deep: #5a5f66;
  --muted-dim: #4a4e55;

  /* Brand */
  --yellow: #ffe000;
  --yellow-hi: #ffd000;
  --yellow-soft: #fff04d;
  --blue: #5ea8f0;
  --blue-hi: #8cc2f5;
  --blue-deep: #0a338a;    /* enquiry band */
  --blue-deep-text: #d7e0f5;
  --blue-deep-muted: #c7d2ea;
  --red: #ff5c5c;
  --green: #4ec97e;

  /* Type */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;

  /* Metrics */
  --wrap: 72rem;
  --gutter: 1.25rem;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --call-bar-h: 3.6rem;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

/* Several components set an explicit `display`, which out-specifies the UA
   rule for [hidden]. Everything here toggles visibility with el.hidden, so
   make the attribute win outright. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--call-bar-h);   /* clears the fixed mobile call bar */
}

@media (min-width: 48rem) { body { padding-bottom: 0; } }

img, svg { max-width: 100%; }

a { color: var(--blue); }
a:hover { color: var(--blue-hi); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link — keyboard users land here first */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 800;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--ink); }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 48rem; }

.section { padding: 3.5rem 0; }
.section--lead { padding: 4rem 0 4.5rem; }
.section--edge { border-top: 1px solid var(--line); }
.section--raised { background: var(--ink-raised); }
.section--tight { padding: 2.5rem 0; }

/* Two-column: content + supporting media */
.grid-2 { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .grid-2 { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .grid-2--top { align-items: start; }
  .grid-2--even { grid-template-columns: 1fr 1fr; }
}

/* Three-column card row */
.grid-3 { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Auto-fitting card grid */
.grid-auto { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* Contact page: rail + form */
.grid-form { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .grid-form { grid-template-columns: 5fr 7fr; gap: 3.5rem; } }

.stack { display: flex; flex-direction: column; gap: 2rem; }
.stack--sm { gap: .75rem; }
.stack--xs { gap: .4rem; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.kicker {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--yellow);
}

/* The 34×4 yellow bar that opens most sections */
.rule { width: 34px; height: 4px; background: var(--yellow); margin-bottom: 10px; }

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.06;
  text-wrap: balance;
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
  color: var(--text-bright);
}
.h1--sm { font-size: clamp(2rem, 5.2vw, 3.2rem); }

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.12;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  color: var(--text-bright);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--text-bright);
}

.h4 { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--text-bright); }

/* Emphasis inside a heading — reads as colour, not italics */
h1 em, h2 em, .h1 em, .h2 em { font-style: normal; color: var(--yellow); }

.lede { margin-top: 1.2rem; font-size: 1.15rem; max-width: 36rem; text-wrap: pretty; }
.lede--wide { max-width: 38rem; }

.prose > * + * { margin-top: 1rem; }
.prose { max-width: 42rem; text-wrap: pretty; }
.prose strong { color: var(--text-bright); }

.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* Mono-ish fact line under a hero: price · turnaround · accreditation */
.facts {
  margin-top: 1.4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 2;
  letter-spacing: .01em;
}

/* Small uppercase label above a value */
.label {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--muted);
}
.label--tight { font-size: .72rem; letter-spacing: .09em; }

/* Big typographic region list */
.regions {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.9;
  color: var(--text-bright);
}
.regions .sep { color: var(--muted-deep); font-weight: 400; font-size: .85rem; padding: 0 .5rem; }

/* A quoted aside with a yellow spine */
.note-spine { border-left: 3px solid var(--yellow); padding-left: 1.1rem; }
.note-spine p { font-size: .98rem; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row--top { margin-top: 1.75rem; }

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  padding: .9rem 1.6rem;
  border-radius: var(--radius-sm);
  border: none;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary:hover { background: var(--yellow-hi); color: var(--ink); }

.btn--ghost {
  font-weight: 700;
  background: none;
  border: 1.5px solid var(--line-ghost);
  color: var(--text-bright);
}
.btn--ghost:hover { border-color: var(--yellow); color: var(--text-bright); }

.btn--sm { font-size: .95rem; font-weight: 700; padding: .75rem 1.2rem; }
.btn--block { display: block; width: 100%; font-size: 1.05rem; padding: 1rem 1.6rem; }

/* Ghost link that turns yellow — used for "next step" chips */
.chip {
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  color: var(--text-bright);
  border: 1.5px solid var(--line-ghost);
  border-radius: var(--radius-sm);
  padding: .75rem 1.2rem;
  display: inline-block;
}
.chip:hover { border-color: var(--yellow); color: var(--yellow); }

/* Yellow forward link */
.link-fwd { color: var(--yellow); text-decoration: none; font-weight: 700; font-size: .92rem; }
.link-fwd:hover { color: var(--yellow-soft); }

/* Quiet list link that warms on hover */
.link-quiet { color: var(--text); text-decoration: none; }
.link-quiet:hover { color: var(--yellow); }

/* --------------------------------------------------------------------------
   6. Site header / nav / mobile call bar
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .85rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}

.site-header__logo { display: block; flex-shrink: 0; }
.site-header__logo img { display: block; height: 46px; width: auto; }

.site-header__actions { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }

/* Narrow phones: the logo, phone number and menu button have to share ~350px
   of usable width, so tighten everything before anything can overflow. */
@media (max-width: 26rem) {
  .site-header__inner { gap: .6rem; padding: .7rem 1rem; }
  .site-header__logo img { height: 36px; }
  .site-header__actions { gap: .6rem; }
  .site-header__phone { font-size: .92rem; }
  .site-nav__toggle-label { display: none; }
  .site-nav__toggle { padding: .5rem .6rem; }
}

.site-header__phone {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .98rem;
  color: var(--yellow);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__phone:hover { color: var(--yellow-soft); }

/* Top bar — phone and estimate button, split out of the main header so the
   menu has room. Hidden on phones, which keep the phone number in the header
   and the fixed call bar at the bottom. */
.topbar { display: none; background: var(--ink-deep); border-bottom: 1px solid var(--line); font-size: .84rem; }
.topbar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .45rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.topbar__claims { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--muted); font-weight: 600; margin: 0; }
.topbar__claims .dot { color: var(--blue); }
.topbar__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.topbar__phone {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  color: var(--yellow);
  text-decoration: none;
  white-space: nowrap;
}
.topbar__phone small { font-family: var(--font-body, inherit); font-weight: 600; font-size: .8rem; color: var(--muted); margin-right: .15rem; }
.topbar__phone:hover { color: var(--yellow-soft); }
.topbar__cta {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 800;
  font-size: .85rem;
  padding: .42rem .95rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}
.topbar__cta:hover { background: var(--yellow-hi); color: var(--ink); }
@media (min-width: 48rem) {
  .topbar { display: block; }
  .site-header__phone { display: none; }
}
@media (max-width: 56rem) { .topbar__claims span:nth-child(n+2) { display: none; } }
@media (min-width: 62rem) { .site-header__inner { padding-top: 1rem; padding-bottom: 1rem; } }

/* Desktop nav — appears at 62rem. The phone number and estimate button live
   in the top bar above, which leaves room for all six menu items. */
.site-nav { display: none; font-size: .93rem; font-weight: 600; }

@media (min-width: 62rem) {
  .site-nav { display: flex; gap: 1.9rem; align-items: center; white-space: nowrap; font-size: .98rem; }
  .site-nav__toggle { display: none !important; }
}

.site-nav > a { color: var(--text-bright); text-decoration: none; }
.site-nav > a:hover { color: var(--yellow); }
.site-nav > a[aria-current="page"] { color: var(--yellow); }

/* Dropdown menus */
.nav-dd { position: relative; }

.nav-dd__btn {
  background: none;
  border: none;
  color: var(--text-bright);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem 0;
}
.nav-dd__btn:hover { color: var(--yellow); }
.nav-dd__btn .caret { font-size: .65rem; color: var(--muted); }

.nav-dd__panel {
  white-space: normal;
  position: absolute;
  top: 2.6rem;
  background: var(--panel);
  /* A step lighter than --line-ghost so the panel edge reads against dark hero images */
  border: 1px solid #4a4f57;
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.nav-dd__panel[hidden] { display: none; }

.nav-dd__panel--services { right: -16rem; width: min(48rem, 92vw); }
.nav-dd__panel--areas { left: -8rem; width: min(34rem, 92vw); }
.nav-dd__panel--commercial { left: -12rem; width: min(46rem, 92vw); }
/* Commercial services without a page yet — shown, not linked, so there are no dead links */
.nav-dd__links span { color: var(--muted-deep); }

.nav-dd__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.5rem; }
.nav-dd__col-h {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--muted);
  margin-bottom: .6rem;
}
.nav-dd__links { display: grid; gap: .45rem; font-size: .92rem; }
.nav-dd__links a { color: var(--text); text-decoration: none; }
.nav-dd__links a:hover { color: var(--yellow); }

.nav-dd__towns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem 1.5rem; font-size: .92rem; }
.nav-dd__towns a { color: var(--text); text-decoration: none; }
.nav-dd__towns a:hover { color: var(--yellow); }
/* Towns without a page yet — shown, but not linked, so there are no dead links */
.nav-dd__towns span { color: var(--muted-deep); }

.nav-dd__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: 1.25rem;
  padding-top: 1rem;
  font-size: .92rem;
  font-weight: 700;
}
.nav-dd__foot a { color: var(--yellow); text-decoration: none; }
.nav-dd__foot a:hover { color: var(--yellow-soft); }

/* Mobile menu — the prototype left 48–62rem with no navigation at all;
   this disclosure fills that gap without changing the desktop design. */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1.5px solid var(--line-ghost);
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  padding: .55rem .8rem;
  cursor: pointer;
}
.site-nav__toggle:hover { border-color: var(--yellow); }
.site-nav__toggle .bars { display: block; width: 16px; height: 2px; background: currentColor; position: relative; flex-shrink: 0; }
.site-nav__toggle .bars::before,
.site-nav__toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
}
.site-nav__toggle .bars::before { top: -5px; }
.site-nav__toggle .bars::after { top: 5px; }

.mobile-nav {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 1.25rem var(--gutter) 1.5rem;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
@media (min-width: 62rem) { .mobile-nav { display: none !important; } }

.mobile-nav__group + .mobile-nav__group { margin-top: 1.25rem; }
.mobile-nav__links { display: grid; gap: .5rem; font-size: 1rem; margin-top: .5rem; }
.mobile-nav__links a { color: var(--text); text-decoration: none; font-weight: 600; }
.mobile-nav__links a:hover { color: var(--yellow); }
.mobile-nav__links span { color: var(--muted-deep); }
.mobile-nav__towns { grid-template-columns: 1fr 1fr; }

/* Fixed mobile quick-contact bar */
.call-bar {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
  z-index: 80;
}
@media (min-width: 48rem) { .call-bar { display: none; } }

.call-bar a {
  flex: 1;
  text-align: center;
  padding: .95rem .5rem;
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
}
.call-bar__tel { color: var(--text-bright); font-family: var(--font-display); }
.call-bar__cta { background: var(--yellow); color: var(--ink); }
.call-bar__cta:hover { background: var(--yellow-hi); color: var(--ink); }

/* Scroll-progress "current line" down the left edge */
.current-line {
  position: fixed;
  left: 0; top: 0;
  width: 4px; height: 100vh;
  z-index: 60;
  pointer-events: none;
  display: block;
}
.current-line__bar { width: 100%; height: 0; background: var(--yellow); }
.current-line__dot {
  position: absolute;
  left: -3px; top: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 14px rgba(255, 224, 0, .9);
}

/* --------------------------------------------------------------------------
   7. Site footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--ink-deep);
  padding: 3rem 0 2.25rem;
  font-size: .92rem;
  color: var(--muted);
}
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; }
.site-footer__logo { display: block; height: 44px; width: auto; margin-bottom: .9rem; }
.site-footer__tel {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--yellow);
  text-decoration: none;
}
.site-footer__tel:hover { color: var(--yellow-soft); }
.site-footer__links { display: grid; gap: .4rem; }
.site-footer__links a { color: var(--text); text-decoration: none; }
.site-footer__links a:hover { color: var(--yellow); }
.site-footer__links a.is-lead { color: var(--yellow); font-weight: 700; }
.site-footer__legal {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .85rem;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 4rem 0 4.5rem;
  background: linear-gradient(160deg, var(--ink), var(--blue));
}
/* Pages with no suitable photograph use the drawn circuit background */
.hero--drawn { background: linear-gradient(160deg, var(--ink), #22303f); }
/* Comfort & connectivity pillar is tinted amber per the visual kit */
.hero--warm { background: linear-gradient(160deg, var(--ink), #c9a227); }
/* Drawn hero on a comfort-pillar page — warm ground, no duotone */
.hero--drawn.hero--warm { background: linear-gradient(160deg, var(--ink), #33301c); }

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(1.18);
  mix-blend-mode: multiply;
}
/* The drawn SVG background is already in-palette — no duotone treatment */
.hero--drawn .hero__media { filter: none; mix-blend-mode: normal; }

.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 18, 21, .68), rgba(16, 18, 21, .5));
}
.hero--drawn .hero__wash { background: linear-gradient(180deg, rgba(16, 18, 21, .45), rgba(16, 18, 21, .25)); }

.hero__inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hero h1 { max-width: 46rem; }

/* Second hero line for out-of-hours availability */
.hero__emergency {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border-left: 3px solid var(--red);
  padding-left: .9rem;
  font-weight: 700;
  color: var(--text-bright);
}
.hero__emergency a { color: var(--yellow); text-decoration: none; }

@supports not (mix-blend-mode: multiply) {
  .hero__media { opacity: .7; }
}

/* --------------------------------------------------------------------------
   9. Trust strip
   -------------------------------------------------------------------------- */

.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-deep);
  padding: .8rem 0;
}
.trust-strip__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-bright);
}
.trust-strip__inner .dot { color: var(--blue); }

/* --------------------------------------------------------------------------
   10. Panels, rate lines, process line, tables
   -------------------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.panel--lg { padding: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: var(--radius-lg); }
.panel--flush { padding: 1.3rem; }

.panel__list { list-style: none; margin-top: .9rem; display: grid; gap: .4rem; font-size: .98rem; font-weight: 600; }
.panel__list a { color: var(--text); text-decoration: none; }
.panel__list a:hover { color: var(--yellow); }

/* Rate lines — the brief bans price cards, so costs are always lines */
.rates { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.rate {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.rate__name { font-weight: 600; color: var(--text-bright); }
.rate__name small { display: block; font-weight: 400; color: var(--muted); font-size: .88rem; }
.rate__price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--yellow);
  white-space: nowrap;
}
.rates__note { margin-top: .9rem; font-size: .9rem; color: var(--muted); }

/* A rate line the current tool result is not pointing at */
.rate.is-off .rate__name,
.rate.is-off .rate__name small,
.rate.is-off .rate__price { color: var(--muted); }

/* Vertical process line — a spine with a yellow node per step */
.process {
  margin-top: 1.75rem;
  position: relative;
  padding-left: 1.6rem;
  max-width: 44rem;
  list-style: none;
}
.process::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: var(--line);
}
.process__step { position: relative; padding-bottom: 1.6rem; }
.process__step:last-child { padding-bottom: 0; }
.process__step::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: .45rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  transform: translateX(1px);
}
.process__step h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }
.process__step p { font-size: .98rem; }
.process__time { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); }

/* Related-services row at the foot of a service page */
.related { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 56rem) { .related { grid-template-columns: repeat(3, 1fr); } }

.related__link {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #1c1e22;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  text-decoration: none;
  color: var(--text-bright);
  font-weight: 700;
}
.related__link:hover { border-color: var(--yellow); color: var(--text-bright); }
.related__link .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--yellow);
  border-radius: 9px;
  flex-shrink: 0;
}
.related__link .name { flex: 1; }
.related__link .arrow { color: var(--yellow); }

/* Hub routing cards — "you need this if…" blocks, two up */
.routes { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 52rem) { .routes { grid-template-columns: 1fr 1fr; } }

.route {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-decoration: none;
  color: var(--text);
}
.route:hover { border-color: var(--yellow); color: var(--text); }
.route .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--yellow);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.route strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-bright);
}
.route strong .arrow { color: var(--yellow); }
.route p { margin-top: .3rem; font-size: .95rem; }

/* Routing card with no icon — the town directory */
.route--plain { padding: 1.2rem 1.3rem; }
.route--plain strong { font-size: 1.1rem; }
.route--plain p { margin-top: .25rem; font-size: .92rem; }

/* A town we cover but haven't written a page for yet — shown, not linked,
   so the directory reads honestly and there are no dead links. */
.route--pending {
  background: var(--ink-raised);
  border: 1px dashed var(--line);
  padding: 1.2rem 1.3rem;
  color: var(--muted);
}
.route--pending strong { color: var(--muted); font-size: 1.1rem; }
.route--pending p { margin-top: .25rem; font-size: .92rem; }

/* Inline offer bar — a claim on the left, one button on the right */
.offer-bar {
  margin-top: 2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  max-width: 56rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.offer-bar__claim { color: var(--text-bright); font-weight: 600; }
.offer-bar__claim .price { font-family: var(--font-display); font-weight: 800; color: var(--yellow); }

/* "Every service, in {town}" — a two-column list of ruled links */
.svc-list { display: grid; margin-top: 1.5rem; max-width: 52rem; font-weight: 600; }
@media (min-width: 44rem) { .svc-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.svc-list a {
  color: var(--text);
  text-decoration: none;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
}
.svc-list a:hover { color: var(--yellow); }

/* The response-time line under a town H1 — the local differentiator */
.proximity { margin-top: .9rem; font-size: 1.25rem; font-weight: 700; color: var(--text-bright); }

.neighbours { margin-top: 1.25rem; font-size: .9rem; }

.areas-line { margin-top: 1.5rem; font-size: .95rem; color: var(--muted); }
.areas-line a { color: var(--yellow); text-decoration: none; font-weight: 700; }
.areas-line a:hover { color: var(--yellow-soft); }

/* Coded observation rows (EICR C1/C2/C3/FI, alarm grades, etc.) */
.codes { margin-top: 1.5rem; border-top: 1px solid var(--line); max-width: 52rem; }
.codes__row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.codes__key { font-family: var(--font-display); font-weight: 800; }
.codes__key--danger { color: var(--red); }
.codes__key--warn { color: var(--yellow); }
.codes__key--info { color: var(--muted); }

/* Designed comparison table */
.table-wrap { overflow-x: auto; margin-top: 1.5rem; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 34rem;
}
.table th, .table td {
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table thead th {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--muted);
  border-bottom-color: var(--line-ghost);
}
.table tbody th { font-weight: 700; color: var(--text-bright); }
.table caption { caption-side: bottom; margin-top: .8rem; font-size: .85rem; color: var(--muted); text-align: left; }

/* Tick / cross list */
.checklist { list-style: none; display: grid; gap: .6rem; margin-top: 1.25rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.checklist .mark { color: var(--yellow); font-weight: 900; flex-shrink: 0; line-height: 1.5; }

/* Schematic illustration figure */
.schematic { margin: 0; }
.schematic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.schematic figcaption { margin-top: .75rem; font-size: .88rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   11. Triage rows & routing lists
   -------------------------------------------------------------------------- */

.triage { margin-top: 1.75rem; border-top: 1px solid var(--line); }

.triage__row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}
.triage__row:hover { background: var(--panel); color: var(--text); }

.triage__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--yellow);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.triage__body { flex: 1 1 18rem; }
.triage__body strong { font-weight: 700; color: var(--text-bright); }
.triage__body small { display: block; color: var(--muted); font-size: .88rem; }

.triage__go { font-size: .85rem; font-weight: 700; color: var(--yellow); white-space: nowrap; }

/* Urgent row — routes to the phone, not a form */
.triage__row--urgent { padding-left: 1rem; border-left: 3px solid var(--red); }
.triage__row--urgent .triage__go { color: var(--red); }

/* --------------------------------------------------------------------------
   12. Duotone imagery
   -------------------------------------------------------------------------- */

.duo {
  --duo-a: var(--ink);
  --duo-b: var(--blue);
  --duo-wash-top: rgba(16, 18, 21, 0);
  --duo-wash-bottom: rgba(16, 18, 21, .55);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--duo-a), var(--duo-b));
  isolation: isolate;
  margin: 0;
}

.duo > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(1.18);
  mix-blend-mode: multiply;
  transition: filter .45s ease;
}
.duo--4x3 > img { aspect-ratio: 4 / 3; }
.duo--16x9 > img { aspect-ratio: 16 / 9; }

/* A duotone card that is itself a link */
a.duo { display: block; text-decoration: none; color: var(--text-bright); }
a.duo:hover { color: var(--text-bright); }
a.duo .duo__content strong .arrow { color: var(--yellow); }
.duo__content strong .arrow { color: var(--yellow); }
.duo--card .duo__content { padding: 1rem 1.25rem; }
.duo--card .duo__content strong { font-size: 1.15rem; }
.duo--card .duo__content span { font-size: .9rem; }
.duo--card { --duo-wash-bottom: rgba(16, 18, 21, .6); }

/* Two-up card grid */
.cards-2 { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 52rem) { .cards-2 { grid-template-columns: 1fr 1fr; } }

/* Our Work project grid — cards with or without a photo */
.projects { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 44rem) { .projects { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .projects { grid-template-columns: repeat(3, 1fr); } }

.project {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.project[hidden] { display: none; }
.project .duo { border-radius: 0; }
.project .duo > img { aspect-ratio: 16 / 10; }
.project .duo { --duo-wash-bottom: rgba(16, 18, 21, .45); }

.project__body { padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: .4rem; }
.project__tag { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--yellow); }
.project__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-bright);
  line-height: 1.25;
}
.project__sub { font-size: .92rem; color: #a9aeb8; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button {
  background: #1c1e22;
  color: var(--text-bright);
  border: 1px solid var(--line-ghost);
  border-radius: var(--radius-sm);
  padding: .55rem 1rem;
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
}
.filters button:hover { border-color: var(--yellow); }
.filters button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

.duo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--duo-wash-top), var(--duo-wash-bottom));
  transition: opacity .45s ease;
}

/* Amber variant — reserved for Comfort & Connectivity per the visual kit */
.duo--warm { --duo-b: #c9a227; }
/* Flat tint, for section backgrounds behind copy */
.duo--flat { background: var(--duo-b); }
.duo--flat > img { filter: grayscale(1) contrast(1.1) brightness(1.1); opacity: .45; mix-blend-mode: normal; }

/* Hover / focus / tap reveals the honest photo */
@media (hover: hover) {
  .duo--reveal:hover > img { filter: none; mix-blend-mode: normal; }
  .duo--reveal:hover::after { opacity: .35; }
}
.duo--reveal:focus-within > img,
.duo--reveal:active > img { filter: none; mix-blend-mode: normal; }
.duo--reveal:focus-within::after,
.duo--reveal:active::after { opacity: .35; }

.duo__tag {
  position: absolute;
  top: .85rem; left: .85rem;
  z-index: 1;
  background: var(--yellow);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  padding: .4rem .55rem;
  border-radius: 4px;
}

.duo__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: .9rem 1.1rem;
  color: var(--text-bright);
}
.duo__content strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.2;
}
.duo__content span { font-size: .85rem; color: var(--text); }

@supports not (mix-blend-mode: multiply) {
  .duo > img { opacity: .7; }
}

/* --------------------------------------------------------------------------
   13. Testimonial band
   -------------------------------------------------------------------------- */

.testimonial {
  background: var(--panel);
  border-top: 1px solid #23262b;
  border-bottom: 1px solid #23262b;
  padding: 52px 22px;
}
.testimonial__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.testimonial__mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  line-height: .5;
  color: var(--yellow);
  height: 26px;
}
.testimonial__quote {
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.55;
  color: #f2f3f5;
  font-weight: 500;
  text-wrap: pretty;
}
.testimonial__by { margin-top: 2px; font-size: 14px; font-weight: 800; color: var(--text-bright); }
.testimonial__by span { color: var(--muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. FAQ accordion
   -------------------------------------------------------------------------- */

.faq { margin-top: 1.75rem; border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--text-bright);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--yellow); }

.faq__sign {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1.5px solid var(--line-ghost);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 1rem;
  line-height: 1;
}
.faq__item[open] .faq__sign { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.faq__item[open] .faq__sign::before { content: "\2013"; }
.faq__item:not([open]) .faq__sign::before { content: "+"; }

.faq__a { padding: 0 0 1.25rem; max-width: 46rem; }
.faq__a > * + * { margin-top: .75rem; }

/* --------------------------------------------------------------------------
   15. Interactive tools (shared shell)
   -------------------------------------------------------------------------- */

.tool {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3.5vw, 2rem);
}
.tool__head { margin-bottom: 1.25rem; }
.tool__title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--text-bright); }
.tool__hint { margin-top: .35rem; font-size: .95rem; color: var(--muted); }

.tool__grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.tool__field { display: flex; flex-direction: column; gap: .4rem; }
.tool__field > span { font-size: .88rem; font-weight: 700; color: var(--text-soft); }
.tool__field small { font-size: .82rem; font-weight: 400; color: var(--muted); }

/* Option tiles — used for radio-style pickers across the tools */
.tiles { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .tiles { grid-template-columns: 1fr 1fr; } }
.tiles--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }

.tile {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  background: var(--ink);
  border: 1.5px solid var(--line-field);
  border-radius: 8px;
  padding: .85rem .95rem;
  color: var(--text);
}
.tile:hover { border-color: var(--yellow); }
.tile[aria-checked="true"], .tile[aria-pressed="true"] { background: var(--panel-hi); border-color: var(--yellow); }

.tile__dot {
  flex-shrink: 0;
  margin-top: .28rem;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--muted-dim);
  display: grid;
  place-items: center;
}
.tile__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.tile[aria-checked="true"] .tile__dot,
.tile[aria-pressed="true"] .tile__dot { border-color: var(--yellow); }
.tile[aria-checked="true"] .tile__dot::before,
.tile[aria-pressed="true"] .tile__dot::before { background: var(--yellow); }

/* Square check for multi-select tiles */
.tile__box {
  flex-shrink: 0;
  margin-top: .28rem;
  width: 17px; height: 17px;
  border-radius: 4px;
  border: 2px solid var(--muted-dim);
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 900;
  color: var(--ink);
}
.tile[aria-pressed="true"] .tile__box { background: var(--yellow); border-color: var(--yellow); }
.tile[aria-pressed="true"] .tile__box::before { content: "\2713"; }

.tile__text { display: flex; flex-direction: column; gap: .1rem; }
.tile__text strong { font-weight: 800; font-size: .98rem; color: var(--text-bright); }
.tile__text span { font-size: .83rem; line-height: 1.45; color: var(--muted); }

.tool__note { margin-top: .8rem; font-size: .9rem; color: var(--yellow); font-weight: 600; min-height: 1.4em; }

/* Inline row: one input plus its action button */
.tool__row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.tool__row .btn { padding: .85rem 1.4rem; }

.field--date {
  background: var(--ink);
  border: 1px solid var(--line-ghost);
  color: var(--text-bright);
  font-size: 1rem;
  font-weight: 600;
  padding: .7rem .8rem;
  border-radius: var(--radius-sm);
  min-width: 12rem;
  font-family: var(--font-body);
}
.field--date::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); cursor: pointer; }

.field-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: .4rem;
  letter-spacing: .05em;
}

/* A button that reads as a link inside body copy */
.btn-inline {
  background: none;
  border: none;
  color: var(--yellow);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* Checkbox rows inside a tool */
.check-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #1c1e22;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .8rem 1rem;
  cursor: pointer;
  color: var(--text-bright);
  font-weight: 600;
}
.check-row:hover { border-color: var(--yellow); }
.check-row input[type="checkbox"] { accent-color: var(--yellow); width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* Segmented control — a small set of mutually exclusive values */
.seg { display: flex; gap: .5rem; }
.seg button {
  background: #1c1e22;
  color: var(--text-bright);
  border: 1px solid var(--line-ghost);
  border-radius: var(--radius-sm);
  padding: .6rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}
.seg button:hover { border-color: var(--yellow); }
.seg button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* Larger "which one looks like yours?" option cards */
.options { display: grid; gap: .65rem; }
@media (min-width: 52rem) { .options { grid-template-columns: 1fr 1fr; } }

.option-card {
  text-align: left;
  background: #1c1e22;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  color: var(--text-bright);
  font: inherit;
}
.option-card:hover { border-color: var(--yellow); }
.option-card[aria-pressed="true"] { background: #23262b; border-color: var(--yellow); }
.option-card strong { display: block; font-weight: 800; }
.option-card[aria-pressed="true"] strong { color: var(--yellow); }
.option-card span { font-size: .9rem; color: var(--muted); }

/* Symptom picker — a row of selectable buttons */
.picker { display: flex; flex-wrap: wrap; gap: .6rem; }
.picker button {
  background: #1c1e22;
  color: var(--text-bright);
  border: 1px solid var(--line-ghost);
  border-radius: var(--radius-sm);
  padding: .65rem 1rem;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.picker button:hover { border-color: var(--yellow); }
.picker button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* Range + number pairing */
.tool__range { width: 100%; accent-color: var(--yellow); }
.tool__readout {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--yellow);
}

/* Result panel — the one orchestrated moment per tool page.
   Border colour is keyed to the verdict state. */
.verdict {
  margin-top: 1.5rem;
  background: var(--ink);
  border: 1.5px solid var(--line-field);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 1.25rem 1.35rem;
}
.verdict[hidden] { display: none; }
.verdict--ok { border-left-color: var(--green); }
.verdict--watch { border-left-color: var(--yellow); }
.verdict--act { border-left-color: var(--red); }
.verdict--info { border-left-color: var(--blue); }
.verdict--idle { border-left-color: var(--muted); }
.verdict--idle .verdict__title { color: var(--muted); }

.verdict__title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--text-bright); }
.verdict__body { margin-top: .5rem; font-size: .98rem; }
.verdict__body > * + * { margin-top: .6rem; }
.verdict__list { list-style: none; display: grid; gap: .45rem; margin-top: .75rem; }
.verdict__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.verdict__list .mark { flex-shrink: 0; font-weight: 900; }
.verdict__list .mark--gap { color: var(--red); }
.verdict__list .mark--ok { color: var(--green); }

.verdict__figure {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.verdict__stat .label { display: block; }
.verdict__stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--yellow);
  line-height: 1.2;
}
.verdict__stat small { display: block; font-size: .82rem; color: var(--muted); }

/* Calculator output tiles — hairline grid, one figure each */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 1.5rem;
}
@media (min-width: 44rem) { .stats { grid-template-columns: 1fr 1fr; } }

.stat { background: #1c1e22; padding: 1.1rem 1.25rem; }
.stat--lead { border-left: 3px solid var(--yellow); }
.stat__label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
}
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--text-bright); }
.stat__value--lead { color: var(--yellow); }

/* Label + explanation rows (tethered vs untethered, wired vs Wi-Fi …) */
.spec { margin-top: 1.5rem; border-top: 1px solid var(--line); max-width: 52rem; }
.spec__row {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.spec__key {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  color: var(--yellow);
  letter-spacing: .05em;
}
.spec__key--muted { color: var(--muted); }

.assumptions { margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.assumptions summary { cursor: pointer; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .verdict { animation: verdict-in .35s ease both; }
  @keyframes verdict-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   16. Forms & GHL embed placeholder
   -------------------------------------------------------------------------- */

.field {
  width: 100%;
  background: var(--ink);
  border: 1.5px solid var(--line-field);
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  font: inherit;
  font-size: 1rem;
  padding: .8rem .9rem;
}
.field::placeholder { color: var(--muted-deep); }
.field:focus { border-color: var(--yellow); outline: none; }

.form-label { display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; font-weight: 700; color: var(--text-soft); }

.form-grid { display: grid; gap: 1rem; }
.form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.form-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  align-self: start;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.form-card fieldset { border: none; }
.form-card legend { margin-bottom: .7rem; }
.form-card__foot { margin-top: .8rem; font-size: .83rem; color: var(--muted); text-align: center; }

/* Confirmation state */
.form-done {
  text-align: center;
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.form-done[hidden] { display: none; }
.form-done__tick {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 900;
}
.form-done h2 { font-size: 1.5rem; }
.form-done p { max-width: 26rem; text-wrap: pretty; }
.form-done a { color: var(--yellow); font-weight: 700; }

/* Contact detail cards on the contact page */
.contact-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  text-decoration: none;
}
.contact-card:hover { border-color: var(--yellow); }
.contact-card__value { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; color: var(--yellow); }
.contact-card__value--plain { color: var(--text-bright); }
.contact-card__value--email { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; color: var(--text-bright); }

/* GHL embed slot — forms are built in the GoHighLevel UI, see the comment
   above each placeholder for the service value that block expects. */
.ghl-slot {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  padding: 1.75rem 1.5rem;
  margin-top: 1.5rem;
  width: 100%;
  max-width: none;
}
.ghl-slot iframe { width: 100%; }
.enquiry .ghl-slot__placeholder { max-width: none; }
.ghl-slot__placeholder {
  border: 1px dashed rgba(255, 255, 255, .35);
  border-radius: var(--radius-sm);
  padding: 2.25rem 1rem;
  text-align: center;
  color: var(--blue-deep-muted);
  font-size: .85rem;
  font-weight: 600;
}
.ghl-slot__placeholder { margin: 0; }
.ghl-slot__placeholder a { color: var(--yellow); }

/* --------------------------------------------------------------------------
   17. Enquiry band
   -------------------------------------------------------------------------- */

.enquiry { padding: 3.75rem 0; background: var(--blue-deep); color: var(--text-bright); }
.enquiry h2 { color: var(--text-bright); }
.enquiry p { color: var(--blue-deep-text); max-width: 38rem; }
.enquiry .small { color: var(--blue-deep-muted); }
.enquiry a { color: var(--yellow); }
.enquiry a:hover { color: var(--yellow-soft); }

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

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

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: .9rem; }
.mt-3 { margin-top: 1.25rem; }
.mt-4 { margin-top: 1.75rem; }

.split {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: center;
}

/* Placeholder values still waiting on the client — see project brief §12 */
.tbc { color: var(--muted); font-style: normal; }

/* --------------------------------------------------------------------------
   18b. Cookie consent banner + footer legal links (assets/js/consent.js)
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--call-bar-h);           /* sits above the mobile call bar */
  z-index: 90;
  background: var(--panel);
  border-top: 1px solid var(--line-ghost);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}
.consent[hidden] { display: none; }
.consent__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.5rem;
}
.consent__text { flex: 1 1 22rem; margin: 0; font-size: .95rem; color: var(--text-soft); }
.consent__text a { color: var(--text-bright); text-decoration: underline; }
.consent__actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.consent__actions .btn { min-width: 7rem; justify-content: center; }
@media (min-width: 48rem) { .consent { bottom: 0; } }

.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .75rem; font-size: .85rem; }
.site-footer__legal-links a,
.site-footer__legal-links button {
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.site-footer__legal-links a:hover,
.site-footer__legal-links button:hover { color: var(--text-bright); }

.form-privacy { margin-top: .6rem; font-size: .8rem; color: var(--muted); }
.form-privacy a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .call-bar, .current-line, .enquiry, .ghl-slot { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .faq__item > .faq__a { display: block !important; }
}