@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("/assets/figtree-latin-variable.woff2") format("woff2")}


:root{--pine:#1D5FD0;--pine-dk:#143F8C;--pine-lt:#E7EEFB;--cream:#F4F7FB;--sand:#EEF3FA;--sand-dk:#E7EEFB;--charcoal:#143F8C;--char2:#1D5FD0;--ink:#1B2430;--muted:#52627A;--line:#DDE6F2;--font-display:'Figtree',sans-serif;--font-body:'Figtree',sans-serif}

/* ============================================================================
   TOKEN ALIASES — map the family's semantic names onto the emitter's palette/
   font slots. Helper (non-palette) tokens are defined here under their own
   names so they can't clash. --ink/--muted/--line pass through from the emitter.
   ============================================================================ */
:root{
  --blue:var(--pine);--blue-dk:var(--pine-dk);--blue-soft:var(--pine-lt);
  --paper:var(--cream);--cool:var(--sand);--cool2:var(--sand-dk);
  /* the dark brand bands use the emitter's charcoal slot (a cobalt in this family) */
  --band:var(--charcoal);--band2:var(--char2);
  --font:var(--font-body);--font-d:var(--font-display);
  --gold:#E8A93B;--good:#1f9d5a;--ink-2:var(--muted);
  --wrap:1180px;
  --sh:0 18px 40px rgba(27,36,48,.12);--sh-sm:0 6px 16px rgba(27,36,48,.08);
}

/* ============================================================================
   BASE — reset, typography, layout, links, eyebrow, photo placeholders, buttons.
   (Consolidated from the lock mock + variants.html; deduped.)
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white,#fff);line-height:1.55;-webkit-font-smoothing:antialiased}
:root{--white:#ffffff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:800;line-height:1.06;letter-spacing:-.02em;color:var(--ink)}
p{line-height:1.6}
.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}

/* eyebrow = gold rule + blue tracked label */
.eyebrow{font:700 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--gold)}
.eyebrow.c,.eyebrow.center{justify-content:center}
.eyebrow.light,.eyebrow.on-dark{color:#fff}
.eyebrow.light::before,.eyebrow.on-dark::before{background:var(--gold)}

/* photo placeholders — soft blue gradient + grid texture + corner label. .ph.real = a real image. */
.ph{position:relative;background:linear-gradient(150deg,#2f6fdc,var(--blue-dk));overflow:hidden;border-radius:14px}
.ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:30px 30px}
.ph::after{content:attr(data-l);position:absolute;left:14px;bottom:12px;font:600 10px/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ph.real{background-size:cover;background-position:center;background-repeat:no-repeat}
.ph.real::before{display:none}.ph.real::after{content:none}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a tinted photo (a dark/brand scrim over a real image) — used by hero v3 art + proof v1 + cta v3 bands */
.ph.tint-dark::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,22,.42),rgba(12,16,22,.74));left:0;bottom:0}
.ph.tint-soft::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,22,0) 35%,rgba(12,16,22,.5));left:0;bottom:0}
.ph.tint-brand::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,63,140,.85),rgba(20,63,140,.4));left:0;bottom:0}
.ph.real.tint-dark::after,.ph.real.tint-soft::after,.ph.real.tint-brand::after{content:""}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 14px/1 var(--font);letter-spacing:.01em;padding:15px 26px;cursor:pointer;border-radius:10px;border:2px solid transparent;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn-blue,.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(27,36,48,.14)}
.btn-blue:hover,.btn-primary:hover{background:var(--blue-dk);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue-dk)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.btn-out-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-out-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-out-blue,.btn-ghost{border-color:var(--blue);color:var(--blue);background:transparent}
.btn-out-blue:hover,.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-lg{padding:17px 30px;font-size:15.5px}

/* gold star row + CSS-shape glyphs (review stars + trust-chip icons; no icon font for these) */
.stars{display:inline-flex;gap:3px}
.star{width:15px;height:15px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star.sm{width:13px;height:13px}
.gl{width:15px;height:15px;position:relative;display:inline-block}
.gl-dollar::before{content:"$";font:800 15px/1 var(--font);color:var(--gold);position:absolute;inset:0;text-align:center}
.gl-doc{border:2px solid var(--gold);border-radius:2px;width:12px;height:15px}
.gl-pin{width:13px;height:13px;background:var(--gold);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.gl-clock{width:14px;height:14px;border:2px solid var(--gold);border-radius:50%;position:relative}
.gl-clock::after{content:"";position:absolute;left:5px;top:2px;width:2px;height:5px;background:var(--gold)}
.gl-phone{width:16px;height:16px;background:var(--blue);clip-path:polygon(20% 0,55% 0,62% 28%,45% 38%,62% 62%,80% 50%,100% 82%,100% 100%,70% 100%,0 30%,0 0)}

/* shared section scaffold + section head */
section{padding:84px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 46px}
.sec-head.left{text-align:left;margin-left:0}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);margin-top:14px;text-wrap:balance}
.sec-head p{color:var(--muted);font-size:17px;margin-top:14px;text-wrap:pretty}

/* trust bullets (hero) */
.trust-bul{display:grid;gap:11px;margin:0 0 26px;list-style:none}
.trust-bul li{display:flex;align-items:flex-start;gap:11px;font:600 15.5px/1.4 var(--font);color:var(--ink)}
.trust-bul .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;margin-top:1px}
.trust-bul .ck::after{content:"";width:6px;height:11px;border:solid var(--blue);border-width:0 2.6px 2.6px 0;transform:rotate(43deg) translateY(-1px)}
.trust-bul b{color:var(--blue-dk)}

/* ============================================================================
   SHARED INLINE LEAD-CARD — the white form card used by every hero + cta.
   The engine emits the real fields via rr_lead_form() INSIDE .lead-card; the
   chrome-mapping block near the end styles those emitted classes (.f/.row/...).
   ============================================================================ */
.lead-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);padding:22px 22px 20px;max-width:480px}
.lead-card .lc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.lead-card .lc-head b{font:800 17px/1.1 var(--font);letter-spacing:-.01em;color:var(--ink)}
.lead-card .lc-head .tag{font:700 11px/1 var(--font);letter-spacing:.04em;color:var(--good);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lead-card .lc-head .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good)}
/* one optional who-shows-up trust line under the caption (config form.who; absent = not rendered) */
.lead-card .lc-who{font:500 12.5px/1.5 var(--font);color:var(--ink-2);margin:-6px 0 13px}

/* ============================================================================
   NAV / HEADER (engine chrome: header.php .strip / header > .nav / .nav-links) —
   styled to the lock mock's white sticky nav. (See chrome-mapping notes above.)
   ============================================================================ */
/* B5 — .rr-staticmap, styled for beacon. blocks.php:747 ships this markup for EVERY family, but beacon's
   sheet had ZERO rules for it (grep: beacon 0, modern-pro 8, craftsman 9). Unstyled, .rr-staticmap-link has
   no positioning, so it renders STATIC and drops BELOW the image and the frame boxes image+link together —
   the keyline-overshoot defect named in the modern-pro carry-forward.
   #0b applies: the ANATOMY (absolute-positioned deep-link over a cover image) is the component's contract,
   the LOOK is beacon's — cobalt link plate with beacon's radius and shadow, gold focus ring, none of
   craftsman's uppercase slab or its grayscale/contrast filter. */
