/* ═══════════════════════════════════════════════════════════════════════════════════════════
Indoor Experts — SERVICE-AREA layer (page-scoped, additive)
Built 2026-08-18. Linked ONLY by /service-area/. `ie.css` and `ie-v16.css` are untouched,
so every other page renders exactly as before.
WHAT THIS IS. The RSG master-coverage-page pattern (a sticky county navigator beside
per-county chapters, each chapter leading with one dark anchor city then a grid of light
city tiles) executed in IE's locked "Warm Editorial Professional" system. The pattern is
ours across Lexany, Alamo Comfort and Precision Air. The LANGUAGE here is IE's and only
IE's: warm canvas, royal navy, gold used sparingly, Montserrat over Poppins, flat hairline
depth, and the BROKEN-RING ARC from the IE logo as the only motif.
WHAT IT IS NOT. Not a Lexany reskin. That page is navy over red and tints its per-service
links blue, red and green. Three new hues would break this brand on contact, so the three
service links here are one navy chip family separated by their GLYPH, not by colour.
Not an Alamo reskin either. No star medallion, no star watermark, no shaped seam. This
owner has rejected a clone four times with the instruction to build our own UI.
CONTENT SOURCE. Every county, every city and the three per-city service links come from
the live old page at indoorexperts.com/service-area/. Nothing here invents a city.
═══════════════════════════════════════════════════════════════════════════════════════════ */
/* ───────── 0. PAGE-LOCAL TOKENS ─────────
🔑 THE MARK IS DOUBLED, AND THE SECOND RING IS THE BRAND BLUE. Owner, 2026-08-18: the single
gold ring "is the loader or it's something", and it should be "blue and yellow, like which
have been used in the logo", used across the whole site.
They are right about the source. `ie-symbol.svg` is not one broken ring, it is TWO concentric
broken rings: `YellowTopLeft` + `YellowBottomRight` are the outer pair, `BlueTopLeft` +
`BlueBottomRight` are the inner pair, both broken on the same diagonal. So the mark now draws
both rings, gold outside and navy inside, which is the symbol rather than a piece of it.
⚠ GEOMETRY IS MEASURED, DO NOT NUDGE IT BY EYE. Five double-ring builds were rendered at
13/16/20/26/40/96px on cream and on navy before this one was picked:
outer r9.4 sw2.2 / inner r5.0 sw2.0 inner ring disappears below about 20px
outer r9.6 sw1.9 / inner r5.4 sw1.7 finer, and the first to go at 13px
outer r9.2 sw2.6 / inner r4.4 sw2.4 CHOSEN. Both rings still read at 13px
logo hexes #f8ba22 / #4160ab truer to the file, but #4160ab is muddy on cream
blue outside / gold inside reads as a target, and loses the gold-first identity
142deg arcs with 38deg gaps at rotate(-25), so the gaps sit on the logo's own diagonal.
Change a radius and its dasharray has to be recomputed or the two rings' gaps stop lining up.
⚠ The mark also got BIGGER at every call site (14px to 17px, 11px to 15px). A doubled ring at
the old single-ring size is a dot. */
:root{
--ie-arc:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20transform%3D'rotate(-25%2012%2012)'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9.2'%20fill%3D'none'%20stroke%3D'%23E1A50C'%20stroke-width%3D'2.6'%20stroke-dasharray%3D'22.80%206.10'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'4.4'%20fill%3D'none'%20stroke%3D'%23143883'%20stroke-width%3D'2.4'%20stroke-dasharray%3D'10.90%202.92'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--ie-arc-l:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20transform%3D'rotate(-25%2012%2012)'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9.2'%20fill%3D'none'%20stroke%3D'%23FCC952'%20stroke-width%3D'2.6'%20stroke-dasharray%3D'22.80%206.10'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'4.4'%20fill%3D'none'%20stroke%3D'%237f9bdd'%20stroke-width%3D'2.4'%20stroke-dasharray%3D'10.90%202.92'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--gold-ink:#8A6A08;
/* per-service accents. Owner, 2026-08-18: "heating should be orange or red, cooling should be
blue, air quality should be green". This overrides the one-navy-family note that used to be
in section 3 of this file, which was my call and is now withdrawn. Each hue is picked to sit
beside navy and gold without fighting them, and each has a tint for the light chip and a
lifted variant for the chip on a black tile. */
--sv-heat:#C2410C; --sv-heat-bg:#FBF0EA; --sv-heat-bd:#F2DCCE; --sv-heat-l:#FF9A63;
--sv-cool:#1D6FD0; --sv-cool-bg:#EDF3FC; --sv-cool-bd:#D5E3F7; --sv-cool-l:#77B2F7;
--sv-air:#12845A; --sv-air-bg:#E9F6F0; --sv-air-bd:#D0EADF; --sv-air-l:#4FD3A0;
}
/* chapter marker, same device as v16 so the two pages read as one site */
/* ⚠ justify-content IS LOAD-BEARING, DO NOT DROP IT. ie-v16.css sets `.chap{justify-content:
center}`, and any page that links both files gets centred eyebrows everywhere unless this rule
says otherwise. That is exactly what happened on the location pages: the services head, the
book-it eyebrow and the who-turns-up label all centred while their H2s stayed left, which the
owner reported as "the alignment is out". Declaring the property here, not just omitting it,
is the fix. `.chap.center` is still available where centring is wanted. */
.chap{display:flex;align-items:center;justify-content:flex-start;gap:12px;font-family:var(--disp);
font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.chap.center{justify-content:center}
.chap .d{width:17px;height:17px;flex:none;background:var(--ie-arc) center/contain no-repeat}
.chap .n{color:var(--gold);font-weight:700}
.chap .sl{color:var(--line-2)}
.sec-navy .chap,.sec-dark .chap{color:#8d9dbd}
.sec-navy .chap .n,.sec-dark .chap .n{color:var(--gold-2)}
.sec-navy .chap .d,.sec-dark .chap .d{background:var(--ie-arc-l) center/contain no-repeat}
.sec-navy .chap .sl,.sec-dark .chap .sl{color:rgba(255,255,255,.28)}
/* ═════════ 1. HERO ═════════
Photo bed under a navy wash, copy left, a COVERAGE CONSOLE right. The console is this
section's required graphic element and it is a real data graphic: one row per county, a
proportional bar for that county's share of the 29 cities, its count, and the totals.
⚠ The bar widths are authored inline per row because each width IS that county's share.
Anyone editing the city list has to edit the widths in the same pass. */
.sahero{position:relative;overflow:hidden;background:var(--navy-ink);color:#fff;
padding:clamp(50px,5.4vw,76px) 0 clamp(52px,5.6vw,80px)}
.sahero .bg{position:absolute;inset:0;z-index:0}
.sahero .bg img{width:100%;height:100%;object-fit:cover;opacity:.46;object-position:60% 50%}
/* two stops, not three: a mid stop put a visible seam behind the headline at 1100-1300px */
.sahero .bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(11,31,69,.95) 0%,rgba(11,31,69,.82) 42%,rgba(15,42,94,.5) 100%)}
.sahero .wrap{position:relative;z-index:1}
.sahero .grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4.4vw,64px);align-items:center}
.sahero h1{font-size:clamp(34px,4.5vw,58px);color:#fff;letter-spacing:-.025em;line-height:1.07;margin:18px 0 0}
.sahero h1 em{font-style:normal;color:var(--gold-2)}
.sahero .lede{font-size:clamp(16px,1.3vw,18.5px);color:#c3cfe6;margin:20px 0 0;max-width:52ch;line-height:1.66}
.sahero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* the sourced credential line. One row, no card chrome, because the trust shelf below owns
the full stack and this is only the hero's proof point. */
.sahero .creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sahero .creds span{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);
font-weight:500;font-size:12.6px;color:#d7e0f2;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px}
.sahero .creds i{width:15px;height:15px;flex:none;background:var(--ie-arc-l) center/contain no-repeat}
.sacon{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.18);border-radius:20px;
padding:26px 26px 22px;backdrop-filter:blur(6px);box-shadow:0 30px 60px rgba(5,16,40,.34)}
.sacon .hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.16)}
.sacon .hd b{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.17em;
text-transform:uppercase;color:var(--gold-2)}
.sacon .hd span{font-family:var(--disp);font-weight:500;font-size:11.5px;color:#93a5c6;letter-spacing:.04em}
.sacon ul{list-style:none;margin:5px 0 0;padding:0}
.sacon li{display:grid;grid-template-columns:1fr 92px 26px;align-items:center;gap:12px;
padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sacon li:last-child{border-bottom:0}
.sacon li a{font-family:var(--disp);font-weight:500;font-size:13.8px;color:#e6ecf8;letter-spacing:-.005em}
.sacon li a:hover{color:var(--gold-2)}
.sacon .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden}
.sacon .bar i{display:block;height:100%;border-radius:3px;
background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.sacon .ct{font-family:var(--disp);font-weight:700;font-size:13.6px;color:#fff;text-align:right}
.sacon .ft{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px;
padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.sacon .ft div{text-align:center}
.sacon .ft b{display:block;font-family:var(--disp);font-weight:700;font-size:23px;color:var(--gold-2);line-height:1}
.sacon .ft span{display:block;font-size:10.8px;color:#9fb0d0;margin-top:5px;letter-spacing:.05em}
@media(max-width:1000px){
.sahero .grid{grid-template-columns:1fr;gap:34px}
.sacon{max-width:520px}
}
@media(max-width:560px){
.sacon{padding:22px 20px 18px}
.sacon li{grid-template-columns:1fr 58px 24px;gap:9px}
.sacon .ft b{font-size:20px}
}
/* ═════════ 2. TRUST STRIP ═════════
REMOVED 2026-08-18 (owner): "it should become like which we have finalized for the service
pages". The bespoke five-column `.satrust` shelf that used to live here is gone. The page now
uses the shared `.tstrip` from ie.css, unchanged, the same component all 32 other pages use.
⚠ `.tstrip` overlaps the hero with margin-top:-46px, so it MUST stay directly after the hero
section and the hero keeps bottom padding for it to sit in. */
/* ═════════ 3. THE COVERAGE EXPLORER ═════════
Two columns. Left is a sticky county navigator, right is one chapter per county.
⚠ WHY NOT A FLAT 29-CARD GRID: twenty-nine identical tiles in one wall is the exact thing
an owner has already called boring on this pattern once. Seven county chapters give the
page seven natural rests, and the dark anchor tile inside each chapter gives every chapter
its own light-to-dark beat. */
.saexp{display:grid;grid-template-columns:292px 1fr;gap:clamp(28px,3.4vw,52px);align-items:start;margin-top:46px}
/* ---- the navigator ---- */
.sanav{position:sticky;top:96px}
.sanav .in{background:linear-gradient(158deg,#0a1c3f 0%,#143883 64%,#0f2a5e 100%);
border-radius:20px;padding:24px 22px;color:#fff;box-shadow:0 26px 54px rgba(11,31,69,.22);
position:relative;overflow:hidden}
.sanav .in::after{content:"";position:absolute;right:-74px;top:-74px;width:230px;height:230px;
border-radius:50%;background:radial-gradient(circle,rgba(252,201,82,.15),transparent 68%)}
.sanav .lb{position:relative;font-family:var(--disp);font-weight:600;font-size:10.5px;
letter-spacing:.17em;text-transform:uppercase;color:var(--gold-2)}
.sanav ul{list-style:none;margin:15px 0 0;padding:0;position:relative}
.sanav li+li{margin-top:2px}
.sanav a{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:10px 12px 10px 14px;border-radius:9px;position:relative;transition:background .18s ease}
/* a gold rail rather than a left border: a border would shift the label 3px on hover */
.sanav a::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;
background:var(--gold-2);transform:scaleY(0);transition:transform .2s ease}
.sanav a:hover,.sanav a.on{background:rgba(255,255,255,.09)}
.sanav a:hover::before,.sanav a.on::before{transform:scaleY(1)}
.sanav .nm{font-family:var(--disp);font-weight:500;font-size:14.2px;color:#e4ebf8;letter-spacing:-.005em}
.sanav a:hover .nm,.sanav a.on .nm{color:#fff}
.sanav .ct{font-family:var(--disp);font-weight:700;font-size:11.5px;color:#0b1f45;
background:var(--gold-2);border-radius:5px;padding:2px 7px;flex:none}
.sanav .stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:19px;
padding-top:17px;border-top:1px solid rgba(255,255,255,.17);position:relative}
.sanav .stat div{text-align:center}
.sanav .stat b{display:block;font-family:var(--disp);font-weight:700;font-size:20px;color:#fff;line-height:1}
.sanav .stat span{display:block;font-size:10.4px;color:#9fb0d0;margin-top:5px;letter-spacing:.04em}
.sanav .cta{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:17px;
background:var(--gold);color:#1c1403;border-radius:10px;padding:13px 16px;position:relative;
font-family:var(--disp);font-weight:600;font-size:14.2px;box-shadow:0 10px 24px rgba(225,165,12,.26)}
.sanav .cta:hover{background:var(--gold-2)}
.sanav .cta svg{width:16px;height:16px}
/* ---- a chapter ---- */
.sachap{scroll-margin-top:104px}
.sachap+.sachap{margin-top:clamp(38px,4vw,56px)}
.sachap .hd{display:flex;align-items:center;gap:16px;margin-bottom:19px}
.sachap .hd h3{font-size:clamp(21px,2.1vw,27px);color:var(--navy);letter-spacing:-.02em;flex:none}
.sachap .hd .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.sachap .hd .ct{font-family:var(--disp);font-weight:600;font-size:11.4px;letter-spacing:.13em;
text-transform:uppercase;color:var(--gold-ink);flex:none}
/* the dark anchor city. One per county, taken in the old page's own ordering, so it is a
reading anchor rather than a ranking claim. */
/* ⚠ NAVY, AND IT STAYS NAVY. This tile was rebuilt in near-black on 2026-08-18 ("it need to be
on the black color as it's the legacy") and the owner reverted it the same day on sight:
"this need to be as it was before, you can just change the icon". So the ONLY thing that
changed from the original is the corner watermark, which is now the doubled logo mark.
Do not re-propose black without an explicit ask. */
.safeat{position:relative;overflow:hidden;border-radius:20px;padding:28px 30px 26px;color:#fff;
background:linear-gradient(146deg,#0a1c3f 0%,#143883 60%,#0f2a5e 100%);
box-shadow:0 24px 50px rgba(11,31,69,.2)}
.safeat::after{content:"";position:absolute;right:-64px;bottom:-78px;width:214px;height:214px;
background:var(--ie-arc-l) center/contain no-repeat;opacity:.11;pointer-events:none}
.safeat .top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.safeat h4{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.3vw,28px);
color:#fff;letter-spacing:-.022em;line-height:1.1}
.safeat .badge{font-family:var(--disp);font-weight:600;font-size:10.4px;letter-spacing:.14em;
text-transform:uppercase;color:#1c1403;background:var(--gold-2);border-radius:5px;padding:5px 10px;flex:none}
.safeat p{font-size:14.8px;line-height:1.66;color:#bcc9e2;margin:12px 0 0;max-width:60ch;position:relative}
.safeat p a{color:var(--gold-2);border-bottom:1px solid rgba(252,201,82,.42)}
.safeat p a:hover{border-bottom-color:var(--gold-2)}
/* the light city tiles */
.satiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:14px}
.satile{background:var(--surface);border:1px solid var(--line);border-radius:16px;
padding:20px 20px 18px;position:relative;overflow:hidden;
transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.satile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.satile:hover{border-color:var(--line-2);box-shadow:0 16px 34px rgba(20,56,131,.09);transform:translateY(-2px)}
.satile:hover::before{transform:scaleX(1)}
.satile h4{font-family:var(--disp);font-weight:700;font-size:17.4px;color:var(--navy);letter-spacing:-.014em}
.satile .sub{font-size:12.7px;color:var(--muted);margin-top:5px;letter-spacing:.01em}
/* ---- the three service links ----
⚠ ONE colour family on purpose. The reference build tints cooling blue, heating red and air
quality green. Three imported hues would put five colours on an IE page. Here the chips are
one navy family and the GLYPH carries the difference, which is what the mega menu does too. */
.salinks{display:flex;flex-wrap:wrap;gap:6px 7px;margin-top:14px;position:relative}
.salink{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:600;
font-size:11.6px;letter-spacing:.01em;border-radius:999px;padding:6px 11px;transition:.16s ease;
color:var(--c);background:var(--bg);border:1px solid var(--bd)}
.salink svg{width:12px;height:12px;flex:none;color:var(--c);transition:color .16s ease}
.salink:hover{background:var(--c);border-color:var(--c);color:#fff}
.salink:hover svg{color:#fff}
.salink--heat{--c:var(--sv-heat);--bg:var(--sv-heat-bg);--bd:var(--sv-heat-bd);--cl:var(--sv-heat-l)}
.salink--cool{--c:var(--sv-cool);--bg:var(--sv-cool-bg);--bd:var(--sv-cool-bd);--cl:var(--sv-cool-l)}
.salink--air{--c:var(--sv-air);--bg:var(--sv-air-bg);--bd:var(--sv-air-bd);--cl:var(--sv-air-l)}
/* on the black anchor tile the same three hues run as glass chips with the lifted variant, so
the colour coding survives the dark ground instead of collapsing to white */
.safeat .salinks{margin-top:18px}
.safeat .salink{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.safeat .salink svg{color:var(--cl)}
.safeat .salink:hover{background:var(--cl);border-color:var(--cl);color:#0a1c3f}
.safeat .salink:hover svg{color:#0a1c3f}
.salinks .lab{font-family:var(--disp);font-weight:600;font-size:10.4px;letter-spacing:.14em;
text-transform:uppercase;color:#9fb0d0;align-self:center;margin-right:3px}
@media(max-width:1040px){
.saexp{grid-template-columns:1fr;gap:26px}
.sanav{position:static}
.sanav .in{padding:22px 20px}
.sanav ul{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.sanav li+li{margin-top:0}
}
@media(max-width:620px){
.sanav ul{grid-template-columns:1fr}
.safeat{padding:24px 22px 22px}
.satiles{grid-template-columns:1fr}
.sachap .hd{gap:12px}
.sachap .hd h3{font-size:20px}
}
/* ═════════ 4. ADDRESS BAND + THE CHECK-YOUR-ADDRESS FORM ═════════
The one navy band on the page, and the page's conversion endpoint. It was a thin copy strip
with two buttons in the first build, which left the global chrome's "Book Now" landing on a
dead end here while every other page in the build lands on a form. */
.saband{position:relative;overflow:hidden;background:var(--navy-ink);color:#fff;
padding:clamp(52px,5.6vw,84px) 0;scroll-margin-top:92px}
/* photo bed, added 2026-08-18 (owner): the band was a flat gradient with a form floating on it.
The wash is heavier than the hero's because a white form card sits on top of this one. */
.saband .bg{position:absolute;inset:0;z-index:0}
.saband .bg img{width:100%;height:100%;object-fit:cover;opacity:.42;object-position:88% 58%}
.saband .bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(11,31,69,.97) 0%,rgba(11,31,69,.94) 44%,rgba(15,42,94,.72) 100%)}
.saband .wrap{position:relative;z-index:1}
.saband::after{content:"";position:absolute;left:-108px;bottom:-140px;width:360px;height:360px;
background:var(--ie-arc-l) center/contain no-repeat;opacity:.06;pointer-events:none}
.saband .in{display:grid;grid-template-columns:1fr 420px;gap:clamp(30px,4vw,58px);
align-items:center;position:relative}
.saband h2{font-size:clamp(25px,2.9vw,38px);color:#fff;letter-spacing:-.02em;max-width:18ch;margin:14px 0 0}
.saband p{font-size:16px;line-height:1.7;color:#c3cfe6;margin:16px 0 0;max-width:50ch}
/* the three-step list. Gold numerals rather than icon tiles, which this owner has rejected
twice as "icons feel AI", and the same numeral language the v16 pricing notes use. */
.bandsteps{list-style:none;margin:28px 0 0;padding:0;max-width:52ch}
.bandsteps li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 0;
border-top:1px solid rgba(255,255,255,.15)}
.bandsteps li:first-child{border-top:0;padding-top:0}
.bandsteps .n{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--gold-2);letter-spacing:.06em;line-height:1.5}
.bandsteps b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;color:#fff;letter-spacing:-.012em}
.bandsteps span{display:block;font-size:14.2px;line-height:1.6;color:#b6c4de;margin-top:5px}
.saband .btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:28px}
.saband .btns .hrs{font-family:var(--disp);font-weight:500;font-size:13.2px;color:#9fb0d0;letter-spacing:.03em}
.saband .btn svg{width:17px;height:17px;flex:none}
/* the shared .qform is a light card, which is exactly right on this navy ground */
.saband .qform{box-shadow:0 34px 68px rgba(5,16,40,.36)}
/* consent row, same shape as the .rch-consent on the other pages */
.qconsent{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;margin:4px 0 18px}
.qconsent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--navy)}
.qconsent label{text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:400;
font-size:12.4px;line-height:1.5;color:var(--muted);margin:0}
.qconsent .ns{color:#8A6A08;background:var(--gold-soft);border-radius:4px;padding:2px 6px}
@media(max-width:980px){
.saband .in{grid-template-columns:1fr;gap:32px}
.saband .qform{max-width:520px}
}
@media(max-width:560px){.saband .btns{gap:12px}.saband .btns .btn{width:100%;justify-content:center}}
/* ═════════ 5. MAP + RECAP ═════════
⚠ The iframe needs a DEFINITE parent height. Under aspect-ratio alone it initialises at
300x150 and never re-lays-out, which is the bug the previous build documented.
⚠ Keyless embed on purpose: the Maps Embed API wants a key in page source.
⚠ No dashed coverage ring drawn over the map. A boundary is a factual claim about how far
this company will drive and nobody has given us one. */
.samap{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(30px,4vw,56px);align-items:center;margin-top:42px}
.samap .copy h2{font-size:clamp(25px,2.9vw,38px);color:var(--navy);letter-spacing:-.02em;margin:16px 0 0}
.samap .copy p{font-size:16px;line-height:1.7;color:var(--muted);margin:16px 0 0;max-width:52ch}
.samap .copy p a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--line-2)}
.samap .copy p a:hover{border-bottom-color:var(--navy)}
.sachips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sachips a{font-family:var(--disp);font-weight:600;font-size:12.4px;color:var(--navy);
background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;transition:.16s ease}
.sachips a:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.samap .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.mapfr{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);
box-shadow:0 26px 56px rgba(20,56,131,.13);background:#e9e6df}
.mapfr .fr{height:clamp(320px,36vw,432px)}
.mapfr iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.86)}
.mapfr .pill{position:absolute;right:16px;top:16px;background:rgba(11,31,69,.92);color:#fff;
font-family:var(--disp);font-weight:600;font-size:11.6px;letter-spacing:.03em;
border-radius:8px;padding:8px 13px;backdrop-filter:blur(4px)}
.mapfr .nap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
background:var(--navy-ink);color:#fff;padding:17px 20px}
.mapfr .nap b{display:block;font-family:var(--disp);font-weight:700;font-size:14.4px;color:#fff}
.mapfr .nap span{display:block;font-size:12.7px;color:#9fb0d0;margin-top:3px}
.mapfr .nap .dir{font-family:var(--disp);font-weight:600;font-size:12.7px;color:var(--gold-2);
display:inline-flex;align-items:center;gap:6px;flex:none}
.mapfr .nap .dir:hover{color:#fff}
.mapfr .nap .dir svg{width:14px;height:14px}
@media(max-width:960px){.samap{grid-template-columns:1fr;gap:32px}}
/* ═════════ 6. OWNER BAND ═════════ */
.saown{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,58px);align-items:center}
.saown .pic{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 28px 58px rgba(5,16,40,.34);margin:0}
.saown .pic img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.saown .pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 22px 18px;
background:linear-gradient(transparent,rgba(6,16,38,.92));font-family:var(--disp);font-weight:600;font-size:13.4px;color:#fff}
.saown .pic figcaption span{display:block;font-weight:500;font-size:11.4px;color:var(--gold-2);
letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px}
.saown h2{font-size:clamp(25px,2.9vw,38px);color:#fff;letter-spacing:-.02em;margin:16px 0 0}
.saown p{font-size:16px;line-height:1.72;color:#c3cfe6;margin:16px 0 0;max-width:56ch}
.saown .pts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.saown .pt{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15);
border-radius:14px;padding:18px 18px 16px}
.saown .pt b{display:block;font-family:var(--disp);font-weight:700;font-size:15.2px;color:#fff}
.saown .pt span{display:block;font-size:13.5px;line-height:1.6;color:#b6c4de;margin-top:7px}
@media(max-width:900px){.saown{grid-template-columns:1fr;gap:30px}.saown .pts{grid-template-columns:1fr}}
/* ═════════ 7. FAQ ═════════ */
/* two columns: questions left, the ask-card right. Centring a bare accordion left the section
as the only one on the page with no graphic element in it. */
.safaqgrid{display:grid;grid-template-columns:1fr 336px;gap:clamp(26px,3.2vw,46px);align-items:start;margin-top:40px}
.safaq{min-width:0}
.safaq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;
overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.safaq details+details{margin-top:11px}
.safaq details[open]{border-color:var(--line-2);box-shadow:0 14px 30px rgba(20,56,131,.07)}
.safaq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:18px;padding:19px 22px;font-family:var(--disp);font-weight:600;font-size:16.1px;color:var(--navy);letter-spacing:-.012em}
.safaq summary::-webkit-details-marker{display:none}
.safaq summary .ic{position:relative;width:24px;height:24px;flex:none;border-radius:50%;
border:1.5px solid var(--line-2);display:grid;place-items:center;transition:.22s ease}
.safaq summary .ic::before,.safaq summary .ic::after{content:"";position:absolute;background:var(--navy);border-radius:1px}
.safaq summary .ic::before{width:10px;height:1.8px}
.safaq summary .ic::after{width:1.8px;height:10px;transition:transform .22s ease}
.safaq details[open] summary .ic{background:var(--gold);border-color:var(--gold)}
.safaq details[open] summary .ic::after{transform:scaleY(0)}
.safaq .ans{padding:0 22px 21px;font-size:15.2px;line-height:1.7;color:var(--muted);max-width:74ch}
.safaq .ans a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--line-2)}
.safaq .ans p{margin:0}
.safaq .ans p+p{margin-top:11px}
/* ═════════ 8. CLOSING CTA ═════════ */
.sacta{position:relative;overflow:hidden;background:var(--navy-ink);color:#fff;
padding:clamp(58px,6.4vw,94px) 0;text-align:center}
.sacta .bg{position:absolute;inset:0;z-index:0}
.sacta .bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.sacta .bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,31,69,.9),rgba(11,31,69,.94))}
.sacta .wrap{position:relative;z-index:1}
.sacta .chap{justify-content:center}
.sacta h2{font-size:clamp(28px,3.3vw,45px);color:#fff;letter-spacing:-.024em;margin:18px auto 0;max-width:20ch}
.sacta p{font-size:16.4px;color:#c3cfe6;margin:18px auto 0;max-width:56ch}
.sacta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.sacta .fine{font-size:13.1px;color:#8d9dbd;margin-top:22px}
/* ---- the ask-card beside the FAQ ---- */
.askcard{position:sticky;top:96px;background:linear-gradient(156deg,#0a1c3f 0%,#143883 64%,#0f2a5e 100%);
border-radius:20px;padding:26px 24px 22px;color:#fff;overflow:hidden;
box-shadow:0 26px 54px rgba(11,31,69,.22)}
.askcard::after{content:"";position:absolute;right:-72px;top:-76px;width:210px;height:210px;
background:var(--ie-arc-l) center/contain no-repeat;opacity:.07;pointer-events:none}
.askcard .lb{position:relative;font-family:var(--disp);font-weight:600;font-size:10.5px;
letter-spacing:.17em;text-transform:uppercase;color:var(--gold-2)}
.askcard b{position:relative;display:block;font-family:var(--disp);font-weight:700;font-size:19px;
line-height:1.24;letter-spacing:-.016em;color:#fff;margin-top:12px}
.askcard p{position:relative;font-size:14.4px;line-height:1.62;color:#bcc9e2;margin:12px 0 0}
.askcard .btn{position:relative;width:100%;justify-content:center;margin-top:20px}
.askcard .btn svg{width:17px;height:17px;flex:none}
.askcard ul{list-style:none;margin:22px 0 0;padding:19px 0 0;border-top:1px solid rgba(255,255,255,.17);position:relative}
.askcard li{display:flex;align-items:baseline;gap:11px;padding:6px 0}
.askcard li b{font-size:19px;margin:0;color:var(--gold-2);min-width:44px;letter-spacing:-.02em}
.askcard li span{font-size:13.4px;color:#b6c4de}
.askcard .hrs{position:relative;font-size:12.4px;color:#8d9dbd;margin:16px 0 0;text-align:center}
@media(max-width:980px){
.safaqgrid{grid-template-columns:1fr;gap:26px}
.askcard{position:static;max-width:520px}
}
/* ---- the in-city neighborhood line on the Atlanta anchor tile ----
Added 2026-08-18 once the nine W3 location pages existed. The hub used to be a dead end for
the six in-city neighborhoods that are not separate cities on the 29-city list. */
.satile h4 a{border-bottom:1px solid var(--line-2)}
.satile h4 a:hover{border-bottom-color:var(--navy)}
.safeat h4 a{color:#fff;border-bottom:1px solid rgba(252,201,82,.45)}
.safeat h4 a:hover{border-bottom-color:var(--gold-2)}
.feathoods{font-size:13.4px !important;line-height:1.75 !important;color:#93a5c6 !important;
margin-top:14px !important;padding-top:13px;border-top:1px solid rgba(255,255,255,.14);max-width:none !important}
.feathoods a{color:#dbe4f5;border-bottom:1px solid rgba(219,228,245,.3)}
.feathoods a:hover{color:var(--gold-2);border-bottom-color:var(--gold-2)}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
v2 — /service-area/ rebuilt onto the 14-section hub spine, 2026-08-25.
See SERVICE-AREA-REBUILD-2026-08-25.md.
═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* ─── the hero heading pair inside .sahero ───────────────────────────────────────────────────
The LAYOUT half of the pair (.hhead, .h3l, .hhead>.eyebrow/.h1t/.h1a order, .h1a type) is
already global in ie.css and needs nothing here. What is NOT global is everything ie.css scopes
to `.hero`: the display size, the white text, the gold-2 eyebrow, and the `.u` underline bar.
This hero is `.sahero`, so without the block below the tagline rendered at body size in navy
and the underline did not paint at all.
⚠ Sizes are DELIBERATELY SMALLER than both `.sahero h1`'s old 34-58px clamp and ie.css's
38-62px. This hero sits beside the coverage console in a 1.06/.94 grid, so the headline gets a
~575px column rather than a hub hero's full half. At 58px the tagline "One office, ten areas on
the same map." broke to THREE lines on desktop and pushed the lede and both CTAs down; it also
put the gold `.u` on line two of three, which is what made _herocheck report a 79px underline
gap against the canonical's 15px. At 46px it sets in two lines. Measured, not guessed. */
.sahero .hhead{margin:18px 0 0}
.sahero .hhead,.sahero .h1t{font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.025em}
.sahero .h1t{color:#fff;margin:0}
.sahero .hhead .u{position:relative;z-index:0;white-space:nowrap;color:#fff}
/* z-index:-1 on the bar needs `.u` to form a stacking context, which is what z-index:0 above is
for. Without it the bar paints behind the hero's navy wash instead of behind the text. Same
defect ie.css records at its own v-note for the service heroes. */
.sahero .hhead .u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
background:var(--gold-2);border-radius:3px;z-index:-1;opacity:.92}
.sahero .hhead .eyebrow{color:var(--gold-2)}
.sahero .hhead .eyebrow::before{background:var(--gold-2)}
/* `.sahero h1 em` is now DEAD: the h1 was "Service Areas in
Atlanta, GA" and is the
brief's eyebrow + area line pair instead. Left in place above rather than deleted, because
nothing else in the build reads it and removing it is a separate, unrelated diff. */
/* ─── §3: the three area names took the h3 level, the chapter head became a label ─────────────
Heading levels on this page are 1/2/3 only as of 2026-08-25. "Atlanta and Decatur" was an
with three s under it; it is a now, which is what it always read as, and it
keeps the h3's exact type so the band looks unchanged. */
.sachap .hd .hdl{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.1vw,27px);
color:var(--navy);letter-spacing:-.02em;flex:none}
.safeat h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.3vw,28px);
color:#fff;letter-spacing:-.02em}
.satile h3{font-family:var(--disp);font-weight:700;font-size:17.4px;color:var(--navy);
letter-spacing:-.014em}
.satile h3 a{color:inherit}
@media(max-width:760px){.sachap .hd .hdl{font-size:20px}}
/* ─── §11: the map band's copy column leads with an .eyebrow now ──────────────────────────────
It used to open with the numbered `.chap` device, which moved to §5 when the old "MAP + RECAP"
band was split into the editorial intro (§5) and SERVICE AREA (§11). */
.samap .copy .eyebrow{margin-bottom:2px}
/* ─── §3 chapter head: a PRE-EXISTING mobile overflow, fixed 2026-08-25 ──────────────────────
`.sachap .hd` is a non-wrapping flex row holding a `flex:none` heading and a `flex:none` 169px
count chip, so it has never fitted a phone. Measured on the PRE-REBUILD page: 72px of
horizontal page overflow at both 390px and 360px, with the chip's right edge at 418px. It was
not introduced by the rebuild, and the rebuild had already taken it to 28px at 390px, but it is
in a band this rebuild edited so it gets fixed rather than shipped.
flex-wrap lets the count chip drop to its own line when the row runs out of width. Desktop is
unchanged: the row has room there and never wraps. */
.sachap .hd{flex-wrap:wrap}
@media(max-width:620px){
.sachap .hd .rule{min-width:20px}
.sachap .hd .ct{letter-spacing:.1em}
}
/* ─── §5: the intro band reuses .sachips and .btns outside their original .samap parent ───────
`.samap .btns{margin-top:26px}` is scoped to the map band, so when the old "MAP + RECAP" band
was split and its copy column became the §5 editorial intro, the button row lost its top margin
and sat flush against the `.sachips` row. Caught on a screenshot, not by a counter. */
.sec.intro .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
v3 — §4/§5 AREA LEDGER, 2026-08-27.
The doc-native recompose (08-26) put the ten draft area blurbs on the generic .cxgrid/.cxcard
band, which reads like every other page and left .feathoods (a DARK-tile component, #93a5c6
text) illegible on white. This block gives the two area sections the page's own coverage
language back: the sticky navy .sanav navigator (unchanged, reused from §3 of this file) beside
a numbered LEDGER, one stop per area on a hairline route rail, closing with the colour-coded
.salink chips. Gold-free numeral markers on purpose: the owner has rejected icon tiles twice
("icons feel AI") and approved numeral devices (.bandsteps). Content strings are the Notion
draft's, verbatim; only presentation lives here.
═══════════════════════════════════════════════════════════════════════════════════════════════ */
.saatlas{display:grid;grid-template-columns:292px 1fr;gap:clamp(28px,3.6vw,56px);align-items:start;margin-top:46px}
/* ---- the ledger ----
v3.1 same day (owner feedback on sight: "remove numbers and this need to be in card"): the
numbered .pk markers, the route rail and the .ix nav indexes are GONE, and each stop is a CARD
in the .satile language of this file — same border, same gold top-line hover — so the ledger
and the county tiles read as one family. Do not reintroduce numbering without an explicit ask. */
.saledger{display:grid;gap:16px}
.saledger.lone{max-width:860px;margin:38px auto 0}
.sastop{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
border-radius:18px;padding:26px 28px 24px;scroll-margin-top:104px;
transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.sastop::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.sastop:hover{border-color:var(--line-2);box-shadow:0 16px 34px rgba(20,56,131,.09);transform:translateY(-2px)}
.sastop:hover::before,.sastop:target::before{transform:scaleX(1)}
.sastop .bd{min-width:0}
.sastop h3{font-family:var(--disp);font-weight:700;font-size:clamp(19px,1.8vw,22px);
color:var(--navy);letter-spacing:-.016em;margin:0}
.sastop h3 a{color:inherit;border-bottom:1px solid var(--line-2);transition:border-color .18s ease}
.sastop h3 a:hover{border-bottom-color:var(--gold)}
.sastop .bd>p{font-size:15.2px;line-height:1.7;color:var(--muted);margin:11px 0 0;max-width:74ch}
/* the chips row reuses .salinks/.salink from §3 of this file unchanged; only the label needs a
light-ground colour, since its base value was picked for the navy anchor tile */
.sastop .salinks{margin-top:16px}
.sastop .salinks .lab{color:var(--muted)}
@media(max-width:1040px){
.saatlas{grid-template-columns:1fr;gap:26px}
/* .sanav goes static and its list goes two-up via the §3 rules in this file */
}
@media(max-width:620px){
.sastop{padding:22px 20px 20px;border-radius:16px}
}
/* ─── §3 ANSWER-FIRST fact row: keep the three facts on one rule ──────────────────────────────
`.factrow` (ie-v16.css) is a WRAPPING flex row whose `.f + .f` carries a left border and 26px of
left padding. That is fine on the service canonical, whose labels are short ("Written price",
"Often same visit", "Every brand"), but this page's are longer and the third item wrapped to a
second row while KEEPING the left border and padding, so it rendered indented under the first
two with a stray vertical divider beside it. Caught on a screenshot, not by any counter.
A three-column grid cannot wrap mid-row, so the divider always falls between columns. Above the
ie-v16.css 640px breakpoint only; below it that sheet already stacks the items full-width with a
top border, which is the correct mobile treatment and is left alone. */
@media(min-width:641px){
.sec.intro .factrow{display:grid;grid-template-columns:repeat(3,auto);justify-content:start}
}