/* =============================================================================
   Mold Free USA — ls19
   Skin: measured pixel copy of moldmedics.com (see _mold-lander/refspec/mm-spec.json).
   Vector chrome (pentagons, chevron tabs, angled folds, topo pattern, quote
   glyph, ornaments) is drawn by us as SVG/CSS — the reference rasterises it.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --c-ink:        #222222;   /* charcoal ground                    */
  --c-ink-2:      #151512;   /* footer near-black                  */
  --c-card:       #020202;   /* service-card ground                */
  --c-cream:      #f0e8de;   /* warm cream band                    */
  --c-amber:      #e9a922;
  --c-amber-hi:   #f5bb42;
  --c-olive:      #757530;   /* active chevron tab                 */
  --c-olive-dk:   #51522b;   /* olive heading                      */
  --c-olive-line: #9b9c64;   /* process rail (sampled from ref)    */
  --c-off:        #fbfaf8;   /* off-white text                     */
  --c-body:       #333333;   /* body copy on cream                 */
  --c-grey:       #999999;   /* legal grey                         */
  --c-badge:      #6b6459;   /* standards badges on cream (4.6:1)  */
  --c-ochre:      #8a6a10;   /* amber-family ink that reads on cream (4.2:1) */

  --ff-display: "Rajdhani", "Arial Narrow", system-ui, sans-serif;
  --ff-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: 24px;
  --wrapbox: 1352px;
  /* distance from the viewport edge to the content column edge (68px @1440) */
  --bleed: calc(max(0px, (100vw - var(--wrapbox)) / 2) + var(--pad));

  --hdr-h: 271px;            /* header overlays the top band by this much */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-body);
  font: 400 17px/24px var(--ff-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> is a format-negotiation wrapper, not a layout box. Every rule in
   this file addresses the <img> and the box it sits in directly (.hero__bg is
   inset:0 against .hero, .svc__photo against .svc__card, .tm__frame img is
   width:100% of the frame). display:contents keeps the <img> in exactly the
   box tree it had before the AVIF/WebP sources were wrapped around it, so the
   wrapping cost nothing geometrically. */
picture { display: contents; }

a { color: inherit; }

button { font: inherit; color: inherit; background: none; border: 0; }

/* Three-tone focus ring. A single amber ring fails WCAG 1.4.11 on three of this
   page's grounds (amber/cream 1.70:1, amber/off-white 1.98:1, amber/amber
   1.00:1). Measured per ground: the dark ring carries on cream 14.0:1,
   off-white 16.3:1 and the amber call bar 10.2:1; the amber halo carries on
   charcoal 4.5:1; the white hairline carries on the mid-grey testimonial wash
   6.9:1, where neither dark nor amber reaches 3:1 on its own. */
:focus-visible {
  outline: 3px solid #1c1c1c;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(233, 169, 34, .85),
              0 0 0 8px rgba(255, 255, 255, .9);
}
/* keep the call bar's own lift while focused */
.callbar:focus-visible {
  box-shadow: 0 0 0 6px rgba(233, 169, 34, .85),
              0 0 0 8px rgba(255, 255, 255, .9),
              0 -8px 20px -10px rgba(0, 0, 0, .55), 0 -1px 0 rgba(0, 0, 0, .2);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  max-width: var(--wrapbox);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* topographic contour ground — drawn by us, tiled */
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/topo.svg") repeat 0 0;
  opacity: .10;
  pointer-events: none;
}

/* ---------- buttons (measured: 20/700 uppercase, r2, pad 10.4/24, no shadow) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10.4px 24px;
  border-radius: 2px;
  background: var(--c-amber);
  color: #000;
  font: 700 20px/20px var(--ff-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.btn:hover { background: var(--c-amber-hi); }
.btn:active { transform: translateY(1px); }

/* =============================================================================
   HEADER — sits over the top band (hero on home, page head on inner pages)
   ========================================================================== */
.hdr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  padding-bottom: 8px;
}

/* One markup for both layouts: the four blocks are siblings placed by grid
   areas — desktop [find | logo | cta] + nav row; mobile [logo | burger] then
   the collapsible nav / cta / find panel, in the reference's order. */
.hdr-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: minmax(148px, auto) auto;
  grid-template-areas:
    "find logo cta"
    "nav  nav  nav";
  align-items: center;
  padding-top: 22px;
}
.hdr-find { grid-area: find; }
.hdr .logo { grid-area: logo; }
.hdr-cta   { grid-area: cta; justify-self: end; }
.hdr-nav   { grid-area: nav; }

/* --- ZIP finder (left) --- */
.zip-label {
  margin: 0 0 12px;
  font: 400 16px/16px var(--ff-body);
  color: var(--c-off);
}
/* Emphasis by TYPEFACE and WEIGHT, never by the link colour. Amber is what
   every link on this site turns, so painting a plain noun with it promises a
   click that does not exist. */
.zip-label b { font-family: var(--ff-display); font-weight: 700; color: inherit; }

.zip-form { display: flex; align-items: stretch; }

.zip-form input {
  width: 202px;
  height: 46px;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #222;
  font: 400 16px/46px var(--ff-body);
}
.zip-form input::placeholder { color: #9a9a9a; }

.zip-go {
  flex-shrink: 0;
  width: 64px;
  height: 46px;
  border-radius: 0;
  background: var(--c-amber);
  color: #000;
  font: 700 16px/46px var(--ff-display);
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.zip-go:hover { background: var(--c-amber-hi); }
.zip-go:active { transform: translateY(1px); }

.zip-note {
  margin: 10px 0 0;
  max-width: 268px;
  font: 400 14px/19px var(--ff-body);
  color: var(--c-off);
}
.zip-note a { color: var(--c-amber); font-weight: 600; }
.zip-note[hidden] { display: none; }

/* --- logo lockup (centre) --- */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: opacity .18s var(--ease);
}
.logo:hover { opacity: .85; }
.logo svg { width: 84px; height: 84px; flex-shrink: 0; }
.logo b {
  font: 700 30px/32px var(--ff-display);
  letter-spacing: .07em;
  color: var(--c-amber);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- nav --- */
.hdr-nav { position: relative; margin-top: 21px; padding-top: 22px; }
.hdr-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 500px;
  max-width: 100%;
  height: 1px;
  background: var(--c-off);
  transform: translateX(-50%);
}
.hdr-nav ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding-inline: 48px;
  list-style: none;
}
.hdr-nav a {
  display: block;
  width: min-content;       /* wraps at the space, exactly like the reference */
  font: 500 24px/24px var(--ff-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--c-off);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.hdr-nav a:hover, .hdr-nav a:focus-visible { color: var(--c-amber); }
.hdr-nav a[aria-current="page"] { color: var(--c-amber); }

.hdr-burger { display: none; }

/* =============================================================================
   HERO  (measured band: 923px)
   ========================================================================== */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 923px;
  padding: calc(var(--hdr-h) + 128px) 0 32px;
  background: var(--c-ink);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% 38%;
  z-index: 0;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(18,18,18,.94) 0%, rgba(18,18,18,.74) 34%, rgba(18,18,18,.44) 64%, rgba(18,18,18,.58) 100%),
    linear-gradient(180deg, rgba(34,34,34,.96) 0%, rgba(34,34,34,.72) 20%, rgba(34,34,34,.2) 46%, rgba(34,34,34,.48) 78%, rgba(34,34,34,.9) 100%);
}
.hero > .wrap { position: relative; z-index: 2; width: 100%; }

.hero h1 {
  margin: 0;
  max-width: 560px;
  font: 700 48px/54px var(--ff-display);
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--c-off);
}
.hero__sub {
  margin: 12px 0 0;
  max-width: 690px;
  font: 700 24px/27px var(--ff-display);
  color: var(--c-off);
}
.hero__cta { margin-top: 18px; }
.hero__call {
  margin: 14px 0 0;
  font: 400 16px/22px var(--ff-body);
  color: rgba(251, 250, 248, .88);
}
.hero__call a {
  color: var(--c-amber);
  font-weight: 600;
  text-underline-offset: 3px;
}
.hero__call a:hover { color: var(--c-amber-hi); }

/* --- "SPECIALIZING IN" strip pinned to the hero bottom --- */
.spec { position: relative; z-index: 2; margin-top: auto; padding-top: 48px; }
.spec__head {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 944px;
  margin: 0 auto;
}
.spec__head::before,
.spec__head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(251, 250, 248, .6);
}
.spec__head span {
  flex-shrink: 0;
  font: 400 36px/54px var(--ff-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-amber);
}
.spec__list {
  display: flex;
  justify-content: space-around;
  gap: 24px;
  max-width: 1130px;
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
}
/* The service you are ALREADY on is a `<span>`, not a link — a third pentagon
   that reloads the same page is a dead click dressed as a choice. It keeps the
   resting look of its two neighbours and drops only the hover/active states,
   which are what promise somewhere to go. */
