/* =============================================================================
   Components, following the Automec template's block structure.
   Every value comes from tokens.css — no literal colors below.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--paper); color: var(--ink-2);
  font-family: var(--font); font-size: var(--fs-1); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* Inline SVGs without explicit dimensions expand to fill their container.
   A sensible default stops a missing width attribute becoming a full-width
   graphic; components that want a different size set one. */
svg { max-width: 100%; }
svg:not([width]) { width: 1.25em; height: 1.25em; }
a { color: var(--primary-text); text-underline-offset: 0.18em; }
a:hover { color: var(--primary-dark); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

h1, h2, h3, h4 {
  color: var(--ink); font-weight: 800; line-height: var(--lh-head);
  margin: 0; text-wrap: balance; letter-spacing: -0.018em;
}
h1 { font-size: var(--fs-7); line-height: var(--lh-tight); letter-spacing: -0.032em; }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-2); }
p  { margin: 0 0 var(--s-4); }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.container--narrow { max-width: var(--wrap-narrow); }
.visually-hidden, .hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -3rem; z-index: 100;
  background: var(--primary); color: var(--white); padding: var(--s-3) var(--s-4); transition: top .15s;
}
.skip-link:focus { top: var(--s-4); }

/* --- Utility bar ---------------------------------------------------------
   The template's dark strip above the header. It carries the details a
   homeowner checks before dialing — hours, coverage, how we are paid — which
   is more use than the social icons the template puts there. */
.topbar { background: var(--black); color: var(--foot-ink); font-size: var(--fs--1); }
.topbar__in { display: flex; align-items: center; gap: var(--s-6); min-height: 32px; flex-wrap: wrap; }
.topbar__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-6); flex-wrap: wrap; }
.topbar__list li { display: flex; align-items: center; gap: var(--s-2); }
.topbar__list svg { flex: none; color: var(--primary); }
.topbar__right { margin-left: auto; color: var(--foot-ink-2); }

/* --- Header --------------------------------------------------------------
   The template bleeds a solid primary block off the left edge holding the
   logo, then runs the nav and a phone block to the right. */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-header__in { display: flex; align-items: stretch; gap: var(--s-6); min-height: 58px; }
.site-logo {
  display: flex; align-items: center; gap: var(--s-3); text-decoration: none;
  background: var(--primary); color: var(--white);
  padding-inline: var(--s-6); margin-left: calc(var(--s-5) * -1);
}
.site-logo img { width: 28px; height: 28px; }
.site-logo__t {
  font-weight: 900; font-size: var(--fs-1); line-height: 1.1; color: var(--white);
  text-transform: uppercase; letter-spacing: 0.01em;
}
.site-logo__t span { display: block; font-weight: 500; font-size: var(--fs--1); opacity: .85; }
.site-nav { margin-left: auto; display: flex; align-items: center; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-6); }
.site-nav__list > li { position: relative; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-size: var(--fs-0); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.site-nav a:hover { color: var(--primary-text); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); padding: var(--s-2) var(--s-3); cursor: pointer; color: var(--ink); }
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 280px; background: var(--white);
  border-top: 3px solid var(--primary); box-shadow: var(--shadow-3);
  padding: var(--s-3); display: none; z-index: 50;
  /* A nested <ul> inherits the browser's default marker, which rendered a
     small circle beside every service in the menu. */
  list-style: none; margin: 0;
}
.dropdown li { list-style: none; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: var(--s-2) var(--s-3); text-transform: none; letter-spacing: 0; font-weight: 500; }
.dropdown a:hover { background: var(--gray-100); color: var(--primary); }

/* The template's "Need help? <number>" block, which suits a call-only site. */
.header-call { display: flex; align-items: center; gap: var(--s-3); }
.header-call__ico { width: 34px; height: 34px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); flex: none; }
.header-call__l { font-size: var(--fs--1); color: var(--ink-2); line-height: 1.2; }
.header-call__n { font-weight: 800; color: var(--ink); font-size: var(--fs-2); line-height: 1.15; text-decoration: none; letter-spacing: -0.01em; }
.header-call__n:hover { color: var(--primary); }

