/* Indoor Experts — shared design system: "Warm Editorial Professional" (LOCKED)
   Warm canvas #FAF8F3 · royal navy #143883 · gold #E1A50C/#FCC952 used sparingly ·
   Montserrat display + Poppins body · flat hairline depth · sentence-case headings.
   Extracted from the reviewed homepage 2026-07-29. Every rebuild page links this file.
   NOTE: img{height:auto} is load-bearing (width/height attrs would kill aspect-ratio). */

:root{
  --navy:#143883; --navy-2:#0f2a5e; --navy-ink:#0b1f45;
  --gold:#E1A50C; --gold-2:#FCC952; --gold-soft:#FBF1D6;
  --canvas:#FAF8F3; --canvas-2:#F2EDE4; --surface:#ffffff;
  --ink:#182031; --muted:#5c6675; --line:#ebe6dc; --line-2:#ddd6c8;
  --disp:'Montserrat',system-ui,sans-serif; --body:'Poppins',system-ui,sans-serif;
  --wrap:1220px; --r:16px;
  --shadow:0 18px 40px rgba(20,56,131,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;line-height:1.62}
h1,h2,h3,h4,h5,h6{font-family:var(--disp);margin:0;line-height:1.12;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
/* height:auto so width/height attrs (kept for CLS) don't override our aspect-ratios */
img{max-width:100%;display:block;height:auto}
ul{margin:0;padding:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}
.eyebrow.on-dark{color:var(--gold-2)}.eyebrow.on-dark::before{background:var(--gold-2)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.005em;padding:14px 24px;border-radius:10px;cursor:pointer;border:1.5px solid transparent;transition:.18s ease}
.btn-gold{background:var(--gold);color:#1c1403;box-shadow:0 8px 22px rgba(225,165,12,.28)}
.btn-gold:hover{background:#c8930a;transform:translateY(-1px)}
.btn-line{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--navy);background:#fff}
.btn-ghost-l{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-l:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.tlink{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--navy);display:inline-flex;align-items:center;gap:7px}
.tlink svg{width:15px;height:15px;transition:transform .2s ease}
.tlink:hover svg{transform:translateX(3px)}

/* ---- section scaffolding ---- */
.sec{padding:clamp(52px,6.6vw,98px) 0;position:relative}
.sec-white{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-navy{background:linear-gradient(140deg,var(--navy-ink) 0%,var(--navy) 62%,var(--navy-2) 100%);color:#fff}
.sec-navy h2,.sec-navy h3,.sec-navy h4{color:#fff}
.head{max-width:820px}
.head h2{font-size:clamp(27px,3.1vw,41px);margin:16px 0 0}
.head .lede{font-size:clamp(15.5px,1.25vw,17.5px);color:var(--muted);margin:16px 0 0;max-width:58ch}
.sec-navy .head .lede{color:#c3cfe6}
.headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}

/* ---- reveals (JS-gated so no-JS still shows everything) ---- */
.js [data-rv]{opacity:0;transform:translateY(12px)}
.js [data-rv].rv-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.js [data-rv]{opacity:1;transform:none}}

/* ============ HEADER (modern, airy) ============ */
.topbar{background:var(--navy-ink);color:#c4cfe6}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;font-size:12.5px}
.topbar a{color:#c4cfe6}
.topbar a:hover{color:#fff}
.topbar .l{display:flex;gap:22px}
.topbar .l span{display:inline-flex;align-items:center;gap:7px}
.topbar .l svg{width:13px;height:13px;color:var(--gold-2)}
.topbar .r{display:flex;align-items:center;gap:18px}
.topbar .r .star{color:var(--gold-2)}
/* live open/closed status + utility buttons (promoted from _concepts/hdr-v4, bar only) */
.topbar .tb-status{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;min-width:0}
.topbar .tb-status b{font-weight:600;color:#fff}
.topbar .tb-status .dot{width:7px;height:7px;border-radius:50%;flex:none;background:#43C97A;
  animation:ie-pulse 2.6s ease-out infinite}
.topbar .tb-status[data-open="false"] .dot{background:var(--gold-2);animation:none}
@keyframes ie-pulse{
  0%{box-shadow:0 0 0 0 rgba(67,201,122,.55)}
  70%{box-shadow:0 0 0 7px rgba(67,201,122,0)}
  100%{box-shadow:0 0 0 0 rgba(67,201,122,0)}
}
@media(prefers-reduced-motion:reduce){.topbar .tb-status .dot{animation:none}}
.topbar .tb-btn{font-family:var(--disp);font-weight:600;font-size:12.2px;padding:5px 14px;border-radius:7px;
  border:1px solid rgba(255,255,255,.26);color:#fff;display:inline-flex;align-items:center;
  transition:.17s ease;white-space:nowrap}
.topbar .tb-btn:hover{color:#fff;border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.08)}
.topbar .tb-btn.sched{background:var(--gold);border-color:var(--gold);color:#1c1403}
.topbar .tb-btn.sched:hover{background:#c8930a;border-color:#c8930a;color:#1c1403}
@media(max-width:560px){
  /* the status line earns its space on a phone; the bar keeps it + Schedule and drops the rest */
  .topbar .l{display:none}
  .topbar .wrap{justify-content:center;gap:14px}
}
header{position:sticky;top:0;z-index:70;background:rgba(250,248,243,.86);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;height:78px;gap:22px}
.menu>li>a,.navr .ph,.btn,.brand .wm b{white-space:nowrap}
.brand{display:flex;align-items:center;gap:12px}
.brand .mk{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:linear-gradient(145deg,var(--navy),var(--navy-2));display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(20,56,131,.22)}
.brand .mk b{font-family:var(--disp);font-weight:700;color:#fff;font-size:16px;letter-spacing:-.02em;z-index:1}
.brand .mk::after{content:"";position:absolute;right:-8px;bottom:-9px;width:24px;height:24px;border-radius:50%;background:var(--gold-2)}
.brand .wm b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--navy);letter-spacing:.005em;line-height:1}
.brand .wm span{display:block;font-size:9.5px;letter-spacing:.22em;color:var(--muted);font-weight:500;margin-top:3px;white-space:nowrap}
.menu{display:flex;gap:24px;list-style:none;margin:0 auto 0 20px;padding:0}
.menu>li>a{font-family:var(--disp);font-weight:500;font-size:14.5px;color:var(--ink);display:inline-flex;align-items:center;gap:5px;position:relative;padding:6px 0}
.menu>li>a .cv{width:10px;height:10px;opacity:.5}
.menu>li>a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold);border-radius:2px;transition:width .22s ease}
.menu>li>a:hover{color:var(--navy)}.menu>li>a:hover::after{width:100%}
.navr{display:flex;align-items:center;gap:20px}
.navr .ph{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--navy);display:inline-flex;align-items:center;gap:8px}
.navr .ph svg{width:16px;height:16px;color:var(--gold)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;flex:0 0 auto}
.burger span{width:24px;height:2px;background:var(--navy);display:block;border-radius:2px}
/* compact icon-only call button, mobile only */
.callicon{display:none;width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:var(--gold);place-items:center;box-shadow:0 6px 16px rgba(225,165,12,.26)}
.callicon svg{width:18px;height:18px;color:#1c1403}
/* mobile drawer — slides in from the right as a fixed panel over a scrim, was a
   display:none/block reveal under the header. .drawer and .scrim sit at the body root now
   (moved out of <header> in the markup), which is what lets the scroll-lock/inert JS in
   script.html seal every other body child without sealing the drawer itself. */
html.drawer-open,body.drawer-open{overflow:hidden}
.scrim{position:fixed;inset:0;background:rgba(11,31,69,.45);z-index:89;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.scrim[data-open="true"]{opacity:1;visibility:visible;transition:opacity .28s ease}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(360px,86vw);
  background:var(--canvas);box-shadow:-20px 0 44px rgba(11,31,69,.22);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer[data-open="true"]{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.scrim,.drawer{transition:none}}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer .dbrand{display:flex;align-items:center}
.drawer .dbrand img{height:28px;width:auto;display:block}
.drawer .dclose{background:none;border:0;padding:8px;margin:-8px;cursor:pointer;color:var(--ink);border-radius:8px}
.drawer .dclose:hover{background:var(--canvas-2)}
.drawer .dclose svg{width:19px;height:19px;display:block}
.drawer .wrap{max-width:none;padding:6px 20px 26px;margin:0}
.dsec{border-bottom:1px solid var(--line)}
.dsec summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:14px 0;font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--ink)}
.dsec summary::-webkit-details-marker{display:none}
.dsec summary .cv{width:11px;height:11px;flex:0 0 auto;opacity:.6;transition:transform .2s ease}
.dsec[open] summary .cv{transform:rotate(180deg)}
.dsec .dlinks{display:flex;flex-direction:column;padding:0 0 14px 2px}
/* .dhub/.dsub are the CATEGORY level (Cooling, Trane Comfort Specialist, Comfort Club Plan) —
   bold navy, own tap target. .dsublist is the specific pages under it — indented behind a rule
   so scanning the drawer never confuses "the AC page" with "AC repair specifically". */
.dsec .dhub{display:flex;align-items:center;gap:8px;padding:9px 0;font-family:var(--disp);
  font-weight:700;font-size:15px;color:var(--navy)}
.dsec .dhub:hover{color:var(--gold)}
.dsec .dhub .dtag{font-size:9px;letter-spacing:.08em;background:#EEF1F8;color:#7d8aa6;
  border-radius:20px;padding:3px 8px;font-weight:700}
.dsec .dsub{font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--navy);
  margin:2px 0 2px;display:flex;align-items:center;gap:7px}
.dsec .dhub .pill,.dsec .dsub .pill{font-size:9px;letter-spacing:.08em;background:var(--canvas-2);
  color:var(--muted);border-radius:20px;padding:2px 7px;font-weight:700}
.dsec .dsublist{display:flex;flex-direction:column;margin:2px 0 4px;padding:2px 0 6px 14px;
  border-left:2px solid var(--line)}
.dsec .dsublist a{padding:6px 0;font-size:13.6px;color:#5c6675;border:0}
.dsec .dsublist a:hover{color:var(--navy)}
.dsec .dhub + .dsublist,.dsec .dsub + .dsublist{margin-top:0}
.dsec .dsublist + .dhub,.dsec .dsublist + .dsub{margin-top:14px}
.dsec .dlinks > .dhub:first-child,.dsec .dlinks > .dsub:first-child{margin-top:2px}
.dsec .dpromo{display:flex !important;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding:11px 13px !important;background:var(--gold-soft);border-radius:10px;
  font-weight:600;color:#8a6410}
.dsec .dpromo .pill2{background:var(--gold);color:#1c1403;font-family:var(--disp);font-weight:700;
  font-size:9px;letter-spacing:.06em;border-radius:20px;padding:4px 8px;white-space:nowrap}
.drawer .dcta{display:flex;gap:12px;padding:18px 0 4px;flex-wrap:wrap;flex:0 0 auto}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-160px;right:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(252,201,82,.16),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding:76px 28px 88px;position:relative}
/* `.h1t` is the tagline, an <h2> since 2026-08-24 (the H1 now carries the service name and the
   service-area line). `.hhead` is the wrapper that lays the three lines out; it needs the same
   font-size so the em-based gap between them resolves to the same pixels it always did. */
.hero h1,.hero .h1t,.hero .hhead{font-size:clamp(38px,5vw,62px);font-weight:700;letter-spacing:-.025em;margin:20px 0 0}
.hero .h1t,.hero .hhead{margin:0}
.hero h1 .u,.hero .h1t .u{position:relative;white-space:nowrap;color:var(--navy)}
.hero h1 .u::after,.hero .h1t .u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--gold-2);border-radius:3px;z-index:-1;opacity:.9}
/* ─── HERO HEADING PAIR ─── ported out of ie-v16.css 2026-08-24 so the HUB pages can use it.
   ie.css already carried the `.h1t` half and the `.hhead` font-size above; only the layout was
   missing, and the hubs load ie.css alone. ie-v16.css keeps its own copy and stays scoped to the
   one page it was written for.
   The three lines are laid out by .hhead, not by the h1, because the H2 tagline has to render
   BETWEEN the h1's two lines. display:contents promotes the h1's children into this grid so order
   can interleave them. The h1 stays a real h1 in the DOM and in the a11y tree, and crawlers read
   the DOM, so the heading text is unaffected. DOM order is the reading order: service + area
   (h1), then the tagline (h2).
   ⚠ `.eyebrow` already declares 12.5px, which is why it can sit inside a 62px h1 without a reset.
   If that declaration ever moves, this hero grows a 62px uppercase eyebrow. */
.hhead{display:grid;justify-items:start;gap:.26em}
.h3l{display:contents}
.hhead > .eyebrow,.h3l > .eyebrow{order:1}
.hhead > .h1t{order:2}
.hhead > .h1a,.h3l > .h1a{order:3}
.hhead .eyebrow{line-height:1.2;letter-spacing:.16em}
/* line-height and the padding below it are BOTH clearance for `.u::after`, the gold underline.
   At 1.03 with no padding the underline sat hard against the service-area line on mobile. */
.hhead .h1t{display:block;line-height:1.06;padding-bottom:.12em}
/* The service-area line has to out-rank the lede that follows it, or a line INSIDE the h1 reads as
   subordinate to the paragraph after it. Bigger, heavier and brighter than the lede. */
.hhead .h1a{display:block;font-family:var(--body);font-size:19px;font-weight:600;
  letter-spacing:-.004em;line-height:1.4;color:#dbe4f2}
.hhead + .sub{margin-top:24px}
@media(max-width:900px){.hhead .h1a{font-size:17.5px}}
@media(max-width:640px){.hhead{gap:.3em}.hhead .h1a{font-size:16.5px;line-height:1.36}}
.hero .sub{font-size:clamp(16px,1.5vw,18.5px);color:var(--muted);max-width:46ch;margin:22px 0 0}
.hero .usp{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;font-size:14.5px;font-weight:500}
.hero .usp li{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.hero .usp svg{width:16px;height:16px;color:var(--navy);flex:0 0 16px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero .tel{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--navy);padding:14px 6px}
.hero .tel small{display:block;font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero .tel .rg{width:40px;height:40px;border-radius:50%;background:var(--gold-soft);display:grid;place-items:center}
.hero .tel .rg svg{width:17px;height:17px;color:var(--gold)}
.hero .proof{display:flex;gap:26px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.hero .proof .p b{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--navy);display:block;line-height:1}
.hero .proof .p span{font-size:12.5px;color:var(--muted)}
.hero .proof .stars{color:var(--gold)}
.hmedia{position:relative}
.hmedia .frame{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/4.6;box-shadow:0 30px 60px rgba(20,56,131,.16);border:1px solid var(--line)}
.hmedia .frame img{width:100%;height:100%;object-fit:cover}
.hmedia .navyblob{position:absolute;inset:auto -22px -26px auto;width:66%;height:64%;background:linear-gradient(150deg,var(--navy),var(--navy-2));border-radius:24px;z-index:-1}
.hmedia .badge{position:absolute;left:-22px;top:34px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:11px;box-shadow:0 16px 30px rgba(20,56,131,.14)}
.hmedia .badge .t b{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy);display:block;line-height:1.15}
.hmedia .badge .t span{font-size:11.5px;color:var(--muted)}
.hmedia .badge .em{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--navy);display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:700;font-size:13px}
.hmedia .rev{position:absolute;right:-16px;bottom:38px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;box-shadow:0 16px 30px rgba(20,56,131,.14)}
.hmedia .rev .s{color:var(--gold);font-size:13px;letter-spacing:1px}
.hmedia .rev b{font-family:var(--disp);font-weight:700;color:var(--navy);font-size:15px}
.hmedia .rev span{display:block;font-size:11.5px;color:var(--muted)}

/* trust strip */
.tstrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tstrip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding:22px 28px}
.tstrip .ti{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;color:var(--ink)}
.tstrip .ti svg{width:20px;height:20px;color:var(--gold);flex:0 0 20px}
.tstrip .ti b{font-family:var(--disp);color:var(--navy)}

/* ============ INTRO + QUOTE FORM ============ */
.intro .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,4.4vw,72px);align-items:start}
.intro .body p{font-size:16.5px;color:#3d4757;max-width:56ch}
.intro .body p:first-of-type{font-size:18.5px;color:var(--ink);line-height:1.55}
.intro .sig{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.intro .sig img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:62% 20%;border:1px solid var(--line)}
.intro .sig b{font-family:var(--disp);font-size:15px;color:var(--navy);display:block;line-height:1.2}
.intro .sig span{font-size:13px;color:var(--muted)}
.qform{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.qform h3{font-size:21px}
.qform .qs{font-size:13.5px;color:var(--muted);margin:8px 0 20px}
.qform label{display:block;font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.qform .f{margin-bottom:15px}
.qform input,.qform select,.qform textarea{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:#fdfcfa;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;outline:none;transition:.18s}
.qform textarea{resize:vertical;min-height:74px}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(20,56,131,.09)}
.qform .btn{width:100%;justify-content:center;margin-top:4px}
.qform .fine{font-size:12px;color:var(--muted);margin:14px 0 0;text-align:center}
/* ---- FieldEdge online booking -------------------------------------------------------------
   The booking calendar stands exactly where the hand-built request form used to, and the wrapper
   still carries `.qform`, so it inherits the card here AND every contextual override that strips
   that card back to bare (.gtcard .qform, .gtouch .qform, .saband .qform, .hero-photo .qform).
   Only the frame itself is new. Injected by _shared/inject-fieldedge.cjs, mounted by chrome/script.

   ⚠ THE HEIGHT IS EXPLICIT AND HAS TO STAY THAT WAY. An iframe has no intrinsic height: without
     one it collapses to the 150px default and then jumps when FieldEdge paints, which is a CLS
     fault on 75 pages at once. Desktop and tablet are FieldEdge's own figures from the supplied
     embed. Mobile is NOT theirs — their snippet is written for a full-screen modal (100vh, square
     corners) and this is an inline card inside padded sections, where 100vh would drive the page's
     own heading and fine print a whole screen apart. */
.fe-book .fe-frame{position:relative;width:100%;height:720px;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* ⚠ NOT scoped to .fe-book. An iframe with no width/height falls back to the browser default
   of 300x150, and when this rule was .fe-book-scoped the POPUP calendar rendered 300px wide inside
   a 560px dialog on a 1440px desktop. Any frame, anywhere, fills its slot. */
.fe-frame iframe{width:100%;height:100%;border:0;display:block}
/* Bare .qform pads its own card; inside .gtcard and friends that padding is stripped, so the frame
   needs a little air above it either way. The heading and lede sit directly on top of it. */
.fe-book .fe-frame{margin-top:18px}
.fe-book .fine{font-size:12px;color:var(--muted);margin:14px 0 0;text-align:center}
/* JS-off fallback. `.js [data-rv]{opacity:0}` means this build shows everything when scripting is
   unavailable, so an unmounted frame would be a blank 720px slab. The mount script removes this
   the moment it inserts the iframe. */
.fe-book .fe-fallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;margin:0;padding:28px;text-align:center;
  font-size:14.5px;color:var(--muted);background:var(--canvas)}
.fe-book .fe-fallback a{font-family:var(--disp);font-weight:700;color:var(--navy)}
@media(max-width:1024px){ .fe-book .fe-frame{height:680px} }
@media(max-width:760px){  .fe-book .fe-frame{height:clamp(560px,calc(100vh - 140px),700px)} }
/* ---- Booking popup ------------------------------------------------------------------------
   Every Book / Get a Quote button opens the FieldEdge calendar here instead of navigating
   (owner, 2026-08-21). Markup is in chrome/footer.html, behaviour in chrome/script.html.
   ⚠ The frame rules below UNDO the inline-card ones above: inside the popup the card chrome IS
     the popup, so the frame gets no second border, no radius and no top margin, and its height
     comes from the dialog rather than the 720/680 ladder. */
.fe-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.fe-modal[hidden]{display:none}
.fe-modal-back{position:absolute;inset:0;background:rgba(11,31,69,.62)}
/* ⚠ THE HEIGHT MUST BE DEFINITE, max-height alone is not enough. With only a max-height the card
   sizes to its content, the body flexes to nothing, and the iframe's height:100% resolves against
   an auto-height parent — the dialog rendered ~220px tall with the calendar's step rail sitting on
   top of its own Next button. min() keeps it off the bottom of a short window. */
.fe-modal-card{position:relative;display:flex;flex-direction:column;width:min(560px,100%);
  height:min(760px,92vh);max-height:92vh;
  background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px rgba(6,18,44,.42)}
.fe-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:none}
.fe-modal-title{margin:0;font-family:var(--disp);font-weight:700;font-size:18.5px;color:var(--ink);letter-spacing:-.015em}
.fe-modal-x{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  padding:0;border:1px solid var(--line);border-radius:50%;background:var(--canvas);color:var(--ink);
  cursor:pointer;transition:.16s}
.fe-modal-x svg{width:17px;height:17px}
.fe-modal-x:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.fe-modal-x:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fe-modal-body{flex:1;min-height:0;display:flex}
.fe-modal .fe-frame{flex:1;height:auto;min-height:0;margin:0;border:0;border-radius:0;background:#fff}
/* The dialog is the card on a phone: full screen, square, and the frame takes what the header leaves. */
@media(max-width:640px){
  .fe-modal{padding:0}
  .fe-modal-card{width:100%;max-height:100%;height:100%;border-radius:0}
}
/* A popup that animates in feels like a product; one that animates for someone who asked it not to
   is a bug. Both states are declared rather than leaving the reduced-motion case to chance. */
@media(prefers-reduced-motion:no-preference){
  .fe-modal .fe-modal-card{animation:fe-pop .22s cubic-bezier(.2,.7,.3,1) both}
  .fe-modal .fe-modal-back{animation:fe-fade .22s ease both}
  @keyframes fe-pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes fe-fade{from{opacity:0}to{opacity:1}}
}



/* ============ SERVICES ============ */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease}
.svc:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.svc .ph{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--canvas-2)}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.svc:hover .ph img{transform:scale(1.04)}
.svc .ph .n{position:absolute;left:0;bottom:0;background:var(--surface);font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--gold);padding:8px 14px;border-top-right-radius:10px}
.svc .bd{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1}
.svc h3{font-size:20px}
.svc p{font-size:14.6px;color:var(--muted);margin:11px 0 18px}
.svc ul{list-style:none;margin-top:auto;border-top:1px solid var(--line)}
.svc ul li a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.4px;font-weight:500;color:var(--ink);transition:.16s}
.svc ul li:last-child a{border-bottom:0;padding-bottom:0}
.svc ul li a svg{width:14px;height:14px;color:var(--gold);flex:0 0 14px;transition:transform .2s ease}
.svc ul li a:hover{color:var(--navy)}
.svc ul li a:hover svg{transform:translateX(3px)}
.svcfoot{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:30px;border-top:1px solid var(--line);text-align:center}
.svcfoot b{font-family:var(--disp);font-size:16.5px;color:var(--ink)}

/* ============ STORY ============ */
.story .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,4.6vw,74px);align-items:center}
.story .pic{position:relative}
.story .pic img{border-radius:20px;aspect-ratio:4/4.6;object-fit:cover;object-position:35% 40%;width:100%;border:1px solid var(--line)}
.story .pic .yr{position:absolute;right:-14px;bottom:-14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);text-align:center}
.story .pic .yr b{display:block;font-family:var(--disp);font-weight:700;font-size:26px;color:var(--navy);line-height:1}
.story .pic .yr span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.story p{font-size:16.4px;color:#3d4757;max-width:58ch}
.pull{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.7vw,22px);line-height:1.42;color:var(--navy);letter-spacing:-.01em}

/* ============ PROMISE ============ */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid var(--line)}
.pitem{padding:30px 30px 30px 0;border-bottom:1px solid var(--line);position:relative}
.pitem:not(:nth-child(3n)){border-right:1px solid var(--line);padding-right:30px}
.pitem:not(:nth-child(3n)) + .pitem{padding-left:30px}
.pitem .num{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.12em;color:var(--gold);display:block;margin-bottom:12px}
.pitem h3{font-size:17.6px;line-height:1.3}
.pitem p{font-size:14.5px;color:var(--muted);margin:10px 0 0}
.pcta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px;justify-content:center}

