@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;src:url("/assets/oswald-variable.ttf") format("truetype")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/public-sans-variable.woff2") format("woff2")}

/* Selected approved identity: Espresso Amber; Oswald + Public Sans.
   Source: renderer-reference/data/palettes-craftsman-standard.php and font-pairings-craftsman-standard.php.
   The historical verdigris semantic variable names resolve to the later approved amber palette. */
:root{--pine:#E0922F;--pine-dk:#BE7820;--pine-lt:#F0AE57;--pine-rgb:224,146,47;--charcoal:#1F1A17;--char2:#423A33;--cream:#F6F2EC;--sand:#ECE6DD;--sand-dk:#DAD2C6;--muted:#6B6157;--font-display:"Oswald",Arial,sans-serif;--font-body:"Public Sans",system-ui,sans-serif}


/* ============================================================================
   TOKEN ALIASES — map the family's semantic industrial names onto the emitter's
   palette/font slots. Helper (derived) tones get their own names. --muted passes through.
   ============================================================================ */
:root{
  --verd:var(--pine); --verd-dk:var(--pine-dk); --verd-lt:var(--pine-lt);
  --verd-rgb:var(--pine-rgb,224,146,47);
  --ink:var(--charcoal);            /* warm espresso dark — the dominant DARK-band ground (now punctuation) */
  --ink2:color-mix(in srgb,var(--charcoal) 90%,#ffffff);  /* slightly lifted espresso for panels */
  --concrete:var(--char2);          /* poured warm-walnut band base */
  --concrete2:color-mix(in srgb,var(--char2) 90%,#000);   /* deeper walnut */
  --concrete-lt:color-mix(in srgb,var(--char2) 78%,#ffffff); /* raised plate face (on dark) */
  --paper:var(--cream); --cool:var(--sand); --line:var(--sand-dk);
  --paper2:color-mix(in srgb,var(--cream) 90%,var(--sand-dk)); /* deeper oat/kraft for the MIDDLE light band (cs-alt2) */
  /* --on-dark-mut LIFTED .66 -> .84 (Alex 2026-07-26: "text on the roof replacement page looks kinda small,
     it's hard to read… why does it seem smaller?"). It was never a SIZE problem — body runs 16-17px — it was
     that nearly every band is light-on-dark, and light text at 66% on a dark ground optically loses weight,
     which the eye reports as "smaller". Measured on the #35312e band: 5.8:1 -> 8.2:1. */
  --on-dark:#f1ece6; --on-dark-mut:rgba(241,236,230,.84);  /* warm off-white text on the espresso grounds */
  --ink-btn:color-mix(in srgb,var(--charcoal) 80%,#000);   /* deep espresso for DARK text on amber buttons */
  --plate-lt:#FBF8F3;            /* raised warm plate face on LIGHT bands (cards/plates on paper) */
  --disp:var(--font-display); --sans:var(--font-body);
  --wrap:1180px;
  --steel:color-mix(in srgb,var(--charcoal) 82%,#000); /* deep espresso steel for topbar/footer */
}

/* ============================================================================
   BASE — reset, type, links, the page ground, eyebrows, buttons, photo slots.
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:.99;letter-spacing:.005em;text-transform:uppercase;color:#fff}
p{line-height:1.6}
.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}
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;background:var(--verd);color:var(--ink-btn);font-weight:700}
.skip-link:focus{width:auto;height:auto;clip:auto;clip-path:none;left:0;top:0;z-index:9999;padding:12px 20px}

.cs-eyebrow{font:600 12px/1 var(--disp);letter-spacing:.04em;color:var(--verd);display:inline-flex;align-items:center;gap:12px}
.cs-eyebrow::before{content:"";width:30px;height:3px;background:var(--verd)}
.cs-eyebrow.on-dark{color:var(--verd-lt)}
.cs-ci{color:var(--verd)}

/* CSS photo placeholders — labeled, self-contained honest fillable slots */
.cs-ph{position:relative;background:linear-gradient(155deg,#3a322c,#1d1814);overflow:hidden;min-height:100%}
.cs-ph::after{content:attr(data-l);position:absolute;left:14px;bottom:12px;font:700 10px/1.3 var(--sans);letter-spacing:.14em;color:rgba(255,255,255,.55);z-index:2}
.cs-ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:26px 26px}
.cs-ph.steel{background:linear-gradient(155deg,#4c4138,#2a221d)}
.cs-ph.steel::before{background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 2px,transparent 2px 11px)}
.cs-ph.deep{background:linear-gradient(160deg,#2e2620,#161210)}

/* real-image auto-tint layer — image never edited; tint via overlay */
.cs-vimg{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;min-height:100%}
.cs-vimg::after{content:"";position:absolute;inset:0;pointer-events:none}
/* WARM espresso scrim, LIGHTENED so the real warm roof/sky/crew photos show (was ~.82-.96, now ~.62-.78) */
.cs-vimg.tint-dark::after{background:linear-gradient(180deg,rgba(28,23,20,.34),rgba(28,23,20,.7))}
.cs-vimg.tint-side::after{background:linear-gradient(105deg,rgba(31,26,23,.84) 0%,rgba(31,26,23,.66) 46%,rgba(31,26,23,.28) 100%)}
.cs-vimg.tint-bottom::after{background:linear-gradient(0deg,rgba(31,26,23,.82) 10%,rgba(31,26,23,.2) 78%)}
.cs-vlbl{position:absolute;left:14px;bottom:11px;z-index:3;font:700 9px/1.3 var(--sans);letter-spacing:.14em;color:rgba(255,255,255,.55)}

.btn,.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 13px/1 var(--disp);letter-spacing:.13em;text-transform:uppercase;padding:16px 28px;cursor:pointer;transition:background .16s,color .16s,border-color .16s;border:2px solid transparent}
.cs-btn-verd,.btn-primary{background:var(--verd);color:var(--ink-btn)}
.cs-btn-verd:hover,.btn-primary:hover{background:var(--verd-lt)}
.cs-btn-out{border-color:rgba(255,255,255,.32);color:#fff}
.cs-btn-out:hover{border-color:var(--verd);color:var(--verd-lt)}
/* outline button on a LIGHT band reads in espresso, not white-on-paper */
.cs-proc-light .cs-btn-out,.cs-calc .cs-btn-out,.cs-svc.cs-svc-light .cs-btn-out,.cs-specs.cs-specs-light .cs-btn-out,.prose-sec .cs-btn-out,.cs-seccta .cs-btn-out{border-color:var(--border);color:var(--ink)}
.cs-proc-light .cs-btn-out:hover,.cs-calc .cs-btn-out:hover,.cs-svc.cs-svc-light .cs-btn-out:hover,.cs-specs.cs-specs-light .cs-btn-out:hover,.prose-sec .cs-btn-out:hover,.cs-seccta .cs-btn-out:hover{border-color:var(--verd);color:var(--verd-dk)}
.cs-btn-lg{padding:18px 34px;font-size:14px}
/* E7 mid-page section CTA (Alex 2026-07-24 CTA doctrine): a decision-point button row inside the intro copy column */
/* F44 (Alex 2026-08-11): "the buttons on the intro section... need to be the same size. The call and
   then send the details, those need to be the same size." Under flex each button sized to its own label,
   so "CALL (469) 378-5786" and "SEND THE DETAILS" rendered visibly unequal. An inline-grid whose columns
   are all 1fr makes every button the width of the widest one, and the container still shrink-wraps to
   its content so a left- or centre-aligned row is unchanged. Mobile flips to rows below (:1187). */
.cs-seccta{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:26px}
.cs-seccta .cs-btn{white-space:nowrap}

section{position:relative}
.cs-head{max-width:680px}
.cs-head h2{font-size:46px;margin-top:16px;color:#fff;letter-spacing:.004em}
.cs-head h2.ink{color:var(--ink)}
.cs-head p{color:var(--on-dark-mut);font:400 17px/1.6 var(--sans);margin-top:16px}
.cs-head p.ink{color:var(--concrete)}
.cs-head-center{margin:0 auto;text-align:center}
.cs-head-center p{margin-left:auto;margin-right:auto}
/* home-intro fix (Alex 2026-07-27): the section-CTA button row is a flex row, so text-align on the centered
   statement never centered it — center the buttons whenever the intro text is centered */
.cs-head-center .cs-seccta{justify-content:center}

/* ============================================================================
   TOPBAR — own industrial steel strip (header.php renders it after the suppressed shared strip)
   ============================================================================ */
.cs-topbar{background:var(--steel);color:var(--on-dark-mut);font-size:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.cs-topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 30px;letter-spacing:.04em}
/* the informational items sit centered in the bar (the 2026-07-26 call plate came OUT — Alex ruling
   2026-07-27: on a phone-live site the number lives in the NAVBAR, replacing the estimate button) */
.cs-topbar .l{flex:1;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;text-transform:uppercase;font:600 11px/1.4 var(--disp);letter-spacing:.13em}
.cs-topbar .l span{display:inline-flex;align-items:center;gap:9px}
.cs-topbar .l span::before{content:"";width:6px;height:6px;background:var(--verd);transform:rotate(45deg);flex:none}
.cs-topbar b{color:#fff;font:700 13px/1 var(--disp);letter-spacing:.03em}

/* ============================================================================
   HEADER / NAV — dark steel sticky bar, condensed all-caps links (own taxonomy).
   The shared header.php emits <header><div class="nav"><a class="logo">…  + rr_cs_render_nav().
   ============================================================================ */
header{position:sticky;top:0;z-index:40;background:rgba(22,24,27,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
header .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--wrap);margin:0 auto;padding:14px 30px}
header .logo{display:inline-flex;align-items:center;flex:none}
/* brand lockup (parts/logo.php) — restyle the shared lockup classes to the family idiom */
.brandlock{display:inline-flex;align-items:center;gap:13px}
.brandlock .bl-mk{width:42px;height:42px;flex:none}
.brandlock .bl-stack{display:flex;flex-direction:column;line-height:1}
.brandlock .bl-name{font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.brandlock .bl-tag{font:700 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--verd-lt);margin-top:5px}
.brandlock.bl-wordmark .bl-tagrow{display:flex;align-items:center;gap:8px;margin-top:5px}
/* .bl-bar — the wordmark layout's small accent beside the tagline (data/logo-designs.php:20).
   MEASURED before adding, not inferred from css-coverage's message: the <svg> carries a viewBox
   and NO width/height attributes, so with no rule it computed to 0px × 0px on all 33 pages at
   1440px AND at TRUE 390px — the accent was not "unstyled", it was invisible. Eight sibling
   family stylesheets plus the base styles.php all carry this exact declaration at 11px, and
   craftsman-standard was the only family missing it, so this is a one-family omission and not a
   design choice. Scoped under .brandlock to match this file's own convention for bl-* rules. */
.brandlock .bl-bar{height:11px;width:auto;display:block}

.cs-nav.nav-links{display:flex;gap:28px;font:600 14px/1 var(--disp);letter-spacing:.13em;text-transform:uppercase;align-items:center}
.cs-nav.nav-links>a,.cs-nav .nav-top{padding:6px 0;border-bottom:2px solid transparent;color:var(--on-dark);transition:color .15s,border-color .15s;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.cs-nav.nav-links>a:hover,.cs-nav .nav-top:hover{border-color:var(--verd);color:var(--verd-lt)}
.cs-nav .nav-item.has-drop{position:relative}
.cs-nav .nav-caret{transition:transform .15s}
.cs-nav .nav-drop{position:absolute;top:100%;left:0;min-width:220px;background:var(--ink2);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 44px -20px rgba(0,0,0,.6);padding:8px;display:none;flex-direction:column;z-index:50}
.cs-nav .nav-item.has-drop:hover .nav-drop,.cs-nav .nav-item.has-drop:focus-within .nav-drop,.cs-nav .nav-item.has-drop.open .nav-drop{display:flex}
.cs-nav .nav-drop a{font:600 12px/1.3 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark);padding:10px 12px;border-bottom:0}
.cs-nav .nav-drop a:hover{background:rgba(var(--verd-rgb),.12);color:var(--verd-lt)}
/* the redundant bottom hub button was removed from the dropdowns (ratified standard 2026-07-22); its rule went with it. NOTE: do not name that class here even in a comment - the standard is verified by grepping the RENDERED page, and this stylesheet inlines into it. */

.cs-navcta{display:flex;align-items:center;gap:18px}
.cs-navnum{font:700 17px/1 var(--disp);letter-spacing:.04em;color:#fff;white-space:nowrap}
.cs-navnum:hover{color:var(--verd-lt)}
.cs-navbtn{padding:13px 22px}
/* NAVBAR PHONE (Alex ruling 2026-07-27): on a phone-live site the number REPLACES the estimate button as
   the nav CTA — a filled tel: plate, phone icon + number only, the row's primary action. Below the
   hamburger breakpoint the same element restyles to the sticky nav's full-width second-row tap-to-call
   (see the 880px block), so the number renders exactly once in the header at every width. */
.cs-navcall{display:inline-flex;align-items:center;gap:10px;background:var(--verd);color:var(--ink-btn);padding:13px 18px;white-space:nowrap;transition:background .16s}
.cs-navcall:hover{background:var(--verd-lt)}
.cs-navcall svg{flex:0 0 auto;width:18px;height:18px}
.cs-navcall b{font:700 16px/1 var(--disp);letter-spacing:.03em}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;cursor:pointer;padding:4px}

main{display:block}

/* ============================================================================
   HERO — billboard over a dark crew/roof photo + the STAMPED lead form (form-bearing).
   ============================================================================ */
.cs-hero{position:relative;background:var(--ink);overflow:hidden}
.cs-hero .cs-bgph{position:absolute;inset:0;z-index:0}
.cs-hero .cs-bgph .cs-vimg,.cs-hero .cs-bgph .cs-ph{position:absolute;inset:0;min-height:0}
/* keep the industrial grid texture over the hero PHOTO (it lived on .cs-ph; real photos via .cs-vimg bypass it) */
.cs-hero .cs-bgph .cs-vimg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;mix-blend-mode:overlay;opacity:.6}
/* hero scrim: STRONG warm espresso on the text side so the billboard copy + form read AA, LIGHTER on the
   photo side so the warm roof/crew photo shows through (the directive's "strongest on the text side"). */
.cs-hero .cs-bgph .cs-vimg.tint-side::after{background:linear-gradient(105deg,rgba(28,23,20,.92) 0%,rgba(28,23,20,.78) 44%,rgba(28,23,20,.4) 100%)}
.cs-hero .wrap{position:relative;z-index:2;padding:54px 30px 64px}
.cs-hero .cs-eyebrow{margin-bottom:18px}
.cs-hero h1{font-size:66px;color:#fff;letter-spacing:.004em;max-width:16ch}
.cs-hero .cs-lead{font:500 19px/1.5 var(--sans);color:var(--on-dark);max-width:46ch;margin:20px 0 0}
.cs-scope{display:flex;gap:28px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.cs-scope div{font:600 12px/1.5 var(--disp);letter-spacing:.13em;color:var(--on-dark-mut)}
.cs-scope div b{display:block;color:#fff;font-size:14px;margin-bottom:3px}
.cs-scope div b::before{content:"";display:inline-block;width:7px;height:7px;background:var(--verd);margin-right:9px;transform:translateY(-1px)}

/* hero split layouts (v1 copy+form, v3 copy+photo+form) */
.cs-hero-split{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
.cs-hero-copy{min-width:0}
/* F40 RIDER — RECOMPOSITION, NOT DELETION (Alex 2026-08-11): "if we get rid of the boxes, don't just
   leave the h2s and the hero section as is - things will have to get centered around, so the h2s don't
   look too far up, because those boxes took a lot of space." The strip used to sit UNDER this block and
   this 30px was the gap to it; with the strip gone by default the margin hangs off nothing. */
.cs-heroV2 .cs-hero-top{max-width:none;margin-bottom:0}
/* F41 — "I don't mind the h1 if that's what we wanna capture, but we have to have some sort of
   self-awareness to see that six rows of text is not okay. Make it shorter. Make the text box wider."
   The H1 WORDS are plan-locked rank surface and are untouched; this is the box. 12ch was tuned for a
   SHORT headline ("Roofers in / Frisco, TX" as two balanced lines) and silently became a six-row column
   for a 60-character one like melissa's. 20ch holds frisco's two-line break and brings a long headline
   to three rows or fewer; text-wrap:balance evens the rows and is what kills the orphan word his
   self-awareness order names (falls back to normal wrapping where unsupported — no layout risk). */
.cs-heroV2 h1{max-width:24ch;font-size:50px;text-wrap:balance}
.cs-heroV2 .cs-hero-left{min-width:0}
.cs-heroV2 .cs-cstrip{display:grid;grid-template-columns:repeat(3,1fr)}
.cs-heroV2 .cs-cstrip .c{border-bottom:0;border-right:1px solid rgba(255,255,255,.1)}
.cs-heroV2 .cs-cstrip .c:last-of-type{border-right:0}
.cs-heroV2 .cs-cstrip-src{grid-column:1/-1}
/* F40 RIDER (cont.) — the copy column is materially shorter without the fact strip, and `start` pinned
   it to the top of a much taller form plate, which is exactly the "h2s look too far up" he described.
   Centering the two columns against each other is the recomposition he asked for. */
.cs-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}

/* honest area-fact strip (hero v2) — stamped read-outs */
.cs-cstrip{display:grid;grid-template-columns:1fr;gap:0;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18)}
.cs-cstrip .c{padding:22px 22px;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-cstrip .c:last-of-type{border-bottom:0}
.cs-cstrip .n{display:inline-block;font:700 36px/.92 var(--disp);color:#fff;position:relative;padding-bottom:8px}
.cs-cstrip .n::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:4px;background:var(--verd)}
.cs-cstrip .l{display:block;margin-top:11px;font:600 12px/1.4 var(--disp);letter-spacing:.01em;color:rgba(231,234,236,.7)}
.cs-cstrip-src{padding:14px 22px;font:400 11px/1.5 var(--sans);color:var(--on-dark-mut);border-top:1px solid rgba(255,255,255,.1)}

/* hero v3 framed photo plate + inset form */
.cs-hero-shot{position:relative;min-height:560px;display:flex}
.cs-hero-shot .cs-vimg,.cs-hero-shot .cs-ph{position:absolute;inset:0;min-height:0}
.cs-keyline{position:absolute;inset:18px;border:2px solid var(--verd);pointer-events:none;z-index:3}
.cs-hero-shot .cs-formplate{position:relative;z-index:5;margin:24px 24px 24px auto;width:min(440px,calc(100% - 48px));align-self:center}


/* ---------------------------------------------------------------------------
   PHONE-PROMINENCE (Alex ruling 2026-07-26) — the call channel is the page's
   PRIMARY action, not a footnote. One shared button treatment (.cs-btn-call)
   so the number reads the same weight in the hero, the mid-page band, and the
   close; the estimate button drops to .cs-btn-out wherever they sit together.
   --------------------------------------------------------------------------- */
/* the number is the label, so it takes numerals-first sizing, not nav-label sizing */
.cs-btn-call{font-size:15px;letter-spacing:.05em;white-space:nowrap}
.cs-btn-call svg{flex:0 0 auto;width:19px;height:19px}
/* HERO call block — the first-screen two-channel action, above the scope strip */
.cs-herocall{margin-top:24px}
.cs-herocall-urgent{font:600 14px/1.5 var(--sans);color:#fff;margin:0 0 12px;padding-left:13px;border-left:3px solid var(--verd)}
.cs-herocall-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cs-herocall-note{flex:1 1 20ch;min-width:0;font:400 14px/1.5 var(--sans);color:var(--on-dark-mut)}

/* the stamped form plate — the lead form in the family's plated idiom */
.cs-formplate{background:rgba(16,18,21,.96);border:1px solid rgba(255,255,255,.1);border-top:5px solid var(--verd);padding:30px 28px}
.cs-formplate-head{margin-bottom:18px}
.cs-formplate .cs-ft{display:block;font:700 21px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.cs-formplate .cs-fs{display:block;font:400 13px/1.4 var(--sans);color:var(--on-dark-mut);margin-top:7px}
/* optional who-shows-up reassurance line (config: hero.form_trust) — ruled off from the plate head */
.cs-formplate .cs-ftrust{display:block;font:600 12.5px/1.5 var(--sans);color:var(--verd-lt);margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.1)}

/* sticky phone bar (secondary mobile CTA) */
.cs-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--verd);color:var(--ink-btn);box-shadow:0 -8px 24px -10px rgba(0,0,0,.5);display:none}
.cs-stickybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 30px}
.cs-stickybar .msg{font:700 14px/1.2 var(--disp);letter-spacing:.1em;text-transform:uppercase}
.cs-stickybar .msg span{display:block;font:500 12px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:rgba(8,17,14,.78);margin-top:2px}
.cs-stickybar .call{display:inline-flex;align-items:center;gap:11px;background:var(--ink-btn);color:#fff;font:700 16px/1 var(--disp);letter-spacing:.06em;padding:13px 20px;white-space:nowrap}

/* ============================================================================
   THE STAMPED LEAD FORM (rr_lead_form output inside .cs-form) — dark, condensed labels, verdigris focus.
   ============================================================================ */
.cs-form .est-form,.cs-form form{display:grid;gap:13px}
.cs-form .row,.cs-form .f.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-form .f,.cs-form>form>div{min-width:0}
.cs-form label{display:block;font:600 11.5px/1 var(--disp);letter-spacing:.005em;color:var(--on-dark-mut);margin-bottom:7px}
.cs-form label.ef-check{display:flex;align-items:flex-start;gap:10px;font:500 13px/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--on-dark);cursor:pointer;margin:0}
.cs-form input,.cs-form select,.cs-form textarea{width:100%;background:#241d18;border:1px solid rgba(255,255,255,.18);color:#fff;font:500 15px/1.2 var(--sans);padding:13px 14px;outline:none}
.cs-form input::placeholder,.cs-form textarea::placeholder{color:rgba(231,234,236,.55)}
.cs-form input:focus,.cs-form select:focus,.cs-form textarea:focus{border-color:var(--verd)}
.cs-form select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--verd-lt) 50%),linear-gradient(135deg,var(--verd-lt) 50%,transparent 50%);background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.cs-form textarea{resize:vertical;min-height:64px;line-height:1.5}
.cs-form .ef-check input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--verd)}
.cs-form .lf-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--on-dark-mut)}
.cs-form button[type=submit],.cs-form .btn-primary{width:100%;background:var(--verd);color:var(--ink-btn);border:2px solid transparent;font:700 14px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:16px 24px;cursor:pointer;transition:background .16s;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.cs-form button[type=submit]:hover{background:var(--verd-lt)}
.cs-form .fineprint,.cs-form .form-consent{font:400 11px/1.5 var(--sans);color:var(--on-dark-mut);margin:0}
.cs-form .lf-hp{display:none}

/* ============================================================================
   SIGNATURE — stamped counter plates (HONEST local data + held standards).
   ============================================================================ */
.cs-counter{background:var(--concrete);border-top:4px solid var(--verd);position:relative;padding:38px 0}
.cs-counter::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 64px);pointer-events:none}
.cs-counter .wrap{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
/* the NOAA source/footnote line spans the WHOLE band and is centered (not a grid cell under plate 1) */
.cs-counter .cs-counter-srcwrap{display:block;text-align:center}
.cs-counter .cs-plate{padding:0 36px;text-align:center;position:relative}
.cs-counter .cs-plate + .cs-plate::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.14)}
.cs-counter .n{display:inline-block;font:700 50px/.96 var(--disp);color:#fff;letter-spacing:.01em;position:relative;padding-bottom:9px}
.cs-counter .n::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:54px;height:4px;background:var(--verd)}
.cs-counter .lab{display:block;margin-top:14px;font:600 13px/1.4 var(--disp);letter-spacing:.01em;color:rgba(231,234,236,.74)}
.cs-counter-src{font:400 11px/1.5 var(--sans);color:rgba(231,234,236,.6);margin-top:24px;font-style:italic}

/* signature v2 — bolted plate grid over dark (compact band; source line centered under the WHOLE band) */
.cs-sig2{background:var(--ink);padding:58px 0}
.cs-sig2 .cs-plategrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.cs-bplate{background:var(--concrete-lt);border:1px solid rgba(255,255,255,.1);padding:30px 24px 26px;position:relative;text-align:left;min-width:0}
.cs-bplate .bolt{position:absolute;width:6px;height:6px;border:1px solid rgba(255,255,255,.3);border-radius:50%}
.cs-bplate .bolt-tl{top:9px;left:9px}
.cs-bplate .bolt-tr{top:9px;right:9px}
.cs-bplate .n{display:inline-block;font:700 44px/.9 var(--disp);color:#fff;position:relative;padding-bottom:9px;word-break:break-word}
.cs-bplate .n::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;background:var(--verd)}
.cs-bplate .lab{display:block;margin-top:14px;font:600 12px/1.4 var(--disp);letter-spacing:.01em;color:rgba(231,234,236,.72)}
.cs-sig2 .cs-counter-src{margin-top:20px;text-align:center}

/* ============================================================================
   SERVICES — split tiles / dark photo tiles / industrial ledger.
   ============================================================================ */
.cs-split{padding:0;background:var(--ink)}
/* thicker verdigris divider between the two halves so residential/commercial read as distinct tiles */
.cs-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--verd)}
.cs-tile{position:relative;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:44px;overflow:hidden;isolation:isolate;border-top:4px solid var(--verd)}
.cs-tile-svc{text-decoration:none;color:inherit}
.cs-tile-svc:hover,.cs-tile-svc:focus-visible{border-top-color:var(--verd-lt)}
.cs-tile .cs-vimg,.cs-tile .cs-ph{position:absolute;inset:0;z-index:-1;min-height:0}
.cs-tile .kx{font:600 13px/1 var(--disp);letter-spacing:.02em;color:var(--verd-lt)}
.cs-tile h3{font-size:50px;color:#fff;margin:14px 0 0;letter-spacing:.004em}
.cs-tile-scope{margin-top:18px}
.cs-tile-scope ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px}
.cs-tile-scope li{font:600 12px/1 var(--disp);letter-spacing:.1em;color:var(--on-dark);border:1px solid rgba(255,255,255,.24);padding:8px 13px}
.cs-tile .more{margin-top:20px;font:700 13px/1 var(--disp);letter-spacing:.14em;color:#fff;display:inline-flex;align-items:center;gap:9px}
.cs-tile .more::after{content:"";width:40px;height:2px;background:var(--verd)}

/* services v2 — split-flavored LISTING (fixed at source 2026-07-26/27: v2 used to re-render the
   residential/commercial split and drop the services list). The REAL services as compact full-bleed photo
   tiles on the verdigris-divided two-up grid, riding the light band like v1/v3. */
.cs-svc-split2 .cs-split2-grid{margin-top:46px}
.cs-split2-grid .cs-tile{min-height:300px;padding:30px}
.cs-split2-grid .cs-tile h3{font-size:30px}
.cs-split2-grid .cs-tile p{font:400 14.5px/1.55 var(--sans);color:var(--on-dark);margin-top:9px;max-width:56ch;text-shadow:0 1px 6px rgba(8,9,10,.7)}
.cs-split2-grid .cs-tile .more{margin-top:16px;font-size:12px}

.cs-svc{background:var(--ink2);padding:90px 0}
.cs-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.cs-card{position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.07)}
.cs-card .cs-vimg,.cs-card .cs-ph{position:absolute;inset:0;z-index:-1;min-height:0}
/* service-card kicker: a dark chip behind bright verdigris text so the label reads on ANY photo tile (was bare amber, low-contrast) */
.cs-card .ix{display:inline-flex;align-self:flex-start;font:700 12px/1 var(--disp);letter-spacing:.08em;color:var(--verd-lt);background:rgba(16,18,21,.82);border-left:3px solid var(--verd);padding:7px 11px}
.cs-card h3{font-size:27px;color:#fff;margin:13px 0 8px;letter-spacing:.004em}
.cs-card p{font:400 14px/1.5 var(--sans);color:var(--on-dark);text-shadow:0 1px 6px rgba(8,9,10,.7)}

.cs-svc-ledger{background:var(--ink2)}
.cs-ledger{margin-top:44px;border-top:1px solid rgba(255,255,255,.14)}
.cs-lrow{display:grid;grid-template-columns:1fr auto;gap:24px 30px;align-items:center;padding:28px 6px;border-bottom:1px solid rgba(255,255,255,.12);transition:background .15s}
.cs-lrow:hover{background:rgba(var(--verd-rgb),.07)}
.cs-lrow .t h3{font-size:27px;color:#fff;letter-spacing:.004em;position:relative;padding-left:26px}
.cs-lrow .t h3::before{content:"";position:absolute;left:0;top:.16em;width:6px;height:.78em;background:var(--verd)}
.cs-lrow .t p{font:400 14.5px/1.55 var(--sans);color:var(--on-dark-mut);max-width:64ch;padding-left:26px;margin-top:6px}
.cs-lrow .go{font:700 12px/1 var(--disp);letter-spacing:.14em;color:var(--verd-lt);white-space:nowrap}
.cs-lrow:hover .go{color:var(--verd)}

/* breadth display §1b — hub categorized index + the home/area "See all services" link (light band) */
.cs-svc-index .cs-ledger{margin-top:16px}
.cs-svc-cat{margin-top:40px}
.cs-svc-cat span{display:inline-block;font:700 12.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--verd-dk);padding-bottom:9px;border-bottom:2px solid var(--verd)}
.cs-svc-all{margin-top:34px}
.cs-svc-all a{display:inline-block;font:700 13px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--verd-dk);padding-bottom:6px;border-bottom:2px solid var(--verd);transition:color .15s,border-color .15s}
.cs-svc-all a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* commercial systems matrix (commercial-roofing hub; honest capabilities, stamped cards on a dark band) */
.cs-cmatrix{background:var(--ink2);padding:84px 0}
.cs-cmatrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.cs-csys{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--verd);padding:24px 22px 26px;transition:border-color .15s,background .15s}
.cs-csys:hover{background:rgba(var(--verd-rgb),.08)}
.cs-csys .tag{display:inline-block;font:700 10.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--verd-lt);margin-bottom:13px}
.cs-csys h3{font-size:24px;color:#fff;letter-spacing:.004em;margin-bottom:9px}
.cs-csys p{font:400 14.5px/1.6 var(--sans);color:var(--on-dark-mut)}
/* a card that points at its own deep section on this page (Alex 2026-07-26: "the cards link NOWHERE") */
.cs-csys-link{display:block}
.cs-csys-link:hover{border-color:rgba(var(--verd-rgb),.55)}
.cs-csys-link .more{display:inline-block;margin-top:15px;font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--verd-lt)}

/* commercial system DEPTH — one anchored section per system, the substance the cards point at.
   scroll-margin so the sticky header never lands on top of the heading after an in-page jump. */
.cs-csysd{background:var(--ink);padding:76px 0;scroll-margin-top:96px}
.cs-csysd.cs-csysd-light{background:var(--paper)}
.cs-csysd-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:34px 52px;margin-top:34px;align-items:start}
.cs-csysd-copy p{font:400 16px/1.65 var(--sans);color:var(--on-dark-mut);max-width:62ch}
.cs-csysd-copy p + p{margin-top:15px}
.cs-csysd-copy p a{color:var(--verd-lt);text-decoration:underline}
.cs-csysd-rows{margin-top:0}
.cs-csysd-light .cs-csysd-copy p{color:var(--concrete)}
.cs-csysd-light .cs-csysd-copy p a{color:var(--verd-dk)}
.cs-csysd-light .cs-platerows{border-top-color:var(--line)}
.cs-csysd-light .cs-prow{border-bottom-color:var(--line)}
.cs-csysd-light .cs-prow dt{color:var(--ink)}
.cs-csysd-light .cs-prow dt .co{color:var(--verd-dk)}
.cs-csysd-light .cs-prow dd{color:var(--concrete)}
.cs-csysd-light .cs-prow dd strong{color:var(--ink)}
.cs-csysd-light .cs-sheet-note{color:var(--concrete)}