/* --- Buttons — square, uppercase, arrow-led ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6); border: 1px solid transparent;
  font-family: inherit; font-size: var(--fs-0); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.045em; text-decoration: none;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--primary-fill); color: var(--on-accent); }
.btn--primary:hover { background: var(--black); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--gray-200); }
.btn--ghost:hover { background: var(--black); color: var(--white); border-color: var(--black); }
/* On a photograph a 35%-opacity border disappears entirely. Solid white
   border, white text, and a slight scrim so it holds over any part of the
   image underneath. */
.btn--onDark {
  background: rgba(255,255,255,.08); color: var(--white);
  border-color: rgba(255,255,255,.85); backdrop-filter: blur(2px);
}
.btn--onDark:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--lg { padding: var(--s-5) var(--s-7); font-size: var(--fs-1); }
.btn--block { display: flex; width: 100%; }

/* --- Section titles ------------------------------------------------------
   The template's pattern: a small primary-colored eyebrow with a short rule,
   then a heavy heading. */
.section { padding-block: var(--s-9); }
.section--alt { background: var(--gray-100); }
.section--tight { padding-block: var(--s-7); }
.sec-eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--primary-text); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: var(--fs--1); margin: 0 0 var(--s-3);
}
.sec-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--primary); flex: none; }
.sec-note { color: var(--ink-2); max-width: 64ch; margin-top: var(--s-3); }
.sec-head { margin-bottom: var(--s-6); }

/* --- Hero ----------------------------------------------------------------
   Full-bleed photograph, dark overlay, content on the left, and the
   template's solid stat card floating at the right. The card carries real
   coverage figures rather than the invented client counts in the original. */
.hero { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
/* The photograph carries the section, so it is dimmed only as much as the
   overlaid copy needs. The gradient does the work instead of a flat opacity:
   heavy on the left where the headline sits, nearly clear on the right where
   the technician and the equipment are. */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(23,23,23,.93) 0%, rgba(23,23,23,.80) 38%, rgba(23,23,23,.34) 68%, rgba(23,23,23,.20) 100%),
    linear-gradient(180deg, rgba(23,23,23,.42) 0%, rgba(23,23,23,0) 30%);
}
.hero .container { position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--s-8); align-items: center; padding-block: var(--s-9); }
.hero h1, .hero h2 { color: var(--white); }
.hero h1 { max-width: 16ch; }
.hero h1 .ac { color: var(--primary); }
.hero__eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--primary-lite); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: var(--fs--1); margin: 0 0 var(--s-4);
}
.hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--primary); flex: none; }
.hero__lede { font-size: var(--fs-2); color: var(--foot-ink); max-width: 50ch; margin-top: var(--s-4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); align-items: center; }
.hero__points { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-2); color: var(--foot-ink); font-size: var(--fs-0); }
/* Absolutely positioned markers, never flex children — a flex list item makes
   every inline link inside it a separate flex item and shatters the sentence.
   That broke 190 pages on a sibling site and only showed on mobile. */
.hero__points li { position: relative; padding-left: var(--s-6); }
.hero__points li::before { content: ""; position: absolute; left: 0; top: .68em; width: 14px; height: 2px; background: var(--primary); }
.hero__note { font-size: var(--fs--1); color: var(--foot-ink-2); margin-top: var(--s-5); }

/* The stat card — solid primary, stacked rows, divided by hairlines. */
.herostats { background: var(--primary-fill); color: var(--white); padding: var(--s-5); }
.herostats__row { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid rgba(255,255,255,.22); }
.herostats__row:last-child { border-bottom: 0; padding-bottom: 0; }
.herostats__row:first-child { padding-top: 0; }
.herostats__n { font-size: var(--fs-4); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.herostats__l { font-size: var(--fs--1); opacity: .92; line-height: 1.25; }

/* --- Marquee -------------------------------------------------------------
   The template runs a scrolling strip of slogans. Here it runs real town
   names, which is honest and doubles as internal linking. */
.marquee { background: var(--black); color: var(--white); overflow: hidden; padding-block: var(--s-4); }
.marquee__track { display: flex; gap: var(--s-6); white-space: nowrap; animation: marquee 46s linear infinite; }
.marquee a { color: var(--white); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-0); }
.marquee a:hover { color: var(--primary-lite); }
.marquee__sep { color: var(--primary-lite); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; white-space: normal; } }