/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;position:relative}
.steps::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:1px;background:var(--line-2);z-index:0}
.step{position:relative;z-index:1}
.step .dot{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy);margin-bottom:20px}
.step:first-child .dot{background:var(--gold);border-color:var(--gold);color:#1c1403}
.step h3{font-size:18px}
.step p{font-size:14.6px;color:var(--muted);margin:10px 0 0;max-width:38ch}
.offers{margin-top:52px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.offers .o b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;color:var(--navy);line-height:1.1}
.offers .o span{font-size:13.4px;color:var(--muted);display:block;margin-top:5px}
.offers .o + .o{border-left:1px solid var(--line);padding-left:24px}
.offers-note{font-size:13px;color:var(--muted);margin:16px 0 0}

/* ============ SERVICE AREA ============ */
/* row 1 = copy | van photo, row 2 = the 3x3 neighborhood table full width */
.area .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,3.6vw,56px) clamp(36px,4.6vw,70px);align-items:center}
.area .hoodwrap{grid-column:1/-1;margin-top:6px}
.hoods{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;margin:0;border-top:1px solid var(--line)}
.hoods li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.6px;font-weight:500;display:flex;align-items:center;gap:9px}
.hoods li svg{width:13px;height:13px;color:var(--gold);flex:0 0 13px}
.area .pic{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
/* native 16:9 — a tighter crop cuts the van decals */
.area .pic img{width:100%}

/* ============ MAINTENANCE ============ */
.club .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,4.4vw,64px);align-items:center}
.club p{color:#c9d4e8;font-size:16.2px;max-width:52ch}
.club .inc{list-style:none;margin:26px 0 0;display:grid;gap:12px}
.club .inc li{display:flex;align-items:flex-start;gap:11px;font-size:15.2px;color:#eef2f9}
.club .inc svg{width:18px;height:18px;color:var(--gold-2);flex:0 0 18px;margin-top:3px}
.pcard{background:var(--surface);border-radius:20px;padding:30px;color:var(--ink);box-shadow:0 26px 50px rgba(0,0,0,.28)}
.pcard .tag{font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pcard .big{display:flex;align-items:flex-end;gap:8px;margin:12px 0 4px}
.pcard .big b{font-family:var(--disp);font-weight:700;font-size:52px;line-height:.9;letter-spacing:-.03em;color:var(--navy)}
.pcard .big span{font-size:14.5px;color:var(--muted);padding-bottom:6px}
.pcard .sub{font-size:14px;color:var(--muted);margin:0 0 20px}
.pcard .rows{border-top:1px dashed var(--line-2);padding-top:16px;margin-bottom:22px}
.pcard .rows div{display:flex;justify-content:space-between;gap:14px;font-size:14.2px;padding:7px 0;color:#3d4757}
.pcard .rows div b{font-family:var(--disp);color:var(--navy);font-weight:600}
.pcard .btn{width:100%;justify-content:center}
.pcard .alt{display:block;text-align:center;margin-top:14px}

/* ============ REVIEWS ============ */
.rev2 .wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(34px,4.4vw,64px);align-items:start}
.scoreb{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;text-align:center;box-shadow:var(--shadow)}
.scoreb .n{font-family:var(--disp);font-weight:700;font-size:60px;line-height:1;color:var(--navy);letter-spacing:-.03em}
.scoreb .st{color:var(--gold);font-size:19px;letter-spacing:3px;margin:8px 0 6px}
.scoreb .sm{font-size:13.6px;color:var(--muted)}
.scoreb .gl{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:13.4px;color:var(--muted)}
.rcards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rslot{border:1px dashed var(--line-2);border-radius:16px;padding:22px;background:rgba(255,255,255,.6)}
.rslot .st{color:var(--gold);letter-spacing:2px;font-size:13px}
.rslot .ns{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.05em;color:#a3785f;background:#fdf5ee;border:1px solid #f0e2d4;border-radius:6px;padding:3px 8px;display:inline-block;margin:12px 0 10px}
.rslot p{font-size:14.2px;color:var(--muted);margin:0}
.rslot .who{font-size:13px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* ============ FAQ ============ */
.faq .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,4.6vw,70px);align-items:start}
.faqlist{border-top:1px solid var(--line)}
.faqlist details{border-bottom:1px solid var(--line)}
.faqlist summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink);transition:color .16s}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary:hover{color:var(--navy)}
.faqlist summary .ic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;position:relative;transition:.2s}
.faqlist summary .ic::before,.faqlist summary .ic::after{content:"";position:absolute;background:var(--navy);border-radius:2px;transition:.2s}
.faqlist summary .ic::before{width:11px;height:1.6px}
.faqlist summary .ic::after{width:1.6px;height:11px}
.faqlist details[open] summary{color:var(--navy)}
.faqlist details[open] summary .ic{background:var(--gold);border-color:var(--gold)}
.faqlist details[open] summary .ic::after{opacity:0}
.faqlist .ans{padding:0 46px 22px 0;font-size:15.2px;color:var(--muted);max-width:62ch}
.faq .aside p{font-size:15.4px;color:var(--muted);max-width:34ch}