/* ============================================================================
   SPECS — by the numbers (concrete plate: held standards + honest cost ranges).
   ============================================================================ */
.cs-specs{background:var(--concrete2);position:relative;padding:90px 0}
.cs-specs::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--verd)}
/* held-standards = a COMPACT horizontal STRIP (operator #8a), not a full half-panel; the right panel is now full-width below it */
/* 3 tracks for 3 cells (Alex mobile pass 2026-07-29: the renderer slices to the ratified 3-cell max but the
   grid still declared 4 tracks — the empty 4th track showed the strip's dark backing as a "random dark box";
   at the 2-col mobile step the same hole landed bottom-right) */
.cs-out.cs-out-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);margin-top:36px}
.cs-out.cs-out-strip .cell{background:var(--concrete);padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.cs-out.cs-out-strip .cell .n{font:700 24px/.96 var(--disp);color:#fff;display:inline-block;padding-bottom:7px;position:relative}
.cs-out.cs-out-strip .cell .n::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;background:var(--verd)}
.cs-out.cs-out-strip .cell .l{display:block;margin-top:9px;font:600 11.5px/1.35 var(--disp);letter-spacing:.01em;color:rgba(231,234,236,.7)}
.cs-specs-grid{display:grid;grid-template-columns:1fr;gap:0;align-items:start;margin-top:30px}
.cs-head + .cs-specs-grid{margin-top:34px}
.cs-rates h2{color:#fff;font-size:38px;letter-spacing:.004em}
.cs-rates p{color:var(--on-dark-mut);font:400 15px/1.55 var(--sans);margin:14px 0 22px;max-width:42ch}
.cs-rates table{width:100%;border-collapse:collapse}
.cs-rates tr{border-bottom:1px solid rgba(255,255,255,.12)}
.cs-rates tr:first-child{border-top:1px solid rgba(255,255,255,.12)}
.cs-rates td{padding:15px 0;vertical-align:baseline}
.cs-rates td:first-child{font:600 14px/1.3 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.cs-rates td:first-child span{display:block;font:400 12px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--on-dark-mut);margin-top:4px}
.cs-rates td:last-child{text-align:right;font:700 20px/1 var(--disp);color:var(--verd-lt);white-space:nowrap}
.cs-disc{font:400 12px/1.5 var(--sans);color:var(--on-dark-mut);margin-top:16px;font-style:italic}
/* HOME non-price written-scope panel (no dollar figures; replaces the price column on home, operator #8b) */
.cs-writ h2{color:#fff;font-size:36px;letter-spacing:.004em}
.cs-writ h3{color:#fff;font-size:24px;letter-spacing:.006em}
.cs-writ p{color:var(--on-dark-mut);font:400 15px/1.55 var(--sans);margin:14px 0 22px;max-width:56ch}
.cs-writ-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.cs-writ-list li{display:flex;align-items:flex-start;gap:14px;font:400 15.5px/1.5 var(--sans)}
.cs-writ-list li .dia{width:10px;height:10px;background:var(--verd);transform:rotate(45deg);flex:none;margin-top:5px}

/* ============================================================================
   PROCESS — stamped plate numbers (light band / dark rail). Fits ONE row.
   ============================================================================ */
.cs-proc{padding:90px 0}
.cs-proc-light{background:var(--paper)}
.cs-proc-light .cs-proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border:1px solid var(--line);background:var(--line)}
.cs-proc-light .cs-pstep{background:var(--paper);padding:42px 34px;position:relative}
.cs-proc-light .cs-pstep:not(:first-child){border-left:1px solid var(--line)}
.cs-proc-light .cs-pstep .no{font:700 70px/.85 var(--disp);color:var(--ink);letter-spacing:.005em;position:relative;display:inline-block;padding-bottom:14px}
.cs-proc-light .cs-pstep .no::after{content:"";position:absolute;left:0;bottom:0;width:58px;height:5px;background:var(--verd)}
.cs-proc-light .cs-pstep h3{font-size:23px;color:var(--ink);margin:22px 0 0;letter-spacing:.006em}
.cs-proc-light .cs-pstep p{font:400 14.5px/1.55 var(--sans);color:var(--concrete);margin-top:10px}

.cs-proc-rail{background:var(--concrete2);position:relative}
.cs-proc-rail::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--verd)}
.cs-steprail{margin-top:46px;display:grid;gap:0}
.cs-steprail .cs-step{display:grid;grid-template-columns:140px 1fr;gap:34px;align-items:start;padding:32px 0;border-top:1px solid rgba(255,255,255,.12)}
.cs-steprail .cs-step:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.cs-steprail .cs-plate{background:var(--concrete);border-top:4px solid var(--verd);padding:18px 20px}
.cs-steprail .cs-plate .no{font:700 56px/.85 var(--disp);color:#fff;display:inline-block;padding-bottom:8px;position:relative}
.cs-steprail .cs-plate .no::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:4px;background:var(--verd)}
.cs-steprail h3{font-size:26px;color:#fff;letter-spacing:.004em}
.cs-steprail p{font:400 15px/1.6 var(--sans);color:var(--on-dark-mut);margin-top:10px;max-width:60ch}

/* ============================================================================
   COVERAGE — condensed town list on dark + verdigris-keyline map. ONE map.
   ============================================================================ */
.cs-area{background:var(--ink);padding:90px 0}
.cs-area-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.cs-area-panel{margin-top:18px}
.cs-area-panel h2{display:inline-block;padding-bottom:16px;position:relative;font-size:42px;color:#fff;letter-spacing:.004em}
.cs-area-panel h2::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:4px;background:var(--verd)}
.cs-area-panel p{color:var(--on-dark-mut);font:400 16px/1.6 var(--sans);margin-top:16px;max-width:42ch}
.cs-towns{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(255,255,255,.12);margin-top:28px}
.cs-towns span,.cs-towns a{font:600 16px/1 var(--disp);letter-spacing:.08em;color:var(--on-dark);padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:13px;transition:background .15s,color .15s}
.cs-towns a:hover{background:rgba(var(--verd-rgb),.1);color:var(--verd-lt)}
/* the coverage band's hub link (Alex 2026-07-29: an easy "see all our service areas" path from home) */
.cs-area-all{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font:700 13px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--verd-lt)}
.cs-area-all:hover{color:#fff}
/* dropdown hub rows exist for MOBILE (see the 880px block); desktop keeps nav-no-drop-all */
.cs-nav .nav-drop .cs-drop-hub{display:none}
.cs-towns span:nth-child(odd),.cs-towns a:nth-child(odd){border-right:1px solid rgba(255,255,255,.1)}
.cs-towns span::before,.cs-towns a::before{content:"";width:8px;height:8px;background:var(--verd);transform:rotate(45deg);flex:none}
.cs-map{position:relative;min-height:380px}
.cs-map .cs-vimg,.cs-map .cs-ph{min-height:380px}
.cs-map-frame{position:relative;height:100%}
.cs-map-frame iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:grayscale(.35) contrast(1.05)}
.cs-map .cs-keyline{inset:14px}
/* KEYLINE OVERSHOOT — ROOT CAUSE, and why the 2026-07-27 pass did not hold (Alex 2026-07-28, shipped render).
   The overshoot is a TWO-MIN-HEIGHT MISMATCH, not a positioning bug:
     · the map CELL sets `.cs-map{min-height:380px}` and the keyline is absolute against that cell;
     · the map CONTENT sets `.rr-staticmap{min-height:340px}` / `.rr-staticmap-img{min-height:340px}`;
     · `.cs-map-frame{height:100%}` resolves against `.cs-map`, whose height is AUTO (a min-height never makes
       a height definite), so the frame computed `height:auto` and collapsed to the 340px content.
   Result: a 380px keyline box drawn around a 340px image = the orange rule hanging ~26px (14px inset + the
   26px gap ≈ the "~80px" read at a glance) below the map, with the OPEN IN GOOGLE MAPS chip floating in the
   dead strip. The 2026-07-27 fix pinned only `.cs-localmap-map` (the AREA page); the hub map on home /
   contact / service-areas — the one in the screenshot — kept the broken chain, and even the localmap kept a
   competing `height:100%` on the same absolute box (over-constrained).
   FIX: pin EVERY `.cs-map` frame to its cell and let the image fill the cell exactly. The keyline, the frame
   and the rendered image are then the same box by construction at any width, with no magic number to match.
   Fleet-visible inside craftsman (corrective: every craftsman site's hub map currently overshoots). */
.cs-map .cs-map-frame{position:absolute;inset:0;height:auto}
.cs-map .rr-staticmap,.cs-map .rr-staticmap-img{min-height:0;height:100%}
.cs-pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font:700 13px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-btn);background:var(--verd);padding:9px 14px;z-index:4}

