/* ===== Dorset EICR - shared stylesheet ===== */

:root {
  --c-navy:       #123A5E;
  --c-navy-2:     #1B5285;
  --c-navy-deep:  #0B2740;
  --c-amber:      #F4A300;
  --c-amber-2:    #FFB42E;
  --c-amber-soft: #FFF8EC;
  --c-amber-line: #FCE6B6;
  --c-green:      #1FA45A;
  --c-green-2:    #178548;
  --c-green-soft: #EFFAF3;
  --c-text:       #212939;
  --c-text-soft:  #475266;
  --c-text-mute:  #5A6579;
  --c-text-faint: #7E8EA8;
  --c-bg:         #FCFCFA;
  --c-bg-soft:    #F4F6FA;
  --c-card:       #FFFFFF;
  --c-border:     #E7EAEF;
  --c-border-2:   #D5DCE8;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --pad-sm: 56px;
  --pad-md: 76px;
  --pad-lg: 100px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ===== Reset and base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; }
a { color: var(--c-navy); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container-narrow { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-navy); color: #fff; padding: 12px 18px; z-index: 9999; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--c-border-2);
  box-shadow: 0 1px 6px rgba(18,58,94,0.06);
}
.header-row { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--c-navy); flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logo-mark { display: inline-flex; }
.logo-stack { display: inline-flex; flex-direction: column; line-height: 1.12; }
.logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.logo-sub { font-size: 10.5px; font-weight: 600; color: var(--c-text-mute); letter-spacing: 0.02em; margin-top: 2px; }

/* align-self: stretch makes the nav as tall as the header row. That is what
   lets the drop-down hang from the bottom of the HEADER instead of from the
   text of its summary - anchored to the summary the panel started 11px up
   inside the header and cut across its bottom edge (caught in the 2026-09-03
   render check). The links stay centred, so nothing else moves. */
.primary-nav { margin-left: auto; display: flex; gap: 18px; align-items: center; align-self: stretch; }
.primary-nav a {
  color: var(--c-text); font-size: 14.5px; font-weight: 600; padding: 6px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.primary-nav a:hover { color: var(--c-navy); border-bottom-color: var(--c-amber); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--c-navy); border-bottom-color: var(--c-amber); }

/* ===== Nav group: "Who we work for" drop-down (added 2026-09-03) =====
   Four audience links (landlords, home owners, commercial, industrial) sit
   behind one top-level item, so the header gets SHORTER as audience pages are
   added rather than busier. Built on a native <details>, which gives keyboard
   support and the expanded state for free; nav-dropdown.js only adds Escape,
   outside-click close and the mobile mask release. */
.nav-group { position: relative; flex: 0 0 auto; align-self: stretch; display: inline-flex; align-items: center; }
.nav-group > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-text); font-size: 14.5px; font-weight: 600; padding: 6px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::marker { content: ""; }
.nav-group > summary:hover { color: var(--c-navy); border-bottom-color: var(--c-amber); }
.nav-group > summary:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 3px; }
.nav-group[open] > summary { color: var(--c-navy); border-bottom-color: var(--c-amber); }
.nav-group:has(a[aria-current="page"]) > summary { color: var(--c-navy); border-bottom-color: var(--c-amber); }
.nav-caret {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.7;
  transition: transform 0.15s ease;
}
.nav-group[open] .nav-caret { transform: rotate(180deg); }
.nav-group-menu {
  /* 100% is now the full header row, and the 1px clears the header's bottom
     border, so the panel starts exactly where the header ends. */
  position: absolute; top: calc(100% + 1px); left: 0; z-index: 120;
  background: #fff; border: 1px solid var(--c-border-2); border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(18,58,94,0.18);
  padding: 8px; min-width: 246px; display: grid; gap: 2px;
}
.primary-nav .nav-group-menu a {
  padding: 10px 12px; border-bottom: none; border-radius: var(--r-sm);
  color: var(--c-text); font-size: 14.5px; font-weight: 600;
}
.primary-nav .nav-group-menu a:hover { background: var(--c-bg-soft); color: var(--c-navy); border-bottom: none; }
.primary-nav .nav-group-menu a[aria-current="page"] { background: var(--c-amber-soft); color: var(--c-navy); border-bottom: none; }

