/* ==========================================================================
   CORE SERVICES — "The Cutaway" skin
   --------------------------------------------------------------------------
   Built for this business specifically. The concept comes straight out of
   their own logo: the "C" is sliced open at the shoulder into a shower head
   with three droplets falling out of it — a letter cut away to show what is
   running inside it. Their one real job photo is a furnace with the access
   panel pulled off. That is the whole business: opening the house up and
   working on the core of it.

   So the page is drawn like an architectural section:
     - the EXTERIOR is paper-light (what the homeowner sees)
     - every CUT reveals a navy INTERIOR with a faint blueprint grid
     - ORANGE is the live element — the heat, the callout, the thing they fix
     - annotations are set in mono with leader lines, like drawing callouts
     - the house reads top-to-bottom: AIR above the ceiling, WATER below the floor

   PALETTE — sampled pixel-by-pixel from Core-Services-Logo-scaled.png:
     #f26422 orange (55.5% of the mark) · #1a335f navy (28.6% of the mark)

   CONTRAST NOTE (the big-bend-automotive lesson — verified, not assumed):
     brand orange #f26422 on white is only 3.17:1 → FAILS AA for body text.
     So: #f26422 is for graphics, rules, and LARGE display type only.
     Solid buttons use --orange-deep #c74a12 (4.75:1 on white) ✓
     Brand orange on the navy interior is 4.81:1 ✓ — which is why the orange
     type lives inside the cuts.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('fonts/archivo.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/inter-tight.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/plex-mono.woff2') format('woff2');
}

:root {
  /* their brand, exact */
  --orange: #f26422;
  --navy: #1a335f;
  /* derived for contrast + depth */
  --orange-deep: #c74a12;   /* solid buttons, white text — 4.75:1 */
  --orange-pale: #fdece3;
  --navy-deep: #12244a;     /* the interior revealed at a cut */
  --navy-ink: #0b162e;      /* deepest — footer */
  --navy-soft: #40527d;
  --navy-mute: #5d6f92;
  /* neutrals — warm paper, not clinical white */
  --paper: #ffffff;
  --shell: #f6f4f1;
  --shell-warm: #efeae4;
  --line: #e0dad2;
  --ink: #16233d;
  --ink-soft: #56617a;
}

* { box-sizing: border-box; }

/* Root is 17px, not the 16px default, so every rem-based size in this sheet
   lands ~6% larger. Their customers are homeowners with a broken furnace,
   often reading on a phone at arm's length. Legibility beats density. */
/* Type scale bumped 17px -> 18.5px on Max's ask (Aug 12): he liked how large
   Willard's text reads. Everything rem-based scales together; hamburger
   breakpoint raised 1040 -> 1140 so the bigger nav never crowds the header. */
html { scroll-behavior: smooth; font-size: 18.5px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-size: 1.06rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--orange-deep); }