/* ============================================================================
   CTA — stamped close (guarantee plate + billboard + the lead form).
   ============================================================================ */
.cs-close{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 86%,#000),var(--ink));padding:90px 0}
.cs-gplate{background:var(--concrete);border:1px solid rgba(255,255,255,.1);border-top:5px solid var(--verd);padding:42px;margin-bottom:54px}
.cs-gplate .cs-stamp{display:flex;align-items:flex-start;gap:26px}
.cs-gplate .pno{font:700 56px/.85 var(--disp);color:var(--verd-lt);letter-spacing:.02em;flex:none}
.cs-gplate .pno small{display:block;font:600 11px/1 var(--disp);letter-spacing:.2em;color:rgba(231,234,236,.6);margin-top:8px}
.cs-gplate h3{font-size:30px;color:#fff;letter-spacing:.005em}
.cs-gplate p{color:var(--on-dark);font:400 15px/1.6 var(--sans);margin-top:12px;max-width:62ch}
.cs-gplate .terms{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cs-gplate .terms span{font:600 12px/1 var(--disp);letter-spacing:.1em;color:var(--on-dark);border:1px solid rgba(255,255,255,.22);padding:9px 14px}
.cs-close-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
.cs-close-copy h2{font-size:50px;color:#fff;letter-spacing:.004em}
.cs-close-copy p{color:var(--on-dark-mut);font:400 17px/1.55 var(--sans);margin:18px 0 22px;max-width:42ch}
/* PHONE-PROMINENCE (Alex 2026-07-26): the close's number was a bare 28px text link; it is now the same
   filled call button used in the hero and the mid-page band, sized to match the form's submit. */
.cs-num{margin-top:20px}
.cs-num small{display:block;font:500 13px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--on-dark-mut);margin-top:11px;max-width:44ch}
.cs-signals{margin-top:24px;display:grid;gap:11px}
.cs-signals span{font:600 12px/1.3 var(--disp);letter-spacing:.1em;color:var(--on-dark);display:flex;align-items:center;gap:11px}
.cs-signals span::before{content:"";width:8px;height:8px;background:var(--verd);transform:rotate(45deg);flex:none}

/* ============================================================================
   INNER PAGE SECTIONS — overview, story, region, scope, signs, standards, cost-band,
   materials catalog, calculator, neighborhood profile, hoods index, storm, permit, contact, faq, comparison.
   ============================================================================ */
.cs-overview{background:var(--ink);padding:84px 0}
/* the text-only centered intro is short — tighten its padding so it isn't a sparse whitespace band under the hero */
.cs-overview.cs-overview-statement{padding:52px 0 48px}
.cs-overview.cs-overview-statement .cs-head{max-width:760px;margin:0 auto}
.cs-overview .cs-eyebrow{color:var(--verd-lt)}
.cs-overview h2{font-size:40px;color:#fff;margin-top:14px;letter-spacing:.004em}
.cs-overview p{color:var(--on-dark-mut);font:400 16px/1.7 var(--sans);margin-top:14px;max-width:62ch}
.cs-overview .cs-overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.cs-overview .art{min-height:360px;position:relative}
.cs-overview .art .cs-vimg,.cs-overview .art .cs-ph{min-height:360px}
.cs-story .cs-story-body{margin-top:24px;max-width:760px}
.cs-story .cs-story-body p{color:var(--on-dark);font:400 16px/1.75 var(--sans);margin-top:16px}
/* ABOUT-STORY SPLIT (Alex 2026-07-28: "the intro section is missing the silhouette picture. That's our
   standard. Add that to the right side of the intro section."). Copy ~60 / art ~40 on desktop; the art
   wears the family's verdigris-topped frame (the .cs-tile / .cs-post-fig idiom) and is TALLER than the
   .cs-overview art (420px) because the story column is long-form and a 360px frame reads stubby beside it.
   align-items:start keeps the frame pinned to the top of the copy rather than floating at its midpoint.
   Mobile: the grid collapses to one column at 900px (see the breakpoint block) and the photo falls BELOW
   the text on DOM order — no `order` needed, and the read stays copy-first. */
.cs-story .cs-story-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}
.cs-story .cs-story-grid .copy{min-width:0}
.cs-story .cs-story-grid .cs-story-body{max-width:none}
.cs-story .cs-story-art{position:relative;min-height:420px;overflow:hidden;border-top:4px solid var(--verd)}
.cs-story .cs-story-art .cs-vimg,.cs-story .cs-story-art .cs-ph{position:absolute;inset:0;min-height:0}
.cs-pledge{color:var(--verd-lt)!important;font:600 19px/1.4 var(--disp)!important;letter-spacing:.01em;margin-top:26px!important;border-left:4px solid var(--verd);padding-left:20px}

/* scope / permit / area-profile stamped plate rows */
.cs-platelist,.cs-permit{background:var(--ink2);padding:84px 0}
/* scope = the spec rows beside a real photo so service pages aren't text-only */
.cs-scope-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:44px;align-items:stretch;margin-top:30px}
.cs-scope-grid .cs-platerows{margin-top:0}
.cs-scope-art{position:relative;min-height:340px;overflow:hidden}
.cs-scope-art .cs-vimg{position:absolute;inset:0}
@media(max-width:820px){.cs-scope-grid{grid-template-columns:1fr;gap:30px}.cs-scope-art{min-height:240px;order:-1}}
.cs-platerows{margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.cs-prow{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:baseline;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-prow dt{font:600 15px/1.3 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:#fff;display:flex;align-items:baseline;gap:14px}
.cs-prow dt .co{font:700 12px/1 var(--disp);letter-spacing:.1em;color:var(--verd-lt);flex:none}
.cs-prow dd{font:400 14.5px/1.6 var(--sans);color:var(--on-dark-mut)}
.cs-sheet-note{font:400 12.5px/1.6 var(--sans);color:var(--on-dark-mut);margin-top:18px;font-style:italic}
.cs-sheet-note a{color:var(--verd-lt);text-decoration:underline}

/* signs / cost-band drivers */
/* BAND-TONE ALIGNMENT (Alex, cedar-hill review 2026-08-01, his direct go): the family shipped TWO
   near-miss dark browns — --ink here vs --ink2 on .cs-platelist/.cs-permit — and back-to-back bands
   read as a colour clash rather than a rhythm ("weird two different colors of brown… I'd rather the
   brown brown be the greyish brown"). .cs-signs joins the --ink2 mid-tone so the family carries ONE
   dark brown. The verdigris hairline keeps the seam legible where an --ink2 band abuts another
   (permits: .cs-permit -> .cs-signs) instead of the two merging into one slab (band-rhythm law). */
.cs-signs{background:var(--ink2);padding:84px 0;border-top:1px solid rgba(var(--verd-rgb),.28)}
.cs-signlist{list-style:none;margin-top:30px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.14)}
.cs-signlist li{display:flex;align-items:flex-start;gap:16px;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-signlist li .dia{width:11px;height:11px;background:var(--verd);transform:rotate(45deg);flex:none;margin-top:5px}
.cs-signlist li .tx{font:400 16px/1.55 var(--sans);color:var(--on-dark)}

/* standards (signal list) */
.cs-standards{background:var(--ink2);padding:84px 0}
.cs-standards-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.cs-standards-copy h2{font-size:40px;color:#fff;margin-top:14px;letter-spacing:.004em}
.cs-standards-copy p{color:var(--on-dark-mut);font:400 16px/1.6 var(--sans);margin-top:14px;max-width:40ch}
.cs-sig{display:grid;gap:0;border:1px solid rgba(255,255,255,.12)}
.cs-sigrow{display:flex;align-items:flex-start;gap:18px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-sigrow:last-child{border-bottom:0}
.cs-sigrow .dia{width:11px;height:11px;background:var(--verd);transform:rotate(45deg);flex:none;margin-top:4px}
.cs-sigrow b{font:600 16px/1.2 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.cs-sigrow b span{display:block;font:400 13px/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--on-dark-mut);margin-top:5px}

.cs-costband{background:var(--ink);padding:84px 0}
.cs-costband-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cs-costband-grid .copy h2{font-size:38px;color:#fff;margin-top:14px;letter-spacing:.004em}
.cs-costband-grid .copy p{color:var(--on-dark-mut);font:400 16px/1.65 var(--sans);margin:14px 0 24px;max-width:48ch}
/* LIGHT cost band — the tail's rhythm break (Alex 2026-07-26: the service pages ran 5 consecutive dark bands,
   3612px unbroken; the family had two DARKS and no third tone). Selected by rr_cs_band_pick() once the dark
   run hits the cap, never chosen at random. Mirrors the .cs-proc-light / .cs-svc-light paper treatment. */
.cs-costband-light{background:var(--paper)}
.cs-costband-light .cs-costband-grid .copy h2{color:var(--ink)}
.cs-costband-light .cs-costband-grid .copy p{color:var(--concrete)}
.cs-costband-light .cs-eyebrow{color:var(--ink)}
.cs-costband-light .cs-eyebrow::before{background:var(--verd)}
.cs-costband-light .cs-signlist{border-top-color:var(--line)}
.cs-costband-light .cs-signlist li{border-bottom-color:var(--line)}
.cs-costband-light .cs-signlist li .tx{color:var(--ink)}
.cs-costband-light .cs-btn-out{border-color:var(--border);color:var(--ink)}
.cs-costband-light .cs-btn-out:hover{border-color:var(--verd);color:var(--verd-dk)}

/* ── STATIC MAP (shared rr- component) — PORTED TO CRAFTSMAN 2026-07-26 ──────────────────────────────────
   Alex, reading /contact/: "that orange outline of the map doesn't even fit with the box… and the Open in
   Google Maps, you can't even read." BOTH defects were ONE missing port. The rr-staticmap component ships
   its markup from blocks.php for every family, but only storm-claimdesk ever styled it. With no rules here:
     · .rr-staticmap-link had no position, so it rendered STATIC and fell BELOW the image — which is why the
       container measured 366px against a 340px map and the keyline framed image+link instead of the map;
     · it had no colour, so it inherited the cs-contact band's ink and rendered rgb(31,26,23) on
       rgb(31,26,23) — an identical foreground and background, i.e. genuinely invisible, not merely low.
   Structure mirrors styles-storm-claimdesk.php:537-541; tones are craftsman's (verdigris chip, warm ink). */
.rr-staticmap{position:relative;height:100%;min-height:340px;overflow:hidden}
.rr-staticmap-img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block;filter:grayscale(.12) contrast(1.03)}
.rr-staticmap-ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--paper),var(--paper) 14px,var(--cool) 14px,var(--cool) 28px)}
.rr-staticmap-link{position:absolute;left:12px;bottom:12px;z-index:5;font:700 11.5px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-btn);background:var(--verd);padding:8px 12px;text-decoration:none;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.rr-staticmap-link:hover{background:var(--verd-lt)}

/* mid-page CTA band (compact conversion touchpoint after the process; operator #10) */
.cs-ctaband{background:var(--ink);border-top:4px solid var(--verd);padding:48px 0}
.cs-ctaband-grid{display:grid;grid-template-columns:1fr auto;gap:32px 48px;align-items:center}
.cs-ctaband-copy h2{font-size:34px;color:#fff;margin-top:12px;letter-spacing:.004em;max-width:22ch}
.cs-ctaband-copy p{color:var(--on-dark-mut);font:400 15.5px/1.55 var(--sans);margin-top:12px;max-width:56ch}
/* equal-height fix (Alex 2026-07-27): the call button's 19px icon + 15px numerals made it taller than the
   outline estimate button beside it — stretch both boxes to the row height (each .cs-btn is inline-flex
   with centered content, so labels stay vertically centered) */
.cs-ctaband .cs-btn{flex:none;white-space:nowrap}
/* two-channel button pair (call leads, estimate steps to outline) */
.cs-ctaband-btns{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* SITE SLOGAN chrome (Alex ruling 2026-07-27): the verbatim identity.slogan as a small stamped line —
   hero-adjacent on home + a short line inside the cta band (both dark grounds). Subtle family idiom
   (verdigris diamond), never a new band. p.cs-slogan sits AFTER the .cs-ctaband-copy p rule on purpose:
   the equal-specificity tie must resolve to the slogan treatment inside the band. */
p.cs-slogan{display:inline-flex;align-items:center;gap:11px;font:700 12.5px/1.45 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--verd-lt);margin:16px 0 0;max-width:none}
p.cs-slogan::before{content:"";width:8px;height:8px;background:var(--verd);transform:rotate(45deg);flex:none}

/* materials catalog — 4 cards fit ONE row at desktop (operator #15); auto-fit keeps 5-6 readable too */
.cs-matsec{background:var(--ink2);padding:90px 0}
.cs-matgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.cs-matcard{background:var(--concrete-lt);border:1px solid rgba(255,255,255,.1);border-top:4px solid var(--verd);padding:24px 20px}
.cs-matcard .pn{font:700 13px/1 var(--disp);letter-spacing:.16em;color:var(--verd-lt)}
/* h3 22px -> 19.5px + tighter tracking (Alex 2026-07-26: "the impact resistant Class 4, the (4) in parenthesis,
   went to a second row in the box — let's fix that to just one row"). The card is 268px wide with ~226px of
   text room; "Impact-Resistant (Class 4)" is the longest label in the set and was the only one wrapping, so
   that one card sat 22px taller and the row went uneven. Sized to the LONGEST label so the row stays level. */
.cs-matcard h3{font-size:19.5px;color:#fff;margin:11px 0 8px;letter-spacing:-.002em;text-wrap:balance}
.cs-matcard h3 a:hover{color:var(--verd-lt)}
.cs-matcard p{font:400 13.5px/1.55 var(--sans);color:var(--on-dark-mut);margin-bottom:14px}
.cs-matspecs{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.12)}
.cs-matspecs .r{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cs-matspecs .k{font:600 12px/1.3 var(--disp);letter-spacing:.01em;color:var(--on-dark-mut)}
.cs-matspecs .v{font:600 13px/1.3 var(--sans);color:#fff;text-align:right}
.cs-makerwall{margin-top:36px;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap}
.cs-makerwall-lab{font:600 12px/1.3 var(--disp);letter-spacing:.02em;color:var(--verd-lt)}
.cs-makers{display:flex;flex-wrap:wrap;gap:12px}
.cs-makers span{font:700 16px/1 var(--disp);letter-spacing:.06em;color:var(--on-dark);border:1px solid rgba(255,255,255,.2);padding:12px 18px}

/* cost calculator (industrial stamped-plate instrument) — light band */
.cs-calc{background:var(--paper);padding:90px 0}
.cs-calc-panel{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:44px;align-items:start}
.cs-calc-inputs{display:grid;gap:24px}
.cs-field label{display:block;font:600 12px/1 var(--disp);letter-spacing:.01em;color:var(--concrete);margin-bottom:11px}
.cs-ctl{display:flex;align-items:stretch;border:2px solid var(--ink);background:#fff}
.cs-ctl input{flex:1;min-width:0;border:0;background:transparent;font:700 22px/1 var(--disp);color:var(--ink);padding:14px 16px;outline:none}
.cs-ctl .unit{display:flex;align-items:center;padding:0 16px;background:var(--ink);color:var(--verd-lt);font:700 12px/1 var(--disp);letter-spacing:.14em}
.cs-seg{display:flex;border:2px solid var(--ink)}
.cs-seg button{flex:1;background:#fff;border:0;border-right:2px solid var(--ink);font:600 12px/1 var(--disp);letter-spacing:.08em;color:var(--concrete);padding:14px 8px;cursor:pointer;transition:background .15s,color .15s}
.cs-seg button:last-child{border-right:0}
.cs-seg button.on{background:var(--ink);color:var(--verd-lt)}
.cs-readplate{background:var(--ink);border-top:5px solid var(--verd);padding:32px 30px;position:relative}
.cs-rp-lab{display:block;font:600 12px/1 var(--disp);letter-spacing:.02em;color:var(--verd-lt)}
.cs-rp-fig{margin:14px 0 22px}
.cs-rp-fig .big{font:700 40px/.95 var(--disp);color:#fff;letter-spacing:.01em}
.cs-rp-rows{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.14)}
.cs-rp-rows .r{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-rp-rows .k{font:400 13px/1.4 var(--sans);color:var(--on-dark-mut)}
.cs-rp-rows .v{font:600 14px/1.3 var(--disp);color:#fff}
.cs-rp-note{font:400 12px/1.5 var(--sans);color:var(--on-dark-mut);margin-top:16px;font-style:italic}

/* neighborhood profile + permit plate */
.cs-prof{background:var(--ink);padding:84px 0}
.cs-prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:30px}
.cs-prof-plate,.cs-permit-plate{background:var(--concrete-lt);border:1px solid rgba(255,255,255,.1);border-top:4px solid var(--verd);padding:28px 26px}
.cs-prof-cap{display:flex;justify-content:space-between;gap:14px;font:600 12px/1 var(--disp);letter-spacing:.02em;color:var(--verd-lt);padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:6px}
.cs-prof-shot{min-height:360px;position:relative}
.cs-prof-shot .cs-vimg,.cs-prof-shot .cs-ph{min-height:360px}

/* REDESIGNED area profile (cs-prof2) — tight intro + a stamped FAST-FACTS grid beside the photo.
   The grid is the scalable core (baseline facts: ZIP / school / where / area type). Reads at a glance,
   never as a wall of prose. The cells are flat stamped plates in the family idiom (no pill/bubble chips). */
.cs-prof2 .cs-head{max-width:760px}
.cs-prof2 .cs-head p{font:400 16.5px/1.65 var(--sans);margin-top:14px;max-width:62ch}
.cs-prof2-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start;margin-top:34px}
.cs-fastfacts{background:var(--concrete-lt);border:1px solid rgba(255,255,255,.1);border-top:4px solid var(--verd);padding:26px 26px 28px}
.cs-ff-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.cs-ffcell{background:var(--concrete-lt);padding:18px 18px 16px;display:flex;flex-direction:column;gap:9px;min-width:0}
.cs-ffcell .k{font:700 11px/1.2 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--verd-lt)}
.cs-ffcell .v{font:600 15.5px/1.4 var(--sans);color:#fff;word-break:break-word}
.cs-prof2 .cs-fastfacts .cs-sheet-note{margin-top:16px}
.cs-prof2 .cs-prof-shot,.cs-prof2 .cs-prof-shot .cs-vimg,.cs-prof2 .cs-prof-shot .cs-ph{min-height:340px}

/* AREA PROFILE ON WARM PAPER (.cs-prof-light — Alex 2026-07-28: area pages "run brown/black/brown then
   white"). The survey is the area page's first body section, so giving it the paper treatment turns a
   four-dark opening run into ink -> LIGHT -> ink -> concrete. The fast-facts plate keeps the stamped
   anatomy (flat cells, verdigris top rule, NO pill chips) and simply inverts to the light plate face. */
.cs-prof.cs-prof-light{background:var(--paper)}
.cs-prof-light .cs-head h2{color:var(--ink)}
.cs-prof-light .cs-head p{color:var(--concrete)}
.cs-prof-light .cs-eyebrow,.cs-prof-light .cs-eyebrow.on-dark{color:var(--ink)}
.cs-prof-light .cs-eyebrow::before,.cs-prof-light .cs-eyebrow.on-dark::before{background:var(--verd)}
.cs-prof-light .cs-fastfacts{background:var(--plate-lt);border-color:var(--border);border-top-color:var(--verd)}
.cs-prof-light .cs-prof-cap{color:var(--verd-dk);border-bottom-color:var(--line)}
.cs-prof-light .cs-ff-grid{background:var(--line);border-color:var(--line)}
.cs-prof-light .cs-ffcell{background:var(--plate-lt)}
.cs-prof-light .cs-ffcell .k{color:var(--verd-dk)}
.cs-prof-light .cs-ffcell .v{color:var(--ink)}
.cs-prof-light .cs-sheet-note{color:var(--concrete)}

/* city hub — region intro on the warm-paper light band (photo split); keep the copy column readable */
.cs-region-light .copy{max-width:54ch}
.cs-region-light .copy p{font:400 16.5px/1.7 var(--sans);margin-top:14px}

/* city hub — city-facts (concrete stat band; reuses the bolted-plate idiom from the signature counter) */
.cs-cityfacts{background:var(--concrete);padding:84px 0}
.cs-cityfacts .cs-head h2,.cs-cityfacts .cs-head{max-width:760px}
.cs-cityfacts .cs-head p{color:var(--on-dark-mut);font:400 16.5px/1.6 var(--sans);margin-top:14px}
.cs-cf-grid{display:grid;grid-template-columns:repeat(var(--cs-cf-cols,4),1fr);gap:16px;margin-top:32px}
.cs-cityfacts .cs-bplate{background:var(--concrete-lt)}
.cs-cityfacts .cs-counter-src{font:400 12.5px/1.6 var(--sans);color:var(--on-dark-mut);margin-top:20px;font-style:italic}

/* city hub — compact storm summary (the storm-record read-out strip, no per-year table, MAP-FREE) */
.cs-citystorm{background:var(--ink);padding:84px 0}
.cs-citystorm .cs-head{max-width:720px}
.cs-citystorm .cs-storm-src a{color:var(--verd-lt);text-decoration:underline}

/* neighborhoods index */
.cs-hoods{background:var(--ink2);padding:84px 0}
.cs-hood-index{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.cs-hood{display:flex;flex-direction:column;gap:5px;padding:20px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-hood:nth-child(odd){border-right:1px solid rgba(255,255,255,.1);padding-right:24px}
.cs-hood:nth-child(even){padding-left:24px}
.cs-hood .name{font:600 17px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.cs-hood a.name:hover{color:var(--verd-lt)}
.cs-hood .hook{font:400 13px/1.5 var(--sans);color:var(--on-dark-mut)}
/* the area directory (with definitions) sits beside the single coverage map — one area list per page */
/* F49 (Alex 2026-08-11, live on 8094): "the content floats above the map - move the H2 and the whole
   section down to line up with the map." MEASURED on the render at 1280 BEFORE changing anything: the
   index column renders 59px tall against a 360px map, both pinned by `align-items:start`, so a
   two-neighborhood list hangs at the top of a cell 301px taller than itself and reads as floating.
   Centering the row lines the index up with the map. Degrades safely both ways: at 390 the grid is a
   single column so this is a no-op, and a site whose index is TALLER than its map centers the map
   instead, which is the same alignment intent from the other side. */
.cs-hood-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;margin-top:30px}
.cs-hood-grid .cs-hood-index{margin-top:0}
.cs-hood-map{position:relative;min-height:360px;border:1px solid rgba(255,255,255,.14)}
.cs-hood-map iframe{display:block;width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.25) contrast(1.04)}

/* storm note + storm record */
.cs-stormnote{background:var(--concrete2);padding:30px 0}
.cs-stormnote .wrap{display:flex;align-items:center;gap:16px}
.cs-stormnote .dia{width:11px;height:11px;background:var(--verd);transform:rotate(45deg);flex:none}
.cs-stormnote p{font:400 16px/1.55 var(--sans);color:var(--on-dark)}
.cs-stormnote p b{color:#fff;font-weight:700}
.cs-storm{background:var(--ink);padding:84px 0}
.cs-storm-readout{display:flex;flex-wrap:wrap;gap:0;border:1px solid rgba(255,255,255,.14);margin-top:30px}
.cs-storm-readout .sl{flex:1;min-width:160px;padding:26px 24px;border-right:1px solid rgba(255,255,255,.1)}
.cs-storm-readout .sl:last-child{border-right:0}
.cs-storm-readout .sl b{font:700 44px/.9 var(--disp);color:#fff;display:block}
.cs-storm-readout .sl b em{font-size:20px;font-style:normal;color:var(--verd-lt)}
.cs-storm-readout .sl span{font:600 12px/1.4 var(--disp);letter-spacing:.01em;color:var(--on-dark-mut);display:block;margin-top:9px}
.cs-storm-table{margin-top:24px;border:1px solid rgba(255,255,255,.12)}
.cs-storm-dated{margin-top:14px}
.cs-storm-table .thead,.cs-storm-table .crow{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}
.cs-storm-table .thead{background:rgba(255,255,255,.05);font:600 12px/1 var(--disp);letter-spacing:.01em;color:var(--verd-lt)}
.cs-storm-table .thead div{padding:14px 18px}
.cs-storm-table .crow{border-top:1px solid rgba(255,255,255,.1)}
.cs-storm-table .crow div{padding:14px 18px;font:500 14px/1.3 var(--sans);color:var(--on-dark)}
.cs-storm-table .crow .cyr{font:700 16px/1 var(--disp);color:#fff}
.cs-storm-src{font:400 12.5px/1.6 var(--sans);color:var(--on-dark-mut);margin-top:18px;font-style:italic}

/* local-roofing-context (area depth) — stamped spec rows, full-width single column under the lead */
.cs-context{background:var(--ink2);padding:84px 0}
.cs-context-rows{margin-top:30px}
.cs-context-rows .cs-prow dd a{color:var(--verd-lt);text-decoration:underline}

/* local landmarks + coverage (area depth) — copy + mark list beside the area map (ONE map) */
.cs-localmap{background:var(--ink);padding:84px 0}
.cs-localmap-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.cs-localmap-copy h2{font-size:40px;color:#fff;margin-top:14px;letter-spacing:.004em}
.cs-localmap-copy p{color:var(--on-dark-mut);font:400 16px/1.65 var(--sans);margin-top:14px;max-width:46ch}
.cs-localmap-copy p a{color:var(--verd-lt);text-decoration:underline}
.cs-marklist{list-style:none;margin-top:26px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.14)}
.cs-marklist li{display:flex;align-items:flex-start;gap:15px;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-marklist li .dia{width:10px;height:10px;background:var(--verd);transform:rotate(45deg);flex:none;margin-top:5px}
.cs-marklist li .tx{font:400 15.5px/1.55 var(--sans);color:var(--on-dark)}
.cs-marklist li .tx .mk{font:700 12px/1.55 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--verd-lt);margin-right:4px}
.cs-localmap-map{min-height:380px}

/* contact directory */
.cs-contact{background:var(--ink);padding:84px 0}
.cs-contact-index{margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.cs-crow{display:flex;gap:22px;align-items:flex-start;padding:22px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-cref{font:700 18px/1 var(--disp);letter-spacing:.06em;color:var(--verd-lt);flex:none;padding-top:2px}
.cs-clab{display:block;font:600 12.5px/1 var(--disp);letter-spacing:.01em;color:var(--on-dark-mut)}
.cs-cval{display:block;font:700 22px/1.1 var(--disp);letter-spacing:.02em;color:#fff;margin-top:7px}
a.cs-cval:hover{color:var(--verd-lt)}
/* the CALL row is a real button, not an inline link (phone-prominence, Alex 2026-07-26) */
/* UN-BOXED CALL VALUE (Alex 2026-07-28: the plated number "looks weird next to everything else"). Every
   other row of this directory is plain stamped text, so the one filled plate read as a foreign object. The
   number is now PLAIN LARGE TEXT on a tel: link — no ground, no padding, no glyph — and keeps its tap
   target through min-height alone, so the phone-prominence ruling survives as TYPE, not as chrome. */
a.cs-cval-call{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;
  font:700 34px/1.05 var(--disp);letter-spacing:.02em;color:var(--verd-lt);background:none;padding:0}
a.cs-cval-call:hover{background:none;color:#fff}
.cs-csub{display:block;font:400 14px/1.55 var(--sans);color:var(--on-dark-mut);margin-top:7px;max-width:60ch}
.cs-contact-strip{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border:1px solid rgba(255,255,255,.12)}
.cs-contact-strip .tb{flex:1;min-width:150px;padding:18px 22px;border-right:1px solid rgba(255,255,255,.1)}
.cs-contact-strip .tb:last-child{border-right:0}
.cs-contact-strip .tb .k{font:600 11.5px/1 var(--disp);letter-spacing:.005em;color:var(--on-dark-mut)}
.cs-contact-strip .tb .v{font:700 16px/1.1 var(--disp);letter-spacing:.03em;color:#fff;margin-top:8px}

/* faq */
.cs-faq{background:var(--ink2);padding:84px 0}
.cs-faq-list{margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.cs-qrow{border-bottom:1px solid rgba(255,255,255,.1)}
.cs-qrow summary{display:flex;align-items:flex-start;gap:18px;padding:22px 4px;cursor:pointer;list-style:none}
.cs-qrow summary::-webkit-details-marker{display:none}
.cs-qrow .q-ref{font:700 13px/1.4 var(--disp);letter-spacing:.08em;color:var(--verd-lt);flex:none}
.cs-qrow .q-t{font:600 18px/1.4 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.cs-qrow .q-a{padding:0 4px 24px 35px;font:400 16px/1.7 var(--sans);color:var(--on-dark-mut);max-width:72ch}
.cs-qrow .q-a a{color:var(--verd-lt);text-decoration:underline}

/* FAQ ON WARM PAPER (.cs-faq-light — Alex 2026-07-28: the FAQ read "brown between two black bands" on the
   service pages). Same paper treatment as .cs-proc-light / .cs-specs-light, so the section can OPT IN to the
   run-length rule (rr_cs_band_pick) and break a dark run instead of extending it. Contrast on --paper:
   --ink headings ~13:1, --concrete answers ~8:1, --verd-dk Q-refs ~4.9:1 — all AA at these sizes. */
.cs-faq.cs-faq-light{background:var(--paper)}
.cs-faq-light .cs-head h2{color:var(--ink)}
.cs-faq-light .cs-head p{color:var(--concrete)}
.cs-faq-light .cs-eyebrow{color:var(--ink)}
.cs-faq-light .cs-eyebrow::before{background:var(--verd)}
.cs-faq-light .cs-faq-list{border-top-color:var(--line)}
.cs-faq-light .cs-qrow{border-bottom-color:var(--line)}
.cs-faq-light .cs-qrow .q-ref{color:var(--verd-dk)}
.cs-faq-light .cs-qrow .q-t{color:var(--ink)}
.cs-faq-light .cs-qrow .q-a{color:var(--concrete)}
.cs-faq-light .cs-qrow .q-a a{color:var(--verd-dk)}
.cs-faq-light .cs-qrow summary:hover .q-t{color:var(--verd-dk)}

/* comparison plate table */
.cs-cmp{background:var(--ink);padding:84px 0}
/* LEGIBILITY (Alex, cedar-hill review 2026-08-01, his direct go): "this whole section is a little hard
   on my eyes to read… maybe have the table itself lighter than the dark background. I like what's said
   on it." Dark text-heavy rows on a dark band were the problem, so the SHEET becomes the family's own
   stamped-plate surface (--plate-lt, the same idiom .cs-permit-plate already uses on a dark band) and
   the type flips to ink. The band stays dark; only the plate lightens. */
.cs-cmp-sheet{margin-top:30px;border:1px solid var(--line);background:var(--plate-lt)}
.cs-cmp-thead,.cs-cmp-row{display:grid;grid-template-columns:repeat(var(--cs-cols,3),1fr)}
.cs-cmp-thead{background:var(--paper2);font:600 12px/1.3 var(--disp);letter-spacing:.01em;color:var(--verd-dk)}
.cs-cmp-thead div{padding:15px 18px}
.cs-cmp-row{border-top:1px solid var(--line)}
.cs-cmp-row .spec-col{padding:15px 18px;font:600 14px/1.4 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.cs-cmp-row .opt-col{padding:15px 18px;font:500 14px/1.4 var(--sans);color:var(--concrete)}
.cs-cmp-row .opt-col.rec{position:relative;color:var(--ink)}
/* accent on ::after, NOT ::before — ::before carries the data-lbl column label on mobile (line ~840),
   so a 'recommended' cell would otherwise lose its label and read as a missing/blank cell on mobile. */
.cs-cmp-row .opt-col.rec::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--verd)}

/* ============================================================================
   SHARED ESTIMATE BAND (footer.php #estimate, when not suppressed) — restyled to the family idiom.
   rr_lead_form('closer') = .est-form. Wrapped to reuse the .cs-form styling.
   ============================================================================ */
.estimate{background:var(--concrete2);color:var(--on-dark);padding:80px 0;position:relative}
.estimate::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--verd)}
.estimate .est-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:0 30px}
.estimate .est-copy h2{font-size:42px;color:#fff;letter-spacing:.004em}
.estimate .est-copy p{color:var(--on-dark-mut);font:400 16px/1.6 var(--sans);margin-top:14px;max-width:42ch}
.est-points{list-style:none;margin-top:22px;display:grid;gap:11px}
.est-points li{display:flex;align-items:center;gap:11px;font:600 13px/1.4 var(--disp);letter-spacing:.04em;color:var(--on-dark)}
.est-points li svg{color:var(--verd-lt);flex:none}
.est-card{background:var(--ink2);border:1px solid rgba(255,255,255,.1);border-top:5px solid var(--verd);padding:30px 28px;min-width:0}
.est-card h3{font:700 21px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.est-card .est-note{font:400 13px/1.4 var(--sans);color:var(--on-dark-mut);margin:8px 0 18px}
.est-card .est-form{display:grid;gap:13px}
.est-card .est-form .row,.est-card .est-form .f.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.est-card .est-form .f,.est-card .est-form>div{min-width:0}
.est-card .est-form label{display:block;font:600 11.5px/1 var(--disp);letter-spacing:.005em;color:var(--on-dark-mut);margin-bottom:7px}
.est-card .est-form label.ef-check{display:flex;align-items:flex-start;gap:10px;font:500 13px/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--on-dark);cursor:pointer;margin:0}
.est-card .est-form input,.est-card .est-form select,.est-card .est-form textarea{width:100%;background:#241d18;border:1px solid rgba(255,255,255,.18);color:#fff;font:500 15px/1.2 var(--sans);padding:13px 14px;outline:none}
.est-card .est-form input::placeholder,.est-card .est-form textarea::placeholder{color:rgba(231,234,236,.55)}
.est-card .est-form input:focus,.est-card .est-form select:focus,.est-card .est-form textarea:focus{border-color:var(--verd)}
.est-card .est-form select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--verd-lt) 50%),linear-gradient(135deg,var(--verd-lt) 50%,transparent 50%);background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.est-card .est-form textarea{resize:vertical;min-height:64px;line-height:1.5}
.est-card .est-form .ef-check input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--verd)}
.est-card .est-form .lf-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--on-dark-mut)}
.est-card .est-form button[type=submit]{width:100%;background:var(--verd);color:var(--ink-btn);border:2px solid transparent;font:700 14px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:16px;cursor:pointer;transition:background .16s;margin-top:2px}
.est-card .est-form button[type=submit]:hover{background:var(--verd-lt)}
.est-card .est-form .fineprint,.est-card .est-form .form-consent{font:400 11px/1.5 var(--sans);color:var(--on-dark-mut);margin:0}
.est-card .est-form .lf-hp{display:none}

/* ============================================================================
   SHARED FOOTER (footer.php .foot-grid) — restyled into the stamped masthead idiom.
   ============================================================================ */
footer{background:var(--steel);color:var(--on-dark-mut);border-top:4px solid var(--verd);font-family:var(--sans);padding:54px 0 78px}
footer .wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .logo{display:inline-flex;margin-bottom:16px}
.foot-brand p{font:400 14px/1.65 var(--sans);color:var(--on-dark-mut);max-width:36ch}
.foot-col h5{color:#fff;font:600 13px/1 var(--disp);letter-spacing:.02em;margin-bottom:16px}
.foot-col a{display:block;font:400 14px/1.3 var(--sans);color:var(--on-dark-mut);padding:6px 0}
.foot-col a:hover{color:var(--verd-lt)}
/* the footer's tap-to-call gets the number's weight and a real tap target — it is the last call affordance
   on the page and it was rendering as 14px body text (phone-prominence, Alex 2026-07-26) */
.foot-col a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px;font:700 19px/1 var(--disp);letter-spacing:.02em;color:var(--verd-lt)}
.foot-col a[href^="tel:"]:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font:500 12.5px/1.5 var(--sans);color:rgba(231,234,236,.5)}
.foot-bottom a{color:rgba(231,234,236,.6)}
.foot-bottom a:hover{color:var(--verd-lt)}
.foot-legal{display:flex;gap:18px}

/* mobile sticky CTA bar (.mobar) — hidden on desktop */
.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink2);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -6px 20px rgba(0,0,0,.4);padding:9px 12px;gap:10px}
.mobar .btn{flex:1;min-width:0;justify-content:center;font-size:13px;padding:14px 8px;letter-spacing:.06em}
.mobar .btn-ghost{background:transparent;color:var(--verd-lt);border:2px solid rgba(255,255,255,.2)}
.mobar .btn-primary{background:var(--verd);color:var(--ink-btn);border:2px solid transparent}

/* ============================================================================
   STRUCTURAL / WRAPPER CLASSES the engine emits (layout modifiers, no own paint
   beyond what the compound selectors above already give them). Declared so css-coverage
   accounts for every emitted class; the visual rules live in the compound selectors.
   ============================================================================ */
.cs-heroV1,.cs-heroV2,.cs-heroV3{display:block}
.cs-close-v1,.cs-close-v3,.cs-close-form,.cs-cbody,.cs-region,.cs-has-photo{min-width:0}
.brandlock.bl-mark-left{flex-direction:row}
.brandlock.bl-wm-caps .bl-name{text-transform:uppercase}
.brandlock.bl-wm-sans{font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.nav-cta .num{white-space:nowrap}

/* ============================================================================
   FL-FALLBACK MARKUP — the legal pages (privacy-policy / disclaimer via legal.php) +
   any family-uncomposed page render the SHARED FL svc-hero / prose / crumb blocks (no
   Craftsman recipe). Style them into the family voice so they render acceptably (a dark
   steel band hero + condensed breadcrumb + cool prose), and neutralize the FL-only motifs.
   ============================================================================ */
.svc-hero{background:var(--ink);color:#fff;padding:64px 0 52px;position:relative;overflow:hidden}
.svc-hero .wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px;position:relative;z-index:2}
.svc-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.svc-hero-copy{min-width:0}
.svc-hero h1,.svc-hero-copy h1{color:#fff;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:.004em}
.svc-hero .lead,.svc-hero-copy .lead,.svc-hero-copy>p{color:var(--on-dark);margin-top:14px;max-width:52ch;font:500 16px/1.6 var(--sans)}
.svc-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.crumb,.svc-hero .crumb{font:600 12px/1.5 var(--disp);letter-spacing:.01em;color:var(--on-dark-mut);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--on-dark-mut)}.crumb a:hover{color:var(--verd-lt)}
.crumb .sep{color:var(--verd)}
.crumb .cur,.svc-hero .crumb .cur{color:var(--verd-lt)}
/* neutralize the FL-only hero motifs (hand script, the squiggle underline, the blob + roofline) */
.svc-hand,.hand{font-family:var(--sans);font-style:normal;font-weight:700;color:inherit}
.underline-word{font-style:normal;color:var(--verd-lt);white-space:normal}
.underline-word svg{display:none}
.blob,.roofline{display:none}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:20px}
.hero-trust .ht-item{display:inline-flex;align-items:center;gap:8px;font:600 12px/1.3 var(--disp);letter-spacing:.08em;color:var(--on-dark)}
.hero-trust .ht-item svg{color:var(--verd-lt);flex:none}
.hero-photo{position:relative;min-height:300px}
.hero-photo .frame,.hero-photo .frame-ph{position:relative;height:100%;min-height:300px;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover}
.hero-photo .frame-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(160deg,#23272c,#0f1113);color:var(--on-dark-mut)}
.hero-photo .frame-ph-ic{color:var(--verd-lt)}
.hero-photo .frame-ph-label{font:600 11px/1.4 var(--disp);letter-spacing:.13em}
.hero-photo .stamp{position:absolute;bottom:14px;left:14px;display:inline-flex;align-items:center;gap:9px;background:var(--verd);color:var(--ink-btn);font:700 12px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px}
.hero-photo .stamp .dot{display:inline-flex}
/* the shared prose block (legal pages) + the alt band */
.prose-sec{padding:64px 0;background:var(--paper)}
.prose-sec .wrap{max-width:760px;margin:0 auto;padding:0 30px}
.prose-sec h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:26px;color:var(--ink);margin:30px 0 10px;letter-spacing:.004em}
.prose-sec h3{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);margin:22px 0 8px}
.prose-sec p,.prose-sec li{color:var(--concrete);font-size:15.5px;line-height:1.7;margin-top:10px}
.prose-sec a{color:var(--ink);border-bottom:2px solid var(--verd)}  /* espresso text + amber underline (AA-safe; amber alone fails on warm white) */
.prose-sec a:hover{border-bottom-color:var(--verd-dk)}
.prose-sec .sec-head h2{margin-top:0}
.prose-body{max-width:760px;margin:0 auto}
.prose-body p,.prose-body li{color:var(--concrete);font-size:15.5px;line-height:1.7}
.legal-updated{color:var(--concrete);font:500 12px/1.5 var(--sans);letter-spacing:.02em;margin-top:8px}
.sec-head{max-width:680px;margin:0 auto 26px}
.sec-head.center,.sec-head{text-align:center}
.sec-head h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:34px;color:var(--ink);letter-spacing:.004em}
.sec-head p{color:var(--concrete);font-size:16px;margin-top:12px}
.alt{background:var(--cool)}

/* ============================================================================
   LIGHT-BAND VARIANTS (BREATHE) — operator warm-up, 2026-06-26. The page now reads ~50/50
   dark:light. Three sections that were near-black/concrete now ride a WARM-PAPER (--paper) ground:
   the service photo TILES (.cs-svc-light), the by-the-numbers SPECS plate (.cs-specs-light), and the
   inner-page OVERVIEW/intro (.cs-overview-light). The dark photo cards + stamped plates POP against
   warm paper. On-dark text recolours to espresso --ink / --muted; on-dark hairlines recolour to
   --border; amber stays the accent (underlines, diamonds, big numerals) and is NEVER used as small
   body text on light (AA). These compound selectors out-specify the on-dark base rules.
   ============================================================================ */
/* — service photo tiles on warm paper — */
.cs-svc.cs-svc-light{background:var(--paper)}
.cs-svc.cs-svc-light .cs-head h2{color:var(--ink)}
.cs-svc.cs-svc-light .cs-head p{color:var(--muted)}
.cs-svc.cs-svc-light .cs-card{border-color:var(--border)}
/* the photo cards stay dark-photo + light overlay text (they sit ON the photo) — unchanged inside */
/* ledger variant (no photos) recolours its rows to dark-on-light */
.cs-svc-ledger.cs-svc-light .cs-ledger{border-top-color:var(--border)}
.cs-svc-ledger.cs-svc-light .cs-lrow{border-bottom-color:var(--border)}
.cs-svc-ledger.cs-svc-light .cs-lrow:hover{background:rgba(var(--verd-rgb),.1)}
.cs-svc-ledger.cs-svc-light .cs-lrow .t h3{color:var(--ink)}
.cs-svc-ledger.cs-svc-light .cs-lrow .t p{color:var(--muted)}
.cs-svc-ledger.cs-svc-light .cs-lrow .go{color:var(--verd-dk)}
.cs-svc-ledger.cs-svc-light .cs-lrow:hover .go{color:var(--ink)}

/* — by-the-numbers specs plate on warm paper — */
.cs-specs.cs-specs-light{background:var(--paper)}
/* MIDDLE light band gets a slightly deeper oat/kraft ground so 3 consecutive light bands read distinct (operator #9) */
.cs-alt2.cs-specs.cs-specs-light{background:var(--paper2)}
.cs-specs.cs-specs-light .cs-head h2{color:var(--ink)}
.cs-specs.cs-specs-light .cs-head p{color:var(--muted)}
/* the output cells become raised warm plates with dark numerals (the stamped look, on light) */
.cs-specs.cs-specs-light .cs-out{background:var(--border);border-color:var(--border)}
.cs-specs.cs-specs-light .cs-out .cell{background:var(--plate-lt)}
.cs-specs.cs-specs-light .cs-out .cell .n{color:var(--ink)}
.cs-specs.cs-specs-light .cs-out .cell .l{color:var(--muted)}
.cs-specs.cs-specs-light .cs-rates h2{color:var(--ink)}
.cs-specs.cs-specs-light .cs-rates p{color:var(--muted)}
.cs-specs.cs-specs-light .cs-rates tr,
.cs-specs.cs-specs-light .cs-rates tr:first-child{border-color:var(--border)}
.cs-specs.cs-specs-light .cs-rates td:first-child{color:var(--ink)}
.cs-specs.cs-specs-light .cs-rates td:first-child span{color:var(--muted)}
.cs-specs.cs-specs-light .cs-rates td:last-child{color:var(--verd-dk)}  /* deep amber numerals read AA on light */
.cs-specs.cs-specs-light .cs-disc{color:var(--muted)}
/* home non-price written-scope panel on the warm-paper light band */
.cs-specs.cs-specs-light .cs-writ h2,.cs-specs.cs-specs-light .cs-writ h3{color:var(--ink)}
.cs-specs.cs-specs-light .cs-writ p{color:var(--muted)}
.cs-specs.cs-specs-light .cs-writ-list li{color:var(--ink)}

/* — inner-page overview / intro on warm paper — */
.cs-overview.cs-overview-light{background:var(--paper)}
.cs-overview.cs-overview-light h2{color:var(--ink)}
.cs-overview.cs-overview-light p{color:var(--muted)}
/* about-page story on warm paper: long-form body in deep walnut, the pledge in espresso + amber rule */
.cs-story.cs-story-light .cs-story-body p{color:var(--concrete)}
.cs-story.cs-story-light .cs-pledge{color:var(--ink)!important;border-left-color:var(--verd)}

/* — eyebrow on ANY light band: espresso ink text + amber rule marker (amber text alone fails AA on warm
   white at 12px). Covers the specs/overview/services light variants, the process-light + calc bands. — */
.cs-specs-light .cs-eyebrow,.cs-svc-light .cs-eyebrow,.cs-overview-light .cs-eyebrow,
.cs-proc-light .cs-eyebrow,.cs-calc .cs-eyebrow{color:var(--ink)}
.cs-specs-light .cs-eyebrow::before,.cs-svc-light .cs-eyebrow::before,.cs-overview-light .cs-eyebrow::before,
.cs-proc-light .cs-eyebrow::before,.cs-calc .cs-eyebrow::before{background:var(--verd)}

/* ============================================================================
   NO-ADJACENT-DARK BAND FLIP (.cs-alt) — DESIGN-PRINCIPLES §2. When an alternating dark
   section would otherwise stack a second near-black (espresso --ink) on the page, the render fn adds
   `.cs-alt`, flipping its ground to the warm-walnut concrete mid-tone so two near-blacks never touch.
   The dark bands stay espresso-industrial; the concrete band IS a sanctioned rhythm break (the same
   tone the signature counter uses). Inner plates lift slightly so they still read.
   ============================================================================ */
.cs-overview.cs-alt,.cs-signs.cs-alt,.cs-costband.cs-alt,.cs-storm.cs-alt,.cs-prof.cs-alt,
.cs-contact.cs-alt,.cs-cmp.cs-alt,.cs-area.cs-alt,.cs-svc.cs-alt,.cs-svc-ledger.cs-alt,
.cs-platelist.cs-alt,.cs-permit.cs-alt,.cs-standards.cs-alt,.cs-matsec.cs-alt,.cs-hoods.cs-alt,
.cs-faq.cs-alt,.cs-sig2.cs-alt,.cs-ctaband.cs-alt,.cs-context.cs-alt,.cs-localmap.cs-alt,
.cs-cmatrix.cs-alt,.cs-citystorm.cs-alt{background:var(--concrete)}
/* on a concrete ground the raised plates lift to the lighter plate face for separation */
.cs-platelist.cs-alt .cs-prof-plate,.cs-permit.cs-alt .cs-permit-plate,
.cs-prof.cs-alt .cs-prof-plate,.cs-prof2.cs-alt .cs-fastfacts,.cs-matsec.cs-alt .cs-matcard,
.cs-sig2.cs-alt .cs-bplate{background:var(--concrete-lt)}
/* the closing CTA: keep the dark close feel but lift the gradient to a concrete-toned ground */
.cs-close.cs-alt{background:linear-gradient(180deg,var(--concrete2),var(--concrete))}

/* ============================================================================
   MOTION — transform/opacity only, reduced-motion safe.
   ============================================================================ */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media(max-width:980px){
  .cs-hero h1{font-size:58px}
  .cs-tile h3{font-size:42px}
  .cs-svc-grid{grid-template-columns:1fr 1fr}
  .cs-matgrid{grid-template-columns:1fr 1fr}
  .cs-cmatrix-grid{grid-template-columns:1fr 1fr}
  .cs-sig2 .cs-plategrid{grid-template-columns:1fr 1fr}
  .cs-cf-grid{grid-template-columns:1fr 1fr}
}

/* NAV LABELS NEVER WRAP (2026-07-25). Southlake shipped a ragged nav row: the flex row is nowrap but its
   ITEMS default to flex-shrink:1, so "Commercial Roofing" and "Service Areas" were squeezed onto two
   lines each and the six top-level items landed on three different baselines. A top-level nav label is a
   fixed-width element - it should overflow HONESTLY (where nav-fit-check can measure it) rather than
   silently re-wrap. Desktop row only; the mobile accordion below the breakpoint is full-width. */
@media(min-width:881px){.nav-links>a,.nav-links .nav-top{white-space:nowrap;flex-shrink:0}}
@media(max-width:880px){
  .nav-toggle{display:inline-flex}
  .cs-navnum{font-size:15px}
  header .nav{padding:12px 20px;flex-wrap:wrap}
  /* the shared bottom mobile CTA bar (.mobar) is suppressed for Craftsman — the sticky header already
     carries the phone + "Request an estimate" on mobile, so a second bottom bar is redundant (operator). */
  .mobar{display:none}
  .cs-stickybar{display:block}
  /* NAVBAR PHONE, mobile half (F142; ONE-ROW ruling, Alex mobile pass 2026-07-29: "combine those into one
     row so it doesn't take up too much space" — the brand row and the full-width call row merge). The call
     plate sits inline between the brand and the hamburger: filled, number at 16px (the F142 R2 floor),
     min-height 44 (R4), sticky — so the call target still rides every scroll position at 390px on ONE line. */
  /* cs escalation 2026-07-30: this rule PINNED the plate inline (flex:0 0 auto;order:0) while the markup's
     own F142 design says it becomes the sticky nav's FULL-WIDTH SECOND-ROW tap-to-call below the hamburger
     breakpoint — the 156px nowrap plate inline beside brand+toggle = 18px overflow on EVERY page at 390.
     The documented second row: header wraps, plate takes the full width, centered, >=44px tap floor. */
  .nav{flex-wrap:wrap}
  .cs-navcta{flex:1 1 100%;order:99;gap:8px;margin:8px 0 0;justify-content:center}
  .cs-navcta .cs-navcall{width:100%;max-width:420px;justify-content:center}
  .cs-navcall{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;min-height:44px}
  .cs-navcall svg{width:16px;height:16px}
  .cs-navcall b{font-size:16px}
  .nav-toggle{flex:none}
  header .nav{padding:8px 14px;flex-wrap:wrap} /* was nowrap — it defeated the F142 second-row plate (this selector outranks .nav); wrap IS the documented design */
  .brandlock{min-width:0;flex:0 1 auto}
  /* MOBILE LOGO CENTRED (Alex mobile pass 2026-08-01: "on top nav bar center the logo on the black
     header"). Row 1 already carries only brand + hamburger here — the F142 call plate is order:99 on its
     own full-width second row — so the logo can take the full first row and centre, with the toggle
     lifted out of flow to the right. No overlap: the toggle is 40px in a 14px-padded row and the brand
     lock is min-width:0. Desktop (>880px) is untouched. */
  header .nav{position:relative}
  header .logo{flex:1 1 100%;justify-content:center}
  .brandlock{justify-content:center}
  .nav-toggle{position:absolute;right:14px;top:8px;z-index:2}
  /* HERO PHONE REMOVED ON MOBILE (same pass: "get rid of phone number on hero, since its sticky nav").
     The header is position:sticky and carries the full-width tap-to-call plate at every scroll position
     below 880px, so the hero's own call block is a duplicate of an always-visible control. The call
     CHANNEL is not lost — phone-prominence still reads the sticky plate. Desktop keeps the hero button
     (Alex 2026-07-26: "calling is the number one avenue"), which is unaffected at >880px. */
  .cs-herocall{display:none}
  .brandlock .bl-mk{width:30px;height:30px}
  .brandlock .bl-name{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* mobile nav: the shared JS toggles .nav-links open via aria-expanded/.open */
  .cs-nav.nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ink2);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -22px rgba(0,0,0,.6);padding:8px 0;display:none}
  header .nav-toggle[aria-expanded="true"] ~ .cs-nav.nav-links,
  .cs-nav.nav-links.open{display:flex}
  .cs-nav.nav-links>a,.cs-nav .nav-top{padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.08);width:100%}
  .cs-nav .nav-item.has-drop{position:static}
  .cs-nav .nav-drop{position:static;display:none;border:0;box-shadow:none;padding:0 0 8px;background:rgba(0,0,0,.2);min-width:0;width:100%}
  /* on mobile ONLY .open controls the submenu — neutralise the desktop hover/focus-within show, or a tapped
     nav-top keeps :hover/:focus-within and the dropdown won't collapse on the second tap */
  .cs-nav .nav-item.has-drop:hover .nav-drop,.cs-nav .nav-item.has-drop:focus-within .nav-drop{display:none}
  .cs-nav .nav-item.has-drop.open .nav-drop{display:flex}
  .cs-nav .nav-drop a{padding:11px 36px}
  /* the mobile hub row (2026-07-29 ruling): reachable hub link inside each dropdown, emphasized — on
     mobile the nav-top tap only toggles the drop, so this row is the ONLY path to the hub pages */
  .cs-nav .nav-drop .cs-drop-hub{display:block;font-weight:700;color:var(--verd-lt);border-bottom:1px solid rgba(255,255,255,.14)}
  /* (the .cs-navcta mobile row is set with the call button above — one rule, not two) */
}
@media(max-width:480px){
  /* one-row nav at true phone width: the icon gives its width to the number (F142 R2 floor holds at 16px) */
  .cs-navcall svg{display:none}
  .cs-navcall{padding:10px 10px}
  .brandlock .bl-name{font-size:15px}
  /* (the second-row plate treatment lives in the 820px block above — F142 full-width tap-to-call) */
}
@media(max-width:820px){
  .cs-hero .wrap{padding:56px 20px 72px}
  .cs-hero h1{font-size:44px}
  /* section rhythm step-down: the desktop 90px top+bottom stacks to ~180px of dead gap between sections on
     a phone; halve it to the hero's mobile rhythm so the page reads tight at 390px (operator sweep: CS 90px
     mobile gaps). Every 90px-padded band: services, spec sheet, process, service area, close, materials, calc. */
  .cs-svc,.cs-specs,.cs-proc,.cs-area,.cs-close,.cs-matsec,.cs-calc{padding:54px 0}
  /* emergency row on a 390px first screen: tighter row, full-width thumb-sized call target */
  .cs-hero-split,.cs-hero-grid{grid-template-columns:1fr;gap:30px}
  /* V2 stat strip at 390px: back to a single stacked column (3-across is too cramped on a phone) */
  .cs-heroV2 .cs-cstrip{grid-template-columns:1fr}
  .cs-heroV2 .cs-cstrip .c{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .cs-heroV2 .cs-cstrip .c:last-of-type{border-bottom:0}
  .cs-hero-shot{min-height:0}
  .cs-hero-shot .cs-vimg,.cs-hero-shot .cs-ph{position:relative;min-height:300px}
  .cs-hero-shot .cs-formplate{position:relative;width:auto;margin:16px 0 0}
  .cs-counter .wrap{grid-template-columns:1fr;gap:0}
  .cs-counter .cs-plate{padding:26px 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .cs-counter .cs-plate:last-child{border-bottom:0}
  .cs-counter .cs-plate + .cs-plate::before{display:none}
  .cs-split-grid{grid-template-columns:1fr}
  .cs-svc-grid{grid-template-columns:1fr}
  .cs-cmatrix-grid{grid-template-columns:1fr}
  .cs-specs-grid{grid-template-columns:1fr;gap:36px}
  .cs-out.cs-out-strip{grid-template-columns:1fr 1fr}
  /* 3 cells on a 2-col grid: the odd last cell spans the row so no empty dark track shows (2026-07-29) */
  .cs-out.cs-out-strip .cell:last-child:nth-child(odd){grid-column:1/-1}
  .cs-writ-list{grid-template-columns:1fr}
  /* MOBILE CONCISENESS (Alex mobile pass 2026-07-29: "the form's already big and takes up a lot of space —
     for every page, get rid of those little things on mobile"): the hero scope diamond chips and the
     bottom-CTA signal diamonds stand down at phone widths; the copy they carry is hero/close seasoning,
     not payload, and desktop keeps them. */
  .cs-hero .cs-scope,.cs-close .cs-signals{display:none}
  /* tile labels over photos read thin at 390px (Alex: "deck up / roof on are a little hard to read"):
     bigger type + a real backing so the label never fights its photo */
  .cs-tile .kx{font-size:15px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
  .cs-tile h3{font-size:38px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
  .cs-tile-scope li{font-size:13px;background:rgba(8,10,12,.55);border-color:rgba(255,255,255,.35)}
  /* paired CTAs render equal-size on mobile (Alex: "the call and the contact our team button are not the
     same sizes... call now and inspection — I'd like them the same size"): both stack full-width.
     ⚠ 2026-08-11: he raised the SAME complaint again (F44, "the buttons on the intro section... need to
     be the same size"), because THIS fix only ever covered mobile — the desktop half of his original
     sentence was never done, and the flex rule below went inert the moment .cs-seccta became a grid.
     Rewritten in grid terms: full-width rows on mobile, equal columns at desktop (:108). Same complaint
     twice is the under-covered-fix class, so it is named here rather than quietly re-fixed. */
  /* grid-auto-rows:1fr equalises HEIGHT too. Measured at 390 before adding it: widths matched at 350px
     but the call button rendered 54px against the plain button's 49px, because its phone SVG makes a
     taller line box and each stacked button is its own row (at 1280 they share one row and stretch
     equal for free). His "the same size" covers both axes; 1fr rows fix it without a magic pixel. */
  .cs-seccta{display:grid;grid-auto-flow:row;grid-auto-rows:1fr}
  .cs-seccta .cs-btn{justify-content:center}
  .cs-herocall-row{flex-direction:column;align-items:stretch}
  .cs-herocall-row .cs-btn{justify-content:center}
  .cs-herocall-note{flex:none;text-align:center}
  .cs-proc-light .cs-proc-grid{grid-template-columns:1fr}
  .cs-proc-light .cs-pstep:not(:first-child){border-left:0;border-top:1px solid var(--line)}
  .cs-steprail .cs-step{grid-template-columns:1fr;gap:16px}
  .cs-area-grid{grid-template-columns:1fr;gap:34px}
  .cs-towns{grid-template-columns:1fr}
  .cs-towns span:nth-child(odd),.cs-towns a:nth-child(odd){border-right:0}
  .cs-close-grid,.cs-close-grid-v1{grid-template-columns:1fr;gap:32px}
  .cs-gplate .cs-stamp{flex-direction:column;gap:14px}
  .cs-overview .cs-overview-grid,.cs-story .cs-story-grid,.cs-standards-grid,.cs-costband-grid,.cs-calc-panel,.cs-prof-grid,.cs-prof2-grid,.cs-hood-index,.cs-hood-grid,.cs-ctaband-grid,.cs-localmap-grid,.cs-csysd-grid{grid-template-columns:1fr;gap:30px}
  /* the story silhouette falls BELOW the copy (DOM order) and shortens — 420px of photo under a long
     read is a scroll tax on a phone. */
  .cs-story .cs-story-art{min-height:260px}
  .cs-prof2 .cs-prof-shot{order:-1}
  .cs-cf-grid{grid-template-columns:1fr 1fr;gap:14px}
  .cs-localmap-map{min-height:300px;order:-1}
  /* MOBILE OVERFLOW (pre-existing, 56px at 390px; caught by mobile-qa, fixed 2026-07-26). The band's CTA
     label is keyword-carrying and therefore long ("Get Matched With a Midlothian Roofing Company"), and
     .cs-btn is white-space:nowrap — so the grid column's min-content width was the whole unbreakable label
     and the PAGE scrolled sideways. A grid item defaults to min-width:auto, so the 1fr column could not
     shrink below it. Let the label wrap at mobile and let the columns shrink; the keyword stays intact. */
  .cs-ctaband-grid,.cs-ctaband-grid>*{min-width:0}
  .cs-ctaband .cs-btn{width:100%;white-space:normal;text-align:center}
  .cs-ctaband-btns{width:100%;justify-content:stretch}
  .cs-hood:nth-child(odd){border-right:0;padding-right:4px}
  .cs-hood:nth-child(even){padding-left:4px}
  .cs-matgrid{grid-template-columns:1fr}
  .cs-sig2 .cs-plategrid{grid-template-columns:1fr 1fr}
  .estimate .est-grid{grid-template-columns:1fr;gap:32px}
  .cs-head h2,.cs-head h2.ink{font-size:32px}
  .cs-storm-readout{flex-direction:column}
  .cs-storm-readout .sl{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .cs-storm-table{overflow-x:auto}
  .cs-storm-dated .thead{display:none}
  .cs-storm-dated .crow{grid-template-columns:1fr 1fr}
  .cs-storm-dated .crow div{padding:8px 18px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .cs-hero h1{font-size:38px}
  .cs-form .row,.cs-form .f.row,.est-card .est-form .row{grid-template-columns:1fr}
  .cs-tile h3{font-size:36px}
  .cs-close-copy h2{font-size:34px}
  .cs-sig2 .cs-plategrid{grid-template-columns:1fr}
  .cs-ff-grid{grid-template-columns:1fr}
  .cs-cf-grid{grid-template-columns:1fr}
  .cs-cmp-thead{display:none}
  .cs-cmp-row{grid-template-columns:1fr}
  .cs-cmp-row .opt-col::before{content:attr(data-lbl) ": ";color:var(--verd-lt);font-weight:600}
  .foot-grid{grid-template-columns:1fr}
}
/* ============================================================================
   BLOG — a COMPACT, dense counter-plate index + a stamped single-post column.
   INDEX: a tight 2-col grid (cs-blog-grid) of horizontal counter-plate cards on
   the warm .alt band, each led by an UPPERCASE stamped KICKER tag (verdigris
   underline rule) above a condensed title — utilitarian, not airy — under a
   compact stamped masthead (cs-blog-mast) that REPLACES the airy svc-hero.
   POST: a self-contained STAMPED TITLE BAND (cs-post-hero, NOT .svc-hero) over
   the dark page, a verdigris-topped lead photo, a 760px reading column, and a
   JS-free stamped plus/minus FAQ accordion on the light .alt band.
   ============================================================================ */
/* index masthead — a compact stamped dark band (self-contained, not svc-hero) */
.cs-blog-mast{background:var(--ink);color:#fff;padding:46px 0 38px;border-bottom:4px solid var(--verd)}
.cs-blog-mast h1{color:#fff;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4vw,46px);line-height:1.02;letter-spacing:.004em}
.cs-blog-sub{color:var(--on-dark);margin-top:12px;max-width:58ch;font:500 15.5px/1.6 var(--sans)}

/* index — dense 2-col grid of compact horizontal counter-plate cards (each is an <a>) */
/* BOTTOM AIR (Alex 2026-07-28: "white space between the blog card area and the orange bar at the bottom").
   Craftsman replaces the FL base sheet, so the base `section{padding:84px 0}` never applied here and the
   card grid ended flush against the footer's 4px verdigris keyline. 64px desktop / 44px phone. */
.cs-blog-idx{padding-top:56px;padding-bottom:64px} /* top: air between the dark hero bar and the card grid (Alex 2026-07-28, mirrors the bottom-air fix) */
.cs-blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:42px}
.cs-blog-card{display:flex;align-items:stretch;min-height:150px;background:var(--plate-lt);border:1px solid var(--line);border-left:3px solid var(--verd);overflow:hidden;transition:border-color .16s,background .16s}
.cs-blog-card:hover{border-color:var(--verd);background:#fff}
.cs-blog-thumb{flex:0 0 134px;position:relative;overflow:hidden;background:var(--concrete-lt)}
.cs-blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.cs-blog-card:hover .cs-blog-thumb img{transform:scale(1.05)}
.cs-blog-cardbody{flex:1;min-width:0;display:flex;flex-direction:column;padding:15px 18px 14px}
/* CARD MARKS UP ~1.4x (Alex 2026-07-28: "the little icons on the blog cards — make them visibly bigger").
   The craftsman index carries no SVG glyphs; its marks are the stamped kicker tag, the date stamp and the
   Read arrow, all set at 10.5-11px, which read as specks beside an 18px title. 10.5 -> 14.5 / 11 -> 15,
   with the arrow glyph itself lifted to 19px so it reads as a mark rather than a stray character. */
.cs-blog-kicker{align-self:flex-start;max-width:100%;font:700 14.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--verd-dk);padding-bottom:7px;margin-bottom:11px;border-bottom:2px solid var(--verd);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-blog-card h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:18px;line-height:1.06;letter-spacing:.004em;color:var(--ink);margin-bottom:7px}
.cs-blog-excerpt{color:var(--concrete);font:400 13.5px/1.55 var(--sans);margin-bottom:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-blog-cardfoot{margin-top:auto;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:10px}
.cs-blog-date{font:600 15px/1 var(--sans);letter-spacing:.03em;color:var(--concrete)}
.cs-blog-more{margin-left:auto;font:700 15px/1 var(--disp);letter-spacing:.11em;text-transform:uppercase;color:var(--verd-dk);display:inline-flex;align-items:center;gap:8px}
.cs-blog-more span{font-size:19px;line-height:1;transition:transform .16s}
.cs-blog-card:hover .cs-blog-more span{transform:translateX(3px)}

/* single post — stamped title band -> verdigris-topped lead photo -> 760px WARM-PAPER reading column.
   READING SURFACE (Alex 2026-07-28): the article body ran light-on-espresso for its whole length. A stamped
   dark masthead is the family signature and stays; long-form READING does not belong on it, so the column
   below the lead photo is warm paper with espresso ink. Rhythm on a post is now dark band -> photo ->
   cream article -> oat FAQ band, which is the same light/dark alternation the money pages run. */
.cs-post{display:block;background:var(--paper)}
.cs-post-hero{background:var(--ink);color:#fff;padding:52px 0 40px;border-bottom:4px solid var(--verd)}
.cs-post-hero h1{color:#fff;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4.4vw,50px);line-height:1.02;letter-spacing:.004em;max-width:22ch}
.cs-post-meta{display:inline-block;margin-top:16px;padding-bottom:8px;border-bottom:2px solid var(--verd);font:700 11px/1.4 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--verd-lt)}
.cs-post-fig{max-width:880px;margin:30px auto 0}
.cs-post-fig img{width:100%;max-height:440px;object-fit:cover;border:1px solid var(--border);border-top:4px solid var(--verd)}
.cs-post-body{max-width:760px;margin:0 auto;padding:50px 30px 8px}
.cs-post-lead{font:400 19px/1.62 var(--sans);color:var(--ink);margin-bottom:4px}
.cs-post-body h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:29px;color:var(--ink);margin:36px 0 12px;letter-spacing:.004em}
.cs-post-body p{color:var(--concrete);font:400 16.5px/1.75 var(--sans);margin-top:14px}
.cs-post-body strong{color:var(--ink)}
.cs-post-body a:not(.btn){color:var(--verd-dk);border-bottom:1px solid rgba(var(--verd-rgb),.5)}
.cs-post-body a:not(.btn):hover{border-bottom-color:var(--verd-dk)}
.cs-post-bullets{margin:16px 0 4px;padding-left:22px}
.cs-post-bullets li{color:var(--concrete);font:400 16px/1.7 var(--sans);margin-top:9px}
.cs-post-bullets li::marker{color:var(--verd-dk)}
/* POST FOOT (Alex, cedar-hill review 2026-08-01, his direct go): "a little bit of white space between
   the bottom sentence and the contact us button, and let's make the contact us button centered."
   The paragraph keeps its measure/alignment; only the button centres. */
.cs-post-cta{margin:32px 0 8px}
.cs-post-cta p{margin-bottom:26px}
.cs-post-cta .btn{display:block;width:fit-content;margin-inline:auto}

/* POST-BODY TABLE (Alex 2026-07-28) — the storm-record table idiom (stamped head rule, flat rows, verdigris
   accents) recoloured for the paper column. A real <table>, so it is announced as one; the wrapper is the
   scroll container so a wide table scrolls ITSELF instead of the page (DESIGN-PRINCIPLES: the body never
   scrolls sideways). Nothing here renders unless a body section authors `table`. */
.cs-post-tablewrap{margin:24px 0 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border)}
.cs-post-table{width:100%;min-width:420px;border-collapse:collapse;background:var(--plate-lt)}
.cs-post-table caption{caption-side:top;text-align:left;padding:13px 18px;background:var(--paper2);
  font:700 11px/1.4 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--verd-dk)}
.cs-post-table th{text-align:left;padding:13px 18px;background:var(--paper2);border-bottom:2px solid var(--verd);
  font:600 12px/1.3 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.cs-post-table td{padding:13px 18px;border-top:1px solid var(--line);font:400 15px/1.5 var(--sans);color:var(--concrete);vertical-align:top}
.cs-post-table td.cs-pt-k{font:600 15px/1.45 var(--sans);color:var(--ink)}
.cs-post-table tbody tr:hover td{background:rgba(var(--verd-rgb),.06)}
.cs-post-table a{color:var(--verd-dk);border-bottom:1px solid rgba(var(--verd-rgb),.5)}
/* post FAQ — JS-free <details> on the warm .alt band; stamped plus/minus indicator, no marker */
.cs-post-faqs{padding:80px 0}
.cs-post-faqs .wrap{max-width:820px}
.cs-post-faqs h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:34px;color:var(--ink);letter-spacing:.004em;text-align:center;margin-bottom:14px}
.cs-post-faqsub{color:var(--concrete);font:400 16px/1.65 var(--sans);text-align:center;max-width:60ch;margin:0 auto 22px}
.cs-post-faq{background:var(--plate-lt);border:1px solid var(--line);border-left:3px solid var(--verd);margin-bottom:12px;overflow:hidden}
.cs-post-faq summary{list-style:none;cursor:pointer;position:relative;padding:18px 50px 18px 22px;font:600 17px/1.35 var(--disp);letter-spacing:.005em;color:var(--ink)}
.cs-post-faq summary::-webkit-details-marker{display:none}
.cs-post-faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:400 24px/1 var(--disp);color:var(--verd-dk)}
.cs-post-faq[open] summary::after{content:"\2013"}
.cs-post-faq[open] summary{border-bottom:1px solid var(--line);color:var(--verd-dk)}
.cs-post-faq>div{padding:16px 22px 20px;color:var(--concrete);font:400 16px/1.7 var(--sans)}
.cs-post-faq>div a{color:var(--verd-dk);border-bottom:1px solid rgba(var(--verd-rgb),.5)}

/* blog responsive — 2->1 col at 560; stack the horizontal card at 430; keep the reading column tidy at 390 */
@media(max-width:860px){
  .cs-blog-grid{gap:14px}
  .cs-post-body{padding:44px 24px 8px}
}
@media(max-width:560px){
  .cs-blog-grid{grid-template-columns:1fr}
  .cs-blog-idx{padding-top:40px;padding-bottom:44px}
  .cs-post-body{padding-left:20px;padding-right:20px}
  .cs-post-body h2{font-size:25px}
}
@media(max-width:430px){
  .cs-blog-card{flex-direction:column;min-height:0}
  .cs-blog-thumb{flex:0 0 150px;width:100%}
}

/* (the 2026-07-26 topbar call plate + its 880px stand-down were removed 2026-07-27 — the navbar phone
   plate is the single call element in the header at every width; the topbar keeps its honest positioning
   line only) */
@media(max-width:430px){
  .cs-topbar .wrap{justify-content:center;padding:8px 20px}
  /* keep the 2 items ("Serving <city>" + "Free inspections") on ONE row at mobile */
  .cs-topbar .l{gap:14px;flex-wrap:nowrap;font-size:10px;letter-spacing:.1em;justify-content:center}
  .cs-topbar .l span::before{width:5px;height:5px}
}

/* Bridge the approved Craftsman Standard composition to the current shared runtime.
   No shared engine or existing family site is modified. */
html{scroll-padding-top:110px}
body.cs-site{background:var(--paper);color:var(--ink);font-size:17px;line-height:1.65}
.container,.wrap{width:min(100%,1240px);max-width:1240px;padding-inline:30px;margin-inline:auto}
body.cs-site p{max-width:74ch}
body.cs-site main a:not(.button):not(.cs-btn):not(.section-action){text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
body.cs-site a:hover{text-decoration-thickness:2px}
body.cs-site :focus-visible{outline:3px solid var(--verd);outline-offset:4px}
body.cs-site ::selection{background:var(--verd);color:var(--ink)}
body.cs-site input,body.cs-site textarea{caret-color:var(--verd)}
body.cs-site h1,body.cs-site h2,body.cs-site h3{overflow-wrap:normal;text-wrap:balance}
body.cs-site h2{font-size:clamp(30px,3.1vw,46px);line-height:1.08;letter-spacing:0;color:inherit;margin-bottom:22px}
body.cs-site h3{font-size:clamp(23px,2vw,29px);line-height:1.15;color:inherit;margin-bottom:14px}
body.cs-site p+p{margin-top:18px}
body.cs-site .button,body.cs-site .cs-btn{border-radius:0;background:var(--verd);color:var(--ink-btn);border:2px solid var(--verd);font:700 14px/1.25 var(--disp);letter-spacing:.055em;text-transform:uppercase;padding:15px 22px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;white-space:normal;cursor:pointer}
body.cs-site .button:hover,body.cs-site .cs-btn:hover{background:var(--verd-lt);border-color:var(--verd-lt);color:var(--ink-btn)}
.site-header{position:sticky;top:0;z-index:50;background:var(--steel);border-bottom:1px solid rgba(255,255,255,.14);color:var(--on-dark)}
.header-inner{display:flex;align-items:center;gap:24px;min-height:90px;padding-block:16px}
.site-header .brand{display:flex;align-items:center;gap:11px;min-width:0;margin-right:auto;color:var(--on-dark);font:700 24px/1.02 var(--disp);text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
.brand .brand-mark{width:42px;height:42px;flex:none}
.brand small{display:block;font:600 10px/1.25 var(--sans);letter-spacing:.16em;margin-top:6px;color:var(--on-dark);text-transform:uppercase}
.header-actions{display:flex;align-items:center;gap:14px}
.site-header .header-phone{font:600 20px/1.1 var(--disp);white-space:nowrap;color:var(--ink-btn);background:var(--verd);text-decoration:none;padding:14px 18px;min-height:46px;display:flex;align-items:center;justify-content:center}
.site-header .header-cta{font-size:12px;min-height:44px;padding:12px 15px}
#main-nav{display:flex;align-items:center;gap:20px}
#main-nav>a,.nav-parent>a{font:600 14px/1.3 var(--disp);letter-spacing:.04em;text-transform:uppercase;padding-block:13px;text-decoration:none;color:var(--on-dark)}
.nav-group{position:relative}
.nav-parent{display:flex;align-items:center;gap:4px}
.nav-disclosure{width:27px;height:36px;border:0;background:none;color:var(--on-dark);font-size:18px;cursor:pointer}
.nav-panel{position:absolute;left:-16px;top:100%;width:260px;padding:12px;background:var(--steel);border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 30px rgba(0,0,0,.15)}
.nav-panel[hidden]{display:none!important}
.nav-panel a{display:block;padding:12px 10px;color:var(--on-dark);font-size:14px;text-decoration:none;line-height:1.35}
.nav-panel a:hover{background:var(--concrete)}
.menu-toggle{display:none}
.cs-hero{padding:70px 0;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--on-dark)}
.cs-hero:after{position:absolute;inset:0;content:"";z-index:-1;background:linear-gradient(90deg,rgba(31,26,23,.95),rgba(31,26,23,.87) 50%,rgba(31,26,23,.55))}
.cs-bgph{position:absolute;inset:0;z-index:-2}
.cs-bgph img{width:100%;height:100%;object-fit:cover;filter:none}
.cs-hero-split,.cs-hero-grid{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
.cs-hero-copy{min-width:0}
.cs-hero h1{font-size:clamp(43px,4.35vw,67px);line-height:1.02;letter-spacing:.005em;color:#fff;margin:0 0 23px;max-width:14ch}
.cs-hero .cs-lead{font-size:18px;line-height:1.6;max-width:48ch;color:var(--on-dark)}
.cs-hero .cs-herocall{display:block;margin-top:24px}
.cs-hero .cs-hero-trust{font:500 14px/1.6 var(--sans);color:var(--on-dark);margin-top:18px;max-width:50ch}
.cs-formplate{background:rgba(20,17,15,.97);padding:28px;border:1px solid rgba(255,255,255,.2);border-top:5px solid var(--verd);min-width:0}
body.cs-site .cs-formplate .lead-form{background:transparent;border:0;padding:0;box-shadow:none;color:var(--on-dark);display:grid;gap:14px;margin:0}
body.cs-site .lead-form h2{font:700 25px/1.1 var(--disp);letter-spacing:.02em;color:#fff;margin:0}
body.cs-site .lead-form .form-intro{color:var(--on-dark);font-size:14px;margin:0;line-height:1.5}
.lead-form label{display:grid;gap:7px;min-width:0;font:600 13px/1.45 var(--sans);color:var(--on-dark)}
.lead-form label>span{font-weight:400}
.lead-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.lead-form input,.lead-form select,.lead-form textarea{font:400 16px/1.45 var(--sans);padding:10px 12px;min-height:44px;width:100%;border:1px solid #706158;border-radius:0;background:#29211B;color:#F1ECE6;box-shadow:none}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:#c7bbb0;opacity:1}
.lead-form select option{background:#29211B;color:#F1ECE6}
.lead-form textarea{resize:vertical;min-height:66px}
.lead-form .consent{display:flex;align-items:flex-start;gap:9px;font:400 12px/1.6 var(--sans);color:var(--on-dark);margin:0}
.lead-form .consent input{width:18px;height:18px;min-height:18px;flex:none;accent-color:var(--verd);margin-top:2px}
.lead-form .consent a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.lead-form .honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lead-form button[type=submit]{width:100%;margin:0}
.lead-form button[type=submit] span{display:none}
.lead-form .form-status{font-size:14px;margin:0}
.lead-form .form-status:empty{display:none}
.lead-form .field-error,.lead-form [role=alert]{color:#ffe2ca;font-size:13px;line-height:1.5}
.lead-form [aria-invalid=true]{border:2px solid #E0922F}
.lead-form .turnstile-slot{margin:0;max-width:100%}
.cs-trust-strip{background:var(--concrete);color:var(--on-dark);border-bottom:1px solid rgba(255,255,255,.1)}
.cs-trust-strip ul{display:flex;justify-content:space-between;gap:24px;list-style:none;padding-block:22px}
.cs-trust-strip li{font:600 16px/1.4 var(--disp);letter-spacing:.03em;text-transform:uppercase;display:flex;gap:12px;align-items:center}
.cs-trust-strip li:before{content:"";width:6px;height:6px;background:var(--verd);flex:none;transform:rotate(45deg)}
.cs-section{padding:82px 0;background:var(--paper);color:var(--ink)}
.cs-section.cs-warm{background:var(--cool)}
.cs-section.cs-dark{background:var(--concrete);color:var(--on-dark)}
.cs-section-head{max-width:790px;margin-bottom:36px}
.cs-section-head h2:last-child{margin-bottom:0}
.cs-split-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center}
.cs-copy{min-width:0;max-width:74ch}
.cs-split-layout>.cs-media{align-self:stretch;min-height:350px}
.cs-media{margin:0;min-width:0;overflow:hidden;background:var(--cool)}
.cs-media img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.cs-media figcaption{background:var(--cool);color:var(--ink);font:400 13px/1.5 var(--sans);padding:12px 16px}
.cs-image-left .cs-media{grid-column:1;grid-row:1}
.cs-image-left .cs-copy{grid-column:2}
.cs-copy .button{margin-top:25px}
.cs-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.cs-card{background:#fff;min-width:0;min-height:0;padding:0;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-start}
.cs-card>.cs-media{aspect-ratio:1.6;flex:none}
.cs-card>.cs-media img{height:100%;object-fit:cover}
.cs-card-copy{padding:27px 25px;display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}
.cs-card h3{font-size:25px;line-height:1.13;color:var(--ink)}
body.cs-site .cs-card h3 a{text-decoration:none}
.cs-card h3 a:hover{text-decoration:underline}
.cs-card p{font-size:15px;line-height:1.65;color:var(--ink);text-shadow:none}
.cs-card .button{margin-top:auto;font-size:12px;padding:12px 16px;min-height:44px}
.cs-card-copy>p:has(+.button),.cs-card-copy>.cs-list:has(+.button){margin-bottom:24px}
.cs-card p+.button,.cs-card .cs-list+.button{margin-top:auto}
.cs-card time{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}
.cs-dark .cs-card{background:var(--paper);color:var(--ink)}
.cs-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px;align-items:center}
.cs-list{list-style:none;margin:22px 0;display:grid;gap:11px;padding:0}
.cs-list li{padding-left:20px;position:relative;line-height:1.65}
.cs-list li:before{content:"";position:absolute;width:5px;height:5px;left:0;top:.65em;background:currentColor;transform:rotate(45deg)}
.cs-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:3px solid var(--verd);border-bottom:1px solid var(--line)}
.cs-comparison article{padding:32px 36px 32px 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.cs-comparison article+article{border-left:1px solid var(--line);padding-left:36px}
.cs-comparison article>p:has(+.button),.cs-comparison article>.cs-list:has(+.button){margin-bottom:24px}
.cs-comparison .button{margin-top:auto}
.cs-process-list{list-style:none;counter-reset:roof-step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:0;margin:0}
.cs-process-list>li{counter-increment:roof-step;border-top:1px solid currentColor;padding-top:24px;min-width:0}
.cs-process-list>li:before{content:counter(roof-step,decimal-leading-zero);display:block;font:600 49px/1 var(--disp);color:var(--verd);margin-bottom:23px}
.cs-process-list h3{font-size:26px}
.cs-process-list p{font-size:16px}
.cs-faq-layout{display:grid;grid-template-columns:.74fr 1.26fr;gap:55px;align-items:start}
.cs-faq-items details{border-top:1px solid var(--line);padding:22px 0}
.cs-faq-items details:last-child{border-bottom:1px solid var(--line)}
.cs-faq-items summary{font:600 22px/1.25 var(--disp);cursor:pointer;list-style-position:outside;padding-right:14px;margin-left:22px}
.cs-faq-items details>div{padding:18px 22px 0 0}
.cs-faq-items p{font-size:16px}
.cs-fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0}
.cs-fact-grid>div{border-top:3px solid var(--verd);padding-top:22px}
.cs-fact-grid dt{font:600 18px/1.3 var(--disp);text-transform:uppercase;margin-bottom:14px}
.cs-fact-grid dd{font:600 35px/1.13 var(--disp);margin:0}
.cs-fact-grid dd small{display:block;font:400 14px/1.6 var(--sans);margin-top:13px}
.cs-scope-facts{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.cs-scope-facts dt{font-weight:700;font-size:14px}
.cs-scope-facts dd{margin-top:5px;font-size:15px}
.cs-table-scroll{overflow:auto;margin-top:28px;max-width:100%;overscroll-behavior-inline:contain}
.cs-table-scroll table{border-collapse:collapse;width:100%;min-width:600px;font-size:15px;line-height:1.6;background:#fff;color:var(--ink)}
.cs-table-scroll th,.cs-table-scroll td{padding:18px 21px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cs-table-scroll thead th{font:600 17px/1.3 var(--disp);text-transform:uppercase;background:var(--concrete);color:var(--on-dark)}
.cs-table-scroll tbody th{font-weight:700;width:24%}
.cs-table-scroll caption{text-align:left;font-size:14px;line-height:1.6;padding:0 0 14px}
.cs-table-scroll td small{display:block;font-size:13px;line-height:1.5;margin-top:8px}
.cs-note{font-size:14px!important;line-height:1.65;margin-top:25px;max-width:82ch}
.cs-stamped-close{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--on-dark);padding-block:78px}
.cs-close-background{position:absolute;inset:0;z-index:-2}
.cs-close-background img{width:100%;height:100%;object-fit:cover}
.cs-stamped-close:after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(31,26,23,.91)}
.cs-closing-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cs-close-copy h2{font-size:clamp(37px,4vw,58px);line-height:1.04;max-width:16ch;color:#fff}
.cs-close-copy .cs-call{margin-top:30px}
.cs-reading-hero{position:static;z-index:auto;padding:68px 0;background:var(--ink);color:var(--on-dark)}
.studio-error h1{color:var(--ink)}
.cs-reading-hero h1{font:700 clamp(39px,4.3vw,64px)/1.05 var(--disp);max-width:22ch;color:#fff;margin-bottom:24px}
.cs-reading-hero p{font-size:18px;line-height:1.7;max-width:68ch}
.cs-reading-page .section-text{padding:45px 0;background:var(--paper)}
.cs-reading-page .section-text .narrow{max-width:900px}
.cs-reading-page .section-text h2{margin-top:0}
.cs-article-back{padding-block:35px}
.cs-storm-year{border-top:1px solid var(--line);padding:22px 0}
.cs-storm-year summary{font:600 28px/1.2 var(--disp);cursor:pointer}
.cs-storm-year summary span{font:400 14px/1.5 var(--sans);margin-left:20px}
.ks-calculator{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:35px;padding:32px;background:#fff;border-top:4px solid var(--verd);border-radius:0}
.ks-calc-controls{display:grid;gap:17px;min-width:0}
.ks-calc-controls label{display:grid;gap:8px;font-size:15px;font-weight:600}
.ks-calc-controls input,.ks-calc-controls select{width:100%;padding:12px;font:400 16px/1.4 var(--sans);border:1px solid #8d8379;border-radius:0;background:#fff;color:var(--ink)}
.ks-calc-help{font-size:14px;line-height:1.6;margin:0}
.ks-calc-result{border-left:1px solid var(--line);padding-left:32px}
.ks-calc-result .eyebrow{font:600 16px/1.3 var(--disp);letter-spacing:.03em;color:var(--ink);display:block;margin-bottom:15px}
.ks-calc-result .eyebrow:before{display:none}
.ks-calc-result output{display:block;font:600 43px/1.15 var(--disp);color:var(--ink);margin-bottom:20px}
.ks-calc-result p{margin:18px 0}
.ks-calc-result .button{margin:10px 0 0}
.ks-model-method{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;max-width:85ch}
.ks-model-method summary{font-weight:600;cursor:pointer}
.ks-model-method p,.ks-source,.ks-cost-sources{font-size:14px;line-height:1.7;margin-top:18px}
.ks-material-comparison{margin-bottom:35px}
.ks-material-comparison dl{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:25px}
.ks-material-comparison dl>div{padding-top:18px;border-top:1px solid var(--line)}
.ks-material-comparison dt{font-weight:600;font-size:15px}
.ks-material-comparison dd{font:600 28px/1.2 var(--disp);margin-top:10px}
.site-footer{background:var(--steel);color:var(--on-dark);padding:62px 0 95px;border-top:4px solid var(--verd)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:55px}
.footer-brand{font:700 29px/1.1 var(--disp);text-transform:uppercase;color:#fff;margin-bottom:18px}
.site-footer h2{font-size:20px;color:#fff;margin-bottom:20px}
.site-footer p{font-size:14px;line-height:1.7}
.site-footer a{display:block;color:var(--on-dark);text-decoration:none;line-height:1.5;margin-bottom:12px;font-size:14px;padding-block:3px}
.site-footer a:hover{text-decoration:underline}
.site-footer .phone-large{font:600 25px/1.3 var(--disp);margin-top:20px;color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.2);margin-top:35px;padding-top:25px;display:flex;gap:30px;justify-content:space-between}
.mobile-actions{display:none}
@media(min-width:1101px){.site-header .header-cta{display:none}}
@media(max-width:1100px){
 .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto 46px;gap:16px;min-height:80px;padding-block:12px;position:relative}
 .site-header .brand{font-size:23px;grid-column:1;margin:0;max-width:220px}
 .header-actions{grid-column:2;grid-row:1;display:block}
 .site-header .header-phone{display:flex;font-size:21px;padding:12px 16px}
 .site-header .header-cta{display:none}
 .menu-toggle{display:block;grid-column:3;grid-row:1;font:600 13px/1 var(--sans);width:46px;height:46px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer}
 .menu-toggle span{display:none}
 #main-nav{display:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto;overscroll-behavior:contain;background:var(--steel);padding:18px 30px 24px;border-top:1px solid rgba(255,255,255,.2)}
 #main-nav.open{display:block}
 #main-nav>a,.nav-parent>a{display:block;padding:16px 10px;font-size:18px;flex:1}
 .nav-parent{gap:8px;align-items:center}
 .nav-disclosure{width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.2)}
 .nav-panel{position:static;box-shadow:none;width:100%;border:0;border-left:1px solid rgba(255,255,255,.3);padding:6px 0 10px 18px;margin-left:10px}
 .nav-panel a{padding:12px 10px;min-height:44px}
 .cs-hero{padding-block:56px}
 .cs-hero-split,.cs-hero-grid{gap:34px}
 .cs-split-layout,.cs-closing-grid{gap:36px}
 .cs-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cs-faq-layout{grid-template-columns:.8fr 1.2fr;gap:35px}
 .cs-process-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 html{scroll-padding-top:94px}
 body.cs-site{font-size:16px}
 .container,.wrap{padding-inline:22px}
 .header-inner{gap:10px;padding-block:11px;min-height:74px}
 .site-header .brand{font-size:20px;gap:7px;max-width:150px}
 .brand .brand-mark{width:32px;height:32px}
 .brand span{max-width:94px}
 .brand small{font-size:8px;letter-spacing:.1em;margin-top:4px}
 .site-header .header-phone{font-size:18px;letter-spacing:0;padding:13px 8px}
 #main-nav{padding-inline:16px}
 .cs-hero{padding:40px 0 42px}
 .cs-hero-split,.cs-hero-grid{display:grid;grid-template-columns:1fr;gap:34px}
 .cs-hero h1{font-size:45px;line-height:1.05;max-width:17ch;margin-bottom:21px}
 .cs-hero .cs-lead{font-size:17px;line-height:1.65;max-width:42ch}
 .cs-hero .cs-herocall{margin-top:22px}
 .cs-formplate{padding:22px 20px}
 body.cs-site .lead-form h2{font-size:25px}
 .lead-form .form-grid{gap:12px}
 .cs-trust-strip ul{padding-block:20px;gap:12px;flex-direction:column;align-items:flex-start}
 .cs-trust-strip li{font-size:15px}
 .cs-section{padding:56px 0}
 body.cs-site h2{font-size:34px;margin-bottom:21px}
 body.cs-site h3{font-size:26px}
 .cs-section-head{margin-bottom:28px}
 .cs-split-layout,.cs-closing-grid,.cs-faq-layout{grid-template-columns:1fr;gap:31px}
 .cs-split-layout>.cs-media{min-height:0;aspect-ratio:1.25}
 .cs-media img{min-height:0}
 .cs-media:has(figcaption){aspect-ratio:auto;align-self:start}
 .cs-media:has(figcaption) img{height:auto;aspect-ratio:1.25}
 .cs-image-left .cs-media,.cs-image-left .cs-copy{grid-column:auto;grid-row:auto}
 .cs-image-left .cs-copy{order:0}
 .cs-image-left .cs-media{order:1}
 .cs-card-grid{grid-template-columns:1fr;gap:25px}
 .cs-card>.cs-media{aspect-ratio:1.65}
 .cs-card-copy{padding:24px}
 .cs-card p{font-size:16px}
 .cs-comparison{grid-template-columns:1fr}
 .cs-comparison article{padding:27px 0}
 .cs-comparison article+article{border-left:0;border-top:1px solid var(--line);padding-left:0}
 .cs-process-list{grid-template-columns:1fr;gap:28px}
 .cs-process-list>li{display:grid;grid-template-columns:45px minmax(0,1fr);gap:20px;padding-top:23px}
 .cs-process-list>li:before{font-size:40px;margin-top:3px}
 .cs-faq-items summary{font-size:23px}
 .cs-fact-grid{grid-template-columns:1fr;gap:25px}
 .cs-fact-grid dd{font-size:34px}
 .cs-scope-facts{grid-template-columns:1fr}
 .cs-table-scroll th,.cs-table-scroll td{padding:15px}
 .cs-stamped-close{padding-block:55px}
 .cs-close-copy h2{font-size:43px;max-width:17ch}
 .cs-close-copy .cs-call{margin-top:24px}
 .cs-reading-hero{padding:46px 0}
 .cs-reading-hero h1{font-size:42px}
 .cs-reading-page .section-text{padding:32px 0}
 .ks-calculator{grid-template-columns:1fr;padding:22px;gap:28px}
 .ks-calc-result{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}
 .ks-calc-result output{font-size:39px}
 .ks-material-comparison dl{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr;gap:30px}
 .footer-bottom{display:block;padding-top:23px}
 .footer-bottom p+p{margin-top:15px}
 .site-footer{padding-top:45px;padding-bottom:110px}
 .mobile-actions{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 15px max(10px,env(safe-area-inset-bottom));z-index:60;background:var(--steel);border-top:1px solid rgba(255,255,255,.25)}
 .mobile-actions a{display:flex;justify-content:center;align-items:center;min-height:48px;padding:10px 8px;text-align:center;font:600 15px/1.2 var(--disp);letter-spacing:.02em;border:1px solid var(--verd);color:var(--on-dark);text-decoration:none}
 .mobile-actions a:last-child{background:var(--verd);color:var(--ink-btn)}
 .mobile-actions:not(:has(a[href^="tel:"])){grid-template-columns:1fr}
}
@media(max-width:370px){
 .container,.wrap{padding-inline:16px}
 .site-header .brand{font-size:18px;gap:5px;max-width:125px}
 .brand .brand-mark{width:26px;height:26px}
 .brand span{max-width:83px}
 .site-header .header-phone{font-size:16px}
 .header-inner{gap:8px;grid-template-columns:minmax(0,1fr) auto 44px}
 .menu-toggle{width:44px}
 .cs-hero h1{font-size:40px}
 .cs-formplate{padding:20px 16px}
 .lead-form .form-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Selected Yukon photograph crops and consistent brand mark. */
.cs-hero .cs-bgph img[src*="house-exterior--house-exterior-059"]{object-position:50% 10%!important}
.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand svg{width:38px;height:38px;flex:none}
.site-header .brand .custom-brand{width:158px!important;height:auto!important;max-width:100%;display:block}
.footer-brand .custom-brand{width:280px;height:auto;max-width:100%}
@media(max-width:700px){.cs-hero .cs-bgph img[src*="house-exterior--house-exterior-059"]{object-position:50% 45%!important}}

@media(max-width:700px){
 .cs-responsive-records .cs-table-scroll{overflow:visible}
 .cs-responsive-records table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}
 .cs-responsive-records thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .cs-responsive-records tbody,.cs-responsive-records tr{display:block;width:100%}
 .cs-responsive-records tr{margin-bottom:24px;border-top:2px solid var(--concrete)}
 .cs-responsive-records th,.cs-responsive-records td{display:block;width:100%!important;padding:15px 0;box-sizing:border-box}
 .cs-responsive-records td:before{content:attr(data-label);display:block;font-weight:700;margin-bottom:6px;color:var(--ink)}
 .cs-responsive-records tbody th{font-family:var(--disp);font-size:22px;color:var(--ink)}
}

/* Seed-review corrections: actual source-family layering and compact header. */
body.cs-site .cs-hero{isolation:isolate;padding:64px 0;overflow:hidden}
body.cs-site .cs-hero .cs-bgph{z-index:0}
body.cs-site .cs-hero:after{z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(20,17,15,.86),rgba(20,17,15,.76) 50%,rgba(20,17,15,.48))}
body.cs-site .cs-hero>.wrap{position:relative;z-index:2}
.cs-hero h1 .cs-city{color:var(--verd)}
body.cs-site .header-cta{display:none!important}
.cs-comparison.cs-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.cs-comparison.cs-count-3{grid-template-columns:1fr}}
@media(max-width:700px){body.cs-site .cs-hero{padding:52px 0}body.cs-site .cs-hero:after{background:linear-gradient(180deg,rgba(20,17,15,.84),rgba(20,17,15,.72) 55%,rgba(20,17,15,.82))}}

/* Keep the assigned number, two-line wordmark and menu in a single phone row. */
@media(max-width:700px){
 body.cs-site .site-header .brand{font-size:18px;gap:7px;min-width:0;width:auto;max-width:none}
 body.cs-site .site-header .brand .brand-mark{width:25px!important;height:28px!important;flex:0 0 25px}
 body.cs-site .site-header .brand>span{font-size:18px;line-height:1.05;max-width:100px;min-width:0}
 body.cs-site .site-header .brand small{font-size:8px;line-height:1.2;margin-top:4px;letter-spacing:.035em;white-space:nowrap}
 body.cs-site .site-header .header-phone{font-size:18px;padding:12px 10px}
}
body.cs-site .lead-form :is(input,select,textarea){scroll-margin-block:140px 110px}

.cs-card-grid.cs-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-source-notes .cs-fact-grid{gap:24px}
.cs-source-notes .cs-fact-grid dd{font:500 19px/1.5 var(--sans);text-transform:none}
.cs-source-notes .cs-fact-grid dt{margin-bottom:8px}
.cs-source-notes{padding-block:45px}
.cs-city-map{border:1px solid var(--line);background:var(--cool)}
.cs-city-map iframe{display:block;width:100%;height:460px;border:0}
@media(max-width:700px){.cs-city-map iframe{height:380px}.cs-actions .button{max-width:100%;white-space:normal}}
@media(max-width:800px){.cs-card-grid.cs-count-2{grid-template-columns:1fr}}

/* Blog and articles have a continuous editorial reading rhythm. */
.cs-editorial{background:var(--paper);color:var(--ink);padding:58px 30px 70px}
.cs-editorial h1,.cs-editorial h2,.cs-editorial h3{color:var(--ink);text-transform:none;line-height:1.12}
.cs-editorial a:not(.button){text-decoration:underline;text-underline-offset:.17em}
.cs-article{max-width:1080px;margin:auto}
.cs-editorial-header{position:static;z-index:auto;background:none;padding:0;max-width:1080px;margin:0 auto 45px;color:var(--ink)}
.cs-editorial-header>nav{margin-bottom:24px;font-size:15px}
.cs-editorial-header h1{font-size:clamp(38px,4vw,59px);max-width:23ch;margin:0 0 24px}
.cs-editorial-meta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:13px;line-height:1.5;margin:20px 0}
.cs-article-deck{font-size:20px;line-height:1.7;max-width:74ch}
.cs-editorial-media{margin:30px 0;background:var(--cool)}
.cs-editorial-media img{display:block;width:100%;height:auto;max-height:500px;object-fit:cover}
.cs-editorial-media figcaption{font-size:13px;line-height:1.6;color:var(--muted);padding:12px 0;background:var(--paper)}
.cs-article-body{max-width:760px;margin:46px auto 0;font-size:18px;line-height:1.8}
.cs-article-section{margin:0 0 46px}
.cs-article-section h2,.cs-article-invitation h2{font-size:34px;margin:0 0 22px}
.cs-article-body p{line-height:1.8;margin-bottom:22px}
.cs-article-options>section+section{margin-top:30px}
.cs-article-options h3{font-size:27px;margin-bottom:14px}
.cs-article-body table{font-size:15px;line-height:1.6}
.cs-article-invitation{margin-top:56px;padding:30px 0;border-top:2px solid var(--verd)}
.cs-editorial-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.cs-editorial-actions .button{min-height:48px;font-size:14px}
.cs-editorial-back{max-width:760px;margin:25px auto 0;font-weight:600}
.cs-blog-index{padding-top:60px}
.cs-blog-index>.cs-editorial-header p{max-width:70ch;font-size:19px;line-height:1.75}
.cs-blog-collection,.cs-blog-resources{max-width:1180px;margin:0 auto}
.cs-blog-collection>h2,.cs-blog-resources h2{font-size:36px;margin-bottom:22px}
.cs-blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:55px;margin-top:35px}
.cs-blog-post{display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;padding:0 0 38px;margin:0 0 38px;border-bottom:1px solid var(--line)}
.cs-blog-post .cs-editorial-media{margin:0;align-self:start}
.cs-blog-post img{aspect-ratio:1.4;object-fit:cover}
.cs-blog-post h3{font-size:29px;margin-bottom:14px}
.cs-blog-post p{line-height:1.7;margin-bottom:20px}
.cs-blog-post .cs-editorial-meta{font-size:12px;margin:12px 0 18px}
.cs-blog-sidebar{border-left:1px solid var(--line);padding-left:28px}
.cs-blog-sidebar-title{font:600 25px/1.2 var(--disp);margin-bottom:20px}
.cs-blog-sidebar nav{display:grid;gap:16px}
.cs-blog-help{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.cs-blog-help p{line-height:1.7}
.cs-blog-help .cs-editorial-actions{display:grid}
.cs-blog-help .button{font-size:13px;padding-inline:12px}
.cs-blog-resources{padding-top:20px;max-width:1180px}
.cs-blog-resources p{max-width:72ch;line-height:1.75;margin:0 0 20px}
@media(max-width:1100px){.cs-blog-post{grid-template-columns:230px minmax(0,1fr)}.cs-blog-layout{gap:32px;grid-template-columns:minmax(0,1fr) 220px}}
@media(max-width:800px){.cs-editorial{padding:36px 22px 50px}.cs-editorial-header h1{font-size:39px}.cs-article-deck{font-size:18px}.cs-article-body{font-size:17px;margin-top:30px}.cs-article-section h2,.cs-article-invitation h2{font-size:30px}.cs-blog-layout{display:block}.cs-blog-post{grid-template-columns:1fr;gap:22px}.cs-blog-sidebar{border-left:0;border-top:1px solid var(--line);padding:30px 0 0}.cs-blog-help .cs-editorial-actions{display:flex}.cs-editorial-header{margin-bottom:30px}.cs-editorial-media img{max-height:360px}}

/* Every family reserves the visible verification footprint, including previews. */
.lead-form .turnstile-slot {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 65px;
  margin: 4px 0;
  line-height: 1.35;
}
.lead-form .turnstile-slot[data-turnstile-size="compact"] { min-height: 140px; }
.lead-form .turnstile-slot:not([data-turnstile-sitekey]) {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 4px;
}
.lead-form .turnstile-slot:not([data-turnstile-sitekey])::before {
  content: "Security verification";
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  opacity: .75;
}