.header-call {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  background: var(--c-green); color: #fff;
  padding: 11px 16px; border-radius: var(--r-sm);
  font-weight: 800; font-size: 15px;
}
.header-call:hover { background: var(--c-green-2); color: #fff; text-decoration: none; }

/* ===== The phone menu (added 2026-09-04) =====
   Until today there was no phone menu at all. The header navigation turned
   into a strip that scrolled sideways: 524px of links inside a 335px box, so
   "Fault findi..." was cut off mid-word at the edge of the screen and the five
   "Who we work for" pages were unreachable by touch. Every cold-outreach
   recipient opens this site on a phone, so that strip was the first thing the
   product showed them.

   Below the breakpoint the header keeps the logo and a green call button, the
   desktop navigation is hidden, and a hamburger opens a full-width panel under
   the header. Above it NOTHING changes - the desktop nav is untouched.

   The breakpoint is 900px, not the 800px first proposed, because the desktop
   header row needs 869px to lay out without pushing the page sideways
   (measured 2026-09-04: 9px of page overflow at 860px, 69px at 800px). A
   breakpoint below 869 would have handed tablets the overflow bug instead of
   the strip. 900 clears it with room.

   .has-mobile-menu is set by a one-line inline script in every page head. It
   is what stops a browser with JavaScript off from being left with no
   navigation whatsoever: without the class the header navigation stays on
   screen, wrapped onto its own line rather than scrolling sideways. */
.nav-toggle {
  display: none; flex: 0 0 auto; padding: 0; cursor: pointer;
  width: 46px; height: 46px; align-items: center; justify-content: center;
  background: #fff; color: var(--c-navy);
  border: 1px solid var(--c-border-2); border-radius: var(--r-sm);
}
.nav-toggle:hover { background: var(--c-bg-soft); }
.nav-toggle-bars { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.18s ease, opacity 0.12s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
/* Open state: the top and bottom bars cross into the X that closes it. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The panel hangs off the sticky header, which is already a positioned
   element, so it lines up with the bottom of the header on every page without
   anybody measuring the header in JavaScript. */
.mobile-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 95;
  background: #fff; border-top: 1px solid var(--c-border);
  box-shadow: 0 18px 40px rgba(18,58,94,0.22);
  /* 65px is the measured header height on a phone (64px row plus its 1px
     bottom border), so the panel stops exactly at the bottom of the screen
     and scrolls inside itself if the link list ever grows. */
  max-height: calc(100vh - 65px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 18px;
}
.mobile-menu-nav { display: flex; flex-direction: column; }
.mobile-menu-nav > a,
.mobile-menu .nav-group > summary {
  display: flex; align-items: center; min-height: 54px;
  padding: 12px 20px; color: var(--c-text);
  font-size: 16.5px; font-weight: 700; white-space: normal;
  border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0;
}
.mobile-menu-nav > a:hover, .mobile-menu .nav-group > summary:hover {
  background: var(--c-bg-soft); color: var(--c-navy); text-decoration: none;
}
/* The "Who we work for" group becomes a tap-to-expand accordion. It is the
   same native <details> the desktop drop-down uses, so opening, keyboard
   operation and the announced state are the browser's job here too. */
.mobile-menu .nav-group { position: static; display: block; flex: none; align-self: auto; }
.mobile-menu .nav-group > summary { justify-content: space-between; gap: 12px; }
.mobile-menu .nav-caret { border-top-width: 6px; border-left-width: 5.5px; border-right-width: 5.5px; opacity: 0.9; }
/* display is stated on BOTH states on purpose. The browser hides a closed
   <details> by styling its internal ::details-content box, and an author
   display value on the child beats it: with only "display: block" here the
   five audience links sat open on the page under a closed accordion (seen
   2026-09-04 in Chromium 145). Saying none/block outright does not depend on
   which browser hides a closed <details> which way. */
.mobile-menu .nav-group-menu {
  position: static; display: none; min-width: 0; padding: 0;
  background: var(--c-bg-soft); border: 0; border-radius: 0; box-shadow: none;
}
.mobile-menu .nav-group[open] > .nav-group-menu { display: block; }
.mobile-menu .nav-group-menu a {
  display: flex; align-items: center; min-height: 50px;
  /* Indented beneath their parent, so the five audience pages read as
     children of "Who we work for" rather than as five more top-level items. */
  padding: 11px 20px 11px 38px;
  font-size: 15.5px; font-weight: 600; color: var(--c-text-soft);
  border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0;
}
.mobile-menu .nav-group-menu a:hover { background: #fff; color: var(--c-navy); text-decoration: none; }
.mobile-menu a[aria-current="page"] {
  color: var(--c-navy); background: var(--c-amber-soft);
  box-shadow: inset 3px 0 0 var(--c-amber);
}
.mobile-menu-call {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 18px 20px 0; padding: 15px 18px; min-height: 56px;
  background: var(--c-green); color: #fff; border-radius: var(--r-sm);
  font-weight: 800; font-size: 17px;
}
.mobile-menu-call:hover { background: var(--c-green-2); color: #fff; text-decoration: none; }
/* Body scroll lock while the panel is open, so the page underneath does not
   scroll away behind it. Set on <html> AND <body> because iOS Safari honours
   one or the other depending on version. */
.menu-open, .menu-open body { overflow: hidden; }

/* ===== Buttons ===== */
.btn-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 28px; border-radius: var(--r-sm); font-weight: 800;
  background: var(--c-green); color: #fff; font-size: 19px;
  box-shadow: 0 8px 26px rgba(31,164,90,0.32);
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
  min-height: 58px;
}
.btn-call:hover { background: var(--c-green-2); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(31,164,90,0.4); }
.btn-call svg { flex-shrink: 0; }

.btn-amber {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border-radius: var(--r-sm); font-weight: 800;
  background: var(--c-amber); color: var(--c-navy); font-size: 16px;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn-amber:hover { background: var(--c-amber-2); color: var(--c-navy); text-decoration: none; transform: translateY(-1px); }

/* NEW COMPONENT 2026-09-04: the WhatsApp send-us-a-photo button. Built on the
   same shape as .btn-amber (same padding, radius, weight, transition) so it is
   this site's button and not a bolted-on widget. The one thing it does NOT
   take from the palette is its colour: WhatsApp green (#25D366) is the whole
   point of the affordance - people recognise it without reading it - so it is
   deliberately outside the brand tokens, exactly like a card-brand logo. */
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 24px; border-radius: var(--r-sm); font-weight: 800;
  background: #25D366; color: #0B3D24; font-size: 16px;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn-whatsapp:hover { background: #1FBA57; color: #0B3D24; text-decoration: none; transform: translateY(-1px); }
.btn-whatsapp svg { flex-shrink: 0; }

/* The same route offered inline inside a step card, where a full button would
   shout over the numbered sequence. */
.whatsapp-inline {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-weight: 700; font-size: 14px; color: #128C4A;
}
.whatsapp-inline:hover { color: #0B3D24; }
.whatsapp-inline svg { flex-shrink: 0; }

.btn-ghost-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border-radius: var(--r-sm); font-weight: 700;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); font-size: 16px;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border-radius: var(--r-sm); font-weight: 700;
  background: #fff; color: var(--c-navy); border: 1.5px solid var(--c-border-2); font-size: 16px;
}
.btn-outline:hover { border-color: var(--c-amber); text-decoration: none; }

.text-link-cta { color: #fff; opacity: 0.9; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.text-link-cta:hover { color: var(--c-amber); opacity: 1; }

/* ===== Hero ===== */
.hero {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 55%, var(--c-navy-2) 100%);
  color: #fff; padding: var(--pad-lg) 0; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 88% 6%, rgba(244,163,0,0.24), transparent 52%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; left: -80px; bottom: -120px; width: 380px; height: 380px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.07), transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(244,163,0,0.22); color: #FFE1A8;
  padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  margin: 0 0 20px;
}
.eb-dot { width: 7px; height: 7px; background: var(--c-amber); border-radius: 50%; flex: 0 0 7px; }

.hero h1 { font-size: clamp(33px, 4.4vw, 54px); line-height: 1.05; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.028em; }
.hero h1 .accent { color: var(--c-amber); }
.lede { font-size: 18px; line-height: 1.55; margin: 0 0 20px; color: #D7DEE9; max-width: 580px; }

.lede-ticks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 9px; max-width: 580px; }
.lede-ticks li { color: #D7DEE9; font-size: 15.5px; padding-left: 30px; position: relative; line-height: 1.45; }
.lede-ticks li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 17px; height: 17px; background: var(--c-amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.55 17.6-5.15-5.15 1.6-1.6 3.55 3.55 8.45-8.45 1.6 1.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.55 17.6-5.15-5.15 1.6-1.6 3.55 3.55 8.45-8.45 1.6 1.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lede-ticks li strong { color: #fff; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.micro-trust { font-size: 13.5px; color: #AEBCD2; margin: 20px 0 0; }

/* ===== Hero proof panel (specimen report card) ===== */
.hero-visual { position: relative; }
.cert-card {
  background: #fff; color: var(--c-text);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 70px -24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
  overflow: hidden;
  transform: rotate(-1deg);
}
.cert-head {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
  color: #fff; padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
}
.cert-head .cert-mark { flex: 0 0 auto; display: inline-flex; }
.cert-titles { display: flex; flex-direction: column; line-height: 1.2; }
.cert-titles strong { font-size: 14.5px; font-weight: 800; }
.cert-titles span { font-size: 11px; color: #AEBCD2; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.cert-tag {
  margin-left: auto; background: rgba(244,163,0,0.2); color: #FFD98A;
  font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
.cert-body { padding: 18px 20px 20px; }
.cert-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--c-border-2); font-size: 14px; }
.cert-row span { color: var(--c-text-mute); }
.cert-row strong { color: var(--c-navy); font-weight: 700; text-align: right; }

.cert-status {
  display: flex; align-items: center; gap: 14px;
  background: var(--c-green-soft); border: 1px solid #C9E9D6;
  border-radius: var(--r-md); padding: 14px 16px; margin: 16px 0 14px;
}
.cert-status .cs-tick { flex: 0 0 auto; color: var(--c-green); display: inline-flex; }
.cert-status .cs-copy { display: flex; flex-direction: column; }
.cert-status .cs-copy strong { font-size: 17px; font-weight: 800; color: var(--c-green-2); letter-spacing: 0.01em; }
.cert-status .cs-copy span { font-size: 12.5px; color: var(--c-text-mute); }

.cert-circuits { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cert-circuits li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--c-text-soft);
  background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--r-sm);
  padding: 8px 12px;
}
.cert-circuits li .cc-tick { color: var(--c-green); display: inline-flex; flex: 0 0 auto; }
.cert-circuits li .cc-code { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--c-text-faint); }

.cert-foot {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--c-border);
  font-size: 12px; color: var(--c-text-mute); display: flex; align-items: center; gap: 8px;
}
.cert-foot svg { color: var(--c-amber); flex: 0 0 auto; }

/* The badge sits IN FLOW, pulled up over the card's bottom-right corner with a
   negative top margin, rather than absolutely positioned. It used to be
   absolute at bottom:-22px, which took it out of flow: .visual-caption then
   measured its own margin from the CARD and the badge landed on top of the
   caption text (measured 2026-09-04 at 1280px - 20px of vertical and 200px of
   horizontal overlap, so "A specimen layout, not a real property" was cut in
   half). In flow, the caption's margin measures from the BADGE and the two can
   never collide at any width. */
.cert-float {
  position: relative; z-index: 1;
  margin: -22px -14px 0 auto; width: max-content; max-width: 100%;
  background: #fff; border-radius: var(--r-md);
  box-shadow: 0 20px 44px rgba(0,0,0,0.28);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
}
.cert-float svg { color: var(--c-amber); flex: 0 0 auto; }
.cert-float span { display: flex; flex-direction: column; line-height: 1.2; }
.cert-float strong { font-size: 14px; color: var(--c-navy); font-weight: 800; }
.cert-float small { font-size: 11.5px; color: var(--c-text-mute); }
.visual-caption { margin: 34px 0 0; font-size: 12.5px; color: #AEBCD2; text-align: center; }

/* NEW COMPONENT 2026-09-04: a real photograph in a page's side column, in
   place of the drawn diagram it replaces. Borders and radius come from the
   existing tokens so it reads as part of the same set as .cert-card. */
.board-photo { margin: 0; }
.board-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md); border: 1px solid var(--c-border);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.35);
}
.board-photo figcaption {
  margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--c-text-mute);
}