h1, h2, h3, h4 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--navy);
}
h1 { font-size: clamp(2.3rem, 5.8vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.9vw, 2.8rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1rem; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.wrap-tight { max-width: 820px; margin: 0 auto; padding: 0 22px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* --------------------------------------------------------------------------
   ANNOTATION — the signature device. Mono callout with a leader tick, the way
   a section drawing labels what you are looking at.
   -------------------------------------------------------------------------- */
.annot {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
}
.annot::before {
  content: '';
  width: 26px; height: 2px; flex: none;
  background: var(--orange);
}
.annot-on-dark { color: var(--orange); }
.annot-center { justify-content: center; }

/* --------------------------------------------------------------------------
   BREAK LINE — the ⌇ symbol a draftsman uses to say "the drawing is cut here"
   -------------------------------------------------------------------------- */
.breakline {
  display: flex; align-items: center; width: 100%;
  color: var(--orange); margin: 0;
}
.bl-line { flex: 1; height: 2px; background: currentColor; }
.bl-zig { width: 38px; height: 22px; flex: none; display: block; }

/* --------------------------------------------------------------------------
   INTERIOR — any surface revealed by a cut: navy + faint blueprint grid
   -------------------------------------------------------------------------- */
.interior {
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  color: #fff;
  position: relative;
}
.interior h2, .interior h3, .interior h4 { color: #fff; }
.interior a { color: var(--orange); }
.interior a:hover { color: #fff; }
/* .interior a outspecifies .btn-primary; keep solid buttons white on navy */
.interior a.btn-primary, .interior a.btn-primary:hover { color: #fff; }
.interior p { color: #d7dded; }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1140px; margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { height: 54px; width: auto; }
.brand-name { display: none; }

.primary-nav { margin-left: auto; }
.primary-nav ul { list-style: none; display: flex; gap: 17px; margin: 0; padding: 0; }
.primary-nav ul a {
  text-decoration: none; color: var(--navy); font-weight: 600; font-size: 1rem;
  padding: 6px 0; display: inline-block; border-bottom: 2px solid transparent;
}
.primary-nav ul a:hover { border-bottom-color: var(--orange); color: var(--navy); }
.primary-nav ul a.current { border-bottom-color: var(--orange); }

/* --------------------------------------------------------------------------
   SERVICES DROPDOWN — the condensed nav from the Aug 6 call.
   Desktop: hover or keyboard focus opens a two-column panel; the Services
   link itself still navigates. Mobile (below 1040px) swaps the link for a
   button and the panel becomes a sequential accordion: tap Services, then
   tap Heating, and it opens again.
   -------------------------------------------------------------------------- */
/* Selectors are prefixed .primary-nav ul because the base nav rules
   (.primary-nav ul { display:flex }, .primary-nav ul a { ... }) cascade into
   the nested dropdown markup and win on specificity otherwise. */
.has-sub { position: relative; }
.primary-nav ul .nav-top { display: inline-flex; align-items: center; gap: 5px; }
.nav-top .chev-ic { width: 15px; height: 15px; color: var(--orange-deep); }
.nav-acc, .nav-g-btn { display: none; }
.nav-sub {
  display: none; position: absolute; top: 100%; left: -22px; z-index: 40;
  grid-template-columns: auto auto; gap: 0 38px; width: max-content;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--orange);
  box-shadow: 0 14px 30px rgba(11,22,46,.14);
  padding: 16px 24px 20px;
}
/* Desktop widths only. Unscoped, :focus-within also fires on mobile taps
   (the tapped accordion button keeps focus), which forced the panel visible
   in two-column grid mode and fought the accordion toggle. */
@media (min-width: 1141px) {
  .has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub { display: grid; }
}
.primary-nav ul .nav-g-link {
  display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  padding: 4px 0 8px; border-bottom: 1px solid var(--line); margin: 0 0 6px;
}
.primary-nav ul .nav-g-link:hover { color: var(--orange-deep); }
.primary-nav .nav-g-list { display: block; list-style: none; margin: 0; padding: 0; }
.primary-nav ul .nav-g-list a {
  display: block; padding: 7px 0; border-bottom: none;
  font-size: 0.95rem; white-space: nowrap;
}
.primary-nav ul .nav-g-list a:hover { color: var(--orange-deep); }
/* "All heating" and "All services" rows are for the mobile accordion, where
   the group headers are buttons that expand instead of navigate. On desktop
   the header links already cover them. */
.primary-nav ul .nav-g-all, .primary-nav ul .nav-all { display: none; }

/* Two CTAs in one header only works if one of them is quiet. The number is a
   plain link; "Free Quote" is the single solid block. Two orange buttons side
   by side would compete and neither would read as the primary action. */
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy); text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 1rem; flex: none;
}
.header-phone:hover { color: var(--orange-deep); }
.header-phone .ic { width: 17px; height: 17px; color: var(--orange-deep); }

/* pill, to match the main buttons */
.header-quote {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange-deep); color: #fff; text-decoration: none;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 12px 22px; border-radius: 999px; flex: none; white-space: nowrap;
}
.header-quote:hover { background: var(--navy); color: #fff; }

/* --------------------------------------------------------------------------
   MENU EXTRAS — call button + socials, inside the hamburger panel only.
   Hidden by default; the mobile breakpoint turns them on.
   -------------------------------------------------------------------------- */
.nav-extras { display: none; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  padding: 9px 11px; cursor: pointer; color: var(--navy);
}
.nav-toggle .ic { width: 20px; height: 20px; display: block; }

/* --------------------------------------------------------------------------
   HERO — a white exterior panel sitting on the opened navy interior
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 0; }


/* --------------------------------------------------------------------------
   TWO-TIER HEADER (Max, punch list A — modelled on the Peterman Brothers
   layout he sent). A slim utility strip carries the phone, the free second
   opinion and the Core Coverage plan; the main bar keeps the logo, the nav
   and the single loud CTA.
   Contrast on the strip: #cfd8ec on #0b162e = 12.6, phone #f9a072 = 7.4.
   -------------------------------------------------------------------------- */
.util-strip { background: var(--navy-ink); }
.util-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; justify-content: flex-end; gap: 26px;
  min-height: 38px;
}
.util-link, .util-phone {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; padding: 9px 0;
}
.util-link { color: #cfd8ec; }
.util-link:hover { color: #fff; }
.util-phone { color: #f9a072; font-weight: 500; }
.util-phone:hover { color: #fff; }
.util-link .ic, .util-phone .ic { width: 14px; height: 14px; }

/* Max's item 3: bigger logo and top bar, DESKTOP ONLY. */
@media (min-width: 981px) {
  /* Max asked for the logo and top bar "a bit bigger" on desktop only. Sized by
     HEIGHT to match the base rule (.brand img is height:54px) — an earlier pass set
     it by width, which worked out to ~111px tall, i.e. double, not "a bit". */
  .site-header .header-inner { padding-top: 17px; padding-bottom: 17px; }
  .site-header .brand img { height: 70px; width: auto; }
}

/* the Areas dropdown — a plain column of towns, no sub-groups */
.nav-sub--areas { min-width: 260px; }
.nav-areas-list { columns: 2; column-gap: 22px; }
.nav-areas-list li { break-inside: avoid; }

@media (max-width: 760px) {
  /* the strip would crowd a phone; the sticky call bar already carries the number */
  .util-strip { display: none; }
}

/* --------------------------------------------------------------------------
   HERO SLIDESHOW — Maxwell's own job photos running full-bleed behind the hero,
   with the quote form sitting on top of it (his punch list asked for both a
   slideshow AND a form "where the current photo is"; this is how they coexist).
   Only 9 of the 33 photos he sent are TRUE landscape once EXIF rotation is
   applied — these four are from that set, so nothing is sideways or badly cropped.
   The scrim is what makes the text legible over changing images: it has to hold
   for the brightest frame (the sunlit lawn), not the average one. Contrast was
   measured off the rendered pixels, not eyeballed — see build notes.
   -------------------------------------------------------------------------- */
.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--navy-deep); }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  animation: heroFade 26s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; opacity: 1; }
.hero-slide:nth-child(2) { animation-delay: 6.5s; }
.hero-slide:nth-child(3) { animation-delay: 13s; }
.hero-slide:nth-child(4) { animation-delay: 19.5s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  23%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}
/* the scrim: a flat navy base for overall legibility, plus a left-weighted
   gradient so the headline column stays darkest where the type actually sits */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(11,22,46,.90) 0%, rgba(11,22,46,.80) 38%, rgba(11,22,46,.52) 72%, rgba(11,22,46,.46) 100%),
    linear-gradient(180deg, rgba(11,22,46,.42) 0%, rgba(11,22,46,.20) 40%, rgba(11,22,46,.58) 100%);
}

/* Small text sits on a LIVE photo here, not flat navy, so the two dimmest colours
   are lifted — but only on the slideshow hero, so every other page keeps the
   original palette. Measured against the lightest scrimmed pixel, worst slide. */
.hero--slides .hero-note { color: #b6c0d6; }
.hero--slides .hero-eyebrow a { color: #fff; }
/* a viewer who has asked for less motion gets the first frame, held still */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:nth-child(1) { opacity: 1; }
}

.hero-grid {
  position: relative; z-index: 2;
  max-width: 1140px; margin: 0 auto; padding: 64px 22px 72px;
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 46px; align-items: center;
}

/* --------------------------------------------------------------------------
   HERO QUOTE FORM — solid card, never glass. Fields have to be readable over
   whatever frame happens to be behind them, so the card is opaque.
   -------------------------------------------------------------------------- */
/* The quote card. Colour-blocked head in navy with the access-panel badge, white
   body beneath — the same move as the service cards, so the form belongs to the
   system rather than sitting on the hero as a plain white rectangle.
   Contrast: white on navy-deep 15.25, #cdd5e8 sub on navy-deep 10.37. */
.hero-form {
  background: var(--paper); border-radius: 8px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(6,14,30,.42);
}
.hf-head {
  background: var(--navy-deep); padding: 20px 24px 18px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 4px solid var(--orange);
}
.hf-badge { width: 46px; height: 46px; flex: none; display: block; }
.hf-badge .pb { filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.hero-form h2 {
  font-size: 1.32rem; margin: 0; color: #fff; line-height: 1.15;
}
.hero-form .hf-sub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #cdd5e8; margin: 4px 0 0;
}
.hf-body { padding: 22px 24px 22px; }
.hero-form .field { margin-bottom: 12px; }
.hero-form .field label { font-size: 0.72rem; }
.hero-form .field input, .hero-form .field select {
  padding: 12px 14px; border-radius: 8px;
}
.hero-form .hf-note {
  font-size: 0.8rem; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.5;
}
/* A solid location flag rather than a thin mono line — the same job Peterman's
   red "Indianapolis, IN" tab does, in our orange. */
.hero-eyebrow {
  display: inline-block; margin: 0 0 18px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  color: #fff; background: var(--orange-deep);
  padding: 8px 15px; border-radius: 3px;
}
.hero-eyebrow a { color: #fff; text-underline-offset: 3px; }
.hero-eyebrow a:hover { color: #fff; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-lede { font-size: 1.12rem; color: #cdd5e8; margin: 18px 0 28px; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #93a2c4; margin: 22px 0 0;
}

/* the photo, framed as an opened access panel */
.cutaway-frame { position: relative; }
.cutaway-frame img {
  width: 100%; height: auto; border-radius: 2px;
  border: 3px solid rgba(255,255,255,.14);
}
.cutaway-tag {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--navy-ink); color: var(--orange);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 11px; border-left: 3px solid var(--orange);
}
.cutaway-caption {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8fa0c2; margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 16px 30px; border-radius: 999px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; line-height: 1.2;
}
.btn .ic { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--orange-deep); color: #fff; }
.btn-primary:hover { background: #a93c0c; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-ink); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-wide { width: 100%; }

/* --------------------------------------------------------------------------
   PROMISE STRIP — their own four claims, as drawing ticks
   -------------------------------------------------------------------------- */
/* Colour-blocked promise tiles. Peterman blocks solid colour everywhere rather
   than separating with hairlines; this is that idea in navy and orange. */
.promise { background: var(--navy); }
.promise-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  max-width: 1140px; margin: 0 auto; background: rgba(255,255,255,.12);
}
.promise-item {
  padding: 22px 20px; background: var(--navy);
  display: flex; gap: 12px; align-items: center; justify-content: center;
}
.promise-item .ic {
  width: 32px; height: 32px; flex: none; padding: 7px; border-radius: 8px;
  background: var(--orange-deep); color: #fff; box-sizing: border-box;
}
.promise-item h3 {
  font-size: 0.98rem; font-weight: 800; margin: 0; color: #fff;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2;
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.section { padding: 76px 0; }
.section-shell { background: var(--shell); }
.section-head { max-width: 62ch; margin: 0 0 42px; }
.section-head-center { max-width: 62ch; margin: 0 auto 42px; text-align: center; }
.section-head p, .section-head-center p { color: var(--ink-soft); font-size: 1.05rem; margin: 14px 0 0; }
.interior .section-head p, .interior .section-head-center p { color: #c3cce2; }

/* --------------------------------------------------------------------------
   THE HOUSE IN SECTION — air above, water below. The structural idea.
   -------------------------------------------------------------------------- */
/* align-items:start so the shorter column ends naturally instead of stretching
   into dead space (air has six services, water has three) */
.systems { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }

/* --------------------------------------------------------------------------
   HEATING / COOLING CARDS — filled, badged, with the services as real pills.
   Max pointed at Peterman Brothers for the energy: solid cards, an icon badge
   breaking the top edge, and every service a tappable button rather than a
   text link. Taken as a brief, not a template — the badge here is an ACCESS
   PANEL with corner screws, which is the shape this whole skin is built on,
   instead of Peterman's hexagon.
   Contrast on the filled card: title white 15.25, body #cdd5e8 10.37,
   navy pill text on white 12.48, white icon on orange-deep 4.75. All pass.
   -------------------------------------------------------------------------- */
.system {
  background: var(--navy-deep); border: 0; border-radius: 6px;
  padding: 52px 24px 24px; position: relative; margin-top: 40px;
  box-shadow: 0 12px 34px rgba(11,22,46,.18);
  display: flex; flex-direction: column;
}
.system::before { content: none; }

/* the badge, overlapping the top edge */
.system-badge {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 74px; display: block;
}
.pb { width: 100%; height: 100%; display: block; filter: drop-shadow(0 5px 12px rgba(11,22,46,.35)); }
.pb-plate  { fill: var(--orange-deep); }
.pb-inner  { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1.4; }
.pb-screw  { fill: rgba(255,255,255,.55); }
.pb-ic {
  /* the icon set is a 24x24 viewBox; scale it to ~34px and re-centre in the 64 plate */
  transform: translate(15px, 15px) scale(1.42);
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.system h3 {
  font-size: 1.72rem; margin: 0 0 8px; color: #fff; text-align: center;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.system > p {
  color: #cdd5e8; font-size: 0.95rem; margin: 0 auto 20px; text-align: center;
  max-width: 34ch; line-height: 1.55;
}

/* services as pills, not list rows */
/* margin-bottom here is the GUARANTEED gap before the "all services" pill. It has to
   live on the list, not on the pill: the pill uses margin-top:auto to sit at the bottom
   of an equal-height card, and auto collapses to zero on the card that has no slack —
   which is exactly why the 4-item Cooling card had its pills touching while the 3-item
   Heating card had a chasm. */
.system-list { list-style: none; margin: 0 0 18px; padding: 0; border: 0; display: grid; gap: 10px; }
.system-list li { border: 0; }
.system-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--paper); border-radius: 4px; padding: 13px 15px;
  text-decoration: none; color: var(--navy); font-weight: 700; font-size: 0.98rem;
  transition: transform .14s ease, background .14s ease;
}
.system-list a:hover {
  background: #fff; color: var(--orange-deep); transform: translateX(3px);
}
.system-list a .ic { width: 15px; height: 15px; color: var(--orange-deep); flex: none; }

/* the "all services" pill, marked out from the rest */
.system-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: auto 0 0; padding: 14px 15px; border-radius: 4px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.30);
  font-weight: 700; font-size: 0.95rem; text-decoration: none; color: #fff;
  transition: background .14s ease;
}
.system-all:hover { background: rgba(255,255,255,.19); color: #fff; }
.system-all .ic { width: 15px; height: 15px; color: #fff; }
.system-all:hover .ic { color: #fff; }

@media (max-width: 760px) {
  .systems { grid-template-columns: 1fr; gap: 42px; }
}

/* --------------------------------------------------------------------------
   CARD GRID (services overview, related links)
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  padding: 26px 24px; display: flex; flex-direction: column;
}
.card-icon {
  width: 42px; height: 42px; border-radius: 3px;
  background: var(--orange-pale); color: var(--orange-deep);
  display: flex; align-items: center; justify-content: center; margin: 0 0 16px;
}
.card-icon .ic { width: 22px; height: 22px; }
.card h3 { margin: 0 0 8px; }
.card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 16px; }
.card-link {
  margin-top: auto; font-weight: 700; text-decoration: none; color: var(--navy);
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem;
}
.card-link .ic { width: 15px; height: 15px; color: var(--orange); }
.card-link:hover { color: var(--orange-deep); }
.card-link:hover .ic { color: var(--orange-deep); }

/* --------------------------------------------------------------------------
   SPECIALS — their four real promos, as torn tickets
   -------------------------------------------------------------------------- */
.specials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.special {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--orange); border-radius: 3px;
  padding: 22px 20px; text-align: left;
}
.special-amount {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.9rem;
  color: var(--navy); line-height: 1; letter-spacing: -0.03em; display: block;
  margin: 0 0 7px;
}
.special h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.special p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* --------------------------------------------------------------------------
   SPLIT (about / why blocks)
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
/* Crew photo in the "not a ticket number" split. Portrait 4:5 so it carries the
   full height of the text beside it; panel radius + lift to match .system. */
.split-media img {
  display: block; width: 100%; height: auto;
  max-width: 430px; margin: 0 auto;   /* the copy beside it is short — full column width
                                         made the photo dominate and left dead space */
  border-radius: 6px; border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(11,22,46,.18);
}
/* stacked, it should not eat the whole screen before the reader reaches the reviews */
@media (max-width: 760px) { .split-media img { max-width: 420px; margin: 0 auto; } }
.stack-list { list-style: none; margin: 22px 0 0; padding: 0; }
.stack-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.stack-list .ic { width: 18px; height: 18px; color: var(--orange-deep); flex: none; margin-top: 4px; }
.stack-list strong { display: block; font-weight: 700; color: var(--navy); }
.stack-list span { color: var(--ink-soft); font-size: 0.94rem; }
.interior .stack-list li { border-top-color: rgba(255,255,255,.12); }
.interior .stack-list strong { color: #fff; }
.interior .stack-list span { color: #c3cce2; }
.interior .stack-list .ic { color: var(--orange); }

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { padding: 66px 0; text-align: center; }
.cta-band h2 { color: #fff; margin: 0 0 12px; }
.cta-band p { color: #c3cce2; max-width: 52ch; margin: 0 auto 26px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.form-wrap {
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  padding: 30px 28px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin: 0 0 16px; }
.field label {
  display: block; font-weight: 600; font-size: 0.95rem; color: var(--navy); margin: 0 0 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px; border: 1px solid #cfd6e2; border-radius: 3px;
  font-family: inherit; font-size: 1rem; color: var(--ink); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,100,34,.16);
}
.field textarea { min-height: 108px; resize: vertical; }
.form-note {
  font-size: 0.9rem; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.55;
}
.demo-flag {
  background: var(--orange-pale); border-left: 3px solid var(--orange);
  padding: 11px 14px; font-size: 0.9rem; color: #7a3410; margin: 0 0 20px; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   PLACEHOLDER — every unverified fact is labeled, never invented
   -------------------------------------------------------------------------- */
.placeholder {
  border: 1px dashed #b9a68f; background: #fdfaf5; border-radius: 3px;
  padding: 15px 17px; margin: 0 0 16px;
}
.placeholder .annot { margin-bottom: 7px; color: #8a6f4c; }
.placeholder .annot::before { background: #c9a86e; }
.placeholder p { margin: 0; font-size: 0.95rem; color: #6b5942; }
.interior .placeholder { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.28); }
.interior .placeholder p { color: #cdd5e8; }
.interior .placeholder .annot { color: #e3b98a; }

/* --------------------------------------------------------------------------
   CONTACT PANELS
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
.contact-line {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.contact-line .ic { width: 19px; height: 19px; color: var(--orange-deep); flex: none; margin-top: 4px; }
.contact-line strong { display: block; color: var(--navy); font-weight: 700; }
.contact-line a { font-weight: 600; text-decoration: none; }
.contact-line span { color: var(--ink-soft); font-size: 0.93rem; }
.big-call {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--navy); text-decoration: none; letter-spacing: -0.02em; display: inline-block;
}
.big-call:hover { color: var(--orange-deep); }

/* --------------------------------------------------------------------------
   SERVICE PAGE BITS
   -------------------------------------------------------------------------- */
.page-head { padding: 46px 0 40px; }
.page-head h1 { color: #fff; margin: 0 0 14px; }
.page-head p { color: #cdd5e8; font-size: 1.08rem; max-width: 56ch; margin: 0; }
.crumbs {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 26px; color: #8fa0c2;
}
.crumbs a { color: var(--orange); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 7px; opacity: .55; }

.prose { max-width: 68ch; }
.prose h2 { margin: 38px 0 14px; }
.prose h3 { margin: 26px 0 10px; }
.prose ul { padding-left: 20px; margin: 0 0 18px; }
.prose li { margin: 0 0 8px; }
.prose > p:first-child { font-size: 1.1rem; color: var(--ink-soft); }

.sidebar { position: sticky; top: 100px; }
.sidebar-card {
  background: var(--shell); border: 1px solid var(--line); border-radius: 3px;
  padding: 24px 22px; margin: 0 0 18px;
}
.sidebar-card h3 { font-size: 1.05rem; margin: 0 0 12px; }
.sidebar-card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 16px; }
.page-layout { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: 48px; align-items: start; }

.faq { border-top: 1px solid var(--line); margin: 34px 0 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary {
  font-weight: 700; color: var(--navy); cursor: pointer; list-style: none;
  font-size: 1.02rem; display: flex; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--orange); font-weight: 800; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 12px 0 0; color: var(--ink-soft); font-size: 0.96rem; }

/* --------------------------------------------------------------------------
   REVIEWS — deliberately empty until quotes are hand-verified. Nothing invented.
   -------------------------------------------------------------------------- */
.reviews-pending {
  border: 1px dashed #b9a68f; background: #fdfaf5; border-radius: 3px;
  padding: 30px 28px; text-align: center; max-width: 60ch; margin: 0 auto;
}
.reviews-pending h3 { margin: 0 0 10px; }
.reviews-pending p { color: #6b5942; margin: 0; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-ink); color: #b9c4dc; padding: 56px 0 0; }
/* Default for any link down here that isn't given its own colour. The global
   a{color:var(--navy)} is 1.2:1 against navy-ink, near enough invisible — which
   is exactly what happened to the footer email. Placed first so the more
   specific footer rules below still win. */
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--orange); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 34px;
  padding-bottom: 40px;
}
.footer-brand { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; }
/* the badge carries the wordmark, so it can run larger and the text label is gone */
.footer-brand img { height: 62px; width: auto; }
.footer-brand span {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.15rem; color: #fff;
  letter-spacing: -0.02em;
}
.site-footer p { font-size: 0.95rem; line-height: 1.6; color: #9fadc9; }
.site-footer h4 {
  color: #fff; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace; font-weight: 500; margin: 0 0 14px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 9px; }
.footer-links a { color: #b9c4dc; text-decoration: none; font-size: 0.97rem; }
.footer-links a:hover { color: var(--orange); }
.footer-call {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.35rem;
  color: #fff; text-decoration: none; display: block; margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.footer-call:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0 28px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 0.88rem; color: #8494b3;
}
.footer-bottom a { color: #b9c4dc; }
.credit a { color: var(--orange); text-decoration: none; font-weight: 600; }
.credit a:hover { text-decoration: underline; color: var(--orange); }
.social-row { display: flex; gap: 12px; margin: 14px 0 0; }
.social-row a {
  width: 34px; height: 34px; border-radius: 3px; border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; color: #b9c4dc;
}
.social-row a:hover { border-color: var(--orange); color: var(--orange); }
.social-row .ic { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   STICKY MOBILE CALL BAR
   -------------------------------------------------------------------------- */
.mobile-call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 0;
  box-shadow: 0 -3px 14px rgba(11,22,46,.22);
  transition: transform .22s ease;
}
.mobile-call-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 10px; text-decoration: none; font-weight: 700;
  font-family: 'Archivo', sans-serif; font-size: 0.98rem;
}
.mobile-call-bar .ic { width: 17px; height: 17px; }
.bar-call { background: var(--orange-deep); color: #fff; }
.bar-quote { background: var(--navy); color: #fff; }
.bar-hidden { transform: translateY(100%); }

/* --------------------------------------------------------------------------
   ICONS — inline Lucide, currentColor. No emoji, ever (Griffin, 2026-07-18).
   -------------------------------------------------------------------------- */
.ic { display: inline-block; vertical-align: middle; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; padding: 44px 22px 54px; }
  .systems { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .specials { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .page-layout { grid-template-columns: 1fr; gap: 34px; }
  .sidebar { position: static; }
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .promise-item:nth-child(3) { border-left: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* The nav collapses at 1040px. Seven links at the larger type, plus the bigger
   logo, the number and the Free Quote button, stop fitting on one line well
   before the phone breakpoint — so the hamburger has to arrive first. Flex
   order puts the CTA ahead of the toggle once the links are behind the menu. */
@media (max-width: 1140px) {
  .nav-toggle { display: block; order: 5; margin-left: 0; }
  .header-phone { order: 3; margin-left: auto; }
  /* pill, to match the main buttons */
.header-quote { order: 4; }
  .primary-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 22px 18px;
    box-shadow: 0 10px 24px rgba(11,22,46,.12);
  }
  .nav-open .primary-nav { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav ul a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .primary-nav ul a:hover { border-bottom-color: var(--line); }
  .primary-nav ul a.current { color: var(--orange-deep); border-bottom-color: var(--line); }

  /* The sequential accordion. Level one: Services. Level two: Heating,
     Cooling. Chevrons flip when a level is open. */
  .primary-nav ul .nav-top { display: none; }
  .nav-acc, .nav-g-btn {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    background: none; border: none; border-bottom: 1px solid var(--line);
    padding: 13px 0; cursor: pointer; text-align: left;
    font-family: inherit; font-weight: 600; font-size: 1rem; color: var(--navy);
  }
  .nav-acc .chev-ic, .nav-g-btn .chev-ic {
    width: 17px; height: 17px; color: var(--orange-deep);
    transition: transform .15s ease;
  }
  .has-sub.open > .nav-acc .chev-ic,
  .nav-g.open > .nav-g-btn .chev-ic { transform: rotate(180deg); }
  .has-sub .nav-sub {
    display: none; position: static; width: auto; background: none;
    border: none; box-shadow: none; padding: 0 0 0 16px;
  }
  .has-sub.open .nav-sub { display: block; }
  .primary-nav ul .nav-g-link { display: none; }
  .primary-nav .nav-g-list { display: none; padding: 0 0 0 16px; }
  .primary-nav .nav-g.open .nav-g-list { display: block; }
  .primary-nav ul .nav-g-list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .primary-nav ul .nav-g-all { display: block; }
  .primary-nav ul .nav-g-all a { color: var(--orange-deep); }
  .primary-nav ul .nav-all { display: block; padding: 13px 0; font-weight: 600; font-size: 1rem;
    color: var(--orange-deep); text-decoration: none; border-bottom: 1px solid var(--line); }

  /* Call button + socials at the foot of the open menu. */
  .nav-extras { display: block; margin: 18px 0 0; }
  .nav-call {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--orange-deep); color: #fff; text-decoration: none;
    font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.02rem;
    padding: 14px 18px; border-radius: 3px;
  }
  .nav-call:hover { background: var(--navy); color: #fff; }
  .nav-call .ic { width: 18px; height: 18px; }
  .nav-social {
    display: flex; align-items: center; gap: 14px;
    margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line);
  }
  .nav-social-label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  /* 44px tap targets — thumbs, not cursors. */
  .nav-social-icons { display: flex; gap: 10px; margin-left: auto; }
  .nav-social-icons a {
    width: 44px; height: 44px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    color: var(--navy); background: var(--shell); border: 1px solid var(--line);
  }
  .nav-social-icons a:hover { color: var(--orange-deep); border-color: var(--orange); }
  .nav-social-icons .ic { width: 20px; height: 20px; }
}

@media (max-width: 760px) {
  body { font-size: 1.02rem; }
  .header-phone { display: none; }
  /* pill, to match the main buttons */
.header-quote { margin-left: auto; padding: 10px 15px; font-size: 0.96rem; }
  .brand img { height: 46px; }
  .mobile-call-bar { display: flex; }
  body { padding-bottom: 54px; }
  .section { padding: 54px 0; }
  .cards, .cards-2, .specials { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .promise-grid { grid-template-columns: 1fr; }
  .promise-item { border-left: none; border-top: 1px solid var(--line); padding: 18px 22px; }
  .promise-item:first-child { border-top: none; }
  .hero-lede { max-width: none; }
  .cta-band { padding: 48px 0; }
  .page-head { padding: 34px 0 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-call-bar { transition: none; }
}

/* Live local conditions block on area pages (added 2026-08-12; icons +
   comfort meter + fade-in added same day at Griffin's request) */
.wx { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.wx.wx-live { opacity: 1; transform: none; }
.wx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wx-head h2 { margin: 0; }
.wx-cond { display: inline-flex; align-items: center; gap: 7px; color: var(--navy-soft); }
.wx-cond .wx-ic { width: 22px; height: 22px; color: var(--orange-deep); }
.wx-cond-lab { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.wx-stat-ic { width: 19px; height: 19px; color: var(--orange-deep); margin-bottom: 6px; }
.wx-meter { margin: 4px 0 16px; }
.wx-meter-bar { position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--navy-mute), #8fae7e 34%, var(--orange) 68%, var(--orange-deep)); }
.wx-meter-dot { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--paper);
  border: 3px solid var(--navy); box-shadow: 0 1px 4px rgba(11, 22, 46, 0.35);
  transition: left 0.8s ease; }
.wx-meter-labels { display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }

.wx { background: var(--shell); border: 1px solid var(--line); border-radius: 3px; padding: 24px 22px; margin: 28px 0; }
.wx h2 { margin-top: 0; }
.wx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 14px; }
.wx-stat { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 14px 10px; text-align: center; }
.wx-num { display: block; font-size: 1.55rem; font-weight: 700; color: var(--navy); }
.wx-lab { display: block; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.wx-read { font-size: 0.95rem; color: var(--ink); margin: 0 0 8px; }
.wx-src { font-size: 0.78rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 480px) { .wx-grid { grid-template-columns: 1fr; } }
.wx-cond-ic { display: inline-flex; }
.wx-cond-ic[hidden] { display: none; }
.wx-fc { display: flex; align-items: flex-start; gap: 8px; font-size: 0.92rem; color: var(--ink); margin: 0 0 8px; }
.wx-fc[hidden] { display: none; }
.wx-fc-ic { width: 16px; height: 16px; color: var(--orange-deep); flex: 0 0 auto; margin-top: 2px; }

/* --------------------------------------------------------------------------
   REVIEWS — four real Google reviews, shown as content, not as markup.
   (No aggregateRating schema on purpose; see build.py. Self-marked-up reviews
   are ineligible for rich results and can draw a manual action.)
   -------------------------------------------------------------------------- */
/* 2x2, not auto-fit. With exactly four reviews an auto-fit grid lands 3-up and orphans
   the fourth on its own row. Two columns shows all four and stays symmetrical — better
   than dropping one (he only has four) or hiding three behind a carousel. */
.rv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch;
}
.rv-card {
  margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: 3px; padding: 22px 22px 20px; display: flex; flex-direction: column;
  border-top: 3px solid var(--orange);
}
.rv-stars { display: inline-flex; gap: 2px; margin-bottom: 12px; }
.rv-star { width: 15px; height: 15px; fill: var(--orange); }
.rv-card blockquote {
  margin: 0; font-size: 0.96rem; line-height: 1.62; color: var(--ink); flex: 1;
  max-width: 62ch;
}
.rv-card figcaption {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-weight: 600; color: var(--ink); font-size: 0.92rem;
  display: flex; align-items: center; gap: 11px;
}
.rv-who { display: flex; flex-direction: column; gap: 2px; }
/* initial avatar — our palette, not the reviewer's Google photo. See build.py. */
.rv-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px rgba(242,100,34,.55);
}
/* Google's avatars ship as a circle on a transparent square with the Local Guide
   badge outside the circle — so no radius, no ring, no background, or the badge clips. */
.rv-avatar--photo {
  border-radius: 0; background: none; box-shadow: none; object-fit: contain;
  width: 46px; height: 46px;
}
.rv-src {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 400;
}
.rv-foot { margin: 22px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 760px) { .rv-grid { grid-template-columns: 1fr; } }

/* ---- form: honeypot + failure state ---------------------------------------
   .hp is the bot trap: off-screen, not display:none, because some bots skip
   hidden inputs. .form-error is the never-silent failure box. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form-error{
  margin-top:14px;padding:13px 15px;border-radius:8px;
  background:#fdeceb;border:1px solid #f0b3ae;color:#8a1c14;
  font-size:14px;line-height:1.55;
}
.form-error a{color:#8a1c14;font-weight:700}
.form-done{font-family:'Archivo',sans-serif;font-size:1.25rem;color:var(--navy);margin-bottom:8px}

/* SUCCESS STATE — the one screen every converting customer sees.
   The form card's body is white, but the card sits inside .interior, whose rules
   colour text for the NAVY ground: `.interior h3{color:#fff}` and
   `.interior p{color:#d7dded}`. Both are (0,1,1) and beat a bare `.form-done`
   (0,1,0), so the confirmation rendered white-on-white (1.00:1) and pale-blue-on-white
   (1.36:1) — measured on the live site, not guessed. Scoped to (0,2,1) so it wins.
   The phone uses --orange-deep, not brand --orange: brand orange is 3.17:1 on white
   and fails AA for body text, which is the rule the rest of this build already follows. */
.interior .form-done-box h3,.form-done-box h3{color:var(--navy)}
.interior .form-done-box p,.form-done-box p{color:var(--ink);font-size:1rem;line-height:1.6}
.interior .form-done-box a,.form-done-box a{color:var(--orange-deep);font-weight:700}

/* ZIP sits beside the service select rather than on its own row — a 5-character
   input stretched full-width looks broken, and a 13-town dropdown (the obvious
   alternative) would have excluded anyone whose town is not one of our SEO pages. */
.form-row--zip { grid-template-columns: 108px 1fr; }
@media (max-width: 480px) { .form-row--zip { grid-template-columns: 96px 1fr; } }

/* Soft coverage notice. Never blocks submission — it only sets expectations. */
.zip-note {
  margin: -8px 0 14px; padding: 10px 12px; border-radius: 8px;
  background: #fff5e8; border: 1px solid #f0cfa4; color: #7a4c12;
  font-size: 13.5px; line-height: 1.5;
}
.zip-note a { color: #7a4c12; font-weight: 700; }