/* --- Cards and service grid ---------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); padding: var(--s-5); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--primary); box-shadow: var(--shadow-2); }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--ink-2); font-size: var(--fs-0); margin-bottom: 0; }
.card a { text-decoration: none; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.svc {
  display: block; text-decoration: none; color: inherit; background: var(--white);
  border: 1px solid var(--line); padding: var(--s-5); position: relative; transition: .16s;
}
.svc::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px; background: var(--primary); transition: width .22s; }
.svc:hover { box-shadow: var(--shadow-2); }
.svc:hover::after { width: 100%; }
.svc__head { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-3); }
.svc__ico {
  flex: none; width: 34px; height: 34px; padding: 4px; color: var(--primary-text);
  background: var(--primary-soft); transition: background .18s, color .18s;
}
.svc:hover .svc__ico { background: var(--primary); color: var(--white); }
.svc__name { font-weight: 800; color: var(--ink); font-size: var(--fs-2); line-height: 1.25; }
.svc__price { font-size: var(--fs--1); color: var(--primary-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.svc-when { font-size: var(--fs--1); color: var(--ink-2); margin-top: var(--s-2); }

/* --- Facts, stats, tables ------------------------------------------------ */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border: 1px solid var(--line); }
.stat { padding: var(--s-5); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__n { font-size: var(--fs-4); font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat__l { font-size: var(--fs--1); color: var(--ink-2); margin-top: var(--s-1); }
.facts { display: grid; gap: var(--s-3); }
.fact { background: var(--gray-100); border-left: 3px solid var(--primary); padding: var(--s-4); font-size: var(--fs-0); }
.pricetable { width: 100%; border-collapse: collapse; font-size: var(--fs-0); }
.pricetable th, .pricetable td { text-align: left; padding: var(--s-4); border-bottom: 1px solid var(--line); }
.pricetable th { font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs--1); }
.pricetable td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; color: var(--ink); }
.tw { overflow-x: auto; }

/* --- Prose ---------------------------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: var(--s-2); }
.callout { background: var(--warn-soft); border-left: 3px solid var(--warn); padding: var(--s-5); margin-block: var(--s-6); }
.callout p:last-child { margin-bottom: 0; }
.answerbox { background: var(--gray-100); border-left: 3px solid var(--primary); padding: var(--s-5); margin-bottom: var(--s-6); }

/* --- Process — the template numbers each step large and faint ------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.steps li { position: relative; background: var(--white); border: 1px solid var(--line); padding: var(--s-5); }
.steps__n {
  width: 3rem; height: 3rem; display: grid; place-items: center; margin-bottom: var(--s-4);
  background: var(--primary-fill); color: var(--white); font-weight: 900; font-size: var(--fs-2);
}
.steps h3 { margin-bottom: var(--s-2); }
.steps p { color: var(--ink-2); font-size: var(--fs-0); margin: 0; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: var(--s-4) 0; font-weight: 700; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary-text); font-weight: 900; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div, .faq details > p { padding-bottom: var(--s-5); color: var(--ink-2); }

/* --- CTA band — the template's full-width primary strip ------------------- */
.ctaband { background: var(--primary-fill); color: var(--white); padding-block: var(--s-8); }
.ctaband__in { display: flex; align-items: center; gap: var(--s-7); flex-wrap: wrap; }
.ctaband h2 { color: var(--white); max-width: 22ch; }
.ctaband p { color: rgba(255,255,255,.9); margin: var(--s-3) 0 0; max-width: 52ch; }
.ctaband__act { margin-left: auto; display: flex; gap: var(--s-4); flex-wrap: wrap; }
.ctaband .btn--primary { background: var(--white); color: var(--primary-dark); }
.ctaband .btn--primary:hover { background: var(--black); color: var(--white); }