/* ===== Trust bar ===== */
.trust-bar { background: #fff; border-bottom: 1px solid var(--c-border); padding: 26px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.trust-item { text-align: center; padding: 6px 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.trust-item + .trust-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--c-border); }
.ti-icon { color: var(--c-amber); display: inline-flex; }
.trust-item strong { display: block; font-size: 16.5px; font-weight: 800; color: var(--c-navy); letter-spacing: -0.01em; line-height: 1.2; }
.trust-item span { font-size: 12px; color: var(--c-text-mute); font-weight: 500; }

/* ===== Sections ===== */
section { padding: var(--pad-md) 0; }
.section-h { font-size: clamp(27px, 3vw, 38px); line-height: 1.15; margin: 0 0 10px; text-align: center; color: var(--c-navy); font-weight: 800; }
.section-h-left { text-align: left; }
.section-sub { text-align: center; color: var(--c-text-mute); font-size: 17px; margin: 0 auto 42px; max-width: 660px; }
.section-sub-left { text-align: left; margin-left: 0; }
.bg-soft { background: var(--c-bg-soft); }
.bg-white { background: #fff; }

/* ===== Page head (inner pages) ===== */
.page-head {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 60%, var(--c-navy-2) 100%);
  color: #fff; padding: 64px 0 68px; position: relative; overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(244,163,0,0.2), transparent 55%);
  pointer-events: none;
}
.page-head .container { position: relative; }
.page-head h1 { font-size: clamp(29px, 3.8vw, 44px); line-height: 1.08; margin: 0 0 14px; font-weight: 800; max-width: 860px; }
.page-head h1 .accent { color: var(--c-amber); }
.page-head .lede { margin-bottom: 24px; }
.breadcrumb { font-size: 13px; color: #AEBCD2; margin: 0 0 16px; }
.breadcrumb a { color: #AEBCD2; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--c-amber); }

/* ===== Audience fork ===== */
.path-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 12px; }
.path-card {
  background: #fff; border: 1.5px solid var(--c-border); border-radius: var(--r-lg);
  padding: 30px 26px; color: var(--c-navy); display: block;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.path-card:hover { border-color: var(--c-amber); transform: translateY(-3px); box-shadow: 0 20px 44px rgba(18,58,94,0.1); text-decoration: none; }
.path-icon {
  color: var(--c-amber); margin-bottom: 16px; width: 56px; height: 56px; border-radius: 14px;
  background: var(--c-amber-soft); border: 1px solid var(--c-amber-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.path-card h3 { margin: 0 0 10px; font-size: 21px; font-weight: 800; }
.path-card p { color: var(--c-text-mute); margin: 0 0 16px; font-size: 15.5px; }
.path-arrow { color: var(--c-amber); font-weight: 800; font-size: 15px; }

/* ===== Service cards ===== */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 28px 24px; position: relative; transition: transform 0.1s, box-shadow 0.15s;
}
.service-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(18,58,94,0.07); }
.service-card.is-lead { border-color: var(--c-amber); border-width: 1.5px; box-shadow: 0 10px 28px rgba(18,58,94,0.07); }
.service-tag {
  position: absolute; top: -11px; left: 22px; background: var(--c-amber); color: var(--c-navy);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
}
.service-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: var(--c-navy); }
.service-card p { margin: 0 0 14px; color: var(--c-text-soft); font-size: 15.5px; }
.service-card ul { margin: 0 0 16px; padding-left: 18px; color: var(--c-text-soft); font-size: 15px; }
.service-card ul li { margin-bottom: 6px; }
.service-price { font-weight: 800; color: var(--c-green); margin: 0 0 12px; font-size: 15.5px; }
.card-link { color: var(--c-amber); font-weight: 800; font-size: 14.5px; }
.card-link:hover { color: var(--c-navy); }

/* ===== Numbered process ===== */
.proc-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 12px; }
.proc-steps.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proc-steps.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.proc-step { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 26px 22px; position: relative; }
.proc-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--c-navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; margin-bottom: 14px;
}
.proc-step h3 { margin: 0 0 8px; font-size: 17px; color: var(--c-navy); font-weight: 800; }
.proc-step p { margin: 0; color: var(--c-text-soft); font-size: 14.5px; }