.spec__list a,
.spec__list .spec__cur {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--c-off);
  font: 400 24px/27px var(--ff-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.spec__list a:hover, .spec__list a:focus-visible { color: var(--c-amber); }
.spec__list a:active { transform: translateY(1px); }
.spec__list .pent { flex-shrink: 0; width: 62px; height: 60px; }

/* pentagon badge (drawn by us). Only INHERITED svg properties are set here so
   they reach the <use> shadow content; per-part overrides live on the symbols. */
.pent {
  display: block;
  color: var(--c-amber);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: miter;
}

/* =============================================================================
   CREAM BAND (measured band: 490px, padding 96/0)
   ========================================================================== */
.cream {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 490px;
  padding: 96px 0;
  background: var(--c-cream);
}
.cream .wrap {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: 126px;
  align-items: center;
  width: 100%;
}
.cream h2 {
  margin: 0;
  font: 700 32px/36px var(--ff-display);
  color: #000;
}
.cream p {
  margin: 20px 0 0;
  font: 400 17px/24px var(--ff-body);
  color: var(--c-body);
}
.cream .btn { margin-top: 22px; }

/* --- standards badges (ours — never their award marks) --- */
/* Reference badge grid: three 116px marks on a 235px pitch, block at x 702-1288
   (centres 760 / 995 / 1230). Centring in the wrap's second column instead put
   ours 38px right of that. */
.stds {
  display: grid;
  grid-template-columns: repeat(3, 116px);
  justify-content: start;
  gap: 22px 119px;
  margin: 0 0 0 8px;
  padding: 0;
  list-style: none;
}
.std {
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  text-align: center;
}
.std svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.std svg * { fill: none; stroke: var(--c-badge); stroke-width: 2.4; }
.std span {
  position: relative;
  display: block;
  width: 82px;
  color: var(--c-badge);
  text-transform: uppercase;
}
.std b {
  display: block;
  font: 700 13px/14px var(--ff-display);
  letter-spacing: .04em;
}
/* the qualifier is the line that makes each badge honest — it has to be
   readable at arm's length, not a texture under the headline word */
.std i {
  display: block;
  margin-top: 3px;
  font: 500 11px/13px var(--ff-body);
  font-style: normal;
  letter-spacing: .03em;
}
/* Why `.std--sq` carries a hard break in the markup rather than a rule here:
   all six labels are the same 82px block, but the frames are not equally
   generous at the text band. The shield, hexagon and octagon clear 89-94px
   there; the square's double stroke pulls its inner edge in to 85.6 — narrower
   than the label block itself — which is why only that badge crowded. Its
   qualifier now takes the same two-line set every other badge already uses, and
   the break is explicit so it lands on the word rather than orphaning the
   ampersand. The other five are untouched. */

/* =============================================================================
   SERVICES SHOWCASE (measured band: 625px, padding 64/0)
   ========================================================================== */
.svc {
  position: relative;
  z-index: 2;
  min-height: 625px;
  padding: 64px 0;
  background: var(--c-cream);
}
.svc h2 {
  max-width: 300px;
  margin: 0 auto;
  font: 700 32px/36px var(--ff-display);
  color: var(--c-olive-dk);
  text-align: center;
}

.svc__module {
  display: grid;
  grid-template-columns: minmax(0, 831fr) minmax(0, 609fr);
  margin-top: 58px;
}

/* left: dark photo card (full-bleed to the viewport edge, as measured) */
.svc__stage { position: relative; min-height: 362px; }
.svc__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 71px 24px 324px;
  background: var(--c-card);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease);
}
.svc__card[data-active] { opacity: 1; visibility: visible; }
/* the UA rule [hidden]{display:none} is deliberately overridden — inactive
   panels stay in flow so the cross-fade works, and are hidden with
   visibility. Re-asserted here so the override is explicit, not accidental. */
.svc__card[hidden] { display: flex; opacity: 0; visibility: hidden; }

/* `cover` on a 831x362 window of a 3:2 source crops vertically only, so
   object-position X has no effect. --pw/--px widen the photo past the card and
   slide it, which is what actually pans the subject into the readable left
   third — the reference puts its subject at 0-38% and its text at 39%+.
   Set on the CARD so one equal-specificity rule can reset all three below. */
/* Panned right so the moisture meter clears the glyph. At -36% the magnifier's
   lens landed exactly on the meter's display and the two instruments fused into
   one unreadable object; the glyph only works where it lands on plain wall, the
   way it does on cards 2 and 3. Mobile overrides all three of these anyway. */
.svc__card:nth-child(1) { --pw: 136%; --px: -26%; --ppos: 50% 54%; }
.svc__card:nth-child(2) { --pw: 122%; --px: -22%; --ppos: 50% 46%; }
.svc__card:nth-child(3) { --ppos: 50% 46%; }
.svc__photo {
  position: absolute;
  top: 0;
  left: var(--px, 0px);
  z-index: 0;
  width: var(--pw, 100%);
  height: 100%;
  object-fit: cover;
  object-position: var(--ppos, 50% 50%);
}
.svc__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(2,2,2,.06) 0%, rgba(2,2,2,.13) 17%, rgba(2,2,2,.28) 27%,
    rgba(2,2,2,.55) 36%, rgba(2,2,2,.78) 45%, rgba(2,2,2,.90) 56%,
    rgba(2,2,2,.94) 70%, rgba(2,2,2,.95) 100%);
}
.svc__glyph {
  position: absolute;
  left: 44px;
  top: 50%;
  width: 196px;
  height: 196px;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--c-amber);
}
.svc__card h3,
.svc__card p,
.svc__card .btn { position: relative; z-index: 2; }
.svc__card h3 {
  margin: 0;
  font: 700 32px/36px var(--ff-display);
  color: var(--c-amber);
}
.svc__card p {
  margin: 14px 0 0;
  max-width: 440px;
  font: 400 17px/24px var(--ff-body);
  color: var(--c-off);
}
.svc__card .btn { align-self: flex-start; margin-top: 20px; }

/* right: chevron tabs */
.svc__tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: var(--bleed);
}
.svc__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 78px;
  padding: 0 32px;
  text-align: left;
  cursor: pointer;
  color: #000;
  font: 400 24px/27px var(--ff-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: color .18s var(--ease);
}
.svc__tab .pent { flex-shrink: 0; width: 58px; height: 56px; }
.svc__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-olive);
  clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 50%, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.svc__tab > * { position: relative; }
.svc__tab:hover { color: var(--c-olive-dk); }
.svc__tab[aria-selected="true"] { color: var(--c-off); }
.svc__tab[aria-selected="true"]::before { opacity: 1; }

/* =============================================================================
   SLOGAN BAR + folded ribbon into the amber stat band
   ========================================================================== */
.slogan {
  position: relative;
  z-index: 2;
  min-height: 176px;
  padding: 64px 0;
  background: var(--c-cream);
  text-align: center;
}
/* The reference sets this line in bright amber on cream — 1.70:1, the lowest
   contrast on the page. Kept in the amber family (so the line still bridges
   into the amber band below) but darkened to 4.2:1. Diamonds stay bright. */
.slogan p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
  font: 700 36px/40px var(--ff-display);
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--c-ochre);
}
.dia { flex-shrink: 0; width: 15px; height: 15px; fill: var(--c-amber); }

/* Symmetric padding (was 96/65) keeps the measured 312px band height while
   lifting the sub-labels off the incoming testimonial fold — they were landing
   1px above its apex. Now ~18px of clearance top and bottom. */
.stats {
  position: relative;
  z-index: 3;
  min-height: 312px;
  margin-top: -64px;
  padding: 80px 0 81px;
  background: var(--c-amber);
  clip-path: polygon(0 0, 50% 64px, 100% 0, 100% 100%, 0 100%);
}
/* The reference pins its first cluster left and packs the other two into the
   right third; `space-around` spread ours evenly instead. */
.stats .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 60px;
  padding-inline: calc(var(--pad) + 65px) calc(var(--pad) + 54px);
}
.stats .stat:first-child { margin-right: auto; }
.stat { display: flex; align-items: center; gap: 26px; }
.stat h2 {
  margin: 0;
  max-width: 250px;
  font: 700 40px/40px var(--ff-display);
  text-transform: uppercase;
  text-align: right;
  color: var(--c-off);
}
.stat__num {
  margin: 0;
  font: 700 128px/128px var(--ff-display);
  color: var(--c-off);
}
.stat--stack { flex-direction: column; gap: 2px; text-align: center; }
.stat__ico { width: 58px; height: 56px; fill: none; stroke: var(--c-off);
             stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stat__big { margin: 6px 0 0; font: 700 40px/45px var(--ff-display); color: var(--c-off); }
/* Off-white on amber computes to 1.98:1. The big bold items carry at 40/700 and
   stay white (the reference's look); the 30px regular sub-labels do not, so
   they take the near-black ink — same composition, actually legible. */
.stat__lab { margin: 0; font: 400 30px/40px var(--ff-display); color: var(--c-ink); }

/* =============================================================================
   TESTIMONIAL (measured band: 606px, padding 128/96)
   ========================================================================== */
.tm {
  position: relative;
  z-index: 4;
  min-height: 606px;
  margin-top: -64px;
  padding: 128px 0 91px;
  background: var(--c-ink);
  clip-path: polygon(0 56px, 50% 0, 100% 56px, 100% 100%, 0 100%);
  overflow: hidden;
}
.tm__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(153,153,153,.7) 0, rgba(153,153,153,.2));
  pointer-events: none;
}
.tm > .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 556px 118px minmax(0, 1fr);
  column-gap: 37px;
  align-items: start;
}
.tm__frame {
  width: 556px;
  max-width: 100%;
  border: 3px solid #1c1c1c;
  background: #1c1c1c;
}
/* The frame is wider than it is tall against a 3:2 source, so at 1440 and at
   390 nothing is cropped vertically at all; only the 601-900 band trims height.
   Biased low so the respirator on the floor stays in frame there while the
   mould still runs off the top edge. */
/* crew-arrival: the two technicians sit centre-left, the van fills the left
   third — hold the middle so both figures and the house survive the crop */
.tm__frame img { width: 100%; height: 381px; object-fit: cover; object-position: 46% 55%; }

.tm__ctrl { display: flex; flex-direction: column; align-items: flex-end; }
.tm__quote { width: 78px; height: 62px; margin-right: auto; fill: rgba(255,255,255,.34); }
.tm__nav { display: flex; gap: 33px; margin-top: 36px; }
.tm__nav button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 40px;
  cursor: pointer;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.tm__nav svg { width: 18px; height: 30px; fill: none; stroke: var(--c-amber);
               stroke-width: 3.4; stroke-linecap: square; stroke-linejoin: miter; }
.tm__nav button:hover { opacity: .72; }
.tm__nav button:active { transform: translateY(1px); }

.tm__item { display: none; margin: 0; }
.tm__item[data-active] { display: block; }
.tm__item blockquote {
  margin: 0;
  font: 400 20px/30px var(--ff-body);
  color: var(--c-off);
}
.tm__item cite {
  display: block;
  margin-top: 20px;
  font: 700 32px/35px var(--ff-display);
  font-style: normal;
  color: var(--c-amber);
}
.tm__item cite small {
  display: block;
  margin-top: 2px;
  font: 400 17px/22px var(--ff-body);
  color: rgba(251,250,248,.85);
}