.rr-staticmap{position:relative;height:100%;min-height:320px;overflow:hidden;border-radius:14px}
.rr-staticmap-img{width:100%;height:100%;min-height:320px;object-fit:cover;display:block}
.rr-staticmap-ph{position:absolute;inset:0;background:linear-gradient(180deg,var(--cool),var(--cool2))}
.rr-staticmap-link{position:absolute;left:14px;bottom:14px;z-index:5;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font:700 13px/1 var(--font);color:#fff;background:var(--blue);border-radius:10px;text-decoration:none;box-shadow:0 2px 10px rgba(16,42,84,.28);transition:background .15s}
.rr-staticmap-link:hover{background:var(--blue-dk)}
.rr-staticmap-link:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.bn-cov .rr-staticmap,.bn-cov .rr-staticmap-img{min-height:0;height:100%}

/* B4 / F151 — the About story band's pinned crew-action silhouette. Two columns at desktop so the figure
   sits beside the story rather than interrupting it; stacks under the prose at phone widths. */
.bn-overview.story.has-figure .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.bn-overview.story.has-figure .head{grid-column:1/-1}
.bn-story-fig{border-radius:14px;overflow:hidden;min-height:300px}
.bn-story-fig .ph{width:100%;height:100%;min-height:300px}
@media (max-width:920px){
  .bn-overview.story.has-figure .wrap{grid-template-columns:1fr;gap:26px}
  .bn-story-fig{min-height:220px}
  .bn-story-fig .ph{min-height:220px}
}

/* B10 / F142 R4 — 44px TAP-TARGET FLOOR on every beacon call target at phone widths.
   MEASURED, not assumed: with a live number, phone-prominence found beacon's call targets at 21px (the
   FOOTER number, on every page), and 24 / 19 / 23px on the contact page (methods card, hours band, CTA
   plate) against the 44px floor. The carry-forward warned the miss is the FOOTER number rather than the
   nav plate, and that is exactly where it was — invisible until a phone was live, which is why this was
   probed with a temporary number rather than left as "looks fine".
   Scoped to beacon's own sheet, applied at the width the gate measures (390px). The banner's own plate
   already carries its own min-height, so this only lifts the ones that were short. */
@media (max-width:560px){
  a[href^="tel:"]{min-height:44px;display:inline-flex;align-items:center;gap:6px}
  .bn-hours .tbl .r a[href^="tel:"],
  .bn-contact a[href^="tel:"]{padding:4px 0}
}

/* bn-topbar — beacon's OWN nav banner (F140/nav-fit, family pass 2026-07-29). Beacon's centred strip
   anatomy + its gold accent rule, NOT another family's left/right split. The gold hairline under the band
   is the same accent beacon uses on its eyebrows, so the banner reads as part of this family's system.
   The call plate clears the 44px tap floor (F142 R4) at every width, including TRUE 390px, where the row
   wraps to two lines rather than crushing the number. */
.bn-topbar{background:var(--band);border-bottom:2px solid var(--gold);color:#dfe7f5;font:600 12.5px/1.35 var(--font)}
.bn-topbar .wrap{display:flex;align-items:center;justify-content:center;gap:6px 18px;flex-wrap:wrap;padding:8px 28px;text-align:center;letter-spacing:.01em;max-width:var(--wrap);margin:0 auto}
.bn-topbar .bn-tb-line{color:#dfe7f5}
.bn-topbar .bn-tb-call{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 12px;margin:-4px 0;color:#fff;text-decoration:none;border-radius:8px;transition:background .15s}
.bn-topbar .bn-tb-call::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;margin-right:2px}
.bn-topbar .bn-tb-call b{font-weight:800;font-size:14px;color:#fff;white-space:nowrap}
.bn-topbar .bn-tb-call:hover,.bn-topbar .bn-tb-call:focus-visible{background:rgba(255,255,255,.12)}
.bn-topbar .bn-tb-call:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:560px){
  .bn-topbar .wrap{gap:2px 12px;padding:6px 16px}
  .bn-topbar .bn-tb-line{font-size:12px;line-height:1.4}
}
.strip{background:var(--band);color:#dfe7f5;font:600 12.5px/1 var(--font)}
.strip .wrap{display:flex;align-items:center;justify-content:center;gap:8px 16px;padding:9px 28px;text-align:center;flex-wrap:wrap;letter-spacing:.01em}
.strip .strip-greet,.strip .strip-lead,.strip .strip-where{display:inline-flex;align-items:center;gap:8px;color:#dfe7f5}
.strip .strip-lead::before,.strip .strip-where::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.strip .strip-call,.strip b{font-weight:800;color:#fff}
.strip a{color:#fff}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--wrap);margin:0 auto;padding:14px 28px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.bl-name{font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.bl-tag{font-family:var(--font);font-weight:700;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:24px;font:600 15px/1 var(--font);margin-left:auto}
.nav-links>a{color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent;transition:border-color .15s,color .15s}
.nav-links>a:hover{color:var(--blue);border-color:var(--blue)}
/* nav dropdowns (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(--ink-2);font-weight:600;font-size:15px;cursor:pointer;background:none;border:none;padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
.nav-top:hover{color:var(--blue);border-color:var(--blue)}
.nav-top:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.nav-caret{transition:transform .18s;opacity:.7}
.nav-drop{position:absolute;top:100%;left:0;min-width:248px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);border-radius:12px;padding:9px;margin-top:8px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;transform:translateY(8px);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:translateY(0)}
}
.nav-drop::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
.nav-drop a{display:block;padding:10px 13px;font-size:14.5px;font-weight:600;color:var(--ink);white-space:normal;line-height:1.35;border-radius:8px;transition:.12s}
.nav-drop a:hover{background:var(--cool);color:var(--blue)}
.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-d);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font:800 15px/1 var(--font);letter-spacing:.01em;color:var(--blue-dk);background:var(--blue-soft);border:2px solid transparent;border-radius:10px;padding:10px 16px;transition:.16s}
.nav-phone:hover{background:var(--blue);color:#fff}
.nav-phone:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* NAV BUTTON HEIGHT (operator, reported twice 2026-07-31): .nav-phone rendered ~39px beside the ~48px
   estimate .btn — two uneven buttons in one row. One shared height; inline-flex centers both. */
.nav-cta .btn,.nav-cta .nav-phone{height:41px;padding-top:0;padding-bottom:0}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px}
.nav-toggle:hover{color:var(--blue)}
.nav-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* logo lockups (shared header.php markup) */
.brandlock{display:inline-flex;align-items:center;line-height:1;text-decoration:none}
.bl-img{height:44px;width:auto;display:block}
.bl-stack{display:inline-flex;flex-direction:column;gap:4px}
.bl-wm-italic .bl-name{font-style:italic;font-size:21px}
.bl-wm-sans .bl-name{font-size:22px}
.bl-wm-caps .bl-name{letter-spacing:-.01em;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:.2em;margin-top:3px}
.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:.22em;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:.22em}

/* ============================================================================
   HERO (lock mock + variants v1/v3/v4). Lead form is GUARANTEED in every one.
   ============================================================================ */
.bn-hero{position:relative}
.bn-hero h1 .ci{color:var(--blue)}
/* OPERATOR-PUNCH grapevine (H1 two-row, his design pass): the H1 breaks BEFORE the city — the
 * keyword rides row 1, "<City>, ST" row 2.
 * The break is a ::before newline, NOT display:block on the span. .ci wraps the CITY ONLY and the
 * ", ST" is a trailing text node OUTSIDE it, so making the span a block stranded the state on a row
 * of its own — measured 4 rows on the home H1, 3-4 across the v3 set. That is the orphan this rule
 * was written to prevent, and it was inflating the hero Alex twice called too tall. Breaking before
 * an INLINE span keeps "<City>, ST" together on row 2, which is what the row actually asked for.
 *
 * STAYS v3-SCOPED, AND THAT IS A MEASURED RESULT, NOT AN OVERSIGHT (2026-08-01). The reviewer ruled
 * this fix should promote to family scope for the cohort (lancaster/prosper/ennis all draw hero v4 by
 * the deterministic deal, so a v3-only rule leaves an operator ruling unapplied). I promoted it,
 * rendered v4 at 1440x900, and MEASURED A REGRESSION — the rule makes v4 WORSE:
 *     page                                 v4 before   v4 with the promoted rule
 *     /roof-insurance-claims-grapevine/        3 rows            4 rows
 *     /contact/                                2 rows            3 rows
 * Reverted on that evidence. The mechanism: v3 pairs this break with `max-width:31ch` (:320), which
 * shapes the line so the keyword FILLS row 1 and the city starts row 2 — the break replaces a wrap
 * that was going to happen anyway. v4 has no width cap and a 54px face in a 592px column, so the
 * forced break ADDS a row instead of relocating one. Worse, the rule assumes the city sits at the END
 * of the H1; on v4 pages like "About the Grapevine Roofers Behind Every Estimate" the city is
 * mid-phrase, so breaking before it is wrong on its own terms.
 * THE LESSON, and it is the reviewer's own warning proven: promote the OUTCOME, never the selector.
 * v4's route to the same outcome is a width/balance constraint tuned to its own face, not this rule.
 * Tracked as a named open item — a v4 H1 that runs 3 rows is disclosed, not silently "promoted". */
.bn-hero.bn-v3 h1 .ci{display:inline}
.bn-hero.bn-v3 h1 .ci::before{content:"\A";white-space:pre}
.bn-hero .lead{font-size:18.5px;color:var(--ink-2);max-width:46ch;margin:18px 0 22px;line-height:1.55}
.bn-hero .lead b{color:var(--ink);font-weight:700}

/* first-screen emergency line (config hero.emergency_line; absent key = not rendered). ONE flat
   urgent row, whole row = tel: link — deliberately NOT a badge/pill/strip: family glyph + plain
   sentence, phone bolded + underlined so the tap target is obvious. Sits above the eyebrow; on
   mobile v1 (.art order:-1) it lands directly under the hero photo, inside the first 390px screen. */
.bn-urgent{display:flex;align-items:flex-start;gap:9px;margin:0 0 18px;font:600 15px/1.45 var(--font);color:var(--ink);max-width:52ch}
.bn-urgent .gl-phone{flex:none;margin-top:3px}
.bn-urgent .tx b{color:var(--blue-dk);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;white-space:nowrap}
.bn-urgent:hover .tx b{color:var(--blue)}
.bn-hero.bn-v4 .bn-urgent{color:#fff}
.bn-hero.bn-v4 .bn-urgent .tx b{color:#fff;text-decoration-color:var(--gold)}
.bn-hero.bn-v4 .bn-urgent .gl-phone{background:var(--gold)}
/* V1 — split: copy + trust bullets + inline form left, roof photo + review chip right (= the lock mock) */
.bn-hero.bn-v1{background:linear-gradient(180deg,var(--paper),var(--white));padding:54px 0 64px;overflow:hidden}
.bn-hero.bn-v1 .grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.bn-hero.bn-v1 h1{font-size:clamp(34px,4.6vw,55px);margin:16px 0 0;letter-spacing:-.03em}
.bn-hero.bn-v1 .art{position:relative}
.bn-hero.bn-v1 .art .ph{aspect-ratio:4/3.4;min-height:330px;box-shadow:var(--sh)}
.bn-hero .chip{position:absolute;left:-18px;bottom:22px;background:#fff;border-radius:13px;box-shadow:var(--sh);padding:13px 16px;display:flex;align-items:center;gap:12px}
.bn-hero .chip .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--gold),#c98a22);flex:none}
.bn-hero .chip .tx b{font:800 14px/1 var(--font);display:block;color:var(--ink)}
.bn-hero .chip .tx span{font:600 11.5px/1 var(--font);color:var(--muted)}
/* V3 — photo LEFT (tinted) with a floating proof chip, copy + form RIGHT */
.bn-hero.bn-v3{background:#fff;padding:0}
/* HERO HEIGHT (Alex, live review round 3: "the hero is way, way, way too big now… the header needs to be
   like thirty percent smaller, vertically. That should be priority."). 600 -> 420 is the 30% he asked
   for; the copy column's padding comes down with it so the reduction is real and not just a shorter box
   around the same stack. The trust bullets came out of grapevine's config in the same pass — they were
   the tallest block in that column. */
.bn-hero.bn-v3 .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:0;align-items:stretch;min-height:336px}
.bn-hero.bn-v3 .art{position:relative;min-height:340px}
.bn-hero.bn-v3 .art .ph{position:absolute;inset:0;border-radius:0}
.bn-hero.bn-v3 .art .float{position:absolute;right:-26px;top:40px;background:#fff;border-radius:13px;box-shadow:var(--sh);padding:14px 16px;display:flex;align-items:center;gap:11px;z-index:3}
.bn-hero.bn-v3 .art .float .ic{width:40px;height:40px;border-radius:10px;background:var(--blue-soft);display:grid;place-items:center;flex:none}
.bn-hero.bn-v3 .art .float .ic .gl-clock{border-color:var(--blue)}
.bn-hero.bn-v3 .art .float .ic .gl-clock::after{background:var(--blue)}
.bn-hero.bn-v3 .art .float .tx b{font:800 14px/1 var(--font);display:block;color:var(--ink)}
.bn-hero.bn-v3 .art .float .tx span{font:600 11.5px/1 var(--font);color:var(--muted)}
/* HERO, round 4 (Alex: "still too long — another twenty percent shorter, but make the H1 a little
   BIGGER"). Height comes out of the padding and the gaps, not the type: the H1 goes UP while the column
   tightens, which is the only way to get both. */
.bn-hero.bn-v3 .copy{background:linear-gradient(180deg,var(--paper),var(--white));padding:26px 44px 26px 56px;display:flex;flex-direction:column;justify-content:center}
.bn-hero.bn-v3 h1{font-size:clamp(31px,3.9vw,47px);margin:0;max-width:31ch} /* operator round 2: the H1 breaks as two even rows, never one long line or a 3-row orphan */
.bn-hero.bn-v3 .lead{font-size:16px;max-width:44ch;margin:9px 0 13px}
/* FORM: "get rid of the white space in the box on the first page — it looks awkward sitting there
   before they've filled anything in", and "there's white space between step one of two and name that
   can go up". Step 1 is three short fields, so the card was mostly air until step 2 opened. */
.bn-hero.bn-v3 .lead-card .lf-prog{margin-bottom:6px}
.bn-hero.bn-v3 .lead-card form,.bn-hero.bn-v3 .lead-card .est-form{gap:9px}
.bn-hero.bn-v3 .lead-card .lf-step[data-rr-step="1"]{gap:9px}
/* D-25 STEP-RESERVE SLOT (Alex round 7: "the hero should stay the same… the contact form is the one
 * that should grow… centre the shorter form in the white space so it grows evenly up and down").
 * The slot holds the taller step's height (published by the multistep script as --rr-step-reserve), so
 * the HERO never moves; the card inside hugs its content on step 1, sits centred in the reserved
 * whitespace, and grows into it on step 2. Falls back to `auto` before the script runs or if JS is off,
 * which is the plain-form behaviour and never a reserved blank box. */
.bn-hero.bn-v3 .lf-slot{min-height:var(--rr-step-reserve,auto);display:flex;flex-direction:column;justify-content:center}
.bn-hero.bn-v3 .lf-slot .lead-card{height:auto;align-self:stretch}
.bn-hero.bn-v3 .lf-slot .lead-card form.rr-stepped{justify-content:flex-start;min-height:0}
.bn-hero.bn-v3 .lead-card .lf-next{margin-top:10px}
/* FORM: start SMALL and grow only on step 2 (Alex: "make the form thinner — start small, then have it
   expand once they go into step two"), and the CARD sits tighter to the lead so the whole column reads
   shorter. The hero box itself is min-height, so step 2 grows the FORM inside a stable hero rather than
   pushing the section taller — his "I don't want the hero expanding, only the form" ask. */
.bn-hero.bn-v3 .lead-card{padding:16px 18px 15px;max-width:430px}
.bn-hero.bn-v3 .lead-card .lc-head{margin-bottom:10px}
.bn-hero.bn-v3 .lead-card .lc-who{margin-bottom:8px;font-size:13px}
.bn-hero.bn-v3 .lead-card .lf-prog{margin-bottom:10px}
/* V4 — full cobalt brand band (no photo), white copy + trust bullets left, white form card right */
.bn-hero.bn-v4{background:linear-gradient(135deg,var(--blue),var(--blue-dk));position:relative;overflow:hidden}
.bn-hero.bn-v4::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;opacity:.6}
.bn-hero.bn-v4 .grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:62px 0 70px}
.bn-hero.bn-v4 h1{color:#fff;font-size:clamp(32px,4.4vw,54px);margin:14px 0 0}
.bn-hero.bn-v4 h1 .ci{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:7px;text-decoration-thickness:4px}
.bn-hero.bn-v4 .eyebrow{color:#fff}.bn-hero.bn-v4 .eyebrow::before{background:var(--gold)}
.bn-hero.bn-v4 .lead{color:rgba(255,255,255,.9);max-width:46ch}.bn-hero.bn-v4 .lead b{color:#fff}
.bn-hero.bn-v4 .trust-bul li{color:#fff}
.bn-hero.bn-v4 .trust-bul .ck{background:rgba(255,255,255,.16)}
.bn-hero.bn-v4 .trust-bul .ck::after{border-color:#fff}
.bn-hero.bn-v4 .trust-bul b{color:#fff}
.bn-hero.bn-v4 .lead-card{max-width:none}

/* ============================================================================
   SERVICES (variants v1 photo cards / v2 feature photo + list / v3 icon tiles)
   ============================================================================ */
.bn-svc.bn-v1{background:var(--paper)}
.bn-svc.bn-v1 .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* B12 — count-aware columns so the last row never strands (Alex: "6 cards = 3+3, never 4+2"). The renderer
   emits cols-N from the actual service count; these are the only legal fills, and the default above stays
   the family's 4-wide look for counts that divide by 4. */
.bn-svc.bn-v1 .grid.cols-1{grid-template-columns:minmax(0,340px)}
.bn-svc.bn-v1 .grid.cols-2{grid-template-columns:repeat(2,1fr)}
.bn-svc.bn-v1 .grid.cols-3{grid-template-columns:repeat(3,1fr)}
.bn-svc.bn-v1 .grid.cols-4{grid-template-columns:repeat(4,1fr)}
.bn-svc.bn-v3 .grid.cols-1{grid-template-columns:minmax(0,340px)}
.bn-svc.bn-v3 .grid.cols-2{grid-template-columns:repeat(2,1fr)}
.bn-svc.bn-v3 .grid.cols-3{grid-template-columns:repeat(3,1fr)}
.bn-svc.bn-v3 .grid.cols-4{grid-template-columns:repeat(4,1fr)}
.bn-svc.bn-v1 .card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column}
.bn-svc.bn-v1 .card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.bn-svc.bn-v1 .card .ph{border-radius:0;aspect-ratio:3/2;min-height:150px}
.bn-svc.bn-v1 .card .bd{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.bn-svc.bn-v1 .card h3{font-size:19.5px;letter-spacing:-.01em}
.bn-svc.bn-v1 .card p{font-size:14px;color:var(--muted);margin:9px 0 16px;flex:1}
.bn-svc .more{font:700 13.5px/1 var(--font);color:var(--blue);display:inline-flex;align-items:center;gap:7px}
.bn-svc .more::after{content:"\2192";transition:transform .16s ease}
.bn-svc .card:hover .more::after,.bn-svc .tile:hover .more::after{transform:translateX(4px)}
/* V2 — feature photo left, scannable icon list right */
.bn-svc.bn-v2{background:#fff}
.bn-svc.bn-v2 .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
.bn-svc.bn-v2 .feature{position:relative;border-radius:18px;overflow:hidden;min-height:440px;box-shadow:var(--sh)}
.bn-svc.bn-v2 .feature .cap{position:absolute;left:22px;bottom:22px;z-index:2;color:#fff}
.bn-svc.bn-v2 .feature .cap b{font:800 19px/1.1 var(--font);display:block;color:#fff}
.bn-svc.bn-v2 .feature .cap span{font:600 13px/1 var(--font);color:rgba(255,255,255,.85)}
.bn-svc.bn-v2 .list{display:grid;gap:14px}
.bn-svc.bn-v2 .item{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:border-color .15s,transform .15s;text-decoration:none}
.bn-svc.bn-v2 .item:hover{border-color:var(--blue);transform:translateX(3px)}
.bn-svc.bn-v2 .item .ic{flex:none;width:46px;height:46px;border-radius:11px;background:var(--blue-soft);display:grid;place-items:center}
.bn-svc.bn-v2 .item .ic svg{width:22px;height:22px;color:var(--blue)}
.bn-svc.bn-v2 .item h3{font-size:17.5px}
.bn-svc.bn-v2 .item p{font-size:13.5px;color:var(--muted);margin-top:6px}
/* V3 — icon tiles, no photos */
.bn-svc.bn-v3{background:var(--paper)}
.bn-svc.bn-v3 .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bn-svc.bn-v3 .tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s;display:flex;flex-direction:column}
.bn-svc.bn-v3 .tile:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.bn-svc.bn-v3 .tile .ic{width:54px;height:54px;border-radius:13px;background:linear-gradient(150deg,var(--blue),var(--blue-dk));display:grid;place-items:center;margin-bottom:16px}
.bn-svc.bn-v3 .tile .ic svg{width:24px;height:24px;color:#fff}
.bn-svc.bn-v3 .tile h3{font-size:19px}
.bn-svc.bn-v3 .tile p{font-size:14px;color:var(--muted);margin:9px 0 14px;flex:1}

/* ============================================================================
   PROCESS (variants v1 numbered row / v2 vertical timeline / v3 photo + stack)
   ============================================================================ */
.bn-proc.bn-v1 .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.bn-proc.bn-v1 .step{text-align:center;position:relative}
.bn-proc.bn-v1 .node{width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;border:2px solid var(--blue);font:800 24px/1 var(--font);display:grid;place-items:center;margin:0 auto 18px;position:relative;z-index:2;box-shadow:var(--sh-sm)}
.bn-proc.bn-v1 .grid::before{content:"";position:absolute;top:32px;left:12%;right:12%;height:2px;background:var(--line);z-index:0}
.bn-proc.bn-v1 h3{font-size:18px;letter-spacing:-.01em}
.bn-proc.bn-v1 p{font-size:14px;color:var(--muted);margin-top:9px;max-width:24ch;margin-left:auto;margin-right:auto}
/* V2 — centered vertical timeline */
.bn-proc.bn-v2{background:var(--paper)}
.bn-proc.bn-v2 .line{max-width:760px;margin:0 auto;position:relative;padding-left:24px}
.bn-proc.bn-v2 .line::before{content:"";position:absolute;left:30px;top:8px;bottom:8px;width:2px;background:var(--line)}
.bn-proc.bn-v2 .row{position:relative;display:grid;grid-template-columns:62px 1fr;gap:22px;padding:14px 0 26px;margin:0}
.bn-proc.bn-v2 .node{width:62px;height:62px;border-radius:16px;background:var(--blue);color:#fff;border:2px solid var(--blue);font:800 22px/1 var(--font);display:grid;place-items:center;box-shadow:var(--sh-sm);position:relative;z-index:2}
.bn-proc.bn-v2 .bd{padding-top:6px}
.bn-proc.bn-v2 h3{font-size:19px}
.bn-proc.bn-v2 p{font-size:14.5px;color:var(--muted);margin-top:7px;max-width:52ch}
/* V3 — install photo left + compact numbered step stack right */
/* BLUE ACCENT (Alex, asked twice and I did not do it: "let's design the colors to be more naturally
   variant… I want the blue accent standard on at least one section here to add a little bit of a
   difference"). Measured band run on a service page was hero → overview(white) → scope(white) →
   signs(BAND) → proc(white) → proof → cost → cta, so the middle read as one long pale block, which is the
   "white, white, gray, gray, gray" rhythm he described. The PROCESS section takes the soft blue: it is
   the numbered how-it-works step, so a tint reads as structure rather than decoration, and it sits
   between two white sections where the change actually registers. */
.bn-proc.bn-v3{background:linear-gradient(180deg,var(--blue-soft),#fff)}
.bn-proc.bn-v3::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--gold),transparent)}
.bn-proc.bn-v3 .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.bn-proc.bn-v3 .art{border-radius:18px;overflow:hidden;min-height:440px;box-shadow:var(--sh);position:relative}
.bn-proc.bn-v3 .art .ph{position:absolute;inset:0;border-radius:0}
.bn-proc.bn-v3 .steps{display:grid;gap:12px}
.bn-proc.bn-v3 .st{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.bn-proc.bn-v3 .st:last-child{border-bottom:0}
.bn-proc.bn-v3 .num{flex:none;width:40px;height:40px;border-radius:11px;background:var(--blue);color:#fff;font:800 17px/1 var(--font);display:grid;place-items:center}
.bn-proc.bn-v3 h3{font-size:17.5px}
.bn-proc.bn-v3 p{font-size:13.5px;color:var(--muted);margin-top:5px;max-width:46ch}

/* ============================================================================
   SIGNATURE — multi-platform review bar + trust strip (v1 tiles+strip / v3 rail)
   Beacon's family-distinct signature. Reviews/ratings are HONEST FILLABLE SLOTS.
   ============================================================================ */
/* shared review-tile + trust-chip */
.rev-tile{display:flex;align-items:center;gap:15px;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px 18px}
.rev-tile .logo{flex:none;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font:800 19px/1 var(--font);color:#fff}
.rev-tile .logo.g{background:#4285F4}.rev-tile .logo.f{background:#1877F2}.rev-tile .logo.b{background:var(--blue-dk);font-size:15px}
.rev-tile .meta b{font:800 15px/1 var(--font);display:block;margin-bottom:5px}
.rev-tile .meta .ln{display:flex;align-items:center;gap:8px}
.rev-tile .meta .rate{font:800 14px/1 var(--font);color:var(--ink)}
.rev-tile .meta .cnt{font:600 12.5px/1 var(--font);color:var(--muted);margin-top:5px;display:block}
.strip-chip{display:flex;align-items:center;gap:11px;justify-content:center}
.strip-chip .ic{flex:none;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.13);display:grid;place-items:center}
.strip-chip b{font:700 14.5px/1.2 var(--font)}
/* V1 — review tiles over white, trust strip on cobalt below */
.bn-sig.bn-v1{padding:0}
.bn-sig.bn-v1 .reviews{background:#fff;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bn-sig.bn-v1 .reviews .row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bn-sig.bn-v1 .strip{background:var(--band);color:#fff;padding:18px 0}
.bn-sig.bn-v1 .strip .row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* V3 — proof rail on a cobalt brand band: review platforms left, trust pillars right */
.bn-sig.bn-v3{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;position:relative;overflow:hidden}
.bn-sig.bn-v3::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;opacity:.5}
.bn-sig.bn-v3 .inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding:56px 0}
.bn-sig.bn-v3 .col h3{color:#fff;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
.bn-sig.bn-v3 .col h3::before{content:"";width:24px;height:3px;border-radius:2px;background:var(--gold)}
.bn-sig.bn-v3 .revs{display:grid;gap:12px}
.bn-sig.bn-v3 .rv{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:13px 16px}
.bn-sig.bn-v3 .rv .lg{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font:800 17px/1 var(--font);color:#fff}
.bn-sig.bn-v3 .rv .lg.g{background:#4285F4}.bn-sig.bn-v3 .rv .lg.f{background:#1877F2}.bn-sig.bn-v3 .rv .lg.b{background:#0b2a5e;font-size:13px}
.bn-sig.bn-v3 .rv .mt{flex:1}
.bn-sig.bn-v3 .rv .mt b{font:800 14px/1 var(--font);display:block;color:#fff}
.bn-sig.bn-v3 .rv .mt .ln{display:flex;align-items:center;gap:8px;margin-top:6px}
.bn-sig.bn-v3 .rv .mt .rate{font:800 13px/1 var(--font);color:#fff}
.bn-sig.bn-v3 .rv .mt .cnt{font:600 11.5px/1 var(--font);color:rgba(255,255,255,.75)}
/* TRUST BANNER HORIZONTAL (operator round 2, 2026-07-31: "four boxes... bolder... make the whole
   section thinner" — 2×2 grid becomes ONE row of four slim chips, icon inline-left, titles bolder;
   wraps to 2×2 under 900px). */
.bn-sig.bn-v3 .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bn-sig.bn-v3 .pl{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:11px}
.bn-sig.bn-v3 .pl .ic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14);display:grid;place-items:center;margin-bottom:0;flex:none}
.bn-sig.bn-v3 .pl b{font:800 15.5px/1.2 var(--font);color:#fff;display:block}
.bn-sig.bn-v3 .pl span{font:600 12px/1.4 var(--font);color:rgba(255,255,255,.78);margin-top:3px;display:block}
/* ICONS-GONE, ROOT CAUSE (Alex reported it THREE times; my first two fixes were both wrong).
   This rule was added to hide the empty <span> left behind when the pillar sub-definitions were
   removed. Every .gl glyph is ALSO an empty span — the marks are drawn entirely in CSS borders,
   backgrounds and ::before — so a descendant :empty selector hid all four icons outright. Recoloring
   them gold (below) could never show them: display:none wins over any paint. Scoped to DIRECT empty
   children that are not the icon wrapper, which is the only thing it was ever meant to catch. */
.bn-sig.bn-v3 .pl>span:empty:not(.ic){display:none}
/* TRUE-390 FIX (mobile-audit 0 -> 27 findings after the horizontal rework, 2026-08-01): .pl is a flex row
   and its text children sat at the flexbox default min-width:auto, so they refused to shrink below
   min-content and pushed the grid to x=432 in a 390 viewport (18 off-canvas + 9 starved). Same mechanism
   as the /contact/ email overflow closed earlier tonight. The icon keeps flex:none; only the text may
   shrink, and long single tokens get a break opportunity. */
.bn-sig.bn-v3 .pl>b,.bn-sig.bn-v3 .pl>span:not(.ic){min-width:0;overflow-wrap:anywhere}
/* TRUST BANNER — SUPER THIN (Alex, twice: "the banner needs to be a lot less vertical, more horizontal…
   way too thick for what's on it", then "you did not make the banner super thin at all"). The height was
   never the grid, it was the pillar chrome: 12px padding + a 34px icon plate + 12px gap on a section that
   already carried its own 64px band padding. Chrome comes down, the icon plate shrinks to sit BESIDE the
   word rather than tower over it, and the band's own padding halves. He also reported the icons reading as
   missing — the gold glyph on a 14%-white plate was too faint, so the plate lightens and the glyph thickens. */
/* SUPER THIN, third attempt (Alex: "the trust banner needs to be significantly shorter… it needs to be an
   actual trust banner, not like a big block"). The block was still a block because the section carried its
   own band padding AND a heading AND boxed pillars. Now: no pillar boxes at all — four inline items on one
   rule, which is what a trust BAR is. Section padding 26 -> 14.
   ICONS (he reported them missing TWICE and I kept "fixing" the plate instead of the glyph): the real
   cause is that .gl-phone is drawn in var(--blue) — a blue glyph on the cobalt band, invisible by
   construction — and my earlier scale(.92) shrank the rest. Every glyph on this band is forced to gold at
   full size, and the plate is dropped so the mark sits directly beside the words as he asked. */
/* HEIGHT, measured (Alex: "significantly shorter", "super thin" — twice, and it was still 156px).
   Cutting the SECTION padding never reached it: .bn-sig.bn-v3 .inner carries its own 56px top and
   bottom, so 112px of the 156 was a rule I had not touched. The band's own padding goes to 0 and the
   inner rhythm sets the bar height. Verified by measuring the rendered box, not by reading the CSS. */
.bn-sig.bn-v3{padding:0}
.bn-sig.bn-v3 .inner{padding:15px 0;gap:0;grid-template-columns:1fr}
.bn-sig.bn-v3 h3{display:none}
.bn-sig.bn-v3 .pillars{gap:10px 26px}
.bn-sig.bn-v3 .pl{padding:0;gap:9px;border:0;background:none;border-radius:0;align-items:center}
.bn-sig.bn-v3 .pl .ic{width:auto;height:auto;background:none;border-radius:0;place-items:center;display:inline-grid}
.bn-sig.bn-v3 .pl .ic .gl{transform:none}
.bn-sig.bn-v3 .pl .ic .gl-phone{background:var(--gold)}
.bn-sig.bn-v3 .pl .ic .gl-pin{background:var(--gold)}
.bn-sig.bn-v3 .pl .ic .gl-doc{border-color:var(--gold)}
.bn-sig.bn-v3 .pl b{font-size:13.5px;line-height:1.2;font-weight:700}
/* AREA INTRO (Alex, asked twice): the short lead that now stands above the neighborhood read. */
/* SEE-ALL as a TEXT line, deliberately unlike the service cards beside it. */
.svc-all-line{margin:18px 0 0;text-align:right}
.svc-all-line a{font:700 15px/1 var(--font);color:var(--blue);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.svc-all-line a:hover{border-bottom-color:var(--gold)}
.bn-area-intro{background:#fff;padding:40px 0 8px}
.bn-area-intro p{font-size:17.5px;line-height:1.7;color:var(--ink-2);max-width:66ch}
/* BOTTOM CTA — make the call and email READ AS CLICKABLE (Alex, twice: "let's make the call and email
   buttons kinda stand out more… I wanna make people think they can click it"). They were plain
   rgba-white text in a table row, indistinguishable from the labels beside them. Now each is a bordered
   plate with a hover state. Still links, not buttons that imply a live answer — grapevine is
   voicemail-mode and the phone-copy rail governs the words, not the styling. */
.bn-hours .tbl .r a[href^="tel:"],.bn-hours .tbl .r a[href^="mailto:"]{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);border-radius:9px;padding:7px 13px;color:#fff;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s}
.bn-hours .tbl .r a[href^="tel:"]:hover,.bn-hours .tbl .r a[href^="mailto:"]:hover{background:rgba(255,255,255,.20);border-color:var(--gold)}
.bn-hours .tbl .r a[href^="mailto:"]{overflow-wrap:anywhere;word-break:break-word}
/* UNION with the reviewer's independent fix of the same defect: their selector is broader (every child,
   not just the text nodes) and .ic is safe under it because it keeps flex:none + a fixed width. Kept so
   a future child element cannot reintroduce the overflow. */
.bn-sig.bn-v3 .pl>*{min-width:0}
.bn-sig.bn-v3 .pl b,.bn-sig.bn-v3 .pl span{overflow-wrap:anywhere}
@media(max-width:900px){.bn-sig.bn-v3 .pillars{grid-template-columns:1fr 1fr}}

/* ============================================================================
   FINANCING band (lock mock .fin) — cobalt gradient panel
   ============================================================================ */
.bn-fin{padding:0}
.bn-fin .panel{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff}
.bn-fin .inner{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;padding:56px 0}
.bn-fin .eyebrow{color:#fff}.bn-fin .eyebrow::before{background:var(--gold)}
.bn-fin h2{color:#fff;font-size:clamp(28px,3.6vw,40px);margin-top:14px}
.bn-fin h2 .amt{color:var(--gold)}
.bn-fin p{color:rgba(255,255,255,.85);font-size:16.5px;margin-top:14px;max-width:46ch}
.bn-fin .act{display:flex;justify-content:flex-end}

/* ============================================================================
   GALLERY (lock mock .gal) — masonry-ish grid, honest fillable slots
   ============================================================================ */
.bn-gal{background:var(--paper)}
.bn-gal .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px}
.bn-gal .ph{border-radius:12px}
.bn-gal .ph.w2{grid-column:span 2}
.bn-gal .ph.h2{grid-row:span 2}
.bn-gal .note{text-align:center;margin-top:26px;font-size:13.5px;color:var(--muted);font-style:italic}

/* ============================================================================
   COVERAGE — CSS service-area map + town list (lock mock .cov)
   ============================================================================ */
.bn-cov .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center}
.bn-cov h2{font-size:clamp(28px,3.6vw,40px)}
.bn-cov p{color:var(--muted);font-size:16.5px;margin-top:14px;max-width:44ch}
/* AREA BUTTONS (Alex, asked twice: "those location buttons, they're all jumbled everywhere… I asked you
   to make that clean"). They were flex-wrap pills, so "Grapevine" sat next to "College Street Historic
   District" and every row broke at a different place — the jumble is the ragged wrap, not the styling.
   A uniform auto-fill grid gives even columns and aligned rows at every width. */
.bn-cov .towns{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin-top:24px}
.bn-cov .towns a,.bn-cov .towns span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px}
.bn-cov .towns a,.bn-cov .towns span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 16px;font:600 14px/1 var(--font);color:var(--ink-2);transition:border-color .15s,color .15s}
.bn-cov .towns a:hover{border-color:var(--blue);color:var(--blue)}
.bn-cov .towns .lead-town{background:var(--blue);color:#fff;border-color:var(--blue)}
.bn-cov .map{position:relative;aspect-ratio:1.18/1;background:linear-gradient(160deg,var(--cool),var(--blue-soft));border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid;place-items:center}
.bn-cov .map iframe{width:100%;height:100%;border:0;display:block}
.bn-cov .map svg{width:88%;height:88%}
.bn-cov .map .shape{fill:rgba(29,95,208,.07);stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round}
.bn-cov .map .road{stroke:rgba(20,63,140,.22);stroke-width:2;fill:none;stroke-dasharray:5 6}
.bn-cov .map .town{fill:var(--blue-dk)}
.bn-cov .map .hub{fill:var(--gold);stroke:#fff;stroke-width:2.5}
.bn-cov .map .lbl{fill:var(--ink);font:700 8px/1 var(--font);letter-spacing:.03em}
.bn-cov .map .lbl.big{fill:var(--blue-dk);font-size:10px;font-weight:800}

/* ============================================================================
   GUARANTEE band (lock mock .guar) — named workmanship promise, shield badge
   ============================================================================ */
.bn-guar{padding:0}
.bn-guar .panel{background:var(--band);color:#fff}
.bn-guar .inner{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;padding:60px 0}
.bn-guar .badge{width:104px;height:118px;flex:none;background:linear-gradient(160deg,var(--blue),var(--blue-dk));border:3px solid var(--gold);clip-path:polygon(50% 0,100% 16%,100% 64%,50% 100%,0 64%,0 16%);display:grid;place-items:center;text-align:center}
/* BADGE FIT (Alex, live review, screenshot: "make this little badge thing look better, it just looks
   really awkward"). The shape is a clip-path hexagon that TAPERS, so its usable width where the text sits
   is well under the 104px box, while "WORKMANSHIP" at 12px/800 + .04em needs ~95px — the word ran past
   both cut edges. The badge grows a little, the wordmark steps down and loses the tracking, and the text
   block is capped to the hexagon's safe inner width so nothing can reach a cut edge again. */
/* BADGE, third attempt (Alex: "clean the warranty workmanship badge, it looks terrible"). My first two
   passes only resized text inside the SAME clipped hexagon, which was the wrong problem — a tapering
   clip-path will always crowd a two-word mark, and the crop is what read as broken. The shape becomes a
   plain rounded shield with a gold rule: no clip-path, so nothing can be cut off, the check gets room,
   and the wordmark sits on two comfortable lines. */
.bn-guar .badge{width:132px;height:132px;clip-path:none;border-radius:18px;border:2px solid var(--gold);display:grid;place-items:center;padding:14px 12px}
.bn-guar .badge .bt{font:800 11px/1.35 var(--font);color:#fff;letter-spacing:.02em;max-width:none;text-transform:uppercase}
.bn-guar .badge .bt .ic{display:block;color:var(--gold);margin:0 auto 7px}
.bn-guar .badge .bt .ic svg{display:block;margin:0 auto}
.bn-guar .eyebrow{color:#fff}.bn-guar .eyebrow::before{background:var(--gold)}
.bn-guar h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.bn-guar p{color:rgba(255,255,255,.85);font-size:16.5px;margin-top:14px;max-width:60ch}
.bn-guar .sign{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.bn-guar .sign .nm{font:800 18px/1 var(--font);color:#fff;font-style:italic}
.bn-guar .sign .role{font:600 12.5px/1.3 var(--font);color:rgba(255,255,255,.72)}
.bn-guar .partners{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.bn-guar .partners span{border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:8px 13px;font:700 12px/1 var(--font);color:rgba(255,255,255,.82)}

/* ============================================================================
   PROOF (variants v1 stat band on photo / v2 honest non-review cards / v3 guarantee+sign)
   ============================================================================ */
/* V1 — brand-tinted roof photo band, fillable stat cards (counts are bracket slots) */
.bn-proof.bn-v1{position:relative}
.bn-proof.bn-v1 .bgph{position:absolute;inset:0;border-radius:0}
.bn-proof.bn-v1 .inner{padding:74px 0;position:relative;z-index:2}
.bn-proof.bn-v1 .head{text-align:center;max-width:620px;margin:0 auto 38px}
.bn-proof.bn-v1 .head .eyebrow{color:#fff;justify-content:center}
.bn-proof.bn-v1 .head h2{color:#fff;font-size:clamp(27px,3.4vw,40px);margin-top:13px}
.bn-proof.bn-v1 .head p{color:rgba(255,255,255,.86);font-size:16px;margin-top:12px}
.bn-proof.bn-v1 .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.bn-proof.bn-v1 .stat{text-align:center;padding:10px 22px;position:relative}
.bn-proof.bn-v1 .stat:not(:first-child)::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.22)}
.bn-proof.bn-v1 .stat b{font:900 34px/1 var(--font);color:#fff;display:block;letter-spacing:-.02em}
.bn-proof.bn-v1 .stat span{font:600 13px/1.3 var(--font);color:rgba(255,255,255,.85);margin-top:9px;display:block}
.bn-proof.bn-v1 .stat b .u{color:var(--gold)}
/* V2 — honest proof cards (how we work, what is in writing). NO reviews/stars. */
.bn-proof.bn-v2{background:var(--paper)}
.bn-proof.bn-v2 .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bn-proof.bn-v2 .q{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.bn-proof.bn-v2 .q h3{font-size:18px;letter-spacing:-.01em;margin-bottom:11px}
.bn-proof.bn-v2 .q p{font-size:14.5px;color:var(--ink-2);line-height:1.6;flex:1}
/* REVIEW-APPARATUS ADJACENCY, de-dressed 2026-07-29 (blind-judge medium, reviewer-ruled; grapevine finish
   seat, flagged for challenge). These cards are the deliberate NON-review proof treatment — but they were
   WEARING testimonial anatomy: a 40px circular avatar plate, then a heavy 800-weight name line over a
   small muted role line, above a hairline rule. That is the visual grammar of a customer quote card, and
   our integrity rails ban reviews outright — so the design was implying the one thing the copy is careful
   never to claim. The card CONTENT is honest and unchanged ("On every inspection / Free, no obligation");
   only the dress goes. Now a plain caption row: no portrait circle, no byline weighting.
   CSS-ONLY on purpose — the markup keeps its <span class="av"> so no renderer changes and no other
   family is touched. */
.bn-proof.bn-v2 .q .who{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bn-proof.bn-v2 .q .who .av{display:none}
.bn-proof.bn-v2 .q .who b{font:600 13px/1.35 var(--font);display:block;color:var(--ink-2)}
.bn-proof.bn-v2 .q .who span{font:400 12.5px/1.35 var(--font);color:var(--muted);margin-top:3px;display:block}
/* V3 — guarantee badge + signed promise + partner slots (reuses .bn-guar look on white) */
.bn-proof.bn-v3{background:#fff}
.bn-proof.bn-v3 .grid{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.bn-proof.bn-v3 .badge{width:124px;height:140px;flex:none;background:linear-gradient(160deg,var(--blue),var(--blue-dk));border:3px solid var(--gold);clip-path:polygon(50% 0,100% 16%,100% 64%,50% 100%,0 64%,0 16%);display:grid;place-items:center;text-align:center}
.bn-proof.bn-v3 .badge .bt{font:800 13px/1.25 var(--font);color:#fff;letter-spacing:.04em}
.bn-proof.bn-v3 .badge .bt .ic{display:block;color:var(--gold);margin:0 auto 5px}
.bn-proof.bn-v3 .badge .bt .ic svg{display:block;margin:0 auto}
.bn-proof.bn-v3 h2{font-size:clamp(25px,3.2vw,36px)}
.bn-proof.bn-v3 p{color:var(--ink-2);font-size:16px;margin-top:13px;max-width:60ch}
.bn-proof.bn-v3 .sign{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.bn-proof.bn-v3 .sign .nm{font:800 18px/1 var(--font);color:var(--blue-dk);font-style:italic}
.bn-proof.bn-v3 .sign .role{font:600 12.5px/1.3 var(--font);color:var(--muted)}
.bn-proof.bn-v3 .partners{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.bn-proof.bn-v3 .partners span{border:1px solid var(--line);border-radius:8px;padding:8px 13px;font:700 12px/1 var(--font);color:var(--ink-2);background:var(--paper)}

/* ============================================================================
   SERVICE-DETAIL BLOCKS — scope (what's included) / signs (cobalt band) /
   options (materials) / cost band. Beacon-distinct, azure-led, no AI tells.
   ============================================================================ */
/* SCOPE — left intro + grid of azure-iconed scope cards (what the job covers) */
.bn-scope{background:#fff}
/* SCOPE LAYOUT (Alex, live review 2026-08-01): "I want it to be, like, the h1, and then the little
   intro, and then let's make the boxes horizontal — two rows of four going across the screen."
   Was a .82fr/1.18fr side-by-side with 2-up cards. Now it STACKS: heading + intro full width, then the
   eight line-items 4-across in two rows. Measured first — the section carries exactly 8 items, so 4x2 is
   square with no ragged row, and the box copy was cut to one line each so a quarter-width column does not
   grow taller than the 2-up it replaces. */
.bn-scope .grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.bn-scope .intro h2{font-size:clamp(26px,3.3vw,38px);margin-top:13px}
.bn-scope .intro p{color:var(--muted);font-size:16.5px;margin-top:14px;line-height:1.7;max-width:42ch}
.bn-scope .intro .foot{font-size:14.5px;color:var(--ink-2);border-left:3px solid var(--blue-soft);padding-left:16px;margin-top:20px}
/* The replacement page carries 8 SHORT boxes and takes Alex's 4x2 exactly; the service-detail pages carry
   5-6 boxes whose bodies must stay 2 sentences (color-sentence floor), so forcing four there would make
   tall narrow columns and a ragged row. auto-fit gives him the 4-up where the copy is short enough to
   earn it and drops to 3/2 where it is not, from one rule. */
.bn-scope .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.bn-scope .intro p{max-width:none}
@media(max-width:900px){.bn-scope .cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bn-scope .cards{grid-template-columns:1fr}}
.bn-scope .sc{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 20px;transition:border-color .15s,transform .15s}
.bn-scope .sc:hover{border-color:var(--blue-soft);transform:translateY(-2px)}
.bn-scope .sc .ic{flex:none;width:36px;height:36px;border-radius:9px;background:var(--blue-soft);display:grid;place-items:center}
.bn-scope .sc .ic svg{width:19px;height:19px;color:var(--blue)}
.bn-scope .sc h3{font-size:16.5px;letter-spacing:-.01em}
.bn-scope .sc p{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.55}

/* SIGNS — cobalt brand band, two-column tell list + reassurance foot */
.bn-signs{padding:0}
.bn-signs .panel{background:var(--band);color:#fff;padding:64px 0}
.bn-signs .panel .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.bn-signs .head{max-width:640px}
.bn-signs .eyebrow{color:#fff}.bn-signs .eyebrow::before{background:var(--gold)}
.bn-signs h2{color:#fff;font-size:clamp(26px,3.3vw,38px);margin-top:13px}
.bn-signs .head p{color:rgba(255,255,255,.82);font-size:16px;margin-top:13px}
.bn-signs .list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;margin-top:30px}
/* CHECKMARK TONE (Alex, live review 2026-08-01): "the words are too bold and white where it's hard to
   read — tone down the whiteness, and the boldness too… the part before the colon you can bold, but the
   rest not as harsh." Pure #fff at 600 on the cobalt band is the glare he means. Weight drops to 500 and
   the fill softens to .88, which matches the head paragraph's .82 register on the same band; any item
   that still leads with a label before a colon keeps that label bold, so the scannable half survives. */
.bn-signs .list li{display:flex;align-items:flex-start;gap:13px;font:500 15.5px/1.55 var(--font);color:rgba(255,255,255,.88)}
.bn-signs .list li b,.bn-signs .list li strong{font-weight:700;color:#fff}
.bn-signs .list .mk{flex:none;width:20px;height:20px;border-radius:6px;background:var(--gold);position:relative;margin-top:2px}
.bn-signs .list .mk::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--band);border-width:0 2.4px 2.4px 0;transform:rotate(43deg)}
.bn-signs .foot{color:rgba(255,255,255,.82);font-size:15px;margin-top:28px;max-width:64ch;line-height:1.6;border-top:1px solid rgba(255,255,255,.16);padding-top:22px}
.bn-signs .foot a:not(.btn){color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* OPTIONS — paper, option cards naming the real choices for this service */
.bn-opt{background:var(--paper)}
.bn-opt .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bn-opt .op{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;box-shadow:var(--sh-sm);position:relative;display:flex;flex-direction:column}
.bn-opt .op .tag{align-self:flex-start;font:700 10.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--blue-dk);background:var(--blue-soft);border-radius:6px;padding:6px 10px;margin-bottom:14px}
.bn-opt .op h3{font-size:18.5px;letter-spacing:-.01em}
.bn-opt .op p{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.6}
.bn-opt .opt-note{font-size:13px;color:var(--muted);font-style:italic;margin-top:20px;text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}

/* COST BAND — paper, azure rule; what drives the price + a checklist + a ghost CTA */
.bn-cost{background:var(--paper)}
.bn-cost .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.bn-cost .copy{border-left:4px solid var(--blue);padding-left:26px}
.bn-cost .copy h2{font-size:clamp(25px,3.2vw,36px);margin-top:12px}
.bn-cost .copy p{color:var(--ink-2);font-size:16.5px;margin-top:14px;line-height:1.7;max-width:48ch}
.bn-cost .copy .btn{margin-top:22px}
.bn-cost .drivers{list-style:none;display:grid;gap:13px}
.bn-cost .drivers li{display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font:600 15px/1.5 var(--font);color:var(--ink)}
.bn-cost .drivers .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;margin-top:1px}
.bn-cost .drivers .ck::after{content:"";width:6px;height:11px;border:solid var(--blue);border-width:0 2.6px 2.6px 0;transform:rotate(43deg) translateY(-1px)}
.bn-cost .cost-note{display:block;font-size:13px;color:var(--muted);font-style:italic;margin:26px auto 0;max-width:var(--wrap);padding:0 28px}

/* ============================================================================
   CTA (variants v1 split + repeated form / v3 photo band + form). Form-bearing.
   ============================================================================ */
.bn-cta.bn-v1{background:linear-gradient(160deg,var(--paper),var(--cool))}
.bn-cta.bn-v1 .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.bn-cta.bn-v1 h2{font-size:clamp(29px,3.8vw,44px)}
.bn-cta.bn-v1 .sub{font-size:18px;color:var(--ink-2);margin:15px 0 22px;max-width:42ch}
.bn-cta .phone-cta{display:inline-flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 19px;box-shadow:var(--sh-sm)}
.bn-cta .phone-cta .ic{width:42px;height:42px;border-radius:11px;background:var(--blue-soft);display:grid;place-items:center;flex:none}
.bn-cta .phone-cta .ic .gl-phone{width:18px;height:18px}
.bn-cta .phone-cta .tx small{font:700 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.bn-cta .phone-cta .tx b{font:800 21px/1 var(--font);color:var(--blue-dk)}
/* V3 — dark-tinted roof photo band, reassurance checklist left, compact form card right.
   (Operator pick note: V3 left text "too close to the edge" → extra padding-left on the inner.) */
.bn-cta.bn-v3{position:relative}
.bn-cta.bn-v3 .bgph{position:absolute;inset:0;border-radius:0}
.bn-cta.bn-v3 .inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:70px 40px}
.bn-cta.bn-v3 .eyebrow{color:#fff}.bn-cta.bn-v3 .eyebrow::before{background:var(--gold)}
.bn-cta.bn-v3 h2{color:#fff;font-size:clamp(28px,3.7vw,42px)}
.bn-cta.bn-v3 .sub{color:rgba(255,255,255,.9);font-size:17.5px;margin:15px 0 0;max-width:42ch}
.bn-cta.bn-v3 .mini{display:grid;gap:11px;margin-top:22px;list-style:none}
.bn-cta.bn-v3 .mini li{display:flex;align-items:center;gap:11px;color:#fff;font:600 15px/1.3 var(--font)}
.bn-cta.bn-v3 .mini .ck{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.bn-cta.bn-v3 .mini .ck::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(43deg) translateY(-1px)}

/* ============================================================================
   OVERVIEW / STORY / REGION (resource + service + about + service-areas + contact intros)
   ============================================================================ */
.bn-overview{background:#fff}
.bn-overview .head{margin:0 auto;text-align:center;max-width:680px}
.bn-overview .head h2{font-size:clamp(26px,3.4vw,38px);margin-top:13px}
.bn-overview .head p,.bn-overview .body p{color:var(--muted);font-size:16.5px;margin-top:14px;line-height:1.7}
.bn-overview .body{max-width:760px;margin:0 auto;text-align:center}
.bn-overview.story .body{text-align:left;max-width:760px}
.bn-overview .pledge{font-family:var(--font-d);font-weight:700;font-style:italic;font-size:21px;color:var(--blue-dk);margin-top:22px}
.bn-region{background:#fff}
.bn-region .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:50px;align-items:start}
.bn-region .prose{color:var(--muted);font-size:16.5px;line-height:1.72;max-width:54ch}
.bn-region .prose p{margin-top:16px}
.bn-region .prose p:first-child{margin-top:0}
.bn-region .mapwrap{border:1px solid var(--line);background:var(--cool);border-radius:18px;overflow:hidden;position:relative;aspect-ratio:1.1/1}
.bn-region .mapwrap iframe{width:100%;height:100%;border:0;display:block}
.bn-region .map-note{font-size:13px;color:var(--muted);margin-top:12px}

/* ============================================================================
   NEIGHBORHOOD PROFILE (area page) — local read + illustrative/real-census tiles + photo
   ============================================================================ */
.bn-prof{background:var(--paper)}
.bn-prof .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.bn-prof .art .ph{aspect-ratio:4/3}
.bn-prof p{color:var(--muted);font-size:16.5px;margin-top:14px;max-width:48ch}
/* bn readout strip (2026-07-10 area-intro twin fix: beacon dropped the LC-shared 2×2 tile grid for a
   single horizontal figures band — rule-divided columns, uppercase micro-labels under big numerals) */
.bn-prof .bn-figs{display:flex;flex-wrap:wrap;margin-top:26px;border-top:2px solid var(--blue-dk);border-bottom:1px solid var(--line)}
.bn-prof .bn-fig{flex:1 1 0;min-width:118px;padding:16px 18px 14px;border-left:1px solid var(--line)}
.bn-prof .bn-fig:first-child{border-left:0;padding-left:0}
.bn-prof .bn-fig-n{display:block;font:900 26px/1 var(--font);color:var(--blue-dk)}
.bn-prof .bn-fig-n em{color:var(--blue);font-style:normal;font-size:15px;font-weight:800}
.bn-prof .bn-fig-lab{display:block;font:600 11.5px/1.35 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.bn-prof .bn-figs-note{font-size:12px;color:var(--muted);font-style:italic;margin-top:12px}
@media(max-width:560px){.bn-prof .bn-fig{flex:1 1 46%;padding-left:14px}.bn-prof .bn-fig:nth-child(odd){border-left:0;padding-left:0}}

/* ============================================================================
   LOCAL SIGNALS — storm note band (cobalt one-liner) + the storm-outlook NOAA block
   ============================================================================ */
.bn-note{background:var(--band);color:#fff;padding:0}
.bn-note .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:34px 28px}
.bn-note-k{display:inline-flex;align-items:center;gap:8px;font:800 11.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bn-note-k svg{width:15px;height:15px}
.bn-note p{font-family:var(--font-d);font-weight:700;font-size:20px;line-height:1.4;color:#fff}
.bn-note p span{color:var(--gold)}
/* storm-outlook (real NOAA data + by-year bar graph) */
.bn-storm{background:var(--paper)}
.bn-storm-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.bn-storm-intro .lead{color:var(--muted);font-size:16px;line-height:1.65;margin-top:12px;max-width:48ch}
.bn-storm-stats{display:flex;gap:34px;margin-top:24px}
.bn-storm-stats div{display:flex;flex-direction:column}
.bn-storm-stats b{font:900 38px/1 var(--font);color:var(--blue-dk);letter-spacing:-.02em}
.bn-storm-stats b em{font-style:normal;font-size:17px;color:var(--blue);margin-left:2px}
.bn-storm-stats span{font:600 12px/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.bn-storm-scope{font:600 11px/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.bn-storm-chart{border:1px solid var(--line);background:#fff;border-radius:16px;padding:24px 28px 20px;box-shadow:var(--sh-sm)}
.bn-storm-chart .ch-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:6px}
.bn-storm-chart .ch-lab{font:800 12px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.bn-storm-chart .ch-cap{font:600 11.5px/1.2 var(--font);color:var(--muted);white-space:nowrap}
.bn-storm .ch-plot{position:relative;height:260px;padding-bottom:34px;margin-top:18px}
.bn-storm .ch-grid{position:absolute;left:0;right:0;top:0;bottom:34px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.bn-storm .ch-grid span{display:block;height:1px;background:var(--line)}
.bn-storm .ch-bars{position:absolute;left:0;right:0;top:0;bottom:34px;display:flex;align-items:flex-end;gap:18px;padding:0 10px}
.bn-storm .ch-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.bn-storm .ch-bar .ch-val{font:800 17px/1 var(--font);color:var(--blue-dk);margin-bottom:9px}
.bn-storm .ch-bar .bar{width:100%;max-width:64px;background:linear-gradient(180deg,var(--blue),var(--blue-dk));border-radius:5px 5px 0 0;min-height:6px;transition:height .3s ease}
.bn-storm .ch-bar.is-peak .ch-val{color:var(--blue)}
.bn-storm .ch-xaxis{position:absolute;left:0;right:0;bottom:0;display:flex;gap:18px;padding:11px 10px 0;border-top:1.5px solid var(--blue-dk)}
.bn-storm .ch-xaxis span{flex:1;text-align:center;font:700 13px/1 var(--font);color:var(--blue-dk)}
.bn-storm .ch-foot{font:500 12px/1.55 var(--font);color:var(--muted);margin-top:16px;max-width:62ch}
.bn-storm-events{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:38px}
.bn-se{padding:18px 20px;border-left:1px solid var(--line)}
.bn-se:first-child{border-left:0;padding-left:0}
.bn-se .d{display:block;font:700 12px/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.bn-se b{display:block;font:800 18px/1.1 var(--font);color:var(--ink);margin:5px 0 3px}
.bn-se .w{font:500 13.5px/1.4 var(--font);color:var(--muted);text-transform:capitalize}
.bn-storm-src{font:500 12.5px/1.6 var(--font);color:var(--muted);margin-top:24px;max-width:72ch}

/* ============================================================================
   CONTACT — methods cards + hours band
   ============================================================================ */
.bn-ck{background:#fff}
.bn-ck .methods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bn-ck .m{display:flex;gap:15px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.bn-ck .m .ico{width:42px;height:42px;flex:none;border-radius:11px;background:var(--blue-soft);display:grid;place-items:center}
.bn-ck .m .ico svg{width:21px;height:21px;color:var(--blue)}
/* TRUE-390 (beacon /contact/ census 2026-07-31): .t sat at flex default min-width:auto and refused to
   shrink below the email's ~27-char min-content, growing the row to ~415px in a 390px viewport. Fires
   only when brand-domain length crosses the threshold — fleet-latent, shorter-domain siblings hide it. */
.bn-ck .m .t{min-width:0}
.bn-ck .m .t .big a{overflow-wrap:anywhere}
.bn-ck .m .t b{font:700 12px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.bn-ck .m .t .big{font:800 20px/1.1 var(--font);color:var(--ink);margin-top:6px;display:block}
/* CONTACT METHODS (Alex, live review 2026-08-01), three items:
   1. "the email box, you see how it doesn't fit in one line? the dot com is the second row" — the address
      is 27 unbreakable characters at 800/20px and the column cannot hold it, so the ADDRESS specifically
      steps down and gets a break opportunity. The phone keeps the full 20px weight.
   2. "a little more white space between the number and the first conversation… tiny, tiny bit."
   3. "let's make the call and email buttons kinda stand out more" — call and email are the two ACTIONS in
      this row (the third is a jump link), so they get a tinted plate and a visible hover, while staying
      links rather than turning into buttons that imply a live answer on a voicemail-mode site. */
.bn-ck .m .t .big a[href^="mailto:"]{font-size:16.5px;letter-spacing:-.005em;overflow-wrap:anywhere;word-break:break-word}
.bn-ck .m .t .big+span{margin-top:7px}
.bn-ck .m:has(a[href^="tel:"]),.bn-ck .m:has(a[href^="mailto:"]){background:var(--blue-soft);border-color:rgba(30,68,95,.18)}
.bn-ck .m:has(a[href^="tel:"]) .ico,.bn-ck .m:has(a[href^="mailto:"]) .ico{background:#fff}
.bn-ck .m .t .big a[href^="tel:"]:hover,.bn-ck .m .t .big a[href^="mailto:"]:hover{color:var(--blue);text-decoration:underline}
.bn-ck .m .t span{font:600 13.5px/1.4 var(--font);color:var(--muted);display:block;margin-top:4px}
.bn-hours{background:var(--band);color:#fff}
.bn-hours .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.bn-hours .eyebrow{color:#fff}.bn-hours .eyebrow::before{background:var(--gold)}
.bn-hours h2{color:#fff;font-size:clamp(26px,3.2vw,36px);margin-top:12px}
.bn-hours p{color:rgba(255,255,255,.85);font-size:16px;margin-top:14px;max-width:44ch}
.bn-hours .tbl{border-left:1px solid rgba(255,255,255,.18);padding-left:34px;display:grid;gap:11px}
.bn-hours .tbl .r{display:flex;justify-content:space-between;gap:20px;font-size:15px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.12)}
.bn-hours .tbl .r:last-child{border-bottom:0;padding-bottom:0}
.bn-hours .tbl .r b{color:#fff;font:700 15px/1 var(--font)}
.bn-hours .tbl .r span,.bn-hours .tbl .r a{color:rgba(255,255,255,.85)}

/* ============================================================================
   ENGINE CHROME — styles the classes header.php / footer.php / rr_lead_form() /
   rr_block_faq ACTUALLY emit, matched to the lock mock. (See chrome-mapping
   notes at the top + feedback_family_chrome_match_own_mock.) These target the
   REAL DOM the engine renders, not the mock's hand-coded class names.
   ============================================================================ */

/* lead form — rr_lead_form() inside .lead-card. Real DOM: .f (hero) / bare <div> field wrappers, .row
 * (phone+zip), label.ef-check (homeowner), .lf-opt, button.btn.btn-primary, .fineprint/.form-consent. */
.lead-card form,.lead-card .est-form{display:flex;flex-direction:column;gap:16px}
/* MULTISTEP SPACING (operator round-2 item, ref = modern-pro styles-modern-pro.php:215): the form gap
 * only separates the FORM's children — step 1, Next, step 2. With multistep on, the field wrappers sit
 * INSIDE .lf-step, which had no layout rule here, so fields rendered at 0px apart (block flow, margin:0).
 * Same mechanism modern-pro hit and fixed; same fix, same 16px rhythm Alex approved there. */
.lead-card .lf-step,.est-card .lf-step{display:flex;flex-direction:column;gap:16px}
.est-card .lf-step{gap:11px}
.lead-card .lf-back{align-self:flex-start}
.lead-card .f,.lead-card form>div{display:block;margin:0}
.lead-card .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.lead-card .row>div,.lead-card .row .f{display:block;margin:0}
.lead-card label{display:block;font:700 11px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.lead-card input,.lead-card select,.lead-card textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font:500 14.5px var(--font);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.lead-card textarea{resize:vertical;min-height:64px;line-height:1.5}
.lead-card select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.lead-card input:focus,.lead-card select:focus,.lead-card textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(29,95,208,.13)}
.lead-card input::placeholder,.lead-card textarea::placeholder{color:#8c98ad}
.lead-card .ef-check{display:flex;align-items:flex-start;gap:9px;font:600 13px/1.4 var(--font);letter-spacing:0;text-transform:none;color:var(--ink-2);cursor:pointer;margin:0}
.lead-card .ef-check input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--blue)}
.lead-card .lf-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.lead-card button[type=submit],.lead-card .btn-primary{width:100%;display:inline-flex;align-items:center;justify-content:center;padding:15px;background:var(--blue);color:#fff;border:none;font:700 15px/1 var(--font);cursor:pointer;transition:background .16s,transform .16s;margin-top:4px;border-radius:10px;box-shadow:0 6px 16px rgba(27,36,48,.14)}
.lead-card button[type=submit]:hover,.lead-card .btn-primary:hover{background:var(--blue-dk);transform:translateY(-1px)}
.lead-card button[type=submit]:focus-visible,.lead-card .btn-primary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.lead-card .fineprint,.lead-card .form-consent,.lead-card .micro{font:500 11.5px/1.45 var(--font);color:var(--muted);margin:11px 0 0}
.lead-card .lf-hp{display:none}

/* floating call-now (rr_bn_render_callfab, body-end) — MOBILE ONLY: desktop already holds the number in
 * the topbar + nav plate; a third fixed element there is clutter. Bottom-right thumb zone, safe-area
 * aware, label is bare verb+number per the voicemail rider (no live-answer implication anywhere). */
/* DESKTOP TOO (Alex: "I asked you to make a little button to the side for a call now button, and you did
   not do that… you did not even do anything like that"). It DID exist — but only under 900px, so on the
   desktop he reviews on it was display:none and effectively absent. His reference was "a little circle or
   something on the bottom right", i.e. the persistent side button real roofers run, which is a DESKTOP
   pattern first. It now shows at every width: a compact pill on desktop, the wider tap target on phones. */
.bn-callfab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;font:700 14.5px/1 var(--font);padding:13px 17px;border-radius:999px;box-shadow:0 10px 26px rgba(27,36,48,.30);text-decoration:none;transition:background .15s,transform .1s}
.bn-callfab:hover{background:var(--blue-dk)}
.bn-callfab:active{transform:translateY(1px)}
.bn-callfab .gl{flex:none}
@media(max-width:900px){
.bn-callfab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:15px;padding:14px 19px;border-radius:12px}
}

/* footer (footer.php: .foot-grid > .foot-brand + .foot-col×4, .foot-bottom) — lock mock dark ink footer */
footer,footer.rr-foot,.rr-foot{background:var(--ink);color:#a9b5c8;border-top:4px solid var(--blue);font-family:var(--font);padding:52px 0 36px}
footer .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px}
.foot-brand .logo{display:inline-block;margin-bottom:8px}
.foot-brand .bl-name{color:#fff}
.foot-brand .bl-tag{color:#8090a8}
.foot-brand p{font:500 14px/1.6 var(--font);margin-top:14px;max-width:34ch;color:#8d9ab2}
.foot-col h5{font:700 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col a{display:block;color:#a9b5c8;font:500 14px/1.5 var(--font);margin-bottom:4px;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 12.5px/1.5 var(--font);color:#7f8da4}
.foot-legal{display:flex;gap:18px}
.foot-legal a{color:#7f8da4}.foot-legal a:hover{color:#fff}

/* shared estimate band (rendered when a page doesn't suppress it) — Beacon final-CTA look */
.estimate{background:linear-gradient(160deg,var(--paper),var(--cool));padding:74px 0}
.est-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.est-copy h2{font-size:clamp(28px,3.6vw,42px)}.est-copy p{color:var(--ink-2);font-size:17px;margin-top:14px;max-width:42ch}
.est-points{list-style:none;margin-top:20px;display:grid;gap:11px}
.est-points li{display:flex;align-items:center;gap:11px;font:600 15px/1.3 var(--font);color:var(--ink)}
.est-points li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--blue-soft);background-image:none}
.est-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--sh-sm)}
.est-card h3{font-size:20px}.est-note{color:var(--muted);font-size:13.5px;margin:6px 0 16px}
/* the estimate-band form is rr_lead_form('closer') as .est-form OUTSIDE .lead-card → mirror the chrome */
.est-card .est-form{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.est-card .est-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.est-card .est-form label{display:block;font:700 11px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.est-card .est-form label.ef-check{display:flex;align-items:flex-start;gap:9px;font:600 13px/1.4 var(--font);letter-spacing:0;text-transform:none;color:var(--ink-2);cursor:pointer;margin:0}
.est-card .est-form input,.est-card .est-form select,.est-card .est-form textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font:500 14.5px var(--font);color:var(--ink);outline:none;transition:.15s}
.est-card .est-form input:focus,.est-card .est-form select:focus,.est-card .est-form textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(29,95,208,.13)}
.est-card .est-form .ef-check input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--blue)}
.est-card .est-form .lf-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.est-card .est-form button[type=submit]{width:100%;padding:15px;background:var(--blue);color:#fff;border:none;font:700 15px/1 var(--font);cursor:pointer;transition:background .16s;border-radius:10px;margin-top:2px}
.est-card .est-form button[type=submit]:hover{background:var(--blue-dk)}
.est-card .est-form .fineprint,.est-card .est-form .form-consent{font:500 11.5px/1.45 var(--font);color:var(--muted);text-align:center;margin:0}
.est-card .est-form .lf-hp{display:none}
.area-map{background:linear-gradient(160deg,var(--cool),var(--blue-soft));min-height:300px;border:1px solid var(--line);border-radius:18px}

/* FAQ accordion (engine: .faq-list > .faq-item > button.faq-q + .faq-a) — soft Beacon card list */
.faq{background:#fff}
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font:800 18px/1.35 var(--font-d);color:var(--ink)}
.faq-q:hover{color:var(--blue)}
.faq-q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:400 26px/1 var(--font);color:var(--blue)}
.faq-item.open .faq-q::after,.faq-q[aria-expanded="true"]::after{content:"\2013"}
.faq-q:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .22s ease}
.faq-item.open .faq-a,.faq-q[aria-expanded="true"]+.faq-a{max-height:700px}
.faq-a p{font:500 16px/1.65 var(--font);color:var(--muted);max-width:64ch;margin:0 0 22px}

/* in-body contextual links the SEO pipeline drops as [text](url) (:not(.btn) so CTA buttons keep styling) */
.bn-overview .body p a:not(.btn),.faq-a a:not(.btn),.bn-post-body p a:not(.btn),.bn-post-body li a:not(.btn),.prose p a:not(.btn){color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.bn-overview .body p a:not(.btn):hover,.faq-a a:not(.btn):hover,.bn-post-body p a:not(.btn):hover{color:var(--blue-dk)}

/* mobile sticky call bar (.mobar) — matches the lock mock .mbar */
.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(27,36,48,.1)}
.mobar .btn{flex:1;justify-content:center;font-size:14.5px;padding:15px 8px;border-radius:0}
.mobar .btn-ghost{color:var(--blue-dk);border:none;background:#fff}
.mobar .btn-primary{background:var(--blue);color:#fff;border:none}

/* ---- operator-fix 2026-06-24: signature without reviews + intro photo split ---- */
/* v3 signature: the review column was removed (lead-gen sites carry no review apparatus); the trust
   pillars now span the full band and center. */
.bn-sig.bn-v3 .col-full{grid-column:1 / -1;text-align:center}
.bn-sig.bn-v3 .col-full .pillars{grid-template-columns:repeat(4,1fr);max-width:1000px;margin:0 auto;text-align:left}
/* overview.intro with a supporting photo (service/resource pages): statement left, roof photo right. */
.bn-overview.has-photo .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.bn-overview.has-photo .head{max-width:none;margin:0;text-align:left}
.bn-overview.has-photo .head.left{text-align:left}
.bn-overview.has-photo .art{position:relative}
.bn-overview.has-photo .art .ph{aspect-ratio:4/3;border-radius:16px}
.bn-region aside .ph{aspect-ratio:4/3;border-radius:16px;width:100%}

/* ============================================================================
   FL-FALLBACK MARKUP — legal pages (privacy/disclaimer via legal.php) + any page that
   renders an FL rr_block_svc_hero / prose block under the Beacon stylesheet. Styled to
   the Beacon look so they aren't unstyled. (Caught by css-coverage crawling ALL routes.)
   ============================================================================ */
.svc-hero{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;padding:54px 0;position:relative;overflow:hidden}
.svc-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;opacity:.5}
.svc-hero .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative;z-index:2}
.svc-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.svc-hero h1,.svc-hero-copy h1{color:#fff;font-size:clamp(30px,4vw,46px);line-height:1.07}
.svc-hero .lead,.svc-hero-copy .lead,.svc-hero-copy>p{color:rgba(255,255,255,.9);margin-top:14px;max-width:48ch;font-size:16.5px;line-height:1.6}
.svc-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-trust{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;list-style:none}
.hero-trust span,.hero-trust li{font:600 12px/1 var(--font);color:#fff;background:rgba(255,255,255,.12);padding:8px 12px;border-radius:8px}
.crumb,.svc-hero .crumb{font:600 12px/1.4 var(--font);color:rgba(255,255,255,.78);margin-bottom:14px}
.svc-hero .crumb a,.svc-hero .crumb .cur{color:rgba(255,255,255,.78)}.svc-hero .crumb a:hover{color:#fff;text-decoration:underline}
.frame,.frame-ph{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#2f6fdc,var(--blue-dk));min-height:300px}
.frame-ph-ic{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.4)}
.frame .dot,.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block}
.prose-sec{padding:60px 0;background:#fff}
.prose-sec .wrap{max-width:760px;margin:0 auto;padding:0 28px}
.prose-sec h2{font-family:var(--font-d);font-size:26px;color:var(--ink);margin:30px 0 10px}
.prose-sec h3{font-family:var(--font-d);font-size:19px;color:var(--ink);margin:22px 0 8px}
.prose-sec p,.prose-sec li{color:var(--muted);font-size:15.5px;line-height:1.7;margin-top:10px}
.legal-updated{color:var(--muted);font-size:13px;margin-top:8px}
/* FL persona/hero decoration classes that ride along on the strip greeting + any FL prose/thank-you
   page (header.php strip .hand, legal/thank-you .prose-body, FL hero .svc-hand/.blob/.stamp/.roofline/
   .hero-photo/.underline-word/.sep/.alt). Beacon has no handwriting/squiggle motif, so neutralize them
   to the family voice rather than leave them unstyled (css-coverage crawls every route). */
.strip .hand,.strip .strip-greet{color:#fff;font-family:var(--font);font-style:normal;font-weight:800}
.hand{font-family:var(--font);font-style:normal;font-weight:700;color:inherit}
.underline-word{font-style:normal;color:var(--blue);white-space:normal}
.underline-word svg{display:none}
.blob,.roofline,.stamp,.svc-hand,.hero-photo .stamp{display:none}
.prose-body{max-width:760px;margin:0 auto}
.prose-body p,.prose-body li{color:var(--muted);font-size:15.5px;line-height:1.7}
.sep{border:0;height:1px;background:var(--line);margin:22px 0}
.alt{background:var(--paper)}

/* ============================================================================
   COST CALCULATOR — parts/cost-calc.php (.calc-card) skinned to Beacon.
   ============================================================================ */
#cost-calc{padding:60px 0}
#cost-calc .head{max-width:640px;margin:0 auto 6px;text-align:center}
#cost-calc .head .eyebrow{justify-content:center}
#cost-calc .head h2{font-size:clamp(26px,3.4vw,38px);margin-top:13px}
#cost-calc .head p{color:var(--muted);font-size:16.5px;margin-top:13px}
#cost-calc .calc-card{max-width:760px;margin:30px auto 0;border:1px solid var(--line);background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm)}
#cost-calc .calc-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
#cost-calc .calc-field{padding:15px 20px;border-bottom:1px solid var(--line)}
#cost-calc .calc-field:nth-child(odd){border-right:1px solid var(--line)}
#cost-calc .calc-field:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
#cost-calc .calc-field label{display:block;font:700 11.5px/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
#cost-calc .cc-in{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font:500 15px/1.3 var(--font);color:var(--ink)}
#cost-calc .cc-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,95,208,.13)}
#cost-calc .calc-out{padding:26px 20px;text-align:center;background:var(--cool)}
#cost-calc .co-label{font:700 11.5px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#cost-calc .co-range{font:900 40px/1.05 var(--font);color:var(--blue-dk);margin:6px 0 4px;letter-spacing:-.02em}
#cost-calc .co-note{font:500 13px/1.55 var(--font);color:var(--muted);max-width:48ch;margin:0 auto 18px}
#cost-calc .calc-out .btn-primary{display:inline-flex}
#cost-calc .calc-disclaim{font:500 12px/1.55 var(--font);color:var(--muted);text-align:center;padding:13px 22px 0;margin:0}

/* BLOG — DATED-RULE ROWS (index) + self-contained cobalt-band post, Beacon Trust-Blue */
/* index hero: compact cobalt title band */
.bn-blog-hero{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;padding:52px 0 44px;position:relative;overflow:hidden}
.bn-blog-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;opacity:.5}
.bn-blog-hero .wrap{position:relative;z-index:2}
.bn-blog-hero .crumb{color:rgba(255,255,255,.8)}
.bn-blog-hero h1{color:#fff;font-size:clamp(28px,3.6vw,42px);line-height:1.08}
.bn-blog-hero .lead{color:rgba(255,255,255,.9);margin-top:12px;max-width:60ch;font-size:16.5px;line-height:1.6}
/* the dated-rule list: single column of hairline-ruled rows, date/read rail LEFT + copy RIGHT */
.bn-blog-list{margin-top:6px;border-top:1px solid var(--line)}
.bn-blog-row{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:start;padding:30px 4px;border-bottom:1px solid var(--line);transition:background .18s}
.bn-blog-row:hover{background:var(--paper)}
.bn-blog-rail{display:flex;flex-direction:column;gap:5px;padding-top:3px}
.bn-blog-date{font:800 15px/1.25 var(--font-d);color:var(--blue-dk);letter-spacing:-.01em}
.bn-blog-read{font:700 11.5px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bn-blog-main{display:flex;gap:22px;align-items:flex-start}
.bn-blog-thumb{flex:0 0 auto;width:120px;height:88px;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.bn-blog-thumb img{width:100%;height:100%;object-fit:cover}
.bn-blog-copy{flex:1;min-width:0}
.bn-blog-copy h3{font-family:var(--font-d);font-size:21px;font-weight:800;color:var(--ink);line-height:1.22;margin-bottom:8px}
.bn-blog-copy p{font-size:15px;color:var(--muted);line-height:1.62;margin-bottom:12px}
.bn-blog-more{font:700 14px/1 var(--font);color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.bn-blog-row:hover .bn-blog-copy h3,.bn-blog-row:hover .bn-blog-more{color:var(--blue-dk)}
/* POST — self-contained cobalt title band with a left GOLD accent rule (never .svc-hero) */
.bn-post{display:block}
.bn-post-hero{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;padding:48px 0 40px;position:relative;overflow:hidden}
.bn-post-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--gold)}
.bn-post-hero .wrap{position:relative;z-index:2;max-width:860px}
.bn-post-hero .crumb{color:rgba(255,255,255,.78)}
.bn-post-hero .crumb a:hover{color:#fff;text-decoration:underline}
.bn-post-hero h1{color:#fff;font-size:clamp(27px,3.4vw,40px);line-height:1.12}
.bn-post-meta{font:600 13px/1 var(--font);color:rgba(255,255,255,.85);margin-top:14px}
.bn-post-fig{max-width:820px;margin:0 auto;padding:30px 28px 0}
.bn-post-fig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:14px}
.bn-post-body{max-width:720px;margin:0 auto;padding:44px 28px 8px}
.bn-post-lead{font:500 19px/1.6 var(--font);color:var(--ink);margin-bottom:24px}
.bn-post-body h2{font-family:var(--font-d);font-weight:800;font-size:27px;line-height:1.22;color:var(--ink);margin:38px 0 14px}
.bn-post-body p{font:500 16.5px/1.75 var(--font);color:var(--ink);margin-bottom:18px}
.bn-post-bullets{list-style:none;margin:2px 0 22px;padding:0;display:grid;gap:11px}
.bn-post-bullets li{position:relative;padding-left:26px;font:500 16px/1.65 var(--font);color:var(--ink)}
.bn-post-bullets li::before{content:"";position:absolute;left:3px;top:9px;width:10px;height:10px;background:var(--blue);border-radius:50%}
.bn-post-cta{margin:34px 0 8px}
.bn-post-cta .btn{padding:15px 30px;font-size:15px}
/* post FAQ - JS-free details accordion */
.bn-post-faqs .wrap{max-width:820px}
.bn-post-faqs h2{font-family:var(--font-d);font-weight:800;font-size:26px;color:var(--ink);letter-spacing:-.02em;margin-bottom:18px;text-align:center}
.bn-post-faqsub{text-align:center;color:var(--muted);font:500 16px/1.65 var(--font);max-width:60ch;margin:0 auto 22px}
.bn-post-faq{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:12px;overflow:hidden}
.bn-post-faq summary{cursor:pointer;list-style:none;padding:17px 46px 17px 20px;font-family:var(--font-d);font-weight:800;font-size:16.5px;color:var(--ink);position:relative}
.bn-post-faq summary::-webkit-details-marker{display:none}
.bn-post-faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px;line-height:1;color:var(--blue);font-weight:400}
.bn-post-faq[open] summary::after{content:"\2013"}
.bn-post-faq[open] summary{border-bottom:1px solid var(--line)}
.bn-post-faq>div{padding:14px 20px 18px;color:var(--muted);font-size:16px;line-height:1.7}
.bn-post-faq>div a{color:var(--blue-dk);border-bottom:1px solid var(--blue)}
/* dated-rule rows collapse to a clean single column at 390px */
@media(max-width:560px){
  .bn-blog-row{grid-template-columns:1fr;gap:12px;padding:24px 2px}
  .bn-blog-rail{flex-direction:row;align-items:baseline;gap:10px;padding-top:0}
  .bn-blog-date{font-size:13.5px}
  .bn-blog-main{gap:16px}
  .bn-blog-thumb{width:88px;height:66px;border-radius:10px}
  .bn-blog-copy h3{font-size:19px}
  .bn-post-hero::before{width:4px}
}

/* comparison / coverage spec sheets (resource pages) — soft Beacon table */
.bn-spec{background:#fff}
.bn-spec .sheet{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px}
.bn-spec .colhead{display:grid;grid-template-columns:1.1fr 1fr 1fr;background:var(--paper);border-bottom:1px solid var(--line)}
.bn-spec .colhead span{padding:14px 20px;font:700 12px/1.2 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--blue-dk)}
.bn-spec .specrow{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-bottom:1px solid var(--line)}
.bn-spec .specrow:last-child{border-bottom:0}
.bn-spec .specrow>div{padding:16px 20px}
.bn-spec .specrow .mname{font:800 15px/1.3 var(--font);color:var(--ink)}
.bn-spec .specrow .what,.bn-spec .specrow .why{font-size:14.5px;color:var(--muted);line-height:1.55}
.bn-spec .mat-note{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:14px}

/* ============================================================================
   PER-PALETTE GOLD — the gold star/accent tracks the chosen blue. Default is the
   azure-mock gold; deep-cobalt shifts to amber. (body[data-pal-*] is emitted by
   the engine identity hook; falls back to the :root default when absent.)
   ============================================================================ */
body[data-pal-beacon-deep-cobalt]{--gold:#E0A130}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* 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:981px){.nav-links>a,.nav-links .nav-top{white-space:nowrap;flex-shrink:0}}
@media(max-width:980px){
  .nav-toggle{display:inline-flex;align-items:center}
  .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:var(--sh);max-height:calc(100dvh - 120px);overflow-y:auto}
  .nav-links.open>a,.nav-links.open .nav-top{padding:13px 28px;width:100%;border-bottom:0}
  .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-item.has-drop.open .nav-drop-2col{display:block;min-width:0}
  .nav-links.open .nav-drop-2col .nav-drop-group+.nav-drop-group{margin-top:4px;border-top:1px solid var(--line);padding-left:0;border-left:0;padding-top:8px}
  .nav-cta .btn-primary,.nav-phone{display:none}
  .strip .strip-greet,.strip .strip-lead{display:none}
  .nav{padding:12px 20px}
}
@media(max-width:920px){
  .bn-hero.bn-v1 .grid,.bn-hero.bn-v3 .grid,.bn-hero.bn-v4 .grid{grid-template-columns:1fr;gap:32px}
  /* mobile hero overflow fixes (clipped by the hero's overflow:hidden, so mobile-qa missed them — caught by
     the 390px variant sweep, operator review 2026-06-24):
     (a) grid items default to min-width:auto (=min-content), so the lead-card form forced .copy ~38px wider
         than its track. min-width:0 lets the items shrink to fit.
     (b) the v1 hero photo had min-height:330 + aspect-ratio 4/3.4, which computes width = 330*(4/3.4) = 388,
         overflowing the 350 track. Relax the min-height on mobile so the photo sizes to the column. */
  .bn-hero .grid>*{min-width:0}
  .bn-hero.bn-v1 .art .ph{min-height:0;aspect-ratio:4/3}
  .bn-hero.bn-v1 .art{order:-1}.bn-hero.bn-v1 .chip{left:14px}
  .bn-hero.bn-v3 .grid{min-height:0}
  .bn-hero.bn-v3 .art{min-height:300px}.bn-hero.bn-v3 .art .float{right:14px}
  .bn-hero.bn-v3 .copy{padding:44px 28px}
  .bn-svc.bn-v1 .grid{grid-template-columns:1fr 1fr}
  .bn-svc.bn-v2 .grid{grid-template-columns:1fr;gap:30px}
  .bn-svc.bn-v3 .grid{grid-template-columns:1fr 1fr}
  .bn-proc.bn-v1 .grid{grid-template-columns:1fr 1fr;gap:34px 20px}.bn-proc.bn-v1 .grid::before{display:none}
  .bn-proc.bn-v3 .grid{grid-template-columns:1fr;gap:30px}
  .bn-proof.bn-v1 .stats{grid-template-columns:1fr 1fr;gap:26px 0}
  .bn-proof.bn-v1 .stat:not(:first-child)::before{display:none}
  .bn-proof.bn-v1 .stat:nth-child(even)::before{display:block}
  .bn-proof.bn-v2 .grid{grid-template-columns:1fr}
  .bn-proof.bn-v3 .grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:30px}
  .bn-sig.bn-v1 .reviews .row{grid-template-columns:1fr}
  /* trust strip = ONE clean centered line on mobile (icons hidden, middot separators); the 2x2 boxed grid
     read as weird/uneven (operator 2026-06-24). */
  .bn-sig.bn-v1 .strip .row{display:block;text-align:center}
  .bn-sig.bn-v1 .strip-chip{display:inline}
  .bn-sig.bn-v1 .strip-chip .ic{display:none}
  .bn-sig.bn-v1 .strip{padding:14px 0}
  .bn-sig.bn-v1 .strip .wrap{padding:0 12px}
  .bn-sig.bn-v1 .strip-chip b{font:700 10px/1.6 var(--font)}
  .bn-sig.bn-v1 .strip-chip:not(:last-child) b::after{content:" · ";color:rgba(255,255,255,.5);font-weight:400}
  .bn-sig.bn-v3 .inner{grid-template-columns:1fr;gap:30px}
  .bn-fin .inner{grid-template-columns:1fr;gap:24px;padding:46px 0}.bn-fin .act{justify-content:flex-start}
  /* uniform 2-col tiles on mobile; reset the masonry spans (w2/h2) so a row-spanning tile can't leave a
     big white gap in the middle of the grid (operator 2026-06-24). */
  .bn-gal .grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:12px}
  .bn-gal .ph{aspect-ratio:4/3}
  .bn-gal .ph.w2,.bn-gal .ph.h2{grid-column:auto;grid-row:auto}
  .bn-cov .grid,.bn-guar .inner,.bn-cta.bn-v1 .grid,.bn-cta.bn-v3 .inner,.bn-region .grid,.bn-prof .grid,.bn-ck .methods,.bn-hours .grid,.bn-storm-grid,.estimate .est-grid,.bn-scope .grid,.bn-cost .grid{grid-template-columns:1fr;gap:30px}
  .bn-opt .grid{grid-template-columns:1fr 1fr}
  .bn-guar .inner{text-align:center;justify-items:center}
  .bn-hours .tbl{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:24px}
  .bn-storm-events{grid-template-columns:1fr}.bn-se{border-left:0;border-top:1px solid var(--line);padding-left:0}.bn-se:first-child{border-top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .svc-hero-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:760px){
  section{padding:60px 0}
  .wrap{padding:0 20px}
  .bn-svc.bn-v1 .grid,.bn-svc.bn-v3 .grid{grid-template-columns:1fr}
  .bn-sig.bn-v3 .pillars,.bn-sig.bn-v3 .col-full .pillars{grid-template-columns:1fr 1fr}
  /* TRUE-390 (2026-08-01): 1fr 1fr still starved the pillars — .pl spends ~75px on icon+gap+padding+border,
     so at 390 the text got 28-78px and wrapped 6-8 lines (22 findings). Stack below 560: each label gets a
     full-width row with its icon beside it, which is the low-height horizontal read Alex asked for at the
     width where it actually matters. Placed HERE, after the 1fr 1fr rule — an earlier @media(max-width:560)
     block lost the cascade to this later equal-specificity rule and measured as "no change". */
  @media(max-width:560px){.bn-sig.bn-v3 .pillars,.bn-sig.bn-v3 .col-full .pillars{grid-template-columns:1fr}}
  .bn-overview.has-photo .grid{grid-template-columns:1fr}
  .bn-scope .cards,.bn-signs .list,.bn-opt .grid{grid-template-columns:1fr}
  .bn-cost .copy{padding-left:18px}
  /* trim mobile dead-air: the service-detail flow stacks scope/signs/options/proof/cost/gallery into the
     FAQ; tighten those section paddings so the gap into .faq stays under the white-space pet-peeve. */
  .bn-scope,.bn-opt,.bn-cost,.bn-proof.bn-v2,.bn-gal,.faq{padding-top:48px;padding-bottom:48px}
  .bn-signs .panel{padding:48px 0}
  .lead-card .row,.est-card .est-form .row{grid-template-columns:1fr}
  .bn-proc.bn-v2 .row{grid-template-columns:50px 1fr;gap:16px}
  .bn-proc.bn-v2 .node{width:50px;height:50px;font-size:18px}
  .bn-proc.bn-v2 .line::before{left:24px}
  .bn-cta.bn-v3 .inner{padding:60px 24px}
  /* clear the fixed mobile call bar so it never overlaps the last section (the closing CTA form's
     submit button) — this was the "phone CTA at the bottom looks terrible" mobile bug. */
  body{padding-bottom:72px}
  .mobar{display:grid;grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  #cost-calc .calc-grid{grid-template-columns:1fr}#cost-calc .calc-field:nth-child(odd){border-right:0}
  .bn-spec .colhead{display:none}
  .bn-spec .specrow{grid-template-columns:1fr;gap:4px;padding:4px 0}
  .bn-spec .specrow>div{padding:8px 18px}
  .bn-spec .specrow .what::before{content:"What it is — ";font-weight:700;color:var(--ink)}
  .bn-spec .specrow .why::before{content:"Why it matters — ";font-weight:700;color:var(--ink)}
}
@media(max-width:430px){
  .bn-proc.bn-v1 .grid,.bn-proof.bn-v1 .stats,.bn-svc.bn-v3 .grid{grid-template-columns:1fr}
  .bn-gal .grid{gap:10px}
  .bn-ck .methods{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.bn-svc .card:hover,.bn-svc .item:hover,.bn-svc .tile:hover,.bn-blog-row:hover{transform:none}
  .bn-svc .card:hover .more::after,.bn-svc .tile:hover .more::after{transform:none}
}

/* ══ OPERATOR ROUND 7 (Alex, screenshots + voice, 2026-08-01) ══════════════════════════════════════
   NOTE TO THE NEXT EDITOR: never write the closing style tag as literal text in here, not even inside a
   comment. The HTML parser ends the element at that string and silently orphans every rule below it.
   My first version of this block did exactly that and shipped as inert bytes. */

/* 1. SCOPE SECTION REDESIGN. "multiple service pages so bad", "checkmarks get in the way", plus his
   leak-repair shot: five cards across a 1124px row gave each ~212px for 60-90 words, so the copy ran 15+
   lines and every card became a column of shredded prose with a check badge stealing 50px of that width.
   auto-fit was the cause: it packs as many columns as the MIN width allows and never asks whether the
   CONTENT can live there. The check badge goes (it was decoration competing with the text for room), and
   the grid caps at 3 so a card is wide enough to read a sentence across. */
.bn-scope .sc .ic{display:none}
.bn-scope .sc{display:block;padding:22px 24px}
.bn-scope .sc h3{font-size:17px;margin:0}
.bn-scope .sc p{font-size:14.5px;line-height:1.6;margin-top:8px}
.bn-scope .cards{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
@media(min-width:1000px){.bn-scope .cards{grid-template-columns:repeat(3,1fr)}}

/* 2. "bottom right phone number can't see phone icon, make it white" — .gl-phone is drawn with
   background:var(--blue), so on the blue pill it is a blue mark on a blue field, invisible by
   construction. Identical root to the trust-bar glyphs earlier tonight; second surface, same cause. */
.bn-callfab .gl,.bn-callfab .gl-phone{background:#fff}

/* 3. "move services button under the services boxes" — the link is now the last child of the cards
   column (moved in the engine), so it lands under the boxes instead of centring under the whole
   two-column section, where it floated beneath the PHOTO. */
.bn-svc .list .svc-all-line{text-align:right;margin:18px 0 0}

/* 4. HERO HEIGHT IS RESERVED, FORM GROWS INSIDE IT, SHORT STEP CENTRED (Alex, verbatim: "the hero should
   stay the same, the contact form is the one that should grow… centre the shorter form in the white space
   so it grows evenly up and down"). Earlier tonight I removed the reservation outright because it left
   353px of dead space BELOW step 1 — the reservation was right, its alignment was wrong. Restored, with
   the stepped form centring its content in the reserved box: step 1 sits in the middle and step 2 fills
   it, so the card never jumps and there is no lopsided gap. */
.lead-card form.rr-stepped{justify-content:center}
.lead-card .lf-consent{font-size:11px;line-height:1.42;margin-top:2px}

/* 5. TRUE-390, measured on the live draft: the floating pill covered 36% of the sticky call bar and the
   header phone broke across THREE rows. mobile-audit scores both 0 — neither is overflow nor a tap target.
   The pill's job is the DESKTOP he reviews on; below the sticky-bar breakpoint the bar IS the call
   affordance, so the pill stands down rather than cover it. */
@media(max-width:760px){
  .bn-callfab{display:none}
  .mobar{max-width:100%;overflow:hidden}
  .mobar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mobar .btn{min-width:0;font-size:13.5px;padding-left:6px;padding-right:6px;overflow-wrap:anywhere}
}
/* (nav-phone nowrap REMOVED - it widened .nav-cta and put a horizontal scroll on all 36
   routes; the 3-row header phone at 390 is disclosed instead. See the punch list.) */


/* Bethany adapter: original Beacon components above, modern shared form/runtime below. */
:root{--ink-2:#3C4859;--muted:#52627A;--white:#fff}body{padding-bottom:0}h1,h2,h3{text-wrap:balance}p{max-width:75ch}::selection{background:#D7E5FC;color:#143F8C}input,textarea{caret-color:#1D5FD0}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #1D5FD0;outline-offset:4px}a.contextual-link,.inline-links a{color:var(--blue-dk);text-decoration:underline;text-underline-offset:.18em}.container{width:min(100% - 56px,1320px);margin:auto}.wrap{padding-inline:28px}.narrow{max-width:850px}.head.left{margin-left:0;text-align:left;max-width:850px}.head h2{font-size:clamp(28px,3.2vw,40px)}.head p+p{margin-top:16px}.ph{background:#E7EEFB}.ph:before,.ph:after{display:none}.ph img{display:block;width:100%;height:100%;object-fit:cover}.hero-call{margin:18px 0}.hero-photo{min-height:480px!important;aspect-ratio:4/4.4!important}.hero-photo-caption{padding:15px 8px;color:#3C4859;font-weight:600}.bn-hero.bn-v1 .lead-card{max-width:none}.bn-hero.bn-v1 .grid{align-items:center}.bn-hero.bn-v1 h1{margin-top:0}.bn-overview .head p{max-width:62ch}.bn-overview.has-photo .art .ph{aspect-ratio:4/3;min-height:350px}.bn-sig .row{grid-template-columns:repeat(4,1fr)}.ck{width:18px;height:18px;border:2px solid currentColor;border-radius:50%;display:inline-block;flex:none}.strip-chip{gap:12px}.lead-card{padding:26px!important}.lead-form{display:grid;gap:13px}.lead-form h2{font-size:23px!important;line-height:1.2!important;letter-spacing:-.02em!important;margin:0!important}.lead-form p{margin:0}.form-intro{font-size:14px;color:#52627A}.lead-form label{display:grid;gap:5px;text-align:left;font-size:13px;font-weight:650;color:#263648}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lead-form input,.lead-form select,.lead-form textarea{font:500 15px var(--font);width:100%;min-width:0;border:1px solid #A9B8CB;border-radius:8px;padding:11px 12px;background:#F8FAFD;color:#1B2430}.lead-form textarea{resize:vertical}.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:2px solid #1D5FD0;outline-offset:1px;background:white}.lead-form label span{font-weight:400}.lead-form .consent{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.5;color:#45566E}.lead-form .consent input{width:17px;height:17px;min-width:17px;accent-color:#1D5FD0;margin-top:2px;padding:0}.consent a{text-decoration:underline}.lead-form .button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;background:#1D5FD0;color:#fff;font:750 15px var(--font);padding:14px 18px;min-height:48px;text-decoration:none}.button:hover{background:#143F8C}.button:disabled{opacity:.6;cursor:wait}.form-status{font-size:14px;color:#143F8C;line-height:1.5}.field-error{color:#9B2020!important;font-size:12px}.honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.turnstile-slot:empty{display:none}.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.answer-grid>article{padding:25px 0;border-top:2px solid #DDE6F2}.answer-grid h3{font-size:22px;line-height:1.18;margin-bottom:12px}.answer-grid p{color:#45566E;line-height:1.7;font-size:16px}.answer-grid p+p{margin-top:12px}.bn-opt.alt{background:#F4F7FB}.bn-proc ol.grid{list-style:none;padding:0}.bn-proc p{color:#45566E}.bn-proc .step p{font-size:15px;line-height:1.6}.bn-proc .head{max-width:750px}.bn-cta .phone-cta{margin:16px 0 24px;font-size:22px;font-weight:800;color:#143F8C;min-height:48px}.bn-cta .sub p{margin:16px 0 0}.closing-photo{aspect-ratio:2.1;margin-top:18px;max-width:520px}.bn-cta.bn-v1 .grid{align-items:center}.bn-faq{background:#fff}.faq-list{border-top:1px solid #CAD6E5}.faq-list details{border-bottom:1px solid #CAD6E5;padding:0}.faq-list summary{cursor:pointer;padding:22px 35px 22px 0;font-size:18px;font-weight:750;position:relative;list-style:none}.faq-list summary:after{content:'+';position:absolute;right:8px;color:#1D5FD0;font-size:23px;top:16px}.faq-list details[open] summary:after{content:'−'}.faq-list details p{font-size:16px;line-height:1.75;padding:0 20px 22px 0;color:#45566E}.bn-nav{position:relative;z-index:40;background:#fff;box-shadow:0 2px 12px #1B243012}.header-inner{display:flex;align-items:center;gap:25px;min-height:110px;flex-wrap:nowrap}.brand{display:block;flex:none;width:217px}.bethany-wordmark{width:100%;height:auto;display:block}.brand-fallback{font-size:31px;font-weight:850;color:#143F8C}.brand-fallback small{display:block;letter-spacing:3px;font-size:12px}#main-nav{display:flex;align-items:center;gap:18px;flex:1;justify-content:center}#main-nav>a,.nav-parent>a{font-size:14px;font-weight:700;white-space:nowrap}.nav-parent{display:flex;align-items:center;gap:3px}.nav-disclosure{border:0;background:transparent;width:23px;height:44px;cursor:pointer;color:#143F8C;font-size:17px}.nav-group{position:relative}.nav-panel{position:absolute;top:100%;left:0;width:255px;border:1px solid #DDE6F2;background:white;padding:10px;border-radius:12px;box-shadow:0 12px 28px #1B243018;max-height:75vh;overflow-y:auto}.nav-panel a{display:block;padding:11px 12px;font-size:14px;font-weight:650;line-height:1.35;border-radius:6px}.nav-panel a:hover{background:#E7EEFB;color:#143F8C}[hidden]{display:none!important}.header-actions{display:flex;gap:18px;align-items:center}.header-phone{white-space:nowrap;font-size:17px;font-weight:800;color:#143F8C}.header-cta{white-space:nowrap;padding:13px 15px;font-size:13px}.menu-toggle{display:none}.bn-footer{background:#1B2430;border-top:5px solid #1D5FD0;padding:60px 0 28px;color:#D4DEEB}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:70px}.footer-logo{width:240px;display:block;margin-bottom:20px}.footer-grid p{font-size:15px;color:#D4DEEB;margin:18px 0}.footer-grid a{display:block;color:#E0E8F2;font-size:15px;margin:11px 0}.footer-grid h2{font-size:18px;color:white;margin-bottom:22px}.footer-grid .phone-large{font-size:21px;font-weight:800}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:22px;border-top:1px solid #45566E;font-size:12px}.mobile-actions{display:none}.skip-link{position:absolute;top:-70px;left:20px;background:#fff;color:#143F8C;padding:15px;z-index:100}.skip-link:focus{top:10px}.bn-cov .map{min-height:430px;border-radius:16px;overflow:hidden}.bn-cov iframe{width:100%;height:460px;border:0}.bn-cov .towns a{display:inline-block;padding:10px 15px;background:#E7EEFB;border-radius:8px;margin:8px 6px 0 0;color:#143F8C;font-weight:700}.inline-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px}.resource-intro>.wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:start}.resource-intro .head{margin:0}.resource-facts{background:#F4F7FB;padding:26px;border-radius:14px}.resource-facts div+div{border-top:1px solid #DDE6F2;margin-top:20px;padding-top:20px}.resource-facts dt{font-size:14px;font-weight:800;color:#143F8C}.resource-facts dd{margin-top:8px;color:#45566E}.table-scroll{overflow-x:auto;border:1px solid #DDE6F2;border-radius:12px}.table-scroll table{width:100%;border-collapse:collapse;min-width:610px;text-align:left}.table-scroll th,.table-scroll td{padding:20px;vertical-align:top;border-bottom:1px solid #DDE6F2;line-height:1.6;font-size:15px}.table-scroll thead{background:#143F8C;color:white}.table-scroll tbody th{background:#F4F7FB;color:#143F8C}.reading-hero{padding:65px 0;background:#F4F7FB}.reading-hero h1,.bn-post-hero h1{font-size:clamp(34px,4vw,52px);line-height:1.12}.reading-hero p,.bn-post-hero p{font-size:18px;margin-top:22px;color:#45566E}.reading-section{padding:40px 0}.reading-section h2{font-size:28px;margin-bottom:20px}.reading-section p{margin:16px 0;line-height:1.8;font-size:17px}.bn-post-hero{padding:55px 0 30px}.bn-post-hero nav a{color:#143F8C;text-decoration:underline}.article-date{font-size:14px!important;color:#52627A!important}.article-photo{aspect-ratio:16/9;margin-top:35px}.editorial-feed .grid{grid-template-columns:repeat(2,1fr)}.editorial-feed time{display:block;font-size:13px;color:#52627A;margin-bottom:13px}.editorial-feed .svc-card p{font-size:16px;line-height:1.6}.editorial-feed .collection-actions{margin-top:28px}.ks-calculator{display:grid;grid-template-columns:1fr 1fr;gap:40px;border:1px solid #CAD6E5;border-radius:16px;padding:32px;background:white}.ks-calc-controls{display:grid;gap:15px}.ks-calc-controls label{display:grid;gap:8px;font-size:15px;font-weight:700}.ks-calc-controls input,.ks-calc-controls select{padding:13px;border:1px solid #A9B8CB;border-radius:8px;font:500 16px var(--font);width:100%;color:#1B2430;background:#F4F7FB}.ks-calc-help{font-size:14px;color:#45566E;line-height:1.6}.ks-calc-result{background:#E7EEFB;padding:27px;border-radius:12px}.ks-calc-result output{font-size:clamp(28px,3vw,40px);font-weight:800;color:#143F8C;display:block;line-height:1.2;margin:15px 0}.ks-calc-result p+p,.ks-calc-result .button{margin-top:22px}.ks-source,.ks-cost-sources{font-size:14px;margin-top:22px;color:#45566E}.ks-model-method{margin-top:22px;max-width:850px}.ks-model-method summary{font-weight:750;cursor:pointer;padding:15px 0}.ks-model-method p{font-size:15px;line-height:1.7;margin:15px 0}.eyebrow{display:none!important}
@media(min-width:1101px) and (max-width:1380px){.container{width:calc(100% - 40px)}.header-inner{gap:18px}.brand{width:180px}#main-nav{gap:12px}#main-nav>a,.nav-parent>a{font-size:13px}.header-actions{gap:12px}.header-cta{display:none}.header-phone{font-size:16px}}
@media(max-width:1100px){.header-inner{display:flex;flex-wrap:wrap;gap:15px;padding-block:16px;min-height:95px}.brand{width:210px}.menu-toggle{display:inline-flex;margin-left:auto;align-items:center;gap:10px;border:1px solid #CAD6E5;border-radius:8px;background:#fff;padding:12px 14px;font:700 15px var(--font);color:#143F8C}.header-actions{margin-left:auto}.header-cta{display:none}#main-nav{display:none;order:4;flex:0 0 100%;width:100%;padding-top:15px;align-items:stretch;justify-content:start}#main-nav.open{display:flex;flex-direction:column;gap:0}#main-nav>a,.nav-parent{padding:12px 0;border-top:1px solid #DDE6F2}#main-nav>a,.nav-parent>a{font-size:16px}.nav-parent{justify-content:space-between}.nav-disclosure{width:44px;height:44px;margin-block:-10px;background:#F4F7FB;border-radius:6px}.nav-group{width:100%}.nav-panel{position:static;width:100%;max-height:none;box-shadow:none;border:0;border-radius:0;padding:0 0 12px}.nav-panel a{width:100%;padding:12px 15px}.bn-hero.bn-v1 .grid{gap:30px}.answer-grid{gap:22px}.footer-grid{gap:35px}}
@media(max-width:760px){.container{width:calc(100% - 36px)}.wrap{padding-inline:20px}.header-inner{gap:10px}.brand{width:190px}.menu-toggle{margin-left:auto}.header-actions{flex:0 0 100%;margin:0;justify-content:flex-end}.header-phone{font-size:18px;padding:6px 0;min-height:35px}.bn-hero.bn-v1{padding:32px 0 38px}.bn-hero.bn-v1 .grid{display:flex;flex-direction:column;align-items:stretch;gap:28px}.bn-hero.bn-v1 h1{font-size:38px;line-height:1.08}.bn-hero .lead{font-size:18px;margin-top:18px;max-width:none}.hero-photo{aspect-ratio:4/3!important;min-height:260px!important}.hero-photo-caption{font-size:14px}.lead-card{padding:22px!important}.form-grid{gap:10px}.lead-form input,.lead-form select,.lead-form textarea{font-size:16px;padding:12px 10px}.lead-form .consent{font-size:12px}.lead-form h2{font-size:21px!important}.bn-sig .row{grid-template-columns:1fr 1fr!important;gap:18px}.bn-sig .strip-chip{justify-content:flex-start;gap:10px}.bn-sig .strip-chip b{font-size:13px}section{padding:52px 0}.bn-overview.has-photo .grid{grid-template-columns:1fr;gap:28px}.bn-overview.has-photo .art .ph{min-height:250px}.head,.head.left{margin-bottom:30px}.head h2{font-size:30px;line-height:1.12}.head p{font-size:17px}.answer-grid{grid-template-columns:1fr;gap:0}.answer-grid>article{padding:22px 0}.answer-grid h3{font-size:23px}.answer-grid p{font-size:16px}.bn-proc .grid{grid-template-columns:1fr!important;gap:30px}.bn-proc .grid:before{display:none}.bn-proc .step{text-align:left;display:grid;grid-template-columns:55px 1fr;column-gap:17px}.bn-proc .node{grid-row:span 2;width:49px;height:49px;margin:0;font-size:21px}.bn-proc .step p{max-width:none;margin:10px 0 0}.bn-proc h3{font-size:21px}.bn-cta.bn-v1 .grid{grid-template-columns:1fr;gap:30px}.bn-cta h2{font-size:33px!important}.bn-cta .phone-cta{font-size:20px}.bn-cov .grid{grid-template-columns:1fr;gap:28px}.bn-cov .map{min-height:350px}.bn-cov iframe{height:380px}.resource-intro>.wrap{grid-template-columns:1fr;gap:28px}.resource-facts{padding:23px}.bn-svc.bn-v1 .grid{grid-template-columns:1fr!important;gap:22px}.editorial-feed .grid{grid-template-columns:1fr}.svc-card .bd{padding:23px}.svc-card h3{font-size:24px!important}.footer-grid{grid-template-columns:1fr;gap:35px}.footer-logo{width:225px}.footer-bottom{display:block}.footer-bottom p+p{margin-top:10px}.bn-footer{padding-bottom:100px}.mobile-actions{position:fixed;bottom:0;left:0;right:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #DDE6F2;background:white;padding:9px;gap:8px;box-shadow:0 -3px 15px #1B243012}.mobile-actions a{padding:12px 6px;text-align:center;min-height:46px;font-size:13px;font-weight:800;border-radius:8px;color:#143F8C;background:#E7EEFB}.mobile-actions a:last-child{background:#1D5FD0;color:white}.ks-calculator{grid-template-columns:1fr;padding:21px;gap:25px}.ks-calc-result{padding:24px}.reading-hero,.bn-post-hero{padding-top:38px}.reading-section{padding:32px 0}.reading-section h2{font-size:27px}.reading-section p{font-size:17px}.table-scroll th,.table-scroll td{padding:15px}.table-scroll:focus-visible{outline-offset:2px}}
@media(max-width:359px){.brand{width:169px}.menu-toggle{padding:11px;font-size:14px}.bn-hero.bn-v1 h1{font-size:34px}.form-grid{grid-template-columns:1fr}.lead-card{padding:18px!important}.header-phone{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.lead-card form.lead-form{display:grid;gap:13px}.lead-card form.lead-form>.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lead-card .lead-form label{display:grid;gap:6px;text-transform:none;letter-spacing:0;font-size:13px;line-height:1.3;margin:0}.lead-card .lead-form label.consent{display:flex;font-size:11.5px;line-height:1.5}.lead-card .lead-form label span{display:inline}.lead-card .lead-form input::placeholder,.lead-card .lead-form textarea::placeholder{color:#52627A}.hero-call .btn-outline{border-color:#1D5FD0;color:#143F8C;background:#fff}.bn-cov .map{width:100%;min-width:0;aspect-ratio:auto}.bn-svc .head{max-width:760px;margin:0 auto 38px;text-align:center}.bn-svc .card .ph{min-height:170px}.bn-proc .grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.bn-hero.bn-v1 .art{order:0}.bn-hero.bn-v1 .copy{order:0}.lead-card form.lead-form>.form-grid{gap:10px}.lead-card .lead-form label.consent{font-size:12px}.bn-cov .map{min-width:0;width:100%}.bn-svc .head{text-align:left}}
@media(max-width:359px){.lead-card form.lead-form>.form-grid{grid-template-columns:1fr}}

.form-grid{align-items:start}.lead-card .lead-form input:not([type=checkbox]){height:44px}.bn-post-hero,.reading-hero{position:static;inset:auto}.article-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:26px}.article-action{background:#F4F7FB}.calc-label{font-size:15px;font-weight:800;color:#143F8C}

.hero-trust{font-size:15px;font-weight:700;color:#143F8C;margin:15px 0}.ph{width:100%;min-width:0}.bn-hero .art,.bn-overview.has-photo .art{min-width:0;width:100%}.table-scroll td p{margin:0}
@media(max-width:760px){.bn-overview.has-photo .grid{grid-template-columns:minmax(0,1fr)}.bn-hero.bn-v1 .grid>*{min-width:0;width:100%}}

@media(min-width:1101px){.site-header{position:sticky;top:0;z-index:40}}

.lead-card .lead-form .form-grid label{display:block}.lead-card .lead-form .form-grid label input{display:block;margin-top:6px}@media(min-width:1101px){.lead-form[id]{scroll-margin-top:130px}}

/* Keep the two-column Home budget readable without a sideways search. */
#home-budget table{min-width:0;width:100%;table-layout:fixed}#home-budget th:first-child{width:35%}
.inline-links a.btn{text-decoration:none}.inline-links a.btn-blue{color:#fff;min-height:44px}

/* Stillwater own adapter */
/* Bethany adapter: original Beacon components above, modern shared form/runtime below. */
:root{--ink-2:#3C4859;--muted:#52627A;--white:#fff}body{padding-bottom:0}h1,h2,h3{text-wrap:balance}p{max-width:75ch}::selection{background:#D7E5FC;color:#143F8C}input,textarea{caret-color:#1D5FD0}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #1D5FD0;outline-offset:4px}a.contextual-link,.inline-links a{color:var(--blue-dk);text-decoration:underline;text-underline-offset:.18em}.container{width:min(100% - 56px,1320px);margin:auto}.wrap{padding-inline:28px}.narrow{max-width:850px}.head.left{margin-left:0;text-align:left;max-width:850px}.head h2{font-size:clamp(28px,3.2vw,40px)}.head p+p{margin-top:16px}.ph{background:#E7EEFB}.ph:before,.ph:after{display:none}.ph img{display:block;width:100%;height:100%;object-fit:cover}.hero-call{margin:18px 0}.hero-photo{min-height:480px!important;aspect-ratio:4/4.4!important}.hero-photo-caption{padding:15px 8px;color:#3C4859;font-weight:600}.bn-hero.bn-v1 .lead-card{max-width:none}.bn-hero.bn-v1 .grid{align-items:center}.bn-hero.bn-v1 h1{margin-top:0}.bn-overview .head p{max-width:62ch}.bn-overview.has-photo .art .ph{aspect-ratio:4/3;min-height:350px}.bn-sig .row{grid-template-columns:repeat(4,1fr)}.ck{width:18px;height:18px;border:2px solid currentColor;border-radius:50%;display:inline-block;flex:none}.strip-chip{gap:12px}.lead-card{padding:26px!important}.lead-form{display:grid;gap:13px}.lead-form h2{font-size:23px!important;line-height:1.2!important;letter-spacing:-.02em!important;margin:0!important}.lead-form p{margin:0}.form-intro{font-size:14px;color:#52627A}.lead-form label{display:grid;gap:5px;text-align:left;font-size:13px;font-weight:650;color:#263648}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lead-form input,.lead-form select,.lead-form textarea{font:500 15px var(--font);width:100%;min-width:0;border:1px solid #A9B8CB;border-radius:8px;padding:11px 12px;background:#F8FAFD;color:#1B2430}.lead-form textarea{resize:vertical}.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:2px solid #1D5FD0;outline-offset:1px;background:white}.lead-form label span{font-weight:400}.lead-form .consent{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.5;color:#45566E}.lead-form .consent input{width:17px;height:17px;min-width:17px;accent-color:#1D5FD0;margin-top:2px;padding:0}.consent a{text-decoration:underline}.lead-form .button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;background:#1D5FD0;color:#fff;font:750 15px var(--font);padding:14px 18px;min-height:48px;text-decoration:none}.button:hover{background:#143F8C}.button:disabled{opacity:.6;cursor:wait}.form-status{font-size:14px;color:#143F8C;line-height:1.5}.field-error{color:#9B2020!important;font-size:12px}.honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.turnstile-slot:empty{display:none}.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.answer-grid>article{padding:25px 0;border-top:2px solid #DDE6F2}.answer-grid h3{font-size:22px;line-height:1.18;margin-bottom:12px}.answer-grid p{color:#45566E;line-height:1.7;font-size:16px}.answer-grid p+p{margin-top:12px}.bn-opt.alt{background:#F4F7FB}.bn-proc ol.grid{list-style:none;padding:0}.bn-proc p{color:#45566E}.bn-proc .step p{font-size:15px;line-height:1.6}.bn-proc .head{max-width:750px}.bn-cta .phone-cta{margin:16px 0 24px;font-size:22px;font-weight:800;color:#143F8C;min-height:48px}.bn-cta .sub p{margin:16px 0 0}.closing-photo{aspect-ratio:2.1;margin-top:18px;max-width:520px}.bn-cta.bn-v1 .grid{align-items:center}.bn-faq{background:#fff}.faq-list{border-top:1px solid #CAD6E5}.faq-list details{border-bottom:1px solid #CAD6E5;padding:0}.faq-list summary{cursor:pointer;padding:22px 35px 22px 0;font-size:18px;font-weight:750;position:relative;list-style:none}.faq-list summary:after{content:'+';position:absolute;right:8px;color:#1D5FD0;font-size:23px;top:16px}.faq-list details[open] summary:after{content:'−'}.faq-list details p{font-size:16px;line-height:1.75;padding:0 20px 22px 0;color:#45566E}.bn-nav{position:relative;z-index:40;background:#fff;box-shadow:0 2px 12px #1B243012}.header-inner{display:flex;align-items:center;gap:25px;min-height:110px;flex-wrap:nowrap}.brand{display:block;flex:none;width:217px}.stillwater-wordmark{width:100%;height:auto;display:block}.brand-fallback{font-size:31px;font-weight:850;color:#143F8C}.brand-fallback small{display:block;letter-spacing:3px;font-size:12px}#main-nav{display:flex;align-items:center;gap:18px;flex:1;justify-content:center}#main-nav>a,.nav-parent>a{font-size:14px;font-weight:700;white-space:nowrap}.nav-parent{display:flex;align-items:center;gap:3px}.nav-disclosure{border:0;background:transparent;width:23px;height:44px;cursor:pointer;color:#143F8C;font-size:17px}.nav-group{position:relative}.nav-panel{position:absolute;top:100%;left:0;width:255px;border:1px solid #DDE6F2;background:white;padding:10px;border-radius:12px;box-shadow:0 12px 28px #1B243018;max-height:75vh;overflow-y:auto}.nav-panel a{display:block;padding:11px 12px;font-size:14px;font-weight:650;line-height:1.35;border-radius:6px}.nav-panel a:hover{background:#E7EEFB;color:#143F8C}[hidden]{display:none!important}.header-actions{display:flex;gap:18px;align-items:center}.header-phone{white-space:nowrap;font-size:17px;font-weight:800;color:#143F8C}.header-cta{white-space:nowrap;padding:13px 15px;font-size:13px}.menu-toggle{display:none}.bn-footer{background:#1B2430;border-top:5px solid #1D5FD0;padding:60px 0 28px;color:#D4DEEB}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:70px}.footer-logo{width:240px;display:block;margin-bottom:20px}.footer-grid p{font-size:15px;color:#D4DEEB;margin:18px 0}.footer-grid a{display:block;color:#E0E8F2;font-size:15px;margin:11px 0}.footer-grid h2{font-size:18px;color:white;margin-bottom:22px}.footer-grid .phone-large{font-size:21px;font-weight:800}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:22px;border-top:1px solid #45566E;font-size:12px}.mobile-actions{display:none}.skip-link{position:absolute;top:-70px;left:20px;background:#fff;color:#143F8C;padding:15px;z-index:100}.skip-link:focus{top:10px}.bn-cov .map{min-height:430px;border-radius:16px;overflow:hidden}.bn-cov iframe{width:100%;height:460px;border:0}.bn-cov .towns a{display:inline-block;padding:10px 15px;background:#E7EEFB;border-radius:8px;margin:8px 6px 0 0;color:#143F8C;font-weight:700}.inline-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px}.resource-intro>.wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:start}.resource-intro .head{margin:0}.resource-facts{background:#F4F7FB;padding:26px;border-radius:14px}.resource-facts div+div{border-top:1px solid #DDE6F2;margin-top:20px;padding-top:20px}.resource-facts dt{font-size:14px;font-weight:800;color:#143F8C}.resource-facts dd{margin-top:8px;color:#45566E}.table-scroll{overflow-x:auto;border:1px solid #DDE6F2;border-radius:12px}.table-scroll table{width:100%;border-collapse:collapse;min-width:610px;text-align:left}.table-scroll th,.table-scroll td{padding:20px;vertical-align:top;border-bottom:1px solid #DDE6F2;line-height:1.6;font-size:15px}.table-scroll thead{background:#143F8C;color:white}.table-scroll tbody th{background:#F4F7FB;color:#143F8C}.reading-hero{padding:65px 0;background:#F4F7FB}.reading-hero h1,.bn-post-hero h1{font-size:clamp(34px,4vw,52px);line-height:1.12}.reading-hero p,.bn-post-hero p{font-size:18px;margin-top:22px;color:#45566E}.reading-section{padding:40px 0}.reading-section h2{font-size:28px;margin-bottom:20px}.reading-section p{margin:16px 0;line-height:1.8;font-size:17px}.bn-post-hero{padding:55px 0 30px}.bn-post-hero nav a{color:#143F8C;text-decoration:underline}.article-date{font-size:14px!important;color:#52627A!important}.article-photo{aspect-ratio:16/9;margin-top:35px}.editorial-feed .grid{grid-template-columns:repeat(2,1fr)}.editorial-feed time{display:block;font-size:13px;color:#52627A;margin-bottom:13px}.editorial-feed .svc-card p{font-size:16px;line-height:1.6}.editorial-feed .collection-actions{margin-top:28px}.ks-calculator{display:grid;grid-template-columns:1fr 1fr;gap:40px;border:1px solid #CAD6E5;border-radius:16px;padding:32px;background:white}.ks-calc-controls{display:grid;gap:15px}.ks-calc-controls label{display:grid;gap:8px;font-size:15px;font-weight:700}.ks-calc-controls input,.ks-calc-controls select{padding:13px;border:1px solid #A9B8CB;border-radius:8px;font:500 16px var(--font);width:100%;color:#1B2430;background:#F4F7FB}.ks-calc-help{font-size:14px;color:#45566E;line-height:1.6}.ks-calc-result{background:#E7EEFB;padding:27px;border-radius:12px}.ks-calc-result output{font-size:clamp(28px,3vw,40px);font-weight:800;color:#143F8C;display:block;line-height:1.2;margin:15px 0}.ks-calc-result p+p,.ks-calc-result .button{margin-top:22px}.ks-source,.ks-cost-sources{font-size:14px;margin-top:22px;color:#45566E}.ks-model-method{margin-top:22px;max-width:850px}.ks-model-method summary{font-weight:750;cursor:pointer;padding:15px 0}.ks-model-method p{font-size:15px;line-height:1.7;margin:15px 0}.eyebrow{display:none!important}
@media(min-width:1101px) and (max-width:1380px){.container{width:calc(100% - 40px)}.header-inner{gap:18px}.brand{width:180px}#main-nav{gap:12px}#main-nav>a,.nav-parent>a{font-size:13px}.header-actions{gap:12px}.header-cta{display:none}.header-phone{font-size:16px}}
@media(max-width:1100px){.header-inner{display:flex;flex-wrap:wrap;gap:15px;padding-block:16px;min-height:95px}.brand{width:210px}.menu-toggle{display:inline-flex;margin-left:auto;align-items:center;gap:10px;border:1px solid #CAD6E5;border-radius:8px;background:#fff;padding:12px 14px;font:700 15px var(--font);color:#143F8C}.header-actions{margin-left:auto}.header-cta{display:none}#main-nav{display:none;order:4;flex:0 0 100%;width:100%;padding-top:15px;align-items:stretch;justify-content:start}#main-nav.open{display:flex;flex-direction:column;gap:0}#main-nav>a,.nav-parent{padding:12px 0;border-top:1px solid #DDE6F2}#main-nav>a,.nav-parent>a{font-size:16px}.nav-parent{justify-content:space-between}.nav-disclosure{width:44px;height:44px;margin-block:-10px;background:#F4F7FB;border-radius:6px}.nav-group{width:100%}.nav-panel{position:static;width:100%;max-height:none;box-shadow:none;border:0;border-radius:0;padding:0 0 12px}.nav-panel a{width:100%;padding:12px 15px}.bn-hero.bn-v1 .grid{gap:30px}.answer-grid{gap:22px}.footer-grid{gap:35px}}
@media(max-width:760px){.container{width:calc(100% - 36px)}.wrap{padding-inline:20px}.header-inner{gap:10px}.brand{width:190px}.menu-toggle{margin-left:auto}.header-actions{flex:0 0 100%;margin:0;justify-content:flex-end}.header-phone{font-size:18px;padding:6px 0;min-height:35px}.bn-hero.bn-v1{padding:32px 0 38px}.bn-hero.bn-v1 .grid{display:flex;flex-direction:column;align-items:stretch;gap:28px}.bn-hero.bn-v1 h1{font-size:38px;line-height:1.08}.bn-hero .lead{font-size:18px;margin-top:18px;max-width:none}.hero-photo{aspect-ratio:4/3!important;min-height:260px!important}.hero-photo-caption{font-size:14px}.lead-card{padding:22px!important}.form-grid{gap:10px}.lead-form input,.lead-form select,.lead-form textarea{font-size:16px;padding:12px 10px}.lead-form .consent{font-size:12px}.lead-form h2{font-size:21px!important}.bn-sig .row{grid-template-columns:1fr 1fr!important;gap:18px}.bn-sig .strip-chip{justify-content:flex-start;gap:10px}.bn-sig .strip-chip b{font-size:13px}section{padding:52px 0}.bn-overview.has-photo .grid{grid-template-columns:1fr;gap:28px}.bn-overview.has-photo .art .ph{min-height:250px}.head,.head.left{margin-bottom:30px}.head h2{font-size:30px;line-height:1.12}.head p{font-size:17px}.answer-grid{grid-template-columns:1fr;gap:0}.answer-grid>article{padding:22px 0}.answer-grid h3{font-size:23px}.answer-grid p{font-size:16px}.bn-proc .grid{grid-template-columns:1fr!important;gap:30px}.bn-proc .grid:before{display:none}.bn-proc .step{text-align:left;display:grid;grid-template-columns:55px 1fr;column-gap:17px}.bn-proc .node{grid-row:span 2;width:49px;height:49px;margin:0;font-size:21px}.bn-proc .step p{max-width:none;margin:10px 0 0}.bn-proc h3{font-size:21px}.bn-cta.bn-v1 .grid{grid-template-columns:1fr;gap:30px}.bn-cta h2{font-size:33px!important}.bn-cta .phone-cta{font-size:20px}.bn-cov .grid{grid-template-columns:1fr;gap:28px}.bn-cov .map{min-height:350px}.bn-cov iframe{height:380px}.resource-intro>.wrap{grid-template-columns:1fr;gap:28px}.resource-facts{padding:23px}.bn-svc.bn-v1 .grid{grid-template-columns:1fr!important;gap:22px}.editorial-feed .grid{grid-template-columns:1fr}.svc-card .bd{padding:23px}.svc-card h3{font-size:24px!important}.footer-grid{grid-template-columns:1fr;gap:35px}.footer-logo{width:225px}.footer-bottom{display:block}.footer-bottom p+p{margin-top:10px}.bn-footer{padding-bottom:100px}.mobile-actions{position:fixed;bottom:0;left:0;right:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #DDE6F2;background:white;padding:9px;gap:8px;box-shadow:0 -3px 15px #1B243012}.mobile-actions a{padding:12px 6px;text-align:center;min-height:46px;font-size:13px;font-weight:800;border-radius:8px;color:#143F8C;background:#E7EEFB}.mobile-actions a:last-child{background:#1D5FD0;color:white}.ks-calculator{grid-template-columns:1fr;padding:21px;gap:25px}.ks-calc-result{padding:24px}.reading-hero,.bn-post-hero{padding-top:38px}.reading-section{padding:32px 0}.reading-section h2{font-size:27px}.reading-section p{font-size:17px}.table-scroll th,.table-scroll td{padding:15px}.table-scroll:focus-visible{outline-offset:2px}}
@media(max-width:359px){.brand{width:169px}.menu-toggle{padding:11px;font-size:14px}.bn-hero.bn-v1 h1{font-size:34px}.form-grid{grid-template-columns:1fr}.lead-card{padding:18px!important}.header-phone{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.lead-card form.lead-form{display:grid;gap:13px}.lead-card form.lead-form>.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lead-card .lead-form label{display:grid;gap:6px;text-transform:none;letter-spacing:0;font-size:13px;line-height:1.3;margin:0}.lead-card .lead-form label.consent{display:flex;font-size:11.5px;line-height:1.5}.lead-card .lead-form label span{display:inline}.lead-card .lead-form input::placeholder,.lead-card .lead-form textarea::placeholder{color:#52627A}.hero-call .btn-outline{border-color:#1D5FD0;color:#143F8C;background:#fff}.bn-cov .map{width:100%;min-width:0;aspect-ratio:auto}.bn-svc .head{max-width:760px;margin:0 auto 38px;text-align:center}.bn-svc .card .ph{min-height:170px}.bn-proc .grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.bn-hero.bn-v1 .art{order:0}.bn-hero.bn-v1 .copy{order:0}.lead-card form.lead-form>.form-grid{gap:10px}.lead-card .lead-form label.consent{font-size:12px}.bn-cov .map{min-width:0;width:100%}.bn-svc .head{text-align:left}}
@media(max-width:359px){.lead-card form.lead-form>.form-grid{grid-template-columns:1fr}}

.form-grid{align-items:start}.lead-card .lead-form input:not([type=checkbox]){height:44px}.bn-post-hero,.reading-hero{position:static;inset:auto}.article-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:26px}.article-action{background:#F4F7FB}.calc-label{font-size:15px;font-weight:800;color:#143F8C}

.hero-trust{font-size:15px;font-weight:700;color:#143F8C;margin:15px 0}.ph{width:100%;min-width:0}.bn-hero .art,.bn-overview.has-photo .art{min-width:0;width:100%}.table-scroll td p{margin:0}
@media(max-width:760px){.bn-overview.has-photo .grid{grid-template-columns:minmax(0,1fr)}.bn-hero.bn-v1 .grid>*{min-width:0;width:100%}}

@media(min-width:1101px){.site-header{position:sticky;top:0;z-index:40}}

.lead-card .lead-form .form-grid label{display:block}.lead-card .lead-form .form-grid label input{display:block;margin-top:6px}@media(min-width:1101px){.lead-form[id]{scroll-margin-top:130px}}

/* Keep the two-column Home budget readable without a sideways search. */
#home-budget table{min-width:0;width:100%;table-layout:fixed}#home-budget th:first-child{width:35%}
.inline-links a.btn{text-decoration:none}.inline-links a.btn-blue{color:#fff;min-height:44px}

.lead-card form.lead-form{padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}.custom-brand{display:block;width:100%;height:auto}.brand .custom-brand{max-height:58px}.footer-logo .custom-brand{max-height:72px}.ks-model-method p{margin-block:14px}.article-date{font-size:14px}.bn-spec p,.ks-calc-help{overflow-wrap:anywhere}
/* Stillwater compact single-row phone access and a legible service trust strip. */
.bn-sig .row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.bn-sig .strip-chip{display:flex;align-items:center;gap:10px}.bn-sig .strip-chip b{font-size:14px;line-height:1.4}.ck:after{content:'';display:block;width:7px;height:4px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(3px,4px) rotate(-45deg)}.answer-grid .ph{height:190px;min-height:0;margin-bottom:22px;border-radius:12px;overflow:hidden}
@media(max-width:1100px){.site-header .header-inner{display:grid!important;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:8px;padding-block:14px;min-height:78px}.site-header .brand{grid-column:1;grid-row:1;width:190px;max-width:100%;margin:0}.site-header .menu-toggle{grid-column:3;grid-row:1;width:44px;height:44px;min-height:44px;padding:0;font-size:0;display:flex;justify-content:center;align-items:center}.site-header .menu-toggle span{font-size:20px}.site-header .header-actions{display:contents!important}.site-header .header-phone{grid-column:2;grid-row:1;font-size:16px;min-height:44px;display:flex;align-items:center;padding:0}.site-header #main-nav{grid-column:1/-1;grid-row:2;min-width:0;margin:0;padding-top:10px}.bn-sig .row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px}.bn-sig .strip-chip b{font-size:13px}}
@media(max-width:500px){.site-header .header-inner{width:calc(100% - 28px);gap:7px}.site-header .brand{width:142px}.site-header .header-phone{font-size:14px}.site-header .brand .custom-brand{width:142px;max-width:100%}}
@media(max-width:359px){.site-header .header-inner{width:calc(100% - 24px);gap:6px;grid-template-columns:minmax(0,1fr) auto 44px}.site-header .brand,.site-header .brand .custom-brand{width:118px}.site-header .header-phone{font-size:13px}}
@media(max-width:1100px){body:has(.menu-toggle[aria-expanded=true])>.mobile-actions{display:none!important}#main-nav.open{overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px}}
/* The Blog is a reading archive; latest previews remain compact article cards. */
.editorial-feed[data-feed-mode=archive] .grid{display:grid;grid-template-columns:1fr;gap:0}.editorial-feed[data-feed-mode=archive] .card{display:grid;grid-template-columns:minmax(240px,32%) minmax(0,1fr);padding:28px 0;border:0;border-top:1px solid #D4DFEF;border-radius:0;box-shadow:none;background:transparent}.editorial-feed[data-feed-mode=archive] .card .ph{height:220px;min-height:0;border-radius:12px;overflow:hidden}.editorial-feed[data-feed-mode=archive] .card .bd{padding:6px 0 6px 32px}.editorial-feed[data-feed-mode=archive] h3{font-size:28px;line-height:1.15;max-width:30ch}.editorial-feed[data-feed-mode=archive] .card p{font-size:16px;max-width:60ch}.editorial-feed[data-feed-mode=latest] .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.editorial-feed[data-feed-mode=archive] .card{grid-template-columns:1fr;gap:20px}.editorial-feed[data-feed-mode=archive] .card .bd{padding:0}.editorial-feed[data-feed-mode=archive] h3{font-size:25px}.editorial-feed[data-feed-mode=latest] .grid{grid-template-columns:1fr}}
/* Keep two-column answers readable and stack longer three-column comparisons on phones. */
@media(max-width:760px){.table-columns-2 table{min-width:0!important;width:100%;table-layout:fixed}.table-columns-2 th:first-child{width:32%}.table-columns-2 th,.table-columns-2 td{padding:14px 12px;overflow-wrap:anywhere}.table-columns-3 table{min-width:0!important;width:100%;table-layout:fixed}.table-columns-3 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.table-columns-3 tbody,.table-columns-3 tr,.table-columns-3 td,.table-columns-3 th[scope=row]{display:block;width:auto!important}.table-columns-3 tbody tr+tr{border-top:1px solid #C7D5E9}.table-columns-3 th[scope=row]{padding:16px 18px;background:#E6EEFC;color:#143F8C}.table-columns-3 td{padding:12px 18px;border:0}.table-columns-3 td::before{content:attr(data-label);display:block;font-size:13px;font-weight:800;color:#143F8C;margin-bottom:5px}.table-columns-3 td p{margin:0}}

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