/* ===== Prose / content ===== */
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(24px, 2.6vw, 32px); color: var(--c-navy); margin: 44px 0 14px; font-weight: 800; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; color: var(--c-navy); margin: 30px 0 10px; font-weight: 800; }
.prose p { font-size: 17px; color: var(--c-text-soft); margin: 0 0 16px; }
.prose ul, .prose ol { font-size: 17px; color: var(--c-text-soft); padding-left: 22px; margin: 0 0 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--c-navy); }

.ticks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.ticks li { position: relative; padding: 12px 16px 12px 44px; background: var(--c-amber-soft); border: 1px solid var(--c-amber-line); border-radius: var(--r-sm); color: var(--c-text); font-size: 15.5px; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; background: var(--c-amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.55 17.6-5.15-5.15 1.6-1.6 3.55 3.55 8.45-8.45 1.6 1.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.55 17.6-5.15-5.15 1.6-1.6 3.55 3.55 8.45-8.45 1.6 1.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ticks li strong { color: var(--c-navy); }

.callout {
  background: var(--c-bg-soft); border: 1px solid var(--c-border-2); border-left: 4px solid var(--c-amber);
  border-radius: var(--r-md); padding: 22px 24px; margin: 28px 0;
}
.callout h3 { margin: 0 0 8px; font-size: 18px; color: var(--c-navy); font-weight: 800; }
.callout p { margin: 0 0 10px; color: var(--c-text-soft); font-size: 16px; }
.callout p:last-child { margin-bottom: 0; }

/* NEW MODIFIER 2026-09-04: the honesty callout, in the brand orange. Same
   .callout shape - it only warms the fill and the heading - so the page keeps
   one callout component rather than gaining a second one. Used where the site
   says something AGAINST its own short-term interest and needs to be seen. */
.callout.callout-amber { background: var(--c-amber-soft); border-color: #F3D9A6; }
.callout.callout-amber h3 { color: #8A5A00; }
.callout.callout-amber p { color: var(--c-text); }

.callout-navy {
  background: var(--c-navy); border: 0; border-left: 4px solid var(--c-amber);
  border-radius: var(--r-md); padding: 26px 28px; margin: 32px 0; color: #fff;
}
.callout-navy h3 { margin: 0 0 8px; font-size: 19px; color: #fff; font-weight: 800; }
.callout-navy p { margin: 0 0 10px; color: #C6CFDE; font-size: 16px; }
.callout-navy p:last-child { margin-bottom: 0; }
.callout-navy a { color: var(--c-amber); font-weight: 700; }

/* ===== Feature grid ===== */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 26px 24px; }
.feature-card .f-icon {
  color: var(--c-amber); width: 46px; height: 46px; border-radius: 12px;
  background: var(--c-amber-soft); border: 1px solid var(--c-amber-line);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.feature-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--c-navy); font-weight: 800; }
.feature-card p { margin: 0; color: var(--c-text-soft); font-size: 15.5px; }

/* ===== Code table (EICR codes) ===== */
.table-wrap { overflow-x: auto; margin: 0 0 24px; }
table.data {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; font-size: 15.5px;
}
table.data th, table.data td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; }
table.data th { background: var(--c-bg-soft); color: var(--c-navy); font-weight: 800; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; }
table.data tr:last-child td { border-bottom: 0; }
table.data td strong { color: var(--c-navy); }
.code-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px;
  padding: 4px 10px; border-radius: var(--r-pill); font-weight: 800; font-size: 13px;
  background: var(--c-navy); color: #fff;
}
.code-pill.is-danger { background: #C0392B; }
.code-pill.is-warn { background: #D97706; }
.code-pill.is-info { background: var(--c-navy-2); }
.price-cell { font-weight: 800; color: var(--c-green); white-space: nowrap; }

/* Below 640px a three-column table.data stops being a table and becomes one
   card per row. Added 2026-09-04: the pricing table on /quote was 433px wide
   inside a 335px screen and the whole thing panned left and right, which on a
   PRICE LIST is the worst possible thing to hide off the edge. Shrinking the
   type until it fitted would have been the other way to pass the measurement
   and a worse answer for the person reading it.

   640px is where three columns stop reading, not where the table starts to
   overflow (that is about 473px) - a squeezed three-column price list is
   already unpleasant well before it breaks the screen.

   Each cell after the first announces itself with its data-label, so "Price"
   still labels the price with the header row gone. The first cell is the
   service name and needs no label - it is the card's title. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; }
  table.data, table.data thead, table.data tbody, table.data tr, table.data th, table.data td { display: block; }
  table.data { border: 0; background: transparent; font-size: 15.5px; }
  /* The header row is removed from view, not from the accessibility tree. */
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  table.data tr {
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: 14px 16px; margin: 0 0 12px;
  }
  table.data tr:last-child { margin-bottom: 0; }
  table.data td { border-bottom: 0; padding: 0; }
  table.data td + td { margin-top: 10px; }
  table.data td:first-child { font-size: 17px; font-weight: 800; color: var(--c-navy); }
  table.data td:first-child strong { font-weight: 800; }
  table.data td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 3px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--c-text-mute);
  }
  table.data td.price-cell { font-size: 19px; white-space: normal; }
}

/* ===== FAQ ===== */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-list details { background: #fff; border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.15s; }
.faq-list details[open] { border-color: var(--c-amber); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 20px 80px 20px 24px;
  font-weight: 800; color: var(--c-navy); font-size: 17px; position: relative; user-select: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 44px; height: 44px; margin-top: -22px;
  background: var(--c-amber-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='26' height='26'%3E%3Cpath fill='%23F4A300' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center center / 26px 26px no-repeat;
  border: 1px solid var(--c-amber-line); border-radius: 50%; transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-list details p, .faq-list details ul { margin: 0; padding: 0 24px 22px; color: var(--c-text-soft); font-size: 16px; }
.faq-list details ul { padding-left: 44px; }
.faq-list details li { margin-bottom: 6px; }

/* ===== Area chips ===== */
.area-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }
.area-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.area-list li {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-pill);
  padding: 8px 15px; color: var(--c-navy); font-weight: 600; font-size: 14px;
}
.area-list li span { color: var(--c-text-mute); font-weight: 500; font-size: 12px; }
.area-visual { background: linear-gradient(135deg, #E8F0FA, #F6F9FC); border: 1px solid var(--c-border-2); border-radius: var(--r-lg); overflow: hidden; }

/* ===== Split panel ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split h2 { font-size: clamp(24px, 2.8vw, 34px); color: var(--c-navy); margin: 0 0 14px; font-weight: 800; }
.split p { color: var(--c-text-soft); font-size: 17px; margin: 0 0 16px; }

/* ===== Contact routes ===== */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.route {
  display: grid; gap: 4px; background: #fff; border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); padding: 24px 26px; color: var(--c-navy);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.route:hover { border-color: var(--c-amber); box-shadow: 0 16px 36px rgba(18,58,94,0.08); transform: translateY(-2px); text-decoration: none; }
.route-icon { color: var(--c-amber); }
.route-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-text-mute); font-weight: 800; margin-top: 6px; }
.route-num { font-size: 22px; font-weight: 800; color: var(--c-navy); word-break: break-word; }
.route-sub { font-size: 13.5px; color: var(--c-text-mute); }
/* The opening-hours line under the contact routes (NAP hours, Pete 2026-09-06). */
.hours-note { margin-top: 16px; text-align: center; color: var(--c-text-mute); font-size: 15px; }
.hours-note strong { color: var(--c-ink); }

.routes-dark .route { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #fff; }
.routes-dark .route:hover { background: rgba(244,163,0,0.16); border-color: var(--c-amber); }
.routes-dark .route-title { color: #AEBCD2; }
.routes-dark .route-num { color: #fff; }
.routes-dark .route-sub { color: #C6CFDE; }

/* ===== CTA band ===== */
.cta-band {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 55%, var(--c-navy-2) 100%);
  color: #fff; padding: var(--pad-lg) 0; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 12% 100%, rgba(244,163,0,0.22), transparent 55%); pointer-events: none;
}
.cta-band .container { position: relative; }
.cta-band h2 { font-size: clamp(27px, 3.2vw, 40px); margin: 0 0 12px; color: #fff; font-weight: 800; }
.cta-band > .container > p { color: #C6CFDE; font-size: 17px; margin: 0 0 30px; max-width: 640px; }
.cta-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.cta-band .cta-row { margin-bottom: 6px; }

.cta-strip {
  background: var(--c-amber-soft); border: 1px solid var(--c-amber-line); border-radius: var(--r-md);
  padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin: 32px 0;
}
.cta-strip strong { display: block; font-size: 18px; color: var(--c-navy); font-weight: 800; margin-bottom: 4px; }
.cta-strip span { color: var(--c-text-soft); font-size: 15.5px; }

/* ===== Footer ===== */
.site-footer { background: var(--c-navy-deep); color: #AEBCD2; padding: 58px 0 24px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 30px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer .logo { color: #fff; margin-bottom: 14px; }
.site-footer .logo-text { color: #fff; }
.site-footer .logo-sub { color: #8C9CB5; }
.site-footer h4 { color: #fff; font-size: 12.5px; margin: 0 0 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; }
.site-footer p { margin: 0 0 8px; font-size: 14px; }
.site-footer a { color: #AEBCD2; }
.site-footer a:hover { color: var(--c-amber); }
.footer-note { font-size: 13px; color: #8C9CB5; max-width: 320px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 22px; font-size: 13px; flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }
.credit a { color: var(--c-amber); font-weight: 700; }

/* ===== Mobile call bar ===== */
.mobile-call-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--c-green); color: #fff; padding: 11px 14px; gap: 10px;
  display: none; box-shadow: 0 -8px 24px rgba(0,0,0,0.22);
}
.mcb-call { flex: 1; display: flex; align-items: center; gap: 12px; color: #fff; padding: 6px 0; }
.mcb-call:hover { text-decoration: none; }
.mcb-icon { color: #fff; display: inline-flex; }
.mcb-text { display: flex; flex-direction: column; line-height: 1.2; }
.mcb-text strong { font-size: 16.5px; font-weight: 800; }
.mcb-text span { font-size: 12px; opacity: 0.92; }
.mcb-email {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2); color: #fff; border-radius: var(--r-sm);
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .primary-nav { gap: 14px; }
  .primary-nav a { font-size: 13.5px; }
  .logo-sub { display: none; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .cert-card { transform: none; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 0; }
  .trust-item + .trust-item::before { display: none; }
  .path-cards, .service-grid, .feature-grid, .feature-grid.cols-2, .split, .area-grid, .cta-band-grid, .routes { grid-template-columns: 1fr; }
  .proc-steps, .proc-steps.cols-3, .proc-steps.cols-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { gap: 32px; }
}

/* The phone menu takes over here. See the .nav-toggle block above for why the
   line is at 900px rather than 800px. */
@media (max-width: 900px) {
  .has-mobile-menu .primary-nav { display: none; }
  .has-mobile-menu .nav-toggle { display: inline-flex; }
  .has-mobile-menu .mobile-menu:not([hidden]) { display: block; }
  .header-row { min-height: 64px; gap: 12px; flex-wrap: wrap; }
  .header-call { margin-left: auto; }
  /* Without JavaScript the header navigation is still the only navigation, so
     it WRAPS onto a second line instead of scrolling sideways off the screen.
     Wrapping is the whole point: it is what keeps the nav inside the viewport
     for the render gate's nav width rule as well as for a real person. */
  .primary-nav {
    order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 10px 16px;
    padding: 4px 0 6px; border-top: 1px solid var(--c-border);
  }
}

@media (max-width: 760px) {
  :root { --pad-sm: 44px; --pad-md: 56px; --pad-lg: 64px; }
  body { padding-bottom: 92px; }
  /* The sideways-scrolling nav strip and its fade mask were DELETED here on
     2026-09-04. They were the bug: 524px of links inside a 335px box, a link
     cut in half at the screen edge, and no touch route to the drop-down at
     all. The hamburger panel replaced them. What is left in this block is the
     no-JavaScript fallback, which wraps (see the 900px block above).
     The drop-down panel still drops from the whole header rather than from
     its summary, because in that fallback the summary sits in a wrapped strip
     and a panel anchored to it lands half inside the header. */
  .nav-group { position: static; }
  .nav-group-menu {
    top: 100%; left: 0; right: 0; min-width: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    border-left: none; border-right: none;
    padding: 6px 20px 12px;
  }
  .primary-nav .nav-group-menu a { padding: 12px; }
  /* The full number lives in the fixed green call bar at the bottom of the
     screen from here down, so the header button becomes the green square that
     still calls with one tap and leaves room for the hamburger. */
  .header-call { margin-left: auto; width: 46px; height: 46px; padding: 0; justify-content: center; }
  .header-call .call-num { display: none; }
  /* The fixed green call bar starts here and covers the bottom 70px of the
     screen, so the panel stops above it rather than running behind it.
     65px header + 70px call bar, both measured 2026-09-04. */
  .mobile-menu { max-height: calc(100vh - 135px); }
  .hero h1 { font-size: 31px; }
  .lede { font-size: 16.5px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn-call, .cta-row .btn-amber, .cta-row .btn-ghost-dark, .cta-row .btn-outline { width: 100%; }
  .text-link-cta { text-align: center; }
  .cert-float { position: static; margin-top: 14px; }
  .visual-caption { margin-top: 18px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .proc-steps, .proc-steps.cols-3, .proc-steps.cols-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .mobile-call-bar { display: flex; }
  .cta-strip { flex-direction: column; align-items: flex-start; }
  .cta-strip .btn-amber { width: 100%; }
}

/* ===== ITEM 39 (Pete, 2026-09-05): rapid taps must not zoom the page =====
   SITE-WIDE ON PURPOSE. Pete on an iPhone: tapping + or - fast enough to count
   a fuseboard fired the browser's double-tap-to-zoom, the page jumped, and the
   count was lost mid-board. `touch-action: manipulation` is the documented fix
   (MDN: "Enable panning and pinch zoom gestures, but disable additional
   non-standard gestures such as double-tap to zoom"; Baseline, widely
   available). Normal scrolling and deliberate pinch-zoom are untouched, so
   nothing gets harder to read - only harder to zoom by accident.

   It sits in styles.css, which EVERY page of this site loads, not in
   quote.css. Today the only steppers are on /quote; a rule that lived beside
   them would fix those and silently miss the next page that grows a counter.

   The CONTAINERS are listed as well as the buttons. Two fast taps either side
   of a button edge are still one double-tap to the browser, and the container
   is what covers the gaps between the minus, the number box and the plus. */
.calc-row-controls,
.calc-row-step-button,
.calc-row-quantity,
.room-item-controls,
.room-item-step-button,
.room-item-quantity,
.quick-add-button,
.eicr-band {
  touch-action: manipulation;
}

/* THE FROM PRICE (the first-screen rules, tools/website_first_screen_rules.py).
   The line under the headline that says what the work starts at. A badge, not
   coloured text, so it reads on a navy hero and on a white one alike. */
.from-price { margin: 0 0 20px; }
.from-price strong {
  display: inline-block; background: var(--c-amber, #F4A300);
  color: var(--c-navy-deep, #0C2842); font-size: 19px; font-weight: 800;
  padding: 6px 14px; border-radius: var(--r-sm, 8px); letter-spacing: 0.01em;
}