/* =============================================================================
   PROCESS (measured band: 750px)
   ========================================================================== */
.proc {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 750px;
  background: var(--c-ink-2);
}
.proc__media { position: relative; overflow: hidden; }
/* descendant, not child: the img now sits inside a <picture> */
.proc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 42%;
}
/* Corner ornament. The reference crops a large star here; a star survives a
   corner crop because its silhouette is read from the arms. Our house-and-check
   mark did not — the knocked-out check lost one arm to the media box's left
   edge and the other to the band bottom, leaving two disconnected black bars.
   Replaced with the concentric pentagon (#orn): the site's own signature shape,
   still legible from its top vertex and upper edges when the corner is cut. */
.proc__mark {
  position: absolute;
  left: -46px;
  bottom: -54px;
  width: 286px;
  height: 286px;
  pointer-events: none;
}

.proc__panel {
  position: relative;
  padding: 100px var(--bleed) 100px 96px;
  background: #171717;
  overflow: hidden;
}
/* The reference's panel is an unmistakable black-fabric macro — dark ground,
   soft light folds (text-free sample: mean 31.4, sd 11.9, range 45). Ours read
   as a flat black box (sd 2.6). The source is a LIGHT frame (mean ~174), and
   simply darkening it flattens the variance with it, so it is inverted first:
   that yields light filigree on a dark ground, the same tonal structure. */
.proc__tex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  filter: grayscale(1) invert(1) contrast(1.25) brightness(.55);
}
.proc__panel > *:not(.proc__tex) { position: relative; }
.proc h2 {
  margin: 0;
  max-width: 490px;
  font: 700 48px/54px var(--ff-display);
  color: var(--c-amber);
}
.proc__step { display: none; margin-top: 38px; }
.proc__step[data-active] { display: block; }

/* Step marker set INLINE with the title, on one baseline — the reference's
   composition (tiny rotated label + large numeral + title). It replaces a
   stacked eyebrow whose own rule was being beaten by `.proc__step p`
   (0,1,1 > 0,1,0), so it shipped as tracked-out near-white body type. */
.proc__step h3 {
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin: 0;
  font: 700 32px/36px var(--ff-display);
  color: var(--c-off);
}
.proc__no {
  flex-shrink: 0;
  align-self: center;
  writing-mode: vertical-rl;
  font: 700 11px/11px var(--ff-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251, 250, 248, .7);
}
.proc__step h3 b {
  flex-shrink: 0;
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
}
.proc__step p {
  margin: 16px 0 0;
  max-width: 520px;
  font: 400 17px/25px var(--ff-body);
  color: rgba(251,250,248,.92);
}

/* the olive rail + numbered chevrons, straddling the 50% split */
/* 3px #9b9c64 sampled off the reference — at 2px #717249 it disappeared into
   the panel instead of reading as a deliberate line. */
.proc__rail {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-olive-line);
  z-index: 6;
}
/* The reference threads the rail THROUGH the pentagons — each one is centred on
   the seam, not butted against its right-hand side. The rail is 3px wide at the
   50% line, so its own centre is at 50% + 1.5px. */
.proc__dots {
  position: absolute;
  left: calc(50% + 1.5px);
  transform: translateX(-50%);
  /* clears the footer's fold, which used to cut the sixth pentagon's bottom
     vertex — invisible while the column hid in the panel, obvious once it
     straddles the seam */
  bottom: 34px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.proc__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 45px;
  padding: 0;                        /* the UA button padding is 1px 6px */
  cursor: pointer;
  color: #999;                       /* sampled off the reference; 5.59:1 */
  font: 700 22px/22px var(--ff-display);
  transition: color .18s var(--ease), transform .18s var(--ease);
}
/* Filled, like the reference's — not an outline. Sitting on the seam, half of
   every pentagon now covers the photo, and an empty one let the rail draw a line
   straight through the numeral and dropped the grey digit to 1.3:1 wherever the
   photo went light. Filled, the digit holds 5.6:1 over any frame. */
.proc__dot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--c-ink);
  stroke: var(--c-amber);
  stroke-width: 3.4;
  stroke-linejoin: miter;
}
/* Scoped to the digit ON PURPOSE. `.proc__dot span` (0,1,1) also matched the
   `.sr-only` step name (0,1,0) and beat its `position: absolute`, which turned
   the visually-hidden label into a second grid row; with `align-content:
   stretch` the two rows shared the free space and pushed the digit 5.5px above
   the pentagon's middle. */
.proc__dot .proc__digit { position: relative; }
.proc__dot:hover { color: var(--c-amber); }
.proc__dot:active { transform: translateY(1px); }
.proc__dot[aria-selected="true"] { color: var(--c-ink); }
.proc__dot[aria-selected="true"] svg { fill: var(--c-amber); }

/* =============================================================================
   FOOTER
   ========================================================================== */
.ft {
  position: relative;
  z-index: 6;
  margin-top: -62px;
  padding-top: 134px;
  background: var(--c-ink-2);
  clip-path: polygon(0 0, 50% 45px, 100% 0, 100% 100%, 0 100%);
  color: var(--c-off);
}
.ft__main {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: center;
  padding-block: 40px 26px;
}
/* The reference's footer lockup is a mark as wide as its wordmark; at 108px
   over a 272px wordmark ours read bottom-heavy. */
.ft .logo { align-items: center; }
/* No size overrides here on purpose. The footer lockup is EXACTLY the header
   lockup — same mark, same wordmark, same gap — and the only way to guarantee
   that is to let both read one definition instead of keeping two in sync by
   hand. It was 188px against a 38px wordmark, nearly twice the header's mark,
   which is precisely the drift this removal prevents from happening again.
   The footer keeps its own alignment (always centred) and nothing else. */

.ft__cta { text-align: center; }
.ft__cta h2 {
  margin: 0 0 18px;
  font: 700 32px/36px var(--ff-display);
  text-transform: uppercase;
  color: var(--c-off);
}
.ft__cta h2 em { display: block; font-style: normal; color: var(--c-amber); }

/* reference sets this column's left edge at x=1018 (54px into the column);
   `justify-self: center` pushed ours ~50px right of that */
.ft__links { justify-self: start; padding-left: 54px; }
.ft__links h2 {
  margin: 0 0 14px;
  font: 700 32px/36px var(--ff-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--c-off);
}
.ft__links ul { margin: 0; padding: 0; list-style: none; }
.ft__links li + li { margin-top: 2px; }
.ft__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 4px;               /* 23px -> 31px: clears WCAG 2.2 SC 2.5.8 */
  font: 400 20px/22.5px var(--ff-body);
  color: var(--c-off);
  text-decoration: none;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.ft__links a:hover, .ft__links a:focus-visible { color: var(--c-amber); }
.ft__links svg { flex-shrink: 0; width: 10px; height: 16px; fill: none;
                 stroke: var(--c-amber); stroke-width: 2.6; stroke-linecap: square; }

.ft__slogan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 52px 24px 70px;
  font: 700 30px/34px var(--ff-display);
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--c-amber);
  text-align: center;
}

.ft__legal { position: relative; background: var(--c-ink); }
.ft__legal .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding-block: 24px;
}
.ft__legal p { margin: 0; font: 400 16px/24px var(--ff-body); color: var(--c-grey); }
.ft__legal a { display: inline-block; padding-block: 3px;
               color: var(--c-amber); text-decoration: none; text-underline-offset: 3px; }
.ft__legal a:hover, .ft__legal a:focus-visible { text-decoration: underline; }
.ft__phone { font: 700 20px/24px var(--ff-display); letter-spacing: .02em; white-space: nowrap; }
.ft__note { text-align: right; }

/* =============================================================================
   MOBILE STICKY CALL BAR (our addition)
   ========================================================================== */
.callbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* The inset is 0 today: the page does not ask for `viewport-fit=cover`, so
     iOS keeps its own layout viewport clear of the home indicator and the bar
     already sits above it. It is written anyway because the day someone adds
     that meta tag, a bar pinned to bottom:0 lands UNDER the indicator — and
     the two numbers have to move together or the reserved strip on <body>
     stops matching the bar's height. box-sizing is border-box, so min-height
     has to carry the inset too or the padding just squeezes the label. */
  min-height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--c-amber);
  color: #000;
  font: 700 20px/24px var(--ff-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 -8px 20px -10px rgba(0,0,0,.55), 0 -1px 0 rgba(0,0,0,.2);
}
.callbar svg { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: #000;
               stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.callbar:active { background: var(--c-amber-hi); }

/* =============================================================================
   INNER-PAGE PRIMITIVES (reused by _template-inner.html)
   ========================================================================== */
.pagehead {
  position: relative;
  z-index: 1;
  padding: calc(var(--hdr-h) + 72px) 0 76px;
  background: var(--c-ink);
  overflow: hidden;
}
.pagehead.topo::before { opacity: .07; }
.pagehead > .wrap { position: relative; z-index: 2; }
.pagehead h1 {
  margin: 0;
  max-width: 900px;
  font: 700 48px/54px var(--ff-display);
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--c-off);
}
.pagehead p {
  margin: 14px 0 0;
  max-width: 720px;
  font: 700 24px/27px var(--ff-display);
  color: rgba(251,250,248,.9);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font: 400 15px/20px var(--ff-body);
  color: rgba(251,250,248,.7);
}
.crumbs a { color: var(--c-amber); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { text-decoration: underline; }

.page {
  position: relative;
  z-index: 2;
  padding: 72px 0 88px;
  background: var(--c-cream);
}
.prose { max-width: 760px; }
.prose h2 { margin: 44px 0 0; font: 700 32px/36px var(--ff-display); color: #000; }
.prose h3 { margin: 32px 0 0; font: 700 24px/28px var(--ff-display); color: #000; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 16px 0 0; font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.prose ul { margin: 16px 0 0; padding-left: 22px; }
.prose li { margin-top: 8px; font: 400 17px/26px var(--ff-body); color: var(--c-body); }
/* #8a6a10 is the site's amber-family ink, and it carries on cream as DISPLAY
   type (--c-ochre, 4.2:1 at 36/700). As a body-copy link it measured 4.17:1 on
   the cream ground — under 1.4.3. These two legal pages are the first to ship
   `.prose`, so the token is corrected here rather than inherited broken:
   #6f5510 is the same hue, 5.80:1 on cream and 5.25:1 on the card ground. */
.prose a { color: #6f5510; text-underline-offset: 3px; }
.prose a:hover { color: #000; }

/* --- long-form legal pages (/privacy-policy/, /terms/) -----------------------
   These ride on `.prose` for type, colour and link treatment. `.legal` only does
   the four things a policy needs that a marketing page does not: narrow the
   measure to a reading column, rule the sections apart so a scanner can find
   one, frame the values we cannot know yet, and quote source text as a quote.
   No new stylesheet — a legal page is the same page type, set narrower.

   Two widths on purpose. The BLOCK stays as wide as the site's own prose column
   so the section index can hold its two columns; the READING elements are
   pulled in to --measure, which renders at ~72 characters — where a
   seventeen-section policy stops being work to read.

   --measure is in px, not `ch`, for a reason found on the render: `ch` is the
   width of a zero IN THAT ELEMENT'S OWN FONT. At `60ch` the paragraphs (Barlow
   17) came out at 576px but the h2 rules (Rajdhani 32) at 960px, so every
   section rule overhung its own text by ~190px. One px value keeps the rule and
   the column it introduces on the same right edge. */
.legal { --measure: 576px; max-width: 760px; }
.legal > h2,
.legal > h3,
.legal > p,
.legal > ul,
.legal > ol,
.legal > dl,
.legal > blockquote { max-width: var(--measure); }

.legal > h2 {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 0, 0, .14);
}

.legal .legal__meta {
  margin: 0;
  font: 500 15px/22px var(--ff-body);
  color: var(--c-badge);
}

/* section index */
.legal__toc {
  margin-top: 34px;
  padding: 22px 26px 24px;
  background: #e7ddd0;
  border-radius: 2px;
}
.legal .legal__toc h2 {
  margin: 0 0 10px;
  padding-top: 0;
  border-top: 0;
  font: 700 20px/24px var(--ff-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-olive-dk);
}
.legal__toc ol {
  columns: 2 240px;
  column-gap: 34px;
  margin: 0;
  padding-left: 20px;
}
.legal__toc li {
  break-inside: avoid;
  margin-top: 5px;
  font: 400 16px/23px var(--ff-body);
  color: var(--c-body);
}
.legal__toc a { color: #6f5510; text-decoration: none; }
.legal__toc a:hover, .legal__toc a:focus-visible { color: #000; text-decoration: underline; }

/* A value that is genuinely not known yet. Flagged in the page, not guessed —
   an invented address or entity name is the one failure mode a legal page
   cannot recover from. */
/* box-decoration-break: a placeholder that lands at the end of a line wraps, and
   without this it draws half a box on each fragment — which reads as a rendering
   fault rather than as a value somebody still has to fill in. */
.ph {
  padding: 1px 5px;
  border: 1px solid rgba(138, 106, 16, .5);
  border-radius: 2px;
  background: rgba(233, 169, 34, .3);
  font: 500 .9em ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: #4a4438;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* text quoted from somewhere else on the site, kept verbatim */
.legal .legal__quote {
  margin: 18px 0 0;
  padding: 14px 20px;
  border-left: 3px solid var(--c-amber);
  background: rgba(255, 255, 255, .55);
}
.legal .legal__quote p { margin: 0; }

/* contact card */
.legal__card {
  margin: 20px 0 0;
  padding: 22px 26px;
  background: #e7ddd0;
  border-radius: 2px;
}
/* --c-badge (#6b6459) is tuned for the cream ground (4.8:1); the card sits two
   steps darker at #e7ddd0, where it drops to 4.36:1. Same grey, darkened to
   clear 4.5 on the ground it actually sits on — 5.17:1. */
.legal__card dt {
  font: 700 14px/18px var(--ff-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5f594f;
}
.legal__card dd {
  margin: 3px 0 16px;
  font: 400 17px/26px var(--ff-body);
  color: var(--c-body);
}
.legal__card dd:last-child { margin-bottom: 0; }
.legal__card a { color: #6f5510; text-underline-offset: 3px; }
.legal__card a:hover { color: #000; }

/* =============================================================================
   SERVICE PAGES  (/mold-inspection/, /black-mold-removal/)
   One page TYPE, two pages. Everything below is assembled from tokens the home
   page already ships — no new colour, no new face, no second design language.
   The band rhythm is the home page's own: dark head, cream, dark, cream, dark.

   The one new device is `.ledger`: a two-column claim/answer table split by the
   olive rail borrowed off the process band. It earns its place because it IS
   the argument of both pages — each one exists to correct a belief the visitor
   arrives with — so the structure encodes the content rather than decorating it.
   ========================================================================== */

/* --- 1 · LEDE: the direct answer, beside a real photo ---------------------- */
.lede {
  position: relative;
  z-index: 2;
  padding: 64px 0 60px;
  background: var(--c-cream);
}
/* The text track is CAPPED, not 1fr. On the free column it rendered at 700px,
   which is ~95 characters of Barlow 17 — the same over-wide measure the legal
   pages already had to solve. 648px lands at ~78, matching `--measure` below. */
.lede .wrap {
  display: grid;
  grid-template-columns: 556px minmax(0, 648px);
  gap: 48px;
  align-items: start;
}
.lede h2 { margin: 0; font: 700 32px/36px var(--ff-display); color: #000; }
.lede p { margin: 16px 0 0; font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.lede__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
/* (0,2,0) — `.lede p` is (0,1,1) and would otherwise take this line back */
.lede .lede__call { margin: 0; font: 400 16px/22px var(--ff-body); color: var(--c-body); }
.lede .lede__call a { color: #6f5510; font-weight: 600; text-underline-offset: 3px; }
.lede .lede__call a:hover { color: #000; }
.lede .stds { margin: 32px 0 0; }
/* taller than the shared 400px so the photo column finishes near the copy
   column instead of leaving a bare cream shelf under it */
.lede .frame img { height: 462px; }

/* photo frame — the testimonial block's frame, generalised so a service page
   can caption a photo on the same dark card instead of floating it on cream */
.frame { margin: 0; border: 3px solid #1c1c1c; background: #1c1c1c; }
.frame img { width: 100%; height: 400px; object-fit: cover; object-position: var(--fpos, 50% 50%); }
/* per-photo pan, kept in the sheet like the service cards' --pw/--px */
.frame--left { --fpos: 30% 52%; }
.frame figcaption {
  padding: 11px 15px 12px;
  font: 400 14px/20px var(--ff-body);
  color: rgba(251, 250, 248, .82);
}
.frame--wide { max-width: 860px; margin: 34px 0 0; }
.frame--wide img { height: 340px; }

/* --- 2 · LEDGER: what you will hear / what is actually true ---------------- */
.ledger {
  position: relative;
  z-index: 2;
  padding: 72px 0 76px;
  background: var(--c-ink);
  overflow: hidden;
}
.ledger.topo::before { opacity: .07; }
.ledger > .wrap { position: relative; z-index: 2; }
.ledger > .wrap > h2 {
  margin: 0 0 30px;
  max-width: 820px;
  font: 700 32px/36px var(--ff-display);
  color: var(--c-amber);
}
/* Both tracks are capped rather than fractional. Left free, the claim sat in a
   580px track it only half filled (a lake of dead charcoal before the rail) and
   the answer ran to ~92 characters. 360 / 620 puts the claim tight against the
   spine and holds the answer at the same measure as the article below. */
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 360px) 3px minmax(0, 620px);
  column-gap: 34px;
  max-width: 1075px;
  padding: 26px 0;
}
.ledger__row + .ledger__row { border-top: 1px solid rgba(251, 250, 248, .16); }
.ledger__rail { background: var(--c-olive-line); }
.ledger__claim p, .ledger__true p { margin: 0; }
.ledger__claim p { font: 700 21px/28px var(--ff-display); color: rgba(251, 250, 248, .84); }
.ledger__true p { font: 400 17px/26px var(--ff-body); color: rgba(251, 250, 248, .94); }
.ledger__claim .ledger__lab,
.ledger__true .ledger__lab {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  font: 700 11px/13px var(--ff-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ledger__claim .ledger__lab { color: rgba(251, 250, 248, .58); }
.ledger__true .ledger__lab { color: var(--c-amber); }
.ledger__lab .dia { width: 9px; height: 9px; }
.ledger a { color: var(--c-amber); text-underline-offset: 3px; }
.ledger a:hover { color: var(--c-amber-hi); }

/* --- 3 · ARTICLE: steps, price, the honest passage, FAQ -------------------- */
.art { position: relative; z-index: 2; padding: 72px 0 68px; background: var(--c-cream); }

/* Same two-width idea as `.legal`: the BLOCK stays wide enough for the step
   rows and the card grid, the READING elements pull in to --measure (~78
   characters at Barlow 17). px, not ch — a `ch` in Rajdhani 32 is nothing like
   a `ch` in Barlow 17, and the section rules would overhang their own text. */
.art__body { --measure: 640px; max-width: 860px; }
.art__body > h2 {
  max-width: var(--measure);
  margin: 56px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 0, 0, .14);
  font: 700 32px/36px var(--ff-display);
  color: #000;
}
.art__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.art__body > p { max-width: var(--measure); margin: 16px 0 0;
                 font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.art__body > ul { max-width: var(--measure); margin: 18px 0 0; padding-left: 0; list-style: none; }
.art__body > ul > li { margin-top: 12px; font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.art a { color: #6f5510; text-underline-offset: 3px; }
.art a:hover { color: #000; }

/* the list draws its own marker — never left to the author to repeat per item */
.marks li { position: relative; padding-left: 26px; }
.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  background: var(--c-amber);
  transform: rotate(45deg);
}

/* numbered steps — the home page's pentagon numerals, set static. The order
   carries information here (you cannot dry before you contain), which is the
   only reason to number anything. */
.steps { max-width: 800px; margin: 26px 0 0; padding-left: 0; list-style: none; }
.step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, .14);
}
.step:first-child { padding-top: 8px; border-top: 0; }
/* a SPAN, not a p: `.step p` (0,1,1) would beat `.step__n` (0,1,0) and set the
   numeral in 17px body type — the same collision that once broke `.proc__step` */
.step__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 45px;
  margin-top: 2px;
  font: 700 22px/22px var(--ff-display);
  color: var(--c-off);
}
.step__n svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--c-ink);
  stroke: var(--c-amber);
  stroke-width: 3.4;
  stroke-linejoin: miter;
}
.step__n span { position: relative; }
.step h3 { margin: 7px 0 0; font: 700 24px/28px var(--ff-display); color: #000; }
.step p { max-width: 640px; margin: 9px 0 0; font: 400 17px/26px var(--ff-body); color: var(--c-body); }

/* the "you do not need us" panel. Olive, not amber, on purpose: amber is the
   colour of every control on this site, and this block is the one place that is
   deliberately not selling anything. */
.note {
  max-width: 720px;
  margin: 22px 0 0;
  padding: 22px 26px 24px;
  border-left: 4px solid var(--c-olive);
  border-radius: 2px;
  background: #e7ddd0;
}
.note h3 {
  margin: 0;
  font: 700 20px/24px var(--ff-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-olive-dk);
}
.note p { margin: 12px 0 0; font: 400 17px/26px var(--ff-body); color: var(--c-body); }

/* --- FAQ: real text, no accordion, no script ------------------------------ */
.faq { max-width: 800px; margin: 6px 0 0; }
.faq__q {
  display: flex;
  gap: 13px;
  margin: 30px 0 0;
  font: 700 21px/27px var(--ff-display);
  color: #000;
}
.faq__q::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 9px;
  background: var(--c-amber);
  transform: rotate(45deg);
}
.faq__a { max-width: 640px; margin: 9px 0 0; padding-left: 23px;
          font: 400 17px/26px var(--ff-body); color: var(--c-body); }

/* --- 4 · RELATED: the whole card is the link ------------------------------ */
.rel { max-width: 860px; margin: 54px 0 0; padding-top: 30px; border-top: 1px solid rgba(0, 0, 0, .14); }
.rel h2 { margin: 0; font: 700 24px/28px var(--ff-display); letter-spacing: .02em;
          text-transform: uppercase; color: var(--c-olive-dk); }
.rel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.rel__card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 2px;
  background: #e7ddd0;
  color: #000;
  text-decoration: none;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.rel__card .pent { flex-shrink: 0; width: 58px; height: 56px; color: var(--c-olive-dk); }
.rel__txt { min-width: 0; }
.rel__card b { display: block; font: 700 21px/25px var(--ff-display);
               letter-spacing: .01em; text-transform: uppercase; }
/* `b + span`, not `span` — a bare `.rel__card span` also matches the wrapper */
.rel__card b + span { display: block; margin-top: 3px; font: 400 15px/21px var(--ff-body); color: var(--c-body); }
.rel__card:hover { background: #dccfbd; }
.rel__card:active { transform: translateY(1px); }

/* --- 5 · CLOSING CTA ------------------------------------------------------
   Charcoal, not amber: the mobile call bar is amber and fixed, and an amber
   band underneath it makes the bar vanish exactly where the visitor is being
   asked to call. Charcoal also bookends the page against the head band. */
.close {
  position: relative;
  z-index: 3;
  padding: 72px 0 124px;
  background: var(--c-ink);
  overflow: hidden;
  text-align: center;
}
.close.topo::before { opacity: .07; }
.close > .wrap { position: relative; z-index: 2; }
.close h2 {
  margin: 0;
  font: 700 36px/40px var(--ff-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-off);
}
.close h2 em { font-style: normal; color: var(--c-amber); }
.close p { max-width: 620px; margin: 14px auto 0; font: 400 17px/26px var(--ff-body);
           color: rgba(251, 250, 248, .9); }
.close__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
              gap: 20px; margin-top: 26px; }
/* (0,2,0) — beats `.close p` (0,1,1) */
.close .close__call { max-width: none; margin: 0; font: 700 20px/24px var(--ff-display);
                      letter-spacing: .02em; color: rgba(251, 250, 248, .9); }
.close .close__call a { color: var(--c-amber); text-underline-offset: 3px; }
.close .close__call a:hover { color: var(--c-amber-hi); }

/* =============================================================================
   TRUST PAGES — /about/, /contact/, /service-areas/, /faq/

   A trust page is not an article. It carries no reading column and no sidebar:
   it is a stack of compact full-width blocks that a visitor — or an ad reviewer
   deciding whether this business is real — can scan in one pass. Everything
   below is assembled from tokens and glyphs the home page already ships. No
   second design language, no new palette, no new face.

   Three compositions do the actual work, and each one encodes something true:
   · .dispatch — the home page's olive rail and numbered pentagons turned on
     their side. Numbered because call → route → arrive IS a sequence.
   · .split    — the same rail run vertically between two facing columns, for
     the one fact an ad reviewer needs: who does what. National operator on the
     left, independent local crew on the right, the rail between them.
   · .cost     — prices as a ruled ledger rather than as cards. The FAQ's
     opening block, deliberately never inside a <details>: burying the first
     question a homeowner has behind a click is what makes them leave.
   ========================================================================== */

.tp { position: relative; z-index: 2; padding: 64px 0; background: var(--c-cream); }
.tp--ink { background: var(--c-ink); color: var(--c-off); overflow: hidden; }
.tp--ink.topo::before { opacity: .07; }
.tp > .wrap { position: relative; z-index: 2; }
/* the section that meets the closing CTA's fold needs room for the 56px bite */
.tp--tail { padding-bottom: 116px; }
/* Two cream sections in a row have no colour change to justify two full pads —
   64 + 64 reads as a hole, not a break. Collapse the second one's top pad and
   let the first section's bottom pad carry the whole seam. Only cream-on-cream:
   an ink band must keep its own top pad or its background loses its margin. */
.tp:not(.tp--ink) + .tp:not(.tp--ink) { padding-top: 0; }

.tp__h2 { margin: 0 0 24px; font: 700 32px/36px var(--ff-display); color: #000; }
.tp--ink .tp__h2 { color: var(--c-amber); }

.tp__lead { max-width: 880px; margin: 0; font: 400 21px/31px var(--ff-body); color: var(--c-body); }
.tp__lead + .tp__lead { margin-top: 18px; }
.tp--ink .tp__lead { color: rgba(251, 250, 248, .92); }

/* The standard, with the document beside it — a named standard is easier to
   believe when you can see the thing that carries the name. */
.tp__std { display: flex; align-items: flex-start; gap: 32px; }
.tp__std-img {
  flex-shrink: 0;
  width: 182px;
  height: auto;
  border: 1px solid var(--c-line, #cfc7bb);
  box-shadow: 0 10px 24px -14px rgba(28, 28, 28, .45), 0 2px 6px -3px rgba(28, 28, 28, .3);
}
@media (max-width: 700px) {
  .tp__std { flex-direction: column; gap: 22px; }
  .tp__std-img { width: 148px; align-self: flex-start; }
}

.tp__body { max-width: 680px; }
.tp__body > p { margin: 0 0 16px; font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.tp__body > p:last-child { margin-bottom: 0; }
.tp--ink .tp__body > p { color: rgba(251, 250, 248, .92); }

.tp__lead a, .tp__body a { color: #6f5510; text-underline-offset: 3px; }
.tp__lead a:hover, .tp__body a:hover { color: #000; }
.tp--ink .tp__lead a, .tp--ink .tp__body a { color: var(--c-amber); }
.tp--ink .tp__lead a:hover, .tp--ink .tp__body a:hover { color: var(--c-amber-hi); }

/* A block that follows a run of copy or a list, without a heading between.
   Scoped `.tp .tp__gap` ON PURPOSE, not bare `.tp__gap`. Three of the elements
   that carry it — `.tp__frame`, `.tp__note`, `.cost` — set `margin: 0` in their
   own rules further down this sheet. At equal specificity the later shorthand
   won and silently zeroed the gap on every one of them: the service-areas photo
   sat flush against the paragraph above it, and the FAQ's price ledger drew its
   top rule through the lead's descenders. Two classes beats one. */
.tp .tp__gap { margin-top: 34px; }
.tp .tp__h2 + .tp__gap { margin-top: 0; }

/* --- framed photography (the testimonial frame, reused) ---------------------
   The frame lives on the IMG, not on the <figure>, so the caption can sit below
   it on the page ground instead of inside a dark plate. `margin: 0` on the
   figure is load-bearing: the UA default is `1em 40px`, which silently indents
   every photo on these pages by 40px. */
.tp__frame { margin: 0; }
.tp__frame img { width: 100%; height: 340px; object-fit: cover;
                 border: 3px solid #1c1c1c; background: #1c1c1c; }
.tp__strip img { height: 320px; }
/* For a photo whose subject sits at the FOOT of the frame. The strip is 1304x320
   against a 3:2 source, so `cover` keeps only the middle 37% of the height and
   anchors it centrally — which cropped the FAQ's air scrubber down to a blue
   sliver at the bottom edge, directly above a caption that names it. Anchoring
   to the bottom puts the scrubber, its ducting and the taped seal in frame.
   Opt-in per image: the sibling strip (crew-arrival) frames correctly centred. */
.tp__frame img.tp__img--foot { object-position: 50% 100%; }
.tp__cap { max-width: 760px; margin: 12px 0 0; font: 400 15px/22px var(--ff-body); color: var(--c-badge); }
.tp--ink .tp__cap { color: rgba(251, 250, 248, .72); }

/* text one side, photo the other */
.tp__intro { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
             gap: 58px; align-items: center; }
/* where one column is much the taller (contact: a phone plate plus five detail
   rows against one photo), centring leaves the photo floating in the middle of
   its own dead space */
.tp__intro--top { align-items: start; }

/* --- check / cross lists ---------------------------------------------------
   The brand mark is a house with a knocked-out check, so a check is the site's
   own bullet rather than a borrowed icon set. The cross list is the same
   component inverted, for the claims we deliberately do not make. */
/* 780px, not full width: inside `.split` the grid column already constrains the
   measure, but standing alone in a full-width block these ran to ~150 characters
   a line, which is a wall of text wearing a checklist's clothes. */
.ticks { max-width: 780px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: 14px; margin-top: 15px;
            font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.ticks li:first-child { margin-top: 0; }
.ticks li b { font-weight: 700; color: #000; }
.ticks svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; fill: none;
             stroke: var(--c-ochre); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.tp--ink .ticks li { color: rgba(251, 250, 248, .92); }
.tp--ink .ticks li b { color: var(--c-off); }
.tp--ink .ticks svg { stroke: var(--c-amber); }

/* --- framed aside (the legal pages' quote block, generalised) --- */
.tp__note { max-width: 780px; margin: 0; padding: 22px 26px;
            border-left: 4px solid var(--c-amber); background: rgba(255, 255, 255, .55); }
.tp__note h3 { margin: 0 0 14px; font: 700 22px/26px var(--ff-display); color: #000; }
.tp__note > p { margin: 0 0 12px; font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.tp__note > p:last-child { margin-bottom: 0; }
.tp__note .ticks + p { margin-top: 18px; }
.tp__note a { color: #6f5510; text-underline-offset: 3px; }
.tp__note a:hover { color: #000; }

/* =============================================================================
   /service-areas/
   ========================================================================== */

/* the home page's process rail, laid horizontally. Pentagons are FILLED for the
   same reason they are on the home page: an outline lets the rail draw a line
   straight through the numeral. */
.dispatch { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 30px; margin: 0; padding: 0; list-style: none; }
.dispatch::before { content: ""; position: absolute; top: 21px; left: 16.667%; right: 16.667%;
                    height: 3px; background: var(--c-olive); }
/* `align-content: start` is load-bearing, not tidiness. The three items are
   stretched to a common height, and a grid's default `align-content: stretch`
   shares the leftover height out among AUTO rows — so the two steps with the
   shorter paragraph had their heading and copy pushed down while the tallest
   step's stayed packed, and the three headings landed on three different
   baselines. (Same failure the process pentagons hit on the home page.) */
.dispatch > li { position: relative; display: grid; align-content: start;
                 justify-items: center; text-align: center; }
.dispatch__mark { position: relative; display: grid; place-items: center; width: 46px; height: 45px;
                  margin-bottom: 20px; font: 700 22px/22px var(--ff-display); color: var(--c-ink); }
.dispatch__mark svg { position: absolute; inset: 0; width: 100%; height: 100%;
                      fill: var(--c-amber); stroke: var(--c-amber); stroke-width: 3.4; stroke-linejoin: miter; }
.dispatch__mark b { position: relative; }
.dispatch h3 { margin: 0; font: 700 22px/26px var(--ff-display); color: #000; }
.dispatch p { margin: 10px auto 0; max-width: 340px; font: 400 16px/24px var(--ff-body); color: var(--c-body); }
.dispatch a { color: #6f5510; text-underline-offset: 3px; }
.dispatch a:hover { color: #000; }

/* metro groups. The GROUPS are the content: each one names the moisture
   mechanism that keeps its crews busy, which is why the page is ordered this
   way and not alphabetically. Plain text, never link-styled — there are no
   per-city pages behind these names. */
.metros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.metros h3 { margin: 0; font: 700 20px/24px var(--ff-display); letter-spacing: .04em;
             text-transform: uppercase; color: var(--c-amber); }
.metros__why { margin: 5px 0 13px; font: 400 14px/20px var(--ff-body); color: rgba(251, 250, 248, .72); }
.metros ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(251, 250, 248, .22); }
.metros li { padding: 8px 0; font: 500 17px/22px var(--ff-body); color: var(--c-off);
             border-bottom: 1px solid rgba(251, 250, 248, .11); }

.states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 26px; }
.states h3 { margin: 0 0 10px; padding-bottom: 9px; border-bottom: 2px solid var(--c-olive);
             font: 700 18px/22px var(--ff-display); letter-spacing: .05em;
             text-transform: uppercase; color: var(--c-olive-dk); }
.states ul { margin: 0; padding: 0; list-style: none; }
.states li { font: 400 16px/26px var(--ff-body); color: var(--c-body); }

/* =============================================================================
   /about/ — the division-of-labour split
   ========================================================================== */
.split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
.split::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
                 background: var(--c-olive-line); transform: translateX(-50%); }
.split h3 { margin: 0 0 20px; font: 700 24px/28px var(--ff-display); color: var(--c-off); }

/* =============================================================================
   /contact/
   ========================================================================== */
.ccard__label { margin: 0 0 8px; font: 700 13px/18px var(--ff-display); letter-spacing: .1em;
                text-transform: uppercase; color: #5f594f; }
.ccard__phone { margin: 0; }
.ccard__phone a { font: 700 54px/58px var(--ff-display); letter-spacing: .01em;
                  color: var(--c-ochre); text-decoration: none; white-space: nowrap; }
.ccard__phone a:hover { color: #000; text-decoration: underline; text-underline-offset: 6px; }
.ccard__sub { margin: 10px 0 0; max-width: 520px; font: 400 17px/26px var(--ff-body); color: var(--c-body); }

.cinfo { display: grid; grid-template-columns: 158px minmax(0, 1fr); margin: 30px 0 0;
         border-top: 1px solid rgba(0, 0, 0, .16); }
.cinfo dt { padding: 15px 16px 15px 0; border-bottom: 1px solid rgba(0, 0, 0, .16);
            font: 700 13px/23px var(--ff-display); letter-spacing: .08em;
            text-transform: uppercase; color: #5f594f; }
.cinfo dd { margin: 0; padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, .16);
            font: 400 17px/25px var(--ff-body); color: var(--c-body); }
.cinfo a { color: #6f5510; text-underline-offset: 3px; }
.cinfo a:hover { color: #000; }

/* =============================================================================
   /faq/ — open cost ledger, then native <details>
   ========================================================================== */
.cost { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0;
        max-width: 880px; border-top: 2px solid rgba(0, 0, 0, .22); }
.cost dt { padding: 17px 28px 17px 0; border-bottom: 1px solid rgba(0, 0, 0, .16);
           font: 400 17px/25px var(--ff-body); color: var(--c-body); }
.cost dt b { display: block; font: 700 19px/25px var(--ff-display); color: #000; }
.cost dd { margin: 0; padding: 17px 0; border-bottom: 1px solid rgba(0, 0, 0, .16);
           font: 700 27px/31px var(--ff-display); color: var(--c-ochre);
           text-align: right; white-space: nowrap; }

.tp__h3 { margin: 36px 0 16px; font: 700 24px/28px var(--ff-display); color: #000; }

/* diamond-marked list — the site's own ornament, drawn by the component rather
   than repeated in every item's markup */
.drivers { max-width: 780px; margin: 0; padding: 0; list-style: none; }
.drivers li { position: relative; margin-top: 13px; padding-left: 26px;
              font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.drivers li:first-child { margin-top: 0; }
.drivers li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px;
                      background: var(--c-amber); transform: rotate(45deg); }
.drivers b { font-weight: 700; color: #000; }

/* Named `.qa`, NOT `.faq`: the service-page template above already owns
   `.faq` / `.faq__q` / `.faq__a` for its always-open five-question block. Those
   selectors are in use on shipped pages, and a same-specificity redefinition
   later in this sheet would silently restyle them. Different component, its own
   namespace. */
/* 880px matches the cost ledger above it, so both blocks share one right edge.
   At full width the rules ran 1352px while the answers stopped at 700 — the
   question index looked unfinished rather than wide. */
.qa { max-width: 880px; margin: 0; border-top: 1px solid rgba(0, 0, 0, .18); }
.qa__item { border-bottom: 1px solid rgba(0, 0, 0, .18); }
.qa__item > summary { display: flex; align-items: flex-start; gap: 16px; padding: 17px 0;
                      list-style: none; cursor: pointer;
                      font: 700 21px/28px var(--ff-display); color: #000; }
.qa__item > summary::-webkit-details-marker { display: none; }
.qa__item > summary::marker { content: ""; }
.qa__item > summary:hover { color: var(--c-olive-dk); }
/* the chevron IS the open/closed state, so it takes the cream-legible ochre
   rather than the amber the same glyph wears on the footer's near-black */
.qa__chev { flex-shrink: 0; width: 12px; height: 19px; margin-top: 5px; fill: none;
            stroke: var(--c-ochre); stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter;
            transform-origin: 50% 50%; transition: transform .18s var(--ease); }
.qa__item[open] > summary .qa__chev { transform: rotate(90deg); }
.qa__a { max-width: 700px; padding: 0 0 24px 28px; }
.qa__a p { margin: 0 0 14px; font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.qa__a p:last-child { margin-bottom: 0; }
.qa__a ul { margin: 0 0 14px; padding-left: 20px; }
.qa__a li { margin-top: 8px; font: 400 17px/26px var(--ff-body); color: var(--c-body); }
.qa__a a { color: #6f5510; text-underline-offset: 3px; }
.qa__a a:hover { color: #000; }
.qa + .tp__h2 { margin-top: 54px; }

/* =============================================================================
   CLOSING CTA — the home page's cream→charcoal fold, reused as a page ending
   ========================================================================== */
/* padding-bottom clears the footer's own -62px pull with ~22px to spare; more
   than that and the band reads as an empty dark field before the footer starts */
.cta-end { position: relative; z-index: 3; margin-top: -56px; padding: 112px 0 84px;
           background: var(--c-ink-2); text-align: center; overflow: hidden;
           clip-path: polygon(0 56px, 50% 0, 100% 56px, 100% 100%, 0 100%); }
.cta-end.topo::before { opacity: .07; }
.cta-end > .wrap { position: relative; z-index: 2; }
.cta-end h2 { margin: 0; font: 700 36px/40px var(--ff-display); text-transform: uppercase; color: var(--c-off); }
.cta-end h2 em { display: block; font-style: normal; color: var(--c-amber); }
.cta-end p { margin: 16px auto 0; max-width: 640px; font: 400 17px/26px var(--ff-body);
             color: rgba(251, 250, 248, .88); }
.cta-end__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                gap: 16px 28px; margin-top: 28px; }
.cta-end__tel { flex-shrink: 0; display: inline-flex; align-items: center;
                font: 700 26px/30px var(--ff-display); letter-spacing: .02em;
                color: var(--c-amber); text-decoration: none; white-space: nowrap;
                transition: color .18s var(--ease); }
.cta-end__tel:hover { color: var(--c-amber-hi); text-decoration: underline; text-underline-offset: 5px; }

/* =============================================================================
   RESPONSIVE — one markup, CSS only
   ========================================================================== */

/* --- narrow desktop / tablet --- */
@media (max-width: 1180px) {
  .hdr-nav ul { gap: 24px; padding-inline: 0; }
  .hdr-nav a { font-size: 21px; }
  .cream .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  /* the reference's 235px pitch needs 1440 of room */
  .stds { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: normal;
          justify-items: center; gap: 22px 24px; margin-left: 0; }
  .svc__card { padding-left: 262px; }
  .svc__glyph { left: 26px; width: 158px; height: 158px; }
  .svc__tab { gap: 16px; padding: 0 20px; font-size: 21px; }
  .tm > .wrap { grid-template-columns: minmax(0, 1.35fr) 100px minmax(0, 1fr); column-gap: 28px; }
  .tm__frame { width: 100%; }
  /* the reference's right-third packing needs 1440 of room — below that,
     spread evenly again so nothing collides */
  .stats .wrap { justify-content: space-around; gap: 30px; padding-inline: var(--pad); }
  .stats .stat:first-child { margin-right: 0; }
  .stat h2 { font-size: 32px; line-height: 34px; }
  .stat__num { font-size: 96px; line-height: 96px; }
  .stat__big { font-size: 34px; line-height: 38px; }
  .stat__lab { font-size: 25px; line-height: 32px; }
  .proc h2 { font-size: 40px; line-height: 45px; }
  .proc__panel { padding-left: 68px; }
  .ft__links h2, .ft__cta h2 { font-size: 27px; line-height: 31px; }
}

@media (max-width: 1040px) {
  .svc__card { padding-left: 204px; padding-right: 40px; }
  .svc__glyph { left: 18px; width: 128px; height: 128px; }
}


/* --- mobile stack --- */
@media (max-width: 900px) {
  /* Exactly the bar's height, so the strip this reserves is the strip the bar
     covers — measured, not assumed. Both carry the same inset for the same
     reason (see .callbar); today it resolves to 0 on every browser. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* header becomes a normal solid block; only ONE pinned bar on mobile */
  .hdr {
    position: static;
    padding-bottom: 0;
    background: var(--c-ink);
  }
  .hdr-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas:
      "logo burger"
      "nav  nav"
      "cta  cta"
      "find find";
    align-items: center;
    /* The padding SHORTHAND used to land here as `16px 0 0`, which zeroed the
       .wrap inline padding this element also carries — that is why the logo sat
       flush against the viewport edge while every band below it was inset. The
       inset is the site's own content inset, so the lockup now lines up with the
       hero H1 underneath it. */
    padding: 18px var(--pad) 16px;
  }
  /* open, the near-white panel runs to the header's own bottom edge */
  .hdr[data-open] .hdr-inner { padding-bottom: 0; }
  .hdr-burger { grid-area: burger; }

  /* The reference keeps the big STACKED lockup on mobile — mark above wordmark,
     left edge flush with the content column, ~121px tall (mmref-m-closed.png). */
  /* SIZE is shared by header and footer; only the ALIGNMENT differs, so only
     that is scoped to .hdr. The mark keeps its 84px from the base rule. */
  .logo { gap: 4px; }
  .logo b { font-size: 34px; line-height: 36px; letter-spacing: .05em; }
  .hdr .logo { align-items: flex-start; }

  .hdr-burger {
    display: grid;
    place-items: center;
    justify-self: end;
    width: 52px;
    height: 52px;
    cursor: pointer;
  }
  .hdr-burger svg { width: 30px; height: 22px; fill: none; stroke: var(--c-amber);
                    stroke-width: 3; stroke-linecap: square; }
  /* the reference swaps the burger for an X while the menu is open */
  .hdr-burger__x { display: none; }
  .hdr[data-open] .hdr-burger__bars { display: none; }
  .hdr[data-open] .hdr-burger__x { display: block; }

  /* Collapsible near-white panel — nav + contact + zip finder, in the
     reference's order. The panel is full-bleed; its CONTENTS are inset 16px, so
     nothing in the open menu touches the viewport edge (mmref-m-menu.png). */
  .hdr-nav, .hdr-cta, .hdr-find {
    display: none;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: 16px;
    background: var(--c-off);
  }
  .hdr[data-open] .hdr-nav,
  .hdr[data-open] .hdr-find,
  .hdr[data-open] .hdr-cta { display: block; }

  .hdr-nav { margin-top: 30px; padding-block: 16px 4px; }
  .hdr-nav::before { display: none; }
  .hdr-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-inline: 0; }
  /* measured off the reference: 16px/500 uppercase, dark grey, 32px row pitch */
  .hdr-nav a {
    width: auto;
    padding: 8px 0;
    font: 500 16px/16px var(--ff-display);
    letter-spacing: .04em;
    color: #333;
  }
  .hdr-nav a:hover, .hdr-nav a:focus-visible, .hdr-nav a[aria-current="page"] { color: #8a6a10; }

  /* CONTACT is an inline-width button sitting at the same 16px inset — never a
     full-bleed amber bar, which read as a decorative band rather than a control */
  .hdr-cta { justify-self: stretch; padding-block: 18px 24px; }
  .hdr-cta .btn { padding: 8px 24px; font-size: 18px; line-height: 20px; }

  .hdr-find { padding-block: 0 26px; }
  .hdr-find .zip-label { margin-bottom: 10px; font-size: 19px; line-height: 20px; color: #2a2a2a; }
  .hdr-find .zip-label b { color: inherit; }
  /* the reference's ZIP row is a fixed 300px unit at the inset — input + Go,
     ending well short of the right edge, not a full-bleed bar */
  .hdr-find .zip-form { max-width: 300px; }
  .hdr-find .zip-form input { flex: 1 1 auto; width: auto; border: 1px solid #cfc9c1; }
  .hdr-find .zip-note { max-width: none; color: #2a2a2a; }
  .hdr-find .zip-note a { color: #8a6a10; }

  /* hero */
  .hero { min-height: 0; padding: 0 0 34px; }
  .hero > .wrap { padding-block: 54px 0; }
  .hero h1 { font-size: 34px; line-height: 39px; }
  .hero__sub { margin-top: 12px; font-size: 19px; line-height: 24px; }
  .hero__cta .btn { width: 100%; }
  .spec { padding-top: 42px; }
  .spec__head { gap: 16px; }
  .spec__head span { font-size: 24px; line-height: 32px; }
  .spec__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    padding-inline: var(--pad);
  }
  .spec__list li + li { border-top: 1px solid rgba(251,250,248,.16); }
  .spec__list a,
  .spec__list .spec__cur { gap: 16px; padding: 13px 0; font-size: 21px; line-height: 24px; }
  .spec__list .pent { width: 50px; height: 48px; }

  /* cream */
  .cream { min-height: 0; padding: 56px 0; }
  .cream .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cream h2 { font-size: 27px; line-height: 31px; }
  .stds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }

  /* services */
  .svc { min-height: 0; padding: 52px 0; }
  .svc h2 { font-size: 27px; line-height: 31px; }
  .svc__module { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
  .svc__tabs { order: -1; gap: 0; padding: 0 var(--pad) 22px; }
  .svc__tab { height: 62px; padding: 0 14px; font-size: 20px; line-height: 23px; }
  .svc__tab::before { clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%); }
  .svc__tab .pent { width: 46px; height: 44px; }
  .svc__stage { min-height: 0; }
  .svc__card {
    position: relative;
    inset: auto;
    display: none;
    min-height: 330px;
    padding: 34px var(--pad) 36px;
    text-align: center;             /* the reference centres this card on mobile */
  }
  .svc__card[data-active] { display: flex; }
  .svc__card[hidden] { display: none; }
  /* a 90deg scrim across a 390px card left the photo invisible; the reference
     runs it vertically — dark where the copy sits, photo reading at the foot */
  .svc__card::after {
    background: linear-gradient(180deg,
      rgba(2,2,2,.93) 0%, rgba(2,2,2,.89) 50%, rgba(2,2,2,.64) 76%,
      rgba(2,2,2,.24) 91%, rgba(2,2,2,.12) 100%);
  }
  /* equal specificity to the per-card pan above, later in the sheet -> wins */
  .svc__stage .svc__card { --pw: 100%; --px: 0px; --ppos: 50% 44%; }
  /* the reference drops the pictogram entirely on mobile — at 50% over
     near-black ours composited to a muddy olive-brown smear */
  .svc__glyph { display: none; }
  .svc__card h3 { font-size: 27px; line-height: 31px; }
  .svc__card p { max-width: 100%; }
  .svc__card .btn { align-self: center; }

  /* slogan + stats */
  .slogan { min-height: 0; padding: 44px 0 52px; }
  .slogan p { gap: 14px; font-size: 22px; line-height: 27px; }
  .dia { width: 12px; height: 12px; }
  .stats { min-height: 0; margin-top: -34px; padding: 66px 0 48px;
           clip-path: polygon(0 0, 50% 34px, 100% 0, 100% 100%, 0 100%); }
  .stats .wrap { flex-direction: column; gap: 34px; }
  .stat { flex-direction: column; gap: 4px; text-align: center; }
  .stat h2 { max-width: none; text-align: center; font-size: 30px; line-height: 33px; }
  .stat__num { font-size: 92px; line-height: 92px; }
  .stat__big { font-size: 32px; line-height: 36px; }
  .stat__lab { font-size: 22px; line-height: 28px; }

  /* testimonial */
  .tm { min-height: 0; margin-top: -30px; padding: 62px 0 56px;
        clip-path: polygon(0 30px, 50% 0, 100% 30px, 100% 100%, 0 100%); }
  .tm > .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .tm__frame { width: 100%; }
  .tm__frame img { height: 240px; }
  .tm__ctrl { flex-direction: row; align-items: center; justify-content: space-between; }
  .tm__quote { width: 58px; height: 46px; margin-right: 0; }
  .tm__nav { margin-top: 0; }
  .tm__item blockquote { font-size: 18px; line-height: 27px; }
  .tm__item cite { font-size: 26px; line-height: 29px; }

  /* process */
  .proc { grid-template-columns: minmax(0, 1fr); min-height: 0; background: #1c1a18; }
  .proc__media { order: 0; height: 280px; }
  /* reference puts it bottom-RIGHT on mobile, and smaller — ours sat over the
     subject at 196px on a 390x280 box and read as a "verified" sticker */
  .proc__mark { left: auto; right: -46px; bottom: -42px; width: 172px; height: 172px; }
  .proc__panel { order: 2; padding: 8px var(--pad) 52px; }
  .proc h2 { max-width: none; font-size: 30px; line-height: 34px; text-align: center; }
  .proc__rail { display: none; }
  .proc__dots {
    order: 1;
    position: static;
    /* the desktop rule centres the rail with translateX(-50%); the row is
       full-width here, so the translate must be undone or steps 1-3 land
       off-screen (they did) */
    transform: none;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 30px var(--pad) 26px;
  }
  .proc__dot { width: 44px; height: 43px; }
  .proc__step { margin-top: 28px; }
  .proc__step h3 { font-size: 26px; line-height: 30px; }

  /* footer */
  .ft { margin-top: -30px; padding-top: 64px;
        clip-path: polygon(0 0, 50% 26px, 100% 0, 100% 100%, 0 100%); }
  .ft__main { grid-template-columns: minmax(0, 1fr); gap: 40px; text-align: center;
              padding-block: 26px 10px; }
  /* the reference keeps the footer lockup stacked on mobile, unlike the header */
  /* stacked and centred, at exactly the header's size (see the <=900 block) */
  .ft .logo { flex-direction: column; }
  .ft__links { justify-self: stretch; padding-left: 0; }
  .ft__links h2, .ft__cta h2 { font-size: 26px; line-height: 30px; }
  .ft__links ul { display: inline-block; text-align: left; }
  .ft__slogan { gap: 12px; padding: 34px 24px 40px; font-size: 21px; line-height: 26px; }
  .ft__legal .wrap { grid-template-columns: minmax(0, 1fr); gap: 14px;
                     justify-items: center; text-align: center; }
  .ft__note { text-align: center; }

  .callbar { display: flex; }

  /* inner pages */
  .pagehead { padding: 48px 0 44px; }
  .pagehead h1 { font-size: 32px; line-height: 37px; }
  .pagehead p { font-size: 19px; line-height: 24px; }
  .page { padding: 48px 0 60px; }

  /* legal pages */
  .legal > h2 { margin-top: 40px; padding-top: 22px; }
  .legal__toc { padding: 18px 20px 20px; }
  .legal__toc ol { columns: 1; padding-left: 22px; }
  .legal__card { padding: 18px 20px; }
  .legal .legal__quote { padding: 12px 16px; }
}

/* tablet: mobile stack, but the hero can still carry desktop-ish type */
@media (min-width: 601px) and (max-width: 900px) {
  .hero > .wrap { padding-block: 72px 0; }
  .hero h1 { font-size: 42px; line-height: 47px; }
  .hero__sub { font-size: 21px; line-height: 26px; }
  .hero__cta .btn { width: auto; }
  .spec__list a,
  .spec__list .spec__cur { font-size: 23px; line-height: 26px; }
  .cream h2, .svc h2 { font-size: 30px; line-height: 34px; }
  .stds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc__card { min-height: 300px; }
  .tm__frame img { height: 320px; }
  .proc__media { height: 360px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 30px; line-height: 35px; }
  .stat__num { font-size: 76px; line-height: 76px; }
  .proc__dot { width: 40px; height: 39px; font-size: 20px; }
  .slogan p { font-size: 19px; letter-spacing: .03em; }
  .ft__slogan { font-size: 18px; letter-spacing: .03em; }
}

@media (max-width: 360px) {
  .hdr .logo { min-width: 0; }
  .logo svg { width: 64px; height: 64px; }
  .logo b { font-size: 25px; line-height: 27px; letter-spacing: .03em; }
  .callbar { font-size: 18px; }
}

/* --- service pages: narrow desktop / tablet --- */
@media (max-width: 1180px) {
  .lede .wrap { grid-template-columns: minmax(0, 430px) minmax(0, 648px); gap: 36px; }
  .lede .frame img { height: 392px; }
  .ledger__row { column-gap: 26px; }
}

/* --- service pages: mobile stack --- */
@media (max-width: 900px) {
  .lede { padding: 40px 0 44px; }
  .lede .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lede h2 { font-size: 27px; line-height: 31px; }
  .lede .frame img, .frame img { height: 236px; }
  .lede .stds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .lede__cta { gap: 14px; }
  .lede__cta .btn { width: 100%; }

  .ledger { padding: 46px 0 48px; }
  .ledger > .wrap > h2 { margin-bottom: 20px; font-size: 27px; line-height: 31px; }
  /* the spine cannot run between two stacked cells, so it becomes a short tick
     that introduces the answer — same rail, same job, one markup */
  .ledger__row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 22px 0; }
  .ledger__rail { width: 56px; height: 3px; }
  .ledger__claim p { font-size: 19px; line-height: 26px; }

  .art { padding: 44px 0 46px; }
  .art__body > h2 { margin-top: 42px; padding-top: 22px; font-size: 27px; line-height: 31px; }
  .step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
  .step__n { width: 40px; height: 39px; font-size: 20px; }
  .step h3 { margin-top: 4px; font-size: 21px; line-height: 25px; }
  .frame--wide { margin-top: 28px; }
  .frame--wide img { height: 220px; }
  .note { padding: 18px 20px 20px; }
  .faq__q { font-size: 19px; line-height: 25px; }

  .rel { margin-top: 44px; }
  .rel__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .close { padding: 48px 0 98px; }
  .close h2 { font-size: 26px; line-height: 30px; }
  .close__cta { gap: 16px; }
  .close__cta .btn { width: 100%; }
}

/* --- trust pages: narrow desktop --- */
@media (max-width: 1180px) {
  .tp__intro { gap: 40px; }
  .metros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .states { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; }
  .split { gap: 40px; }
  .ccard__phone a { font-size: 46px; line-height: 50px; }
}

@media (max-width: 1040px) {
  .metros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- trust pages: mobile stack --- */
@media (max-width: 900px) {
  .tp { padding: 46px 0; }
  .tp--tail { padding-bottom: 74px; }
  .tp__h2 { margin-bottom: 20px; font-size: 27px; line-height: 31px; }
  .tp__h3 { margin-top: 30px; font-size: 21px; line-height: 25px; }
  .tp__lead { font-size: 19px; line-height: 28px; }
  .tp .tp__gap { margin-top: 26px; }
  .tp__intro { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .tp__frame img { height: 232px; }
  .tp__strip img { height: 208px; }
  .tp__note { padding: 18px 20px; }

  /* The horizontal rail cannot run between three stacked steps, so it turns
     back into the home page's VERTICAL rail — same line, same pentagons, drawn
     per step so it always starts and stops on a pentagon rather than guessing
     at the column's height. */
  .dispatch { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dispatch::before { display: none; }
  .dispatch > li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px;
                   justify-items: start; text-align: left; padding-bottom: 26px; }
  .dispatch > li:last-child { padding-bottom: 0; }
  .dispatch > li::before { content: ""; position: absolute; left: 21.5px; top: 45px; bottom: 0;
                           width: 3px; background: var(--c-olive); }
  .dispatch > li:last-child::before { display: none; }
  .dispatch__mark { grid-row: span 2; margin-bottom: 0; }
  .dispatch h3 { margin-top: 8px; font-size: 21px; line-height: 25px; }
  .dispatch p { margin-left: 0; }

  .metros { gap: 28px 22px; }
  .metros h3 { font-size: 17px; line-height: 21px; }
  .metros li { font-size: 16px; }

  .states { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* two short columns per region beats one 16-item ladder on a 390px screen */
  .states ul { columns: 2 108px; column-gap: 22px; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .split::before { display: none; }
  .split__col + .split__col { padding-top: 30px; border-top: 3px solid var(--c-olive-line); }
  .split h3 { font-size: 21px; line-height: 25px; }

  .ccard__phone a { font-size: 38px; line-height: 42px; }
  .cinfo { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
  .cinfo dt { padding: 14px 0 0; border-bottom: 0; }
  .cinfo dd { padding: 3px 0 15px; }

  .cost { grid-template-columns: minmax(0, 1fr); }
  .cost dt { padding: 15px 0 0; border-bottom: 0; }
  .cost dd { padding: 4px 0 15px; font-size: 24px; line-height: 28px; text-align: left; }

  .qa__item > summary { font-size: 19px; line-height: 25px; }
  .qa__a { padding-left: 28px; }
  .qa + .tp__h2 { margin-top: 42px; }

  .cta-end { margin-top: -34px; padding: 74px 0 62px;
             clip-path: polygon(0 34px, 50% 0, 100% 34px, 100% 100%, 0 100%); }
  .cta-end h2 { font-size: 27px; line-height: 31px; }
  .cta-end__row { gap: 16px; margin-top: 24px; }
  .cta-end__row .btn { width: 100%; }
  .cta-end__tel { justify-content: center; width: 100%; font-size: 22px; line-height: 26px; }
}

@media (max-width: 420px) {
  .ccard__phone a { font-size: 33px; line-height: 37px; }
  .states ul { columns: 2 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}