@font-face{font-family:"Sora";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/sora-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/manrope-latin-wght-normal.woff2") format("woff2")}


/* ===== helper tokens (NON-palette; runtime injects palette/fonts separately) ===== */
:root{ --wrap:1200px; --r:12px; --r-sm:8px; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 36px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.eyebrow{display:inline-block;font:700 11.5px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--pine)}
.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(--ink);color:#fff;text-decoration:none;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}

/* ===== duotone / monochrome photo treatment ===== */
.ph{position:relative;background:linear-gradient(145deg,var(--pine-lt) 0%,var(--pine-dk) 60%,#081f1c 100%);overflow:hidden;border-radius:var(--r)}
.ph::after{content:attr(data-l);position:absolute;left:16px;bottom:14px;font:700 10px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);z-index:2}
.ph::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:6px 6px;z-index:1;pointer-events:none}
.ph.sand{background:linear-gradient(145deg,var(--sand-dk) 0%,#8fb0a8 55%,#5f7f78 100%)}
.ph.dark{background:linear-gradient(145deg,var(--char2) 0%,var(--charcoal) 60%,#111518 100%)}
/* real photo inside a .ph: duotone wash via blend so pine identity carries even on a color photo */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph.has-photo{background:var(--pine-dk)}
.ph.has-photo::before{background-image:none;background:linear-gradient(150deg,rgba(21,81,74,.34),rgba(8,31,28,.30));mix-blend-mode:multiply;z-index:1}

/* ===== buttons (pill) ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 14.5px/1 var(--font-body);letter-spacing:.01em;padding:15px 26px;border-radius:50px;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s;border:2px solid transparent}
.btn svg{flex-shrink:0}
.btn-pine,.btn-primary{background:var(--pine);color:#fff}
.btn-pine:hover,.btn-primary:hover{background:var(--pine-dk);transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(var(--pine-rgb),.5)}
.btn-pine:active,.btn-primary:active{transform:translateY(0)}
.btn-out,.btn-ghost{border-color:var(--pine);color:var(--pine)}
.btn-out:hover,.btn-ghost:hover{background:var(--pine);color:#fff;transform:translateY(-1px)}
.btn-out:active,.btn-ghost:active{transform:translateY(0)}
.btn-white{background:#fff;color:var(--pine)}
.btn-white:hover{background:var(--cream);transform:translateY(-1px)}
.btn-white:active{transform:translateY(0)}
.btn-lg{padding:17px 32px;font-size:15.5px}
.btn-sm{padding:11px 20px;font-size:13px}
.btn:focus-visible{outline:3px solid var(--pine-lt);outline-offset:3px}

/* ===== TOPBAR ===== */
.topbar{background:var(--charcoal);color:rgba(255,255,255,.85);font-family:var(--font-body)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:9px 36px;font-size:12.5px;letter-spacing:.015em}
.topbar .l{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.topbar .l span{display:flex;align-items:center;gap:6px}
.topbar .l span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pine-lt);flex-shrink:0}
.topbar b{color:#fff}
.topbar .phone-top{font:700 13.5px/1 var(--font-body);color:#fff;letter-spacing:.02em}

/* ===== NAV ===== */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 36px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:13px}
.brand .mark{width:42px;height:42px;border-radius:10px;background:var(--pine);display:grid;place-items:center;flex-shrink:0}
.brand .mark svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.brand .bn{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.brand .bn small{display:block;font:600 10.5px/1.2 var(--font-body);letter-spacing:.06em;color:var(--muted);margin-top:3px}
nav.links{display:flex;gap:6px}
nav.links a{padding:8px 13px;font:600 14.5px/1 var(--font-body);border-radius:50px;transition:.15s;color:var(--muted)}
nav.links a:hover{background:var(--cream);color:var(--pine)}
nav.links a:focus-visible{outline:3px solid var(--pine);outline-offset:2px}
.nav-cta{display:flex;align-items:center;gap:12px}
/* NAV CALL PLATE — F142 MOVE 1 (phone prominence, ported to modern-pro 2026-07-28).
   The mock always carried a .nav-phone element in this slot, so the plate is family-true. What CHANGED
   at the family pass is the HIERARCHY and the measurements, both of which were failing the standard:
     · it was a white/outline ghost sitting BEHIND the filled estimate button — the phone now LEADS
       (filled pine) and rr_mp_render_nav() steps the estimate button down to .btn-out behind it;
     · the number painted at 14.5px, under the 16px floor phone-prominence-check enforces ("way too
       small" — Alex's words about the same defect on craftsman) — it now paints at 16.5px;
     · the plate had no tap-height floor; it now clears the 44px platform minimum by construction. */
.nav-phone{display:inline-flex;align-items:center;gap:9px;min-height:46px;font:700 14.5px/1 var(--font-display);letter-spacing:.01em;color:#fff;background:var(--pine);border:2px solid var(--pine);border-radius:50px;padding:11px 20px;transition:background .18s,color .18s,transform .18s,box-shadow .18s}
/* white-space:nowrap — F142 follow-up (2026-07-28 eyes-on): at 1440 with a 10-digit number the plate
   wrapped MID-NUMBER ("(469) 373-" / "7465"), which reads as a broken element in the most trust-bearing
   spot in the chrome. The number is the one string on the page that must never break. */
/* IN-BOX LABELS (ratified `in-box-form-labels`, Alex 2026-07-22 irving r2: "in-box questions, no label
   row"). modern-pro had no rule hiding the hero form's [label], so every field showed the label AND the
   placeholder. Alex on the live draft: "the form box looks weird." The element stays for screen readers
   and the for=/id= pairing; only its visual box is removed. Hero form only (`.f`). */
.f label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-phone b{font:800 16.5px/1 var(--font-display);letter-spacing:-.01em;white-space:nowrap}
.nav-phone{white-space:nowrap}
.nav-phone svg{flex-shrink:0;color:#fff;transition:color .18s}
.nav-phone:hover{background:var(--pine-dk);border-color:var(--pine-dk);color:#fff;transform:translateY(-1px);box-shadow:0 8px 24px -10px rgba(var(--pine-rgb),.5)}
.nav-phone:focus-visible{outline:3px solid var(--pine-lt);outline-offset:3px}
.nav-est{white-space:nowrap}
/* logo lockups (shared header.php markup) */
.brandlock{display:inline-flex;align-items:center;line-height:1;text-decoration:none}
.bl-img{height:46px;width:auto;display:block}
.bl-name{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.bl-tag{font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:var(--pine)}
.bl-stack{display:inline-flex;flex-direction:column;gap:3px}
.bl-wm-italic .bl-name{font-style:italic;text-transform:uppercase;font-size:21px}
.bl-wm-sans .bl-name{font-size:22px}
.bl-wm-caps .bl-name{text-transform:uppercase;letter-spacing:-.005em;font-size:20px}
.bl-mark-left{gap:11px}
.bl-mark-left .bl-mk{height:38px;width:auto;display:block;flex-shrink:0}
.bl-mark-left .bl-tag{font-size:8.5px;letter-spacing:.26em;margin-top:1px}
.bl-stacked{flex-direction:column;align-items:center;gap:5px}
.bl-stacked .bl-mk{height:29px;width:auto;display:block}
.bl-stacked .bl-stack{align-items:center}
.bl-stacked .bl-tag{font-size:8.5px;letter-spacing:.3em;text-align:center}
.bl-wordmark{flex-direction:column;align-items:flex-start;gap:5px}
.bl-wordmark .bl-name{font-size:24px}
.bl-tagrow{display:inline-flex;align-items:center;gap:8px}
.bl-bar{height:11px;width:auto;display:block}
.bl-wordmark .bl-tag{font-size:9px;letter-spacing:.32em}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px;border-radius:8px}
.nav-toggle:hover{background:var(--cream);color:var(--pine)}
.nav-toggle:focus-visible{outline:3px solid var(--pine);outline-offset:2px}
/* nav dropdown (header.php emits .nav-item/.nav-top/.nav-drop) */
.nav-item{position:relative;display:flex;align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:600;font-size:14.5px;cursor:pointer;background:none;border:none;padding:8px 13px;border-radius:50px}
.nav-top:hover{color:var(--pine);background:var(--cream)}
.nav-top:focus-visible{outline:3px solid var(--pine);outline-offset:3px;border-radius:6px}
.nav-caret{transition:transform .18s;opacity:.7}
.nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:248px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -20px rgba(var(--pine-rgb),.22);padding:9px;margin-top:6px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;z-index:60}
@media(hover:hover){
  .nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)}
  .nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}
.nav-drop::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
.nav-drop a{display:block;padding:10px 13px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background .12s,color .12s}
.nav-drop a:hover{background:var(--cream);color:var(--pine)}
.nav-drop-all{color:var(--pine)!important;border-top:1px solid var(--line);border-radius:0 0 9px 9px!important;margin-top:5px;padding-top:12px!important}
.nav-drop-2col{display:flex;gap:6px;min-width:430px}
.nav-drop-2col .nav-drop-group{flex:1;min-width:200px}
.nav-drop-2col .nav-drop-group+.nav-drop-group{border-left:1px solid var(--line);padding-left:8px}
.nav-drop-label{display:block;padding:6px 13px 4px;font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

/* ===== HERO =====
   Compact, copy-forward proportions (review round 2: with the shorter copy + tight 3-field form the
   hero was reading too tall, an empty band of white under the fold). Trim the top/bottom padding so
   the hero opens fast and the form/photo sit closer to the headline, without shrinking the type. */
.hero{padding:48px 0 0;background:#fff}
.hero .inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:0 36px 64px}
.hero .copy{padding-top:0}
.hero .copy .eyebrow{margin-bottom:16px}
/* Responsive H1: clamp the size so long service/area headings (e.g. "New Construction Roofing
   in Jenks, OK", "Roof Replacement in Jenks, OK") step down and sit on ≤2 lines instead of
   wrapping to 3 awkward rows, while the short home H1 keeps its 54px presence. The wider
   max-width (was 14ch) lets a longer headline breathe onto a clean second line. text-wrap:balance
   evens the two lines. */
.hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;line-height:1.06;letter-spacing:-.035em;color:var(--ink);max-width:18ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--pine)}
/* SUB-HERO trust line — sits between the H1 and the longer lead, styled as a DISTINCTIVE design
   element (review round 3): ITALIC + the PINE accent color + spanning the FULL hero column width, so
   it reads as the headline's standout promise, not plain body copy ("the missing something" under a
   bare keyword H1). A subtle pine left-rule anchors it. The lead's top margin tightens since the
   subhead leads now. */
/* SELECTOR BUG (Alex: "the hero formatting looks weird" / "it's bunched together"): scoped to `.hero`,
   but hero v3 renders <section class="hero-bleed">, which does not carry `.hero`. The standout subhead
   lost its italic/size/left-rule on every v3 site and fell back to plain body text — two paragraphs at
   identical weight, which is exactly what he was seeing. */
.hero .hero-sub,.hero-bleed .hero-sub{font:600 italic 20px/1.5 var(--font-display);color:var(--pine);letter-spacing:-.005em;margin:16px 0 0;max-width:none;text-wrap:balance;padding-left:16px;border-left:3px solid var(--pine)}
.hero .subhead{font-size:16.5px;color:var(--muted);margin:14px 0 26px;max-width:38ch;line-height:1.6;font-weight:500}
.hero .cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* EMERGENCY line (persona-QA 2026-07-02, Bob) — optional, config-driven (hero emergency_line): a compact
   FLAT ruled row directly under the CTA buttons so a panicked phone visitor can dial from the first screen.
   Spec-led MP idiom: hairline top rule + phone glyph + pine tel link — no pill, no badge, no accent stripe. */
.hero .hero-emg,.hero-bleed .hero-emg{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font:600 14px/1.55 var(--font-body);color:var(--ink);max-width:46ch}
.hero .hero-emg svg,.hero-bleed .hero-emg svg{flex-shrink:0;margin-top:3px;color:var(--pine)}
.hero .hero-emg a,.hero-bleed .hero-emg a{color:var(--pine);font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.hero .hero-emg a:hover{color:var(--pine-dk)}
.hero .hero-emg a:focus-visible,.hero-bleed .hero-emg a:focus-visible{outline:3px solid var(--pine-lt);outline-offset:3px;border-radius:4px}
/* dark v3 full-bleed: white text over the scrim, sand accents keep AA contrast */
.hero-bleed .hero-emg{border-top-color:rgba(255,255,255,.28);color:#fff}
.hero-bleed .hero-emg svg{color:var(--sand-dk)}
.hero-bleed .hero-emg a{color:#fff;text-decoration-color:var(--sand-dk)}
.hero-bleed .hero-emg a:hover{color:var(--sand-dk)}
.hero-right{position:relative}

/* hero form card — Modern-Pro DARK PINE signature, compact */
/* ── HERO FORM — RESTORED TO THE LOCK MOCK (Alex P1-P4/P7, 2026-07-29) ────────────────────────────
   design-mocks/lock/modern-pro.html:99 defines this card as WHITE, 16px radius, layered soft shadow,
   hairline border, with a CENTRED note. What shipped was a solid dark plate with a left-aligned consent
   block. The "harsh blue", the bunching, the flat look and the uncentred disclaimer were all one
   decision: re-inventing a form that had already been designed and approved.
   Two late overrides I had added - padding:26px 26px 22px and form gap:11px - were literally the
   bunching, so this rewrites the region end to end instead of patching over them. */
.hero-form{background:#fff;border-radius:16px;padding:28px;box-shadow:0 24px 60px -20px rgba(var(--pine-rgb),.22),0 4px 16px -4px rgba(var(--pine-rgb),.10);border:1px solid var(--line);scroll-margin-top:104px}
.hero-form .form-title{font:800 18px/1.25 var(--font-display);color:var(--ink);letter-spacing:-.01em;margin-bottom:6px}
.hero-form .form-sub{font:500 13px/1.45 var(--font-body);color:var(--muted);margin-bottom:18px}
.hero-form form{display:flex;flex-direction:column;gap:16px}
/* The form gap only separates the FORM's children — step 1, the Next button, step 2. The actual fields
   live INSIDE .lf-step, so none of that gap ever reached them: measured 4px between the email field, the
   homeowner checkbox and the notes box, which is what Alex saw as "so close to each other". The step
   container needs its own column gap. */
.hero-form .lf-step{display:flex;flex-direction:column;gap:16px}
/* …and once the step is a flex column, the Back link stretches to full width like a field. It is a text
   link, so it sizes to its own content and its focus ring stops reading as a button. */
.hero-form .lf-back{align-self:flex-start}
.hero-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-form .f,.hero-form .row>div{display:block}
.hero-form label{display:block;font:600 11.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hero-form input,.hero-form select,.hero-form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;font:500 14px/1 var(--font-body);color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;outline:none}
.hero-form textarea{display:block;min-height:92px;line-height:1.5;resize:none}
.hero-form input::placeholder,.hero-form textarea::placeholder{color:var(--muted);opacity:.75}
.hero-form select{color:var(--ink)}
.hero-form select option{color:var(--ink)}
.hero-form input:focus,.hero-form select:focus,.hero-form textarea:focus{border-color:var(--pine);box-shadow:0 0 0 3px rgba(var(--pine-rgb),.10)}
/* the homeowner checkbox is a bare row with no box of its own, so at the shared gap it read as glued to
   the email field above and the notes field below (Alex on step 2). */
.hero-form .ef-check{display:flex;align-items:center;gap:9px;font:600 12.5px/1.35 var(--font-body);color:var(--muted);cursor:pointer;margin:4px 0}
.hero-form .ef-check input{width:auto;margin:0;accent-color:var(--pine);flex:0 0 auto}
.hero-form .btn,.hero-form button[type=submit]{width:100%;justify-content:center;margin-top:10px;background:var(--pine);color:#fff;border:none;padding:15px;border-radius:50px;font:700 15px/1 var(--font-body);cursor:pointer;transition:background .18s,transform .18s}
.hero-form .btn:hover,.hero-form button[type=submit]:hover{background:var(--pine-dk);transform:translateY(-1px)}
.hero-form .btn:active,.hero-form button[type=submit]:active{transform:translateY(0)}
.hero-form .btn:focus-visible,.hero-form button[type=submit]:focus-visible{outline:3px solid var(--pine);outline-offset:3px}
/* P4 - the mock centres this note. P5 moves the long TCPA consent to step 2, so step 1 carries a short one. */
.hero-form .form-consent,.hero-form .fineprint,.hero-form .form-note{font:500 11.5px/1.45 var(--font-body);color:var(--muted);text-align:center;margin:12px auto 0;max-width:34ch}
/* P6 (Alex 2026-07-29). The rule above caps the short form-note at 34ch, which is right for a one-line
   note and wrong for the TCPA paragraph that inherited it: ~320 characters at 34ch wraps to about ten
   lines. That is most of what made step 2 tall enough to shove the hero, and it is the same thing he
   called out as the disclaimer "taking so much space compared to the total form". Still centred. */
.hero-form .lf-consent{max-width:none;text-align:center}
/* D-row8: the bottom-CTA form disclaimer read WAY too big vs the form (Alex) — tighter everywhere the
   consent renders. R8-4a (alma live round 8): the original .est-card scoping silently missed /contact/,
   whose consent is a bare .fineprint.lf-consent with NO est-card ancestor — Alex asked "did you update
   that?" and the honest answer was no. Scoped to the consent elements THEMSELVES now: the rule follows
   the element, not one card that sometimes wraps it. */
.form-consent,.fineprint,.form-note,.lf-consent{font-size:11px;line-height:1.4;opacity:.85}
/* R8-4a ROUND 3 (MP box measurement, MSG-a284ea — the row's SECOND miss, different mechanism each time):
   .cta-split p{font:...16px...} is (0,1,1) and the font SHORTHAND resets size+line-height, so the base
   rule above MATCHED and was partially overridden — opacity took, size didn't; the most misleading
   failure shape. These (0,2,0) pairs beat any section's descendant-p shorthand; .cta-photo/.cta-bar
   swept in per MP's neighbor flag. CLOSE CRITERION for row 8 is a MEASURED BOX on the live draft,
   never a rule landing — the rule has now landed three times. */
.cta-split .fineprint,.cta-split .lf-consent,.cta-split .form-consent,
.cta-photo .fineprint,.cta-photo .lf-consent,.cta-photo .form-consent,
.cta-bar .fineprint,.cta-bar .lf-consent,.cta-bar .form-consent{font-size:11px;line-height:1.4}
/* the optional 2-row notes field does not need 92px of floor */
.hero-form textarea{min-height:64px}
@media(max-width:600px){.hero-form{padding:22px}}

/* optional-field hint inside labels (email) — muted, lower-case, both form contexts */
.lf-opt{font-weight:500;text-transform:none;letter-spacing:0;opacity:.78}
.est-form .lf-opt{color:var(--muted);opacity:1}

/* ===== TRUST / STAT STRIP ===== */
/* Single-row band: items flex equally + shrink, dividers hold their width — all four
   sit on ONE row on desktop, no orphan second row. Even distribution via flex:1. */
/* THINNER (Alex: "let's make this banner a little bit thinner"). It renders TITLES ONLY now, so the
   height sized around a two-line blurb is just empty band. */
.trust{background:var(--pine);padding:16px 0}
.trust .wrap{display:flex;align-items:center;gap:clamp(12px,2vw,30px);flex-wrap:nowrap}
.trust-item{display:flex;align-items:center;gap:13px;color:#fff;flex:1 1 0;min-width:0}
.trust-item .t-ic{flex-shrink:0;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center}
.trust-item .t-detail{font:500 12.5px/1.35 var(--font-body);color:rgba(255,255,255,.82);min-width:0}
.trust-item .t-detail b{display:block;font-weight:700;color:#fff;font-size:14.5px;letter-spacing:-.01em}
.trust-divider{flex:0 0 1px;width:1px;height:40px;background:rgba(255,255,255,.2)}
/* R26 (Alex 2026-07-29): "Photos of What Was Found" broke to a second row, so the banner read as two rows.
   MEASURED cause, and it is why it looked random: flex:1 1 0 forces four EQUAL columns regardless of label
   length, so the longest label got the same room as the shortest. It needed 184px and the item gave it 185px
   at 1440 but 183px at 1920 - a one-pixel margin, which is why it wrapped on a big screen and not on a
   laptop. Sizing each item to its CONTENT instead leaves ~290px of slack across the row, and nowrap makes it
   a guarantee rather than a coincidence. Desktop only; the stacked mobile treatment is untouched. */
@media(min-width:961px){
  .trust .wrap{justify-content:space-between}
  .trust-item{flex:0 1 auto}
  .trust-item .t-detail b{white-space:nowrap}
}

/* ===== SECTION BASE ===== */
section{padding:80px 0}
.sec-head{max-width:580px}
.sec-head h2{font-size:42px;margin-top:12px;font-weight:800;color:var(--ink);text-wrap:balance}
.sec-head p{color:var(--muted);font-size:17.5px;margin-top:14px;line-height:1.6;font-weight:500}
.sec-head p a{color:var(--pine);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
/* AUTHORED IN-PROSE LINKS (operator catch 2026-08-06): the global a{} reset above kills affordance; component links carry classes, authored markdown links do not. */
main p a:not([class]),main li a:not([class]){color:var(--pine);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.sec-head p a:hover{color:var(--pine-dk)}
.sec-head.center{max-width:640px;margin:0 auto;text-align:center}

/* ===== SERVICES GRID ===== */
.svc{background:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.svc-card{background:var(--cream);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;border:1px solid transparent;display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 28px 56px -28px rgba(var(--pine-rgb),.22);border-color:var(--sand)}
.svc-card .ph{aspect-ratio:16/8.5;border-radius:0}/* D-row11: images slightly smaller, better picture/words balance */
.svc-card .bd{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.svc-card h3{font-size:20px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.svc-card p{font-size:14.5px;color:var(--muted);line-height:1.6;font-weight:500}
.svc-card .svc-link{margin-top:14px;font:700 14px/1 var(--font-display);color:var(--pine);display:inline-flex;align-items:center;gap:6px}
.svc-card .svc-link span{display:inline-block;transition:transform .2s}
.svc-card:hover .svc-link span{transform:translateX(4px)}
.svc-card .tag{display:inline-block;margin-top:14px;align-self:flex-start;font:700 11.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--pine);background:rgba(var(--pine-rgb),.09);padding:6px 12px;border-radius:50px}

/* ===== WHY CHOOSE ROW ===== */
.why{background:var(--cream)}
.why .layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
/* P10 (Alex 2026-07-29): "the call button needs to be moved down a bit towards the bottom-ish of the
   picture." The photo column is ~633px against ~448px of copy, and align-items:center split the 185px
   difference above and below - leaving the CTA stranded mid-photo. The copy column stretches instead and
   the CTA absorbs the slack, so the heading lands near the top of the photo and the call near its foot.
   Scoped to the desktop two-column state; the stacked layout has no slack to distribute. */
@media(min-width:961px){
  .why .layout{align-items:stretch}
  .why .layout>*:last-child{display:flex;flex-direction:column;justify-content:flex-start}
  /* R21 + R22 (Alex round 2, correcting my P10 fix): he wants the three boxes UP near the heading
     ("a little too much white space between the H2 and those three boxes") AND more room before the
     call button ("the buttons look kinda crammed... especially the bottom and the call now"). So the
     slack all moves BELOW the list instead of being split above and below it: the list sits close to
     the heading, and margin-top:auto on the CTA absorbs the rest so the call still lands at the foot of the photo. */
  .why .layout>*:last-child .why-list{margin-top:26px;margin-bottom:30px}
  /* margin-top:auto on the CTA parks it at the foot when the photo column is TALLER than the copy. On a
     page where they are about the same height there is no slack, auto collapses to 0, and the call button
     ends up hard against the last list item (Alex on the shingle page). The list carries a bottom margin
     so there is always a floor, and auto still does its job wherever real slack exists. */
  .why .layout>*:last-child .why-cta{margin-top:auto;margin-bottom:6px}
}
/* A15 (Alex 2026-08-03: "The picture is literally overlapping the section. That is not okay.") —
   CONFIRMED by geometry-gate at 1024px: this image crossed the text column by 149px and OCCLUDED the
   call button. The grid gave each side 1fr, but the image box never agreed to shrink with its track, so
   at laptop widths it spilled across the gap into the copy. min-width:0 lets a grid item actually honour
   its track (the grid-item auto-minimum default is min-content, which is why it did not), and the
   max-width belt makes the intrusion impossible rather than merely unlikely. */
.why .ph{aspect-ratio:5/6;border-radius:var(--r);min-width:0;max-width:100%}
.why .layout>*{min-width:0}
.why-list{display:grid;gap:28px;margin-top:36px}
.why-item{display:flex;gap:18px;align-items:flex-start}
.why-icon{width:48px;height:48px;border-radius:12px;background:var(--pine);display:grid;place-items:center;flex-shrink:0;color:#fff}
.why-icon svg{width:22px;height:22px}
.why-item h4{font:700 17px/1.2 var(--font-display);color:var(--ink);margin-bottom:5px}
.why-item p{font:500 14.5px/1.6 var(--font-body);color:var(--muted)}

/* ===== PROCESS (dark) ===== */
.proc{background:var(--charcoal)}
.proc .sec-head{max-width:640px;margin:0 auto;text-align:center}
.proc .sec-head h2{color:#fff}
.proc .sec-head p{color:rgba(255,255,255,.65)}
.proc .eyebrow{color:var(--sand-dk)}
.proc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative}
.proc-steps::before{content:"";position:absolute;top:23px;left:10%;right:10%;height:1px;background:rgba(255,255,255,.12)}
.proc-step{text-align:center;padding:0 16px;position:relative}
.step-icon{width:48px;height:48px;border-radius:50%;background:var(--pine);border:3px solid var(--char2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative;z-index:1;color:#fff}
.step-icon svg{width:20px;height:20px}
.step-verb{font:700 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-dk);margin-bottom:8px}
.proc-step h3{font:700 17px/1.2 var(--font-display);color:#fff;margin-bottom:8px}
.proc-step p{font:500 13.5px/1.6 var(--font-body);color:rgba(255,255,255,.6)}
.proc .proc-cta{text-align:center;margin-top:48px}

/* ===== GALLERY (shingle styles) =====
   Even, equal-tile grid — every cell the same proportion, cleanly aligned (the prior
   tall/wide mosaic broke with the real 3-style content). auto-fit keeps it tidy at any
   count. The tall/wide span classes are neutralized below so markup stays untouched. */
.gal{background:#fff}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px}
.gal-grid .gal-cell{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.gal-grid .gal-cell .ph{width:100%;height:100%;border-radius:0}
.gal-grid .gal-cell .ph::after{display:none}/* caption names the tile; no duotone corner label here */
.gal-grid .gal-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 18px 16px;background:linear-gradient(0deg,rgba(8,31,28,.9) 6%,rgba(8,31,28,.55) 50%,transparent);color:#fff}
.gal-grid .gal-cap b{display:block;font:700 16px/1.2 var(--font-display);letter-spacing:-.01em}
.gal-grid .gal-cap span{display:block;margin-top:4px;font:500 13px/1.45 var(--font-body);color:rgba(255,255,255,.85)}
.gal-grid .tall{grid-row:auto}
.gal-grid .wide{grid-column:auto}

/* ===== GUARANTEE =====
   Precise medallion seal — a solid dark disc (a real object, not a faint ghost ring),
   a crisp concentric ring drawn with box-shadow (not a low-contrast 1px border), a
   shield-check mark at top, and structured stacked text. Reads as a deliberate brand
   seal, AA-contrast, no hand-drawn / AI-badge look. */
.guar{background:var(--pine)}
.guar .layout{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center;max-width:920px;margin:0 auto}
.guar-seal{position:relative;width:168px;height:168px;border-radius:50%;background:var(--pine-dk);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;flex-shrink:0;color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 10px var(--pine-dk),inset 0 0 0 11px rgba(255,255,255,.28),0 18px 40px -18px rgba(8,31,28,.55)}
.guar-seal .seal-ring{display:none}/* ring is drawn via the inset box-shadow above */
.guar-seal .seal-ic{display:flex;color:var(--sand-dk);margin-bottom:1px}
.guar-seal .seal-ic svg{display:block}
.guar-seal .seal-text{font:800 17px/1.1 var(--font-display);color:#fff;letter-spacing:-.005em}
.guar-seal .seal-sub{display:inline-block;font:700 9.5px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--pine-dk);background:var(--sand-dk);padding:4px 10px;border-radius:50px;margin-top:3px}
.guar .eyebrow{color:rgba(255,255,255,.72)}
.guar h2{font-size:36px;color:#fff;font-weight:800;margin-top:10px}
.guar p{font-size:17px;color:rgba(255,255,255,.85);margin:14px 0 22px;line-height:1.6;max-width:50ch;font-weight:500}
.guar-badges{display:flex;flex-wrap:wrap;gap:12px}
.guar-badges .gb{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);color:#fff;font:700 13.5px/1 var(--font-body);padding:11px 18px;border-radius:50px}
.guar-badges .gb svg{flex-shrink:0}

/* ===== SERVICE AREA ===== */
.area{background:var(--cream)}
.area .layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.area h2{font-size:38px;margin-top:12px;font-weight:800;color:var(--ink)}
.area p{color:var(--muted);font-size:17px;margin-top:14px;font-weight:500;line-height:1.6}
.area p a{color:var(--pine);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* .area-list rides with .towns as the SEMANTIC marker for the coverage directory (deep-review E3's
   exciseCoverage detector recognises a coverage container by class OR by >=2 /areas/ links; a site whose
   area pages are retired renders spans, loses the link signal, and its home/contact coverage furniture
   then reads as fenced neighbourhood PROSE — coppell-tx, 12 HARD). The class carries the same styling. */
.towns,.area-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.towns a,.towns span{background:#fff;border:1.5px solid var(--sand);border-radius:50px;padding:9px 18px;font:600 14px/1 var(--font-body);color:var(--ink);transition:border-color .15s,color .15s,transform .15s}
.towns a:hover{border-color:var(--pine);color:var(--pine);transform:translateY(-2px)}
.area-map{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;box-shadow:0 18px 44px -18px rgba(var(--pine-rgb),.22);border:1px solid var(--line)}
.area-map iframe{width:100%;height:100%;border:0;display:block}

/* ── STATIC MAP (shared rr- component) — PORTED TO MODERN-PRO 2026-07-28 (F15/F20 family pass) ────────
   blocks.php ships .rr-staticmap markup for EVERY family, but only the families that styled it render
   correctly (the class the 2026-07-26 craftsman round found un-styled). Un-styled here, the deep-link
   chip would render STATIC and push below the image, so the rounded .area-map frame would box
   image+link instead of the map — the same keyline-overshoot defect, in modern-pro's shell. Pinned to
   the frame so the image IS the box at any width. Tones are modern-pro's own (pine chip, cream hatch),
   not a craftsman copy. */
.area-map .rr-staticmap{position:absolute;inset:0;height:100%;min-height:0;overflow:hidden}
.area-map .rr-staticmap-img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;filter:grayscale(.14) contrast(1.02)}
.rr-staticmap{position:relative;height:100%;min-height:300px;overflow:hidden;border-radius:var(--r)}
.rr-staticmap-img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;filter:grayscale(.14) contrast(1.02)}
.rr-staticmap-ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--cream),var(--cream) 15px,var(--sand) 15px,var(--sand) 30px)}
.rr-staticmap-link{position:absolute;right:12px;bottom:12px;z-index:5;font:700 11.5px/1 var(--font-body);letter-spacing:.05em;color:#fff;background:var(--pine);padding:9px 14px;border-radius:50px;text-decoration:none;box-shadow:0 6px 18px -6px rgba(var(--pine-rgb),.6)}
.rr-staticmap-link:hover{background:var(--pine-dk)}

/* ===== FINANCING (data-gated) ===== */
.fin{background:var(--sand);padding:60px 0}
/* A11 (Alex 2026-08-03): "somehow that turned into a very awkward looking vertical section when it's
   supposed to be like a bar." It did not render vertical — it FELL vertical: this is a flex row with
   flex-wrap, and a 42ch copy column plus the fin-list card exceeded the row, so the two halves WRAPPED.
   A wrap in a flex row IS the bar becoming a stack. Given explicit basis widths that fit, the row holds;
   the wrap survives as the genuine narrow-viewport fallback. */
.fin .inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.fin .inner>.copy{flex:1 1 clamp(300px,46%,560px);min-width:0}
.fin .inner>.right{flex:1 1 clamp(260px,40%,440px);min-width:0}
.fin .copy h2{font-size:30px;font-weight:800;color:var(--ink)}
.fin .copy p{font:500 16px/1.6 var(--font-body);color:var(--muted);margin-top:8px;max-width:42ch}
.fin .copy .btn{margin-top:20px}
.fin .right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fin .big-rate{font:800 52px/1 var(--font-display);color:var(--pine)}
.fin .big-rate small{font:700 15px/1.4 var(--font-body);color:var(--muted);display:block;margin-top:4px}
/* no-rate variant: honest reassurance checklist on the right (balances the band, invents nothing) */
.fin-points .right{align-items:flex-start}
.fin-list{list-style:none;display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:0 18px 44px -24px rgba(var(--pine-rgb),.2)}
.fin-list li{display:flex;gap:12px;align-items:center;font:600 15px/1.4 var(--font-body);color:var(--ink)}
.fin-list .ck{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--pine);color:#fff;display:flex;align-items:center;justify-content:center}

/* ===== FINAL CTA (dark band) =====
   Re-fit to the mock's proportions (mock-a-airy final CTA): the mock's headline sits on TWO wide
   lines, not three narrow ones. The runtime H2 ("Get a free, no-pressure roof estimate") is longer
   than the mock's, so a 16ch cap forced a 3rd line and made the band read too tall/vertical. Widen
   the H2 cap so it wraps to 2 lines and trim the vertical padding a touch — this lands the band on
   the mock's height (~570px) instead of ~635px, without shrinking the type. */
.cta-final{background:var(--charcoal);text-align:center;padding:84px 0}
.cta-final .wrap{max-width:var(--wrap);margin:0 auto;padding:0 36px}
.cta-final .eyebrow{color:var(--sand-dk)}
.cta-final h2{font-size:52px;font-weight:800;color:#fff;max-width:22ch;margin:12px auto 0;text-wrap:balance;line-height:1.04}
.cta-final p{font:500 18px/1.6 var(--font-body);color:rgba(255,255,255,.7);margin:18px auto 32px;max-width:38ch}
.cta-final .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-final .phone-note{margin-top:22px;font:600 15px/1 var(--font-body);color:rgba(255,255,255,.5)}
.cta-final .phone-note b{color:rgba(255,255,255,.85);font-weight:700}

/* ===== FOOTER ===== */
footer{background:#131a1e;color:rgba(255,255,255,.65);padding:72px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot-brand .bn{font:800 22px/1 var(--font-display);color:#fff}
.foot-brand p{font:500 14px/1.65 var(--font-body);margin-top:12px;max-width:26ch}
.foot-brand .lic{margin-top:18px;font:600 12px/1.4 var(--font-body);letter-spacing:.06em;color:rgba(255,255,255,.4)}
footer h4,.foot-col h5{font:700 11px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-dk);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px;font:500 14px/1.4 var(--font-body)}
.foot-col a{display:block;color:rgba(255,255,255,.65);margin-bottom:2px}
footer ul li a:hover,.foot-col a:hover{color:#fff}
.foot-copy,.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;font:500 12.5px/1.5 var(--font-body);flex-wrap:wrap}
.foot-legal{display:flex;gap:16px}
.foot-legal a{color:rgba(255,255,255,.65)}
.foot-legal a:hover{color:#fff}

/* ===== mobile sticky call bar (single source — review round 3 dedupe) ===== */
.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);padding:10px 14px;gap:10px;box-shadow:0 -4px 20px rgba(var(--pine-rgb),.16)}
/* 44px is the platform tap minimum, not a taste call (phone-prominence R4) — 13px padding on a 14px
   label measured 40px, so every mobile call target failed the floor. */
.mobar .btn{flex:1;justify-content:center;font-size:14px;padding:14px 8px;min-height:46px}

/* E7 mid-page CTA (rr_mp_section_cta) — a decision-point action inside the copy column, never a
   per-section stamp. Phone-live renders the two-channel pair (call leads, estimate steps to outline). */
/* css-coverage 2026-07-28: six classes this engine emits had NO rule here. Five were added during the
   family pass (F142 move 2, E7 mid-page CTA, the why.lead emitter, the statement copy well) and one pair
   is a deliberate marker. Styled to the family's own mock rather than left to inherit — an unstyled class
   is a silent bet that some other rule happens to cover it. */
/* .mp-nav / .mp-navcta are MARKERS, not styling hooks: they ride .nav-links / .nav-cta (both fully styled
   above) so the modern-pro nav can be targeted without competing with the shared chrome. Declared here so
   the coverage gate reads them as intentional rather than forgotten. */
.mp-nav,.mp-navcta{/* marker only — layout comes from .nav-links / .nav-cta */}
/* F142 MOVE 2 — the call affordance inside a closing CTA band. */
.cta-call{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cta-call .btn{flex:none}
/* E7 — the mid-page CTA that sits at a decision point inside an intro block. */
.mp-intro-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.mp-intro-cta .btn{flex:none}
/* why.lead — the optional standfirst above a why-list (was authored in the format contract but never
   emitted until 2026-07-28; it renders now, so it needs a rule). */
.why-lead{margin:0 0 18px;max-width:62ch;color:var(--muted,#5b6b73);font-size:1.02rem;line-height:1.62}
/* the statement band's copy well */
.statement-copy{max-width:64ch}
/* ---- ALEX REVIEW ROUND 2026-07-28 ---- */
/* home truncates its services grid at 9 and owes the reader the hub. */
/* ---- COST BAND, tinted full-bleed (Alex J5 + M1 + the J11 reference) ------------------------------
   "Very, very poorly designed… let's put a picture there. Let's redesign this." + his licence for
   "full-length pictures that are heavily tinted so you can kinda see the elements."
   NOT a copy of `.why` (the shape he named good) — that section already renders on these pages and reusing
   a shape because it exists is the G1 objection. This is the family's OWN full-bleed-scrim device, the one
   .hero-bleed established, applied to the money moment: the derived TOTAL set large over the photo with
   the basis and per-square quiet beneath it. The scrim is deliberately heavy (pine 92%->72%) because a
   figure has to be the most legible thing on the band, not the roof behind it. */
/* Q4 (Alex): "the picture in the background is awkward. Maybe do what you have now on the LEFT and the
   picture on the RIGHT." Same content-left / photo-right device the scope section uses, so the family
   gains ONE pattern rather than two. It also goes LIGHT, which is what lets his Q7 pine CTA follow it
   without two dark bands stacking - the band-rhythm gate caught that the moment the CTA turned pine. */
.fin-bleed{position:relative;background:var(--cream);color:var(--ink);padding:clamp(56px,7vw,84px) 0}
.fin-bleed .fb-ph{position:relative;inset:auto;width:auto;height:auto;line-height:0;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 55px -26px rgba(var(--pine-rgb),.30)}
.fin-bleed .fb-ph img{width:100%;height:clamp(240px,26vw,340px);object-fit:cover;display:block;opacity:1;filter:none}
.fin-bleed .fb-ph::after{content:none}
.fin-bleed .eyebrow{color:var(--pine)}
.fin-bleed h2{color:var(--ink)}
.fin-bleed .fb-figure{color:var(--pine)}
.fin-bleed .fb-basis,.fin-bleed .fb-lead,.fin-bleed .fb-sq{color:var(--muted);margin-left:0;margin-right:0;text-align:left;max-width:none}
.fb-disc{font:400 12.5px/1.5 var(--font-body);color:rgba(255,255,255,.75);max-width:52ch;margin-top:8px}/* F78 signed disclaimer (port 2026-08-01) */
.fin .rate-disc{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.fin-bleed .fb-actions{justify-content:flex-start}
.fin-bleed .btn-white{background:var(--pine);color:#fff}
.fin-bleed .btn-white:hover{background:var(--pine-dk)}
.fin-bleed .btn-on-dark{border-color:var(--line);color:var(--pine)}
@media(max-width:900px){.fin-bleed .fb-inner{grid-template-columns:1fr;gap:26px}.fin-bleed .fb-ph img{height:210px}}
/* the guarantee seal goes light for the same reason - it sat directly before the now-pine closing CTA */
.guar{background:var(--sand) !important;color:var(--ink);border-top:1px solid var(--sand-dk);border-bottom:1px solid var(--sand-dk)}
/* N1 (Alex): "a lot thinner". With the pills gone this band is mostly padding. */
.guar{padding:56px 0}
/* Badge styling made light-band-safe. It was written white-on-pine; flipping this band to cream for Q7
   turned both chips white-on-cream and they vanished. Any site still rendering badges on a light .guar
   gets readable ones instead of my regression. */
.guar .guar-badges .gb{background:rgba(var(--pine-rgb),.08);color:var(--pine);border:1px solid var(--line)}
.guar h2,.guar .guar-h{color:var(--ink)}
.guar p,.guar li{color:var(--muted)}
.guar .eyebrow{color:var(--pine)}
/* the old full-bleed treatment (absolute photo + white-on-photo text) is REMOVED, not overridden -
   leaving it in place is what made my first Q4 attempt render worse than the band it replaced. */
.fin-bleed .fb-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.5vw,56px);align-items:center}
.fin-bleed .fb-inner{padding:0}
.fin-bleed .eyebrow{color:var(--pine);justify-content:flex-start}
.fin-bleed h2{color:var(--ink);font-size:clamp(26px,3vw,36px);margin:8px 0 0;max-width:20ch}
/* BORROWED-BAND PROMINENCE (MSG-298649, 2026-08-09). Was font:800 clamp(34px,5vw,56px) display-type.
   D-38 total-first governs the ORDER of these numbers; the borrowed-price-band lens governs their
   PROMINENCE. Once the cost band led with the derived TOTAL, display-type made a PUBLISHED NATIONAL
   range the loudest element on a city page — and market.cost_ranges._provenance records that no local
   cost pull has ever run for these markets. Order kept (total still precedes per-square); scale demoted
   to body/strong so the figure is emphasis, not a headline claim, with .fb-basis (the derivation
   caption naming the national source) sitting adjacent one element down.
   BLAST RADIUS (corrected 2026-08-09 — the first number written here was WRONG): 21 modern-pro cities
   inherit this at their next export. ONE of them is a LIVE target — mckinney-tx — so this rule reaches
   a production site the next time mckinney redeploys. The original comment claimed "0 live targets",
   which came from a malformed read that counted deploy-targets.json's three TOP-LEVEL keys instead of
   the 56 entries under .targets (24 of them live). Corrected against the registry itself. */
.fin-bleed .fb-figure{font:700 clamp(21px,2.3vw,26px)/1.25 var(--font-body);letter-spacing:-.01em;color:var(--pine);margin:18px 0 0}
.fin-bleed .fb-basis{margin:14px 0 0;max-width:52ch;font:500 14.5px/1.6 var(--font-body);color:var(--muted)}
.fin-bleed .fb-lead{margin:14px 0 0;max-width:56ch;font:400 15px/1.7 var(--font-body);color:var(--ink)}
.fin-bleed .fb-sq{margin:8px 0 0;max-width:52ch;font:500 13px/1.5 var(--font-body);color:var(--muted)}
.fin-bleed .fb-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:26px}
@media(max-width:900px){.fin-bleed .fb-grid{grid-template-columns:1fr;gap:26px}.fin-bleed .fb-actions .btn{width:100%}}
.svc-all{display:flex;justify-content:center;margin-top:34px}
/* the Why section carries a CALL cta — the estimate CTA is once-per-page and home's intro takes it. */
.why-cta{margin-top:26px}
.why-cta .btn{display:inline-flex;align-items:center;gap:9px}
.guar .guar-badges{gap:10px 18px}
.mp-seccta{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:26px}
.mp-seccta .btn{flex:none}
.sec-head.center .mp-seccta{justify-content:center}
/* R8-6 (Alex, alma live round 8: "if the text is centered, the CTAs need to be centered"): the rule
   above was INERT on /service-areas/ — .mp-seccta sits inside .mp-intro-cta, a flex wrapper defaulting
   to flex-start, so centering the ITEM's children moved nothing while the wrapper pinned the group
   left under text centered by .sec-head.center. Center the WRAPPER wherever centered text governs it —
   the layer that decides. (Measured by the MP seat: container chain + grep, MSG-8afe85.) */
.sec-head.center .mp-intro-cta{justify-content:center}
/* A13 + A16 (Alex 2026-08-03, coppell review — financing, warranties AND shingle-guide, one cause three
   instances): the rule above centres buttons ONLY inside .sec-head.center. The .mp-introb overlap-card
   intro puts its buttons in .introb-card, which never matches — so centred text sat above left-aligned
   buttons on every resource page using that opener. "If the text is centered, the buttons need to be
   centered." Same intent, the block the original rule could not reach. */
.introb-card{text-align:center}
.introb-card .mp-intro-cta{justify-content:center}
.introb-card p{margin-left:auto;margin-right:auto}
.proc-cta .mp-seccta{margin-top:0;justify-content:center}
.guar .mp-seccta{margin-top:22px}
.spec .mp-seccta{margin-top:32px}
@media(max-width:520px){.mp-seccta{flex-direction:column;align-items:stretch}.mp-seccta .btn{justify-content:center}}

/* SITE SLOGAN chrome (Alex ruling 2026-07-27; ported to modern-pro 2026-07-28). Modern-Pro's idiom for
   it is a thin pine keyline + small caps in the display face — quiet, structural, and NOT craftsman's
   stamped verdigris diamond (a shared treatment across families would be a footprint tell). It never
   introduces a band of its own; it sits inside the hero copy column and inside the closing CTA. Grounds
   differ per variant, so the colour is set per context rather than once. */
.mp-slogan{display:inline-flex;align-items:center;gap:11px;margin-top:18px;font:700 11.5px/1.5 var(--font-display);letter-spacing:.19em;text-transform:uppercase;color:var(--pine)}
.mp-slogan::before{content:"";width:22px;height:2px;background:var(--pine);flex:none;border-radius:2px}
/* dark / pine grounds — hero v3's full-bleed scrim and the pine + charcoal closers */
.hero-bleed .mp-slogan,.cta-split .mp-slogan,.cta-final .mp-slogan,.cta-bar .mp-slogan{color:rgba(255,255,255,.82)}
.hero-bleed .mp-slogan::before,.cta-split .mp-slogan::before,.cta-final .mp-slogan::before,.cta-bar .mp-slogan::before{background:rgba(255,255,255,.55)}
/* the v2 charcoal closer + v5 light closer are centered bands — center the line with them */
.cta-final .mp-slogan,.cta-phone .mp-slogan{margin-left:auto;margin-right:auto}

/* E10 — the photo-bearing intro (rr_mp_intro with $with_photo). Copy left, one tall duotone photo
   right; the plain centered intro is untouched, so only pages whose recipe asks for `intro-photo`
   change shape. */
.mp-intro.has-photo-col .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.mp-intro.has-photo-col .sec-head{margin:0;text-align:left}
.mp-intro-photo .ph{aspect-ratio:4/3;border-radius:var(--r);box-shadow:0 22px 52px -24px rgba(var(--pine-rgb),.3)}
@media(max-width:960px){.mp-intro.has-photo-col .wrap{grid-template-columns:1fr;gap:32px}}

/* ===== FAQ accordion (home faq section uses the engine's faq markup) ===== */
.faq-list{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;font:700 17px/1.3 var(--font-display);color:var(--ink);padding:22px 40px 22px 0;position:relative;display:block}
.faq-q:hover{color:var(--pine)}
.faq-q::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--pine);font-weight:400;line-height:1}
.faq-item.open .faq-q::after,.faq-q[aria-expanded="true"]::after{content:'\2013'}
/* 15px -> 16px, FAQ BODY FLOOR (D-142 needle 5 / faq-font-floor, MSG-cf61d1; burn-in WARN -> HARD 2026-08-10).
   Raised on this seat's natural weatherford vehicle rather than waiting for the flip. */
.faq-a{display:none;padding:0 0 22px;font-size:16px;line-height:1.7;color:var(--muted);max-width:680px}
.faq-item.open .faq-a,.faq-q[aria-expanded="true"]+.faq-a{display:block}
.faq-q:focus-visible{outline:3px solid var(--pine);outline-offset:2px;border-radius:6px}

/* ===== RESPONSIVE (single ≤960 + ≤600 blocks — review round 3 dedupe; uses the LIVE engine
   chrome selectors .nav-links/.strip/.nav, folding in what was a second engine-chrome media block) ===== */

/* 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:961px){.nav-links>a,.nav-links .nav-top{white-space:nowrap;flex-shrink:0}}
@media(max-width:960px){
  /* tablet section rhythm — a moderate step down from the airy desktop 80px (phones tighten further
     in the ≤600 block); keeps the page from feeling sparse on narrow tablets too */
  section{padding:60px 0}
  .hero .inner{grid-template-columns:1fr;gap:40px;padding-bottom:64px}
  .hero h1{font-size:42px}
  .why .layout,.area .layout,.guar .layout{grid-template-columns:1fr;gap:36px}
  /* GUARANTEE — center the medallion + copy on mobile (operator: it read LEFT-aligned and looked off).
     The seal sits above centered text; the eyebrow/h2/p/badges all center, the badge row wraps centered.
     Desktop (>960) keeps the side-by-side auto/1fr layout untouched. */
  .guar .layout{justify-items:center;text-align:center;gap:28px}
  .guar .guar-badges{justify-content:center}
  .guar p{margin-left:auto;margin-right:auto}
  .svc-grid{grid-template-columns:1fr 1fr}
  .proc-steps{grid-template-columns:1fr 1fr;gap:36px}
  .proc-steps::before{display:none}
  /* .gal-grid is auto-fit minmax — already responsive, no override needed */
  /* trust band → 2×2 grid on tablet (four items can't share one row legibly) */
  .trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
  .trust-item{flex:initial}
  .trust-divider{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sec-head h2,.area h2{font-size:34px}
  .cta-final h2{font-size:38px}
  .nav-toggle{display:inline-flex;align-items:center}
  /* live engine nav chrome: hide desktop links + the CTA buttons (Call button + primary), show the
     mobile sticky bar instead; the accordion .nav-links.open panel governs the mobile menu */
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:6px 0;border-bottom:1px solid var(--line);box-shadow:0 18px 44px -18px rgba(var(--pine-rgb),.22);max-height:calc(100dvh - 120px);overflow-y:auto}
  .nav-links.open>a,.nav-links.open .nav-top{padding:13px 28px;border-radius:0;width:100%}
  /* touch dropdowns → inline accordions. On phones there's no :hover, so the Services / Resources /
     Service Areas sub-menus need an explicit open-state (the footer JS toggles .nav-item.has-drop.open).
     Without this the dropdown items can't expand when tapped. */
  .nav-links.open .nav-item{display:block;width:100%;position:static}
  .nav-links.open .nav-top{display:flex;justify-content:space-between}
  .nav-links.open .nav-drop{position:static;transform:none;opacity:1;visibility:visible;display:none;min-width:0;width:100%;background:transparent;border:none;box-shadow:none;border-radius:0;padding:2px 0 8px;margin:0}
  .nav-links.open .nav-item.has-drop.open .nav-drop{display:block}
  .nav-links.open .nav-item.has-drop.open .nav-caret{transform:rotate(180deg)}
  .nav-links.open .nav-drop a{padding:11px 28px 11px 44px;white-space:normal}
  .nav-links.open .nav-drop-2col{display:block;min-width:0}
  /* F142 MOVE 3 — THE MOBILE CALL TARGET THAT SURVIVES SCROLL (the move that was missing on every
     family). This rule used to read `.nav-cta .btn-primary,.nav-phone{display:none}` — i.e. at 390px
     the number was display:none in the header, exactly the defect Alex found on craftsman. The
     estimate button still steps out (the hamburger owns that width), but the CALL PLATE STAYS: header
     is position:sticky, so the plate is on screen at every scroll position AND inside the first
     viewport. The shared fixed .mobar keeps its own Call button as the second, thumb-reach target. */
  .nav-cta .btn-primary,.nav-est{display:none}
  /* The number is nowrap fleet-wide (it must never break mid-digit), so at 390px the plate can no longer
     shed width by wrapping — with the old 16px padding it pushed 13px of horizontal page overflow on
     EVERY page. The plate shrinks instead: tighter padding, smaller gap, and the label allowed to shrink
     while the digits stay whole. Still >=44px tall, so the R4 tap floor holds. */
  .nav-phone{display:inline-flex;padding:10px 12px;gap:6px;min-height:44px;font-size:13.5px;max-width:100%}
  .nav-phone b{font-size:15px}
  .strip .strip-greet,.strip .strip-lead,.strip .l{display:none}
  .nav{padding:12px 20px}
  .mobar{display:flex}
  body{padding-bottom:74px}
}
@media(max-width:600px){
  .wrap,.hero .inner,.nav .inner{padding-left:20px;padding-right:20px}
  .hero h1{font-size:34px}
  .svc-grid,.proc-steps,.hero-form .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  /* M3 (Alex mobile pass): "the trust banner looks really awkward — being vertically stacked is super
     bad." He is right: four full-width rows turn a one-line badge strip into a scroll of its own. It
     becomes a compact 2x2 badge grid instead, icon ABOVE the label and centred, which is the shape that
     actually fits four short claims on a 390px screen without any of them wrapping oddly. */
  .trust{padding:20px 0}
  .trust .wrap{grid-template-columns:1fr 1fr;gap:20px 12px}
  .trust-item{flex-direction:column;align-items:center;text-align:center;gap:9px}
  .trust-item .t-detail{text-align:center}
  .trust-item .t-detail b{font-size:13px;line-height:1.3;white-space:normal}
  .trust-divider{display:none}
  .fin .inner{flex-direction:column;align-items:flex-start}
  .fin .right{align-items:flex-start}
  .cta-final .cta-row .btn,.hero .cta-row .btn{width:100%;justify-content:center}
  /* MOBILE SECTION RHYTHM (operator: big vertical white-space between sections on phones).
     The base section{padding:80px 0} stacks ~160px of dead air between adjacent blocks at 390px —
     the gap the operator dislikes (services→process, process→shingle tiles, etc.). Tighten the
     vertical section padding so neighbours sit closer without feeling cramped (~50px ≈ ~100px
     combined between two padded sections). Horizontal/grid layout is untouched. The guarantee
     and the dark CTA bands keep a touch more breathing room so they still read as punctuation. */
  section{padding:50px 0}
  .fin{padding:44px 0}
  .guar,.cta-bar{padding:54px 0}
  .cta-split{padding:38px 0}/* D-row9 mobile share of the cut */
  .cta-final{padding:58px 0}
  .cta-photo .wrap{padding-top:58px;padding-bottom:58px}
  .estimate{padding:54px 0}
  /* tighten the grid "margin-top:48px" leaders inside sections too (they compound the gap) */
  .svc-grid,.svc-rows,.svc-bento,.svc-zig,.proc-steps,.proc-cards,.proc-tl,.gal-grid,.why-list{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .svc-card:hover,.btn:hover,.towns a:hover{transform:none}
}

/* ============================================================================
   ENGINE CHROME — correct selectors for the SHARED header.php/footer.php markup.
   The mockup used .topbar/.brand/header.nav/nav.links; the engine emits
   .strip / .logo / [header][div class=nav] / [nav class=nav-links]. These
   rules (last in the cascade) make the real chrome render in Modern-Pro's look.
   ============================================================================ */
.strip{background:var(--charcoal);color:rgba(255,255,255,.9);font-family:var(--font-body);font-size:13px;font-weight:600}
.strip .wrap{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 36px;text-align:center;flex-wrap:wrap;max-width:var(--wrap,1200px);margin:0 auto}
.strip .hand,.strip .strip-greet{color:var(--sand-dk);font-style:normal}
/* css-coverage: style the engine-emitted classes MP had left unstyled (MEGA run 2, 2026-07-08). Dark text
   on MP's light surfaces — never port a dark-hero family's white text here (invisible on MP's paper bg). */
.strip .strip-where{color:#fff;font-weight:700}
/* .strip-call — the phone's home in banner mode (F140/nav-fit). Charcoal strip, so the plate reads in sand
   and lifts to white on hover; 44px min at mobile keeps the tap-target floor. */
.strip .strip-call{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:800;letter-spacing:.01em;text-decoration:none}
.strip .strip-call:hover{color:var(--sand-dk)}
.strip .strip-call svg{flex:none}
@media(max-width:600px){.strip .wrap{padding:7px 18px;gap:8px;font-size:12.5px}.strip .strip-call{min-height:44px}}
.mpf-credit{font:600 12.5px/1.5 var(--font-body);color:var(--muted)}
#cost-calc .cc-in{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;font:500 15px/1.3 var(--font-body);color:var(--ink)}
#cost-calc .cc-in:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px color-mix(in srgb,var(--pine) 20%,transparent)}
.svc-hero-copy h1{color:var(--ink);font-family:var(--font-display);font-weight:800;line-height:1.05}
.svc-hero-copy .lead,.svc-hero-copy>p{color:var(--muted);margin-top:14px;max-width:52ch;font:500 16px/1.6 var(--font-body)}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:var(--wrap,1200px);margin:0 auto;padding:14px 36px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.logo b{color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links>a{color:var(--muted);font-weight:600;font-size:14.5px;padding:8px 13px;border-radius:50px;text-decoration:none;transition:color .15s,background .15s}
.nav-links>a:hover{color:var(--pine);background:var(--cream)}
/* MOBILE NAV COLLAPSE (must follow the .nav-links/.nav base rules above — those engine-chrome rules are
   intentionally last-in-cascade, so the ≤960 responsive block earlier in the file was being overridden by
   them, leaving the full DESKTOP nav on phones → horizontal overflow. Re-assert the collapse here, AFTER the
   base, so it wins. The accordion .nav-links.open panel (styled in the ≤960 block) still opens via higher specificity.) */
@media(max-width:960px){
  .nav-links{display:none}
  .nav{padding:12px 20px}
}
/* .nav-cta consolidated above (review round 3 dedupe — was redefined here at gap:14px) */
footer{background:#fff;border-top:1px solid var(--line);padding:54px 0 30px;font-family:var(--font-body)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px}
.foot-brand p{font-size:14px;max-width:280px;margin-top:12px;color:var(--muted)}
.foot-col h5{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--pine);text-transform:uppercase;letter-spacing:.06em;margin-bottom:13px}
.foot-col a{display:block;color:var(--muted);font-size:14px;margin-bottom:8px;text-decoration:none}
.foot-col a:hover{color:var(--pine)}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted)}
.foot-legal{display:flex;gap:16px}.foot-legal a{color:var(--muted);text-decoration:none}.foot-legal a:hover{color:var(--pine)}

/* ============================================================================
   MODERN-PRO FOOTER (.mpf) — its OWN layout (parts/footer-modern-pro.php), not the
   FL footer. A LIGHT panel (review round 3: the dark footer merged with the dark
   final-CTA band into "one big section") that KEEPS its distinct two-panel split —
   a wide brand/contact block (big tap-to-call phone + neighborhood COVERAGE CHIPS,
   an MP motif the FL footer lacks) on the left, a compact 3-group link cluster on
   the right, a hairline, then a restructured bottom bar. The LAYOUT is the footprint
   divergence (kept); only the COLOR flips to light. A 3px pine top-rule + a cream
   wash give clear visual separation from the preceding dark CTA. Tokens only.
   ============================================================================ */
footer.mpf{background:var(--cream);border-top:3px solid var(--pine);color:var(--muted);padding:64px 0 30px;font-family:var(--font-body)}
.mpf-top{display:grid;grid-template-columns:1.25fr 1.4fr;gap:64px;align-items:start}
/* left: brand + big phone + coverage chips */
.mpf-brand .logo,.mpf-brand .logo b,.mpf-brand .bl-name{color:var(--ink)}
.mpf-brand .bl-tag{color:var(--pine)}
.mpf-blurb{font:500 14.5px/1.65 var(--font-body);color:var(--muted);margin:16px 0 0;max-width:34ch}
/* min-height = the 44px platform tap minimum (phone-prominence R4, which measures EVERY rendered
   a[href^="tel:"], not just the header plate). The footer number is set at 26px/1, so its box measured
   23px at 390px and failed the floor while the nav plate and the mobile bar both passed — the miss was
   here, not where it looked. Padding rather than a bare min-height so the touch area is real. */
.mpf-phone{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 0;min-height:46px;font:800 26px/1 var(--font-display);letter-spacing:-.02em;color:var(--pine)}
.mpf-phone svg{color:var(--pine);flex-shrink:0}
.mpf-phone:hover{color:var(--pine-dk)}
.mpf-phone-note{display:block;margin-top:8px;font:600 12.5px/1.4 var(--font-body);color:var(--muted)}
.mpf-cov{margin-top:26px}
.mpf-cov-label{display:inline-flex;align-items:center;gap:6px;font:700 10.5px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--pine);margin-bottom:12px}
.mpf-cov-label svg{flex-shrink:0}
.mpf-chips{display:flex;flex-wrap:wrap;gap:8px}
.mpf-chips a,.mpf-chips span{display:inline-block;padding:7px 14px;border-radius:50px;background:#fff;border:1.5px solid var(--sand);font:600 12.5px/1 var(--font-body);color:var(--ink);transition:border-color .15s,color .15s,transform .15s}
.mpf-chips a:hover{border-color:var(--pine);color:var(--pine);transform:translateY(-2px)}
/* right: compact 3-group link cluster */
.mpf-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.mpf-lcol h5{font:700 11px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--pine);margin-bottom:16px}
.mpf-lcol a{display:block;font:500 14px/1.4 var(--font-body);color:var(--muted);margin-bottom:10px;transition:color .15s}
/* R28 (operator 2026-08-12, "that goes into two rows. I think we've ran into that issue before" — he
   was right: F20 fixed this at ≤600px and the DESKTOP wrap survived it). ROOT CAUSE, this time at the
   sizing layer: the 2026-08-10 `overflow-wrap:anywhere` backstop reduces the email's MIN-CONTENT to
   ~one character, so the 1fr grid track — which would otherwise refuse to shrink below an unbreakable
   token — crushes the contact column at desktop (~166px vs the ~215px the address needs) and the
   "backstop" manufactures the very break it existed to soften. The fix binds to the MACHINE TOKEN,
   not a viewport: nowrap + overflow-wrap:normal on the mailto child restores honest min-content
   sizing, so the track grows and the grid redistributes AT EVERY WIDTH (desktop ✓ by arithmetic,
   601–880px ✓ ~515px total need vs 601px floor, ≤600px the F20 full-row rule already gives it 350px
   for a 260px need). No font shrink (14px stands); F20's full-row rule stays; `anywhere` stays
   everywhere else. A machine token never wraps — same law as the header (machine-token-container). */
.mpf-lcol--contact a[href^="mailto:"]{white-space:nowrap;overflow-wrap:normal}
.mpf-lcol a:hover{color:var(--pine)}
.mpf-lcol .mpf-all{color:var(--pine);font-weight:700;margin-top:4px}
.mpf-lcol .mpf-all:hover{color:var(--pine-dk)}
/* hairline + bottom bar */
.mpf-rule{height:1px;background:var(--line);margin:44px 0 22px}
.mpf-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;font:500 12.5px/1.5 var(--font-body);color:var(--muted)}
.mpf-legal{display:flex;align-items:center;gap:18px}
.mpf-legal a{color:var(--muted);text-decoration:none}
.mpf-legal a:hover{color:var(--pine)}
.mpf-where{color:var(--muted);opacity:.8}
@media(max-width:880px){
  .mpf-top{grid-template-columns:1fr;gap:40px}
  .mpf-links{gap:24px 30px}
}
@media(max-width:600px){
  footer.mpf{padding:48px 0 28px}
  .mpf-links{grid-template-columns:1fr 1fr}
  /* F20 (operator 2026-08-11): the footer EMAIL broke across two rows at 390px. MEASURED before the
     fix, on the real page: .mpf-lcol = 160px, the 36-char address needs 260px on one line — short by
     100px — so it rendered a 39px box against a 20px line-height (2 lines), mid-address. Note the
     document scrollWidth was exactly 390px: there is NO horizontal overflow, which is why mobile-audit
     reported 0 findings on 22 routes. The 2026-08-10 `overflow-wrap:anywhere` rule is WORKING AS
     DESIGNED (it converted an overflow into a break); his ruling is that the visible break is also
     unacceptable, so the repair is LAYOUT, not wrapping — the column carrying the contact token takes
     a FULL-WIDTH row at narrow widths (160px → 350px, address fits on one line with ~90px spare).
     No font shrink (14px stands, body-size floor honored) and `anywhere` is deliberately LEFT IN as
     the last-resort backstop for a longer address on a narrower device. Bound to the column that
     CARRIES the machine token (--contact), not to a convicted selector, so a future footer column
     with an email inherits it by construction. */
  .mpf-links .mpf-lcol--contact{grid-column:1/-1}
  .mpf-phone{font-size:23px}
  .mpf-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}
.estimate{background:var(--pine);padding:46px 0}/* D-row9: vertically smaller per Alex */
.est-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.est-copy h2{color:#fff}.est-copy p,.est-points li{color:rgba(255,255,255,.92)}
.est-card{background:#fff;border-radius:16px;padding:24px 24px;box-shadow:0 24px 60px -20px rgba(var(--pine-rgb),.28)}
.est-card h3{font-size:21px;font-weight:800;color:var(--ink);margin-bottom:4px}
.est-card .est-note{font-size:13.5px;color:var(--muted);margin-bottom:18px}
/* (review round 3 dedupe) the duplicate .mobar + second @media(max-width:960px)/(max-width:600px)
   engine-chrome blocks were folded into the single responsive blocks above. */

/* ============================================================================
   NON-HOME PAGES — Modern-Pro styling for the SHARED Friendly-Local block markup.
   The MP family only overrides a few dispatchers (hero/trust/services/process/
   cta); every other engine block (svc-hero, overview, signs, gallery, why,
   materials, area, osvc, emergency, intro, faq, blog, contact, comparison
   tables, and the resource tools) falls through to Friendly-Local's markup —
   which carried FL motifs (squiggle/.blob/.stamp/.roofline) and FL-only classes
   this stylesheet didn't cover. Below: (A) kill the FL motifs, (B) restyle every
   one of those classes in Modern-Pro's language (cool-white --cream surfaces,
   pine identity, charcoal darks, precise rules, no accent side-borders).
   Only the runtime tokens are used (no hardcoded hex outside rgba gradients).
   ============================================================================ */

/* ============================ A. KILL FRIENDLY-LOCAL MOTIFS ================= */
/* hand-drawn squiggle under accent words → clean pine accent word, no SVG */
.underline-word svg{display:none}
.underline-word{position:static;color:var(--pine);font-style:normal;white-space:normal}
/* the "since"/hand cursive accent + decorative blobs/stamps/roofline have no place
   in Modern-Pro — Modern-Pro is precise, not crafty. Neutralize them all. */
.blob{display:none}
.roofline{display:none}
.hero-photo .stamp,.stamp{display:none}
.since,.svc-hand{display:none}
/* .hand (cursive accent) — render as a plain pine emphasis, never script */
.hand{font-family:var(--font-display);font-weight:700;font-style:normal;color:var(--pine)}
.areas-note .hand,.areas-note-tel{color:var(--pine);border-bottom:0;text-decoration:none}
.areas-note-tel:hover{color:var(--pine-dk)}

/* ============================ B. SHARED-BLOCK STYLING ====================== */
/* ---- section rhythm + tinted-alt surface (FL uses .alt for the tint) ---- */
.alt{background:var(--cream)}
/* CREAM SEAM — no two cream bands may sit adjacent (coppell round 2, measured 2026-08-03 on the
   render; murphy carries the same defect on three of its own pages, so this is family-wide and not
   one site's).
   THE THRESHOLD IS THE REGISTRY'S, NOT A GATE'S. My first cut of this rule broke runs of THREE,
   reasoning from band-rhythm-check's tolerance for two adjacent light bands. Registry row
   `adjacent-bands-never-share-a-surface-colour` is the law of record and it says ADJACENT, in his own
   words: "our guarantee and warranty page is the same color as the previous section, so it just looks
   awkward" and "the map section goes straight into the CTA at the bottom - they're both that gray".
   TWO is the defect. Building to the gate's tolerance instead of the ruling was solving for the gate.
   RULE A breaks any adjacent pair. RULE B is more specific (three compounds beat two) and restores the
   third band of a run, so a triple reads cream / white / cream instead of cream / white / white.
   The selector list IS this file's own full-width cream-band set (the section-level
   `background:var(--cream)` rules — .why .area .fin-bleed .alt .cov .thesis .hours .tool-sec .tcards
   .proc-tl-sec), so a new cream band inherits the rule by joining that list and the rule cannot
   silently fall behind the thing it measures.
   KNOWN LIMIT, stated here rather than discovered later: a run of FOUR would leave its last two
   adjacent. No run longer than three exists on any measured page in this family; if one is ever built
   this needs a real alternation mechanism, not another compound. */
/* A - no two cream bands adjacent */
:is(.why,.area,.fin-bleed,.alt,.cov,.thesis,.hours,.tool-sec,.tcards,.proc-tl-sec)
  + :is(.why,.area,.fin-bleed,.alt,.cov,.thesis,.hours,.tool-sec,.tcards,.proc-tl-sec){background:#fff}
/* B - the third of a run goes back to cream, so a triple alternates */
:is(.why,.area,.fin-bleed,.alt,.cov,.thesis,.hours,.tool-sec,.tcards,.proc-tl-sec)
  + :is(.why,.area,.fin-bleed,.alt,.cov,.thesis,.hours,.tool-sec,.tcards,.proc-tl-sec)
  + :is(.why,.area,.fin-bleed,.alt,.cov,.thesis,.hours,.tool-sec,.tcards,.proc-tl-sec){background:var(--cream)}
/* C - THE MIRROR, for the WHITE set (weatherford panel P2, ruled MSG-1ae8eb). A and B only ever
   guarded cream-on-cream; two adjacent #fff sections were outside the mechanism entirely, which is
   how /'s `.mp-intro + .svc` shipped a white-on-white seam that band-rhythm-check also cannot see
   (it measures DARK adjacency by construction — its own comment names the luminance-delta upgrade as
   the successor). Same shape as A, same established alternate tone, no new colour enters the system.
   The selector list is this file's own section-level `background:#fff` set. `.ntiles.is-shot` keeps
   its tinted photo because that rule sits later and is more specific. */
:is(.mp-intro,.svc,.ntiles)
  + :is(.mp-intro,.svc,.ntiles){background:var(--cream)}
p{color:var(--muted)}
/* contextual in-body links the SEO pipeline drops as [text](url) */
.prose-body p a,.svc-intro-grid .body p a,.why-copy p a,.area-intro-grid .body p a,
.faq-a a,.mp-post-body p a:not(.btn),.mp-post-body li a:not(.btn),.se-card a,.np-src a{color:var(--pine);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.prose-body p a:hover,.svc-intro-grid .body p a:hover,.why-copy p a:hover,.area-intro-grid .body p a:hover,.faq-a a:hover,.mp-post-body p a:not(.btn):hover{color:var(--pine-dk)}

/* ---- SERVICE HERO (.svc-hero) — light split, breadcrumb, framed photo / form ---- */
.svc-hero{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);overflow:hidden;border-bottom:1px solid var(--line)}
.svc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:54px 36px 72px}
.crumb{font:600 13px/1 var(--font-body);color:var(--muted);margin-bottom:18px;display:flex;flex-wrap:wrap;align-items:center}
.crumb a{color:var(--muted);transition:color .15s}
.crumb a:hover{color:var(--pine)}
.crumb .sep{margin:0 8px;opacity:.4}
.crumb .cur{color:var(--pine);font-weight:700}
.svc-hero h1{font-size:clamp(34px,4.2vw,50px);font-weight:800;line-height:1.06;letter-spacing:-.03em;color:var(--ink);margin-bottom:16px;text-wrap:balance}
.svc-hero .lead{font-size:18px;color:var(--muted);max-width:48ch;margin-bottom:28px;line-height:1.6;font-weight:500}
.svc-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.svc-hero .hero-trust{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.svc-hero .hero-trust .ht-item{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.3 var(--font-body);color:var(--muted)}
.svc-hero .hero-trust .ht-item svg{color:var(--pine);flex-shrink:0}
/* framed photo on the right (replaces FL's rotated/blob frame) */
.svc-hero .hero-photo{position:relative}
.svc-hero .frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px -24px rgba(var(--pine-rgb),.30);border:1px solid var(--line)}
.svc-hero .frame img{width:100%;height:430px;object-fit:cover;display:block}
.svc-hero .frame-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:430px;background:linear-gradient(150deg,var(--pine-lt),var(--pine-dk));color:#fff;text-align:center;padding:30px;border-radius:var(--r)}
.svc-hero .frame-ph-ic{opacity:.85;color:#fff}
.svc-hero .frame-ph-label{font:700 15px/1.35 var(--font-display);max-width:220px;color:#fff}
/* service-hero form card reuses the dark-pine hero-form already styled above */
.svc-hero .est-card.hero-form{background:var(--pine-dk);border:1px solid rgba(255,255,255,.30);box-shadow:0 22px 48px -18px rgba(0,0,0,.45)}/* D-row10: green-on-dark-green blended; border+depth separate the form from the band */
.svc-hero .est-card .est-note{color:rgba(255,255,255,.72)}

/* ---- SERVICE OVERVIEW (.svc-intro-grid) — body + "what's included" card ---- */
.svc-intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.svc-intro-grid .body h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;color:var(--ink);margin-bottom:16px;letter-spacing:-.02em;text-wrap:balance}
.svc-intro-grid .body p{font-size:16px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.incl-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.incl-card h3{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:18px}
.incl-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.incl-list li{display:flex;gap:12px;align-items:flex-start}
.incl-list .ck{width:26px;height:26px;border-radius:50%;background:var(--pine);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px}
.incl-list .ck.alert{background:var(--char2);color:#fff}
.incl-list h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px}
.incl-list p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---- SERVICE-EXPLANATION SPEC TABLE (.spec / rr_mp_spec_table) — MP's signature ----
   service-page move: an ITEMIZED scope table (label + detail rows) in place of FL prose.
   Precise rules, cool-white surface, pine check chips, two-column rows that stack on mobile. */
.spec{background:#fff}
/* R7/R11 — TWO LIGHT BANDS MUST NOT TOUCH. Done with adjacent-sibling selectors rather than by asking the
   band tracker, because its vocabulary marks BOTH white and cream as "light" and therefore cannot answer
   "what colour is above me". (That is the same marker-honesty gap that makes a general seam gate owed
   rather than buildable today.) CSS can see the real adjacency, so it needs no map at all. */
.mp-intro + .spec,.mp-introb + .spec,.svc + .spec{background:var(--cream)}
.spec .sec-head{max-width:none}
/* table + ONE supporting duotone photo, side by side (the photo gives service/insurance pages a
   real main image — layout-qa image flag). Photo column collapses below the table on mobile, and
   a page with no photo falls back to a single full-width table column (.no-img). */
/* ---- SERVICE SCOPE — REDESIGNED 2026-07-28 under rule #0b (modern-pro's own shape, not a port) ----
   Alex, reviewing the replacement page: "the scope of work and that table with the picture next to it does
   not fit at all like it did with the Midlothian page… redo that section, make it look good." The old
   shape was a ported one — rows left, portrait photo squeezed into a sticky side column — which reads
   correct in a warm editorial family and cramped in a crisp one.
   This shares its shape with nothing else on the page: a hairline-ruled TWO-UP grid with a short pine rule
   over each title (NO icon tiles — .why owns those here; NO numerals — the items are not sequential, which
   the design principles forbid), then a FULL-BLEED photo band that echoes .hero-bleed, this family's own
   signature move, instead of boxing the image into a column. */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:34px}
.spec-item{padding:22px 0;border-top:1px solid var(--line)}
.spec-item h3{font:800 17.5px/1.3 var(--font-display);letter-spacing:-.015em;color:var(--ink);margin:0 0 7px;position:relative;padding-top:15px}
.spec-item h3::before{content:"";position:absolute;top:0;left:0;width:26px;height:3px;background:var(--pine);border-radius:2px}
.spec-item p{font:500 15px/1.62 var(--font-body);color:var(--muted);margin:0;max-width:44ch}
/* Q1+Q2 (Alex 2026-07-29): the scope band was ONE section carrying intro prose, the item grid AND a naked
   full-bleed photo - so the sections read as merged and the photo had nothing on it. Now two sections:
   intro prose LEFT with the photo RIGHT (his own Q4 shape), then the named items on their own. */
.spec .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,3vw,40px) clamp(32px,4.5vw,56px);align-items:start}
.spec .sec-head{grid-column:1;align-self:center}
.spec-shot{grid-column:2;align-self:center}
.spec .sec-head{margin-bottom:0}
.spec-shot{line-height:0;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 55px -26px rgba(var(--pine-rgb),.30)}
.spec-shot img{width:100%;height:clamp(260px,28vw,380px);object-fit:cover;display:block}
/* .spec-items retired by R6 — the items are part of .spec now, on its white surface, so the cream band that used to sit above the cream .signs-sec is gone (that was R7). */
.spec .spec-grid{grid-column:1 / -1;margin-top:0}/* the wrap gap already separates the rows; a margin on top of it was doubling the space */
/* The R6 merge pinned .sec-head to column 1 and .spec-shot to column 2. At this breakpoint the grid
   collapses to ONE column, so grid-column:2 asked for a column that does not exist - the browser
   created an implicit one and the insurance page scrolled 6px sideways. Reset all three to column 1. */
@media(max-width:900px){.spec .wrap{grid-template-columns:1fr;gap:26px}.spec .sec-head,.spec-shot,.spec .spec-grid{grid-column:1}.spec-shot img{height:220px}}

/* ---- GENERIC PROSE SECTION (.prose-sec / rr_block_prose) ---- */
.prose-sec .eyebrow{margin-bottom:10px}
.prose-body{max-width:760px;margin:0 auto}
.prose-sec:not(.center) .prose-body{margin:0}
.prose-body p{font-size:16px;color:var(--muted);line-height:1.7;margin:0 0 14px}
.prose-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.prose-list li{display:flex;gap:11px;align-items:flex-start}
.prose-list .ck{width:24px;height:24px;border-radius:50%;background:var(--pine);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px}
.prose-list li>span:last-child{font-size:15.5px;color:var(--ink);line-height:1.6}
.prose-cta{margin-top:26px}
.prose-sec.center .prose-cta{text-align:center}

/* ---- "SIGNS IT'S TIME" / CONTACT-METHOD CARDS (.sign-grid / .sign-card) ---- */
.sign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.sign-grid.mc-2,.sign-grid.mc-3{display:flex;flex-wrap:wrap;justify-content:center}
.sign-grid.mc-2>*,.sign-grid.mc-3>*{flex:1 1 240px;max-width:320px}
.sign-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:transform .2s,box-shadow .2s,border-color .2s}
.sign-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(var(--pine-rgb),.22);border-color:var(--sand)}
.sign-card .si{width:46px;height:46px;border-radius:12px;background:rgba(var(--pine-rgb),.10);color:var(--pine);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.sign-card.green .si{background:var(--pine);color:#fff}
.sign-card h4{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.sign-card p{font-size:14px;color:var(--muted);line-height:1.55}
.sign-card p a{color:var(--pine);font-weight:700}
.sign-card .cval{display:block;font:700 17px/1.3 var(--font-display);color:var(--ink);margin-top:2px}
.sign-card .cval a{color:var(--ink)}
.sign-card .cval a:hover{color:var(--pine)}

/* ---- SHINGLE-STYLES GALLERY (.gallery-grid figure) ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.gallery-grid figure{margin:0;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.gallery-grid figure:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(var(--pine-rgb),.22);border-color:var(--sand)}
.gallery-grid .gph{overflow:hidden;height:200px;background:var(--cream)}
.gallery-grid .gph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-grid figure:hover .gph img{transform:scale(1.05)}
.gallery-grid figcaption{padding:20px 22px 22px}
.gallery-grid figcaption h4{font:700 16px/1.2 var(--font-display);color:var(--ink);margin-bottom:6px}
.gallery-grid figcaption p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---- WHY-US two-col (FL .why-grid — used on About + Area; MP has its own .why) ---- */
.why-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.why-grid.flip .why-photo{order:2}
.why-photo img{width:100%;height:440px;object-fit:cover;border-radius:var(--r);box-shadow:0 24px 60px -24px rgba(var(--pine-rgb),.28);border:1px solid var(--line)}
.why-copy .sec-head h2{font-size:clamp(28px,3.2vw,38px)}
.why-copy>p{font-size:16.5px;color:var(--muted);line-height:1.7;margin-top:12px}
.why-list{list-style:none;display:flex;flex-direction:column;gap:20px;margin-top:26px}
.why-list li{display:flex;gap:16px;align-items:flex-start}
.why-list .ck{width:34px;height:34px;border-radius:10px;background:var(--pine);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.why-list h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:3px}
.why-list p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---- MATERIALS / CERT cards (.sec-materials / .cert-grid / .cert-card) ---- */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px;margin-bottom:36px}
.cert-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .18s,box-shadow .18s,border-color .18s}
.cert-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -24px rgba(var(--pine-rgb),.2);border-color:var(--sand)}
.cert-logo{width:100%;max-width:152px;height:66px;background:var(--cream);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:11px 14px}
.cert-logo svg{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.cert-card .cn{font:700 15.5px/1.2 var(--font-display);color:var(--ink)}
.cert-card .cs{font:600 11px/1.3 var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:-4px}
.guarantee{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.guarantee .g-item{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--pine-rgb),.09);color:var(--pine);font:700 14px/1 var(--font-body);padding:11px 20px;border-radius:50px}
.guarantee .g-item svg{flex-shrink:0}

/* ---- SERVICES HUB write-ups (.svc-detail-list / .svc-detail) ---- */
.svc-detail-list{display:flex;flex-direction:column;gap:40px;margin-top:48px}
.svc-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.svc-detail.flip .dph{order:2}
.svc-detail .dph{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 22px 50px -26px rgba(var(--pine-rgb),.24)}
.svc-detail .dph img{width:100%;height:300px;object-fit:cover;display:block}
.svc-detail h3{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:-.02em}
.svc-detail p{font-size:15.5px;color:var(--muted);line-height:1.7;margin-bottom:18px}

/* ---- AREA INTRO + MAP (.area-intro-grid / .area-map / .map-tag / .area-facts) ---- */
.area-intro-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.area-intro-grid .body h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;color:var(--ink);margin-bottom:16px;letter-spacing:-.02em;text-wrap:balance}
.area-intro-grid .body p{font-size:16px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.area-facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.area-facts .fact{display:inline-flex;align-items:center;gap:9px;background:rgba(var(--pine-rgb),.09);color:var(--pine);font:600 14px/1 var(--font-body);padding:9px 16px;border-radius:50px}
.area-facts .fact svg{flex-shrink:0}
.area-map{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;box-shadow:0 22px 50px -24px rgba(var(--pine-rgb),.24);border:1px solid var(--line)}
.area-map iframe{width:100%;height:100%;border:0;display:block}
.area-map .map-tag{position:absolute;z-index:2;left:14px;top:14px;background:#fff;border-radius:10px;padding:9px 14px;box-shadow:0 10px 28px -10px rgba(var(--pine-rgb),.3);display:flex;align-items:center;gap:8px;font:700 13px/1 var(--font-display);color:var(--ink)}
.area-map .map-tag svg{color:var(--pine);flex-shrink:0}

/* ---- SERVICE-AREAS chip cloud (.area-cloud / .area-chip / .cloud-label / .areas-note) ---- */
.area-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;max-width:880px;margin:48px auto 0}
.area-chip{background:#fff;border:1.5px solid var(--sand);border-radius:50px;padding:10px 20px;font:600 14.5px/1 var(--font-body);color:var(--ink);transition:border-color .15s,color .15s,transform .15s}
.area-chip:hover{border-color:var(--pine);color:var(--pine);transform:translateY(-2px)}
.cloud-label{text-align:center;font:700 16px/1.3 var(--font-display);color:var(--ink);margin:48px 0 0}
.cloud-label + .area-cloud{margin-top:16px}
.areas-note{text-align:center;margin-top:26px;font-size:15px;color:var(--muted)}

/* ---- OTHER SERVICES icon-card grid (.osvc-grid / .osvc-card / .oi / .arrow) ---- */
.osvc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.osvc-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;transition:border-color .15s,transform .15s,box-shadow .15s}
.osvc-card:hover{border-color:var(--pine);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(var(--pine-rgb),.2)}
.osvc-card .oi{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:rgba(var(--pine-rgb),.10);color:var(--pine);display:flex;align-items:center;justify-content:center}
.osvc-card h4{font-size:15.5px;font-weight:700;color:var(--ink)}
.osvc-card .arrow{margin-left:auto;color:var(--pine);font-weight:700;transition:transform .15s}
.osvc-card:hover .arrow{transform:translateX(3px)}

/* ---- EMERGENCY band (.emg / .emg-band) — pine band (replaces FL clay) ---- */
.emg{padding:0}
.emg .emg-band{display:flex;align-items:center;gap:26px;background:linear-gradient(120deg,var(--pine) 0%,var(--pine-dk) 100%);border-radius:var(--r);padding:32px 38px;color:#fff;box-shadow:0 22px 56px -22px rgba(var(--pine-rgb),.42);margin:8px auto;flex-wrap:wrap}
.emg .emg-ic{flex-shrink:0;width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center}
.emg .emg-copy{flex:1;min-width:240px}
.emg .emg-copy h2{font-size:clamp(21px,2.4vw,26px);color:#fff;margin-bottom:6px;line-height:1.15;font-weight:800}
.emg .emg-copy p{color:rgba(255,255,255,.85);font-size:15px;margin:0;max-width:560px}
.emg .emg-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.emg .emg-note{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--font-body);color:rgba(255,255,255,.8)}

/* ---- INTRO band (.intro-band / .intro-split / .intro-copy) ---- */
.intro-band{max-width:760px;margin:0 auto;text-align:center}
.intro-split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.intro-split .intro-img img{width:100%;height:100%;max-height:380px;object-fit:cover;border-radius:var(--r);box-shadow:0 22px 50px -24px rgba(var(--pine-rgb),.24);border:1px solid var(--line)}
.intro-copy .eyebrow{margin-bottom:10px}
.intro-copy h2{font-size:clamp(26px,3vw,34px);font-weight:800;color:var(--ink);margin-bottom:14px;line-height:1.15;letter-spacing:-.02em}
.intro-copy p{font-size:16.5px;color:var(--muted);line-height:1.7;margin-bottom:12px}

/* ---- PROMISE / centered statement (FL .promise — non-MP pages) ---- */
.promise{text-align:center;max-width:680px;margin:0 auto}
.promise h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;color:var(--ink);margin-bottom:14px;letter-spacing:-.02em;text-wrap:balance}
.promise p{font-size:17px;color:var(--muted);margin:0 auto 10px;max-width:600px;line-height:1.6}
.promise .pbtn{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}

/* ---- BLOG index (mp-) — FEATURE-LEAD + 2-COL GRID ---- */
.mp-blog-hero{padding:64px 0 22px;background:#fff}
.mp-blog-hero .crumb{margin-bottom:16px}
.mp-blog-kicker{display:inline-block;font:700 11.5px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--pine);margin-bottom:12px}
.mp-blog-hero h1{font-size:clamp(30px,4vw,46px);color:var(--ink);letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.mp-blog-hero .lead{font-size:18px;color:var(--muted);line-height:1.6;max-width:640px;margin-top:14px}
/* FEATURE — big media one side, meta+title+excerpt+read-more the other */
.mp-blog-feature{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:6px;transition:transform .2s,box-shadow .2s,border-color .2s}
.mp-blog-feature:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(var(--pine-rgb),.28);border-color:var(--sand)}
.mp-blog-feat-media{position:relative;min-height:340px}
.mp-blog-feat-media .ph{position:absolute;inset:0;height:100%;border-radius:0}
.mp-blog-feat-body{display:flex;flex-direction:column;justify-content:center;padding:40px 44px}
.mp-blog-tag{font:800 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--pine);margin-bottom:10px}
.mp-blog-feat-body h2{font-size:clamp(23px,2.6vw,30px);color:var(--ink);line-height:1.18;margin:8px 0 12px}
.mp-blog-feat-body p{font-size:15.5px;color:var(--muted);line-height:1.65;margin-bottom:18px}
/* shared meta + read-more link */
.mp-blog-meta{font:700 12px/1 var(--font-display);color:var(--pine);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.mp-blog-link{font:700 14px/1 var(--font-display);color:var(--pine);display:inline-flex;align-items:center;gap:6px;margin-top:auto}
.mp-blog-link span{display:inline-block;transition:transform .2s}
.mp-blog-feature:hover .mp-blog-link span,.mp-blog-card:hover .mp-blog-link span{transform:translateX(4px)}
/* 2-COL GRID (remaining posts) */
.mp-blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.mp-blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.mp-blog-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(var(--pine-rgb),.22);border-color:var(--sand)}
.mp-blog-card .ph{height:196px;border-radius:0}
.mp-blog-body{display:flex;flex-direction:column;flex-grow:1;padding:24px 24px 26px}
.mp-blog-body h3{font-size:19px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:8px}
.mp-blog-body p{font-size:14.5px;color:var(--muted);line-height:1.6;flex-grow:1;margin-bottom:14px}

/* ---- BLOG POST single (mp-post-*) — kicker hero, NOT a photo hero ---- */
.mp-post{display:block;background:#fff}
.mp-post-hero{padding:60px 0 14px;background:#fff}
.mp-post-hero .crumb{margin-bottom:18px}
.mp-post-kicker{display:inline-block;font:700 11.5px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--pine);margin-bottom:14px}
.mp-post-hero h1{font-size:clamp(29px,3.6vw,44px);color:var(--ink);letter-spacing:-.02em;line-height:1.12;max-width:900px;text-wrap:balance}
.mp-post-meta{display:inline-flex;align-items:center;gap:9px;font:700 12.5px/1 var(--font-display);color:var(--pine);text-transform:uppercase;letter-spacing:.08em;margin-top:18px}
.mp-post-fig{margin:26px auto 0;max-width:960px}
.mp-post-fig img{width:100%;height:auto;max-height:460px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.mp-post-body{max-width:760px;margin:0 auto;padding-top:44px;padding-bottom:8px}
.mp-post-lead{font-size:19.5px;line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:10px}
.mp-post-body h2{font-size:26px;font-weight:700;color:var(--ink);margin:32px 0 12px;letter-spacing:-.01em}
.mp-post-body p{font-size:16.5px;line-height:1.75;color:var(--muted);margin-bottom:14px}
.mp-post-bullets{margin:0 0 16px;padding-left:22px}
.mp-post-bullets li{font-size:16.5px;line-height:1.7;color:var(--muted);margin-bottom:8px}
.mp-post-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mp-post-cta .btn{flex:none}
.mp-post-cta .btn svg{margin-right:7px;vertical-align:-2px}
@media(max-width:600px){.mp-post-cta{flex-direction:column;align-items:stretch}.mp-post-cta .btn{justify-content:center;min-height:44px}}
/* post FAQ - JS-free [details] accordion */
.mp-post-faqs .wrap{max-width:820px}
.mp-post-faqs h2{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--ink);letter-spacing:-.02em;margin-bottom:18px;text-align:center}
.mp-post-faq{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;overflow:hidden}
.mp-post-faq summary{cursor:pointer;list-style:none;padding:17px 46px 17px 20px;font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--ink);position:relative}
.mp-post-faq summary::-webkit-details-marker{display:none}
.mp-post-faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px;line-height:1;color:var(--pine);font-weight:400}
.mp-post-faq[open] summary::after{content:"\2013"}
.mp-post-faq[open] summary{border-bottom:1px solid var(--line)}
/* 15.5px -> 16px, FAQ BODY FLOOR (D-142 needle 5 / faq-font-floor, MSG-cf61d1; blog-post FAQ half). */
.mp-post-faq>div{padding:14px 20px 18px;color:var(--muted);font-size:16px;line-height:1.7}
.mp-post-faq>div a{color:var(--pine-dk);border-bottom:1px solid var(--pine)}
/* blog responsive — feature stacks, grid collapses to 1-col at phone */
@media(max-width:820px){
  .mp-blog-feature{grid-template-columns:1fr}
  .mp-blog-feat-media{min-height:0}
  .mp-blog-feat-media .ph{position:relative;height:260px}
  .mp-blog-feat-body{padding:30px 30px 34px}
}
@media(max-width:560px){
  .mp-blog-grid{grid-template-columns:1fr}
  .mp-blog-feat-body{padding:26px 24px 30px}
}

/* ---- FEATURE / TRUST variant grids (.feat-grid / .feat-list / .feat-strip) ---- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;text-align:left}
.feat-card .ic{width:46px;height:46px;border-radius:12px;background:rgba(var(--pine-rgb),.10);color:var(--pine);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feat-card h4{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.feat-card p{font-size:14px;color:var(--muted);line-height:1.55}
.feat-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.feat-list li{display:flex;gap:14px;align-items:flex-start}
.feat-list .ck{width:30px;height:30px;border-radius:50%;background:var(--pine);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.feat-list h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:3px}
.feat-list p{font-size:14px;color:var(--muted);line-height:1.55}
.feat-strip{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.feat-stat{flex:1;min-width:200px;text-align:center}
.feat-stat .ic{width:46px;height:46px;border-radius:12px;background:rgba(var(--pine-rgb),.10);color:var(--pine);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.feat-stat h4{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.feat-stat p{font-size:14px;color:var(--muted);line-height:1.55}

/* ---- MATERIAL hub/detail cards (.mat-grid / .mat-card / .mat-cost-grid) ---- */
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.mat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.mat-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(var(--pine-rgb),.22);border-color:var(--sand)}
.mat-card-img{height:188px;overflow:hidden;background:var(--cream)}
.mat-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mat-card:hover .mat-card-img img{transform:scale(1.04)}
.mat-card-ph{height:188px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:linear-gradient(150deg,var(--pine-lt),var(--pine-dk));color:#fff;text-align:center;padding:18px}
.mat-card-ph .mlabel{font-size:12px;color:#fff;max-width:150px;line-height:1.3}
.mat-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.mat-card-body h3{font-size:18px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px}
.mat-card-body h3 .mi{width:30px;height:30px;flex-shrink:0;border-radius:8px;background:rgba(var(--pine-rgb),.10);color:var(--pine);display:flex;align-items:center;justify-content:center}
.mat-card-body p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}
.mat-card-bestfor{font-size:12.5px;color:var(--pine);font-weight:600;margin-top:auto;padding-top:6px}
.mat-card-go{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--pine);font-size:14px;margin-top:4px}
.mat-card:hover .mat-card-go{gap:9px}
.mat-cost-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:center;background:var(--charcoal);border-radius:var(--r);padding:38px 40px;color:#fff}
.mat-cost-fig{display:flex;flex-direction:column;gap:6px;border-right:1px solid rgba(255,255,255,.16);padding-right:28px}
.mat-cost-fig .mc-num{font:800 28px/1.1 var(--font-display)}
.mat-cost-fig .mc-lab{font-size:13px;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.05em}
.mat-cost-body h2{color:#fff;font-size:23px;margin-bottom:10px;font-weight:800}
.mat-cost-body p{color:rgba(255,255,255,.86);font-size:15px;line-height:1.6;margin-bottom:8px}
.mat-cost-body p a{color:#fff;text-decoration:underline}
.mat-cost-body .btn-primary{margin-top:10px}

/* ---- FAQ accordion via the shared partial: button without aria attribute also needs styling ---- */
.faq-q{font-family:var(--font-display)}
.faq-a a{color:var(--pine)}

/* ---- AREA FAQ local-facts chip strip (.facts-strip / .lf) ---- */
.facts-strip{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;max-width:820px;margin:0 auto}
.facts-strip .lf{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--pine-rgb),.09);color:var(--pine);font:600 14px/1 var(--font-body);padding:9px 16px;border-radius:50px}
.facts-strip .lf svg{flex-shrink:0}

/* ---- COMPARISON TABLE (.cmp-wrap / .cmp-table) ---- */
.cmp-wrap{max-width:920px;margin:48px auto 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.cmp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:580px;background:#fff}
.cmp-table th,.cmp-table td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table thead th{font:700 14px/1.3 var(--font-display);color:var(--ink);background:var(--cream);white-space:nowrap}
.cmp-table tbody th{font:700 15px/1.3 var(--font-display);color:var(--ink)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody tr.hl{background:rgba(var(--pine-rgb),.05)}
.cmp-table .price{font:700 14.5px/1.3 var(--font-display);color:var(--pine);white-space:nowrap}
.cmp-table .yes{color:var(--pine);font-weight:700}
.cmp-table .no{color:var(--muted)}
.cmp-cap{max-width:920px;margin:14px auto 0;font-size:12.5px;color:var(--muted);text-align:center}
.cmp-swipe{display:none}
.cmp-table.hl-last tbody td:last-child{background:rgba(var(--pine-rgb),.08)}
.cmp-table.hl-last thead th:last-child{background:var(--pine);color:#fff}
.cmp-pill{display:inline-block;font:700 10.5px/1 var(--font-display);background:rgba(255,255,255,.25);padding:2px 8px;border-radius:50px;margin-top:5px;white-space:nowrap}

/* ============================ RESOURCE-TOOL PARTIALS ======================= */
/* ---- COST CALCULATOR (.calc-card) ---- */
.calc-card{max-width:820px;margin:48px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 32px 34px;box-shadow:0 24px 60px -28px rgba(var(--pine-rgb),.2)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.calc-field{display:flex;flex-direction:column;gap:7px}
.calc-field label{font:700 13.5px/1.3 var(--font-display);color:var(--ink)}
.calc-field select,.calc-field input{padding:12px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:500 15px/1 var(--font-body);color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.calc-field select:focus,.calc-field input:focus{border-color:var(--pine);box-shadow:0 0 0 3px rgba(var(--pine-rgb),.16)}
.calc-out{margin-top:26px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:center}
.calc-out .co-label{font:600 14px/1.3 var(--font-body);color:var(--muted)}
.calc-out .co-range{font:800 clamp(30px,5vw,44px)/1.1 var(--font-display);color:var(--pine);margin:4px 0 6px;letter-spacing:-.02em}
.calc-out .co-note{font-size:13px;color:var(--muted);max-width:440px;margin:0 auto 16px;line-height:1.5}
.calc-disclaim{font-size:12px;color:var(--muted);text-align:center;margin-top:16px}

/* ---- HAIL CHECKER (.hc-card) ---- */
.hc-card{max-width:760px;margin:48px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 30px;box-shadow:0 24px 60px -28px rgba(var(--pine-rgb),.2)}
.hc-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hc-geo{display:inline-flex;align-items:center;gap:7px;font:700 14px/1 var(--font-display);color:var(--pine);background:rgba(var(--pine-rgb),.10);border:none;border-radius:var(--r-sm);padding:13px 16px;cursor:pointer;transition:background .15s}
.hc-geo:hover{background:rgba(var(--pine-rgb),.18)}
.hc-geo:focus-visible{outline:3px solid var(--pine);outline-offset:2px}
.hc-or{color:var(--muted);font-size:14px}
.hc-zip,.hc-hood{flex:1;min-width:130px;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:500 15px/1 var(--font-body);color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.hc-zip:focus,.hc-hood:focus{border-color:var(--pine);box-shadow:0 0 0 3px rgba(var(--pine-rgb),.16)}
.hc-go{flex-shrink:0}
.hc-hint{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
.hc-result{margin-top:22px;border-top:1px solid var(--line);padding-top:22px}
.hc-head{font-size:16px;line-height:1.6;color:var(--muted)}
.hc-head strong{color:var(--ink)}
.hc-big{font:800 30px/1 var(--font-display);color:var(--pine);margin-right:5px}
.hc-events{margin-top:18px;display:flex;flex-direction:column}
.hc-ev{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--line)}
.hc-ev:last-child{border-bottom:none}
.hc-date{font:700 14px/1.3 var(--font-display);color:var(--ink);min-width:96px}
.hc-badge{font:700 12.5px/1 var(--font-display);padding:5px 11px;border-radius:50px;background:rgba(var(--pine-rgb),.12);color:var(--pine)}
.hc-badge.major{background:var(--pine);color:#fff}
.hc-dist{font-size:13px;color:var(--muted);margin-left:auto}
.hc-cta{margin-top:22px;text-align:center}
.hc-cta p{font-size:13.5px;color:var(--muted);margin-bottom:12px}

/* ---- STORM HISTORY (.storm-stats / .storm-timeline / .storm-note) ---- */
.storm-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin:48px 0 42px}
.storm-stats .ss{text-align:center}
.storm-stats .n{display:block;font:800 46px/1 var(--font-display);color:var(--pine);letter-spacing:-.02em}
.storm-stats .n small{font-size:19px;font-weight:700}
.storm-stats .l{display:block;font:600 13.5px/1.3 var(--font-body);color:var(--muted);margin-top:6px}
.storm-timeline{max-width:780px;margin:0 auto;display:grid;gap:16px}
/* Each event reads as a DISTINCT bordered card (review round 2: the bare rows read as a "white blur").
   A defined border + a soft shadow + a pine left-rule give every event a clear edge of its own; the
   `.se-card` body picks up the surface so the date column and the card share one framed block. */
.storm-event{display:grid;grid-template-columns:128px 1fr;gap:24px;padding:20px 24px;align-items:start;background:#fff;border:1px solid var(--line);border-left:3px solid var(--sand-dk);border-radius:var(--r);box-shadow:0 10px 30px -22px rgba(var(--pine-rgb),.45),0 2px 6px -4px rgba(var(--pine-rgb),.20);transition:box-shadow .2s,border-color .2s}
.storm-event:hover{box-shadow:0 18px 40px -24px rgba(var(--pine-rgb),.5),0 3px 8px -4px rgba(var(--pine-rgb),.25);border-left-color:var(--pine)}
.storm-event.major{border-left-color:var(--pine)}
.se-date{font:700 15px/1.3 var(--font-display);color:var(--ink);padding-top:5px}
.se-badge{display:inline-flex;align-items:center;gap:7px;font:700 12.5px/1 var(--font-display);padding:5px 13px;border-radius:50px;margin-bottom:9px;background:rgba(var(--pine-rgb),.12);color:var(--pine)}
.se-badge svg{flex-shrink:0}
/* hail is the event type a roof owner is actually scanning the timeline for, so the badge gets a ring
   that separates it from the flat wind/other tint without changing weight or hue (css-coverage: .hail
   was emitted with no rule in this stylesheet). .major still overrides to the solid pine badge. */
.se-badge.hail{background:rgba(var(--pine-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--pine-rgb),.28)}
.storm-event.major .se-badge{background:var(--pine);color:#fff}
.se-card p{font-size:14.5px;color:var(--muted);line-height:1.6}
.se-card p strong{color:var(--ink)}
.storm-note{max-width:780px;margin:38px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.storm-note p{font-size:15px;color:var(--muted);line-height:1.6;flex:1;min-width:280px}
.storm-note p strong{color:var(--ink)}
.storm-note .btn{flex-shrink:0}
.storm-src{text-align:center;font-size:12px;color:var(--muted);margin-top:18px}
/* storm timeline variants v2/v3 (spine + alternating) */
/* N7 (Alex): the storm record was ~15 events in ONE vertical column, so a data record read as a long
   blog timeline. Now a two-up grid of compact event cards: date badge (the key you look it up by),
   hail size as the headline, location beneath. Halves the scroll and scans as a record. Chronology
   survives because row-flow reads across then down. CSS only - markup and NOAA data untouched. */
.stl-spine{max-width:940px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.stl-snode{position:relative;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);border-left:3px solid var(--sand-dk);transition:border-color .18s,box-shadow .18s}
.stl-snode:hover{border-left-color:var(--pine);box-shadow:0 14px 30px -22px rgba(var(--pine-rgb),.35)}
.stl-snode:not(.minor){border-left-color:var(--pine);background:linear-gradient(180deg,rgba(var(--pine-rgb),.045),transparent 60%)}
.stl-snode .nd{display:none}
.stl-snode .d{display:inline-block;font:700 11.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.07em;background:rgba(var(--pine-rgb),.10);color:var(--pine);padding:5px 10px;border-radius:50px;margin-bottom:9px}
/* R25 (Alex): "that little table is a little bit awkward to read. I think it is just the bold." He is
   right - an 800-weight display face at 15.5px across a whole timeline reads as shouting. 600 with a
   looser line, and the date badge softens from solid pine to a tinted chip so the DATE stops competing
   with the measurement, which is the thing you actually scan for. */
.stl-snode h4{font:600 15.5px/1.45 var(--font-display);color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
.stl-snode p{font-size:13.5px;color:var(--muted);line-height:1.5}
@media(max-width:760px){.stl-spine{grid-template-columns:1fr;gap:11px}}
.stl-alt{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
/* Equal-size alternating cards: a FIXED width (not max-width sized-to-content) + a min-height so
   every event blurb reads as the same card regardless of date/size text length — fixes the
   ragged, inconsistent storm-timeline cards on /storm-roof-damage/. */
/* Defined card edge + soft shadow + pine left-rule so each event reads as its own block, not a faint
   white box on a near-white band (review round 2: the timeline cards read as a "white blur"). */
.stl-acard{background:#fff;border:1px solid var(--sand);border-left:3px solid var(--sand-dk);border-radius:var(--r);box-shadow:0 12px 30px -22px rgba(var(--pine-rgb),.45),0 2px 6px -4px rgba(var(--pine-rgb),.20);padding:20px 24px;width:60%;min-height:108px;display:flex;flex-direction:column;justify-content:center;transition:box-shadow .2s,border-color .2s}
.stl-acard:hover{box-shadow:0 18px 40px -24px rgba(var(--pine-rgb),.5),0 3px 8px -4px rgba(var(--pine-rgb),.25);border-left-color:var(--pine)}
.stl-acard.r{align-self:flex-end}
.stl-acard .d{font:600 12.5px/1 var(--font-body);color:var(--pine);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.stl-acard h4{font:700 16px/1.3 var(--font-display);color:var(--ink);margin-bottom:4px}
.stl-acard p{font-size:14px;color:var(--muted);line-height:1.55}

/* ---- NEIGHBORHOOD PROFILE (.np-box / .np-stats / .np-stat) ---- */
.np-box{max-width:680px;margin:48px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 30px 26px;text-align:center}
.np-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 44px}
.np-stat .n{display:block;font:800 42px/1 var(--font-display);color:var(--pine);letter-spacing:-.02em}
.np-stat .l{display:block;font:600 13px/1.3 var(--font-body);color:var(--muted);margin-top:7px}
.np-src{font-size:12px;color:var(--muted);margin-top:24px;line-height:1.5}

/* ---- RELATED RESOURCES (.rel-grid / .rel-card) ---- */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:920px;margin:48px auto 0}
.rel-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;transition:border-color .15s,transform .15s,box-shadow .15s}
.rel-card:hover{border-color:var(--pine);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(var(--pine-rgb),.2)}
.rel-card h4{font:700 15.5px/1.3 var(--font-display);color:var(--ink);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.rel-card h4 .arr{margin-left:auto;color:var(--pine);transition:transform .15s}
.rel-card:hover h4 .arr{transform:translateX(3px)}
.rel-card p{font-size:13px;color:var(--muted);line-height:1.5}

/* ============================================================================
   RECIPE ARCHETYPES — new Modern-Pro sections composed by rr_mp_render_recipe
   for the non-home page types (about/services/areas/area/contact/cost/financing).
   All MP-namespaced, runtime tokens only, no FL motifs.
   ============================================================================ */

/* ---- OVERVIEW full-bleed mission statement (.statement / rr_mp_statement) — about ---- */
.statement{background:var(--pine);text-align:center}
.statement .eyebrow{color:rgba(255,255,255,.72)}
.statement h2{font-size:clamp(30px,4vw,46px);color:#fff;font-weight:800;max-width:18ch;margin:14px auto 0;text-wrap:balance;letter-spacing:-.02em}
.statement p{font:500 19px/1.65 var(--font-body);color:rgba(255,255,255,.85);max-width:62ch;margin:22px auto 0}
/* F151 — the About STORY BAND's pinned crew-action silhouette. With a photo present the band becomes a
   two-column story (copy left-aligned beside the picture); with the photo opted out it degrades to the
   original centered statement, byte-for-byte. The duotone .ph treatment keeps the pine identity on a
   colour photo, so the silhouette reads as part of the band rather than a pasted-in stock image. */
.statement.has-sil{text-align:left}
.statement.has-sil .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.statement.has-sil h2{margin:14px 0 0;max-width:16ch}
.statement.has-sil p{margin:20px 0 0;max-width:52ch}
.statement-sil{position:relative}
.statement-sil .ph{aspect-ratio:4/3;border-radius:var(--r);box-shadow:0 26px 60px -26px rgba(0,0,0,.5)}
@media(max-width:960px){
  .statement.has-sil .wrap{grid-template-columns:1fr;gap:32px}
  .statement.has-sil .statement-sil{order:-1}
}

/* ---- LOCAL-SIGNAL coverage map (.cov / rr_mp_coverage_map) — service-areas + contact ---- */
.cov{background:var(--cream)}
.cov .layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cov h2{font-size:clamp(28px,3.4vw,40px);margin-top:12px;font-weight:800;color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
.cov p{color:var(--muted);font-size:17px;margin-top:14px;font-weight:500;line-height:1.6}
.cov p a{color:var(--pine);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cov-note{margin-top:22px;font:600 15px/1.55 var(--font-body);color:var(--ink);max-width:44ch}
/* reuses .towns (chips) + .area-map (already styled above) */

/* ---- FINANCING SOURCES (.finsrc / rr_mp_financing_sources) — the roof-financing page ----
   K5/K8. Replaces a tick-list band: a tick means "we provide this", and this page exists to say none of
   this money comes from us. Two columns because borrowed money comes from exactly two places; the markers
   are question marks because these are things the homeowner ASKS FOR, not features anybody supplies. */
.finsrc{background:var(--sand);padding:clamp(64px,8vw,92px) 0}
.finsrc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,30px);max-width:940px;margin:clamp(34px,4vw,48px) auto 0}
.finsrc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,36px)}
.finsrc-label{font:800 clamp(17px,1.8vw,20px)/1.25 var(--font-display);color:var(--pine);letter-spacing:-.01em;margin-bottom:12px}
.finsrc-what{font-size:15px;line-height:1.65;color:var(--muted);margin-bottom:20px}
.finsrc-askhead{font:700 11.5px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);padding-top:18px;border-top:1px solid var(--line);margin-bottom:13px}
.finsrc-asks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.finsrc-asks li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.finsrc-asks li::before{content:"?";position:absolute;left:0;top:-1px;width:18px;height:18px;border-radius:50%;background:var(--pine);color:#fff;font:800 11px/18px var(--font-body);text-align:center}
.finsrc-note{max-width:740px;margin:clamp(28px,3.4vw,40px) auto 0;text-align:center;font-size:14px;line-height:1.65;color:var(--muted)}
.finsrc-cta{display:flex;justify-content:center;margin-top:26px}
@media(max-width:760px){.finsrc-grid{grid-template-columns:1fr}}

/* ---- THESIS band (.thesis / rr_mp_statement) — about page's LIGHT position statement ----
   Was a pine full-bleed dark anchor. Went light 2026-07-29 so the thesis can LEAD the About page (HARD
   ruling) without opening it with three stacked dark bands (Alex's O1 slab). Cream, not white, so it still
   reads as a distinct band under the dark hero+trust unit rather than dissolving into the page. */
.thesis{background:var(--cream);padding:clamp(64px,8vw,96px) 0}
.thesis .wrap{display:grid;grid-template-columns:1fr;gap:0}
.thesis.has-sil .wrap{grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,64px);align-items:center}
.thesis .statement-copy .eyebrow{color:var(--pine)}
.thesis .statement-copy h2{font:800 clamp(28px,3.4vw,40px)/1.14 var(--font-display);color:var(--ink);letter-spacing:-.02em;margin:10px 0 18px;max-width:16ch}
.thesis .statement-copy p{font-size:clamp(15.5px,1.5vw,17px);line-height:1.7;color:var(--muted);max-width:56ch}
.thesis .statement-copy p+p{margin-top:15px}
.thesis .statement-sil .ph{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 50px -26px rgba(var(--pine-rgb),.28)}
.thesis .statement-sil .ph img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.thesis.has-sil .wrap{grid-template-columns:1fr;gap:32px}.thesis .statement-copy h2{max-width:none}}

/* ---- OVERLAP-CARD INTRO (.mp-introb / rr_mp_intro_bleed) — resource + area page opener ----
   N2/O11/O14 (Alex ×3: "I don't like how ANY of these intro sections are looking… it just looks like a big
   block of words"). A wide shot runs edge to edge and the copy card is pulled UP over its lower third — the
   overlap is what stops it reading as a block. Section stays WHITE so this does not stack a dark band under
   the hero on the four recipes that open with it. */
.mp-introb{background:#fff;padding:0 0 clamp(56px,7vw,84px)}
.mp-introb .introb-shot{position:relative;height:clamp(200px,30vw,360px);background-size:cover;background-position:center 55%}
.mp-introb .introb-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--pine-rgb),.28) 0%,rgba(var(--pine-rgb),.06) 45%,rgba(var(--pine-rgb),.34) 100%)}
.mp-introb .introb-card{position:relative;z-index:2;max-width:840px;margin:clamp(-96px,-9vw,-56px) auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,4vw,48px);box-shadow:0 28px 64px -30px rgba(var(--pine-rgb),.34)}
.mp-introb .introb-card h2{font:800 clamp(25px,3vw,34px)/1.18 var(--font-display);color:var(--ink);letter-spacing:-.02em;margin-bottom:16px}
.mp-introb .introb-card p{font-size:clamp(15.5px,1.5vw,16.5px);line-height:1.7;color:var(--muted)}
.mp-introb .introb-card p+p{margin-top:14px}
.mp-introb .mp-intro-cta{margin-top:24px}
@media(max-width:600px){.mp-introb .introb-card{margin-top:-40px}}

/* ---- NEIGHBORHOOD-PROFILE stat tiles (.ntiles / rr_mp_neighborhood_tiles) — area ---- */
.ntiles{background:#fff}
/* O15 (Alex): "'<Area> roofing by the numbers' looks a little bland. Maybe we can add a picture — a
   background tinted picture, like a blue tinted picture." Heavy pine tint on purpose: the shot is a
   backdrop and the numbers still have to be the thing you read. Tiles become glass so the photo shows
   through the band without ever competing with the figures. */
.ntiles.is-shot{position:relative;background:var(--pine-dk);background-size:cover;background-position:center;isolation:isolate}
.ntiles.is-shot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--pine-rgb),.90) 0%,rgba(var(--pine-rgb),.82) 100%);z-index:-1}
.ntiles.is-shot .wrap{position:relative}
.ntiles.is-shot .sec-head .eyebrow{color:rgba(255,255,255,.72)}
.ntiles.is-shot .sec-head h2{color:#fff}
.ntiles.is-shot .sec-head p{color:rgba(255,255,255,.82)}
.ntiles.is-shot .ntile{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.20);backdrop-filter:blur(2px)}
.ntiles.is-shot .ntile:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);box-shadow:0 24px 50px -26px rgba(0,0,0,.45)}
.ntiles.is-shot .ntile .nt-n{color:#fff}
.ntiles.is-shot .ntile .nt-l{color:rgba(255,255,255,.78)}
.ntiles.is-shot .ntiles-note{color:rgba(255,255,255,.80)}
.ntiles.is-shot .ntiles-src{color:rgba(255,255,255,.62)}
.ntiles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:920px;margin:48px auto 0}
.ntile{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:30px 22px;text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s}
.ntile:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(var(--pine-rgb),.22);border-color:var(--sand)}
.ntile .nt-n{display:block;font:800 38px/1 var(--font-display);color:var(--pine);letter-spacing:-.02em}
.ntile .nt-l{display:block;font:600 13px/1.35 var(--font-body);color:var(--muted);margin-top:9px}
/* .ntiles-note — the WRITER's reconciliation line under the tiles (area.php reads
   content.copy.areas.[slug].housing_note into $np['note']; emitted since the 2026-07-30 judge item 7).
   NOTE the bracket form: a tag-shaped token in a comment here ships inside the emitted style
   element, and emitted CSS lives in an HTML parser. Raw text saves it today; do not rely on that.
   It had NO rule in this stylesheet until 2026-08-05 because no MP site had ever authored a
   housing_note, so css-coverage first saw the class the day weatherford's downtown-historic-district
   page authored one. Sits between the tiles and the source line: heavier than the 12px citation
   because it is prose the reader is meant to read, lighter than body because it is an aside. */
.ntiles-note{max-width:760px;margin:28px auto 0;font-size:15px;line-height:1.65;color:var(--muted);text-align:center}
.ntiles-src{font-size:12px;color:var(--muted);margin-top:24px;line-height:1.5;text-align:center}

/* ---- CONTACT-METHODS icon row (.cmeth / rr_mp_contact_methods) — contact ---- */
.cmeth{background:#fff}
.cmeth-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.cmeth-item{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.cmeth-item:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(var(--pine-rgb),.22);border-color:var(--sand)}
.cmeth-ic{width:52px;height:52px;border-radius:14px;background:var(--pine);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cmeth-item h3{font:700 17px/1.2 var(--font-display);color:var(--ink);margin-bottom:7px}
.cmeth-val{font:700 16px/1.3 var(--font-display);color:var(--pine);margin-bottom:7px}
.cmeth-val a{color:var(--pine)}.cmeth-val a:hover{color:var(--pine-dk)}
/* WRAPPING STRATEGY (Lane 1 ruling 2026-08-10; the family had NONE — word-break|overflow-wrap|hyphens
   scored 0 stylesheet-wide and a 36-char email held the whole ≤600px cmeth grid track open at 410px in
   a 390px viewport). The strategy is NARROW BY DESIGN: machine-shaped tokens (emails — the surfaces
   below) may break ANYWHERE; prose never wraps mid-word, so no global rule. `anywhere` (not
   break-word) because it feeds the break opportunities into MIN-CONTENT sizing — the grid track stops
   being sized by the unbreakable token, which is the root cause, where min-width:0 on the item would
   only move the overflow inside the card.
   WIDENED SAME NIGHT (builder's 10:39 re-walk: the same email overflowed the ≤600px two-column footer
   grid via .mpf-lcol a — my two-selector rule was an INSTANCE fix wearing a strategy comment; "a rule
   widened for one convicted instance owes a CLASS SWEEP of its own binding"). Then bound per the 10:41
   RULING 2: the class is "any unbreakable token in any narrow column," enumerated FROM THE TEMPLATES
   THAT EMIT machine tokens (measured 2026-08-10: 2 mailto anchors · 14 tel anchors · 0 displayed raw
   URLs · .cmeth-val plain values). Every such surface, present and future, by mechanism selector —
   never another convicted-selector list. `anywhere` breaks only under actual overflow, so a phone
   with spaces never visibly changes. */
a[href^="mailto:"],a[href^="tel:"],.cmeth-val{overflow-wrap:anywhere}
.cmeth-item p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---- HOURS band (.hours / rr_mp_hours_band) — contact closer ---- */
.hours{background:var(--cream)}
.hours-band{display:flex;align-items:center;gap:26px;background:var(--charcoal);border-radius:var(--r);padding:34px 40px;color:#fff;box-shadow:0 24px 60px -28px rgba(var(--pine-rgb),.34);flex-wrap:wrap}
.hours-ic{flex-shrink:0;width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center}
.hours-copy{flex:1;min-width:260px}
.hours-copy h2{font-size:clamp(20px,2.4vw,26px);color:#fff;font-weight:800;margin-bottom:6px;line-height:1.2}
.hours-copy p{color:rgba(255,255,255,.72);font-size:15px;margin:0;max-width:60ch}
.hours-cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hours-link{font:600 14px/1 var(--font-body);color:var(--sand-dk)}
.hours-link:hover{color:#fff}

/* ---- SERVICE-EXPLANATION cost table (.ctab / rr_mp_cost_table) — roofing-cost ---- */
.ctab{background:#fff}
.ctab-wrap{max-width:960px;margin:48px auto 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.ctab-table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px;background:#fff}
.ctab-table th,.ctab-table td{text-align:left;padding:17px 22px;border-bottom:1px solid var(--line);vertical-align:top}
.ctab-table thead th{font:700 13px/1.3 var(--font-display);color:var(--ink);background:var(--charcoal);color:#fff;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
.ctab-table tbody th{font:700 16px/1.3 var(--font-display);color:var(--ink)}
.ctab-table tbody tr:last-child th,.ctab-table tbody tr:last-child td{border-bottom:none}
.ctab-table tbody tr.hl{background:rgba(var(--pine-rgb),.06)}
.ctab-table tbody tr.hl th{color:var(--pine-dk)}
.ctab-table .price{font:700 15px/1.3 var(--font-display);color:var(--pine);white-space:nowrap}
.ctab-cap{max-width:960px;margin:16px auto 0;font-size:13px;color:var(--muted);text-align:center;line-height:1.5}

/* ---- TOOL section wrapper (.tool-sec / rr_mp_tool_cost_calc) — reuses .calc-card ---- */
.tool-sec{background:var(--cream)}

/* ---- TIGHT RESOURCE INTRO (.mp-intro / rr_mp_intro) — shingle/warranty lead-in ---- */
.mp-intro{background:#fff;padding:80px 0 64px}
.mp-intro .sec-head{max-width:720px}
.mp-intro .sec-head h2{font-size:clamp(28px,3.4vw,40px)}

/* ---- COMPARISON-TABLE extras (.ctab pill + hl-last column + yes/no cells) ---- */
.ctab-pill{display:inline-block;font:700 10px/1 var(--font-body);letter-spacing:.04em;background:var(--sand-dk);color:var(--pine-dk);padding:4px 9px;border-radius:50px;margin-top:7px;white-space:normal;text-transform:none}
.ctab-table .yes{color:var(--pine);font-weight:800}
.ctab-table .no{color:var(--muted)}
.ctab-table .price{font:700 15px/1.3 var(--font-display);color:var(--pine);white-space:nowrap}
/* highlight the last (recommended) column end-to-end — the "best for hail country" tier */
.ctab-table.hl-last thead th:last-child{background:var(--pine);color:#fff}
.ctab-table.hl-last thead th:last-child .ctab-pill{background:rgba(255,255,255,.25);color:#fff}
.ctab-table.hl-last tbody td:last-child{background:rgba(var(--pine-rgb),.07)}

/* ---- TIER / PAIRED-CONCEPT CARDS (.tcards / rr_mp_tier_cards) — warranty + insurance ----
   precise two-up cards on cool-white, a pine top-rule + numbered coin (the MP icon motif),
   reads clearly different from FL's plain .incl-card prose pair. */
.tcards{background:var(--cream)}
.tcards-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:48px auto 0}
.tcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 30px 30px;border-top:4px solid var(--pine);transition:transform .18s,box-shadow .18s,border-color .18s}
.tcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(var(--pine-rgb),.22)}
.tcard-num{position:absolute;top:-19px;left:30px;width:38px;height:38px;border-radius:50%;background:var(--pine);color:#fff;display:flex;align-items:center;justify-content:center;font:800 17px/1 var(--font-display);box-shadow:0 0 0 4px #fff}
/* L1: who CARRIES it, replacing the 1/2 badge — these cards are a pair, not a sequence, and the reader's
   eye needs the two carriers to line up across the columns before any prose is read. */
.tcard-by{display:block;font:700 11.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--pine);margin-bottom:11px}
/* R20 (Alex): "I like replacement cost minus depreciation / today's cost to put back like for like. It is kinda worded weird but I like it. And we can skip the bold." Wording kept, weight dropped 800 -> 600. */
.tcard-term{font:600 clamp(16px,1.7vw,19px)/1.35 var(--font-display);color:var(--ink);letter-spacing:-.01em;padding:13px 0;margin:14px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tcard h3{font:800 21px/1.2 var(--font-display);color:var(--ink);margin-bottom:14px;letter-spacing:-.01em}
.tcard-body p{font-size:15px;color:var(--muted);line-height:1.65}
.tcard-body p strong{color:var(--ink);font-weight:700}

/* ---- THANK-YOU confirmation (.ty / thank-you.php MP branch) — review round 3 ----
   FL's thank-you uses motifs MP hides (.underline-word/.svc-hand/.roofline) so it rendered bare on
   MP. The MP branch emits a clean, intentional CENTERED confirmation: a pine check coin, the H1, a
   reassurance lead, and a Call + Back-home button pair, on a soft cream-to-white wash so the page
   reads as deliberate, not an empty hero. MP-only (this stylesheet loads only for the MP family). */
.ty{background:linear-gradient(180deg,var(--cream),#fff);padding:96px 0 104px;text-align:center}
.ty-inner{max-width:620px;margin:0 auto}
.ty-check{width:78px;height:78px;border-radius:50%;background:var(--pine);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 26px;box-shadow:0 0 0 6px rgba(var(--pine-rgb),.12),0 18px 40px -18px rgba(var(--pine-rgb),.5)}
.ty .crumb{justify-content:center;margin-bottom:16px}
.ty h1{font-size:clamp(34px,4.4vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.ty-lead{font:500 18px/1.6 var(--font-body);color:var(--muted);max-width:460px;margin:16px auto 0}
.ty-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
@media(max-width:600px){
  .ty{padding:64px 0 72px}
  .ty-actions{flex-direction:column;align-items:stretch}
  .ty-actions .btn{width:100%;justify-content:center}
}

/* ============================================================================
   MP-DISTINCT ICON TREATMENT (family-aware "icon coin" — shared-asset tell fix)
   ---------------------------------------------------------------------------
   Modern-Pro and Friendly-Local both draw from the SAME inline feather icon set
   (parts/icons.php) — so side-by-side, MP's icons read as the same assets in a
   different paint. Until a full per-family icon SET exists (tracked asset task,
   like the photo pool), give MP a consistent, visually-DISTINCT icon CHIP
   treatment so the same glyphs read as a different brand:
     • solid pine-filled CIRCULAR coin (vs FL's soft-tinted rounded SQUARE),
     • a hairline pine ring offset around the coin (a deliberate "seal" motif),
     • a HEAVIER icon stroke (CSS overrides rr_icon()'s inline stroke-width).
   This is MP-ONLY: this stylesheet loads only for the Modern-Pro family
   (parts/header.php swaps it in), so Friendly-Local's icons are UNCHANGED.
   Applied to every icon container the MP pages render — services/process steps,
   trust, why, signs ("when to replace" + factors + voids + red-flags), contact
   methods, materials, areas, financing, related-resources, hours, emergency.
   ============================================================================ */
/* (a) heavier, more geometric stroke on every MP-rendered icon (overrides inline sw) */
.sign-card .si svg,.osvc-card .oi svg,.feat-card .ic svg,.feat-stat .ic svg,
.why-icon svg,.step-icon svg,.cmeth-ic svg,.guarantee .g-item svg,.area-facts .fact svg,
.facts-strip .lf svg,.rel-card h4 svg,.mat-card-body h3 .mi svg,.trust-item .t-ic svg,
.hours-ic svg,.emg .emg-ic svg,.incl-list .ck svg,.prose-list .ck svg,
.spec-ck svg,.fin-list .ck svg,.feat-list .ck svg{stroke-width:2.6px}
/* (b) round coin + offset ring on the boxed icon chips (FL uses soft rounded squares) */
.sign-card .si,.osvc-card .oi,.feat-card .ic,.feat-stat .ic,.mat-card-body h3 .mi{
  border-radius:50%;background:var(--pine);color:#fff;
  box-shadow:0 0 0 1px #fff,0 0 0 4px rgba(var(--pine-rgb),.18)}
.sign-card:hover .si,.osvc-card:hover .oi,.feat-card:hover .ic{
  box-shadow:0 0 0 1px #fff,0 0 0 5px rgba(var(--pine-rgb),.26)}
.sign-card.green .si{background:var(--pine-dk);color:#fff}
/* the .why-icon / .step-icon / .cmeth-ic coins are already round+pine — add the ring so
   the whole family shares ONE icon motif (consistent across MP sections) */
.why-icon,.cmeth-ic{box-shadow:0 0 0 1px #fff,0 0 0 4px rgba(var(--pine-rgb),.16)}
/* (c) inline pine-pill icons (area facts, local facts, related arrows, guarantee items):
   keep the pill but give the glyph a solid pine coin so it matches the boxed treatment */
.area-facts .fact svg,.facts-strip .lf svg,.guarantee .g-item svg{
  background:var(--pine);color:#fff;border-radius:50%;padding:3px;width:20px;height:20px;box-sizing:content-box}

/* ============================ RESPONSIVE (non-home blocks) ================= */
@media(max-width:960px){
  .svc-hero-grid{grid-template-columns:1fr;gap:36px;padding:36px 20px 48px}
  .svc-intro-grid,.area-intro-grid,.why-grid,.svc-detail,.cov .layout{grid-template-columns:1fr;gap:32px}
  .ntiles-grid,.cmeth-row,.tcards-grid{grid-template-columns:1fr 1fr}
  .hours-cta{align-items:flex-start;width:100%}
  .ctab-table{font-size:14px;min-width:0}
  .ctab-table th,.ctab-table td{padding:13px 16px;white-space:nowrap}
  .ctab-table tbody th{white-space:normal}
  .spec-layout{grid-template-columns:1fr;gap:28px}
  .spec-photo{position:static;order:-1}
  .spec-photo .ph{aspect-ratio:16/10}
  .spec-row{grid-template-columns:1fr;gap:8px;padding:20px 22px}
  .why-grid.flip .why-photo,.svc-detail.flip .dph{order:0}
  .sign-grid,.cert-grid,.gallery-grid,.osvc-grid,.mat-grid,.feat-grid,.rel-grid{grid-template-columns:1fr 1fr}
  .feat-list{grid-template-columns:1fr}
  .svc-hero .frame img,.svc-hero .frame-ph,.why-photo img,.svc-detail .dph img{height:320px}
  .mat-cost-grid{grid-template-columns:1fr;gap:20px;text-align:center}
  .mat-cost-fig{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);padding-right:0;padding-bottom:18px;align-items:center}
  .stl-acard{max-width:100%}
  .stl-acard.r{align-self:auto}
  /* swipe hint for sideways-scrolling comparison tables */
  .cmp-swipe{display:flex;align-items:center;justify-content:flex-end;gap:5px;max-width:920px;margin:48px auto 8px 0;font:600 12.5px/1 var(--font-body);color:var(--pine)}
  .cmp-swipe span{font-size:14px;line-height:1}
  .cmp-table{font-size:13.5px;min-width:0}
  .cmp-table th,.cmp-table td{padding:12px 14px;white-space:nowrap}
  .cmp-table tbody th{white-space:normal}
}
@media(max-width:600px){
  .sign-grid,.cert-grid,.gallery-grid,.osvc-grid,.mat-grid,.feat-grid,.rel-grid,.calc-grid,.ntiles-grid,.cmeth-row,.tcards-grid{grid-template-columns:1fr}
  /* F20 SIGHTING #2 (operator 2026-08-11, manager 10:09 scope extension: the layout remedy
     generalizes from the footer column to EVERY machine-token container). The contact-methods card
     held the email at 16px inside 26px of card padding: MEASURED at TRUE 390px, the address needs
     336px and the value box had 296px. The grid was ALREADY single-column, so unlike the footer the
     constraint was not the track — it was the card's own inset, and the font could not be reduced
     because .cmeth-val is already AT body size (16px) and the F20 rule bars shrinking below it.
     REMEDY: the row goes FULL-BLEED at narrow widths (cancelling .wrap's 20px inset) and the card
     keeps a 20px pad, which yields 348px of room for a 336px token — fits with margin rather than
     exactly, so a slightly longer address on a future site still clears. Radius drops because a
     full-bleed card with rounded corners reads as a mistake. */
  .cmeth-row{margin-left:-20px;margin-right:-20px}
  .cmeth-item{padding-left:20px;padding-right:20px;border-radius:0;border-left:0;border-right:0}
  .hours-band{padding:26px 24px}
  .hours-cta{width:100%}.hours-cta .btn{width:100%;justify-content:center}
  .storm-event{grid-template-columns:1fr;gap:6px}
  .storm-stats{gap:26px}
  .storm-stats .n{font-size:40px}
  .hc-dist{margin-left:0;width:100%}
  .svc-hero-actions,.promise .pbtn{flex-direction:column;align-items:stretch}
  .svc-hero-actions .btn,.promise .pbtn .btn{width:100%;justify-content:center}
  .emg .emg-band{padding:24px 22px}
  .emg .emg-cta{align-items:stretch;width:100%}
  .emg .emg-cta .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .sign-card:hover,.cert-card:hover,.gallery-grid figure:hover,.osvc-card:hover,
  .mat-card:hover,.rel-card:hover,.svc-detail .dph,.area-chip:hover,.feat-card:hover,
  .ntile:hover,.cmeth-item:hover{transform:none}
}

/* ============================================================================
   SECTION-VARIANT LAYOUTS — ported from templates/families/modern-pro/variants/
   (the picked gallery layouts), tokenised to the runtime palette/fonts. Each MP
   section archetype branches on rr_variant('(section)') and emits one of these.
   The family's SIGNATURE layout (hero v1 split, services v1 cards, process v1
   dark stepper, trust v1 pine bar, cta v2 charcoal) is the base CSS above; the
   rules below add the OTHER picked variants + the bits the base didn't cover.
   No FL classes/motifs; tokens only (rgba gradients excepted, as elsewhere).
   ============================================================================ */

/* ---- HERO v1: photo + floating dark-pine form card over its corner ---- */
.hero-v1 .hero-photo,.hero-v5 .hero-photo{aspect-ratio:4/5;border-radius:20px;overflow:hidden;position:relative}
.hero-v1 .hero-photo .ph,.hero-v5 .hero-photo .ph{width:100%;height:100%;border-radius:0}
.hero-v1 .hero-right{position:relative}
.hero-form.float{position:absolute;bottom:-26px;left:-26px;right:22px}

/* ---- HERO v2: form-first, no photo, tinted panel ---- */
.hero-v2.formfirst{background:linear-gradient(180deg,#fff,var(--cream))}
.hero-v2 .hero-right{display:flex;align-items:flex-start}
.hero-v2 .hero-form{width:100%}

/* ---- HERO v3: full-bleed photo + copy over a strong left-to-right tint ---- */
.hero-bleed{position:relative;overflow:hidden;background:var(--charcoal);padding:0}
.hero-bleed .bg{position:absolute;inset:0;border-radius:0;z-index:0}
.hero-bleed .bg.has-photo{background:var(--pine-dk)}
.hero-bleed .bg.has-photo::before{display:none}
.hero-bleed .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bleed::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,31,28,.94) 0%,rgba(8,31,28,.78) 45%,rgba(8,31,28,.44) 100%)}
.hero-bleed .inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:60px 36px}
/* P6 (Alex 2026-07-29): "when I click next it makes the header huge - it grows the header. If it grows
   anything, it needs to grow the FORM." Measured, hero = max(copy 466px, card) + 208px of inner padding,
   so step 2's 572px card was dragging the hero 674 -> 780. The column reserves the taller state instead:
   the hero holds still and the card grows inside it. A FLOOR, not a fixed height - a taller step 2 on some
   other site still grows rather than clipping. Desktop only; below 961px the grid stacks. */
/* NOTE the units: box-sizing is border-box here, so this floor INCLUDES the 208px of inner padding. My
   first pass used 580px (the card's own height) and it silently did nothing, because the element was
   already 674px. The number is the whole box: the step-2 card plus that padding. Re-measured after the
   step-2 fixes shortened the card (the stray Next button left, the consent stopped wrapping to ten lines),
   so this came down from 780 to 732 — the hero should be exactly as tall as it needs to be and no taller. */
/* R9-3 (Alex, round 9): "when it expands, it also expands the hero picture a little bit… I mostly just
   want the hero form to expand, not the hero itself." The floor above is a FLOOR, not a ceiling — measured
   on the rendered page at 1280px, the band held 732px at step 1 and grew to 856.7px at step 2, because the
   row is `208px of inner padding + the tallest column` and the step-2 card is 648.7px. The floor went stale:
   step 2 has since gained the Turnstile widget (65px) and a taller consent block, which is very nearly the
   whole 124.7px of growth. Two changes, and the second is what keeps the at-rest hero close to the shape he
   already approved: (1) the floor now covers the step-2 box; (2) the vertical padding drops to 64px ONLY for
   multistep heroes — while the floor is active the grid centres its content, so that padding is visually
   inert at step 1 and buys 80px of step-2 headroom. Net: the card expands and the photo behind it does not
   move. Non-multistep heroes keep their 104px padding.
   TWO floors, because ONE number does not hold: the step-2 requirement is width-dependent (the consent block
   wraps to more lines as the column narrows), measured across 961→1600px — 811px at 961-1100, 795.6 at 1160,
   776.7 at ≥1220. A single floor covering the worst case would push the WIDE hero (the shape Alex reviews at)
   80px past what he approved, so the floor is pinned per range instead: 812 below 1220, 780 at and above it.
   Verified delta 0 at 961/1024/1160/1280/1440 — re-measure this curve if the consent text or step-2 fields
   ever change length, because that is exactly what went stale the first time. */
@media(min-width:961px){.hero-bleed .inner:has(.hero-form form[data-rr-multistep]){min-height:812px;padding-top:64px;padding-bottom:64px}}
@media(min-width:1220px){.hero-bleed .inner:has(.hero-form form[data-rr-multistep]){min-height:780px}}
.hero-bleed .copy{padding-top:0}
.hero-bleed .eyebrow{color:var(--sand-dk)}
.hero-bleed h1{color:#fff;max-width:18ch}
/* dark v3 hero: the italic standout subhead uses a legible light pine-tint (sand-dk) + a matching
   left-rule so it still reads as the accent design element over the dark scrim (review round 3). */
.hero-bleed .hero-sub{color:var(--sand-dk);border-left-color:var(--sand-dk)}
.hero-bleed .subhead{color:rgba(255,255,255,.9)}
.hero-bleed .btn-on-dark{border-color:rgba(255,255,255,.6);color:#fff}
.hero-bleed .btn-on-dark:hover{background:#fff;color:var(--pine)}

/* ---- HERO v3 REWORK (Alex, live-draft review 2026-07-28) ----------------------------------------
   His notes drove every value: a BIGGER, evenly spaced H1; a taller hero; real air between the H1 and
   the brand line ("it's also bunched together"); the lead moved BELOW the buttons; the call button
   alone and centred under the copy. The eyebrow is gone from the markup. */
.hero-bleed .inner{padding:104px 36px;align-items:center}
.hero-bleed .copy-centered{text-align:left;max-width:none}
/* Long area/commercial H1s broke into three ragged rows ("Roofing in The / Enclave at / Lakeview, Little
   Elm"). text-wrap:balance lets the browser distribute the lines evenly instead of filling greedily, and
   a hair more line-height keeps three lines from stacking tight. Short H1s are unaffected. */
.hero-bleed .copy-centered h1{margin:0;max-width:26ch;font-size:clamp(38px,4.8vw,58px);line-height:1.08;text-wrap:balance;letter-spacing:-.032em}
/* R3/R4/R5 (Alex ruled 2026-07-29: "left-align it"). Five centred blocks of five different widths stacked
   beside a rectangular form card gave the eye no line to follow — that was the "weird shape". One shared
   left edge fixes it, and it lands on every hero carrying .copy-centered: home, about, services, areas. */
.hero-bleed .copy-centered .mp-slogan{margin-left:0;margin-right:auto}
.hero-bleed .copy-centered .hero-trust{justify-content:flex-start}
/* centred, so the left-rule accent would read as a stray tick — symmetric air instead, which is also
   what "space more evenly" asks for. */
.hero-bleed .copy-centered .hero-sub{margin:30px 0 0;padding-left:0;border-left:0;max-width:44ch;font-size:21px}
.hero-bleed .copy-centered .cta-row-solo{justify-content:flex-start;margin:34px 0 0}
.hero-bleed .copy-centered .hero-lead-under{margin:26px 0 0;max-width:52ch;font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.88)}
.hero-bleed .copy-centered .hero-emg{justify-content:flex-start;max-width:52ch;margin-left:0;margin-right:0}
.hero-bleed .copy-centered .mp-slogan{justify-content:flex-start}
@media(max-width:960px){
  .hero-bleed .inner{padding:64px 22px}
  .hero-bleed .copy-centered h1{font-size:clamp(32px,7.4vw,44px);max-width:none}
  .hero-bleed .copy-centered .hero-sub{margin-top:22px;font-size:18px}
  .hero-bleed .copy-centered .cta-row-solo{margin-top:26px}
  .hero-bleed .copy-centered .cta-row-solo .btn{width:100%}
}

/* ---- HERO v5: photo left (flipped) + dark-pine form card under the copy ---- */
.hero-v5.flip .inner{grid-template-columns:.95fr 1.05fr}
.hero-v5.flip .hero-photo-col{order:-1}
.hero-v5 .hero-photo{aspect-ratio:5/4}
.hero-form.hero-form-inline{margin-top:20px}

@media(max-width:960px){
  .hero-bleed .inner{grid-template-columns:1fr;gap:34px;padding:52px 32px}
  .hero-v1 .hero-photo,.hero-v5 .hero-photo{aspect-ratio:16/10}
  .hero-form.float{position:static;left:auto;right:auto;bottom:auto;margin-top:22px}
  .hero-v5.flip .hero-photo-col{order:0}
  /* TRUE-390 (alma wave B, 2026-08-01, producer root-cause with exact lines): the base-scope
   * `.hero-v5.flip .inner{grid-template-columns:.95fr 1.05fr}` out-specifies the generic `.hero .inner`
   * 1fr collapse above, so v5-flip heroes kept TWO columns down to 0px — 406px of content in a 390px
   * viewport, every element off-canvas, every page, every modern-pro site. Same selector, in-media:
   * the collapse wins below 960 and the flip block keeps its desktop look untouched. */
  .hero-v5.flip .inner{grid-template-columns:1fr}
}

/* ---- SERVICES v2: icon rows (2-col, no photos) ---- */
.svc-rows{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px}
.svc-row{display:flex;gap:15px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:border-color .15s,box-shadow .15s,transform .15s}
.svc-row:hover{border-color:var(--pine);box-shadow:0 18px 44px -28px rgba(var(--pine-rgb),.22);transform:translateY(-2px)}
.svc-row .ic{width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--sand);color:var(--pine);display:grid;place-items:center}
.svc-row .ic svg{width:22px;height:22px}
.svc-row h4{font:700 16px/1.2 var(--font-display);color:var(--ink)}
.svc-row p{font:500 13.5px/1.5 var(--font-body);color:var(--muted)}
.svc-row .arr{margin-left:auto;color:var(--pine);font-weight:700;font-size:18px;transition:transform .2s}
.svc-row:hover .arr{transform:translateX(4px)}

/* ---- SERVICES v3: bento photo tiles (label over a fade) ---- */
.svc-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:18px;margin-top:48px}
.svc-tile{position:relative;border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end;padding:22px;color:#fff}
.svc-tile .ph{position:absolute;inset:0;border-radius:0}
.svc-tile .ph::after{display:none}
.svc-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,31,28,.88),rgba(8,31,28,.05) 72%)}
.svc-tile.big{grid-row:span 2}
.svc-tile .lab{position:relative;z-index:1}
.svc-tile h3{font:800 20px/1.1 var(--font-display);color:#fff}
.svc-tile p{font:500 13px/1.5 var(--font-body);color:rgba(255,255,255,.88);margin-top:4px}

/* ---- SERVICES v4: alternating photo rows (zigzag) ---- */
.svc-zig{display:flex;flex-direction:column;gap:22px;margin-top:40px}/* D-row3b: 4052px band halved; zig kept (Alex likes the design, hates the mass) */
.svc-zigrow{display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:center;border-radius:var(--r)}
.svc-zigrow .ph{aspect-ratio:21/9;border-radius:var(--r)}
.svc-zigrow.flip .ph{order:2}
/* A2 (Alex 2026-08-03, coppell review): the flip moved the PHOTO to grid cell 2 but the columns never
   swapped with it, so alternating rows rendered the same photo in the 7fr cell — ~40% wider, same 21/9
   box. "one side was correct, and the other side looks weird." Swapping the track order on .flip keeps
   the photo in the 5fr slot on EVERY row; the text takes the wide column both ways. */
.svc-zigrow.flip{grid-template-columns:7fr 5fr}
.svc-zigrow .zig-bd h3{font:800 20px/1.15 var(--font-display);color:var(--ink);margin-bottom:7px}
.svc-zigrow .zig-bd p{font:500 15px/1.6 var(--font-body);color:var(--muted);margin-bottom:12px}
.svc-zigrow .zig-bd .lnk{font:700 14px/1 var(--font-display);color:var(--pine);display:inline-flex;align-items:center;gap:6px}
.svc-zigrow .zig-bd .lnk span{display:inline-block;transition:transform .2s}
.svc-zigrow:hover .zig-bd .lnk span{transform:translateX(4px)}

/* ---- PROCESS v2: light vertical timeline ---- */
.proc-tl-sec{background:var(--cream)}
/* R6 (Alex, murphy review 2026-08-12): "can we center that or something? It just looks really
   weird." The section's BODY is a narrow centered column (.proc-tl below: max-width 720, margin
   auto), but its head inherited the plain left-aligned .sec-head (max-width 580, no auto margin),
   so the h2 sat hard against the wrap's left edge while the timeline under it floated centered.
   Two different axes in one section is what read as weird. v1 of this block (.proc .sec-head, :359)
   has always centered its head for exactly this reason; v2 was the miss. Matching v1 rather than
   inventing a third treatment. v3 (.proc-cards-sec) is deliberately NOT included: its body is a
   full-width 4-column grid, so a left-aligned head is correctly aligned there already. */
.proc-tl-sec .sec-head{max-width:640px;margin:0 auto;text-align:center}
.proc-tl{max-width:720px;margin:48px auto 0;position:relative;padding-left:8px}
.proc-tl::before{content:'';position:absolute;left:22px;top:10px;bottom:10px;width:2px;background:var(--line)}
.proc-tlstep{position:relative;padding:0 0 28px 64px}
.proc-tlstep:last-child{padding-bottom:0}
.proc-tlstep .dot{position:absolute;left:12px;top:0;width:22px;height:22px;border-radius:50%;background:var(--pine);border:3px solid #fff;box-shadow:0 0 0 2px var(--pine);display:grid;place-items:center;color:#fff;font:800 11px/1 var(--font-display)}
.proc-tlstep h4{font:700 18px/1.2 var(--font-display);color:var(--ink);margin-bottom:4px}
.proc-tlstep p{font:500 14.5px/1.6 var(--font-body);color:var(--muted)}

/* ---- PROCESS v3: light numbered cards ---- */
.proc-cards-sec{background:#fff}
.proc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.proc-pcard{background:var(--cream);border-radius:var(--r);padding:26px 24px;border:1px solid transparent;transition:border-color .2s,box-shadow .2s,transform .2s}
.proc-pcard:hover{border-color:var(--sand);box-shadow:0 24px 50px -28px rgba(var(--pine-rgb),.2);transform:translateY(-4px)}
.proc-pcard .pn{font:800 44px/1 var(--font-display);color:var(--sand-dk);margin-bottom:12px}
.proc-pcard h4{font:700 17px/1.2 var(--font-display);color:var(--ink);margin-bottom:6px}
.proc-pcard p{font:500 13.5px/1.55 var(--font-body);color:var(--muted)}

/* ---- TRUST v4: charcoal statement band (honest title + detail, no invented counts) ---- */
.trust-count{background:var(--charcoal);padding:46px 0}
.trust-count .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust-count .c{text-align:center;padding:0 18px;border-right:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center}
.trust-count .c:last-child{border-right:none}
.trust-count .tc-ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.10);color:var(--sand-dk);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.trust-count .n{font:800 19px/1.2 var(--font-display);color:#fff;letter-spacing:-.01em}
.trust-count .t{font:500 13px/1.5 var(--font-body);color:rgba(255,255,255,.7);margin-top:7px}

/* ---- CTA v1: pine split + embedded lead form ---- */
.cta-split{background:var(--pine);padding:48px 0}/* D-row9: "vertically smaller" — 72→48 */
.cta-split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cta-split .eyebrow{color:rgba(255,255,255,.72)}
.cta-split h2{font:800 36px/1.1 var(--font-display);color:#fff;margin:10px 0 12px}
.cta-split p{font:500 16px/1.6 var(--font-body);color:rgba(255,255,255,.9)}
.cta-split .cta-note{margin-top:18px;font:600 14px/1.4 var(--font-body);color:rgba(255,255,255,.7)}
.cta-split .cta-note b{color:#fff}
/* the embedded CTA card reuses the dark-pine form look so the form fields stay legible */
.cta-card{background:var(--pine-dk);border-radius:16px;padding:26px;border:1px solid rgba(255,255,255,.30);box-shadow:0 26px 64px -18px rgba(0,0,0,.55)}/* D-row10: green-on-dark-green blended (Alex: "form stick out a little more") — same 30%-border+depth separation already approved on the svc-hero form card */
.cta-card .form-title{font:800 19px/1.2 var(--font-display);color:#fff;margin-bottom:5px}
.cta-card .form-sub{font:500 12.5px/1.4 var(--font-body);color:rgba(255,255,255,.72);margin-bottom:16px}
.cta-card .est-form{display:flex;flex-direction:column;gap:10px}
/* R9-1b — SECOND INSTANCE of the .lf-step gap-swallow already fixed on .hero-form (note above line 219).
   The est-form gap separates only the form's children (step 1 / Next / step 2); every field lives INSIDE
   .lf-step, so the fields measured 0px apart on the rendered card (probe, 1280px, alma v1 split) while the
   hero form measured 16px. Alex, round 9: "the form fields themselves are super bunched together" — the
   same complaint that produced the hero fix ("so close to each other"), on the card it was never swept to.
   Rhythm matched to .hero-form, which is the approved reference. Covers v1 (.cta-split) and v3 (.cta-photo). */
.cta-card .est-form .lf-step{display:flex;flex-direction:column;gap:16px}
.cta-card .est-form .lf-back{align-self:flex-start}
.cta-card .est-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta-card .est-form label{display:block;font:600 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:5px}
.cta-card .est-form input,.cta-card .est-form select,.cta-card .est-form textarea{width:100%;padding:11px 13px;border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-sm);font:500 14px/1.3 var(--font-body);color:#fff;background:rgba(255,255,255,.06);outline:none;transition:border-color .15s,background .15s}
.cta-card .est-form input::placeholder,.cta-card .est-form textarea::placeholder{color:rgba(255,255,255,.5)}
.cta-card .est-form select option{color:var(--ink)}
.cta-card .est-form input:focus,.cta-card .est-form select:focus,.cta-card .est-form textarea:focus{border-color:var(--sand-dk);background:rgba(255,255,255,.1)}
.cta-card .est-form .ef-check{display:flex;align-items:center;gap:9px;font:600 12px/1.3 var(--font-body);color:rgba(255,255,255,.78);cursor:pointer}
.cta-card .est-form .ef-check input{width:auto;margin:0;accent-color:var(--sand-dk);flex:0 0 auto}
.cta-card .est-form .lf-opt{color:rgba(255,255,255,.6)}
.cta-card .est-form .btn,.cta-card .est-form button[type=submit]{width:100%;justify-content:center;margin-top:4px;background:#fff;color:var(--pine);border:none;padding:14px;border-radius:50px;font:700 14.5px/1 var(--font-body);cursor:pointer;transition:background .18s,transform .18s}
.cta-card .est-form .btn:hover,.cta-card .est-form button[type=submit]:hover{background:var(--cream);transform:translateY(-1px)}
.cta-card .form-consent{font:500 11px/1.4 var(--font-body);color:rgba(255,255,255,.6);text-align:center;margin-top:10px}
/* R9-1 (alma round 9, "is this a joke" — round-8 row 10 THRICE-failed): on the FLAT PINE BAND (v1
   .cta-split) the card itself goes WHITE — the .est-card/.cta-bar-form treatment the operator already
   approved on this exact band. Every prior fix tuned the 1px SEPARATOR; the complaint was the CARD.
   The dark treatment stays ONLY for v3 (.cta-photo), where the card sits on a scrimmed photo — the
   same reasoning that keeps .est-card.hero-form dark on the svc-hero photo. */
.cta-split .cta-card{background:#fff;border:none;box-shadow:0 24px 60px -20px rgba(0,0,0,.35)}
.cta-split .cta-card .form-title{color:var(--ink)}
.cta-split .cta-card .form-sub{color:var(--muted)}
.cta-split .cta-card .est-form label{color:var(--muted)}
.cta-split .cta-card .est-form input,.cta-split .cta-card .est-form select,.cta-split .cta-card .est-form textarea{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.cta-split .cta-card .est-form input::placeholder,.cta-split .cta-card .est-form textarea::placeholder{color:var(--muted);opacity:.7}
.cta-split .cta-card .est-form input:focus,.cta-split .cta-card .est-form select:focus,.cta-split .cta-card .est-form textarea:focus{border-color:var(--pine);background:#fff;box-shadow:0 0 0 3px rgba(var(--pine-rgb),.1)}
.cta-split .cta-card .est-form .ef-check{color:var(--muted)}
.cta-split .cta-card .est-form .ef-check input{accent-color:var(--pine)}
.cta-split .cta-card .est-form .lf-opt{color:var(--muted)}
.cta-split .cta-card .est-form .btn,.cta-split .cta-card .est-form button[type=submit]{background:var(--pine);color:#fff}
.cta-split .cta-card .est-form .btn:hover,.cta-split .cta-card .est-form button[type=submit]:hover{background:var(--pine-dk)}
.cta-split .cta-card .form-consent{color:var(--muted)}

/* ---- CTA v3: full-bleed photo + form over a deep scrim ---- */
.cta-photo{position:relative;overflow:hidden;text-align:left}
.cta-photo .ph{position:absolute;inset:0;border-radius:0;z-index:0}
.cta-photo .ph::after{display:none}
.cta-photo .ph.has-photo{background:var(--pine-dk)}
.cta-photo .ph.has-photo::before{display:none}
.cta-photo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-photo::after{content:'';position:absolute;inset:0;z-index:1;background:rgba(8,31,28,.80)}
.cta-photo .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:84px 36px}
.cta-photo .cta-photo-copy{max-width:none}
.cta-photo .eyebrow{color:var(--sand-dk)}
.cta-photo h2{font:800 42px/1.07 var(--font-display);color:#fff;margin:10px 0 12px;max-width:16ch}
.cta-photo p{font:500 17px/1.6 var(--font-body);color:rgba(255,255,255,.9);max-width:44ch}

/* ---- CTA v4: pine inline quick-form bar ---- */
.cta-bar{background:var(--pine);padding:48px 0}
.cta-bar .wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:36px}
.cta-bar .lab h2{font:800 30px/1.1 var(--font-display);color:#fff}
.cta-bar .lab p{font:500 14.5px/1.5 var(--font-body);color:rgba(255,255,255,.85);margin-top:6px}
.cta-bar-form{background:#fff;border-radius:16px;padding:22px 24px}
/* single-column stacked fields (the closer form's standalone name + phone/zip .row don't align in a
   2-col grid) — the phone/zip .row keeps its own 2-up; everything else is full width. Clean + legible. */
.cta-bar-form .est-form{display:flex;flex-direction:column;gap:11px}
/* R9-1b, same class on the v4 quick-bar closer — swept with .cta-card rather than left as the next
   instance to be found by the operator. The bar is a denser shape than the card, so it takes 14px, not 16. */
.cta-bar-form .est-form .lf-step{display:flex;flex-direction:column;gap:14px}
.cta-bar-form .est-form .lf-back{align-self:flex-start}
.cta-bar-form .est-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta-bar-form .est-form label{display:block;font:600 10.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.cta-bar-form .est-form input,.cta-bar-form .est-form select,.cta-bar-form .est-form textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:500 14px/1.3 var(--font-body);color:var(--ink);background:#fff;outline:none}
.cta-bar-form .est-form input:focus,.cta-bar-form .est-form select:focus,.cta-bar-form .est-form textarea:focus{border-color:var(--pine);box-shadow:0 0 0 3px rgba(var(--pine-rgb),.1)}
.cta-bar-form .est-form .ef-check{display:flex;align-items:center;gap:9px;font:600 12px/1.3 var(--font-body);color:var(--muted);cursor:pointer}
.cta-bar-form .est-form .ef-check input{width:auto;margin:0;accent-color:var(--pine);flex:0 0 auto}
.cta-bar-form .est-form .btn,.cta-bar-form .est-form button[type=submit]{justify-content:center;background:var(--pine);color:#fff;border:none;padding:14px;border-radius:50px;font:700 14.5px/1 var(--font-body);cursor:pointer;transition:background .18s}
.cta-bar-form .est-form .btn:hover,.cta-bar-form .est-form button[type=submit]:hover{background:var(--pine-dk)}
.cta-bar-form .form-consent{font:500 11px/1.4 var(--font-body);color:var(--muted);text-align:center;margin-top:6px}

/* ---- CTA v5: phone-forward (light) ---- */
.cta-phone{background:linear-gradient(180deg,var(--cream),#fff);text-align:center}
.cta-phone .eyebrow{display:block;color:var(--pine)}
.cta-phone .big-phone{font:800 56px/1 var(--font-display);color:var(--pine);letter-spacing:-.02em;margin:14px 0 12px;display:inline-block}
.cta-phone .big-phone:hover{color:var(--pine-dk)}
.cta-phone h2{font:700 26px/1.2 var(--font-display);color:var(--ink);margin-bottom:8px}
.cta-phone p{font:500 16px/1.6 var(--font-body);color:var(--muted);max-width:42ch;margin:0 auto 18px}
.cta-phone .cta-phone-actions{display:flex;justify-content:center;margin-bottom:18px}
.cta-phone .hours{font:600 14px/1 var(--font-body);color:var(--muted)}
.cta-phone .hours b{color:var(--ink)}

/* ---- variant responsive ---- */
@media(max-width:960px){
  .svc-rows{grid-template-columns:1fr}
  .svc-bento{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .svc-zigrow,.svc-zigrow.flip{grid-template-columns:1fr;gap:24px}
  .svc-zigrow.flip .ph{order:0}
  .proc-cards{grid-template-columns:1fr 1fr}
  .trust-count .wrap{grid-template-columns:1fr 1fr;gap:30px 24px}
  .trust-count .c:nth-child(2n){border-right:none}
  .cta-split .wrap,.cta-photo .wrap,.cta-bar .wrap{grid-template-columns:1fr;gap:30px}
  .cta-photo{text-align:center}
  .cta-photo h2{max-width:none;margin-left:auto;margin-right:auto}
  .cta-photo p{margin-left:auto;margin-right:auto}
}
@media(max-width:600px){
  .svc-bento{grid-template-columns:1fr;grid-auto-rows:200px}
  .svc-tile.big{grid-row:span 1}
  .proc-cards{grid-template-columns:1fr}
  .trust-count .wrap{grid-template-columns:1fr;gap:26px}
  .trust-count .c{border-right:none;padding-bottom:6px}
  .cta-card .est-form .row{grid-template-columns:1fr}
  .cta-bar-form .est-form{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr;gap:0}
  .cta-phone .big-phone{font-size:40px}
  /* R4 TAP FLOOR (phone-prominence, Alex 2026-07-26): the shared footer's "Get in touch" tel link is an
     unclassed inline [a] and measured 20px tall at 390px — below the 44px floor. Scoped to modern-pro's
     own sheet rather than parts/footer.php on purpose: the shared footer renders for all twelve families,
     and a fleet-wide chrome change tonight would drift every render-baseline at once for a fix that only
     this family's review needs. Promote it to the shared footer once the other families re-baseline. */
  .foot-col a[href^="tel:"],
  .cmeth-val a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
  /* TAP-TARGET FLOOR (phone-prominence R4, Alex 2026-07-26 phone ruling): any call target must clear 44px
     at 390px. Three pages shipped a 40px one because the number renders as a bare inline link rather than
     a .btn, so none of the button padding applied to it. Floor it wherever a tel: link lands. */
  a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
  .btn[href^="tel:"],.cta-phone a[href^="tel:"],.fin-bleed a[href^="tel:"]{min-height:44px}
}
/* MOBILE SCOPE (Alex mobile pass 2026-07-29 — M6/M8/M20/M21, one cause). These rules had NO media query,
   and :has() outranks the plain-class mobile overrides further up, so at 390px they were still forcing
   THREE COLUMNS: .ntile at 102px with "$460k" needing 112px, .sign-grid cells at 52px, and the contact
   page scrolling 112px sideways with the email address ending at x=502 on a 390px screen. Alex found all
   four by eye. The orphan-row problem they solve only exists on DESKTOP, where there is a row to orphan. */
@media(min-width:961px){
/* ── GRID FIT (O16 + O24 + J2, Alex twice: "if there's three boxes they need to be centered better…
   THAT NEEDS A CHECK" and "these boxes need to be centered") ────────────────────────────────────────
   Every card grid declared a FIXED column count, so three cards in a four-column grid left an orphan
   hole on the right and four cards in a three-column grid stranded one underneath. Each grid keeps its
   intended MAXIMUM; these rules drop the column count to the actual child count when there are fewer,
   so the row fills evenly and reads centred at any count. One mechanism, every grid in the family —
   which is what makes it a fix rather than a nudge to one section. */
.svc-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.svc-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.proc-steps:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.proc-steps:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.proc-steps:has(> * + * + *):not(:has(> * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center}
.sign-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.sign-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.sign-grid:has(> * + * + *):not(:has(> * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center}
.gallery-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.gallery-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.cert-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.cert-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.cert-grid:has(> * + * + *):not(:has(> * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center}
.osvc-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.osvc-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.feat-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.feat-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.feat-grid:has(> * + * + *):not(:has(> * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center}
.mat-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.mat-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.rel-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.rel-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.cmeth-row:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.cmeth-row:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.cmeth-row:has(> * + * + *):not(:has(> * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center}
.ntiles-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.ntiles-grid:has(> * + *):not(:has(> * + * + *)){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
.ntiles-grid:has(> * + * + *):not(:has(> * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center}
.tcards-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
.finsrc-grid:has(> *):not(:has(> * + *)){grid-template-columns:repeat(1,minmax(0,1fr));justify-content:center}
/* the same grids never stretch a lone card to full width — it reads as a banner, not a card */
.svc-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.proc-steps:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.sign-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.gallery-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.cert-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.osvc-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.feat-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.mat-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.rel-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.cmeth-row:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.ntiles-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.tcards-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
.finsrc-grid:has(> *:only-child){max-width:420px;margin-left:auto;margin-right:auto}
/* EVEN-DIVISION (the second half of O16). Fitting the column count to the child count solves 3-in-a-4,
   but 6 cards in a 4-column grid still strands TWO on a second row - the same orphan shape one step
   along. Where a count divides evenly into fewer columns, use those instead: 6 reads far better as two
   rows of three than as four-plus-two. */
.proc-steps:has(> * + * + * + * + * + *):not(:has(> * + * + * + * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr))}
.sign-grid:has(> * + * + * + * + * + *):not(:has(> * + * + * + * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr))}
.cert-grid:has(> * + * + * + * + * + *):not(:has(> * + * + * + * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr))}
.feat-grid:has(> * + * + * + * + * + *):not(:has(> * + * + * + * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr))}
.cmeth-row:has(> * + * + * + * + * + *):not(:has(> * + * + * + * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr))}
.ntiles-grid:has(> * + * + * + * + * + *):not(:has(> * + * + * + * + * + * + *)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Q7 (Alex asked my opinion, 2026-07-29): "the contact page kinda looks weird where the map section goes
   straight into the CTA at the bottom - they're both that gray color. I wonder if the CTA should be a
   different color in general, like that bluish color. What are your thoughts?"
   My view: yes, and everywhere, not only on contact. The closing CTA is the last thing a roof-seeker reads
   and it was the WEAKEST band on the page. Pine also restores the alternation band-rhythm expects, which is
   why the contact page in particular ended flat. Marked 'dark' in blocks-modern-pro.php so the gate agrees. */
.cta-phone{background:var(--pine);color:#fff}
.cta-phone .eyebrow{color:rgba(255,255,255,.72)}
.cta-phone .big-phone{color:#fff}
.cta-phone .big-phone:hover{color:var(--cream)}
.cta-phone h2{color:#fff}
.cta-phone p{color:rgba(255,255,255,.86)}
/* IN-PROSE LINK on the dark band (operator red flag 2026-08-11, /spread-the-cost/: "that weird
   gap between have your roof for blank and itemized the job for no cost"). There was no gap — the
   link text was INVISIBLE. This dark block inverts every other child (eyebrow, big-phone, h2, p,
   hours, slogan, and the button on the line below with its own note) but never covered `p a`, so a
   mid-sentence link fell back to the site default var(--pine) — the EXACT value of this band's
   background. MEASURED on the real page before the fix: color rgb(26,102,112) on background
   rgb(26,102,112), contrast 1.0:1, at 1440 and at 390. A reader sees a hole in the sentence, which
   is precisely what he reported. Same lesson as the button's note one line down: on an inverted
   band, EVERY ink-bearing descendant inverts or it disappears. Underlined because colour alone is
   not a link affordance on a coloured band.
   ⚠ SPECIFICITY, measured via CDP getMatchedStylesForNode rather than guessed: the family's global
   in-prose rule is `main p a:not([class])` -> var(--pine), specificity (0,1,3). A plain
   `.cta-phone p a` override is (0,1,2) and SILENTLY LOSES — I wrote that first and the pixel did
   not move. The `:not([class])` form below matches the same unclassed in-prose anchors at (0,2,3)
   and wins. Any other family fixing this same dark-band defect must clear the same bar. */
.cta-phone p a:not([class]),.cta-phone p a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cta-phone p a:not([class]):hover,.cta-phone p a:hover{color:var(--cream)}
.cta-phone .hours{color:rgba(255,255,255,.62)}
.cta-phone .hours b{color:rgba(255,255,255,.88)}
.cta-phone .mp-slogan{color:rgba(255,255,255,.62)}
.cta-phone .mp-slogan::before{background:rgba(255,255,255,.45)}
/* the button has to invert too - a pine button on a pine band is a rectangle of nothing */
.cta-phone .btn-pine,.cta-phone .btn-primary{background:#fff;color:var(--pine)}
.cta-phone .btn-pine:hover,.cta-phone .btn-primary:hover{background:var(--cream);color:var(--pine-dk);box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
.cta-phone .btn-out,.cta-phone .btn-white{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.cta-phone .btn-out:hover,.cta-phone .btn-white:hover{background:rgba(255,255,255,.12)}

/* M4/M19 (Alex mobile pass 2026-07-29): the mobile nav JS preventDefaults a .nav-top that has a submenu,
   and modern-pro deliberately carries no "All ..." row (nav-no-drop-all, ratified 2026-07-22), so on a
   phone /services/ and /service-areas/ were UNREACHABLE. This row exists only below the accordion
   breakpoint, so the ratified desktop shape is unchanged. */
.nav-drop .nav-drop-hub{display:none}
@media(max-width:880px){
  .nav-drop .nav-drop-hub{display:block;font-weight:700;color:var(--pine)}
}

/* M1 (Alex mobile pass): the top strip carries only the phone number on a phone, and the sticky bottom
   bar already gives Call + Get a Free Estimate. Desktop keeps it (it also carries the serving-area line). */
@media(max-width:880px){.strip{display:none}}
/* M7: .btn is inline-flex with no justify-content, which never shows until a button goes full width on a
   phone and the label sits hard against the left edge. Centre it wherever the button is full width. */
@media(max-width:880px){
  .btn{justify-content:center;text-align:center}
}

/* M11/M13/M14 (Alex mobile pass): .ctab-table measured 1077px inside a 390px viewport — nearly three
   screens of sideways dragging to pair a price with its material. Below the nav breakpoint the table
   becomes a stack of cards: row header as the title, one cell per line, and each cell keeps its column
   header as a label so the figure is still readable as a per-square price once the header row is gone.
   Covers the cost page, the shingle guide and the warranties page in one rule. Desktop unchanged. */
@media(max-width:880px){
  .ctab-table,.ctab-table tbody,.ctab-table tr,.ctab-table td{display:block;width:auto}
  .ctab-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ctab-table tr{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 12px}
  .ctab-table tr.hl{border-color:var(--pine);box-shadow:0 0 0 1px var(--pine)}
  .ctab-table th[scope=row]{display:block;font:800 16.5px/1.3 var(--font-display);color:var(--ink);padding:0 0 8px;border:0;text-align:left}
  /* the desktop table sets white-space:nowrap to keep columns on one line; once the rows become cards
     that same rule clips the description at the card edge (measured: 737px of text in a 310px cell). */
  .ctab-table td{padding:4px 0;border:0;white-space:normal;font:500 14.5px/1.6 var(--font-body);color:var(--muted)}
  .ctab-table td[data-label]:not([data-label=""])::before{content:attr(data-label) ": ";font-weight:700;color:var(--ink)}
}

/* The storm-stat row squeezed three figures into 114px columns on a phone ("96mph / peak storm winds"
   wrapping mid-label). Two-up reads properly and the third centres under them. */
@media(max-width:600px){
  .storm-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .storm-stats .ss:last-child:nth-child(odd){grid-column:1 / -1}
}

/* M2 (Alex ruled 2026-07-29): on a phone the hero runs H1 -> sub -> FORM -> call, which is the order he
   asked for. Today the big call button sits between the sub and the form and pushes the form ~540px down
   an 844px screen, so the one thing the hero exists to show is below the fold. The copy column and the
   form are separate containers, so `display:contents` lifts the copy children into the same flex context
   and lets all six be ordered together. The sticky bar still carries Call + Get a Free Estimate, so the
   call is never further than a thumb away even while it sits under the form. */
@media(max-width:960px){
  .hero-bleed .inner{display:flex;flex-direction:column;gap:0}
  .hero-bleed .copy{display:contents}
  .hero-bleed .copy h1{order:1}
  .hero-bleed .copy .hero-sub{order:2;margin-top:18px}
  .hero-bleed .hero-right{order:3;margin-top:26px}
  .hero-bleed .copy .cta-row-solo{order:4;margin-top:26px}
  .hero-bleed .copy .hero-lead-under{order:5;margin-top:18px}
  .hero-bleed .copy .mp-slogan{order:6;margin-top:18px}
  /* MP MSG-c54e46/d0e81c (the R8-3 residual, mechanism from their live DOM): this enumeration was
     tuned on little-elm, which authors no emergency_line — so .hero-emg was never listed, kept
     order:0, and floated ABOVE the H1 on every site that authors the key (5 sites, mckinney LIVE).
     An unlisted flex item does not stay put, it sorts first. Last matches source emission and the
     desktop layout (the line renders under the CTA by design). Their class note stands: a container
     assigning order to children assigns one to ALL of them. */
  .hero-bleed .copy .hero-emg{order:7;margin-top:18px}
}

/* ── ALEX PRE-OVERNIGHT POLISH (2026-07-29) ──────────────────────────────────────────────────────── */
/* S1 — SUPERSEDED 2026-08-01 by Alex, direct in-session, MOBILE ONLY (desktop reserve above stands; he was
   explicit: "The desktop is perfect as it is now… it would just be for mobile just because how it's laid
   out"). The 07-29 rule reserved the tall state at phone width so the hero would hold still on Next. It did
   exactly that — and the cost only shows at REST, which is where he was looking tonight: the reserve is far
   taller than step 1 needs, so the band ended in dead space under the call button. MEASURED, floor vs
   floor-neutralised:
        390px   pinned 1200 · natural step1 936.8 → step2 1131.8 · dead space under the CTA 315.2 → 52
        768px   pinned 1200 · natural step1 813.9 → step2 1037.5 · dead space           438.1 → 52
        960px   pinned 1200 · natural step1 813.9 → step2 1022.1 · dead space           438.1 → 52
   On mobile the form is STACKED INSIDE the hero, so the band must contain it and there are only two
   possible behaviours: hold still and pay the dead space on every visit, or sit snug and grow for the
   people who actually tap Next. He chose the second and I agree — the first cost is paid by everyone on
   arrival, the second only by someone whose eye is already on the card that is growing. The 52px that
   remains is the band's own bottom padding, not dead space.
   DELIBERATELY NOT REPLACED WITH A SMALLER FLOOR: any floor here re-creates the same defect the moment the
   step-2 contents change, which is precisely how the DESKTOP floor above went stale (it was measured
   correctly, then step 2 grew a Turnstile and nobody re-measured). Content-sized cannot go stale.
   RECORDED AS A SUPERSEDE, NOT A SILENT FLIP: a future session that sees the hero stretch on Next at phone
   width is looking at INTENDED behaviour and must not "fix" it back without a new operator ruling. */
@media(max-width:960px){
  /* S2: reading order under the form is promise -> call, with real space between the form and the call. */
  .hero-bleed .copy .hero-lead-under{order:4;text-align:center;margin:22px auto 0;max-width:34ch}
  .hero-bleed .copy .cta-row-solo{order:5;justify-content:center;margin-top:24px}
  .hero-bleed .copy .mp-slogan{order:6;justify-content:center;margin-top:20px}
  /* S4 (Alex, 2026-08-01, about page, MOBILE ONLY — "let's move the picture down to the bottom of the
     what you should expect so it's not, like, back to back pictures"). MEASURED at 390px: the .thesis
     silhouette ends at y=1733 and .why's photo opens at y=1846 — 113px apart, so the two images stack
     nose to tail with only a section boundary between them. It is a MOBILE artifact and only a mobile
     artifact: .why .layout is a 2-column grid on desktop (528+528), where the photo sits BESIDE its text
     and never reads as a second picture in a row; it collapses to one column at this breakpoint and the
     photo, being first in source order, lands directly under the silhouette. So the fix belongs here and
     not in the markup — moving it in source order would drag the desktop layout he just called perfect.
     The photo is a grid item, so order alone moves it to the foot of the section. */
  .why .layout > .ph{order:2}
}
/* S3: four trust labels cannot share a 390px row legibly, and he asked for ONE row (explicitly fine with
   cutting to two or three). The last two hide below the nav breakpoint; all four still render above it. */
@media(max-width:880px){
  .trust .wrap{grid-template-columns:1fr 1fr;gap:0 14px}
  /* :nth-of-type counted the DIVIDERS too (item, divider, item, divider...), so it hid 3 of 4.
     The sibling combinator counts .trust-item only, regardless of what sits between them. */
  .trust-item ~ .trust-item ~ .trust-item{display:none}
}
/* S4: three short figures fit one row once the label stacks under the number instead of beside it. */
@media(max-width:600px){
  .storm-stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .storm-stats .ss{text-align:center}
  .storm-stats .ss .n{font-size:clamp(20px,6.4vw,28px);display:block}
  .storm-stats .ss .l{font-size:11px;line-height:1.3;display:block}
  .storm-stats .ss:last-child:nth-child(odd){grid-column:auto}
}
/* S5: the closing CTA in the dark How-it-works band rendered as an outline button — a thin label on a
   near-black surface. Solid plate, pine text, same as the closing band treatment. */
.proc .mp-seccta .btn-out,.proc .btn-out{background:#fff;border-color:#fff;color:var(--pine)}
.proc .mp-seccta .btn-out:hover,.proc .btn-out:hover{background:var(--cream);color:var(--pine-dk)}

/* R8-4a FINAL FORM (MP census MSG-e5c7f1: 16px on 12/12 pages — the visible consent is ALWAYS the
   bottom CTA, and 54 section-scoped descendant p rules can each replay the shorthand trap). MP's fix
   shape adopted verbatim: p.-prefixed (0,1,1) TIES every section's descendant-p rule and wins by ORDER
   from the sheet's last line — one rule, nothing to enumerate when the next CTA variant is added. The
   (0,2,0) CTA-family pairs above stay as defense in depth. Row 8 closes ONLY on MP's measured
   cross-page box census, never on this rule landing (it has landed three times before this one). */
/* MP MSG-e7dcfd specificity arithmetic (correcting the reviewer's "nothing to enumerate"): order only
   decides a TIE — .emg .emg-copy p and .fin .copy p are (0,2,1) and BEAT this (0,1,1) rule outright,
   so two of the four latent sections were still open. This row has lost to a section selector THREE
   times, each fix a specificity escalation the next section rule can out-rank. !important ends the
   arms race: consent type-size is a single-purpose legal-legibility rule and nothing may override it
   by accident. (MP's dedicated-class alternative can't win either — section rules match the p element
   itself regardless of its classes.) */
p.fineprint,p.lf-consent,p.form-consent,p.form-note{font-size:11px!important;line-height:1.4!important;opacity:.85}

:root{--pine:#15514a;--pine-dk:#0e3b35;--pine-lt:#1d6b62;--pine-rgb:21,81,74;--cream:#f3f6f5;--sand:#e0ebe8;--sand-dk:#b9d0cb;--charcoal:#20262b;--char2:#2e3740;--ink:#1a1f23;--muted:#586470;--line:#e2e9e7;--font-display:'Sora',sans-serif;--font-body:'Manrope',sans-serif}
[hidden]{display:none!important}body{background:#fff}section{padding:80px 0}p+p{margin-top:16px}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #258477;outline-offset:4px}::selection{color:#fff;background:var(--pine)}input,textarea{caret-color:var(--pine)}.container{max-width:1200px;margin:auto;padding:0 36px}.topbar .wrap{padding:8px 36px;font-size:12px;display:flex;justify-content:space-between}.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;gap:24px;min-height:88px}.brand{display:flex;gap:10px;align-items:center;max-width:255px;flex:none}.brand>svg{width:40px;height:40px;flex:none}.brand>span{font:800 17px/1.12 var(--font-display);letter-spacing:-.035em}.brand small{display:block;font:600 10px/1.3 var(--font-body);letter-spacing:.03em;color:var(--muted);margin-top:5px}.site-header nav{display:flex;gap:7px;align-items:center;margin-left:auto}.site-header nav>a,.nav-parent>a{font:700 12px/1.2 var(--font-body);padding:10px 4px;color:var(--muted);white-space:nowrap}.nav-group{position:relative}.nav-parent{display:flex;align-items:center}.nav-disclosure{border:0;background:transparent;color:var(--pine);padding:10px 5px;cursor:pointer;min-width:26px;min-height:40px}.nav-panel{position:absolute;top:100%;left:0;width:250px;max-height:70vh;overflow:auto;border:1px solid var(--line);padding:8px;background:#fff;box-shadow:0 18px 36px -20px #173d37;border-radius:10px}.nav-panel a{display:block;font-size:13px;padding:12px;border-radius:6px}.nav-panel a:hover{background:var(--cream);color:var(--pine)}.header-actions{display:flex;align-items:center;gap:12px}.header-phone{font-size:13px;font-weight:800;white-space:nowrap;color:var(--pine)}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:var(--pine);color:#fff;padding:14px 20px;border:0;border-radius:50px;font:700 14px/1.2 var(--font-body);cursor:pointer}.header-cta{font-size:12px;padding:13px 17px;white-space:nowrap}.menu-toggle{display:none}.hero-bleed{padding:0}.hero-bleed .inner{grid-template-columns:1.05fr .95fr;gap:52px;padding:72px 36px;min-height:780px}.hero-bleed .copy{display:block;text-align:left}.hero-bleed h1{font:800 clamp(40px,4.1vw,60px)/1.12 var(--font-display);color:#fff;max-width:13ch;letter-spacing:-.03em}.hero-bleed .copy>p{font-size:19px;line-height:1.6;color:#fff;max-width:38ch}.hero-bleed .copy p.hero-trust{font-size:14px;color:#e0ebe8;margin-top:22px;max-width:39ch}.hero-bleed .cta-row{margin-top:26px;justify-content:flex-start}.hero-bleed .hero-form{padding:28px;background:#fff;border-radius:16px}.hero-form .lead-form h2,.cta-bar-form .lead-form h2{font:800 23px/1.25 var(--font-display);color:var(--ink);margin-bottom:9px}.lead-form{display:flex;flex-direction:column;gap:15px;text-align:left;color:var(--ink)}.lead-form .form-intro{font-size:13px;line-height:1.5;color:var(--muted);margin:0}.lead-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:var(--ink)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lead-form input,.lead-form select,.lead-form textarea{width:100%;min-width:0;font:500 16px/1.35 var(--font-body);color:var(--ink);padding:11px 12px;border:1px solid #b1c6c0;border-radius:8px;background:#fff;min-height:44px}.lead-form input::placeholder,.lead-form textarea::placeholder{color:#63726f}.lead-form .consent{display:flex;flex-direction:row;align-items:flex-start;gap:9px;font-size:11px;line-height:1.55;font-weight:500}.lead-form .consent input{width:18px;height:18px;min-height:18px;flex:none;margin-top:2px;accent-color:var(--pine)}.lead-form .consent a{text-decoration:underline}.honey{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.lead-form .form-status{margin:0;font-size:13px;line-height:1.5}.lead-form .button{min-height:48px}.lead-form .field-error{color:#a22525;font-size:12px}.lead-form [aria-invalid=true]{border-color:#a22525}.trust{padding:20px 0}.trust .wrap{display:flex;justify-content:space-between;gap:20px}.trust p{font-size:13px;font-weight:700;color:#fff;margin:0}.mp-intro .sec-head{max-width:none}.sec-head h2{font-size:clamp(29px,3vw,40px);line-height:1.16;margin:0;letter-spacing:-.025em}.sec-head p{font-size:16px;line-height:1.75;margin-top:18px;font-weight:500}.mp-intro-photo{margin:0}.mp-intro-photo .ph{aspect-ratio:4/3;min-height:320px}.ph.has-photo:before{opacity:.18}.mp-intro.reverse .mp-intro-photo{order:-1}.mp-intro.reverse .wrap{grid-template-columns:.9fr 1.1fr}.svc .sec-head{max-width:740px}.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}.svc-card{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 28px -20px rgba(21,81,74,.22);border:1px solid var(--line)}.svc-card .ph{height:200px;border-radius:0}.svc-info{padding:24px}.svc-info h3{font-size:19px;line-height:1.35;margin:0 0 12px}.svc-info p{font-size:14px;line-height:1.65;color:var(--muted)}.text-link{display:inline-block;margin-top:18px;color:var(--pine);font-weight:800;font-size:13px;text-decoration:underline;text-underline-offset:4px}.collection-actions{margin-top:32px;display:flex;gap:14px}.collection-actions .button{border-radius:8px}.decision-section{background:var(--sand)}.decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:36px}.decision-grid article{border-top:1px solid #91b3a9;padding-top:24px}.decision-grid h3{font-size:22px;line-height:1.35;margin-bottom:15px}.decision-grid p{font-size:15px;line-height:1.75}.decision-grid:has(article:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}.comparison-section{background:var(--cream)}.comparison-table{margin-top:30px;overflow:auto;scrollbar-color:var(--pine) var(--sand)}.comparison-table table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7}.comparison-table th,.comparison-table td{padding:22px 24px;text-align:left;vertical-align:top;border-bottom:1px solid #cbdad5;min-width:170px}.comparison-table thead th{font-size:13px;font-weight:800;color:#fff;background:var(--pine)}.comparison-table tbody th{font-family:var(--font-display);font-weight:700;color:var(--ink);width:25%}.proc-tl{list-style:none;max-width:870px}.proc-tlstep h3{font-size:21px;line-height:1.35;margin-bottom:10px}.proc-tlstep p{font-size:15px;line-height:1.75}.faq{background:#fff}.faq>.wrap{max-width:1000px}.faq .sec-head{max-width:800px}.faq-list{margin-top:30px}.faq-list details{border-bottom:1px solid var(--line);padding:0}.faq-list summary{padding:23px 40px 23px 0;font-size:16px;font-weight:800;cursor:pointer;position:relative;list-style:none}.faq-list summary:after{content:'+';position:absolute;right:5px;color:var(--pine);font-size:23px}.faq-list details[open] summary:after{content:'−'}.faq-list details>div{padding:0 28px 24px 0;font-size:15px;line-height:1.75}.contextual-link{color:var(--pine);font-weight:700;text-decoration:underline;text-underline-offset:3px}.coverage{background:var(--cream)}.coverage-layout{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}.coverage-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.coverage-links a{color:var(--pine);font-weight:800;text-decoration:underline;font-size:14px}.map-frame{overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 16px 30px -22px rgba(21,81,74,.3)}.map-frame iframe{width:100%;height:360px;border:0;display:block}.map-link{display:block;padding:12px 18px;background:#fff;color:var(--pine);font-size:12px;font-weight:800;text-decoration:underline}.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}.contact-options article{background:var(--cream);padding:32px;border-radius:12px}.contact-options h3{font-size:24px;margin-bottom:16px}.contact-options p{font-size:15px;line-height:1.7;margin-bottom:22px}.cta-bar{background:var(--pine);padding:80px 0}.cta-bar .closing-layout{display:grid;grid-template-columns:1fr .95fr;gap:64px;align-items:center}.closing-copy h2{font-size:clamp(32px,3.5vw,45px);line-height:1.16;color:#fff}.closing-copy p{font-size:17px;line-height:1.7;color:#e0ebe8;margin:20px 0 26px}.cta-bar-form{background:#fff;border-radius:16px;padding:30px}.cta-bar-form p{color:var(--muted)}.cta-bar-form .lead-form label{color:var(--ink)}.cta-bar-form .lead-form button{background:var(--pine);color:#fff}.resource-intro{background:#fff}.resource-open{display:grid;grid-template-columns:1.45fr .65fr;gap:48px;align-items:start}.resource-open h2{font-size:32px;line-height:1.2;margin-bottom:22px}.resource-open p{font-size:16px;line-height:1.75}.resource-answer{padding:28px;background:var(--sand);border-radius:12px}.resource-answer h3{font-size:22px;line-height:1.35;margin-bottom:16px}.reading{max-width:860px}.reading-hero{padding:65px 0;background:var(--cream)}.reading-hero h1{font-size:clamp(33px,4vw,52px);line-height:1.16;margin-bottom:23px}.reading-hero p{font-size:17px;line-height:1.75}.reading-section{padding:35px 0}.reading-section h2{font-size:27px;margin-bottom:20px}.reading-section p,.reading-section li{font-size:16px;line-height:1.8}.back-link{display:inline-block;margin-top:22px;font-weight:800;color:var(--pine);text-decoration:underline}.article-date{font-size:12px!important;color:var(--muted)}.planner{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:32px;background:var(--cream);padding:36px;border-radius:16px}.planner label{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;font-size:14px;font-weight:800}.planner select{width:100%;padding:13px;border:1px solid #abc3ba;border-radius:8px;font:500 16px var(--font-body)}.planner-result{padding:28px;background:#fff;border-radius:12px}.planner-result h3{font-size:22px;margin-bottom:18px}.planner output{display:block;font-size:16px;line-height:1.75}.planner-result p{font-size:13px;line-height:1.65;color:var(--muted)}.site-footer{background:var(--cream);padding:58px 0 30px;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:50px}.footer-brand{font:800 22px/1.3 var(--font-display);color:var(--pine)}.footer-grid p{font-size:14px;line-height:1.7;margin-top:12px}.footer-grid h2{font-size:16px;line-height:1.4;margin-bottom:16px}.footer-grid a{display:block;margin:12px 0;font-size:14px}.footer-grid .phone-large{font-size:22px;font-weight:800;color:var(--pine)}.footer-bottom{display:flex;justify-content:space-between;margin-top:36px;border-top:1px solid var(--line);padding-top:22px;font-size:12px;color:var(--muted)}.mobile-actions{display:none}
@media(max-width:1200px){.header-actions .header-cta{display:none}.header-inner{gap:15px}.site-header nav{gap:3px}.brand{max-width:230px}.hero-bleed .inner{gap:36px}.hero-bleed h1{font-size:49px}}
@media(max-width:1000px){.header-inner{min-height:78px;justify-content:space-between}.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;padding:16px 24px;background:#fff;border-bottom:1px solid var(--line);max-height:78vh;overflow:auto}.site-header nav.open{display:flex;align-items:stretch;flex-direction:column}.site-header nav>a,.nav-parent>a{font-size:15px;flex:1;padding:14px 8px}.nav-disclosure{min-width:44px;min-height:44px}.nav-panel{position:static;width:100%;border:0;box-shadow:none;background:var(--cream);margin-bottom:8px}.menu-toggle{display:flex;align-items:center;gap:9px;font:800 14px var(--font-body);color:var(--pine);border:1px solid var(--line);border-radius:8px;padding:12px;background:#fff}.header-actions{margin-left:auto}.site-header .header-phone{display:none}.brand{max-width:245px}.hero-bleed .inner{display:grid;grid-template-columns:1fr;gap:32px;min-height:0;padding:50px 28px}.hero-bleed .copy{display:block!important;text-align:left}.hero-bleed .copy h1{max-width:15ch;font-size:45px}.hero-bleed .hero-right{margin:0;max-width:650px}.hero-bleed .copy p{max-width:52ch}.hero-bleed .cta-row{justify-content:flex-start!important}.hero-bleed .hero-form{padding:26px}.svc-grid{grid-template-columns:repeat(2,1fr)}.decision-grid{gap:24px}.mp-intro.reverse .wrap,.coverage-layout,.cta-bar .closing-layout,.resource-open{grid-template-columns:1fr;gap:34px}.mp-intro.reverse .mp-intro-photo{order:0}.cta-bar .closing-layout{display:grid}.resource-answer{max-width:620px}.cta-bar-form{max-width:650px}.decision-grid h3{font-size:20px}.footer-grid{gap:30px}.planner{gap:24px;padding:28px}}
@media(max-width:600px){section{padding:52px 0}.wrap,.container{padding-left:22px;padding-right:22px}.topbar{display:none}.header-inner{padding:0 18px;min-height:75px;gap:8px}.brand{max-width:235px}.brand>span{font-size:16px}.brand>svg{width:35px;height:35px}.brand small{font-size:9px}.header-actions{display:none}.menu-toggle{padding:10px;font-size:12px}.hero-bleed .inner{display:grid!important;gap:26px;padding:43px 22px 48px}.hero-bleed .copy{display:block!important}.hero-bleed h1,.hero-bleed .copy h1{font-size:38px;max-width:14ch}.hero-bleed .copy>p{font-size:17px;margin-top:19px}.hero-bleed .copy .hero-trust{font-size:13px;margin-top:20px}.hero-bleed .copy .cta-row{margin-top:23px!important}.hero-bleed .hero-right{margin-top:0!important}.hero-bleed .hero-form{padding:23px}.hero-form .lead-form h2,.cta-bar-form .lead-form h2{font-size:21px}.lead-form{gap:15px}.form-grid{grid-template-columns:1fr}.lead-form .consent{font-size:11px}.trust .wrap{display:flex;flex-direction:column;gap:12px}.trust p{font-size:12px}.trust{padding:22px 0}.mp-intro.has-photo-col .wrap{gap:27px}.sec-head h2{font-size:29px}.sec-head p{font-size:15px;line-height:1.8}.mp-intro-photo .ph{min-height:240px;aspect-ratio:4/3}.svc-grid{grid-template-columns:1fr;gap:22px;margin-top:27px}.svc-card .ph{height:215px}.svc-info{padding:23px}.svc-info h3{font-size:21px}.decision-grid,.decision-grid:has(article:nth-child(2):last-child){grid-template-columns:1fr;gap:27px;margin-top:29px}.decision-grid article{padding-top:20px}.decision-grid h3{font-size:22px}.comparison-table table,.comparison-table tbody,.comparison-table tr,.comparison-table td,.comparison-table th{display:block;min-width:0;width:100%}.comparison-table thead{display:none}.comparison-table tr{border-bottom:1px solid #b6cbc3;padding:19px 0}.comparison-table tbody th{width:100%;padding:0 0 12px;font-size:19px;border:0}.comparison-table td{border:0;padding:7px 0;font-size:14px}.comparison-table td+td{border-top:1px solid #d5e0dc;margin-top:10px;padding-top:14px}.proc-tlstep h3{font-size:20px}.faq-list summary{font-size:15px;line-height:1.55;padding:22px 35px 22px 0}.faq-list details>div{padding-right:0;font-size:14px}.map-frame iframe{height:315px}.contact-options{grid-template-columns:1fr;gap:20px}.contact-options article{padding:26px}.cta-bar{padding:54px 0}.cta-bar .closing-layout{gap:30px}.closing-copy h2{font-size:31px}.closing-copy p{font-size:16px}.cta-bar-form{padding:23px}.resource-open h2{font-size:29px}.resource-open p{font-size:15px}.resource-answer{padding:24px}.reading-hero{padding:45px 0}.reading-hero h1{font-size:33px}.reading-section h2{font-size:26px}.reading-section p,.reading-section li{font-size:15px}.footer-grid{grid-template-columns:1fr;gap:28px}.footer-bottom{display:block;line-height:1.6}.footer-bottom p+p{margin-top:10px}.site-footer{padding-bottom:95px}.mobile-actions{position:fixed;bottom:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;background:var(--pine);box-shadow:0 -6px 20px -14px #0e3b35}.mobile-actions a{padding:17px 8px;color:#fff;font-size:12px;font-weight:800;text-align:center;min-height:52px}.mobile-actions a+a{background:#fff;color:var(--pine);border:1px solid var(--pine)}.planner{grid-template-columns:1fr;padding:24px;gap:24px}.planner-result{padding:23px}.planner output{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.hero-form .lead-form label,.cta-card .lead-form label{text-transform:none;letter-spacing:normal}.lead-form{scroll-margin-top:152px}.cta-final.cta-photo{padding:0}.cta-photo .cta-card{background:#fff;border-radius:16px;padding:30px}.cta-photo .cta-card .lead-form h2{font:800 23px/1.25 var(--font-display);color:var(--ink);max-width:none;margin:0 0 9px}.cta-photo .cta-card .lead-form p{color:var(--muted);font-size:13px;max-width:none;margin:0}.cta-photo .cta-card .lead-form label{color:var(--ink)}.cta-photo .cta-card .lead-form .consent{color:var(--ink)}.cta-photo .cta-card .lead-form button{color:#fff;background:var(--pine)}.cta-call{margin-top:26px}.footer-mark{display:block;width:46px;margin-bottom:16px}.footer-mark svg{width:46px;height:46px}.article-photo{margin:40px auto 15px}.article-photo .ph{aspect-ratio:16/9;border-radius:12px}
@media(max-width:600px){.lead-form{scroll-margin-top:126px}.form-grid{grid-template-columns:1fr 1fr}.cta-photo .wrap{padding:54px 22px;gap:30px}.cta-photo .cta-photo-copy{text-align:left}.cta-photo h2{font-size:31px;line-height:1.16}.cta-photo .cta-card{padding:23px}.cta-photo .cta-card .lead-form h2{font-size:21px;text-align:left}.comparison-table td:before{content:attr(data-label);display:block;font-size:12px;font-weight:800;color:var(--pine);margin-bottom:5px}}

.cta-photo .cta-photo-copy>p{margin:20px 0 26px}

.site-footer h2{color:var(--ink)}.site-footer a{color:var(--pine)}

header.site-header.nav{display:block;max-width:none;margin:0;padding:14px 0}.reading-hero{position:static;z-index:auto;backdrop-filter:none;-webkit-backdrop-filter:none}@media(max-width:600px){header.site-header.nav{padding:12px 0}}

.hero-bleed .hero-assurances{list-style:none;padding:0;margin:27px 0 0;display:flex;flex-direction:column;gap:13px;max-width:43ch}.hero-bleed .hero-assurances .ht-item{display:flex;align-items:center;gap:12px;font:700 15px/1.5 var(--font-body);color:#fff}.hero-bleed .hero-assurances svg{width:22px;height:22px;flex:none;color:var(--sand-dk)}.hero-bleed .hero-assurances .hero-free-offer{font:750 20px/1.4 var(--font-display);letter-spacing:-.015em}.hero-bleed .hero-free-offer svg{width:26px;height:26px}.hero-bleed .copy .hero-next-step{font:500 14px/1.7 var(--font-body);color:var(--sand);max-width:47ch;margin:25px 0 0;padding-top:19px;border-top:1px solid rgba(255,255,255,.28)}
@media(max-width:600px){.hero-bleed .hero-assurances{margin-top:24px;gap:11px}.hero-bleed .hero-assurances .ht-item{font-size:14px;line-height:1.5}.hero-bleed .hero-assurances .hero-free-offer{font-size:18px}.hero-bleed .copy .hero-next-step{font-size:13px;margin-top:23px;padding-top:17px}}

/* 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;
}