/* --- Call panel ----------------------------------------------------------- */
.lead-form { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--primary); padding: var(--s-6); box-shadow: var(--shadow-2); }
.lead-form h2 { font-size: var(--fs-3); margin-bottom: var(--s-4); }
.lead-form__note { font-size: var(--fs--1); color: var(--ink-2); margin: var(--s-3) 0 0; }
.call-card__h3 { font-size: var(--fs-1); margin-block: var(--s-5) var(--s-2); }
.call-card__steps, .call-card__list { margin: 0; padding-left: 1.15rem; display: grid; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-0); }
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--fs--1); font-weight: 700; color: var(--ink); margin-bottom: var(--s-1); }
.field input, .field select, .field textarea { width: 100%; padding: var(--s-3); border: 1px solid var(--gray-200); font-family: inherit; font-size: var(--fs-0); background: var(--white); color: var(--ink); }
.field input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* --- Misc ----------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.chips li a, .chips li { display: inline-block; padding: var(--s-2) var(--s-4); background: var(--white); border: 1px solid var(--line); font-size: var(--fs--1); text-decoration: none; color: var(--ink-2); }
.chips li a:hover { border-color: var(--primary); color: var(--primary); }
.ziplist, .hoods { font-size: var(--fs-0); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trust, .ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--fs-0); color: var(--ink-2); }
.trust li, .ticks li { position: relative; padding-left: var(--s-6); }
.trust li::before, .ticks li::before { content: ""; position: absolute; left: 0; top: .68em; width: 14px; height: 2px; background: var(--primary); }
.trustgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.trustgrid strong { display: block; color: var(--ink); font-weight: 900; margin-bottom: var(--s-2); font-size: var(--fs-2); }
.trustgrid span { color: var(--ink-2); font-size: var(--fs-0); }
/* An <ol> keeps the semantics right for assistive tech and for the
   BreadcrumbList schema, but it was rendering with the browser's default
   "1. 2." numbering. Markers off, laid out inline with a chevron between. */
.breadcrumbs { font-size: var(--fs--1); color: var(--ink-3); padding-block: var(--s-4); }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--s-2); }
.breadcrumbs li + li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
}
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary-text); }
.breadcrumbs li:last-child { color: var(--ink); font-weight: 600; }
/* The safety note. Two bugs lived here: the inline warning icon had no width
   and no CSS sizing, so it stretched to fill the block — a 900px triangle —
   and because the note sits inside the dark hero the text inherited white and
   became invisible on its own pale ground. Both fixed explicitly rather than
   by inheritance. */
.urgent {
  background: var(--primary-soft); border-left: 3px solid var(--primary);
  padding: var(--s-5); font-size: var(--fs-0); margin-top: var(--s-5);
  display: flex; gap: var(--s-4); align-items: flex-start;
  color: var(--ink-2);
}
.urgent > svg {
  flex: none; width: 26px; height: 26px; color: var(--primary-text);
  margin-top: 2px;
}
.urgent strong { display: block; color: var(--ink); margin-bottom: var(--s-2); }
.urgent p { margin: 0; color: var(--ink-2); }
.urgent a { color: var(--primary-text); }
.mediarow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.inlinefig { margin-block: var(--s-6); }
.inlinefig figcaption { font-size: var(--fs--1); color: var(--ink-3); margin-top: var(--s-2); }
.zipcheck__form { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.zipcheck__form input { flex: 1 1 12rem; padding: var(--s-4); border: 1px solid var(--gray-200); font-family: inherit; }
.pager { display: flex; gap: var(--s-3); justify-content: center; padding-top: var(--s-6); }
.posthead { margin-bottom: var(--s-6); }
.num { font-variant-numeric: tabular-nums; }
.az-letter { font-weight: 900; color: var(--primary); }
.handoff { background: var(--gray-100); padding: var(--s-6); }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; gap: var(--s-2); padding: var(--s-3); background: var(--white); border-top: 2px solid var(--primary); box-shadow: 0 -2px 12px rgba(23,23,23,.12); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--foot-bg); color: var(--foot-ink); padding-block: var(--s-9) var(--s-6); }
.site-footer a { color: var(--foot-hi); text-decoration: none; }
.site-footer a:hover { color: var(--primary); }
.footer-head { margin-bottom: var(--s-7); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7); }
.footer-grid h4 { color: var(--foot-hi); font-size: var(--fs-1); margin-bottom: var(--s-4); text-transform: uppercase; letter-spacing: .06em; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--fs-0); }
.footer-bottom { border-top: 1px solid var(--foot-line); margin-top: var(--s-8); padding-top: var(--s-5); font-size: var(--fs--1); color: var(--foot-ink-2); }