/* ============ BLOG ============ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:1px solid var(--line)}
.post{padding:28px 30px 28px 0;border-bottom:1px solid var(--line)}
.post:not(:nth-child(3n)){border-right:1px solid var(--line)}
.post:not(:nth-child(3n)) + .post{padding-left:30px}
.post .d{font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.post h3{font-size:18px;margin:12px 0 14px;line-height:1.32}
.post a:hover h3{color:var(--navy)}

/* ============ CLOSING CTA ============ */
.close{position:relative;overflow:hidden;background:var(--navy-ink)}
.close img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.close .scrim{position:absolute;inset:0;background:linear-gradient(96deg,rgba(11,31,69,.96) 0%,rgba(11,31,69,.9) 40%,rgba(11,31,69,.34) 100%)}
.close .wrap{position:relative;padding:clamp(62px,7vw,104px) 28px}
.close h2{font-size:clamp(29px,3.4vw,45px);color:#fff;max-width:22ch;margin:16px 0 0}
.close p{color:#c9d4e8;font-size:16.4px;max-width:46ch;margin:16px 0 0}
.close .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center}
.close .tel{font-family:var(--disp);font-weight:700;font-size:17px;color:#fff;display:inline-flex;align-items:center;gap:10px;padding:14px 4px}
.close .tel svg{width:18px;height:18px;color:var(--gold-2)}
.close .pr{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:13.8px;color:#b9c6de;display:flex;align-items:center;gap:10px}
.close .pr .st{color:var(--gold-2);letter-spacing:2px}

/* ============ FOOTER ============ */
footer{background:var(--navy-ink);color:#b9c4dc;font-size:14.2px}
footer a{color:#b9c4dc;transition:color .16s}
footer a:hover{color:#fff}
.fmain{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:38px;padding:clamp(48px,5vw,74px) 0 42px}
.fbrand .brand .wm b{color:#fff}
.fbrand .brand .wm span{color:#8a99b8}
.fbrand p{margin:20px 0 0;max-width:42ch;color:#a7b3cd;font-size:14px}
.fbrand .tagline{font-style:italic;color:var(--gold-2);font-family:var(--disp);font-weight:500;font-size:14.5px;margin-top:14px}
.fcol h6{font-family:var(--disp);font-weight:700;font-size:11.8px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:16px}
.fcol ul{list-style:none;display:grid;gap:10px;font-size:13.9px}
.fnap{border-top:1px solid rgba(255,255,255,.1);padding:30px 0;display:grid;grid-template-columns:repeat(5,auto);gap:26px;justify-content:space-between}
.fnap .ni b{display:block;font-family:var(--disp);font-weight:600;font-size:10.8px;letter-spacing:.14em;text-transform:uppercase;color:#7f8fb0;margin-bottom:6px}
.fnap .ni span,.fnap .ni a{color:#e6ebf5;font-size:14.2px}
.fbadges{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.4px;color:#a7b3cd;align-items:center}
.fbadges span{display:inline-flex;align-items:center;gap:8px}
.fbadges svg{width:15px;height:15px;color:var(--gold-2)}
.flegal{border-top:1px solid rgba(255,255,255,.1);padding:20px 0 28px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#8a99b8}
.flegal .ls{display:flex;gap:20px;flex-wrap:wrap}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .fmain{grid-template-columns:1.4fr 1fr 1fr;gap:34px}
  .fnap{grid-template-columns:repeat(3,auto);gap:22px 30px}
  .offers{grid-template-columns:repeat(2,1fr)}
  .offers .o:nth-child(3){border-left:0;padding-left:0}
  .offers .o:nth-child(3),.offers .o:nth-child(4){border-top:1px solid var(--line);padding-top:20px}
}
@media(max-width:960px){
  .menu,.topbar .l span:nth-child(2),.navr .ph small{display:none}
  .burger{display:flex}
  .menu{margin:0}
  .navr .btn-gold{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:38px;padding:48px 28px 60px}
  .hmedia{max-width:460px}
  .tstrip .wrap{gap:14px}
  .intro .wrap,.story .wrap,.area .wrap,.club .wrap,.rev2 .wrap,.faq .wrap{grid-template-columns:1fr}
  .story .pic{max-width:440px}
  .story .wrap{gap:44px}
  .svcgrid{grid-template-columns:1fr;gap:22px}
  .pgrid,.posts{grid-template-columns:1fr}
  .pitem,.post{padding:26px 0 !important;border-right:0 !important}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps::before{display:none}
  .step{padding-left:0}
  .hoods{grid-template-columns:repeat(2,1fr)}
  .rcards{grid-template-columns:1fr}
  .faqlist{margin-top:26px}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .topbar .wrap{font-size:11.5px}
  .topbar .tb-btn.fin{display:none}
  .topbar .tb-btn{padding:4px 11px;font-size:11.4px}
  /* keep the burger on screen: phone text out, gold icon-call in */
  .nav{height:66px;gap:14px}
  .navr{gap:12px;margin-left:auto}
  .navr .ph{display:none}
  .callicon{display:grid}
  .brand .mk{width:38px;height:38px;flex:0 0 38px;border-radius:10px}
  .brand .wm b{font-size:15.5px}
  .brand .wm span{font-size:8.4px;letter-spacing:.16em}
  .eyebrow{font-size:11px;letter-spacing:.085em}
  .eyebrow::before{width:18px}
  .hero .wrap{padding:34px 20px 50px}
  .hero .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .hero .proof .p b{font-size:18px}
  .hero .proof .p span{font-size:11.6px;line-height:1.34;display:block;margin-top:4px}
  .hmedia .badge{left:-8px;padding:10px 13px}
  .hmedia .rev{right:-6px}
  .tstrip .wrap{flex-direction:column;gap:12px;padding:20px}
  .offers{grid-template-columns:1fr;padding:24px}
  .offers .o + .o{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}
  .hoods{grid-template-columns:1fr}
  .fmain,.fnap{grid-template-columns:1fr;gap:30px}
  .qform{padding:24px}
  .pcard{padding:24px}
  .close .scrim{background:linear-gradient(180deg,rgba(11,31,69,.9) 0%,rgba(11,31,69,.95) 60%)}
}

/* ==========================================================================
   v2 PASS (2026-07-29) — owner feedback:
   dark hero + deliberate dark/light/dark section rhythm (as the old site had),
   stronger header (mega menu + scroll state), better-chosen elements for
   service area (interactive map), membership (two plan cards), reviews
   (quote cards), blog (image cards), and the quote form moved into "how it works".
   Loaded after the base layer, so these win.
   ========================================================================== */

/* ---------- DARK SECTION SYSTEM ---------- */
.sec-dark,.sec-navy{
  background:linear-gradient(152deg,#0a1c3f 0%,#143883 56%,#0f2a5e 100%);
  color:#c9d5ea;position:relative;overflow:hidden;border-top:0;border-bottom:0;
}
.sec-dark::before,.sec-navy::before{
  content:"";position:absolute;top:-180px;right:-140px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(252,201,82,.10),transparent 68%);pointer-events:none;
}
.sec-dark .wrap,.sec-navy .wrap{position:relative}
.sec-dark h2,.sec-dark h3,.sec-dark h4,.sec-dark h5,
.sec-navy h2,.sec-navy h3,.sec-navy h4,.sec-navy h5{color:#fff}
.sec-dark p,.sec-navy p{color:#bcc9e2}
.sec-dark .head .lede,.sec-navy .head .lede{color:#bcc9e2}
.sec-dark .eyebrow,.sec-navy .eyebrow{color:var(--gold-2)}
.sec-dark .eyebrow::before,.sec-navy .eyebrow::before{background:var(--gold-2)}
.sec-dark .tlink,.sec-navy .tlink{color:var(--gold-2)}
.sec-dark .pull{border-left-color:var(--gold-2);color:#fff}
.sec-dark .offers{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.15)}
.sec-dark .offers .o b{color:var(--gold-2)}
.sec-dark .offers .o span{color:#b3c1dc}
.sec-dark .offers .o + .o{border-left-color:rgba(255,255,255,.15)}
.sec-dark .offers-note{color:#93a3c4}
.sec-dark .btn-line{color:#fff;border-color:rgba(255,255,255,.36)}
.sec-dark .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.sec-dark .pgrid{border-top-color:rgba(255,255,255,.15)}
.sec-dark .pitem{border-bottom-color:rgba(255,255,255,.15)}
.sec-dark .pitem:not(:nth-child(3n)){border-right-color:rgba(255,255,255,.15)}
.sec-dark .pitem p{color:#b3c1dc}
.sec-dark .pitem .num{color:var(--gold-2)}

/* ---------- HERO v2: dark ---------- */
.hero{background:linear-gradient(158deg,#0a1c3f 0%,#143883 55%,#0f2a5e 100%);color:#c9d5ea}
.hero::before{background:radial-gradient(circle,rgba(252,201,82,.15),transparent 68%)}
.hero::after{
  content:"";position:absolute;left:-120px;bottom:-200px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 66%);pointer-events:none;
}
.hero h1,.hero .h1t{color:#fff}
.hero h1 .u,.hero .h1t .u{color:#fff}
.hero h1 .u::after,.hero .h1t .u::after{background:var(--gold-2);opacity:.92;z-index:-1}
.hero .sub{color:#b9c7e0}
.hero .usp li{color:#e3eaf7}
.hero .usp svg{color:var(--gold-2)}
.hero .tel{color:#fff}
.hero .tel small{color:#9dafd1}
.hero .tel .rg{background:rgba(252,201,82,.15);border:1px solid rgba(252,201,82,.3)}
.hero .tel .rg svg{color:var(--gold-2)}
.hero .proof{border-top-color:rgba(255,255,255,.15)}
.hero .proof .p b{color:#fff}
.hero .proof .p span{color:#9dafd1}
.hero .proof .stars{color:var(--gold-2)}
.hero .eyebrow{color:var(--gold-2)}
.hero .eyebrow::before{background:var(--gold-2)}
.hmedia .frame{border-color:rgba(255,255,255,.16);box-shadow:0 34px 70px rgba(0,0,0,.34)}
.hmedia .navyblob{background:transparent;border:2px solid rgba(252,201,82,.55);border-radius:24px;z-index:0;
  inset:auto -20px -22px auto;width:64%;height:60%}

/* ---------- HOW IT WORKS + FORM ON THE LEFT ---------- */
.procgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,4vw,64px);align-items:start}
.procside .head{max-width:none}
.vsteps{margin-top:34px;display:grid;gap:0}
.vstep{display:grid;grid-template-columns:46px 1fr;gap:20px;padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.15);align-items:start}
.vstep:first-child{border-top:1px solid rgba(255,255,255,.15)}
.vstep .dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.vstep:first-child .dot{background:var(--gold);border-color:var(--gold);color:#1c1403}
.vstep h3{font-size:18px}
.vstep p{font-size:14.8px;color:#b3c1dc;margin:8px 0 0;max-width:52ch}

/* ---------- SERVICE AREA v2: interactive map ---------- */
.areagrid{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(34px,4.4vw,66px);align-items:center}
.iemap{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:18px;box-shadow:var(--shadow)}
.iemap svg{width:100%;height:auto;display:block;overflow:visible}
.iemap .road{fill:none;stroke:var(--line-2);stroke-width:2.4}
.iemap .ring{fill:rgba(20,56,131,.035);stroke:var(--line-2);stroke-width:2;stroke-dasharray:7 6}
.iemap .rlabel{font-family:var(--disp);font-size:11px;font-weight:600;fill:#b6ab97;letter-spacing:.04em}
.iemap .pin circle{fill:var(--navy);stroke:#fff;stroke-width:2.5;transition:fill .22s ease,r .22s ease}
.iemap .pin text{font-family:var(--body);font-size:11.4px;font-weight:500;fill:var(--muted);transition:.2s}
.iemap .pin.on circle{fill:var(--gold);stroke-width:3}
.iemap .pin.on text{fill:var(--ink);font-weight:600}
.iemap .hq circle{fill:none;stroke:var(--gold);stroke-width:2.5}
.iemap .hq .core{fill:var(--gold);stroke:none}
.iemap .hq text{font-family:var(--disp);font-size:11px;font-weight:700;fill:var(--navy);letter-spacing:.03em}
.iemap .cap{margin:14px 4px 2px;font-size:12.4px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.iemap .cap b{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:600;color:var(--navy)}
.iemap .cap i{width:9px;height:9px;border-radius:50%;background:var(--gold);display:inline-block}
.hoodlist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px;margin:26px 0 0;
  border-top:1px solid var(--line)}
.hoodlist li{border-bottom:1px solid var(--line)}
.hoodlist button{width:100%;background:none;border:0;padding:11px 2px;font:inherit;font-size:14.6px;font-weight:500;
  color:var(--ink);display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;transition:.16s}
.hoodlist svg{width:13px;height:13px;color:var(--line-2);flex:0 0 13px;transition:.18s}
.hoodlist button:hover,.hoodlist button.on{color:var(--navy)}
.hoodlist button:hover svg,.hoodlist button.on svg{color:var(--gold);transform:scale(1.18)}

/* ---------- MEMBERSHIP v2: two plan cards ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;color:var(--ink);position:relative}
.plan.best{border-color:var(--gold);box-shadow:0 24px 46px rgba(0,0,0,.26)}
.plan .flag{position:absolute;top:-11px;right:20px;background:var(--gold);color:#1c1403;font-family:var(--disp);
  font-weight:700;font-size:10.6px;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:6px}
.plan .pname{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--navy)}
.plan .amt{display:flex;align-items:flex-end;gap:7px;margin:12px 0 3px}
.plan .amt b{font-family:var(--disp);font-weight:700;font-size:44px;line-height:.9;letter-spacing:-.03em;color:var(--navy)}
.plan .amt span{font-size:13.6px;color:var(--muted);padding-bottom:5px}
.plan .note{font-size:13.4px;color:var(--muted);margin:0 0 16px}
.plan .addl{border-top:1px dashed var(--line-2);padding-top:13px;font-size:13.8px;color:#3d4757;display:flex;
  justify-content:space-between;gap:12px}
.plan .addl b{font-family:var(--disp);font-weight:600;color:var(--navy)}
.plan .btn{width:100%;justify-content:center;margin-top:18px}
.incgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:38px;border-top:1px solid rgba(255,255,255,.15)}
.incgrid .ic2{padding:22px 22px 22px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.incgrid .ic2:not(:nth-child(4n)){border-right:1px solid rgba(255,255,255,.15)}
.incgrid .ic2:not(:nth-child(4n)) + .ic2{padding-left:22px}
.incgrid svg{width:20px;height:20px;color:var(--gold-2);margin-bottom:11px}
.incgrid b{display:block;font-family:var(--disp);font-weight:600;font-size:15px;color:#fff;line-height:1.28}
.visitline{display:flex;align-items:center;gap:0;margin-top:34px;padding:20px 24px;border-radius:14px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15);flex-wrap:wrap}
.visitline .v{display:flex;align-items:center;gap:12px;padding-right:26px}
.visitline .v + .v{padding-left:26px;border-left:1px solid rgba(255,255,255,.15)}
.visitline .v svg{width:19px;height:19px;color:var(--gold-2);flex:0 0 19px}
.visitline .v b{font-family:var(--disp);font-weight:600;font-size:14.6px;color:#fff;display:block}
.visitline .v span{font-size:13px;color:#a9b8d5}

/* ---------- REVIEWS v2: score panel + quote cards ---------- */
.revtop{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,3.8vw,58px);align-items:center}
.scorepanel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow)}
.scorepanel .top{display:flex;align-items:center;gap:20px}
.scorepanel .big{font-family:var(--disp);font-weight:700;font-size:62px;line-height:.86;letter-spacing:-.035em;color:var(--navy)}
.scorepanel .st{color:var(--gold);font-size:18px;letter-spacing:3px;line-height:1}
.scorepanel .sm{font-size:13.4px;color:var(--muted);margin-top:7px}
.scorepanel .rows2{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:11px}
.scorepanel .rows2 div{display:flex;align-items:center;gap:10px;font-size:13.8px;color:#3d4757}
.scorepanel .rows2 svg{width:16px;height:16px;color:var(--gold);flex:0 0 16px}
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative;
  display:flex;flex-direction:column}
.qcard.slot{border-style:dashed;border-color:var(--line-2);background:rgba(255,255,255,.55)}
.qcard .qm{font-family:var(--disp);font-weight:700;font-size:44px;line-height:.7;color:var(--gold-2);margin-bottom:6px}
.qcard .st{color:var(--gold);font-size:13px;letter-spacing:2px}
.qcard p{font-size:14.4px;color:var(--muted);margin:12px 0 0}
.qcard .ns{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.05em;color:#a3785f;
  background:#fdf5ee;border:1px solid #f0e2d4;border-radius:6px;padding:3px 8px;display:inline-block;
  margin-top:12px;align-self:flex-start}
.qcard .who{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:11px}
.qcard .who .av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--canvas-2);
  display:grid;place-items:center;color:var(--muted)}
.qcard .who .av svg{width:18px;height:18px}
.qcard .who b{display:block;font-family:var(--disp);font-weight:600;font-size:13.6px;color:var(--ink);line-height:1.2}
.qcard .who span{font-size:12.4px;color:var(--muted)}

/* ---------- BLOG v2: image cards ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:42px}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease}
.bcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.bcard .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--canvas-2)}
.bcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.bcard:hover .ph img{transform:scale(1.045)}
.bcard .chip{position:absolute;left:14px;bottom:14px;background:rgba(250,248,243,.94);backdrop-filter:blur(4px);
  font-family:var(--disp);font-weight:700;font-size:10.6px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);padding:6px 11px;border-radius:7px}
.bcard .bd{padding:22px;display:flex;flex-direction:column;flex:1}
.bcard .meta{font-size:12.4px;color:var(--muted);letter-spacing:.02em}
.bcard h3{font-size:17.4px;line-height:1.33;margin:9px 0 16px}
.bcard:hover h3{color:var(--navy)}
.bcard .tlink{margin-top:auto}

/* ---------- v2 RESPONSIVE ---------- */
@media(max-width:1080px){
  .incgrid{grid-template-columns:repeat(2,1fr)}
  .incgrid .ic2:nth-child(2n){border-right:0;padding-left:22px}
  .incgrid .ic2:nth-child(2n+1){border-right:1px solid rgba(255,255,255,.15);padding-left:0}
  .qcards{grid-template-columns:1fr 1fr}
  .bgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
  .procgrid,.areagrid,.revtop{grid-template-columns:1fr}
  .procgrid .qform{order:2}
  .procgrid .procside{order:1}
  .plans{grid-template-columns:1fr}
  .iemap{max-width:520px}
  .hero .hmedia .navyblob{display:none}
}
@media(max-width:640px){
  .nav{height:66px}
  .qcards,.bgrid{grid-template-columns:1fr}
  .incgrid{grid-template-columns:1fr}
  .incgrid .ic2{padding:18px 0 !important;border-right:0 !important}
  .hoodlist{grid-template-columns:1fr}
  .visitline .v{padding:0 0 14px}
  .visitline .v + .v{padding:14px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.15)}
  .scorepanel{padding:24px}
  .scorepanel .big{font-size:52px}
}

/* ---------- v2b: FAQ on dark + intro art panel ---------- */
.sec-dark .faqlist{border-top-color:rgba(255,255,255,.16)}
.sec-dark .faqlist details{border-bottom-color:rgba(255,255,255,.16)}
.sec-dark .faqlist summary{color:#fff}
.sec-dark .faqlist summary:hover{color:var(--gold-2)}
.sec-dark .faqlist summary .ic{border-color:rgba(255,255,255,.3)}
.sec-dark .faqlist summary .ic::before,.sec-dark .faqlist summary .ic::after{background:#fff}
.sec-dark .faqlist details[open] summary{color:var(--gold-2)}
.sec-dark .faqlist details[open] summary .ic{background:var(--gold);border-color:var(--gold)}
.sec-dark .faqlist details[open] summary .ic::before{background:#1c1403}
.sec-dark .faqlist .ans{color:#b3c1dc}
.sec-dark .faq .aside p{color:#bcc9e2}

.introart{position:relative}
.introart .shot{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.introart .shot img{width:100%;aspect-ratio:4/3.4;object-fit:cover;object-position:50% 42%}
.introart .tagcard{position:absolute;left:-18px;bottom:-18px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:15px 18px;box-shadow:0 18px 34px rgba(20,56,131,.14);display:flex;align-items:center;gap:12px}
.introart .tagcard svg{width:22px;height:22px;color:var(--gold);flex:0 0 22px}
.introart .tagcard b{display:block;font-family:var(--disp);font-weight:700;font-size:14.4px;color:var(--navy);line-height:1.2}
.introart .tagcard span{font-size:12.4px;color:var(--muted)}
@media(max-width:960px){.introart{max-width:520px}.introart .tagcard{left:0}}

/* ---------- v2c: LIGHT CARDS INSIDE DARK SECTIONS ----------
   The .sec-dark colour rules cascade into white cards that live inside a dark
   section (the quote form, plan cards, score panel, quote cards), which turned
   the form heading white-on-white and the Annual plan button invisible.
   This reverts those cards to the light theme. Keep this after the dark block. */
.sec-dark .qform,.sec-dark .plan,.sec-dark .scorepanel,.sec-dark .qcard,.sec-dark .pcard{color:var(--ink)}
.sec-dark .qform h2,.sec-dark .qform h3,.sec-dark .qform h4,
.sec-dark .plan h2,.sec-dark .plan h3,.sec-dark .plan h4,
.sec-dark .scorepanel h3,.sec-dark .qcard h3,.sec-dark .pcard h3{color:var(--ink)}
.sec-dark .qform p,.sec-dark .plan p,.sec-dark .qcard p,.sec-dark .scorepanel p,.sec-dark .pcard p{color:var(--muted)}
.sec-dark .plan .btn-line,.sec-dark .qform .btn-line,.sec-dark .pcard .btn-line{color:var(--navy);border-color:var(--line-2)}
.sec-dark .plan .btn-line:hover,.sec-dark .qform .btn-line:hover,.sec-dark .pcard .btn-line:hover{border-color:var(--navy);background:var(--canvas)}
.sec-dark .plan .amt b,.sec-dark .plan .pname,.sec-dark .plan .addl b{color:var(--navy)}
.sec-dark .plan .addl{color:#3d4757}

/* hero offset frame: a touch more presence so it reads as a deliberate device */
.hmedia .navyblob{border-width:2.5px;border-color:rgba(252,201,82,.62);inset:auto -26px -26px auto}

/* ==========================================================================
   v3 PASS (owner feedback #2, 2026-07-29)
   · Header goes back to LIGHT and carries the REAL logo (assets/source/ie-logo-color.svg,
     copied to _shared/ie-logo.svg; _shared/ie-logo-light.svg is the knockout for dark bg).
   · Mega menu rebuilt to the owner's shared reference: nav = Services / Trane /
     Plans & Financing / Service Areas / About, with one WIDE 4-column Services panel
     (column heads + hairline, grey sub-labels, a HUB card and a rebate promo card).
   · Trust "pointers" strip, intro section, Maintenance and reviews redesigned.
   · Service-area right column: photo + coverage card (the stylised map did not read).
   · Offers strip removed from the form section. Closing CTA centred.
   · Footer: real logo, NAP/badge clutter removed.
   ========================================================================== */

/* ---------- HEADER v3: light, real logo, full-width mega ---------- */
header{
  position:sticky;top:0;z-index:70;background:rgba(250,248,243,.93);
  backdrop-filter:saturate(1.15) blur(10px);border-bottom:1px solid var(--line);
  transition:box-shadow .26s ease,background .26s ease;
}
header[data-solid="true"]{background:rgba(250,248,243,.97);box-shadow:0 6px 22px rgba(11,31,69,.07)}
.nav{display:flex;align-items:center;height:86px;gap:20px}
/* real logo lockup */
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{height:46px;width:auto;display:block}
.menu{display:flex;gap:4px;list-style:none;margin:0 auto;padding:0;align-items:center}
.menu>li{position:relative;display:flex}
.menu>li>a{
  font-family:var(--disp);font-weight:600;font-size:14.6px;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:9px;
  transition:background .17s ease,color .17s ease;white-space:nowrap;
}
.menu>li>a::after{display:none}
.menu>li>a .cv{width:10px;height:10px;opacity:.55;transition:transform .2s ease}
.menu>li>a:hover,.menu>li:focus-within>a{background:#EEF1F8;color:var(--navy)}
.menu>li:hover>a .cv{transform:rotate(180deg)}
.navr{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.navr .ph{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--navy);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.navr .ph small{display:block;font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.navr .ph svg{width:16px;height:16px;color:var(--gold)}

/* mega panel: anchored to the header, full content width */
.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(7px);
  width:min(1180px,calc(100vw - 40px));z-index:80;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 64px rgba(11,31,69,.17);padding:30px 32px 26px;
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.mega.narrow{width:min(560px,calc(100vw - 40px))}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.menu>li:hover>.mega,.menu>li:focus-within>.mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mcols{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px}
.mcols.three{grid-template-columns:repeat(3,1fr)}
/* Five columns, proportional not equal. The Comfort & Controls column holds the short labels
   ("Thermostats", "Zoning Systems") so it gives width back to the three service columns whose
   labels wrap ("Installation & Replacement", "Humidifiers & Dehumidifiers"). Equal fifths made
   those wrap onto three lines each. */
.mcols.five{grid-template-columns:1.04fr 1.04fr 1.1fr 1.12fr .8fr;gap:0 26px}
/* Align the five columns on a shared baseline. Two things broke it: "COMFORT & CONTROLS" wraps to
   two lines where the other four headers are one, and two of the four hub cards wrap while two do
   not. Left alone, the first plain link in each column started at a different height and the panel
   read as five loose lists rather than one grid. Reserving the taller measure in both places costs
   nothing on the single-line cases and makes every column start level. */
.mcols.five .mcol h4{min-height:42px}  /* = the two-line measure; 31px left the wrapped header 11px low */
.mcols.five .mhub{min-height:56px}
@media (max-width:1120px){ .mcols.five{grid-template-columns:repeat(3,1fr);gap:0 26px} }
.mcol h4{
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--navy);display:flex;align-items:center;gap:9px;padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.mcol h4 .pill{font-size:9.6px;letter-spacing:.1em;background:var(--canvas-2);color:var(--muted);
  border-radius:20px;padding:3px 8px;font-weight:700}
.mcol .sub{display:block;font-family:var(--disp);font-weight:700;font-size:10.4px;letter-spacing:.13em;
  text-transform:uppercase;color:#9aa3b2;margin:2px 0 8px}
.mcol .sub + .sub{margin-top:18px}
.mcol a{display:block;padding:7px 0;font-size:14.6px;font-weight:400;color:#2c3648;line-height:1.35;transition:color .15s}
.mcol a:hover{color:var(--navy);font-weight:500}
.mcol a small{display:block;font-size:12.4px;color:var(--muted)}
/* Hub column titles (client, 2026-08-22). The heading IS the hub link now, so it has to keep the
   h4's own type: `.mcol a` above would otherwise repaint it as a 14.6px body link and the column
   would lose its header rule. Hover goes gold because the heading is already navy. */
.mcol h4 a{display:inline;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;transition:color .15s}
.mcol h4 a:hover{color:var(--gold);font-weight:inherit}
/* Three of the four column titles are links and one ("Heat Pumps & Ductless", which has no hub
   page) is not. Without a mark they are indistinguishable, so the hub is undiscoverable - the
   thing the removed "All ___" card used to make obvious. A chevron, matching the ones on the
   top-level nav items, is the smallest cue that separates the two cases. */
.mcol h4 a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .15s}
.mcol h4 a:hover::after{transform:rotate(45deg) translate(2px,-3px)}
/* HUB card + promo card inside a mega column */
.mhub{display:flex !important;align-items:center;justify-content:space-between;gap:12px;
  background:#EEF1F8;border:1px solid #dfe5f2;border-radius:11px;padding:13px 14px !important;margin:2px 0 10px}
.mhub b{font-family:var(--disp);font-weight:700;font-size:14.6px;color:var(--navy);line-height:1.25}
.mhub .tag{font-family:var(--disp);font-weight:700;font-size:9.6px;letter-spacing:.1em;color:#7d8aa6}
.mpromo{display:block !important;background:#FDF4E6;border:1px solid #F3E3C6;border-radius:11px;
  padding:15px 16px !important;margin-top:16px}
/* In the foot rail it is a flex child, so the column-context margin-top has to go or the row sits
   off its own baseline. Capped so it cannot crowd out the helper text and the CTA. */
.mfootrow .mpromo{margin-top:0;flex:0 1 320px;min-width:250px}
.mfootrow > span{flex:1 1 240px}
.mpromo .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mpromo b{font-family:var(--disp);font-weight:700;font-size:14.6px;color:#8a6410;line-height:1.25}
.mpromo .pill2{background:var(--gold);color:#1c1403;font-family:var(--disp);font-weight:700;font-size:9.6px;
  letter-spacing:.09em;border-radius:20px;padding:5px 10px;white-space:nowrap}
.mpromo p{font-size:13px;color:#9a7526;margin:8px 0 0}
.mfootrow{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.mfootrow span{font-size:13.4px;color:var(--muted)}
@media(max-width:1080px){.menu>li>a{font-size:13.8px;padding:10px 10px}.brand img{height:42px}}
@media(max-width:960px){.mega{display:none}}

/* ---------- TRUST "POINTERS" STRIP v5 — OVERLAP CARD (owner pick, 2026-08-11) ----------
   Replaces the v3 strip (5 gold icon chips in a full-width white band). What v3 got wrong:
   the repeated soft-gold icon tile was the most templated element on the page and this owner
   had already rejected icon tiles once as "icons feel AI"; the captions wrapped so no two
   cells shared a baseline; 14.4px bold over 12.6px muted was not a real hierarchy; and the
   band read as a widget bolted under the hero rather than part of the fold.
   v5: the icon is replaced by a gold category LABEL (it names the fact in one line and costs
   no vertical space), each cell is a clean 3-step ledger, and the whole thing lifts into a
   card that overlaps the hero so hero + proof read as ONE composition.
   Markup: .tstrip > .wrap > .ti × 5, each .ti = <span class=k> label, <span class=v> fact,
   <span class=d> caption. NO icons, NO <b>.
   ⚠ The overlap is a negative margin, so `.tstrip` MUST directly follow the hero. */
.tstrip{position:relative;z-index:2;margin-top:-46px;background:none;border:0}
.tstrip .wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0;
  max-width:var(--wrap);margin:0 auto}
/* the card is inset from the page gutter by the .wrap padding it no longer applies itself */
.tstrip{padding:0 28px}
.tstrip .ti{position:relative;display:block;padding:24px 26px;font-size:14px;font-weight:400;color:var(--ink)}
.tstrip .ti + .ti::before{content:"";position:absolute;left:0;top:26px;bottom:24px;width:1px;background:var(--line)}
.tstrip .ti .k{display:block;font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8B6B04;line-height:1} /* was var(--gold) #E1A50C = 2.2:1 on white; #8B6B04 = 5.0:1, WCAG AA at 10.5px (QA audit 2026-08-26) */
.tstrip .ti .v{display:block;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.012em;
  color:var(--navy);margin-top:9px;line-height:1.18}
.tstrip .ti .d{display:block;font-size:12.7px;color:var(--muted);margin-top:4px;line-height:1.45}
@media(max-width:1080px){
  .tstrip{margin-top:-30px}
  .tstrip .wrap{grid-template-columns:repeat(3,1fr)}
  .tstrip .ti:nth-child(4)::before{display:none}
  .tstrip .ti:nth-child(n+4){border-top:1px solid var(--line)}}
@media(max-width:700px){
  .tstrip{margin-top:-26px;padding:0 20px}
  .tstrip .wrap{grid-template-columns:1fr 1fr}
  .tstrip .ti{padding:18px 20px}
  .tstrip .ti:nth-child(odd)::before{display:none}
  .tstrip .ti:nth-child(4)::before{display:block}
  .tstrip .ti:nth-child(n+3){border-top:1px solid var(--line)}
  .tstrip .ti:last-child{grid-column:1/-1}
  .tstrip .ti .v{font-size:16px}}
/* the hero needs room under its content for the card to land on navy, not on copy.
   These come after the responsive block on purpose so they beat the 960/640 hero paddings. */
.hero .wrap{padding-bottom:112px}
@media(max-width:960px){.hero .wrap{padding-bottom:82px}}
@media(max-width:640px){.hero .wrap{padding-bottom:66px}}

/* ---------- INTRO v3: editorial statement + signature ---------- */
.intro .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,4.4vw,74px);align-items:center}
.intro .body p{font-size:16.4px;color:#3d4757;max-width:54ch}
.intro .body p:first-of-type{font-size:19px;color:var(--ink);line-height:1.52}
.introquote{margin:26px 0 24px;padding:22px 26px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:0 14px 14px 0}
.introquote p{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.6vw,20.5px);line-height:1.45;
  color:var(--navy);letter-spacing:-.01em;margin:0;max-width:44ch}
.intro .sig{display:flex;align-items:center;gap:14px;margin-top:0;padding-top:0;border-top:0}
.intro .sig img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:62% 20%;border:1px solid var(--line)}
.intro .sig b{font-family:var(--disp);font-size:15px;color:var(--navy);display:block;line-height:1.2}
.intro .sig span{font-size:13px;color:var(--muted)}
.introart{position:relative}
.introart .shot{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;z-index:1}
.introart .shot img{width:100%;aspect-ratio:4/3.5;object-fit:cover;object-position:50% 44%}
.introart::after{content:"";position:absolute;inset:auto -20px -20px auto;width:62%;height:58%;
  border:2.5px solid rgba(225,165,12,.5);border-radius:20px;z-index:0}
.introart .tagcard{position:absolute;left:-18px;bottom:-20px;z-index:2;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:15px 18px;
  box-shadow:0 18px 34px rgba(20,56,131,.14);display:flex;align-items:center;gap:12px}
.introart .tagcard svg{width:22px;height:22px;color:var(--gold);flex:0 0 22px}
.introart .tagcard b{display:block;font-family:var(--disp);font-weight:700;font-size:14.4px;color:var(--navy);line-height:1.2}
.introart .tagcard span{font-size:12.4px;color:var(--muted)}
@media(max-width:960px){.intro .wrap{grid-template-columns:1fr}.introart{max-width:520px}.introart .tagcard{left:0}}

/* ---------- SERVICE AREA v3: photo + coverage card ---------- */
.areagrid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(34px,4.4vw,66px);align-items:center}
.areaart{position:relative}
.areaart .shot{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.areaart .shot img{width:100%;aspect-ratio:16/11;object-fit:cover}
.covcard{position:absolute;left:-16px;bottom:-24px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:18px 22px;box-shadow:0 20px 40px rgba(20,56,131,.16);display:flex;gap:0}
.covcard .c{padding:0 20px}
.covcard .c + .c{border-left:1px solid var(--line)}
.covcard b{display:block;font-family:var(--disp);font-weight:700;font-size:21px;color:var(--navy);line-height:1}
.covcard span{display:block;font-size:12.2px;color:var(--muted);margin-top:5px;white-space:nowrap}
/* 2026-08-13: `.covcard` is absolute at left:-16px with nowrap cells, so its ~510px intrinsic
   width escaped the column and pushed the HOMEPAGE sideways (12px at 1000, 30px at 961) while
   `.areagrid` was still 2-up. Bounding it on both sides from 1080 down fixes it; the ≤960 rule
   below then takes over once the grid stacks. Found by the same overflow sweep as the header. */
@media(max-width:1080px){
  .covcard{left:0;right:0;justify-content:space-between;padding:16px 14px}
  .covcard .c{padding:0 11px}
  .covcard b{font-size:19px}
  .covcard span{white-space:normal}
}
@media(max-width:960px){.areagrid{grid-template-columns:1fr}.areaart{max-width:560px}
  .covcard{left:0;right:0;bottom:-30px;justify-content:space-between}}
@media(max-width:640px){.covcard{position:static;margin-top:16px;padding:16px}
  .covcard .c{padding:0 12px}.covcard b{font-size:18px}.covcard span{font-size:11.4px;white-space:normal}}

/* ---------- MAINTENANCE v3: card (membership pricing removed 2026-08-20) ---------- */
.clubgrid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(34px,4.4vw,68px);align-items:center}
.clubinc{list-style:none;display:grid;gap:0;margin:28px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.clubinc li{display:flex;align-items:flex-start;gap:13px;padding:14px 0;font-size:15.2px;color:#eef2f9;
  border-bottom:1px solid rgba(255,255,255,.16)}
.clubinc svg{width:18px;height:18px;color:var(--gold-2);flex:0 0 18px;margin-top:3px}
/* the card itself */
.memcard{position:relative;border-radius:20px;padding:28px 30px;overflow:hidden;
  background:linear-gradient(135deg,#fdf6e6 0%,#f7ead0 52%,#f2dfb8 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.6)}
.memcard::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.75),transparent 68%);pointer-events:none}
.memcard .mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative}
.memcard .mhead img{height:34px;width:auto}
.memcard .mtag{font-family:var(--disp);font-weight:700;font-size:9.8px;letter-spacing:.15em;text-transform:uppercase;
  color:#8a6410;background:rgba(255,255,255,.72);border:1px solid rgba(138,100,16,.2);border-radius:20px;padding:5px 11px}
.memcard .mname{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2vw,26px);color:#1c1403;
  letter-spacing:-.015em;margin:22px 0 4px;position:relative}
.memcard .msub{font-size:13.6px;color:#7c6636;margin:0;position:relative}
.memcard .prow{margin-top:24px;padding-top:20px;border-top:1px dashed rgba(138,100,16,.32);display:grid;gap:12px;position:relative}
.memcard .prow .r{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.memcard .prow .r span{font-size:14px;color:#6b5828}
.memcard .prow .r b{font-family:var(--disp);font-weight:700;font-size:19px;color:#1c1403;letter-spacing:-.02em}
.memcard .prow .r.big b{font-size:34px;line-height:1}
.memcard .prow .r em{font-style:normal;font-family:var(--disp);font-weight:700;font-size:9.6px;letter-spacing:.1em;
  text-transform:uppercase;color:#8a6410;background:rgba(255,255,255,.7);border-radius:16px;padding:4px 9px;margin-left:8px}
.memcard .mcta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;position:relative}
.memcard .btn-dark{background:var(--navy-ink);color:#fff;box-shadow:0 10px 24px rgba(11,31,69,.28)}
.memcard .btn-dark:hover{background:#132a56;transform:translateY(-1px)}
.memcard .mline{background:transparent;color:#1c1403;border-color:rgba(28,20,3,.28)}
.memcard .mline:hover{border-color:#1c1403;background:rgba(255,255,255,.5)}
.memcard .fine2{font-size:12.2px;color:#8a7442;margin:14px 0 0;position:relative}
@media(max-width:960px){.clubgrid{grid-template-columns:1fr}.memcard{max-width:520px}}

/* ---------- REVIEWS v3: score bar + quote cards ---------- */
.revbar{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(22px,3vw,44px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 30px;
  box-shadow:var(--shadow);margin-top:36px}
.revbar .sc{display:flex;align-items:center;gap:18px}
.revbar .sc .n{font-family:var(--disp);font-weight:700;font-size:56px;line-height:.86;letter-spacing:-.035em;color:var(--navy)}
.revbar .sc .st{color:var(--gold);font-size:17px;letter-spacing:3px;line-height:1}
.revbar .sc .sm{font-size:13.2px;color:var(--muted);margin-top:6px}
.revbar .facts{display:flex;gap:0;flex-wrap:wrap}
.revbar .facts div{padding:0 22px;font-size:13.6px;color:#3d4757;display:flex;align-items:center;gap:9px}
.revbar .facts div + div{border-left:1px solid var(--line)}
.revbar .facts svg{width:16px;height:16px;color:var(--gold);flex:0 0 16px}
.revbar .btn{white-space:nowrap}
@media(max-width:1080px){.revbar{grid-template-columns:1fr;gap:22px}
  .revbar .facts div{padding:0 18px 0 0}.revbar .facts div + div{border-left:0}}
@media(max-width:640px){.revbar{padding:22px}.revbar .sc .n{font-size:46px}
  .revbar .facts{flex-direction:column;gap:10px}}

/* ---------- CLOSING CTA v3: centred ---------- */
.close.center .wrap{max-width:820px;text-align:center}
.close.center .scrim{background:linear-gradient(180deg,rgba(11,31,69,.9) 0%,rgba(11,31,69,.82) 45%,rgba(11,31,69,.94) 100%)}
.close.center h2{max-width:none;margin:18px auto 0}
.close.center p{margin:18px auto 0}
.close.center .eyebrow{justify-content:center}
.close.center .cta{justify-content:center}
.close.center .pr{justify-content:center;border-top:1px solid rgba(255,255,255,.16);display:inline-flex;margin-top:28px;padding-top:22px}

/* ---------- FOOTER v3: real logo, clutter removed ---------- */
.fbrand img{height:46px;width:auto;margin-bottom:20px}
.fcontact{margin-top:22px;display:grid;gap:9px;font-size:13.8px}
.fcontact a,.fcontact span{display:flex;align-items:flex-start;gap:10px;color:#b9c4dc}
.fcontact a:hover{color:#fff}
.fcontact svg{width:15px;height:15px;color:var(--gold-2);flex:0 0 15px;margin-top:3px}
.flegal{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 30px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:13px;color:#8a99b8;margin-top:8px}

/* ---------- v3b: RESPONSIVE for the v3 header ----------
   The v3 header rules are declared AFTER the base @media blocks, so an unconditional
   `.menu{display:flex}` beat the base `@media(max-width:960px){.menu{display:none}}`
   and the desktop nav leaked onto mobile (1025px of horizontal overflow at 390px).
   Anything the v3 layer redeclares must be re-hidden here.

   ⚠ BREAKPOINT RAISED 960 → 1180 on 2026-08-13 (owner call). The desktop nav used to hold
   until 960px, but the header's right block needs ~1090px to fit, so every page scrolled
   sideways between 961px and 1169px — small laptops and tablets in landscape.
   The drawer now takes over at 1180 instead. `.mega` is hidden here too, for the same reason.
   1180 is not arbitrary: brand 187 + menu 623 + navr 293 = 1103px of children, plus 2x20px
   gap plus 56px padding = ~1199px needed, and measured overflow starts at exactly 1170px.
   Do NOT "fix" this by widening the base 960 block: that block also carries hero, hmedia and
   intro grid rules, and moving those to 1100 changes layouts that are fine as they are.
   `.navr .btn-gold` deliberately stays visible in the 961-1180 range (it only hides at ≤960):
   with the nav gone there is room for it, and it is the header's only CTA. */
@media(max-width:1180px){
  .menu{display:none}
  .mega{display:none}
  .burger{display:flex}
  .navr .ph small{display:none}
  .nav{height:76px;gap:14px}
  .brand img{height:40px}
}
@media(max-width:640px){
  .nav{height:66px;gap:12px}
  .navr{gap:12px;margin-left:auto}
  .navr .ph{display:none}
  .navr .btn-gold{display:none}
  .callicon{display:grid}
  .brand img{height:36px}
}

/* ---------- v3c: MEGA PANEL ANCHORING + LOGO SIZE ----------
   `.mega` was absolute inside a position:relative <li>, so left:50%/translateX(-50%)
   centred it on the nav ITEM and a 1180px panel ran off the left of the viewport.
   Panels now anchor to the nav bar itself and span the content column as one shelf,
   which is consistent for every menu and cannot overflow. */
.nav{position:relative}
.menu>li{position:static}
.mega{
  left:0;right:0;width:auto;max-width:none;
  transform:translateY(7px);
}
.mega.narrow{width:auto}
.menu>li:hover>.mega,.menu>li:focus-within>.mega{transform:translateY(0)}
/* bridge spans the whole shelf so the pointer can travel from item to panel */
.mega::before{left:0;right:0;top:-12px;height:12px}

/* logo: a little more presence than 46px gave */
.brand img{height:56px}
@media(max-width:1160px){.brand img{height:50px}}
@media(max-width:960px){.brand img{height:44px}}
@media(max-width:640px){.brand img{height:38px}}

/* ---------- v3d: mega sub-label spacing + service-area hood columns ---------- */
/* a grey sub-label that follows links needed the same top gap as sub+sub */
.mcol a + .sub{margin-top:18px}
/* 3 columns made "Virginia-Highland" / "East Atlanta Village" wrap to two lines */
.areagrid .hoods{grid-template-columns:repeat(2,1fr);gap:0 30px}

/* ==========================================================================
   v4 PASS (2026-07-29) — WAVE 1 SERVICE-PAGE COMPONENTS
   Promoted out of the AC-hub page <style> so every Wave 1 money page shares one
   definition instead of five copies: breadcrumb, stat band, service list,
   comparison table, numbered steps, two-up boxes, gallery slots.
   NEW here: .signs (the symptom / checklist grid every Wave 1 draft opens with).
   Each block carries its .sec-dark variant, because the dark hairlines
   (var(--line) on navy) are otherwise invisible and light cards inherit dark text.
   Loaded last, so these win — anything redeclared here that an earlier @media
   hid must be re-hidden in the v4 RESPONSIVE block at the bottom.
   ========================================================================== */

/* ---------- breadcrumb: sits in the dark field so header > crumb > hero read continuous ---------- */
.crumb{border-bottom:0;background:#0a1c3f}
.crumb .wrap{display:flex;align-items:center;gap:9px;padding:11px 28px;font-size:13px;color:#9dafd1;flex-wrap:wrap}
.crumb a{color:#9dafd1}
.crumb a:hover{color:#fff}
.crumb svg{width:12px;height:12px;opacity:.45;flex:none}
.crumb b{color:#fff;font-family:var(--disp);font-weight:600}

/* ---------- stat band (4 cards) ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.stat{padding:28px 26px 28px 0;border-bottom:1px solid var(--line)}
.stat:not(:nth-child(4n)){border-right:1px solid var(--line)}
.stat:not(:nth-child(4n)) + .stat{padding-left:26px}
.stat b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(26px,2.6vw,34px);color:var(--navy);letter-spacing:-.02em;line-height:1}
.stat span{display:block;font-size:14px;color:var(--muted);margin-top:10px}
.sec-dark .stats{border-top-color:rgba(255,255,255,.15)}
.sec-dark .stat{border-bottom-color:rgba(255,255,255,.15)}
.sec-dark .stat:not(:nth-child(4n)){border-right-color:rgba(255,255,255,.15)}
.sec-dark .stat b{color:var(--gold-2)}
.sec-dark .stat span{color:#b3c1dc}

/* ---------- signs / checklist grid (2-up, icon chip + lead-in + explanation) ---------- */
.signs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border-top:1px solid var(--line)}
.sign{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:26px 30px 26px 0;
  border-bottom:1px solid var(--line);align-items:start}
.sign:not(:nth-child(2n)){border-right:1px solid var(--line)}
.sign:not(:nth-child(2n)) + .sign{padding-left:30px}
.sign:last-child:nth-child(2n+1){border-right:0}
.sign .ic{width:34px;height:34px;border-radius:9px;background:var(--gold-soft);display:grid;place-items:center}
.sign .ic svg{width:17px;height:17px;color:var(--gold)}
.sign b{display:block;font-family:var(--disp);font-weight:700;font-size:15.6px;color:var(--navy);line-height:1.34}
.sign p{font-size:14.8px;color:var(--muted);margin:8px 0 0}
.sec-dark .signs{border-top-color:rgba(255,255,255,.15)}
.sec-dark .sign{border-bottom-color:rgba(255,255,255,.15)}
.sec-dark .sign:not(:nth-child(2n)){border-right-color:rgba(255,255,255,.15)}
.sec-dark .sign .ic{background:rgba(252,201,82,.13)}
.sec-dark .sign .ic svg{color:var(--gold-2)}
.sec-dark .sign b{color:#fff}
.sec-dark .sign p{color:#b3c1dc}

/* ---------- service list (hub) ---------- */
.svclist{margin-top:40px;border-top:1px solid var(--line)}
.svcrow{display:grid;grid-template-columns:.34fr .66fr;gap:28px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.svcrow h3{font-size:18.5px}
.svcrow h3 a{display:inline-flex;align-items:center;gap:8px}
.svcrow h3 a:hover{color:var(--navy)}
.svcrow h3 svg{width:15px;height:15px;color:var(--gold);transition:transform .2s;flex:none}
.svcrow h3 a:hover svg{transform:translateX(3px)}
.svcrow p{font-size:15.2px;color:var(--muted);margin:0;max-width:62ch}

/* ---------- comparison table ----------
   default = asymmetric (us vs them, gold check on the left column)
   .even    = both columns equal weight, no icons (repair vs replace, ductless vs other)
   .c3      = 3 columns with a row label in the first cell (Trane vs RunTru, with vs without) */
.cmp{margin-top:36px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);color:var(--ink)}
.cmp .hd{display:grid;grid-template-columns:1fr 1fr;background:var(--canvas-2)}
.cmp .hd div{padding:15px 24px;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy)}
.cmp .hd div:first-child{border-right:1px solid var(--line)}
.cmp .hd div:last-child{color:var(--muted)}
.cmp .rw{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.cmp .rw div{padding:18px 24px;font-size:14.6px}
.cmp .rw div:first-child{border-right:1px solid var(--line);color:var(--ink);display:flex;gap:11px;align-items:flex-start}
.cmp .rw div:last-child{color:var(--muted)}
.cmp .rw svg{width:16px;height:16px;color:var(--gold);flex:0 0 16px;margin-top:3px}
.cmp.even .hd div:last-child{color:var(--navy)}
.cmp.even .rw div:first-child{display:block}
.cmp.even .rw div:last-child{color:var(--ink)}
.cmp.c3 .hd,.cmp.c3 .rw{grid-template-columns:.84fr 1fr 1fr}
.cmp.c3 .hd div:first-child{color:var(--muted)}
.cmp.c3 .hd div:nth-child(2){border-right:1px solid var(--line);color:var(--navy)}
.cmp.c3 .hd div:last-child{color:var(--navy)}
.cmp.c3 .rw div:first-child{display:block;background:var(--canvas);font-family:var(--disp);font-weight:700;font-size:13.6px;color:var(--navy)}
.cmp.c3 .rw div:nth-child(2){border-right:1px solid var(--line);color:var(--muted)}
.cmp.c3 .rw div:last-child{color:var(--muted)}
.cmp .foot{border-top:1px solid var(--line);padding:14px 24px;font-size:13.2px;color:var(--muted);background:var(--canvas)}

/* ---------- numbered steps ---------- */
.nsteps{margin-top:42px;display:grid;gap:0;border-top:1px solid var(--line)}
.nstep{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.nstep .n{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--gold);letter-spacing:.1em;padding-top:3px}
.nstep h3{font-size:18px}
.nstep p{font-size:15px;color:var(--muted);margin:9px 0 0;max-width:64ch}
.sec-dark .nsteps{border-top-color:rgba(255,255,255,.15)}
.sec-dark .nstep{border-bottom-color:rgba(255,255,255,.15)}
.sec-dark .nstep .n{color:var(--gold-2)}
.sec-dark .nstep p{color:#b3c1dc}

/* ---------- two-up boxes ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,54px);margin-top:34px}
.two .bx h4{font-size:17px}
.two .bx p{font-size:15px;color:var(--muted);margin:10px 0 0}
.sec-dark .two .bx h4{color:#fff}
.sec-dark .two .bx p{color:#c3cfe6}

/* ---------- gallery placeholder slots (client-supplied photos pending) ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.gslot{border:1px dashed var(--line-2);border-radius:14px;aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:20px;background:rgba(255,255,255,.55)}
.gslot span{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.05em;color:#a3785f;background:#fdf5ee;border:1px solid #f0e2d4;border-radius:6px;padding:3px 8px;display:inline-block}
.gslot p{font-size:13.4px;color:var(--muted);margin:10px 0 0}
.sec-dark .gslot{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.sec-dark .gslot p{color:#b3c1dc}

/* ---------- v4 RESPONSIVE (must come after every v4 rule above) ---------- */
@media(max-width:960px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:22px 22px 22px 0}
  .stat:nth-child(2n){border-right:0;padding-left:22px}
  .stat:nth-child(2n+1){border-right:1px solid var(--line)}
  .sec-dark .stat:nth-child(2n+1){border-right-color:rgba(255,255,255,.15)}
  .signs{grid-template-columns:1fr}
  .sign,.sign:not(:nth-child(2n)) + .sign{padding:22px 0}
  .sign:not(:nth-child(2n)){border-right:0}
  .svcrow{grid-template-columns:1fr;gap:10px}
  .two,.gal{grid-template-columns:1fr}
  .cmp .hd,.cmp .rw,.cmp.c3 .hd,.cmp.c3 .rw{grid-template-columns:1fr}
  .cmp .hd div:first-child,.cmp .rw div:first-child,
  .cmp.c3 .hd div:nth-child(2),.cmp.c3 .rw div:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}
  .cmp .rw div:last-child{background:var(--canvas)}
  .cmp.c3 .rw div:last-child{background:transparent}
  .cmp.c3 .hd div:first-child{display:none}
}
@media(max-width:640px){
  .stats{grid-template-columns:1fr}
  .stat{padding:20px 0 !important;border-right:0 !important}
  .nstep{grid-template-columns:1fr;gap:6px}
}

/* ---------- v4b: hero H1 gold underline was invisible on EVERY page ----------
   The locked direction specifies a gold underline under the last words of the hero H1
   ("The fix that stays fixed."). `.hero h1 .u::after` uses z-index:-1, but `.u` itself
   was position:relative with z-index:auto, so `.u` never formed a stacking context and
   the -1 bar painted behind the .hero gradient instead of behind the text. Giving `.u`
   z-index:0 makes it a stacking context, so the bar lands behind its own text and stays
   in front of the section background. Found while building Wave 1; this also restores
   the underline on the homepage and the AC hub, where it had silently never rendered. */
.hero h1 .u,.hero .h1t .u{z-index:0}

/* ---------- v4c: a .signs cell that is an OPEN ITEM, not a delivered one ----------
   The AC-maintenance coverage grid carries a visible {{NEEDS_SOURCE}} for the itemised
   12-point checklist (client-blocked input). Styled like the other five cells it read as
   a sixth service we perform, which is exactly the wrong signal. .sign.todo borrows the
   dashed + tan chip language already used by .rslot and .gslot so a reviewer sees a gap. */
.sign.todo .ic{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.34)}
.sign .ns{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.05em;color:#a3785f;
  background:#fdf5ee;border:1px solid #f0e2d4;border-radius:6px;padding:3px 8px;display:inline-block;
  margin:0 0 9px}
.sign.todo b{color:var(--gold-2)}

/* ═══════════ v6 — PHOTO-BACKED HERO + MOVED PHOTO BLOCK (owner pick, 2026-08-13) ═══════════
   Owner asked for the AC hub's hero photo and the intro form to swap places, then picked the
   photo-backed variant of that swap (concept option C, rebuild/_concepts/hub-hero-form.html).
   So on a page using this: the QUOTE FORM is the hero's right column, a full-bleed real photo
   sits behind the whole hero under a navy grade, and the old hero photo moves down into the
   intro as `.ipic`.
   Opt in per page with `<section class="hero hero-photo">`. Pages without that class are
   untouched, which is why the other six still render their original hero. */
/* 🔴 THE PHOTO HERO IS A TRUE 50/50, and it needs minmax(0,…) to be one.
   `.hero .wrap` sets `1.05fr .95fr`, which should already be near-even. It is not: an `fr` track is
   `minmax(auto, Nfr)`, so it can never shrink below its own min-content, and the display H1 in the
   left column has a min-content wider than its share. The columns resolved to 699px / 385px, a
   60/33 split, and no amount of tuning the fr values fixes it because the left column was never
   honouring them. `minmax(0,1fr)` removes the automatic floor so both columns take exactly half.
   Guarded above 960px so the single-column collapse below that breakpoint still governs. */
/* 🔴 THE PHOTO HERO'S BOOKING SLOT IS BARE, not a card.
   `.qform` paints a white card, and the FieldEdge calendar inside it paints its OWN card, so the
   hero showed a box inside a box. The comment above `.fe-book` already claimed `.hero-photo .qform`
   stripped it back to bare; that rule was never actually written (nor were the other three it names,
   .gtcard/.gtouch/.saband). This is it. The wrapper stays in the DOM because it carries `#book`,
   the page's only booking anchor. */
/* ⚠ CONDITIONAL ON THE HEADING BEING GONE, via :has(). This is not styling for its own sake.
   The markup change that removes the heading lives on the CANONICAL page, so it only reaches a
   generated page when that page is next rebuilt. A flat `.hero-photo .qform` rule bared the card on
   all 43 hero-photo pages immediately, while 25 of them still had `<h3>Book a visit</h3>` in their
   markup — leaving a near-black heading sitting on a navy photo, measured at rgb(24,32,49) on the
   grade. Six of those pages are hubs that are not generated from the spine at all and have their own
   headings ("Apply for financing"), so they would never have caught up.
   Scoped this way it is self-healing: a page keeps its card until its heading is removed, and goes
   bare the moment it is. Browsers without :has() keep the card, which is the safe outcome.
   ⚠ MATCHES h2 AS WELL AS h3, and that is not belt-and-braces. The sub-service spine uses <h3>
   ("Book a visit") but the LOCATION pages and the Trane brand pages use <h2> ("Book a visit in
   Decatur", "Book a heating estimate"). An h3-only guard bared those cards while their heading was
   still there, putting near-black text on the navy hero photo on 12 pages. Guard on any heading. */
.hero-photo .qform:not(:has(h2, h3)){background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.hero-photo .qform:not(:has(h2, h3)) .fe-frame{margin-top:0}
/* The fine print used to sit on white. On the bare hero it sits on the navy photo grade, where
   `--muted` grey fails contrast. Matches `.hero .sub`, which is the same class of on-photo copy. */
.hero-photo .qform:not(:has(h2, h3)) .fine{color:#b9c7e0}

@media(min-width:961px){
  .hero-photo .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* The H1 has to come down with the column. `.hero h1 .u` is `white-space:nowrap` on purpose —
     the gold underline is one continuous bar and a wrapped span would break it into segments — so
     the underlined phrase cannot reflow to fit. At 62px the longest one in the build ("priced
     before we start", 22 characters) measures 684px against a 552px column and disappears behind
     the booking card. Measured in the browser: 50px fits exactly, 48px leaves ~22px of slack.
     Capped at 48px rather than 50 so a phrase a character or two longer still fits. */
  .hero-photo h1,.hero-photo .h1t,.hero-photo .hhead{font-size:clamp(35px,3.4vw,48px)}
  /* Floor is 35px, not 38: at exactly 961px the two-column layout is at its narrowest (422px a
     side) and 38px overflowed "your Atlanta ductwork" on the air-cleaning page. Swept 5 pages
     with the longest phrases across 961/1000/1100/1280/1440/1680/1920 to land on this. */
}
.hero-photo{isolation:isolate}
.hero-photo .hbg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-photo .hbg img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
/* The grade is load-bearing, not decoration: it is the only thing keeping the headline legible
   over a photo with a bright van and a lit driveway in it. Do not lighten it to "show the photo
   better" without re-checking contrast on the H1 and the eyebrow. */
.hero-photo .hgrade{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,
  rgba(10,28,63,.95) 0%,rgba(15,42,94,.88) 38%,rgba(20,56,131,.62) 68%,rgba(20,56,131,.42) 100%)}
@media(max-width:960px){
  /* stacked layout puts copy over the middle of the frame, so the grade turns vertical */
  .hero-photo .hgrade{background:linear-gradient(178deg,
    rgba(10,28,63,.94) 0%,rgba(15,42,94,.9) 45%,rgba(20,56,131,.8) 100%)}
}

/* the hero photo once it moves DOWN into the intro's right column.
   ⚠ `.fw` exists so the keyline and badge anchor to the PHOTO, not to `.ipic`. `.ipic` also
   contains the caption, so anchoring there hung the keyline below the caption as a stray box.
   z-index:0 (NOT auto) so the keyline's z-index:-1 stays in this stacking context (see v4b). */
.ipic{position:relative}
.ipic .fw{position:relative;z-index:0}
.ipic .frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/4.3;
  box-shadow:0 30px 60px rgba(20,56,131,.16);border:1px solid var(--line)}
.ipic .frame img{width:100%;height:100%;object-fit:cover}
.ipic .keyline{position:absolute;inset:auto -14px -14px auto;width:46%;height:38%;
  border:1.5px solid var(--gold);border-radius:22px;z-index:-1}
.ipic .badge{position:absolute;left:-20px;top:28px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:11px;
  box-shadow:0 16px 30px rgba(20,56,131,.14)}
.ipic .badge .em{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--navy);
  display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:700;font-size:13px}
.ipic .badge b{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy);display:block;line-height:1.15}
.ipic .badge span span{font-size:11.5px;color:var(--muted)}
.ipic .cap{margin-top:16px;font-size:12.8px;color:var(--muted);border-left:2px solid var(--gold);padding-left:12px}
@media(max-width:640px){.ipic .badge{left:-10px;top:18px}}

/* ═══════════ v7 — MID-PAGE CTA BAND (owner ask 2026-08-13) ═══════════
   Reference the owner sent = the old site's split CTA banner: big headline left, hairline
   rule, supporting copy + gold call button right, all over a photo under a heavy navy wash.
   Rebuilt here to our type scale and tokens rather than copied.
   Use ONCE per page, mid-scroll. It is an interrupt, not a section: no eyebrow, no heading
   above it, and it must not sit next to `.close` or the page ends on two CTAs in a row.
   Markup: section.ctaband > img.bg + .scrim + .wrap > (h2) + (.r > p + .cta) */
.ctaband{position:relative;overflow:hidden;background:var(--navy-ink);isolation:isolate}
.ctaband img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;z-index:-2}
/* The photo is TEXTURE, never content. A band this short crops a person to a headless
   torso, so the wash stays heavy edge to edge and only warms slightly toward the right.
   Earlier .72 on the right end let the figure read as a subject and it looked like a mistake. */
.ctaband .scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,
  rgba(11,31,69,.97) 0%,rgba(11,31,69,.94) 44%,rgba(16,44,102,.91) 74%,rgba(20,56,131,.87) 100%)}
.ctaband .wrap{position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(26px,3.6vw,54px);align-items:center;padding:clamp(46px,4.8vw,66px) 28px}
.ctaband h2{font-size:clamp(25px,2.9vw,39px);line-height:1.14;letter-spacing:-.022em;
  color:#fff;max-width:17ch}
.ctaband .r{position:relative;padding-left:clamp(26px,3.6vw,54px)}
.ctaband .r::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.24)}
.ctaband p{color:#c9d4e8;font-size:16px;line-height:1.6;margin:0 0 22px;max-width:48ch}
.ctaband .cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ctaband .btn-gold svg{width:17px;height:17px;flex:none}
.ctaband .alt{font-size:14.2px;color:#b9c6de}
.ctaband .alt a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}
.ctaband .alt a:hover{border-bottom-color:var(--gold-2);color:var(--gold-2)}
@media(max-width:860px){
  .ctaband .wrap{grid-template-columns:1fr;gap:24px}
  .ctaband h2{max-width:20ch}
  /* the rule turns horizontal when the columns stack, or it reads as a stray vertical tick */
  .ctaband .r{padding-left:0;padding-top:24px}
  .ctaband .r::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
}
@media(max-width:640px){
  .ctaband .wrap{padding:38px 20px}
  .ctaband .cta{gap:12px}
  .ctaband .cta .btn{width:100%;justify-content:center}
}

/* ═══════════ v8 — SERVICES CARD GRID, 6-up (owner ask 2026-08-13) ═══════════
   The AC hub used to list its sub-services as plain text rows (`.svclist`) buried mid-page.
   Owner asked for the card grid the other four builds carry (Skyline / Precision / Lexany /
   Alamo) and for it to sit high on the page. This extends the existing `.svc` card rather
   than adding a second card system.
   PHOTO cards, not icon cards, on purpose: this owner rejected icon tiles once already
   ("icons feel AI"), and we have real photography for every one of these services.
   The WHOLE CARD is the link, so the tap target is the card, not a 13px text link. */
.svcgrid.six{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
a.svc{color:inherit;text-decoration:none}
a.svc:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.svc .go{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;
  font-size:12.4px;letter-spacing:.07em;text-transform:uppercase;color:var(--navy)}
.svc .go svg{width:14px;height:14px;color:var(--gold);flex:0 0 14px;transition:transform .2s ease}
a.svc:hover .go{color:var(--gold-d,#c8930a)}
a.svc:hover .go svg{transform:translateX(4px)}
/* the closing line under the grid: "not sure which one you need?" */
.svcask{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:14px 18px;flex-wrap:wrap;text-align:center}
.svcask b{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink)}
@media(max-width:1000px){.svcgrid.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .svcgrid.six{grid-template-columns:1fr;gap:18px}
  .svc .bd{padding:20px 20px 18px}
  .svcask .btn{width:100%;justify-content:center}
}

/* ---- v8b: dark "not sure?" card that fills the 6th slot on the money pages ----
   The hub grid shows all six services. A money page shows the five OTHER services, so the
   6th slot would sit empty and break the 3-up rhythm. This fills it with the prompt card the
   Lexany build uses, which turns a dead cell into the page's cross-sell CTA.
   No photo by design: it is a call to action, not a service. */
.svc.ask{background:linear-gradient(135deg,var(--navy-ink) 0%,var(--navy) 100%);border-color:transparent}
/* the photo cards pin `.go` to the bottom with margin-top:auto so their link rows line up.
   This card has no photo, so that same rule left a hole between the copy and the link.
   Kill the auto and centre the whole block instead. */
.svc.ask .bd{justify-content:center;padding:28px 26px}
.svc.ask .go{margin-top:24px}
.svc.ask h3{color:#fff}
.svc.ask p{color:#bcc9e2}
.svc.ask .go{border-top-color:rgba(255,255,255,.2);color:var(--gold-2)}
.svc.ask .go svg{color:var(--gold-2)}
a.svc.ask:hover{box-shadow:0 18px 40px rgba(11,31,69,.28)}
a.svc.ask:hover .go{color:#fff}
a.svc.ask:hover .go svg{color:#fff}
a.svc.ask:focus-visible{outline-color:var(--gold-2)}

/* ---- v8c: centred section head (owner ask 2026-08-13) ----
   Opt-in `.head.center`. Used on the services card grid, where a left-aligned head over a
   symmetrical 3-up grid sat off balance. Every other section on these pages keeps the
   left-aligned `.head` — that is the page's established rhythm, so do not make this global.
   `.eyebrow` is inline-flex, so text-align centres the whole chip and its gold dash with it;
   `.lede` carries max-width:58ch and needs auto margins or it stays pinned left. */
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .eyebrow{justify-content:center}
.head.center .lede{margin-left:auto;margin-right:auto}

/* ---- v8d: full-width centred head (owner ask 2026-08-13) ----
   `.head` caps at 820px and `.lede` at 58ch, which left the centred grid head as a narrow
   column in the middle of a 1220px section. `.head.center` now spans the full wrap so the H2
   sits on one line above the 3-up grid.
   The lede keeps a measure, just a much wider one: at the full 1164px a 17.5px line runs to
   ~130 characters, well past the ~75 where body copy gets hard to track. 90ch is the widest
   it goes without reading as a wall. */
.head.center{max-width:none}
.head.center h2{max-width:none}
.head.center .lede{max-width:90ch}

/* ═══════════ v9 — TWO-COLUMN FAQ (owner ask 2026-08-13) ═══════════
   Opt-in `.faq-2col`. The default `.faq` is an aside-plus-list split; this variant matches the
   reference the owner sent: a centred head on top, then the questions in two columns as
   discrete bordered bars instead of one long hairline stack.

   ⚠ NAMING: this was `.faq.two` for about ten minutes and it broke the section badly.
   `.two` is ALREADY the two-up box component (`display:grid; 1fr 1fr`) in the v4 layer, so the
   modifier turned the whole <section> into a 2-column grid, `.wrap` became a shrink-wrapped
   grid item at 696px, and every child squeezed into the left half of the page.
   Never reuse a bare utility word as a block modifier in this stylesheet.

   ⚠ The dark rules are `.sec-dark.faq-2col` COMPOUND, not `.sec-dark .faq-2col`. Both classes
   sit on the SAME <section>, so the descendant form never matches and the cards rendered white
   with the dark theme's white summary text on top: invisible questions.

   Cards get their own border box rather than shared hairlines, because in a 2-column grid
   adjacent `border-bottom` rows do not line up across columns and the stack reads broken.
   `align-self:start` matters: without it an open answer stretches its whole grid row and the
   neighbouring closed question grows a tall empty box. */
.faq-2col .wrap{grid-template-columns:1fr;gap:0}
.faq-2col .faqlist{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:0;margin-top:42px}
.faq-2col .faqlist details{align-self:start;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);padding:0 20px;transition:border-color .18s,background .18s}
.faq-2col .faqlist details:hover{border-color:var(--line-2)}
.faq-2col .faqlist details[open]{border-color:var(--gold)}
.faq-2col .faqlist summary{padding:17px 0;font-size:16px}
.faq-2col .faqlist .ans{padding:0 0 18px;max-width:none}
.faq-2col .faqfoot{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
/* dark field — COMPOUND selector, see note above */
.sec-dark.faq-2col .faqlist details{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.16)}
.sec-dark.faq-2col .faqlist details:hover{border-color:rgba(255,255,255,.32)}
.sec-dark.faq-2col .faqlist details[open]{border-color:var(--gold);background:rgba(255,255,255,.08)}
@media(max-width:860px){
  .faq-2col .faqlist{grid-template-columns:1fr}
  .faq-2col .faqfoot .btn{width:100%;justify-content:center}
}

/* ═══════════ v10 — SIGNS CARDS, redesigned (owner: "needs to be designed better") ═══════════
   Replaces the flat `.signs` hairline grid on the AC hub. What v1 got wrong:
    · 34px gold icon chips carried no information and were nearly invisible at that size — and
      this owner already rejected icon tiles once ("icons feel AI"), which is why the earlier
      concept round swapped them for gold numerals. Same fix applied here.
    · Hairline cells in a 2-up grid go ragged the moment one symptom needs four lines and its
      neighbour needs three. Discrete cards with a pinned bottom row hold the shape.
    · Four paragraphs read as a spec sheet. The likely causes were buried mid-sentence, so they
      are pulled out into a labelled "Usually" chip row. Same facts, restructured, nothing new.
   The section also gets a real photo under the navy, which is the presence the flat gradient
   was missing. Keep the opacity low: it is depth, not a subject. */
.signsec{position:relative;isolation:isolate;overflow:hidden}
.signsec .sbg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.signsec .sbg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;opacity:.20}
.signsec .sgrade{position:absolute;inset:0;z-index:-1;background:linear-gradient(168deg,
  rgba(10,28,63,.93) 0%,rgba(15,42,94,.9) 52%,rgba(11,31,69,.95) 100%)}

.signs2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:46px}
.sg{display:flex;flex-direction:column;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:26px 26px 22px;
  transition:background .22s ease,border-color .22s ease,transform .22s ease}
.sg:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.sg .n{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.18em;color:var(--gold-2)}
.sg h3{font-size:20px;color:#fff;margin:13px 0 0;letter-spacing:-.012em}
.sg p{font-size:14.9px;line-height:1.62;color:#b6c4de;margin:11px 0 0}
/* margin-top:auto pins the chip row to the bottom so all four cards align on it */
.sg .cz{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sg .cz .lb{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#8d9dbd}
.sg .cz span:not(.lb){font-size:12.6px;color:#dbe4f5;border:1px solid rgba(255,255,255,.22);
  border-radius:20px;padding:5px 11px;white-space:nowrap}
@media(max-width:860px){.signs2{grid-template-columns:1fr;gap:14px}}
@media(max-width:640px){.sg{padding:22px 20px 20px}.sg h3{font-size:18px}}

/* ⚠ SUPERSEDED 2026-08-13 — v11 below is NOT used by any live page.
   The AC hub's pricing section moved to the v12 "repair or replace" fork (owner pick from
   _concepts/pricing-variations.html). The v11 `.cost2` / `.pricecard` rules are retained ONLY
   so option A on that concepts page still renders for comparison. If the concepts page is ever
   retired, delete this whole v11 block with it. Nothing else references it. */
/* ═══════════ v11 — PRICING SECTION, redesigned (owner: "redesign this in a better way") ═══════════
   v1 was: left-aligned head, two prose blocks, then the four price facts in a thin 13px strip at
   the very bottom. On a PRICING section that is exactly backwards. The four numbers are the most
   scanned thing on the page and they were the least prominent thing in it, while two walls of
   body copy took the space. The section also had no real graphic element, which the brand rules
   require of every section.
   v2 inverts it: the numbers become a navy PRICE LEDGER panel that anchors the section, and the
   prose drops behind it as two numbered steps (same gold-numeral language as the signs cards).
   ⚠ Every figure and caption is carried over verbatim. Nothing about the pricing changed. */
.cost2 .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(34px,4.4vw,64px);align-items:start}
.cost2 .head{max-width:none}

/* left: the two steps that used to be .two prose boxes */
.csteps{margin-top:34px}
.cstep{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.cstep:last-child{border-bottom:1px solid var(--line)}
.cstep .n{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--gold);padding-top:5px}
.cstep b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.cstep p{font-size:15px;line-height:1.62;color:var(--muted);margin:9px 0 0}

/* right: the price ledger. This is the section's graphic element. */
.pricecard{background:linear-gradient(158deg,#0a1c3f 0%,#143883 62%,#0f2a5e 100%);
  border-radius:20px;padding:28px 30px 26px;box-shadow:0 26px 54px rgba(11,31,69,.24)}
.pricecard .pclb{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-2);display:block}
.pcrow{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;
  padding:19px 0;border-top:1px solid rgba(255,255,255,.15)}
.pcrow:first-of-type{margin-top:20px}
.pcrow .fig{font-family:var(--disp);font-weight:700;font-size:27px;line-height:1;
  letter-spacing:-.025em;color:var(--gold-2);white-space:nowrap}
.pcrow .fig i{font-style:normal;font-size:13.5px;letter-spacing:0;color:#9fb0d0;margin-left:3px}
.pcrow b{display:block;font-family:var(--disp);font-weight:700;font-size:16px;color:#fff;line-height:1.25}
.pcrow span{display:block;font-size:13.4px;color:#b6c4de;margin-top:4px}
.pcfoot{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15)}
.pcfoot .btn{width:100%;justify-content:center}
.pcfoot p{font-size:12.6px;color:#9fb0d0;margin:14px 0 0;text-align:center}

@media(max-width:960px){
  .cost2 .wrap{grid-template-columns:1fr}
  .pricecard{margin-top:8px}
}
@media(max-width:640px){
  .pricecard{padding:24px 22px 22px}
  .pcrow{grid-template-columns:96px 1fr;gap:12px}
  .pcrow .fig{font-size:24px}
  .cstep{grid-template-columns:36px 1fr}
}

/* ⚠ DEAD 2026-08-17 — the owner removed the pricing section from the AC hub entirely, so v12
   below is no longer used by any live page (v11 above was already superseded by it).
   Both blocks are kept because this section has changed direction four times: bottom strip >
   ledger panel > repair/replace fork > removed. If it is not restored, delete v11 and v12
   together, ~110 lines. Nothing else references .cost2, .pricecard, .costfork, .pth or
   .clubline. The concepts page defines its own copies locally, so deleting these is safe. */
/* ═══════════ v12 — PRICING AS A FORK: repair or replace (owner pick 2026-08-13) ═══════════
   Chosen from eight directions in _concepts/pricing-variations.html (option E).
   Why this one: the page's H1 is "We'll tell you straight: repair or replace." A homeowner
   lands already sorted into one of those two camps, and every other version made them read
   four unrelated figures to find their own. This organises the money the way the question is
   already organised. The replacement card is the dark one on purpose — it carries the
   higher-value job without the copy having to push it.
   Maintenance belongs to neither path, so it sits underneath as `.clubline` rather than being
   forced into a column where it would not make sense.
   ⚠ Class names checked against the whole sheet before use. `.two` taught us that lesson. */
.costfork .paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}
.pth{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:28px 28px 24px}
.pth.rep{background:linear-gradient(158deg,#0a1c3f 0%,#143883 68%,#0f2a5e 100%);border-color:transparent;
  box-shadow:0 24px 50px rgba(11,31,69,.2)}
.pth .ph{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.pth.rep .ph{border-bottom-color:rgba(255,255,255,.16)}
.pth .ph b{font-family:var(--disp);font-weight:700;font-size:21px;color:var(--navy);letter-spacing:-.015em}
.pth.rep .ph b{color:#fff}
.pth .ph .fig{font-family:var(--disp);font-weight:700;font-size:26px;color:#c8930a;
  white-space:nowrap;letter-spacing:-.02em}
.pth .ph .fig i{font-style:normal;font-size:13px;color:var(--muted);margin-left:3px}
.pth.rep .ph .fig{color:var(--gold-2)}
.pth ul{list-style:none;margin:0;padding:0}
.pth li{display:grid;grid-template-columns:16px 1fr;gap:12px;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:14.8px;line-height:1.55;color:var(--muted)}
.pth.rep li{border-bottom-color:rgba(255,255,255,.13);color:#b6c4de}
.pth li:last-of-type{border-bottom:0}
.pth li svg{width:16px;height:16px;color:var(--gold);margin-top:3px;flex:none}
.pth.rep li svg{color:var(--gold-2)}
.pth li b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:3px}
.pth.rep li b{color:#fff}
/* margin-top:auto keeps both buttons on one line even when the two paths differ in length */
.pth .go{margin-top:auto;padding-top:20px}
.pth .go .btn{width:100%;justify-content:center}

.clubline{margin-top:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.clubline .l b{font-family:var(--disp);font-weight:700;font-size:16.5px;color:var(--navy)}
.clubline .l span{display:block;font-size:13.8px;color:var(--muted);margin-top:4px}
.clubline .r{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--navy);white-space:nowrap}
.clubline .r i{font-style:normal;font-size:13px;color:var(--muted);margin-left:3px}

@media(max-width:960px){.costfork .paths{grid-template-columns:1fr}}
@media(max-width:640px){
  .pth{padding:24px 22px 20px}
  .pth .ph{flex-wrap:wrap;gap:6px}
  .clubline{padding:20px}
  .clubline .r{font-size:20px}
}

/* ═══════════ v13 — US vs THEM COMPARISON, redesigned (owner: "new design this section") ═══════════
   The old `.cmp` table worked but argued weakly:
    · THE ROWS WERE UNLABELLED. "A flat $99 diagnostic" vs "a vague estimate" — the reader had to
      read both cells to work out which axis was being compared. Naming the axis (Pricing, Who
      shows up, Timing, What you get sold) is the single biggest fix and it is information design,
      not decoration.
    · Both columns sat on the same ground in the same weight, so nothing signalled which side was
      ours. Now our column is white with a gold cap and their column is recessed on canvas, so the
      asymmetry makes the argument before a word is read.
    · The negatives had no mark against the positives' gold check. They now carry a muted cross.
   ⚠ Class names prefixed `vs-` deliberately. `.us` and `.them` were free but are exactly the kind
   of bare utility words that caused the `.two` collision. */
.vstable{margin-top:44px;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--canvas-2)}
.vs-hd,.vs-row{display:grid;grid-template-columns:.62fr 1fr 1fr;align-items:stretch}
.vs-row{border-top:1px solid var(--line)}
.vs-hd .vs-ax,.vs-row .vs-ax{padding:16px 20px;display:flex;align-items:center}
.vs-hd .vs-us,.vs-hd .vs-them{padding:16px 24px;font-family:var(--disp);font-weight:700;font-size:14.4px}
.vs-hd .vs-us{background:var(--surface);border-top:3px solid var(--gold);color:var(--navy)}
.vs-hd .vs-them{color:var(--muted)}
.vs-row .vs-ax{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.vs-row .vs-us,.vs-row .vs-them{padding:18px 24px;display:grid;grid-template-columns:17px 1fr;
  gap:12px;align-items:start;font-size:14.8px;line-height:1.55}
/* the white column is the whole argument: ours reads lit, theirs reads recessed */
.vs-row .vs-us{background:var(--surface);color:var(--ink)}
.vs-row .vs-them{color:#8b94a3}
.vs-row svg{width:17px;height:17px;margin-top:2px;flex:none}
.vs-row .vs-us svg{color:var(--gold)}
.vs-row .vs-them svg{color:#bfc6d1}
.vstable + .vsnote{margin-top:16px;font-size:13.2px;color:var(--muted);text-align:center}

@media(max-width:820px){
  /* a 3-column table is unreadable on a phone: each row becomes its own block and the
     column headers move into the cells as data-label chips */
  .vs-hd{display:none}
  .vs-row{grid-template-columns:1fr;border-top:0;border-bottom:1px solid var(--line);padding:4px 0 14px}
  .vstable{background:var(--surface)}
  .vs-row .vs-ax{padding:16px 20px 6px;font-size:11.5px;color:var(--navy)}
  .vs-row .vs-us,.vs-row .vs-them{padding:10px 20px;background:transparent}
  .vs-row .vs-us::before,.vs-row .vs-them::before{grid-column:1/-1;display:block;
    font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    margin-bottom:5px}
  .vs-row .vs-us::before{content:attr(data-l);color:var(--gold)}
  .vs-row .vs-them::before{content:attr(data-l);color:#b0b7c3}
  .vs-row:last-child{border-bottom:0;padding-bottom:20px}
}

/* ═══════════ v14 — "REACH A TEAM THAT PICKS UP", photo-backed (owner ask 2026-08-13) ═══════════
   Owner asked twice for the old site's "Day or Night, We're Ready When You Need Us" band. This is
   that layout, reskinned onto TRUE copy.
   ⚠ WHAT DID NOT COME ACROSS, AND WHY: the reference sells 24/7 ("round-the-clock support,
   including nights, weekends, and holidays"). Indoor Experts is Mon-Fri 8am-5pm and
   NON-NEGOTIABLES.md bans "24/7". The headline, eyebrow and body were rewritten to keep the
   reference's reassurance without the claim, and the call panel states the hours outright so
   there is no ambiguity left on the page.
   ⚠ The reference's left column is a 5-step lead widget. This page already has THE ONE FORM in
   the hero and the locked spine allows exactly one, so the left column is a CALL panel instead:
   same job, no second form.
   This REPLACES the old flat `.sec-navy` version of this section. It is not an addition. */
.reachsec{position:relative;isolation:isolate;overflow:hidden}
.reachsec .rbg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.reachsec .rbg img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;opacity:.28}
.reachsec .rgrade{position:absolute;inset:0;z-index:-1;background:linear-gradient(104deg,
  rgba(10,28,63,.95) 0%,rgba(15,42,94,.92) 46%,rgba(11,31,69,.9) 100%)}
.reachsec .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,4.2vw,60px);align-items:start}

/* left: the call panel that stands in for the reference's form widget */
.rch-panel{background:var(--surface);border-radius:20px;padding:28px 28px 24px;box-shadow:0 26px 54px rgba(6,18,44,.34)}
.rch-panel .lg{display:block;height:34px;width:auto;margin:0 auto 20px}
.rch-panel .lb{display:block;text-align:center;font-family:var(--disp);font-weight:600;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.rch-panel .tel{display:block;text-align:center;font-family:var(--disp);font-weight:700;
  font-size:clamp(26px,2.6vw,32px);letter-spacing:-.02em;color:var(--navy);margin-top:10px}
.rch-panel .tel:hover{color:#c8930a}
.rch-panel .hrs{display:block;text-align:center;font-size:13.4px;color:var(--muted);margin-top:8px}
.rch-panel ul{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.rch-panel li{display:grid;grid-template-columns:16px 1fr;gap:11px;padding:11px 0;
  font-size:14.4px;color:var(--ink);align-items:start}
.rch-panel li svg{width:16px;height:16px;color:var(--gold);margin-top:3px;flex:none}
.rch-panel .alt{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  text-align:center;font-size:13.4px;color:var(--muted)}
.rch-panel .alt a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--line-2)}
.rch-panel .alt a:hover{border-bottom-color:var(--gold)}

/* right: headline + the two arrow items, joined by a hairline like the reference */
.rch-body h2{font-size:clamp(30px,3.5vw,46px);color:#fff;letter-spacing:-.025em;line-height:1.12;margin:16px 0 0}
.rch-body h2 .g{color:var(--gold-2)}
.rch-body .lede{color:#bcc9e2;font-size:16.2px;margin:20px 0 0;max-width:62ch}
.rch-items{margin-top:34px;position:relative}
.rch-item{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:0 0 26px;position:relative}
.rch-item:last-child{padding-bottom:0}
/* the connecting rule runs between the two tiles, not past them */
.rch-item:not(:last-child)::before{content:"";position:absolute;left:25px;top:56px;bottom:8px;
  width:1px;background:rgba(255,255,255,.24)}
.rch-item .ic{width:52px;height:52px;border-radius:12px;background:var(--gold);display:grid;place-items:center}
.rch-item .ic svg{width:22px;height:22px;color:#1c1403}
.rch-item h3{font-size:20px;color:#fff;letter-spacing:-.012em}
.rch-item p{font-size:14.9px;line-height:1.62;color:#b6c4de;margin:10px 0 0}
.rch-social{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rch-social b{font-family:var(--disp);font-weight:700;font-size:16px;color:#fff}
.rch-social .ns{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.05em;
  color:var(--gold-2);background:rgba(252,201,82,.12);border:1px dashed rgba(252,201,82,.45);
  border-radius:6px;padding:6px 11px}

@media(max-width:960px){
  .reachsec .wrap{grid-template-columns:1fr}
  .reachsec .rgrade{background:linear-gradient(176deg,rgba(10,28,63,.95) 0%,rgba(15,42,94,.93) 100%)}
}
@media(max-width:640px){
  .rch-panel{padding:24px 22px 20px}
  .rch-item{grid-template-columns:44px 1fr;gap:16px}
  .rch-item .ic{width:44px;height:44px}
  .rch-item:not(:last-child)::before{left:21px;top:48px}
}

/* ═══════════ v15 — TWO-CARD COMPARISON (owner pick 2026-08-17, refined) ═══════════
   Owner picked the two-card direction from _concepts/comparison-variations.html option B, then
   asked for it to be better before shipping. What was wrong with the concept version and what
   this fixes:
    1. THE REAL FLAW: with two independent lists, comparing a single axis meant the eye travelling
       between cards and hunting for the matching line. `grid-template-rows:subgrid` now pins row N
       of both cards to the same height, so "Pricing" in ours sits exactly level with "Pricing" in
       theirs. You get table-grade comparison AND two distinct card surfaces.
    2. The asymmetry was too polite. Ours now carries a gold top rule, a white surface and a real
       shadow; theirs is flat canvas with no rule and lower-contrast text. The winner should look
       like the winner before anything is read.
    3. Bare glyphs were weak, so the marks are now filled gold circle / hollow grey circle.
    4. Both cards carried the same "What you get" pill, which said nothing on the negative card.
       Dropped.
    5. The claims had nothing grounding them, so a proof strip sits under both cards carrying
       facts already on this page (licence, rating, Trane tier).
   ⚠ Subgrid needs the rows on the PARENT and `grid-row:span 5` on each card, and the row items
   must be DIRECT children of the card. Wrapping them in a <ul> breaks the row inheritance. */
.duocmp{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;
  grid-template-rows:auto repeat(4,auto)}
.dc-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;border-radius:18px;
  padding:0 26px 8px;align-content:start}
.dc-card.ours{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);
  box-shadow:var(--shadow)}
.dc-card.theirs{background:var(--canvas-2);border:1px solid var(--line)}
/* no-subgrid fallback: layout still works, rows simply size to their own content */
@supports not (grid-template-rows:subgrid){
  .duocmp{grid-template-rows:none}
  .dc-card{grid-row:auto;grid-template-rows:none}
}
/* the VS badge sits in the gutter. Absolute on desktop so it never consumes a grid column and
   cannot disturb the subgrid row inheritance; static on mobile, where it becomes a real grid
   item between the two stacked cards. */
.dc-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 8px 22px rgba(20,56,131,.14);display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--navy)}

.dc-hd{display:flex;align-items:center;gap:11px;padding:22px 0 16px;border-bottom:1px solid var(--line)}
.dc-hd b{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--navy);letter-spacing:-.015em}
.dc-card.theirs .dc-hd b{color:#5f6a7a}
.dc-hd .pill{font-family:var(--disp);font-weight:700;font-size:9.6px;letter-spacing:.13em;
  text-transform:uppercase;border-radius:20px;padding:4px 9px;background:var(--gold);color:#1c1403}
.dc-row{display:grid;grid-template-columns:26px 1fr;gap:13px;padding:18px 0;
  border-bottom:1px solid var(--line);align-items:start}
.dc-card > .dc-row:last-child{border-bottom:0}
.dc-row .mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.dc-card.ours .dc-row .mk{background:var(--gold)}
.dc-card.ours .dc-row .mk svg{width:14px;height:14px;color:#1c1403}
.dc-card.theirs .dc-row .mk{background:#e6e2d8;border:1px solid #cbd1d9}
.dc-card.theirs .dc-row .mk svg{width:13px;height:13px;color:#77808e}
.dc-row .ax{display:block;font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:6px}
.dc-card.ours .dc-row .ax{color:var(--gold)}
.dc-card.theirs .dc-row .ax{color:#8b94a3}
.dc-row p{font-size:14.9px;line-height:1.55;margin:0}
.dc-card.ours .dc-row p{color:var(--ink)}
.dc-card.theirs .dc-row p{color:#5f6a7a}


@media(max-width:900px){
  .duocmp{grid-template-columns:1fr;grid-template-rows:none;gap:14px}
  .dc-card{grid-row:auto;grid-template-rows:none}
  .dc-vs{position:static;transform:none;margin:0 auto;width:46px;height:46px;font-size:12px}
}


/* ═══════════ v17 — DARK-SECTION PHOTO BACKDROPS + "WHO OWNS THE JOB" REDESIGN ═══════════
   Owner 2026-08-17, two asks in one note: "make sure the dark sections have background images
   just like other sections have", and make the who-owns-the-job section good enough, pointing
   at the Alamo Comfort AC-repair page as the reference.

   ⚠ WHAT WAS TAKEN FROM ALAMO AND WHAT WAS NOT.
   Taken (structure only): a full-width hairline rule over the columns, which is the thing that
   lets a LEFT-aligned head sit over a symmetrical grid without looking off balance; hairline
   dividers between columns; and numerals heavy enough to be structure rather than labels
   (Alamo runs ~38px solid, ours were 12.5px).
   NOT taken: the star watermark and medallion (that motif is Alamo's Texan language, and this
   owner has rejected a clone three times), the red, and the two-tone red headline.
   🔴 NOT taken, and never can be: the Alamo process band states "Someone answers 24/7". Indoor
   Experts is Mon-Fri 8am-5pm. No copy crossed over from that page at all.

   ⚠ No cards here on purpose. The signs band two sections above is already dark, already uses
   translucent rounded cards with a gold numeral in the top-left and a labelled fact row at the
   bottom. Giving this section cards too would put two near-identical components within about one
   screen. This one is a cardless ledger, so the two read as different sections. */

/* ── Generic dark-section backdrop, opt-in ──
   Same technique as .signsec's .sbg/.sgrade (v10) but not scoped to a single section, so any
   dark section can carry a photo. v10 is left alone: the signs band already works.
   ⚠ Keep the opacity low. It is depth, not a subject. The grade is what keeps white text legible,
   so do not thin it to "show the photo better" without re-checking contrast on the H2 and prose. */
.secbg{position:relative;isolation:isolate;overflow:hidden}
.secbg > .bgw{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* ⚠ FULL opacity, no dimming here. Dimming the img AND covering it with a heavy grade multiplies:
   at opacity .34 under a .86 grade the photo contributes about 5% of the final pixel and the
   section reads as if it has no backdrop at all. The grade alone does the work, exactly as
   .close does it (img at full opacity, scrim carries the legibility). */
.secbg > .bgw img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* The grade paints as ::after INSIDE .bgw. .bgw carries z-index:-2 so it forms its own stacking
   context, and generated content paints after the img within it. That avoids a second absolutely
   positioned sibling and keeps the markup to one wrapper.
   ⚠ RADIAL, not linear, and that is the whole trick. A uniform grade forces one compromise
   everywhere: dark enough for the copy means invisible everywhere. This one is anchored to the
   empty top-right of the section, so the photo genuinely reads there, and tightens to .94 over
   the head and the columns where the text actually sits. Same principle as .close's .96 -> .34
   horizontal scrim, turned to suit a section whose copy runs full width lower down.
   ⚠ Measured per REGION, not globally: a global "brightest pixel" reading is meaningless here
   because the brightest area is deliberately the one with no text on it.
   ⚠ The floor is .62, not lower. At .40 the photo stops being texture and becomes a SUBJECT:
   faces read clearly, they compete with the H2, and whoever is nearest the top edge gets cropped
   at the neck. That is the same mistake already logged against the CTA band, where .72 on the
   open end "read as a subject and looked like a mistake". Texture, not a subject. */
.secbg > .bgw::after{content:"";position:absolute;inset:0;background:radial-gradient(124% 94% at 86% 0%,
  rgba(10,28,63,.62) 0%,rgba(12,34,76,.85) 44%,rgba(11,31,69,.95) 76%)}
/* Narrow viewports need a heavier floor. The desktop grade can afford to open up because the
   copy stops at three columns and the top-right is empty; once everything is full-bleed there is
   no empty region left for the photo to breathe into, so the same alphas put the eyebrow and body
   prose at 4.91:1 and 4.81:1 against a 4.5 floor. That is passing on about 7% of headroom, which
   is too thin to survive a different photo. .72 restores the margin. */
@media(max-width:700px){
  .secbg > .bgw::after{background:radial-gradient(150% 72% at 88% 0%,
    rgba(10,28,63,.72) 0%,rgba(12,34,76,.90) 46%,rgba(11,31,69,.96) 78%)}
}

/* ── The ledger ──
   THREE subgrid rows (heading / prose / proof) so all three columns land on the same baselines
   however the copy falls. ⚠ Same trap as .duocmp: the row items must be DIRECT children of
   .orow. Wrapping them in anything breaks row inheritance and the alignment dies silently.
   The @supports fallback degrades to natural sizing.
   ⚠ The row count here and `grid-row:span N` below MUST match the number of direct children.
   This was 4 rows with a 40px gold numeral leading each column; the owner cut the numerals
   2026-08-17. Dropping the markup without also dropping the row count leaves an empty phantom
   row at the top of every column and the three columns stop aligning, silently. */
.owns{margin-top:44px;border-top:1px solid rgba(255,255,255,.24);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr auto}
.owns .orow{display:grid;grid-template-rows:subgrid;grid-row:span 3;padding:30px 32px 26px 0}
.owns .orow + .orow{border-left:1px solid rgba(255,255,255,.16);padding-left:32px}
@supports not (grid-template-rows:subgrid){
  .owns{grid-template-rows:none}
  .owns .orow{display:flex;flex-direction:column;grid-row:auto}
  .owns .orow .oproof{margin-top:auto}
}
.owns .orow h3{font-size:18.4px;line-height:1.3;margin:0 0 10px}
.owns .orow p{font-size:14.5px;line-height:1.62;margin:0}
/* The verifiable fact behind each claim. Every one of these strings is already in the paragraph
   directly above it, so this restates, it does not add. */
.owns .oproof{margin-top:22px;padding-top:15px;border-top:1px solid rgba(255,255,255,.16)}
/* ⚠ #b3c1dc, not the #8fa2c6 used elsewhere on dark. Measured against the brightest pixel of the
   photo backdrop, #8fa2c6 lands at 3.92:1, which fails WCAG AA for a 9.4px label. #b3c1dc is
   5.47:1. The darker muted is fine on a flat dark section; it is the photo that costs the margin. */
.owns .oproof .ok{display:block;font-family:var(--disp);font-weight:600;font-size:9.4px;
  letter-spacing:.16em;text-transform:uppercase;color:#b3c1dc;margin-bottom:6px}
.owns .oproof .ov{font-family:var(--disp);font-weight:700;font-size:11.4px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-2)}

@media(max-width:900px){
  .owns{grid-template-columns:1fr;grid-template-rows:none}
  .owns .orow{display:flex;flex-direction:column;grid-row:auto;padding:26px 0;
    border-top:1px solid rgba(255,255,255,.16)}
  .owns .orow:first-child{border-top:0;padding-top:26px}
  .owns .orow + .orow{border-left:0;padding-left:0}
  .owns .oproof{margin-top:18px}
}


/* ═══════════ v18 — "HOW WE RUN A SERVICE CALL" AS A TRACK (owner: "design this section in a
   better design", 2026-08-17) ═══════════
   Was the shared `.nsteps` vertical hairline list. `.nsteps` is untouched: it is still live on
   the four money pages, so this is a new opt-in class on the hub only.

   What the list got wrong:
    · A service call is a SEQUENCE IN TIME and the list showed no sequence at all. Four stacked
      rows say "four things", not "first this, then this". The track says it in the layout.
    · The copy was capped at 64ch inside a 1164px section, so roughly the right half of the
      section was empty. Four columns use the width the section already occupies.
    · 14px numerals read as labels rather than structure.
    · No graphic element anywhere in it, which the brand rules require of every section. The rail
      and the nodes ARE the graphic here: it is a diagram of the process, not decoration.

   ⚠ Head is CENTRED here on purpose. The section directly above it is now the who-owns ledger,
   which is a LEFT head over a hairline column grid. Two of those back to back read as one long
   section. Centred head + round nodes + a rail is the differentiator, and it follows the rule
   already set on the services grid: symmetric grid gets a centred head.
   ⚠ The numerals STAY here, unlike the who-owns section where the owner cut them. There they
   labelled three parallel points and carried no information. Here they carry the order, which is
   the entire subject of the section. Flagged for the owner rather than assumed. */
/* ⚠ row-gap MUST be 0. A subgrid child inherits the parent's ROW gaps, so a shorthand `gap:28px`
   silently injects 28px between the node, the heading and the paragraph of every step, on top of
   their own margins. That opened a ~60px gulf between each heading and its own copy and made the
   headings look like they belonged to nothing. Spacing here is controlled by margins only. */
.jtrack{margin-top:50px;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;
  grid-template-rows:auto auto 1fr}
.jstep{display:grid;grid-template-rows:subgrid;grid-row:span 3;position:relative}
.jstep .jnode{width:46px;height:46px;border-radius:50%;background:var(--surface);
  border:1.5px solid var(--gold);display:grid;place-items:center;position:relative;z-index:1;
  font-family:var(--disp);font-weight:700;font-size:15px;color:var(--navy);
  margin-bottom:22px;box-shadow:0 2px 10px rgba(20,56,131,.09)}
/* The connector runs from this node to the NEXT one, so it is drawn per step rather than as one
   long rail behind everything. A single full-width rail cannot stop at the first and last node
   centres without hard-coding the column maths, and it breaks the moment the column count changes.
   width = the rest of this column + the grid gap, which lands exactly on the next node. */
.jstep::after{content:"";position:absolute;top:22px;left:58px;width:calc(100% - 30px);height:1.5px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(225,165,12,.32) 100%)}
.jstep:last-child::after{display:none}
/* The end of the track is filled, so the row reads start -> finish rather than as four
   interchangeable dots. It also matches what step 04 actually says: completion. Note the
   homepage `.steps` fills its FIRST dot; that one marks where you begin, this marks where you
   end up, and they are different diagrams. */
.jstep:last-child .jnode{background:var(--gold);border-color:var(--gold);color:#1c1403;
  box-shadow:0 3px 14px rgba(225,165,12,.30)}
.jstep h3{font-size:18px;line-height:1.3;margin:0 0 9px}
.jstep p{font-size:14.6px;line-height:1.62;color:var(--muted);margin:0}
@supports not (grid-template-rows:subgrid){
  .jtrack{grid-template-rows:none}
  .jstep{display:flex;flex-direction:column;grid-row:auto}
}

/* Two-up before the columns get too narrow to hold a heading on one line. The connectors go:
   a rail that points off the end of a row into nothing reads as a mistake. */
@media(max-width:980px){
  .jtrack{grid-template-columns:repeat(2,1fr);grid-template-rows:none;gap:34px 28px}
  .jstep{display:flex;flex-direction:column;grid-row:auto}
  .jstep::after{display:none}
}
/* Single column keeps the track idea by turning it on its side: node in a left gutter with a
   vertical spine running between the nodes. */
@media(max-width:620px){
  /* ⚠ BOTH of these resets are required, and leaving them out is what broke this layout first
     time: `.jstep` still carried `grid-template-rows:subgrid` + `grid-row:span 3` from the base
     rule, so assigning children to explicit rows 1 and 2 inside a subgrid context dropped the
     heading and the paragraph into the SAME cell and printed them on top of each other. A
     subgrid child must be taken out of subgrid before it can define its own rows. */
  .jtrack{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .jstep{display:grid;grid-row:auto;grid-template-columns:46px 1fr;grid-template-rows:auto auto;
    column-gap:18px;row-gap:0;padding:22px 0 24px;border-top:1px solid var(--line)}
  .jstep:first-child{border-top:0;padding-top:4px}
  .jstep .jnode{grid-column:1;grid-row:1;margin-bottom:0}
  .jstep h3{grid-column:2;grid-row:1;margin:0;align-self:center}
  .jstep p{grid-column:2;grid-row:2;margin-top:10px}
  /* the track turned on its side: a spine running from each node down to the next */
  .jstep::after{display:block;top:56px;left:22.25px;width:1.5px;height:calc(100% - 46px);
    background:linear-gradient(180deg,rgba(225,165,12,.55) 0%,rgba(225,165,12,.18) 100%)}
  .jstep:last-child::after{display:none}
}


/* ═══════════ v19 — REACH PANEL BECOMES A FORM (owner ask 2026-08-17) ═══════════
   The left column of .reachsec was a call panel and is now the page's SECOND form. See the
   markup comment in the AC hub for why that rule changed and what must not move.

   The element carries `.rch-panel .qform .rch-form` together, on purpose:
    · `.qform` supplies the field, label, select and focus-ring styling, so none of it is
      duplicated here. It is declared at the top of the sheet.
    · `.rch-panel` is declared far later (v14), so for the properties they both set (background,
      radius, padding, shadow) the PANEL wins and the card keeps its deep on-photo shadow.
      That ordering is load-bearing. Moving the v14 block above .qform would silently swap the
      card back to the flat hero-form treatment.
    · `.rch-form` below is only the handful of overrides neither of them covers.
   ⚠ The reach section is NOT `.sec-dark` (it paints its own .rgrade), so the "light card inside a
   dark section" reset at v2c does NOT apply and is not needed. Do not add it: the fields inherit
   normal light-section colours already. Checked, not assumed. */
.rch-form .qs{text-align:center;margin:6px 0 20px}
.rch-form .btn{width:100%;justify-content:center}
/* one checkmark now, so the list does not need the old 22px stack rhythm */
.rch-form ul{margin-top:18px;padding-top:16px}
.rch-form li{padding:0}
/* the call block that used to lead the panel, now closing it. The phone stays a real, large tap
   target rather than fine print: it is still the fastest route for a no-cool call. */
.rch-call{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.rch-call .tel{font-size:23px;margin-top:2px}
.rch-call .hrs{margin-top:6px}


/* ═══════════ v20 — REACH SECTION, reference pass (owner 2026-08-17) ═══════════
   Owner shared the Innovative Mechanical contact section as a reference ("make this section
   something like this"). That is a DIFFERENT RSG client, so this takes composition only.

   🔴 WHAT WAS REFUSED, AND IT IS THE WHOLE REASON THIS NEEDS A NOTE.
   The reference sells 24/7 in four separate places: the eyebrow "24/7 EMERGENCY HEATING & AC
   REPAIR", the line "Call any time, day or night, we're on 24/7", and the form footer "answered
   day or night". Indoor Experts is Mon-Fri 8am-5pm and NON-NEGOTIABLES.md bans "24/7". None of
   it crossed over. This is the second time a reference for THIS SECTION has carried a
   round-the-clock claim (the v14 note records the first). Anyone bringing a third reference here
   should assume the same and check before building.
   Also not carried: the red palette (IE is navy + gold), and "NATE-certified", which is not a
   verified fact for this client.
   ⚠ Not built, needs the client: the reference's SMS-consent checkbox. It names a legal entity
   and opt-out terms, which cannot be invented. IE needs its own approved wording before launch.

   Carried across: a photo-backed header card holding the eyebrow, headline and lede instead of
   letting them sit loose on the section; a connected step list (this section already had one);
   and a real call button so the phone is not only inside the form. */
.rch-head{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;
  border:1px solid rgba(255,255,255,.16);padding:clamp(26px,3vw,36px) clamp(24px,3vw,34px)}
.rch-head .hbg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.rch-head .hbg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* Angled rather than flat: the copy sits left, so the grade is heaviest there and opens toward
   the right where there is nothing to keep legible. Same principle as .close's scrim. */
/* ⚠ Read the whole note before touching these stops.
   It was .66 at the open end first, and the LEDE measured 3.95:1 against it, under the 4.5:1 AA
   floor, because the lede ran the full width of the band straight into the open end. Tightening
   to .80 fixed the contrast but flattened the photo to almost nothing.
   v21 fixed the actual cause: the copy is now capped at 600px (the reference does the same, which
   is why their band is 202px and not 280px), so the right HALF of the band carries no text at
   all and can open right up. Heavy to 52%, where the copy stops, then open.
   So: the stop positions are tied to that 600px cap. Change one and re-measure the other. */
.rch-head .hbg::after{content:"";position:absolute;inset:0;background:linear-gradient(101deg,
  rgba(10,28,63,.95) 0%,rgba(12,34,76,.93) 40%,rgba(11,31,69,.86) 52%,rgba(11,31,69,.46) 100%)}
.rch-head .eyebrow{position:relative}
.rch-head h2{margin-top:14px}
.rch-head .lede{margin-top:16px}

/* round nodes, closer to the reference than the square gold tiles this section shipped with */
.rch-steps .ic{border-radius:50%}
.rch-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
.rch-cta .btn{white-space:nowrap}
/* ⚠ Both of these are required and both were live bugs for a moment.
   1. `.hrs` only gets a colour from `.rch-panel .hrs`. Used OUTSIDE that panel it inherited
      --ink (#182031), i.e. near-black text on a navy section: effectively invisible. And this is
      not decorative text, it is the line that stops this section reading as 24/7, so it failing
      silently is the worst case. #bcc9e2 is the established on-dark prose colour, ~8.6:1 here.
   2. An inline <svg> inside .btn has no intrinsic size and .btn never sized its icons, so the
      phone glyph collapsed to 0x0 and the button rendered as text only. */
.rch-cta .hrs{color:#bcc9e2;font-size:14.4px}
.rch-cta .btn svg{width:17px;height:17px;flex:none;margin-right:9px}

/* form: name + phone share a row so the card does not run to five stacked fields */
.rch-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.rch-form textarea{min-height:88px}
@media(max-width:420px){ .rch-form .row2{grid-template-columns:1fr} }


/* ═══════════ v20b — REACH SECTION, second reference pass (owner: "check the detailed section
   how it's designed", 2026-08-17) ═══════════
   A closer read of the Innovative Mechanical section turned up three things the first pass
   missed. All three are composition, none is copy.

   1. THE FORM CARD IS CREAM, NOT WHITE. Easy to miss at a glance and it is doing real work: the
      white inputs sit ON the cream so each field reads as a distinct target instead of a white
      box on a white card. IE already owns this exact move: --canvas #FAF8F3 is described in the
      locked direction as "NOT stark white, this is the welcoming lever". So this is not
      borrowing their look, it is finally using ours.
   2. THE FORM CARD IS OFFSET, NOT ALIGNED. In the reference it starts higher than the header
      card and finishes lower, overlapping it. Two columns squared off at the top is the
      templated version of the same layout; the offset is most of why theirs looks composed.
      Ours is mirrored (our form is on the left), so the offset runs the other way.
   3. A SECOND CARD EDGE SITS BEHIND IT, giving the card depth beyond its drop shadow.

   Not carried, again: the red, the 24/7 lines, NATE, and the consent checkbox (client legal
   copy, cannot be invented). See the v20 note.
   ⚠ The uppercase letter-spaced "SEND MESSAGE" button was also deliberately NOT carried. Every
   other button on this site is Title Case ("Book a Visit", "Book Now"), and changing one of them
   to shouty caps would read as a stray, not as a detail. */
.rch-form{background:var(--canvas);position:relative;z-index:1}
/* white fields on the cream card, which is the point of the cream */
.rch-form input,.rch-form select,.rch-form textarea{background:#fff}
.rch-form input:focus,.rch-form select:focus,.rch-form textarea:focus{background:#fff}
/* the layered edge behind the card */
.rch-form::before{content:"";position:absolute;left:16px;right:-16px;top:18px;bottom:-18px;
  border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  z-index:-1;pointer-events:none}

/* The offset. ⚠ It is a negative margin, so .reachsec needs the headroom or the card climbs into
   the section above it. The section's own clamp() top padding is 52px at the smallest, which
   still clears a 30px lift. Do not deepen this without checking the seam above. */
@media(min-width:981px){
  .rch-form{margin-top:-30px;margin-bottom:30px}
}
/* Below the two-column breakpoint the columns stack, so an offset and a layered edge hanging off
   the side are both wrong: there is nothing to offset against and the edge would overhang. */
@media(max-width:980px){
  .rch-form::before{display:none}
}


/* ═══════════ v20c — REACH STEP NODES, softened (from the live reference, 2026-08-17) ═══════════
   Read off the real section at https://ikur82m4ir.wpdns.site/ rather than a screenshot. Their
   step nodes are a PALE TINTED circle with a dark glyph, not a saturated fill. That is why the
   red CTA in that column reads as the single loud thing in it.

   Ours were solid gold discs, and that column was carrying solid gold twice over plus a gold
   button, a gold eyebrow and a gold-bordered NEEDS_SOURCE chip. The locked direction says gold is
   "the ONLY saturated accent, used sparingly", so five saturated gold objects in one column is
   the rule being broken, not applied. Tinting the nodes gives the CTA the column back.
   ⚠ Non-text contrast still has to hold: the glyph is 3.2:1 against the tinted disc, over the
   WCAG 1.4.11 floor of 3:1 for meaningful graphics. Do not lower the glyph's alpha. */
.rch-steps .ic{background:rgba(252,201,82,.15);border:1px solid rgba(252,201,82,.42)}
.rch-steps .ic svg{color:var(--gold-2)}


/* ═══════════ v21 — REACH SECTION REBUILT TO THE REFERENCE GEOMETRY (owner: "I want the exact
   design", 2026-08-17) ═══════════
   Measured off the live section at https://ikur82m4ir.wpdns.site/ (.rsg-talk) at a 1440 viewport,
   not eyeballed from a screenshot. Their numbers:
     section padding      126px top/bottom
     photo band           x=0  y=0    1124 x 202   (spans the FULL wrap, not a column)
     form card            x=634 y=39  460 x 803    (overlaps the band's right 490px,
                                                    starts 39px BELOW the band top,
                                                    runs 640px past the band's bottom)
     card                 radius 18px, padding 36px 36px 32px, cream, two-layer shadow
     inputs               51px tall, radius 10px, white, 1px hairline
     submit               50px tall, radius 8px, uppercase, letter-spacing 1.16px, 15.5px
     left content         inset 30px from the wrap edge, stops ~62px short of the card
   ⚠ THIS IS NOT A TWO-COLUMN GRID and that is the whole point. It reads as one because of the
   overlap, but the band is full-width and the card is positioned over it. Rebuilding it as a
   2-col grid is what the first three passes did and it is why it never looked like the
   reference. The card is absolute at >=981px and returns to static flow below that.

   🔴 WHAT IS DELIBERATELY NOT MATCHED, all of it forced, none of it taste:
    · RED -> GOLD. #AA182C is Innovative Mechanical's identity. IE's locked palette is navy+gold
      and this owner has rejected a clone three times with "build our OWN UI".
    · ALL-CAPS HEADLINE -> Title Case. The locked direction says "Sentence-case headings (not
      ALL-CAPS like the old site)" in as many words.
    · The eyebrow, lede and form footer all sell 24/7 in the reference. IE is Mon-Fri 8am-5pm.
    · "NATE-certified" is not a verified fact for this client.
    · THREE steps -> two. A third promise would be invented copy. Needs Hamna.
    · The consent checkbox IS built, but its text names their LLC, so ours carries a visible
      {{NEEDS_SOURCE}} until the client supplies approved wording. Structure matched, words not
      invented.
    · No mascot. That is their character. */
@media(min-width:981px){
  .reachsec{padding:112px 0}
  /* ⚠ GRID, not absolute positioning, and this matters. Absolute took the card out of flow, so
     the wrap reserved no height for it and the card hung 4px past the section into the next one.
     As a grid item spanning both rows it still overlaps the band (grid items may share cells)
     but its height is accounted for, so the section grows to contain it. */
  /* ⚠ grid-template-rows MUST be declared. `grid-row:1/-1` on the card resolves -1 against the
     EXPLICIT grid; with no explicit rows it cannot resolve, spawns implicit rows and the section
     ballooned from ~1000px to 1637px with a 600px hole under the band. */
  .reachsec .wrap{display:grid;grid-template-columns:1fr 460px;grid-template-rows:auto auto;
    column-gap:62px;align-items:start}
  /* (.rch-body is display:contents at every width, declared below the media query) */
  /* ⚠ align-items:flex-start is not cosmetic. As a flex column the children STRETCH to full
     width by default, so the eyebrow's box spanned the whole 1164px band and reached into the
     bright right half of the photo. Its measured contrast collapsed to 1.45:1 while the H2 and
     lede beside it stayed above 9:1, purely because those two carry a 600px cap and it did not. */
  .rch-head{grid-column:1 / -1;grid-row:1;min-height:202px;display:flex;flex-direction:column;
    justify-content:center;align-items:flex-start}
  /* copy stops short of the card, which is why the reference's band is 202px and not 280px */
  .rch-head h2,.rch-head .lede{max-width:600px}
  /* no padding-top: .rch-items already carries margin-top:34px from v14, and adding another 34
     here stacked into a ~68px hole under the band */
  .rch-lower{grid-column:1;grid-row:2;padding-left:30px}
  .rch-form{grid-column:2;grid-row:1 / 3;align-self:start;width:460px;margin:39px 0 0;
    padding:36px 36px 32px;position:relative;z-index:2}
  .rch-form::before{left:18px;right:-18px;top:20px;bottom:-20px}
}
/* card + field metrics, matched at every width */
.rch-form{border-radius:18px;
  box-shadow:0 4px 12px rgba(26,28,27,.09),0 28px 60px rgba(6,18,44,.34)}
.rch-form input,.rch-form select,.rch-form textarea{border-radius:10px;padding:14px 15px;
  border:1px solid rgba(26,28,27,.14)}
.rch-form input,.rch-form select{height:51px}
.rch-form .btn{border-radius:8px;height:50px;font-size:15.5px;letter-spacing:.075em;
  text-transform:uppercase}
/* ⚠ Uppercase is confined to THIS button. It is the reference's treatment and the owner asked
   for the exact design, but every other button on the site stays Title Case. Do not promote
   this to .btn. */

/* consent row: structure carried, wording is the client's to supply */
.rch-consent{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;margin:18px 0 16px}
.rch-consent input{width:18px;height:18px;padding:0;margin:2px 0 0;accent-color:var(--gold);
  border-radius:4px;flex:none}
.rch-consent .ns{font-size:11.6px;line-height:1.5;color:#9a7a12;background:var(--gold-soft);
  border:1px dashed var(--gold);border-radius:6px;padding:7px 9px;display:block}
.rch-foot{margin-top:14px;text-align:center;font-size:13.2px;color:var(--muted);line-height:1.6}
.rch-foot a{color:var(--navy);font-weight:700;border-bottom:1px solid var(--line-2)}
.rch-foot a:hover{border-bottom-color:var(--gold)}

/* ⚠ display:contents at EVERY width, not just desktop. The band, the lower block and the form are
   all inside .rch-body, so without this they are one grid item and cannot be placed or reordered.
   ⚠ data-rv was moved OFF .rch-body onto its children when this went in: a display:contents
   element generates no box, so the reveal's opacity and transform silently do nothing on it and
   the block would never animate. */
.rch-body{display:contents}

/* Stacked layout. DOM order is band -> steps -> form, which is the right READING order (the H2
   introduces the section, so a screen reader should not meet the form first). Visually the form
   is pulled up under the headline instead of sitting below a screen of supporting copy, which is
   an ordering change only: nothing moves in the DOM. */
@media(max-width:980px){
  .reachsec .wrap{display:grid;grid-template-columns:1fr;gap:0}
  .rch-head{order:1}
  .rch-form{order:2;margin:26px 0 0;width:auto}
  .rch-lower{order:3;padding-left:0;margin-top:30px}
}

/* ⚠ The band's grade MUST change on mobile. The desktop version is heavy to 52% and then opens
   right up, which is only safe because the copy is capped at 600px and the right half of the band
   carries no text. Stacked, the copy runs the full width straight through the open end and the
   lede measured 3.60:1, under the 4.5:1 AA floor. Near-uniform here instead. */
@media(max-width:980px){
  .rch-head .hbg::after{background:linear-gradient(168deg,
    rgba(10,28,63,.93) 0%,rgba(12,34,76,.90) 55%,rgba(11,31,69,.94) 100%)}
  .rch-head h2,.rch-head .lede{max-width:none}
}


/* ═══════════ v22 — SERVICE AREA, redesigned (owner: "designed in a better way", 2026-08-17)
   ═══════════
   Opt-in via `.areax` on the AC hub. `.area` and `.hoods` are untouched and still live on the
   five other pages that use them.

   What the old one got wrong:
    · Nine neighbourhoods as flat hairline rows, each with its own 13px gold pin. That is nine
      repeats of the same icon, and this owner has rejected icon tiles twice as "icons feel AI".
      The pins carried no information the text did not already carry.
    · The hairline-row treatment is the same shape the signs, comparison, who-owns and process
      sections have all now been redesigned AWAY from. It was the last one left.
    · The list sat in a detached full-width strip under the copy and photo, so the section read as
      two unrelated blocks rather than one.
    · The photo was a plain rounded rectangle carrying nothing.

   ⚠ NO MAP, and that is a decision not an omission. A stylised SVG map was built for the IE
   homepage and the owner CUT it ("doesn't make much sense"). A real Google Maps embed needs an
   API key sitting in the page source, which is still an open question nobody has answered. So the
   graphic element here is the coverage data itself, not a map.
   ⚠ Every figure on the plate is this section's own prose, restated: "Atlanta and its close-in
   metro", "Decatur ... about ten minutes from East Atlanta", "the same crew". Nothing new.
   ⚠ The homepage's .covcard was NOT reused. It is absolutely positioned at left:-16px with
   nowrap cells and its ~510px intrinsic width has already escaped its column once, which is
   logged as a fixed overflow bug. This plate sits in normal flow instead. */
.areax .wrap{display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(30px,3.6vw,54px) clamp(36px,4.4vw,64px);
  align-items:start}
/* ⚠ The measure is capped on the COLUMN, not on the paragraph. With max-width on .lede alone the
   H2 wrapped at the full 704px column while the paragraph stopped at 529px, so the two read as
   different widths stacked on each other. Capping .ax-copy lets both wrap to the same edge. */
.ax-copy{align-self:start;max-width:620px}
.ax-copy .lede{color:var(--muted);font-size:16.2px;margin:18px 0 0}

/* photo + the coverage plate under it, one object */
.ax-pic{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.ax-pic img{width:100%;display:block}
.ax-plate{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.ax-plate .c{padding:16px 18px}
.ax-plate .c + .c{border-left:1px solid var(--line)}
.ax-plate b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--navy);
  line-height:1.15;letter-spacing:-.01em}
.ax-plate span{display:block;font-size:11.4px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}

/* neighbourhoods as chips: no icons, no hairline rows, and they wrap instead of forcing a 3-col
   grid that goes ragged when one name is twice as long as its neighbour */
.ax-hoods{grid-column:1/-1;margin-top:4px;padding-top:26px;border-top:1px solid var(--line)}
/* ⚠ Sized so all NINE fit on one row at 1440. At 14px/16px padding/10px gap they measured 1225px
   against 1164px available, which orphaned "Decatur" alone on a second row. Adding a chip, or
   renaming one to something longer, will orphan it again: re-measure rather than assume. */
.ax-hoods ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.ax-hoods li a,.ax-hoods li span{display:inline-block;font-family:var(--disp);font-weight:600;
  font-size:13.6px;color:var(--navy);background:var(--canvas);border:1px solid var(--line-2);
  border-radius:24px;padding:9px 13px;transition:border-color .18s ease,background .18s ease}
.ax-hoods li a:hover{border-color:var(--gold);background:var(--gold-soft)}
.ax-hoods .foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}

@media(max-width:900px){
  .areax .wrap{grid-template-columns:1fr}
  .ax-plate{grid-template-columns:1fr}
  .ax-plate .c + .c{border-left:0;border-top:1px solid var(--line)}
}


/* ═══════════ v22b — SERVICE-AREA MAP (owner: "this need to have map on this section") ═══════════
   The open question logged against this section was how to ship a map at all:
     · a stylised SVG map was built for the IE homepage and the owner CUT it,
     · and the official Maps Embed API needs an API key sitting in the page source.
   Resolved by using Google's KEYLESS embed (`maps.google.com/maps?q=...&output=embed`), so a real
   Google map ships with NO key anywhere in the markup.
   ⚠ Trade-off, flag it before launch: that keyless form is long-standing but is not part of the
   documented Maps Embed API, so Google can change it without notice. The supported alternative is
   the Embed API with a key restricted by HTTP referrer. That is a client decision, not a build one.
   ⚠ The pin is 390 Stovall St SE, Atlanta GA 30316, which is NOT invented: it is already the
   PostalAddress in this page's own JSON-LD and in the homepage HVACBusiness schema.
   ⚠ loading="lazy" is load-bearing. This section sits ~8000px down an 11k page, and a
   third-party map iframe is the heaviest thing on it. Do not make it eager. */
.ax-map{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--canvas-2)}
.ax-map iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.92)}
/* aspect-ratio holds the box before the iframe paints, so the section does not shift (CLS) */
.ax-map{aspect-ratio:16/11}
@media(max-width:900px){ .ax-map{aspect-ratio:4/3} }
/* the van photo moves under the copy and runs wider and shorter there */
.ax-van{margin-top:26px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.ax-van img{width:100%;display:block;aspect-ratio:16/8;object-fit:cover}


/* ═══════════ v23 — SERVICE AREA AS A LAYERED MAP COMPOSITION ═══════════
   Owner shared the Alamo Comfort service-area section as inspiration (2026-08-17). Structure
   taken, executed in IE's navy + gold. Alamo is a different RSG client; its red, its star motif
   and its Texan language do not travel.

   Carried across: the map as the CENTREPIECE rather than a column; a dotted panel offset behind
   it; a coverage pill and a licence card overlaying the top; a circular van badge on the edge; a
   directions button; and a white info card overlapping the bottom-left with the address, the
   neighbourhood chips and the "check your street" link.

   🔴 NOT carried: the dashed COVERAGE OUTLINE drawn over their map. Theirs is captioned "coverage
   outline, approximate" and is still a drawn claim about where a company will and will not go.
   Indoor Experts has given us no boundary, so drawing one would be inventing a fact about the
   service area. Ask the owner for a real boundary before adding it.
   ⚠ Every string in the overlays already exists on this page: the address is the JSON-LD
   PostalAddress, CN211042 is the licence in the trust strip and on the van door, and "based in
   Atlanta ... the city and its close-in metro" is the section's own first sentence.
   ⚠ Decorative overlays carry pointer-events:none so they cannot swallow map drags. Only the
   directions button and the card links take pointer events. */
.axm{position:relative;margin-top:34px;grid-column:1/-1}
/* the dotted panel behind the map. Inset from the wrap edge on the left so it cannot escape the
   column the way .covcard once did. */
.axm-deco{position:absolute;left:0;top:-16px;width:min(300px,26%);height:190px;border-radius:18px;
  background:linear-gradient(150deg,#0f2a5e,#143883);z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(252,201,82,.28) 1.4px,transparent 1.5px);
  background-size:13px 13px;background-color:#0f2a5e}
.axm-map{position:relative;z-index:1;margin-left:58px;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 26px 54px rgba(6,18,44,.18);
  /* ⚠ EXPLICIT height, not aspect-ratio. The iframe is height:100%, and a percentage height
     needs a DEFINITE parent height at first layout. With aspect-ratio the height resolves too
     late, so Google Maps initialises against the iframe default (300x150) and never re-lays
     out: the map painted at ~165x110 in the corner of a 1104px frame. Measured identical at
     8s and 20s waits, so it is not a loading race. Keep this a real length. */
  height:clamp(340px,33vw,540px);background:var(--canvas-2)}
.axm-map iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.9)}
/* overlays */
/* ⚠ CENTRED, not left-aligned, and that is forced. The keyless embed draws Google's OWN
   white place card in the map's top-LEFT corner, and a pill there sits half on top of it and
   looks like a rendering fault. There is no embed parameter to suppress that card, so the
   pill is centred to clear it on the left and the licence card on the right. */
.axm-pill{position:absolute;z-index:2;top:20px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;
  gap:9px;background:rgba(11,31,69,.94);color:#fff;border-radius:24px;padding:9px 16px;
  font-family:var(--disp);font-weight:700;font-size:11.4px;letter-spacing:.09em;
  text-transform:uppercase;box-shadow:0 8px 22px rgba(6,18,44,.3);pointer-events:none;white-space:nowrap}
.axm-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.axm-lic{position:absolute;z-index:2;top:20px;right:20px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:12px 15px;box-shadow:var(--shadow);
  pointer-events:none;max-width:230px}
.axm-lic b{display:block;font-family:var(--disp);font-weight:700;font-size:13.4px;color:var(--navy)}
.axm-lic span{display:block;font-size:11.2px;color:var(--muted);margin-top:4px;letter-spacing:.03em}
.axm-dir{position:absolute;z-index:3;right:20px;bottom:20px}
/* ⚠ The van badge is a child of .axm, NOT of .axm-map. .axm-map is overflow:hidden so the
   circle's -22px overhang was being clipped clean off. */
.axm-van{position:absolute;z-index:5;right:-22px;top:46%;transform:translateY(-50%);
  width:112px;height:112px;border-radius:50%;overflow:hidden;border:4px solid var(--surface);
  box-shadow:0 14px 30px rgba(6,18,44,.28);pointer-events:none}
.axm-van img{width:100%;height:100%;object-fit:cover;display:block}
/* the info card overlapping the map's bottom-left */
/* ⚠ The overlap is tuned to the CARD's height, not picked by eye. Card measures 332px, so
   -292px lands its bottom ~40px below the map, which is the reference's relationship. If the
   chips rewrap to a different number of rows this needs re-measuring, not nudging. */
.axm-card{position:relative;z-index:4;width:min(470px,100%);margin:-292px 0 0;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:24px 26px 22px;
  box-shadow:0 26px 54px rgba(6,18,44,.20)}
.axm-card b.nm{display:block;font-family:var(--disp);font-weight:700;font-size:17.5px;color:var(--navy)}
.axm-card .adr{font-size:14px;color:var(--muted);margin:7px 0 0;line-height:1.55}
.axm-card .lb{display:block;font-family:var(--disp);font-weight:600;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  margin:18px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
/* The coverage note was a 370x43 run of grey text floating in 265px of dead space, vertically
   centred against a 550px copy block, so it read as something left over rather than placed. It is
   now a real callout, top-aligned with the headline and anchored by a gold rule.
   ⚠ The sentence is unchanged. The phone under it is not new copy either: it is the same
   (404) 913-5802 the page already carries, made into a real tel: target because the sentence
   itself says "Call". */
.axm-note{justify-self:end;align-self:start;max-width:400px;margin-top:6px;
  background:var(--canvas);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:12px;padding:20px 22px;text-align:left}
.axm-note p{font-size:14.2px;color:var(--muted);line-height:1.62;margin:0}
.axm-note .tel{display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-family:var(--disp);font-weight:700;font-size:17px;color:var(--navy);letter-spacing:-.01em}
.axm-note .tel svg{width:16px;height:16px;color:var(--gold);flex:none}
.axm-note .tel:hover{color:var(--gold-2)}
@media(max-width:900px){
  .axm-deco,.axm-van{display:none}
  .axm-map{margin-left:0;height:clamp(300px,72vw,420px)}
  .axm-pill{left:50%;top:14px;font-size:9.8px;padding:7px 12px;white-space:normal;text-align:center;max-width:calc(100% - 28px)}
  .axm-lic{display:none}
  /* ⚠ The card overlap and the directions button fight on mobile: at -56px the card sat on
     top of the button and made it unclickable. Overlap reduced and the button lifted clear. */
  .axm-card{margin-top:-26px;width:100%}
  .axm-dir{bottom:46px;right:14px}
  .axm-note{justify-self:stretch;max-width:none;margin-top:22px}
}

/* Chips inside the info card run at a smaller scale than the standalone row: the card is ~470px
   wide, and at the full 13.6px/13px they wrapped to FOUR rows, which pushed the card ~300px past
   the bottom of the map and left a dead strip beside it. */
.axm-card .ax-hoods li a,.axm-card .ax-hoods li span{font-size:12.5px;padding:7px 11px}
.axm-card .ax-hoods ul{gap:8px}
.axm-card .ax-hoods .foot{margin-top:16px}

/* ═══════════ v23b — FAQ backdrop grade ═══════════
   ⚠ The FAQ needs a HEAVIER, more uniform grade than the shared .secbg default, and the reason is
   layout not taste. The default opens up toward the top-right because the sections it was written
   for (who-owns, reach) keep their copy in a left column and leave that quadrant empty. The FAQ is
   CENTRED and full-width: the headline runs straight through the open corner, so a photo with a
   person in it stops being texture and starts competing with the H2. Contrast still passed at
   12.9:1 there, which is exactly why this had to be judged by eye as well as measured. */
.faq-2col.secbg > .bgw::after{background:linear-gradient(168deg,
  rgba(10,28,63,.93) 0%,rgba(12,34,76,.90) 52%,rgba(11,31,69,.94) 100%)}
.faq-2col.secbg > .bgw img{object-position:50% 30%}

/* ═══════════ v24 — QUIET BACKDROP for content sections ═══════════
   Opt-in `.bgq` on top of `.secbg`. Added when backdrops went onto the 19 dark sections that had
   no imagery at all (owner: "make sure all dark have background images").

   ⚠ Why these cannot use the default .secbg grade. That grade is radial and opens to .62 in the
   top-right, which is safe on the hub's who-owns and reach sections because their photos are wide
   scenes and the corner is empty. Several of these are tight, well-lit frames (F13, F15, F09), and
   at .62 the technician's FACE reads as a subject competing with the headline rather than as
   texture. Contrast still passed at every one of those sections, which is the point: this is a
   composition failure that measurement does not catch, the same one already logged against the
   CTA band, the who-owns section and the FAQ.
   ⚠ So: near-uniform and heavier. These sections are long, copy-dense, and their text runs across
   most of the width, so there is no empty quadrant to open into. */
.secbg.bgq > .bgw img{opacity:.85;object-position:50% 34%}
.secbg.bgq > .bgw::after{background:linear-gradient(168deg,
  rgba(10,28,63,.94) 0%,rgba(12,34,76,.91) 50%,rgba(11,31,69,.95) 100%)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   .rvcar — PER-SERVICE GOOGLE REVIEW CAROUSEL.  Added 2026-08-20.
   Replaces the three dashed `.qcard.slot` placeholders that stood on 78 pages waiting for verbatim
   quotes. The quotes arrived (109 scraped from the profile), so the band now carries six real
   reviews chosen for the page's service — see _shared/reviews-data.cjs for how they are chosen and
   why a card only gets a job pill when the review's own words support one.

   🔑 CARDS KEEP THE `.qcard` CLASS ON PURPOSE. _qa/revcheck.mjs fingerprints the reviews band as
   `revbar|qcards|slots|score|ns` and asserts ONE structure sitewide. Every page renders exactly six
   `.qcard`s and zero `.ns`, so that assertion still holds and still means something. Do not vary the
   card count per page — a page with four cards silently becomes a second "distinct structure".

   Scrolls natively with CSS scroll-snap, so it works with JS off and with a trackpad, a touch swipe
   or the keyboard. The buttons and the progress rail are progressive enhancement: they are hidden
   until the script marks the component ready, so a JS-off visitor never sees dead controls. */
.rvcar{margin-top:34px;position:relative}
/* No negative margin here. `margin-inline:-4px;padding:4px` was an attempt to stop the cards'
   focus ring being clipped by overflow:hidden, but it makes the viewport 8px wider than its column,
   so the element ran to 1444px inside a 1440px window and every page with the carousel overflowed
   sideways by 4px. The focus ring lives on the track (see .rvcar-track:focus-visible), not on the
   cards, so the padding was buying nothing. */
.rvcar-vp{overflow:hidden}

.rvcar-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*18px)/3);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:0;margin:0;list-style:none;
  /* the scrollbar is redundant next to the progress rail, and on Windows it repaints as a grey
     slab across the bottom of the cards */
  scrollbar-width:none;-ms-overflow-style:none}
.rvcar-track::-webkit-scrollbar{display:none}
.rvcar-track > .qcard{scroll-snap-align:start;min-width:0}

/* Cards sit in a scroll track rather than a 3-up grid, so the shared .qcard rules that assumed a
   grid cell need overriding here only. */
.rvcar .qcard{display:flex;flex-direction:column;height:100%}
.rvcar .qcard blockquote{margin:12px 0 0;font-size:14.6px;line-height:1.72;color:#3d4757}
.rvcar .qcard blockquote p{margin:0}
.rvcar .qcard .st{color:var(--gold);font-size:13px;letter-spacing:2px;line-height:1}

/* Job pill. Renders ONLY when the review's own text licenses it, so its absence is meaningful and
   the card must still look finished without it — hence margin-top:auto on .who below, not here. */
.rvcar .rvc-job{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  margin-top:14px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--canvas);font-family:var(--disp);font-weight:600;font-size:11.8px;
  letter-spacing:.01em;color:var(--navy);text-decoration:none;transition:border-color .18s ease,color .18s ease}
.rvcar .rvc-job svg{width:12px;height:12px;color:var(--gold);flex:none}
.rvcar .rvc-job:hover{border-color:var(--gold-2);color:var(--navy-2)}

.rvcar .who{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:11px}
.rvcar .who .av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--navy),var(--navy-2));color:#fff;
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.01em}
.rvcar .rvc-src{display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  font-family:var(--disp);font-weight:600;font-size:12.2px;color:var(--muted);
  text-decoration:none;transition:color .18s ease}
.rvcar .rvc-src svg{width:12px;height:12px;flex:none;transition:transform .2s ease}
.rvcar .rvc-src:hover{color:var(--gold)}
.rvcar .rvc-src:hover svg{transform:translate(2px,-2px)}

/* ── controls ─────────────────────────────────────────────────────────────────────────────────
   Hidden until .rvcar-ready, so JS-off gets a plain scrollable row instead of buttons that do
   nothing. A thin gold progress rail rather than dot pagination: with six cards and three visible,
   dots would imply six discrete pages when the track scrolls continuously. */
.rvcar-ctl{display:none}
.rvcar-ready .rvcar-ctl{display:flex;align-items:center;gap:16px;margin-top:26px}
.rvcar-btn{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  background:var(--surface);color:var(--navy);display:grid;place-items:center;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.rvcar-btn svg{width:17px;height:17px}
.rvcar-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.rvcar-btn:disabled{opacity:.36;cursor:default}
.rvcar-rail{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rvcar-rail span{display:block;height:100%;width:33%;background:var(--gold);border-radius:2px;
  transition:transform .28s ease,width .28s ease;transform-origin:left center}
.rvcar-all{font-family:var(--disp);font-weight:600;font-size:12.8px;color:var(--navy);
  text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;white-space:nowrap}
.rvcar-all:hover{color:var(--gold);border-color:var(--gold)}

/* Keyboard users scroll the track directly, so it needs a visible focus ring of its own. */
.rvcar-track:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}

@media (max-width:1000px){
  .rvcar-track{grid-auto-columns:calc((100% - 18px)/2)}
  .rvcar-rail span{width:50%}
}
@media (max-width:660px){
  .rvcar-track{grid-auto-columns:88%}
  .rvcar-rail span{width:16.6%}
  .rvcar-ready .rvcar-ctl{gap:12px;margin-top:22px}
  .rvcar-all{display:none}   /* the band's own "Read the reviews" button already covers this */
}
@media (prefers-reduced-motion:reduce){
  .rvcar-track{scroll-behavior:auto}
  .rvcar-rail span{transition:none}
}

/* .sr-only also lives in ie-util.css, but that sheet is enqueued on only 18 of 83 pages while this
   carousel ships on 78. Duplicated deliberately so the star ratings keep their text equivalent. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── .rch-social real profile row ────────────────────────────────────────────────────────────────
   These rules already existed in ie-util.css, written for the visible social row that replaces the
   `.rch-social` {{NEEDS_SOURCE}} pill. They are repeated here because ie-util.css is enqueued on
   only 18 of 83 pages while the reach band carrying this row is on 26 — 23 of which would have
   rendered the links completely unstyled.
   The five profiles are sourced, not guessed: four are already in this build's `sameAs` schema from
   the live site, the Yelp and LinkedIn URLs were confirmed by the owner, and each was fetched to
   confirm it resolves (Facebook needs a real browser to check — it 400s to plain curl). */
.rch-social .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rch-social .links a{padding:7px 15px;border-radius:999px;font-size:13.2px;color:#e3eaf7;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.05);text-decoration:none;
  transition:border-color .16s,background .16s,color .16s}
.rch-social .links a:hover{color:#1c1403;background:var(--gold-2);border-color:var(--gold-2)}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   v24 — .ownr PROMOTED OUT OF ie-v16.css, 2026-08-24

   The "Meet Anderson" band (spine section 8) was missing from the four Wave-1 money pages.
   Its markup needs .ownr / .obg / .ograde / .own-*, which lived only in the page-scoped v16
   layer. Linking that whole layer from those pages was the documented promotion route, but 22
   of its selectors collide with classes they already use (.wrap .head .lede .chap .btn
   .sec-dark .u), so it would have restyled owner-approved sections as a side effect.

   ⚠ These rules are now DUPLICATED in ie-v16.css, which still ships them to the canonical AC
   repair page. Same values, v16 loads second and wins. If you change one, change both, or
   delete the block in v16 once every page carrying .ownr also links ie.css (all of them do).
   ═════════════════════════════════════════════════════════════════════════════════════════ */
.ownr{position:relative;isolation:isolate;overflow:hidden}
.ownr .obg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ownr .obg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.16}
.ownr .ograde{position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,
  rgba(10,28,63,.95) 0%,rgba(20,56,131,.9) 55%,rgba(11,31,69,.96) 100%)}
.ownr .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,4.4vw,64px);align-items:center}
.own-pts{margin-top:36px}
.own-pt{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:0 0 24px;position:relative}
.own-pt:last-child{padding-bottom:0}
.own-pt:not(:last-child)::before{content:"";position:absolute;left:22px;top:48px;bottom:6px;
  width:1px;background:rgba(252,201,82,.32)}
.own-pt .n{width:46px;height:46px;border-radius:50%;border:1.4px solid rgba(252,201,82,.55);
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:14px;
  color:var(--gold-2);background:rgba(252,201,82,.08)}
.own-pt h3{font-size:19px;color:#fff;letter-spacing:-.012em}
.own-pt p{font-size:14.8px;line-height:1.64;color:#b6c4de;margin:9px 0 0}
.own-media{position:relative}
.own-media .frame{border-radius:22px;overflow:hidden;aspect-ratio:4/4.2;
  box-shadow:0 34px 66px rgba(6,18,44,.42);border:1px solid rgba(255,255,255,.16)}
.own-media .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.own-media .tag{position:absolute;left:18px;top:18px;background:rgba(11,31,69,.9);
  backdrop-filter:blur(6px);border:1px solid rgba(252,201,82,.4);border-radius:30px;
  padding:8px 15px;font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:8px}
.own-media .tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-2);flex:none}
.own-cred{position:absolute;left:-34px;bottom:-26px;background:var(--surface);border-radius:16px;
  padding:20px 22px;box-shadow:0 26px 54px rgba(6,18,44,.34);max-width:330px}
.own-cred .lb{font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);display:block}
.own-cred .g{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:14px}
.own-cred b{display:block;font-family:var(--disp);font-weight:700;font-size:14.5px;color:var(--navy);line-height:1.2}
.own-cred span span{display:block;font-size:11px;color:var(--muted);letter-spacing:.05em;
  text-transform:uppercase;margin-top:3px}
@media(max-width:960px){
  .ownr .wrap{grid-template-columns:1fr;gap:44px}
  .own-media{max-width:520px}
  .own-cred{position:static;max-width:none;margin-top:18px}
}
@media(max-width:640px){
  .own-pt{grid-template-columns:38px 1fr;gap:14px}
  .own-pt .n{width:38px;height:38px;font-size:12.5px}
  .own-pt:not(:last-child)::before{left:18px;top:42px}
}

/* ==========================================================================
   TRUST STRIP v6 — NAVY RATING LEAD (owner-side pick 2026-08-26, round-2
   Option B from _concepts/tstrip-variations-2.html).
   Rotation, not replacement: v6 runs on the HOMEPAGE + the five hub-family
   pages only; every other page stays on v5, so the two designs alternate
   across the site. Same overlap-card geometry as v5 — the Google rating
   takes a navy lead cell with a display figure.
   Markup: .tstrip.tsv6 > .wrap > .lead + .ti × 4
   (License / Ownership / Estimates / Response). The lead keeps the
   data-gbp-rating / data-gbp-count hooks so the live feed still repaints.
   Ownership wording on v6 pages = "Locally owned / In Atlanta since 2014"
   (08-26 copy note). The ⚠ from v5 still applies: the card overlaps the
   hero by negative margin, the block must directly follow the hero.
   ========================================================================== */
.tstrip.tsv6 .wrap{grid-template-columns:1.24fr repeat(4,1fr);overflow:hidden}
.tstrip.tsv6 .lead{background:linear-gradient(158deg,#0f2a5e 0%,#0a1c3f 100%);padding:22px 26px}
.tstrip.tsv6 .lead .k{display:block;font-family:var(--disp);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);line-height:1}
.tstrip.tsv6 .lead .score{display:flex;align-items:center;gap:12px;margin-top:10px}
.tstrip.tsv6 .lead .big{font-family:var(--disp);font-weight:700;font-size:37px;line-height:.92;
  color:#fff;letter-spacing:-.03em}
.tstrip.tsv6 .lead .stars{display:block;color:var(--gold-2);font-size:11.5px;letter-spacing:2.4px;line-height:1}
.tstrip.tsv6 .lead .d{display:block;font-size:12.4px;color:#a9b8d4;margin-top:5px;line-height:1.4}
@media(max-width:1080px){
  .tstrip.tsv6 .wrap{grid-template-columns:repeat(4,1fr)}
  .tstrip.tsv6 .lead{grid-column:1/-1}
  /* children shift by one (.lead is child 1): the four .ti sit in ONE row here,
     so undo v5's 3-col nth-child fixes for this variant */
  .tstrip.tsv6 .ti:nth-child(4)::before{display:block}
  .tstrip.tsv6 .ti:nth-child(n+4){border-top:0}
}
@media(max-width:700px){
  .tstrip.tsv6 .wrap{grid-template-columns:1fr 1fr}
  /* 2×2 under the full-width lead: dividers belong on the RIGHT column
     (odd children 3,5), tops on the second row (children 4,5) */
  .tstrip.tsv6 .ti:nth-child(odd)::before{display:block}
  .tstrip.tsv6 .ti:nth-child(even)::before{display:none}
  .tstrip.tsv6 .ti:nth-child(n+3){border-top:0}
  .tstrip.tsv6 .ti:nth-child(n+4){border-top:1px solid var(--line)}
  .tstrip.tsv6 .ti:last-child{grid-column:auto}
}

/* v6 with FOUR cells (lead + 3 .ti) — pages whose v5 strip had only 4 cells:
   ac-maintenance (Records) and financing (Service Finance). Same rules as tsv6,
   one track fewer. */
.tstrip.tsv6.c4 .wrap{grid-template-columns:1.35fr repeat(3,1fr)}
@media(max-width:1080px){
  .tstrip.tsv6.c4 .wrap{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .tstrip.tsv6.c4 .wrap{grid-template-columns:1fr 1fr}
  .tstrip.tsv6.c4 .ti:last-child{grid-column:1/-1}
  .tstrip.tsv6.c4 .ti:nth-child(4)::before{display:none}
}

/* ==========================================================================
   FOOTER v4 (2026-08-27) — Notion "footer" doc mirror (Skyline-style layout).
   Markup in chrome/footer.html. Light badge strip on top of the dark footer,
   brand/NAP/CTA block left, four link columns, legal bar with circular social
   icons. Overrides parts of the v1/v3 footer layers above; the old .ftrust
   row and the sixth Contact&NAP column are gone from the markup.
   ========================================================================== */
/* fstrip v3 "Editorial caps line" (2026-08-27, user pick — option E of
   _concepts/footer-strip-variations-2026-08-27.html; flat band v1 and white ledger card v2
   both rejected). One letterspaced caps line on the footer navy, gold diamond separators,
   gold star cluster for the rating (the .close .pr on-dark device), closed by a hairline. */
.fstrip{background:var(--navy-ink);padding:0 28px}
.fstrip .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 0;
  padding:23px 0;border-bottom:1px solid rgba(255,255,255,.09);max-width:var(--wrap);margin:0 auto}
.fstrip .fsi{font-family:var(--disp);font-weight:600;font-size:11.3px;letter-spacing:.15em;
  text-transform:uppercase;color:#a5b2cd;line-height:1.5;white-space:nowrap}
.fstrip .fsi em{font-style:normal;color:#fff}
.fstrip .dot{color:var(--gold);margin:0 16px;font-size:10px;line-height:1}
.fstrip .st{color:var(--gold-2);letter-spacing:1.5px;font-size:11px;margin-right:8px}
.fmain .fcol h6{color:#93a1bd} /* the doc's design mock uses muted slate column headers, not gold */
/* fhead (2026-08-27, owner: "footer feels very long"): logo+tagline left, Talk-to-us + Book
   right, on one horizontal row — the CTA cluster no longer stretches the brand column, so the
   fmain row is only as tall as its longest LINK column. */
.fhead{display:flex;align-items:center;justify-content:space-between;gap:22px 30px;flex-wrap:wrap;
  padding:clamp(32px,3.4vw,44px) 0 0}
.fhead .fh-l img{height:44px;width:auto;display:block}
.fhead .tagline{font-style:italic;color:var(--gold-2);font-family:var(--disp);font-weight:500;font-size:14px;margin:11px 0 0}
.fhead .fh-r{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.fhead .ftalk{display:block;font-size:12.5px;color:#8a99b8;line-height:1.3}
.fhead .fphone{font-family:var(--disp);font-weight:800;font-size:clamp(21px,1.8vw,25px);letter-spacing:-.01em;color:#fff}
.fhead .fphone:hover{color:var(--gold-2)}
.fhead .fbook{padding:13px 26px;font-size:14.5px}
.fmain{padding:clamp(28px,3vw,38px) 0 40px} /* the tall clamp(48-74) top pad belonged to the old one-column stack */
.fbrand .fabout{margin:0;max-width:46ch;color:#a7b3cd;font-size:13.8px;line-height:1.66}
.fbrand .fcontact{margin-top:18px;display:grid;gap:11px;font-size:13.9px}
.fbrand .fcontact a,.fbrand .fcontact > span{display:flex;align-items:flex-start;gap:11px;color:#d4dcec}
.fbrand .fcontact a:hover{color:#fff}
.fbrand .fcontact svg{width:16px;height:16px;color:var(--gold-2);flex:0 0 16px;margin-top:3px}
.flegal{align-items:center}
.flegal .fcopy{color:#8a99b8}
.flegal .fsoc{display:flex;gap:12px;align-items:center}
.flegal .fsoc a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#b9c4dc;transition:.16s ease}
.flegal .fsoc a:hover{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.1)}
.flegal .fsoc svg{width:16px;height:16px}
@media(max-width:1080px){
  /* brand block takes the full first row, the four link columns pair up below it */
  .fmain{grid-template-columns:1fr 1fr}
  .fmain .fbrand{grid-column:1/-1}
  /* caps line gets tighter separators before it wraps */
  .fstrip .dot{margin:0 12px}
}
@media(max-width:700px){
  /* stacked, centered; the diamonds only make sense within a single line */
  .fstrip{padding-left:20px;padding-right:20px}
  .fstrip .wrap{flex-direction:column;gap:9px;padding:20px 0}
  .fstrip .dot{display:none}
  .fstrip .fsi{white-space:normal;text-align:center}
  .fhead{flex-direction:column;align-items:flex-start;gap:18px}
  .fhead .fh-r{gap:18px}
}
@media(max-width:640px){
  .fmain{grid-template-columns:1fr}
  .flegal{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ============ HERO-SOLO (2026-08-28) ============================================================
   A `hero-photo` hero whose heading collapsed to ONE line: no eyebrow, no `.u` tagline, because the
   draft supplied a single "#" line. True of 9 drafts (financing + 8 location pages); the 22
   three-line service heroes never match and are untouched.

   THE DEFECT. `.hero .wrap` is `align-items:center`, correct when both columns are comparable. On a
   solo hero the text column measures 227px against the 753px booking frame, so the H1 was centred
   against the FORM, not the viewport: measured on live virginia-highland at 1440x900, the headline
   started at y=464 with ~340px of empty photo above it, and the hero ran 941px — taller than the
   viewport, clipping the form's own "Next" button and pushing the trust strip out of view.

   THE FIX, two parts. (1) `align-items:start` anchors the text at the top so it opens the hero
   instead of floating mid-band. (2) The frame height comes down so the section fits the fold.
   Capping the frame is safe: 720px is OUR number, not the vendor's, the mobile rule at
   max-width:760px already sets a viewport-relative clamp, and at step 1 the FieldEdge UI carries
   ~300px of blank between its last option and the Next button, so it has real slack.
   `calc(100vh - 300px)` reserves the 125px nav + hero padding + the fine-print line; the 560px
   floor is inherited from the existing mobile clamp, below which the vendor UI does start to crowd.

   ⚠ Guarded to min-width:961px. Below that the shared single-column collapse governs and the two
   columns stack, so there is no imbalance to correct and no centring to override. */
@media(min-width:961px){
  .hero-solo .wrap{align-items:start;padding-top:56px;padding-bottom:64px}
  .hero-solo.hero-photo .fe-book .fe-frame{height:clamp(560px,calc(100vh - 300px),700px)}
}