/* --- Consent -------------------------------------------------------------- */
/* One tight row: the notice reads on the left, the two buttons sit on the
   right of the same line. Previously the text ran the full width and pushed
   the buttons onto a second row, so a cookie notice took more vertical space
   than the content behind it. */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--white);
  border-top: 2px solid var(--primary); box-shadow: 0 -4px 20px rgba(23,23,23,.14);
  padding: var(--s-3) 0;
}
.consent-bar__inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5);
  display: flex; gap: var(--s-5); align-items: center; flex-wrap: nowrap;
}
.consent-bar__inner > div:first-child { min-width: 0; }
.consent-bar__title {
  font-weight: 700; color: var(--ink); margin: 0; font-size: var(--fs-0);
  display: inline; margin-right: var(--s-2);
}
.consent-bar__title::after { content: "."; }
.consent-bar__text { margin: 0; font-size: var(--fs--1); color: var(--ink-2); display: inline; }
.consent-bar__actions { margin-left: auto; display: flex; gap: var(--s-2); flex: none; }
.consent-bar__actions .btn { padding: var(--s-3) var(--s-5); font-size: var(--fs--1); }
.consent-bar--block { top: 0; display: grid; place-items: center; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); padding-block: var(--s-9); }
  .svc-grid, .grid--3, .grid--4, .trustgrid, .steps { grid-template-columns: repeat(2, 1fr); }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .mediarow { grid-template-columns: 1fr; }
  .header-call { display: none; }
}
@media (max-width: 820px) {
  .topbar__list { gap: var(--s-4); }
  .topbar__right { display: none; }
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--white);
    border-top: 3px solid var(--primary); box-shadow: var(--shadow-3); padding: var(--s-4); z-index: 60;
  }
  .site-nav.is-open .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--s-4); width: 100%; }
  .nav-toggle { display: block; margin-left: auto; align-self: center; }
  .site-logo { padding-inline: var(--s-4); }
  .grid--2, .grid--3, .grid--4, .svc-grid, .trustgrid, .steps { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 4.75rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .ctaband__act { margin-left: 0; }
  .consent-bar__inner { flex-wrap: wrap; gap: var(--s-3); }
  .consent-bar__actions { margin-left: 0; width: 100%; }
  .consent-bar__actions .btn { flex: 1; }
}

/* =============================================================================
   Components that had no styling after the port.
   Everything below existed in the markup already; the visual language is the
   template's — square corners, hairline borders, primary accents, heavy heads.
   ========================================================================== */

/* --- Generic content block ------------------------------------------------ */
.block { margin-block: var(--s-7); }
.block__cap { font-size: var(--fs--1); color: var(--ink-3); margin-top: var(--s-2); }
.block__note { font-size: var(--fs--1); color: var(--ink-2); margin-top: var(--s-3); }
.section--sunk { background: var(--gray-100); }

/* --- Answer box ----------------------------------------------------------- */
.answerbox__label {
  display: inline-block; font-size: var(--fs--1); font-weight: 700; color: var(--primary-text);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-2);
}

/* --- Cards that are entirely a link --------------------------------------- */
.card--link { display: block; text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--primary); }

/* --- Bar chart ------------------------------------------------------------ */
.chart { display: grid; gap: var(--s-4); margin-block: var(--s-6); }
.chart__label { font-size: var(--fs-0); color: var(--ink); font-weight: 700; margin-bottom: var(--s-2); }
.chart__track { position: relative; height: 30px; background: var(--gray-100); }
.chart__bar { height: 100%; background: var(--primary); }
.chart__val {
  font-size: var(--fs--1); font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums; margin-top: var(--s-1);
}

/* --- Facts ---------------------------------------------------------------- */
.fact--text { background: transparent; border-left-color: var(--gray-200); color: var(--ink-2); }

/* --- Handoff -------------------------------------------------------------- */
.handoff__label {
  font-size: var(--fs--1); font-weight: 700; color: var(--primary-text);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-2);
}

/* --- Inner-page heroes ----------------------------------------------------
   Blog and post heroes are the hero treatment at reduced height — same dark
   ground and orange eyebrow, less vertical drama, because the article itself
   is the point. */
.homehero, .posthero { position: relative; background: var(--black); color: var(--white); }
.posthero { padding-block: var(--s-8); }
.posthero h1, .homehero h1 { color: var(--white); }
.posthead { margin-bottom: var(--s-7); }
.posthead__kicker {
  font-size: var(--fs--1); font-weight: 700; color: var(--primary-text);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-3);
}
.posthead__lede { font-size: var(--fs-2); color: var(--ink-2); margin-top: var(--s-4); }

/* --- Job / spec pairs ------------------------------------------------------ */
.job { border: 1px solid var(--line); background: var(--white); padding: var(--s-6); margin-block: var(--s-5); }
.job__pair { display: grid; grid-template-columns: 12rem 1fr; gap: var(--s-3) var(--s-5); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.job__pair:last-child { border-bottom: 0; }
.job__pair dt, .job__pair > :first-child { font-weight: 700; color: var(--ink); }

/* --- Media row ------------------------------------------------------------- */
.mediarow__fig { margin: 0; }
.mediarow__fig img { width: 100%; }
.mediarow__body h2 { margin-bottom: var(--s-4); }
.mediarow__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.mediarow__list li { position: relative; padding-left: var(--s-6); color: var(--ink-2); }
.mediarow__list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 14px; height: 2px; background: var(--primary); }

/* --- Pager ----------------------------------------------------------------- */
.pager__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pager__n, .pager__step {
  display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem;
  padding-inline: var(--s-3); border: 1px solid var(--line); background: var(--white);
  color: var(--ink); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pager__n:hover, .pager__step:hover { border-color: var(--primary); color: var(--primary); }
.pager__n--now { background: var(--primary); border-color: var(--primary); color: var(--white); }
.pager__n--now:hover { color: var(--white); }
.pager__step--off { opacity: .45; pointer-events: none; }

/* --- Popular links --------------------------------------------------------- */
.popular { margin-top: var(--s-6); }
.popular__label {
  font-size: var(--fs--1); font-weight: 700; color: var(--ink); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: var(--s-3);
}
.popular__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.popular__list a {
  display: inline-block; padding: var(--s-2) var(--s-4); background: var(--white);
  border: 1px solid var(--line); font-size: var(--fs--1); text-decoration: none; color: var(--ink-2);
}
.popular__list a:hover { border-color: var(--primary); color: var(--primary); }

/* --- Reviews — dormant until real ones exist ------------------------------- */
.reviews { display: grid; gap: var(--s-5); }
.reviews__head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.reviews__agg { color: var(--ink-2); font-size: var(--fs-0); }
.review { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--primary); padding: var(--s-6); }
.review__stars { color: var(--primary); letter-spacing: .1em; margin-bottom: var(--s-3); }
.review__body { color: var(--ink-2); margin-bottom: var(--s-3); }
.review__by { font-weight: 700; color: var(--ink); font-size: var(--fs-0); }

/* --- Stat band grid -------------------------------------------------------- */
.statband__grid { display: grid; grid-template-columns: repeat(4, 1fr); }

/* --- Service price on cards ------------------------------------------------ */
.svc-when__price { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- ZIP checker ----------------------------------------------------------- */
.zipcheck { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--primary); padding: var(--s-7); }
.zipcheck__title { font-size: var(--fs-3); margin-bottom: var(--s-2); }
.zipcheck__sub { color: var(--ink-2); font-size: var(--fs-0); margin-bottom: var(--s-5); }
.zipcheck__result { margin-top: var(--s-4); font-weight: 700; color: var(--ink); }

/* --- Estimator (present in markup, not currently rendered) ----------------- */
.calc { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--primary); padding: var(--s-7); }
.calc__head { margin-bottom: var(--s-5); }
.calc__title { font-size: var(--fs-3); }
.calc__sub { color: var(--ink-2); font-size: var(--fs-0); }
.calc__body { display: grid; gap: var(--s-5); }
.calc__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.calc__out { background: var(--gray-100); padding: var(--s-6); text-align: center; }
.calc__out-label { font-size: var(--fs--1); color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.calc__figure { font-size: var(--fs-5); font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__dash { color: var(--ink-3); }
.calc__note, .calc__disclaimer { font-size: var(--fs--1); color: var(--ink-3); }
.calc--compact { padding: var(--s-5); }

@media (max-width: 820px) {
  .job__pair { grid-template-columns: 1fr; gap: var(--s-1); }
  .statband__grid { grid-template-columns: 1fr; }
  .calc__fields { grid-template-columns: 1fr; }
}


/* =============================================================================
   Breaking the monotony.
   The port produced ten sections that were structurally identical — eyebrow,
   heading, grid of bordered white boxes — repeated down the page. The fixes
   below are about contrast between sections rather than decoration inside
   them: one dark section, numbers pulled genuinely large, and grids that stop
   treating every item as equally important.
   ========================================================================== */

/* --- A dark section, so the page is not one continuous white field -------- */
.section--dark { background: var(--black); color: var(--foot-ink); }
.section--dark h2, .section--dark h3, .section--dark strong { color: var(--white); }
.section--dark .sec-note, .section--dark span, .section--dark p { color: var(--foot-ink); }
.section--dark .card,
.section--dark .steps li { background: transparent; border-color: var(--foot-line); }
.section--dark .steps p { color: var(--foot-ink); }

/* --- Process: number pulled large and set behind the text ----------------
   The template runs an oversized numeral as a watermark. It costs nothing and
   it stops three identical boxes reading as a list of nothing in particular. */
.steps li { overflow: hidden; padding-top: var(--s-6); }
.steps li::before {
  content: attr(data-n);
  position: absolute; right: var(--s-4); top: -0.15em;
  font-size: 5.5rem; font-weight: 800; line-height: 1;
  color: var(--primary); opacity: .1; pointer-events: none;
}
.steps__n { width: 2.25rem; height: 2.25rem; font-size: var(--fs-1); margin-bottom: var(--s-4); }

/* --- Trust grid: rules instead of nothing, and a large index ------------- */
.trustgrid > div { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--primary); }
.trustgrid > div::before {
  content: counter(tg, decimal-leading-zero); counter-increment: tg;
  display: block; font-size: var(--fs--1); font-weight: 800; letter-spacing: .1em;
  color: var(--primary-text); margin-bottom: var(--s-3);
}
.trustgrid { counter-reset: tg; }

/* --- First service card spans two columns, so the grid has a focal point -- */
@media (min-width: 1101px) {
  .svc-grid > .svc:first-child { grid-column: span 2; }
  .svc-grid > .svc:first-child .svc__name { font-size: var(--fs-3); }
  .svc-grid > .svc:first-child .svc__ico { width: 44px; height: 44px; padding: 7px; }
}

/* --- Section heading: bigger, so there is real scale contrast ------------- */
.sec-head h2 { font-size: var(--fs-6); }

.section--dark .sec-eyebrow, .section--dark a { color: var(--primary-lite); }


/* =============================================================================
   Contrast corrections found by auditing computed styles rather than tokens.
   Token-level checks pass a palette; they cannot see a white heading that
   inherited its color from a dark hero and then landed on a white panel.
   ========================================================================== */

/* The call panel sits inside the hero, so `.hero h2 { color: white }` was
   painting its heading white on the panel's white ground — invisible. */
.hero .lead-form h1, .hero .lead-form h2, .hero .lead-form h3 { color: var(--ink); }
.hero .lead-form, .hero .lead-form p, .hero .lead-form li { color: var(--ink-2); }
.hero .lead-form .call-card__h3 { color: var(--ink); }

/* The popular-services block lives in the near-black footer, where ink-colored
   text is invisible. */
.site-footer .popular__label { color: var(--foot-hi); }
.site-footer .popular__list a { background: transparent; border-color: var(--foot-line); color: var(--foot-ink); }
.site-footer .popular__list a:hover { border-color: var(--primary); color: var(--primary-lite); }

/* Small text on the brand orange needs the darker fill to clear 4.5:1.
   #EB3300 measures 4.19:1 against white, which is fine for large display type
   and short of the requirement for anything body-sized. */
.skip-link { background: var(--primary-fill); }
.site-logo { background: var(--primary-fill); }

/* Links inside the warn callout measured 4.45:1 against its tinted ground —
   marginally short. The darker step clears it without changing the look. */
.callout a { color: var(--primary-dark); }

/* Same inheritance trap as the call panel: the ZIP checker sits inside the
   hero on the areas page, so `.hero h2 { color: white }` painted its title
   white on the panel's own white ground. Any white panel placed inside the
   hero needs its text colors stated rather than inherited. */
.hero .zipcheck h1, .hero .zipcheck h2, .hero .zipcheck h3,
.hero .zipcheck .zipcheck__title { color: var(--ink); }
.hero .zipcheck, .hero .zipcheck p, .hero .zipcheck__sub { color: var(--ink-2); }

/* The A–Z index letters sit on the alternating gray band. */
.az-letter { color: var(--primary-text); }

/* Pager numbers are small text on the current-page fill, so they need the
   darker orange rather than the display one. */
.pager__n--now { background: var(--primary-fill); border-color: var(--primary-fill); }