/* Self-hosted webfonts (Website decision 29): files in /assets/fonts, sources and licenses in site.json theme.fonts. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/archivo-400-700-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/archivo-400-700-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/public-sans-400-700-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/public-sans-400-700-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Generated by sitegen from capture cap-20261003T034739Z.sqlite — do not hand-edit; regenerate or change through a Website CR.
   Structure (space, radius, type scale, motion) is the hellojade theme kit (brand/tokens.json);
   color and type families are the customer's, from the capture's theme kit, contrast-fitted (site.json theme.adjusted). */
:root{
  color-scheme:light;
  /* ADR-016 design tokens (lane s02-f owns this block; other lanes use these names, never raw px).
     D3 spacing: hybrid fluid 8px scale. Name = multiple of 4px at desktop. Each step is clamp()-fluid
     from 360px to 1440px, then capped. The on-scale steps are --s2 8 · --s4 16 · --s6 24 · --s8 32 ·
     --s12 48 · --s16 64 · --s24 96. --s1 (4) and --s3 (12) are fixed micro steps for inside a component
     (icon gaps, chip padding), never between sections. */
  --s1:4px;--s2:8px;--s3:12px;
  --s4:clamp(12px,10.667px + 0.3704vw,16px);
  --s6:clamp(16px,13.333px + 0.7407vw,24px);
  --s8:clamp(24px,21.333px + 0.7407vw,32px);
  --s12:clamp(32px,26.667px + 1.4815vw,48px);
  --s16:clamp(40px,32px + 2.2222vw,64px);
  --s24:clamp(56px,42.667px + 3.7037vw,96px);
  /* D4 section padding: 96px desktop / 56px phone */
  --section-y:var(--s24);
  /* D1 container, D2 measure */
  --wrap:1280px;--gutter:var(--s4);--measure:68ch;
  /* component heights (not spacing steps): the header row and the phone CTA bar; what sits under or over them offsets by these */
  --head-h:80px;--bar-h:68px;
  /* D13/D20 shape: theme.shape pill | rounded | square (default pill) */
  --radius-btn:8px;--radius-card:8px;--radius-img:8px;
  --r-sm:6px;--r-md:6px;--r-lg:8px;--r-xl:8px;--r-pill:999px;
  /* D6/D7 type: body 18px; fluid 1.25 (major third) scale, 1.2 at 360px → 1.25 at 1440px */
  --fs-0:18px;
  --fs--1:clamp(14.4px,14.4px + 0vw,15px);
  --fs-1:clamp(21.6px,21.3px + 0.0833vw,22.5px);
  --fs-2:clamp(25.92px,25.183px + 0.2046vw,28.13px);
  --fs-3:clamp(31.1px,29.747px + 0.3759vw,35.16px);
  --fs-4:clamp(37.32px,35.11px + 0.6139vw,43.95px);
  --fs-5:clamp(44.79px,41.41px + 0.9389vw,54.93px);
  --fs-small:var(--fs--1);--fs-body:var(--fs-0);--fs-h3:var(--fs-1);--fs-h2:var(--fs-3);--fs-h1:var(--fs-4);--fs-display:var(--fs-5);
  --lh-body:1.6;--lh-tight:1.15;
  --ease:cubic-bezier(0.215,0.61,0.355,1);--dur:180ms;
  /* D5 color: light pages with brand accents (customer skin, contrast-fitted) */
  --bg:#ffffff;--surface:#f5f8fa;--ink:#121e23;--muted:#505c62;--border:#d8dfe3;
  --brand:#DF002C;--on-brand:#ffffff;--brand-text:#cf0028;--accent:#007582;
  --focus:#cf0028;
  --section-alt:var(--surface);--scrim:rgba(0,0,0,.6);
  --font-head:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--font-body);overflow-wrap:break-word}
img{max-width:100%;height:auto}
h1,h2,h3,.h3{font-family:var(--font-head);line-height:var(--lh-tight);margin:0 0 var(--s4);letter-spacing:-0.01em}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2);font-weight:700}
h3,.h3{font-size:var(--fs-h3);font-weight:700}
p{margin:0 0 var(--s4)}
a{color:var(--brand-text)}
a:hover{text-decoration-thickness:2px}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:768px){.wrap{--gutter:var(--s8)}}
.narrow>*{max-width:var(--measure)}
/* ADR-015 layout: a narrow section keeps the site grid's left edge (1280px .wrap); only its content is narrowed */
/* the skip link sits above the sticky header (z 20) and the drawer (z 30) when it takes the focus */
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--on-brand);padding:var(--s2) var(--s4);z-index:100;display:inline-flex;align-items:center;min-height:44px;font-weight:700;border-radius:var(--r-sm)}
.skip:focus{position:fixed;left:var(--s2);top:var(--s2);outline:3px solid var(--on-brand);outline-offset:-6px;box-shadow:0 4px 16px rgba(0,0,0,.3)}

/* header — ADR-016 D15 mega menu, D16 full-screen drawer, D17 sticky + shrinks on scroll (CSS scroll timeline, no JS) */
.site-head{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.head-row{display:flex;align-items:center;gap:var(--s4);min-height:var(--head-h)}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);margin-right:auto;min-height:44px}
.brand-logo{height:48px;width:auto;max-width:200px;object-fit:contain}
.brand-name{font:700 var(--fs-1)/1.1 var(--font-head)}
.nav-wide{display:none}
.nav-list{display:flex;gap:var(--s1);list-style:none;margin:0;padding:0}
.nav-wide a,.drawer-nav>a,.drawer-group summary{color:var(--ink);text-decoration:none;font-weight:600}
.nav-item>a{padding:var(--s2) var(--s3);border-radius:var(--r-sm);min-height:44px;display:flex;align-items:center}
.nav-item>a:hover,.nav-item:focus-within>a{background:var(--surface)}
.has-mega>a::after{content:"";width:6px;height:6px;margin-left:var(--s2);border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.nav-wide .nav-item>a[aria-current]{color:var(--brand-text);box-shadow:inset 0 -2px 0 var(--brand-text)}
.site-head .head-call{display:none;white-space:nowrap}
/* D17 Call always visible: in the header from 768px; below that the fixed phone bar (lane A, max-width 767px) carries it */
@media (min-width:768px){.site-head .head-call{display:inline-flex}}
/* 1024–1279px: the full menu and the Call button share one row; the button drops its word (the number and its aria-label stay) and menu items tighten, so the row never spills */
/* fix-1028: measured at 1024 with a classic 15px scrollbar (1009px usable) the row needed 1042px and "Service areas" wrapped: no menu label ever wraps, items and gaps tighten, the logo caps lower */
.nav-item>a{white-space:nowrap}
@media (min-width:1024px) and (max-width:1279px){.head-call-w{display:none}.nav-item>a{padding:var(--s2) var(--s1)}.nav-list{gap:0}.head-row{gap:var(--s3)}.brand-logo{max-width:160px}.site-head .head-call{padding:0 var(--s4)}}
/* D15 mega menu: opens on hover and keyboard focus (:focus-within); the top link still goes to the index page */
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:0 16px 32px rgba(0,0,0,.12);padding:var(--s8) 0;max-height:calc(100vh - 120px);overflow-y:auto}
.has-mega:hover>.mega,.has-mega:focus-within>.mega{display:block}
.mega-grid{display:grid;gap:var(--s6) var(--s8);grid-template-columns:repeat(4,minmax(0,1fr))}
.mega-head{display:flex;align-items:center;min-height:44px;font:700 var(--fs-0)/1.2 var(--font-head);color:var(--ink);margin:0;text-decoration:none}
a.mega-head:hover{color:var(--brand-text)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:flex;align-items:center;min-height:44px;color:var(--muted);font-weight:500}
.mega li a:hover{color:var(--brand-text)}
/* D16 drawer: <details> opens a full-screen sheet; groups expand; Call + Estimate pinned at the bottom */
.nav-narrow>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--radius-btn);font-weight:600;position:relative;z-index:31;background:transparent;color:var(--ink)}
.nav-narrow>summary::-webkit-details-marker,.drawer-group summary::-webkit-details-marker{display:none}
.burger,.burger::before,.burger::after{display:block;width:18px;height:2px;background:currentColor;position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-6px}.burger::after{top:6px}
.nav-narrow[open] .burger{background:transparent}
.nav-narrow[open] .burger::before{top:0;transform:rotate(45deg)}
.nav-narrow[open] .burger::after{top:0;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column;padding:calc(var(--head-h) + var(--s2)) 0 0}
.drawer-nav{flex:1;overflow-y:auto;padding:0 var(--s4) var(--s6);display:flex;flex-direction:column}
.drawer-nav>a,.drawer-group summary{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--border);font-size:var(--fs-1);font-family:var(--font-head)}
.drawer-group summary{cursor:pointer;justify-content:space-between}
.drawer-group summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-right:var(--s2)}
.drawer-group[open] summary::after{transform:rotate(-135deg)}
.drawer-group ul{list-style:none;margin:0;padding:var(--s2) 0 var(--s4) var(--s4);border-bottom:1px solid var(--border)}
.drawer-group li a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.drawer-group .drawer-sub{font-weight:700}
.drawer-nav a[aria-current],.drawer-group[data-current]>summary{color:var(--brand-text)}
.drawer-pin{display:flex;gap:var(--s3);padding:var(--s4);border-top:1px solid var(--border);background:var(--bg)}
.drawer-pin .btn{padding:0 var(--s6);white-space:nowrap}
.drawer-pin .btn-brand{flex:1;padding:0 var(--s3)}
@media (max-width:1023px){body:has(.nav-narrow[open]){overflow:hidden}}
@media (min-width:1024px){.nav-wide{display:block}.nav-narrow{display:none}}
@media (max-width:479px){.menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@supports (animation-timeline:scroll()){
  .head-row{animation:head-shrink linear both;animation-timeline:scroll(root);animation-range:0 160px}
  .brand-logo{animation:logo-shrink linear both;animation-timeline:scroll(root);animation-range:0 160px}
  @keyframes head-shrink{to{min-height:60px}}
  @keyframes logo-shrink{to{height:36px}}
}

.site-head .nav-narrow[open]>summary{color:var(--ink);border-color:var(--border);background:var(--bg)}
.site-head .nav-narrow[open] .burger::before,.site-head .nav-narrow[open] .burger::after{background:var(--ink)}

/* D26 visible breadcrumbs (match BreadcrumbList) */
/* equal gaps around each "/": a link's tap width comes from its side padding (pulled back over the gap before it, so its
   text, and every line of a wrapped trail, starts on the grid edge), never from a min-width */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;padding:var(--s2) 0;margin:0;font-size:var(--fs-small);color:var(--muted)}
.crumbs li{display:flex;align-items:center}
/* the separator trails its crumb, so a wrapped line never starts with one */
.crumbs li:not(:last-child)::after{content:"/";margin-right:var(--s3)}
.crumbs .crumb-sep{margin-right:var(--s3)}
.crumbs a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);margin-left:calc(-1*var(--s3))}
/* a long trail on a phone: Home / … / parent / this page (n_nav.go CrumbTrail); the text flows as one paragraph, two lines at most */
.crumbs .crumb-gap{display:none}
@media (max-width:767px){
  .crumbs li:has(>.crumb-mid){display:none}
  .crumbs a.crumb-gap{display:inline-flex;min-width:44px;font-weight:700;padding:0 var(--s4);margin:0 calc(-1*var(--s1)) 0 calc(-1*var(--s4))}
  .crumbs span.crumb-gap{display:inline}
  .crumbs ol{display:block}
  .crumbs li{display:inline}
  .crumbs li:not(:last-child){white-space:nowrap}
  /* fix-1028: the markup has no space between crumbs, so the current page's name had no break opportunity after the
     previous "/" and break-word split it ("Belvid/ere" at 360-393). A whole earlier crumb is one box the line may
     wrap after, and no crumb ever breaks inside a word */
  .crumbs li:not(:last-child){display:inline-block}
}
.crumbs,.crumbs a,.crumbs span{overflow-wrap:normal;word-break:normal}

/* D13/D14 buttons: primary = brand fill (contrast-fitted text), secondary = outlined; radius from theme.shape */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s6);border-radius:var(--radius-btn);font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem;font-family:inherit;line-height:1.2;text-align:center;transition:filter var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.btn-lg{min-height:56px;padding:0 var(--s8);font-size:1.0625rem}
.btn-brand{background:var(--brand);color:var(--on-brand)}
.btn-brand:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--brand-text);color:var(--brand-text);background:transparent}
.btn-ghost:hover{background:color-mix(in srgb,var(--brand-text) 8%,transparent)}
.btn-light{background:#fff;color:#111}

/* D11/D12 hero: full-bleed photo, dark scrim, left-aligned H1 + lede + 2 CTAs; home 70vh, inner pages 420px */
.hero{background:var(--surface);padding:var(--s16) 0 var(--s12)}
.hero-img{position:relative;color:#fff;background:#111 center/cover no-repeat;background-image:linear-gradient(var(--scrim),var(--scrim)),url("/assets/hero.webp")}
.hero-home.hero-img{min-height:70vh;display:flex;align-items:center;padding:var(--s16) 0}
.hero-home.hero-img>.wrap{width:100%}
.hero-img a:not(.btn){color:#fff}
.hero-inner{max-width:var(--wrap)}
.hero h1{max-width:20ch}
.hero-home h1{font-size:var(--fs-display)}
.lede{font-size:clamp(18px,17.33px + .1852vw,20px);max-width:var(--measure)}
.hero .lede{color:inherit}
.hero:not(.hero-img) .lede,.page-head .lede{color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);padding:0;margin:var(--s6) 0 0;font-weight:600}
.hero-img .btn-light,.hero-img .btn-ghost{background:transparent;color:#fff;border-color:#fff}
.hero-img .btn-light:hover,.hero-img .btn-ghost:hover{background:rgba(255,255,255,.14)}
.page-head{padding:var(--s16) 0 var(--s12);background:var(--surface)}
.page-head{position:relative;isolation:isolate;min-height:320px;display:flex;align-items:flex-end;color:#fff;background:#111 center/cover no-repeat;background-image:linear-gradient(var(--scrim),var(--scrim)),url("/assets/hero.webp")}
.page-head>.wrap{width:100%}
.page-head .lede,.page-head .eyebrow{color:rgba(255,255,255,.92)}
.page-head a:not(.btn){color:#fff}
.page-head .btn-ghost{color:#fff;border-color:#fff}
.page-head .btn-ghost:hover{background:rgba(255,255,255,.14)}
@media (min-width:768px){.page-head{min-height:420px}}
/* a page's own photo (lane B): <img class="hero-photo"> inside .page-head/.hero covers it under the scrim */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-head:has(.hero-photo)::before,.hero:has(.hero-photo)::before{content:"";position:absolute;inset:0;background:var(--scrim);z-index:-1}

/* D4/D18 sections: fluid section padding (96 desktop / 56 phone); backgrounds alternate white / light surface */
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-small);font-weight:700;color:var(--brand-text);margin:0 0 var(--s2)}
.band{padding:var(--section-y) 0;background:var(--bg)}
.band-tight{padding:var(--s8) 0}
main>.band:nth-child(even of .band){background:var(--section-alt)}
.band:nth-child(even of .band) .card{background:var(--bg)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s8)}
.sec-head h2{margin:0}
.sec-head a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}

/* D9/D10/D25 cards: 3 / 2 / 1 by the container's width (container queries), 4 for small items */
main .wrap{container-type:inline-size}
.cards,.grid-3{list-style:none;padding:0;margin:0;display:grid;gap:var(--s6);grid-template-columns:1fr}
.cards-sm,.grid-4{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4);grid-template-columns:1fr}
@container (min-width:480px){.cards-sm,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:600px){.cards,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:720px){.cards-sm,.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:900px){.cards,.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-sm,.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card>a,.card-pad{display:flex;flex-direction:column;height:100%;padding:var(--s6);color:var(--ink);text-decoration:none}
.card:hover{border-color:var(--brand-text);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card p{color:var(--muted)}
.card .more{margin-top:auto;font-weight:700;color:var(--brand-text)}
.card h3{margin-bottom:var(--s2)}

.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--bg);color:var(--ink);text-decoration:none;font-weight:600}
.chips a:hover{border-color:var(--brand-text);color:var(--brand-text)}
.chips-lg a{min-height:52px;padding:0 var(--s6)}
.note{margin-top:var(--s6);color:var(--muted)}

.offers{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s3)}
.offers li{border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--r-md);padding:var(--s3) var(--s4);font-weight:600;background:var(--surface)}

.faq details{border-bottom:1px solid var(--border);padding:var(--s2) 0}
.faq summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;padding:var(--s2) 0}
.faq details p{color:var(--muted)}

/* label/value rows: every dt/dd a 44px flex row centered on one axis (ADR-015 layout fix; checked by D30) */
.facts{display:grid;grid-template-columns:max-content 1fr;gap:0 var(--s6);margin:0;align-items:baseline}
.facts dt,.facts dd{display:flex;align-items:center;min-height:44px}
.facts dt{font-weight:700}
.facts dd{margin:0}
.facts a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:480px){.facts{grid-template-columns:1fr;gap:0}.facts dd{margin-bottom:var(--s2)}}

.contact-grid{display:grid;gap:var(--s8);grid-template-columns:1fr}
@media (min-width:900px){.contact-grid{grid-template-columns:3fr 2fr}}
.form{display:grid;gap:var(--s4)}
.form label{display:grid;gap:var(--s1);font-weight:600}
.form input,.form select,.form textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:var(--r-md);padding:var(--s3);min-height:48px;width:100%}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s6)}

.cta{background:var(--brand);color:var(--on-brand);padding:var(--section-y) 0}
.cta h2{color:inherit}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;justify-content:space-between}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.cta .btn-brand{background:var(--on-brand);color:var(--brand)}
.cta .btn-ghost{border-color:var(--on-brand);color:var(--on-brand)}

/* D21 footer: offices · services · all service areas (2 tracks) · company · contact + social; legal row under it */
.site-foot{background:var(--surface);border-top:1px solid var(--border);padding:var(--s16) 0 var(--s6);font-size:var(--fs-small)}
.foot-grid{display:grid;gap:var(--s8) var(--s6);grid-template-columns:1fr}
@media (min-width:600px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.foot-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.foot-grid>.foot-areas{grid-column:span 2}}
.foot-col p{margin:0 0 var(--s2)}
.foot-name{font:700 var(--fs-0)/1.3 var(--font-head)}
.foot-head{font:700 var(--fs-0)/1.3 var(--font-head);margin:0 0 var(--s2)}
.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.foot-list-2{display:block;columns:2;column-gap:var(--s6)}
.foot-list a,.site-foot p a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;min-width:0}
.foot-list li{min-width:0}
.foot-base{border-top:1px solid var(--border);margin-top:var(--s8);padding-top:var(--s4);color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s6)}
.foot-base p{margin:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (forced-colors:active){.btn,.chips a,.card{border:1px solid CanvasText}}

/* review note (preview builds only) */
.draft-note{background:var(--surface);border-bottom:1px solid var(--border);color:var(--ink);font-size:var(--fs-small);padding:var(--s2) 0}
/* posts */
.prose{font-size:var(--fs-body)}
.prose h2{font-size:var(--fs-h3);margin-top:var(--s8)}
.prose h3,.prose h4{font-size:var(--fs-body);margin-top:var(--s6)}
.prose ul,.prose ol{padding-left:var(--s8);margin:0 0 var(--s4)}
.prose li{margin:0 0 var(--s2)}
.prose blockquote{margin:0 0 var(--s4);padding-left:var(--s4);border-left:3px solid var(--border);color:var(--muted)}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px solid var(--border)}
.post-list a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);padding:var(--s3) 0;min-height:44px;align-items:baseline;text-decoration:none;color:var(--ink)}
.post-list a:hover .post-title{text-decoration:underline}
.post-list .post-title{font-weight:600;flex:1 1 20ch}
.post-list time{color:var(--muted);font-size:var(--fs-small);white-space:nowrap}
/* overlay pages (sitegen-overlay/1) */
.head-brand{background:var(--brand);border-bottom-color:transparent}
.head-brand .brand,.head-brand .nav-wide a{color:var(--on-brand)}
.head-brand .nav-wide a:hover{background:rgba(255,255,255,.12)}
.head-brand .nav-wide a[aria-current=page]{color:var(--on-brand);box-shadow:inset 0 -2px 0 var(--on-brand)}
.head-brand .head-call{background:var(--on-brand);color:var(--brand)}
.head-brand .nav-narrow>summary{border-color:rgba(255,255,255,.5);color:var(--on-brand)}
.head-brand .burger,.head-brand .burger::before,.head-brand .burger::after{background:var(--on-brand)}
.head-brand .brand-logo{height:56px}
.hero-home{padding:var(--s24) 0 var(--s16)}
.hero .eyebrow{color:inherit;opacity:.9}
.lede-sm{font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:68ch}
.split{display:grid;gap:var(--s8);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split-r .split-img{order:2}}
.split-img{margin:0}
.split-img img{display:block;width:100%;height:auto;border-radius:var(--r-xl);object-fit:cover}
.ticks{padding-left:var(--s6);margin:0 0 var(--s4)}
.ticks li{margin-bottom:var(--s2)}
.ticks li::marker{color:var(--accent)}
.block-links{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.card-img{display:block;margin:calc(-1*var(--s6)) calc(-1*var(--s6)) var(--s4);overflow:hidden;border-radius:var(--r-xl) var(--r-xl) 0 0;aspect-ratio:16/9;background:var(--surface)}
.card-img img{display:block;width:100%;height:100%;object-fit:cover}
.people .card-img{aspect-ratio:1/1;max-width:168px;margin:0 0 var(--s4);border-radius:var(--r-lg)}
.card-meta{font-weight:700;color:var(--brand-text)!important;-webkit-line-clamp:unset!important;margin-bottom:var(--s2)}
.card-tel a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);max-width:100%}
.table-scroll table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.table-scroll caption{text-align:left;padding:var(--s3) var(--s4);font-weight:700}
.table-scroll th,.table-scroll td{padding:var(--s2) var(--s3);border-top:1px solid var(--border);text-align:left;white-space:nowrap}
.table-scroll thead th{background:var(--surface);border-top:0}
/* website#204: on a phone a table stacks into one card per row (row header on top, each cell labelled with its column)
   instead of a 560px table scrolled sideways inside a 360px box */
@media (max-width:599px){.table-scroll{overflow-x:visible}.table-scroll table{min-width:0}.table-scroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.table-scroll tbody,.table-scroll tr,.table-scroll th[scope=row],.table-scroll td{display:block}.table-scroll tr{border-top:1px solid var(--border);padding:var(--s2) var(--s3)}.table-scroll th[scope=row],.table-scroll td{border-top:0;padding:var(--s1) 0;white-space:normal;overflow-wrap:anywhere}.table-scroll td[data-label]::before{content:attr(data-label) ": ";font-weight:600}}
.gallery{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.gallery figcaption{padding-top:var(--s2);font-size:15px;color:var(--muted)}
.gallery figcaption strong{color:var(--ink)}
.club-widget{margin-top:var(--s4)}
.band-cta{text-align:center}
.band-cta .block-links{justify-content:center}
[id]{scroll-margin-top:88px}
.form-err{margin:0;padding:var(--s3);border-left:4px solid #b3261e;background:color-mix(in srgb,#b3261e 8%,var(--bg));color:var(--ink);font-weight:600}
.form [aria-invalid="true"]{border-color:#b3261e}

/* s02-e start — 404 search (R48), accessibility page (R64). Moves under F's templates/css/ concatenation. */
.nf-search{margin:var(--s6) 0 0}
.nf-search label{display:block;font-weight:700;margin:0 0 var(--s2)}
.nf-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.nf-row input{flex:1 1 220px;min-height:44px;padding:0 var(--s3);font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:var(--r-sm)}
.nf-status{margin:var(--s4) 0 var(--s2);color:var(--muted)}
.nf-results{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.nf-results a{display:inline-flex;align-items:center;min-height:44px}
.nf-popular{display:grid;gap:var(--s8)}
@media (min-width:1024px){.nf-popular{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prose ul{padding-left:var(--s6)}
.prose li{margin:0 0 var(--s2)}
/* s02-e end */

/* css/00-f-design.css */
/* S02 lane F (ADR-016): design-system components. Base tokens live in site.css.tmpl :root.
   Other lanes: add templates/css/<lane>.css (concatenated in name order after this file); use the tokens, never raw px. */
.sechead{margin-bottom:var(--s8);max-width:var(--measure)}
.sec-head .sechead{margin-bottom:0}
.sechead h2{margin:0}
.sechead .eyebrow{margin-bottom:var(--s2)}
.sec-intro{margin:var(--s2) 0 0;color:var(--muted);font-size:var(--fs-0)}

/* D20 corner radius follows theme.shape on images and media */
.page-photo img,.split-img img,.gallery img,.card-img{border-radius:var(--radius-img)}
.card .card-img{border-radius:0}

/* D27 specs/comparisons: real tables; under 600px each row stacks into labeled lines
   (cells carry data-label where the generator knows the column, e.g. club.html) */
.prose table,.spec-table{border-collapse:collapse;width:100%;margin:0 0 var(--s6);font-size:var(--fs-small)}
.prose th,.prose td,.spec-table th,.spec-table td{padding:var(--s2) var(--s3);border-top:1px solid var(--border);text-align:left;vertical-align:top}
.prose thead th,.spec-table thead th{background:var(--surface);border-top:0}
@media (max-width:599px){
  .prose table,.spec-table{display:block}
  .prose thead,.spec-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .prose tbody,.prose tr,.prose th,.prose td,.spec-table tbody,.spec-table tr,.spec-table th,.spec-table td{display:block}
  .prose tr,.spec-table tr{border-top:1px solid var(--border);padding:var(--s2) 0}
  .prose th,.prose td,.spec-table th,.spec-table td{border-top:0;padding:var(--s1) 0}
  .prose td[data-label]::before,.spec-table td[data-label]::before{content:attr(data-label) ": ";font-weight:600}
}

/* D24 motion: a subtle fade-up as content scrolls in. Pure CSS (view timeline): content already in the
   first viewport is past its range at load, so nothing above the fold animates. Fill is forwards only: below
   the fold (not yet entering) nothing is applied, so content is never hidden from a full-page render or a
   visitor without scroll; it fades from the moment its top crosses the viewport bottom. Off under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    main>section:not(:first-child) :is(.card,.sechead,.sec-head,.split,.faq details,.gallery li){animation:fade-up linear forwards;animation-timeline:view();animation-range:entry 0% entry 30%}
    @keyframes fade-up{from{opacity:0;transform:translateY(var(--s4))}to{opacity:1;transform:none}}
  }
}

/* css/50-a-estimate.css */

/* s02-a start — estimate band, phone CTA bar, thank-you page (ADR-015 R1 R2 R4 R57 R59 R60 R61 R62, ADR-016 D22 D23) */
.est-band{background:var(--section-alt);border-top:1px solid var(--border);padding:var(--section-y) 0;scroll-margin-top:var(--s16)}
.est-grid{display:grid;gap:var(--s8);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.est-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}.est-grid.est-solo{grid-template-columns:minmax(0,1fr)}}
.est-main>*{max-width:var(--measure)}
.est [hidden]{display:none!important}
.est fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s4)}
.est legend{font:700 var(--fs-h3)/1.25 var(--font-head);padding:0;margin:0 0 var(--s3)}
.est legend:focus{outline:none}
.est .est-step+.est-step{margin-top:var(--s6)}
.est.est-js .est-step+.est-step{margin-top:0}
.est-pair{display:grid;gap:var(--s4)}
@media (min-width:600px){.est-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.est-opt,.est-hint{font-weight:400;color:var(--muted);font-size:var(--fs-small)}
.est-hint{margin:0}
.est-nav{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.form .est-nav .btn{justify-self:auto}
.est-progress{list-style:none;display:flex;gap:var(--s2);padding:0;margin:0;counter-reset:est}
.est-progress li{flex:1;counter-increment:est;font-size:var(--fs-small);font-weight:600;color:var(--muted);padding-top:var(--s2);border-top:4px solid var(--border)}
.est-progress li::before{content:counter(est) ". "}
.est-progress li.est-done{border-color:var(--brand-text);color:var(--ink)}
.est-progress li[aria-current=step]{border-color:var(--brand);color:var(--ink)}
.est-roof{display:grid;gap:var(--s2);justify-items:start}
.est-roof-out{margin:0}
.est-roof-out:empty{display:none}
.est-trust{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s6)}
.est-facts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.est-facts>li{display:grid;grid-template-columns:7em minmax(0,1fr);gap:var(--s1) var(--s3);align-items:baseline;min-width:0}
.est-k{font-weight:700}
.est-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.est-facts>.est-rating{font-size:var(--fs-h3);align-items:center;grid-template-columns:auto minmax(0,1fr)}
.est-star{color:var(--brand-text);font-size:1.4em;line-height:1}
.est-sub{color:var(--muted);font-size:var(--fs-small)}
.est-facts>.est-quote-li,.est-facts>.est-fine{display:block}
.est-quote{margin:0;border-left:4px solid var(--brand);padding-left:var(--s4)}
.est-quote blockquote{margin:0}
.est-quote p{margin:0 0 var(--s2);font-style:italic}
.est-quote figcaption{font-size:var(--fs-small);color:var(--muted)}
.est-phone a{font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.est-facts>.est-calc{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.est-calc[hidden]{display:none!important}
.est-calc label{display:grid;gap:var(--s1);font-weight:600}
.est-calc input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:var(--r-md);padding:var(--s3);min-height:48px;width:100%}
.est-fine{font-size:var(--fs-small);color:var(--muted)}
.est-next{padding-left:var(--s8);margin:0 0 var(--s6);display:grid;gap:var(--s3)}
.est-booking{margin:0 0 var(--s6)}
.est-thanks-links{display:flex;flex-wrap:wrap;gap:var(--s3)}
.ctabar{display:none}
@media (max-width:767px){
  body:has(.ctabar){padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
  .ctabar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s2);position:fixed;left:0;right:0;bottom:0;z-index:6;padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(0,0,0,.12);transition:transform var(--dur) var(--ease),visibility var(--dur)}
  .ctabar .btn{width:100%;padding:0 var(--s3)}
  body.est-in-view .ctabar{transform:translateY(110%);visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.ctabar{transition:none}}
@media print{.ctabar,.est-band{display:none}}
/* s02-a end */
.est .field-err{display:block;margin-top:var(--s1);color:#b3261e;font-weight:600;font-size:var(--fs-small)}
.est [aria-invalid=true]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}

/* css/60-l-leadform.css */

/* njg lane C start — multi-step lead form + typed request forms (l_leadform.go, -lead-form steps only) */
.lf{--lf-err:#b3261e;max-width:var(--measure);scroll-margin-top:var(--s16)}
.lf :is(input,select,textarea,.lf-legend,.lf-choice){scroll-margin-top:calc(var(--s16) + var(--s12))}
.lf [hidden]{display:none!important}
.lf fieldset{border:0;padding:0;margin:0;min-width:0}
.lf-step{display:grid;gap:var(--s4)}
.lf .lf-step+.lf-step{margin-top:var(--s6)}
.lf.lf-js .lf-step+.lf-step{margin-top:0}
.lf-legend{font:700 var(--fs-h3)/1.25 var(--font-head);padding:0;margin:0 0 var(--s2)}
.lf-legend:focus{outline:none}
.lf-field{display:grid;gap:var(--s1);min-width:0}
.lf .lf-field label,.lf .lf-label{font-weight:600;display:block}
.lf-opt,.lf-hint{font-weight:400;color:var(--muted);font-size:var(--fs-small)}
.lf-hint{margin:0}
.lf-hint:empty{display:none}
.lf input:not([type=radio]):not([type=file]),.lf select,.lf textarea{min-height:48px}
.lf-zip{max-width:12ch}
.lf-pair{display:grid;gap:var(--s4)}
@media (min-width:600px){.lf-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.lf-choice{display:grid;gap:var(--s2)}
.lf-choice>legend{padding:0;margin:0 0 var(--s2)}
.lf-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.lf-chip{position:relative;display:inline-flex;min-width:0}
.lf-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lf-chip span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 var(--s4);border:1px solid var(--muted);border-radius:var(--r-md);background:var(--bg);color:var(--ink);font-weight:600;cursor:pointer;text-align:center;overflow-wrap:anywhere}
.lf-chip input:checked+span{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--bg));box-shadow:inset 0 0 0 1px var(--brand)}
.lf-chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.lf-nav{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.lf .lf-nav .btn{justify-self:auto;min-height:44px}
.lf-progress{display:grid;gap:var(--s2)}
.lf-progress-text{margin:0;font-weight:700;font-size:var(--fs-small)}
.lf-bar{height:8px;border-radius:999px;background:var(--border);overflow:hidden}
.lf-bar span{display:block;height:100%;width:25%;background:var(--brand);border-radius:inherit;transition:width var(--dur,.2s) var(--ease,ease)}
.lf-bar[aria-valuenow="2"] span{width:50%}
.lf-bar[aria-valuenow="3"] span{width:75%}
.lf-bar[aria-valuenow="4"] span{width:100%}
.lf-steps{list-style:none;display:flex;gap:var(--s2);padding:0;margin:0;font-size:var(--fs-small);color:var(--muted)}
.lf-steps li{flex:1;min-width:0;overflow-wrap:anywhere}
.lf-steps li[aria-current=step]{color:var(--ink);font-weight:700}
.lf-steps li.lf-done{color:var(--ink)}
@media (max-width:479px){.lf-steps{display:none}}
.lf-live,.lf-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lf .field-err{display:block;margin-top:var(--s1);color:var(--lf-err);font-weight:600;font-size:var(--fs-small)}
.lf [aria-invalid=true]{border-color:var(--lf-err);box-shadow:0 0 0 1px var(--lf-err)}
.lf.lf-js :user-invalid{border-color:var(--lf-err)}
.lf-choice[aria-invalid=true]{box-shadow:none}
.lf-choice[aria-invalid=true] .lf-chip span{border-color:var(--lf-err)}
.lf-file{padding:var(--s2)!important;min-height:44px}
.lf-thumbs{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);padding:0;margin:0}
.lf-thumbs:empty{display:none}
.lf-thumbs li{position:relative;width:88px}
.lf-thumbs canvas{display:block;width:88px;height:88px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--section-alt)}
.lf-thumbs button{margin-top:var(--s1);width:100%;min-height:44px;font:inherit;font-size:var(--fs-small);border:1px solid var(--muted);border-radius:var(--radius-btn);background:var(--bg);color:var(--ink);cursor:pointer}
.lf-thumbs li[data-state=busy] canvas{opacity:.5}
.lf-more{margin:var(--s4) 0 0;font-size:var(--fs-small);color:var(--muted)}
.lf-more a{display:inline-flex;align-items:center;min-height:44px}
@media (prefers-reduced-motion:reduce){.lf-bar span{transition:none}}
@media (forced-colors:active){.lf-chip input:checked+span{outline:2px solid CanvasText}.lf-bar span{background:Highlight}}
/* njg lane C end */
.lf-types{margin:var(--s4) 0 0;max-width:var(--measure)}
.lf-types-h{margin:0;font-size:var(--fs-small);color:var(--muted)}
.lf-types ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--s4);padding:0;margin:0}
.lf-types a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small)}

/* css/61-l-leadtools.css */
/* njg lane F start — lead form tools in lane C's slots (l_leadtools.go, -lead-tools only) */
.lf .lf-slot{display:grid;gap:var(--s3);min-width:0}
.lf .lt-h{margin:0;font-weight:700}
.lt-verdict{margin:var(--s1) 0 0;padding:var(--s2) var(--s3);border-radius:var(--r-md);border:1px solid var(--border);background:var(--section-alt);font-size:var(--fs-small);overflow-wrap:anywhere}
.lt-verdict[data-v=in]{border-color:color-mix(in srgb,var(--brand) 55%,var(--border))}
.lt-verdict[data-v=out]{border-style:dashed}
.lf .lt-est,.lf .lt-fin,.lf .lt-book,.lf .lt-resume{padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--section-alt)}
.lt-range{margin:0;font-weight:700;font-size:var(--fs-h4,1.125rem);overflow-wrap:anywhere}
.lt-range:empty{display:none}
.lf .lt-measure-btn,.lf .lt-book-clear,.lf .lt-zip-go{justify-self:start;min-height:44px}
.lf .lt-zip-go[hidden]{display:none}
.lf .lt-measure-btn[disabled]{opacity:.6;cursor:progress}
.lt-resume-text{margin:0;font-weight:600}
.lf-consent{min-width:0}
.lf-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:start;font-size:var(--fs-small);font-weight:400!important;cursor:pointer}
.lf-check input{width:24px;height:24px;min-height:0!important;margin:0;accent-color:var(--brand)}
.lf-check span{overflow-wrap:anywhere}
.lt-fin-grid{align-items:end}
@media (forced-colors:active){.lt-verdict,.lf .lt-est,.lf .lt-fin,.lf .lt-book,.lf .lt-resume{border-color:CanvasText}}
/* njg lane F end */

/* css/62-le-projects.css */
/* njg F10 (board #26, lane E, le_projects.go): project details band, project cards, the /projects/ gallery
   by county and its filter. Tokens only (the approved theme); no inline styles (CSP). */
.le-proj-grid{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:start}
@container (min-width:860px){.le-proj-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.le-proj-grid>.le-proj-facts:only-child{max-width:var(--measure)}
.le-proj-photo{margin:0}
.le-proj-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img);background:var(--surface)}
.le-proj-photo figcaption{padding-top:var(--s2);color:var(--muted);font-size:var(--fs-small)}
.le-facts{display:grid;gap:0;margin:var(--s4) 0 0;border-top:1px solid var(--border)}
.le-facts>div{display:grid;grid-template-columns:minmax(6.5em,auto) 1fr;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.le-facts dt{font-weight:700;color:var(--ink)}
.le-facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.le-facts a,.le-proj-links a{color:var(--brand-text);font-weight:600}
.le-proj-links{list-style:none;padding:0;margin:var(--s4) 0 0;display:flex;flex-direction:column;gap:var(--s1)}
.le-proj-links a{display:inline-flex;align-items:center;min-height:44px}
/* the before/after slider without JS (lane B's b-pair): the two photos side by side, each labeled */
@media (scripting:none){
  .le-proj .b-ba-frame{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);aspect-ratio:auto;background:none;overflow:visible}
  .le-proj .b-ba-frame>picture>img,.le-proj .b-ba-frame>img{grid-column:2;grid-row:1}
  .le-proj .b-ba figcaption{display:none}
  .le-proj .b-ba-frame img{position:static;aspect-ratio:4/3;border-radius:var(--radius-img)}
  .le-proj .b-ba-before{position:static;clip-path:none;grid-column:1;grid-row:1}
  .le-proj .b-ba-frame::after,.le-proj .b-ba-frame input{display:none}
}
/* cards */
.le-card>a{padding:0}
.le-card h3{padding:var(--s4) var(--s4) 0;font-size:var(--fs-1);margin-bottom:var(--s1)}
.le-card-meta{padding:0 var(--s4) var(--s4);margin:0;font-size:var(--fs-small)}
.le-card-img{display:block;aspect-ratio:4/3;background:var(--surface);overflow:hidden}
.le-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.le-card-noimg{display:flex;align-items:center;aspect-ratio:auto;padding:var(--s3) var(--s4);background:var(--section-alt);border-bottom:3px solid var(--brand)}
.le-card-noimg span{font-weight:700;font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;color:var(--brand-text)}
.le-all{margin:var(--s6) 0 0}
/* the gallery by county */
.le-filter ul{list-style:none;padding:0;margin:0 0 var(--s6);display:flex;flex-wrap:wrap;gap:var(--s2)}
.le-filter a{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--bg);color:var(--ink);text-decoration:none;font-weight:600}
.le-filter a:hover{border-color:var(--brand-text);color:var(--brand-text)}
.le-filter a[aria-current=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.le-n{font-weight:500;opacity:.8}
.le-status:empty{display:none}
.le-status{margin:0 0 var(--s4);color:var(--muted)}
.le-empty{padding:var(--s6);border:1px dashed var(--border);border-radius:var(--radius-card);margin-bottom:var(--s6)}
.le-empty p{margin:0}.le-empty p+p{margin-top:var(--s2)}
.le-county{scroll-margin-top:calc(var(--head-h, 72px) + var(--s4))}
.le-county+.le-county{margin-top:var(--s12)}
.le-county-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);margin:0 0 var(--s2)}
.le-county-h .le-n{font-size:var(--fs-small);color:var(--muted)}
.le-county-hub{margin:0 0 var(--s4)}
.le-county-hub a{display:inline-flex;align-items:center;min-height:44px;color:var(--brand-text);font-weight:600}
.le-grid{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4);grid-template-columns:1fr;align-items:start}
@container (min-width:520px){.le-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:860px){.le-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:1200px){.le-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
#gallery{scroll-margin-top:var(--head-h, 72px)}

/* css/70-zg-features.css */
/* njg lane G start — tools, typed forms on content pages, seasonal alert, ads landing pages (zg_features.go, -features only) */
.zg-tool [hidden],.zg-alert[hidden],.zg-quiz-result[hidden]{display:none!important}
.zg-note{color:var(--muted);font-size:var(--fs-small);margin:var(--s3) 0 0}
.zg-credit{color:var(--muted);font-size:var(--fs-small)}
.zg-legend{font-weight:700;padding:0;margin:0 0 var(--s2)}
/* seasonal alert */
.zg-alert{background:color-mix(in srgb,var(--accent) 14%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));color:var(--ink)}
.zg-alert-row{display:flex;gap:var(--s3);align-items:flex-start;padding-block:var(--s2)}
.zg-alert-ico{flex:none;margin-top:var(--s1);color:var(--brand-text)}
.zg-alert p{flex:1 1 auto}
.zg-alert-close{flex:none;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);cursor:pointer}
.zg-alert-close:hover{background:color-mix(in srgb,var(--accent) 22%,var(--bg))}
.zg-alert-close:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}
@media (forced-colors:active){.zg-alert-close{border:1px solid ButtonText}}
.zg-alert p{margin:0;font-size:var(--fs-small);line-height:1.45;min-width:0;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s2)}
.zg-alert a{font-weight:700;color:var(--brand-text);display:inline-flex;align-items:center;min-height:44px;min-width:44px}
/* shared option chips (quiz, comparison) */
.zg-opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.zg-opt{position:relative;display:flex;min-width:0;flex:1 1 15rem}
.zg-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.zg-opt span{display:flex;align-items:center;width:100%;min-height:48px;padding:var(--s2) var(--s4);border:1px solid var(--muted);border-radius:var(--r-md);background:var(--bg);color:var(--ink);font-weight:600;cursor:pointer;overflow-wrap:anywhere}
.zg-opt input:checked+span{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--bg));box-shadow:inset 0 0 0 1px var(--brand)}
.zg-opt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.zg-opt-check{flex:0 1 auto}
.zg-opt-check span::before{content:"";flex:none;width:18px;height:18px;margin-right:var(--s2);border:2px solid var(--muted);border-radius:var(--r-sm)}
.zg-opt-check input:checked+span::before{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px var(--bg)}
/* color visualizer */
.zg-viz-grid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:900px){.zg-viz-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.zg-viz-stage{margin:0;min-width:0}
.zg-viz-frame{position:relative;border-radius:var(--radius-img);overflow:hidden;background:var(--surface)}
.zg-viz-img,.zg-viz-canvas{display:block;width:100%;height:auto}
.zg-viz-canvas{position:absolute;inset:0;height:100%}
.zg-viz-stage figcaption{margin-top:var(--s2);font-size:var(--fs-small);color:var(--muted)}
.zg-viz-stage figcaption [data-zg-viz-label]{color:var(--ink);font-weight:600}
.zg-swatches{border:0;padding:0;margin:0;min-width:0}
.zg-swatch-group{margin:var(--s3) 0 var(--s2);font-size:var(--fs-small);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.zg-swatch-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:var(--s2)}
.zg-swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s1);min-height:44px;padding:var(--s2) var(--s1);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);cursor:pointer;text-align:center}
.zg-swatch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.zg-chip{display:block;width:40px;height:40px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.zg-chip rect{stroke:rgba(0,0,0,.2);stroke-width:1}
.zg-swatch-name{font-size:var(--fs-small);font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.zg-swatch:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--bg))}
.zg-swatch:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
/* diagnosis quiz */
.zg-quiz-form{display:grid;gap:var(--s6)}
.zg-q{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s3)}
.zg-q-legend{font:700 var(--fs-h3)/1.3 var(--font-head);padding:0;margin:0 0 var(--s1)}
.zg-q-legend:focus{outline:none}
.zg-q-n{color:var(--brand-text)}
.zg-q-hint{margin:0;color:var(--muted);font-size:var(--fs-small)}
.zg-q-nav,.zg-quiz-submit{display:flex;flex-wrap:wrap;gap:var(--s3)}
.zg-q-nav .btn,.zg-quiz-submit .btn{min-height:44px}
.zg-q.zg-need .zg-opt span{border-color:#b3261e}
.zg-quiz-progress{margin:0;font-weight:700;font-size:var(--fs-small)}
.zg-quiz-result{scroll-margin-top:calc(var(--head-h,64px) + var(--s4));border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:var(--r-md);padding:var(--s6);background:var(--surface)}
.zg-quiz-result:focus{outline:none}
.zg-quiz-result h3{margin:0 0 var(--s2);font-size:var(--fs-h2)}
.zg-quiz-result .cta-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.zg-quiz-result .btn{min-height:44px}
.zg-quiz-list{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:var(--s6) 0 0}
.zg-quiz-list a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-pill)}
.zg-quiz-form.zg-js .zg-q[hidden]{display:none}
/* service-area map */
.zg-mapsec{--zg-map-land:color-mix(in srgb,var(--muted) 14%,var(--bg));--zg-map-served:color-mix(in srgb,var(--brand) 22%,var(--bg));--zg-map-edge:var(--bg);--zg-map-served-edge:var(--brand-text);--zg-map-town:var(--accent);--zg-map-bg:var(--surface)}
.zg-map-box{position:relative;height:clamp(320px,62vh,640px);border:1px solid var(--border);border-radius:var(--radius-img);overflow:hidden;background:var(--surface);touch-action:none;user-select:none;-webkit-user-select:none}
.zg-map-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;display:block}
.zg-map-pins{position:absolute;inset:0;pointer-events:none}
.zg-map-pin{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:var(--s1);min-height:44px;min-width:44px;translate:-22px -38px;padding:0 var(--s1);color:var(--brand);text-decoration:none;font-weight:700;font-size:var(--fs-small)}
.zg-map-pinlabel{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-sm);padding:0 var(--s1);white-space:nowrap}
.zg-map-pin:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-radius:var(--r-sm)}
.zg-map-tip{position:absolute;left:0;top:0;margin:0;display:grid;gap:var(--s1);max-width:min(240px,calc(100% - 16px));padding:var(--s2) var(--s3);background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 4px 14px rgba(0,0,0,.18);font-size:var(--fs-small);z-index:2}
.zg-map-tip:empty{display:none}
.zg-map-tip span{color:var(--muted)}
.zg-map-tiplink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--brand-text)}
.zg-map-ctl{position:absolute;right:var(--s2);top:var(--s2);display:grid;gap:var(--s1)}
.zg-map-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--ink);cursor:pointer}
.zg-map-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.zg-map-help{position:absolute;left:var(--s2);bottom:var(--s2);margin:0;max-width:calc(100% - 16px);padding:var(--s1) var(--s2);background:color-mix(in srgb,var(--bg) 88%,transparent);border-radius:var(--r-sm);font-size:var(--fs-small);color:var(--muted);pointer-events:none}
.zg-map-offices{list-style:none;padding:0;margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6)}
.zg-map-offices li{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;min-width:0}
.zg-map-offices a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.zg-pin-ico{color:var(--brand)}
.zg-addr{color:var(--muted);font-size:var(--fs-small)}
.zg-map-list{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));margin-top:var(--s6)}
.zg-county h3{font-size:var(--fs-1);margin:0 0 var(--s1)}
.zg-county h3 a{display:inline-flex;align-items:center;min-height:44px}
.zg-st{color:var(--muted);font-weight:400}
.zg-county ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.zg-county li a{display:inline-flex;align-items:center;min-height:44px}
/* gutter guard comparison */
.zg-cmp-filter{border:0;padding:0;margin:0 0 var(--s4);min-width:0}
.zg-cmp-best{margin:var(--s3) 0 0;font-weight:600;min-height:1.4em}
.zg-cmp-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.zg-cmp-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.zg-cmp-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
@media (min-width:600px){.zg-cmp-table{min-width:640px}}
.zg-cmp-table caption{text-align:left;padding:var(--s2) var(--s3);font-weight:700}
.zg-cmp-table th,.zg-cmp-table td{padding:var(--s3);border-top:1px solid var(--border);text-align:left;vertical-align:top}
.zg-cmp-table thead th{background:var(--surface);font-weight:700}
.zg-cmp-table tbody th{font-weight:400;min-width:12rem}
.zg-cmp-name{display:block;font-weight:700;font-size:var(--fs-0)}
.zg-cmp-short,.zg-cmp-bestfor{display:block;color:var(--muted)}
.zg-cmp-price{white-space:nowrap;font-weight:700}
.zg-cmp-typ{display:block;font-weight:400;color:var(--muted)}
.zg-rate{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600}
.zg-r-good{color:#1f7a3a}.zg-r-fair{color:#8a5a00}.zg-r-poor{color:#a12a1f}
.zg-cmp-table .zg-on{background:color-mix(in srgb,var(--brand) 9%,var(--bg))}
.zg-cmp-table tr.zg-best th{box-shadow:inset 4px 0 0 var(--brand)}
.zg-cmp-table tr.zg-dim{opacity:.6}
/* ads landing page */
.zg-lp-grid{display:grid;gap:var(--s8);align-items:start}
@media (min-width:960px){.zg-lp-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.zg-lp-copy{min-width:0}
.zg-lp-points{list-style:none;padding:0;margin:var(--s4) 0;display:grid;gap:var(--s2)}
.zg-lp-points li{display:flex;gap:var(--s2);align-items:flex-start;font-weight:600}
.zg-lp-points svg{flex:none;color:currentColor;margin-top:var(--s1)}
.zg-lp-call{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.zg-lp-form{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s6);min-width:0;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.zg-lp-fh{margin:0 0 var(--s4);font-size:var(--fs-h3)}
.page-head.zg-lp-head .zg-lp-form :is(h2,h3,p,legend,label,li,span):not(.field-err){color:var(--ink);text-shadow:none}
.page-head.zg-lp-head .zg-lp-form .sechead p.eyebrow,.page-head.zg-lp-head .zg-lp-form a:not(.btn){color:var(--brand-text)}
.page-head.zg-lp-head .zg-lp-form :is(.sec-intro,.lf-opt,.lf-hint,.lf-steps li){color:var(--muted)}
.page-head.zg-lp-head .zg-lp-form .field-err{color:var(--lf-err)}
.page-head.zg-lp-head .zg-lp-form .lf-steps li[aria-current=step]{color:var(--ink)}

.zg-lp-form .sechead{margin-bottom:var(--s4)}
.zg-formband .lf{margin-top:var(--s4)}
@media (prefers-reduced-motion:reduce){.zg-cmp-table tr,.zg-swatch{transition:none}}
@media (forced-colors:active){.zg-chip{forced-color-adjust:none}.zg-opt input:checked+span,.zg-swatch:has(input:checked){outline:2px solid Highlight}}
/* njg lane G end */
.zg-map-pin.zg-quiet .zg-map-pinlabel{display:none}
.zg-map-pin.zg-quiet:is(:hover,:focus-visible) .zg-map-pinlabel{display:inline;position:relative;z-index:3}

/* css/90-u01-sections.css */
/* 90-u01-sections.css — U01 (NJG design upgrades, rebuild ADR-001 §4/§7): the 8 standard section designs.
 Included only while design2 module u01 is enabled. Components read only the semantic tokens a tone re-declares
 (--bg --surface --ink --muted --border --brand-text --link --focus --card-bg; U02 owns the values, U00 stubs them),
 so every design renders on every tone. Own class names only (u01-*), so no base or lane rule
 targets these elements. Layouts collapse by container width (@container), not viewport. */
/* Cascade: ADR-001 §7 puts components in @layer, but the base sheet (site.css.tmpl) and every older lane file are
 UNLAYERED, and an unlayered rule beats any layered one whatever its specificity: in a layer, base `p{margin}` and
 `a{color}` overrode these rules (measured: the statement band's centering and the actions row were lost). Until the
 base is layered, U01 stays unlayered and collision-free by owning its class names (u01-*), so file order cannot
 change the result either. */
.u01-sec{position:relative;padding-block:var(--section-y);color:var(--ink);isolation:isolate}
.u01-sec a:not(.btn){color:var(--link,var(--brand-text))}
.u01-sec :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u01-sec .sechead{margin-bottom:var(--s8)}
.u01-sec .sechead .eyebrow{color:var(--brand-text)}
.u01-sec .sechead h2 a{color:inherit}
.u01-sec .sec-intro{color:var(--muted);margin:var(--s2) 0 0}
.u01-sec p{max-width:var(--measure)}
.u01-in{container-type:inline-size;container-name:u01}

/* buttons on a tone: the base .btn-brand/.btn-ghost read --brand/--on-brand/--brand-text (unlayered, so we re-point
   the tokens rather than the rules): on the brand tone the fill inverts to the tone's text color */
.u01-sec.tone-brand{--brand:var(--ink);--on-brand:var(--bg)}
.u01-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s8) 0 0;max-width:none}

/* dividers: the section's own --bg rising into (top) or falling into (bottom) its neighbor */
.u01-div{position:absolute;left:0;width:100%;height:clamp(20px,3vw,48px);fill:var(--bg);pointer-events:none;z-index:1;display:block}
.u01-div-top{top:1px;transform:translateY(-100%)}
.u01-div-bottom{bottom:1px;transform:translateY(100%)}
.u01-sec.u01-dt{z-index:1}
.u01-sec.u01-db{z-index:2}

/* 1 split: media + text; two columns when the container is wide, single column with no media (:has) */
.u01-grid{display:grid;gap:var(--s8);align-items:center}
.u01-media{margin:0}
.u01-media img{display:block;width:100%;height:auto;border-radius:var(--radius-img);aspect-ratio:4/3;object-fit:cover}
.u01-media figcaption{color:var(--muted);font-size:var(--fs-small);margin-top:var(--s2)}
@container u01 (min-width:760px){
  .u01-grid{grid-template-columns:1fr 1fr;gap:var(--s12)}
  .u01-rev .u01-media{order:2}
  .u01-grid:not(:has(.u01-media)){grid-template-columns:1fr}
}

/* 2 photo: full-bleed photo, text on a scrim of the tone's own --bg at 82% (solid --bg where color-mix is missing).
   Worst case is the photo's lightest pixel (#fff) under the scrim; per tone the ink then measures: light/warm
   dark ink on >= #d1d1d1 (>= 10:1), dark/photo white on <= rgb(67,74,78) (>= 8.8:1), brand white on rgb(190,46,75) (5.8:1). */
.u01-d-photo{padding-block:calc(var(--s24) * 1.5);min-height:min(70vh,640px);display:grid;align-items:center;overflow:clip}
.u01-bg{position:absolute;inset:0;z-index:-1}
.u01-bg img{width:100%;height:100%;object-fit:cover;display:block}
.u01-d-photo .u01-scrim{background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--ink);padding:var(--s8);border-radius:var(--radius-card);max-width:44rem;}
/* QA-1029 (Tim JQ-JR2FMA3X): where the wrap has room outside its gutter, the scrim box steps out by its own padding so its H2 lines up with every other band's H2 */
@media (min-width:84rem){.u01-d-photo .u01-scrim{margin-inline-start:calc(-1 * var(--s8))}}
.u01-d-photo .sec-intro,.u01-d-photo .u01-cap{color:var(--muted)}
.u01-cap{font-size:var(--fs-small);margin:var(--s4) 0 0}

/* 3 dark: a contrast statement band — large centered statement */
.u01-statement{text-align:center;max-width:56rem;margin-inline:auto}
.u01-statement .sechead,.u01-statement .sechead h2{margin-inline:auto}
.u01-statement .sechead h2{font-size:var(--fs-display);line-height:var(--lh-tight);text-wrap:balance}
.u01-statement p{margin-inline:auto}
.u01-statement .u01-actions{justify-content:center}

/* 4 stats shell (U07 animates the numbers) */
.u01-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:var(--s6);margin:0}
.u01-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s1);padding:var(--s6);border-top:4px solid var(--brand-text);background:var(--surface);border-radius:var(--radius-card)}
.u01-stat dt{color:var(--muted);font-size:var(--fs-small);font-weight:600}
.u01-stat dd{margin:0;font-family:var(--font-head);font-size:var(--fs-4);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}

/* 5 cards + 6 features */
.u01-items{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
.u01-item{display:flex;gap:var(--s4);align-items:flex-start}
.u01-item h3{font-size:var(--fs-h3);margin:0;line-height:var(--lh-tight)}
.u01-item h3 a{display:inline-flex;min-height:44px;align-items:center}
.u01-item p{margin:var(--s2) 0 0;color:var(--muted)}
.u01-item .u01-meta a{display:inline-flex;min-height:44px;align-items:center;font-weight:700}
.u01-ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-pill);background:var(--surface);color:var(--brand-text)}
.u01-ico .i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u01-items-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.u01-items-cards .u01-item{flex-direction:column;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s6)}
.u01-items-features .u01-item h3{font-size:var(--fs-body);font-weight:700;padding-top:var(--s3)}
@container u01 (min-width:640px){.u01-items-features{grid-template-columns:1fr 1fr;column-gap:var(--s12)}}
@container u01 (min-width:1000px){.u01-items-features{grid-template-columns:repeat(3,1fr)}}

/* 7 quote */
.u01-qgrid{display:grid;gap:var(--s8);align-items:start}
@container u01 (min-width:860px){.u01-qgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}.u01-qgrid .u01-actions{grid-column:2}}
.u01-quote{margin:0;padding:var(--s8);border-left:6px solid var(--brand-text);background:var(--surface);border-radius:var(--radius-card)}
.u01-stars{display:flex;gap:var(--s1);margin:0 0 var(--s4)}
.u01-star{width:22px;height:22px;fill:var(--brand-text)}
.u01-quote blockquote{margin:0}
.u01-quote blockquote p{font-size:var(--fs-1);line-height:1.45;margin:0;max-width:none}
.u01-quote figcaption{margin-top:var(--s4);font-weight:700}
.u01-quote figcaption span{font-weight:400;color:var(--muted);margin-left:var(--s1)}
.u01-quote figcaption span+span::before{content:"· ";}

/* 8 cta */
.u01-ctarow{display:grid;gap:var(--s6);align-items:center}
.u01-ctarow .sechead{margin:0}
.u01-ctarow .u01-actions{margin:0}
@container u01 (min-width:860px){.u01-ctarow{grid-template-columns:1fr auto}.u01-ctarow .u01-actions{justify-content:flex-end;max-width:32rem}}
@media (prefers-reduced-motion:reduce){.u01-sec *{transition:none!important;animation:none!important}}
@media (forced-colors:active){.u01-d-photo .u01-scrim,.u01-stat,.u01-quote{border:1px solid CanvasText}.u01-div{display:none}}

/* css/91-u02-tones.css */
/* 91-u02-tones.css — NJG design upgrade U02 (tones + SVG dividers; rebuild ADR-001 §5/§6, owner decision 55).
   Included only while design2 module u02 is on. The tone token values are generated (u02_tones.go, d2CSS "tones");
   this file holds the token-only rules every band shares. */
:where(.tone-light,.tone-warm,.tone-dark,.tone-brand,.tone-photo) .card{background:var(--card-bg);border-color:var(--border)}

/* Divider: inline SVG at a section edge, painted with the neighboring band's ground (.u02-into-<tone> sets
   --u02-fill). The section it sits in gets position:relative; padding is the section's (U01) to add. */
:where(.tone-light,.tone-warm,.tone-dark,.tone-brand,.tone-photo):has(>.u02-div){position:relative;isolation:isolate}
.u02-div{position:absolute;inset-inline:0;z-index:0;height:var(--u02-div-h);line-height:0;color:var(--u02-fill,var(--bg));pointer-events:none}
.u02-div--bottom{bottom:-1px}
.u02-div--top{top:-1px;transform:scaleY(-1)}
.u02-div svg{display:block;width:100%;height:100%}
.u02-div path{fill:currentColor}
:where(.tone-light,.tone-warm,.tone-dark,.tone-brand,.tone-photo):has(>.u02-div--bottom){padding-block-end:calc(var(--section-y) + var(--s16))}
:where(.tone-light,.tone-warm,.tone-dark,.tone-brand,.tone-photo):has(>.u02-div--top){padding-block-start:calc(var(--section-y) + var(--s16))}

/* Windows High Contrast: the browser repaints SVG fills with the user's palette, so a divider would be a
   meaningless block. Drop it and keep a plain border between bands. */
@media (forced-colors:active){
  .u02-div{display:none}
  :where(.tone-light,.tone-warm,.tone-dark,.tone-brand,.tone-photo){border-block-start:1px solid CanvasText}
}
@media (prefers-contrast:more){
  :where(.tone-light,.tone-warm,.tone-dark,.tone-brand,.tone-photo){--muted:var(--ink);--border:var(--ui-border)}
}

/* the U02 fixture page (/design2-u02-tones/, only with u02.json "fixture": true) */
.u02-fx{padding-block:var(--section-y)}
.u02-fx-lede{padding-block:var(--s8)}
.u02-fx-eyebrow{color:var(--brand-text);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-small)}
.u02-fx-muted{color:var(--muted)}
.u02-fx-actions{display:flex;flex-wrap:wrap;gap:var(--s4)}
.u02-fx-card{padding:var(--s6);max-width:36rem}
.u02-fx-card :last-child{margin-bottom:0}

/* css/92-u03-hero.css */
/* 92-u03-hero.css — U03 (NJG design upgrades, rebuild DESIGN-UPGRADE-PLAN.md U03): the hero. Included only while
   design2 module u03 is enabled. Reads only the tone tokens (DESIGN2.md "Tone tokens"; the section's tone-* class
   sets them), never a hex. Owns its class names (u03-*); the main photo keeps the site's hero hook (.b-hero), so
   the base full-bleed rules for it are undone here, scoped to .u03-hero. No motion beyond the base buttons. */
.u03-hero{position:relative;background:var(--bg);color:var(--ink);padding:var(--s12) 0 var(--s12);min-height:0;display:block}
.hero-home.u03-hero{padding:var(--s12) 0 var(--s12)}
.u03-grid{display:grid;gap:var(--s8);align-items:center}
.u03-text{min-width:0}
.u03-hero .eyebrow{color:var(--brand-text);opacity:1;margin:0 0 var(--s2)}
.u03-hero h1{max-width:18ch;margin:0 0 var(--s4);color:var(--ink);text-wrap:balance}
.u03-hero .lede{color:var(--muted);max-width:60ch;margin:0}
.u03-hero a:not(.btn){color:var(--link)}

/* the ZIP form: a visible label, the field and its button on one row, the hint tied by aria-describedby */
.u03-zip{margin-top:var(--s6);max-width:32rem}
.u03-zl{display:block;font-weight:700;margin:0 0 var(--s2);color:var(--ink)}
.u03-zrow{display:flex;flex-wrap:wrap;gap:var(--s2)}
.u03-zin{flex:1 1 8rem;min-width:0;max-width:13rem;min-height:48px;padding:0 var(--s3);font:inherit;font-size:1.125rem;letter-spacing:.08em;color:var(--ink);background:var(--card-bg);border:2px solid var(--ui-border);border-radius:var(--radius-btn)}
.u03-zin:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u03-zin:user-invalid{border-color:var(--brand-text)}
.u03-zgo{flex:0 0 auto;min-height:48px}
.u03-hero .btn-brand{background:var(--brand);color:var(--on-brand)}
.u03-hero .btn-brand:hover{background:var(--brand-hover)}
.u03-hero .btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u03-zh{margin:var(--s2) 0 0;font-size:.92rem;color:var(--muted)}
.u03-zh[data-v]{color:var(--ink);font-weight:600}

/* the call button and the link to the full form */
.u03-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);margin-top:var(--s6)}
.u03-hero .btn-ghost{color:var(--ink);border-color:var(--ui-border);background:transparent}
.u03-hero .btn-ghost:hover{background:var(--surface)}
.u03-more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-underline-offset:.2em}

/* the trust row: real numbers and badges only (u03_hero.go) */
.u03-trust{list-style:none;margin:var(--s6) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.u03-t{display:flex;align-items:center;gap:var(--s2);font-size:.95rem;line-height:1.3;color:var(--muted)}
.u03-tv{color:var(--ink);font-size:1.15rem}
.u03-ti{flex:none;display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;color:var(--brand-text)}
.u03-ti svg{width:1.4rem;height:1.4rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u03-ti .u05i{animation:none;stroke-dasharray:none}

/* the photos: the main tile (the page's hero photo) and, on the home page, two collage tiles */
.u03-media{display:grid;gap:var(--s3);min-width:0}
.u03-media figure{margin:0;overflow:hidden;border-radius:var(--radius-card);background:var(--surface)}
.u03-hero .b-hero{position:relative;inset:auto;z-index:auto;width:100%;height:100%;overflow:hidden}
.u03-hero .b-hero::after{content:none}
.u03-pic{display:contents}
.u03-media img{display:block;width:100%;height:100%;object-fit:cover}
.u03-main{aspect-ratio:4/3}
@media (max-width:767px){
  .u03-hero,.hero-home.u03-hero{padding:var(--s8) 0 var(--s12)}
  .u03-grid{gap:var(--s6)}
  .u03-main{aspect-ratio:16/9}
  .u03-tile{display:none}
}
@media (min-width:768px){
  .u03-collage .u03-media{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}
  .u03-collage .u03-main{grid-row:1/3;aspect-ratio:auto}
  .u03-collage .u03-tile{aspect-ratio:auto}
}
@media (min-width:1024px){
  .u03-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s12)}
  .u03-hero,.hero-home.u03-hero{padding:var(--s16) 0}
}
@media (forced-colors:active){
  .u03-zin{border-color:CanvasText}
  .u03-media figure{border:1px solid CanvasText}
  .u03-ti{color:CanvasText}
}

/* css/93-u04-ctabar.css */
/* U04 phone Call / Estimate / Text bar v2 (u04_ctabar.go, DESIGN-UPGRADE-PLAN.md U04).
   Overrides a-ctabar's rules (50-a-estimate.css) through [data-u04]; tokens only. The bar pads by every safe-area
   inset (viewport-fit=cover is added to the viewport meta), and the body pads by the bar's own height, so nothing
   at the end of a page (the form's submit button, the footer) ever sits behind it. u04-ctabar.js adds body.u04-off
   while a lead form or the footer contact is on screen; estimate.js adds body.est-in-view while the form is focused. */
.ctabar[data-u04]{display:none}
.u04-ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (orientation:landscape){
  body:has(.ctabar[data-u04]){padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
@media (max-width:767px){
  body:has(.ctabar[data-u04]){padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
  .ctabar[data-u04]{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;gap:var(--s2);position:fixed;left:0;right:0;bottom:0;z-index:30;box-sizing:border-box;min-height:calc(var(--bar-h) + env(safe-area-inset-bottom));padding:var(--s2) calc(var(--s4) + env(safe-area-inset-right)) calc(var(--s2) + env(safe-area-inset-bottom)) calc(var(--s4) + env(safe-area-inset-left));background:var(--bg);color:var(--ink);border-top:1px solid var(--ui-border);box-shadow:0 -6px 20px rgba(0,0,0,.12);transition:none}
  .ctabar[data-u04] .btn{width:100%;min-width:44px;min-height:48px;padding:0 var(--s2);gap:var(--s2)}
  .ctabar[data-u04] .btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  body.u04-off .ctabar[data-u04],body.est-in-view .ctabar[data-u04]{transform:translateY(110%);visibility:hidden}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .ctabar[data-u04]{transition:transform var(--dur) var(--ease),visibility var(--dur)}
}
@media (max-width:359px){.ctabar[data-u04] .u04-ic{display:none}}
@media (forced-colors:active){.ctabar[data-u04]{border-top:1px solid CanvasText}}
@media print{.ctabar[data-u04]{display:none}}

/* css/94-u05-icons.css */
/* U05 service icons (u05_icons.go). The icon is complete and static by default; motion is an enhancement.
   stroke-dasharray / stroke-dashoffset are inherited, so values set on the outer <svg> reach the <use> shadow
   tree; every symbol element carries pathLength="1", so one dash value fits every icon. */
.u05i{overflow:visible}
.b-cicon.u05b{transition:none}
@media (prefers-reduced-motion:no-preference){
  .u05i{stroke-dasharray:1 1.1;stroke-dashoffset:0}
  /* draw-in while the card enters the viewport. The badge sits inside .b-cimg and li.card, both overflow:hidden
     (scroll containers), so an anonymous view() on the icon would track the card, not the page and never run:
     the card names the timeline instead (its scroll container is the page). The badge sits about 35-50% down the card, so the stroke draws while it enters and is done by the card's entry 60%. */
  @supports (animation-timeline:view()) and selector(:has(*)){
    :is(.card,li,article):has(.u05b){view-timeline-name:--u05}
    .u05i{animation:u05-draw linear both;animation-timeline:--u05;animation-range:entry 30% entry 60%}
  }
  .b-cicon.u05b{transition:scale .25s cubic-bezier(.3,.7,.2,1),rotate .25s cubic-bezier(.3,.7,.2,1)}
  @media (hover:hover){
    a:hover .b-cicon.u05b{scale:1.08;rotate:-6deg}
  }
  a:focus-visible .b-cicon.u05b{scale:1.08;rotate:-6deg}
}
@keyframes u05-draw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}

/* css/95-u06-cards.css */
/* U06 service cards v2 (u06_cards.go, DESIGN-UPGRADE-PLAN.md U06). Included only while module u06 is enabled.
   Components read the semantic tokens a tone re-declares (--bg --surface --ink --muted --border --brand-text --focus
   --card-bg); the overlay scrim is its own component token because the photo under it is dark in every tone.
   Platform: @container (grid + card), :has(), translate/box-shadow transitions (no layout shift), @media (hover:hover);
   all Baseline (MDN BCD read 2026-10-29: container-type Chrome 105 / Safari 16 / Firefox 110, translate 104 / 14.1 / 72). */
.u06-cards{--u06-scrim:rgb(18 30 35 / .9);--u06-scrim-0:rgb(18 30 35 / 0);--u06-on-scrim:#fff;--u06-fade:var(--s12);
  list-style:none;padding:0;margin:0;display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));container:u06grid/inline-size}
.u06-card{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;background:var(--card-bg,var(--bg));color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;container:u06card/inline-size}
.u06-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.u06-media :is(picture,img){display:block;width:100%;height:100%}
.u06-media img{object-fit:cover}
.u06-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s6);min-width:0}
.u06-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:999px;background:var(--brand);color:var(--on-brand)}
.u06-icon .i{width:24px;height:24px}
.u06-card:has(.u06-media) .u06-icon{position:absolute;inset-inline-start:var(--s3);inset-block-start:var(--s3)}
.u06-title{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);overflow-wrap:normal;hyphens:none}
.u06-link{color:inherit;text-decoration:none}
.u06-link::after{content:"";position:absolute;inset:0;z-index:1} /* the one link covers the card */
.u06-text{margin:0;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.u06-more{margin-top:auto;font-weight:700;color:var(--brand-text)}
.u06-chip,.card .u06-chip{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);align-self:flex-start;max-width:100%;margin:var(--s1) 0 var(--s2);padding:var(--s1) var(--s3);border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:var(--fs-small);line-height:1.4}
.u06-chip strong{font-weight:700}
.u06-est{font-size:.85em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.card .u06-chip{display:flex;width:fit-content}

/* overlay: title, text and chip on the photo's gradient (wide grids only; text only ever sits where the scrim is >= .9) */
@container u06grid (min-width:560px){
  .u06-v-overlay .u06-card:has(.u06-media){grid-template-rows:1fr;border-color:transparent;color:var(--u06-on-scrim);background:var(--u06-scrim)}
  .u06-v-overlay .u06-card:has(.u06-media)>*{grid-area:1/1}
  .u06-v-overlay .u06-card:has(.u06-media) .u06-media{aspect-ratio:4/5;height:100%}
  .u06-v-overlay .u06-card:has(.u06-media) .u06-body{align-self:end;padding-top:var(--s16);background:linear-gradient(to top,var(--u06-scrim) calc(100% - var(--u06-fade)),var(--u06-scrim-0) 100%)}
  .u06-v-overlay .u06-card:has(.u06-media) :is(.u06-text,.u06-more,.u06-est){color:var(--u06-on-scrim)}
  .u06-v-overlay .u06-card:has(.u06-media) .u06-chip{background:transparent;border-color:var(--u06-on-scrim);color:var(--u06-on-scrim)}
  .u06-v-overlay .u06-card:has(.u06-media) .u06-text{-webkit-line-clamp:2}
}
@container u06card (min-width:24rem){.u06-title{font-size:var(--fs-2)}}

/* compact: a row card when the grid is phone-narrow (one column); the band is about half as tall */
@container u06grid (max-width:559px){
  .u06-cards>.u06-card{grid-template-columns:6.5rem minmax(0,1fr);grid-template-rows:auto;color:var(--ink);background:var(--card-bg,var(--bg));border-color:var(--border)}
  .u06-cards>.u06-card>*{grid-area:auto}
  .u06-cards>.u06-card.u06-noimg{grid-template-columns:minmax(0,1fr)}
  .u06-cards .u06-card .u06-media{aspect-ratio:auto;width:100%;min-width:0;height:100%;min-height:6.5rem}
  .u06-cards .u06-card .u06-body{align-self:stretch;padding:var(--s4);gap:var(--s1);background:none}
  .u06-cards .u06-card :is(.u06-text,.u06-more,.u06-est){color:var(--muted)}
  .u06-cards .u06-card .u06-more{color:var(--brand-text)}
  .u06-cards .u06-card .u06-chip{background:var(--surface);border-color:var(--border);color:var(--ink);margin:var(--s1) 0 0}
  .u06-cards .u06-card .u06-text{-webkit-line-clamp:2;font-size:var(--fs-small)}
  .u06-cards .u06-card .u06-title{font-size:var(--fs-0)}
  .u06-cards .u06-card:has(.u06-media) .u06-icon{width:32px;height:32px;inset-inline-start:var(--s2);inset-block-start:var(--s2)}
  .u06-cards .u06-card:has(.u06-media) .u06-icon .i{width:18px;height:18px}
  .u06-cards .u06-card .u06-more{display:none}
}

/* focus: the ring is on the card (the stretched link is its target) */
.u06-card:has(.u06-link:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.u06-card .u06-link:focus-visible{outline:none}
@supports not selector(:has(*)){.u06-card .u06-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}}

/* lift: hover devices, and keyboard focus; never under reduced motion */
@media (prefers-reduced-motion:no-preference){
  .u06-card,.cards>.card{transition:translate var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
  .u06-media img{transition:scale var(--dur) var(--ease)}
  .u06-card:focus-within{translate:0 -4px;box-shadow:0 12px 28px rgb(0 0 0 / .14)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .u06-card:hover,.cards>.card:hover{translate:0 -4px;box-shadow:0 12px 28px rgb(0 0 0 / .14)}
  .u06-v-standard .u06-card:hover .u06-media img{scale:1.04} /* never on the overlay: a scaled photo paints over the text in the shared cell */
}
@media (forced-colors:active){.u06-card{border:1px solid CanvasText}.u06-chip{border-color:CanvasText}.u06-v-overlay .u06-card:has(.u06-media) .u06-body{background:Canvas;color:CanvasText}}
/* owner decision 75: the line under a card list with price chips, linking the cost guide (u06ChipNote) */
.u06-chip-note{margin:var(--s4) 0 0;font-size:var(--fs-small);color:var(--muted)}
.u06-chip-note a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--link,var(--brand-text))}

/* css/96-u07-stats.css */
/* 96-u07-stats.css — U07 (NJG design upgrades, rebuild DESIGN-UPGRADE-PLAN.md U07): the stats band's numbers and
 their counters. Included only while design2 module u07 is enabled. Reads only the tone tokens (DESIGN2.md "Tone
 tokens"), never a hex. Unlayered, like U01, and collision-free by owning its class names (u07-*); the one
 exception is the balance block for U01's own .u01-stats list at the end (S02 defect: the 5th tile alone on its
 row at 393px), which only overrides grid placement.
 Platform: container queries (Baseline 2023), :has() (Baseline 2023), @property (Baseline 2024; Firefox 128,
 Safari 16.4) + counter() for the count. Without @property the twin is never shown (u07-count.js checks
 CSS.registerProperty) and the final number stands. */

@property --u07i{syntax:"<integer>";inherits:false;initial-value:0}
@property --u07f{syntax:"<integer>";inherits:false;initial-value:0}

.u07-wrap{container-type:inline-size}
.u07-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin:0;padding:0}
.u07-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s2);min-width:0;padding:var(--s4);border-top:4px solid var(--brand-text);background:var(--surface);border-radius:var(--radius-card)}
.u07-stat dt{color:var(--muted);font-size:var(--fs-small);font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.u07-stat dd{margin:0;display:flex;align-items:center;gap:var(--s1);font-family:var(--font-head);font-size:var(--fs-4);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.u07-val{position:relative;display:inline-block;white-space:nowrap}
.u07-twin{display:none}
.u07-star{width:.62em;height:.62em;flex:none;fill:var(--brand-text)}
/* placeholder (owner decision; staging only): no figure, a visible marker */
.u07-ph{border-top-style:dashed}
.u07-ph dd{color:var(--muted)}
.u07-flag{display:block;width:fit-content;margin-top:var(--s1);padding:0 var(--s2);border:1px dashed var(--ui-border);border-radius:var(--radius-card);color:var(--ink);font-size:var(--fs-small);font-weight:700}

/* balanced grid at every width: never a lone tile on its own row (u07-n<count>) */
.u07-n1{grid-template-columns:minmax(0,1fr)}
.u07-n3{grid-template-columns:minmax(0,1fr)}
.u07-n5{grid-template-columns:repeat(6,minmax(0,1fr))}
.u07-n5>*{grid-column:span 3}
.u07-n5>:last-child{grid-column:span 6}
@container (min-width:26rem){
 .u07-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:34rem){
 .u07-n5>*{grid-column:span 2}
 .u07-n5>:nth-child(n+4){grid-column:span 3}
 .u07-n6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:44rem){
 .u07-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container (min-width:56rem){
 .u07-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
 .u07-n5>*,.u07-n5>:nth-child(n+4),.u07-n5>:last-child{grid-column:auto}
}
@container (min-width:68rem){
 .u07-n6{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* the count: u07-count.js adds .u07-run when the band is in view, then sets --u07i/--u07f to the target on each
 twin. The real number stays in place (transparent: it holds the width, so no layout shift, and stays the text
 screen readers read); the aria-hidden twin is drawn over it. */
@media (prefers-reduced-motion:no-preference){
 .u07-run .u07-num:has(+.u07-twin){color:transparent}
 .u07-run .u07-twin{display:block;position:absolute;inset:0;text-align:start;counter-reset:u07i var(--u07i) u07f var(--u07f);
  transition:--u07i 1.6s cubic-bezier(.2,.7,.2,1),--u07f 1.6s cubic-bezier(.2,.7,.2,1)}
 .u07-run .u07-twin::before{content:counter(u07i) attr(data-suffix)}
 .u07-run .u07-twin[data-frac]::before{content:counter(u07i) "." counter(u07f)}
}

@media (forced-colors:active){
 .u07-stat{border:1px solid CanvasText}
 .u07-star{fill:CanvasText}
 .u07-flag{border-color:CanvasText}
}

/* U01's own list (when U07's swap does not run on a page): the same balance, keyed by the tile count */
.u01-stats:has(>:nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}
.u01-stats:has(>:nth-child(4):last-child),.u01-stats:has(>:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.u01-stats:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
.u01-stats:has(>:nth-child(5):last-child)>*{grid-column:span 3}
.u01-stats:has(>:nth-child(5):last-child)>:last-child{grid-column:span 6}
@media (min-width:30rem){
 .u01-stats:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:38rem){
 .u01-stats:has(>:nth-child(5):last-child)>*{grid-column:span 2}
 .u01-stats:has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}
 .u01-stats:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:48rem){
 .u01-stats:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:60rem){
 .u01-stats:has(>:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
 .u01-stats:has(>:nth-child(5):last-child)>*,.u01-stats:has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:auto}
}

/* css/96-u27-type.css */
/* U27 typography (NJG design upgrades, rebuild item 64, owner decision 56). Included only while design2 u27 is on.
   The display face and its metric-matched fallback are @font-face rules generated in u27_type.go (design2 u27-fonts),
   which also point --font-head at them; the body stack is untouched.
   The fluid --step-* scale is rebuild design/tokens.css (base 16.5px at 320 -> 18.5px at 1440; ratio 1.19 -> 1.27)
   for modules that size display text (hero, stats, offers). h1/h2/h3 and body stay on the house --fs-* steps,
   which D6/D7 pin; the face's size-adjust is what fits the condensed face to them. */
:root{
  --step-xs:clamp(0.7813rem,0.7547rem + 0.1329vw,0.8743rem);
  --step-sm:clamp(0.8967rem,0.8657rem + 0.1553vw,1.0054rem);
  --step-md:clamp(1.0313rem,0.9955rem + 0.1786vw,1.1563rem);
  --step-lg:clamp(1.2272rem,1.1583rem + 0.3446vw,1.4684rem);
  --step-xl:clamp(1.4604rem,1.3448rem + 0.5779vw,1.8649rem);
  --step-2xl:clamp(1.7378rem,1.5576rem + 0.9009vw,2.3684rem);
  --step-3xl:clamp(2.0680rem,1.7995rem + 1.3427vw,3.0079rem);
  --step-4xl:clamp(2.4609rem,2.0726rem + 1.9416vw,3.8201rem);
  --step-5xl:clamp(2.9285rem,2.3791rem + 2.7471vw,4.8515rem);
  --lh-display:1.1;
}
/* The condensed face is set tight like the logo; no negative tracking (it would crowd the narrow counters). */
h1,h2,h3,.h3,h4{letter-spacing:0;text-wrap:balance}
h1,h2{line-height:var(--lh-display)}
/* Paragraphs avoid a one-word last line where the browser supports it (Chrome 117, Safari 26; Firefox wraps normally). */
p,li,figcaption,blockquote{text-wrap:pretty}
/* The face has no italic: never fake one on a heading. */
h1,h2,h3,.h3,h4,legend{font-synthesis-style:none}

/* css/97-u08-badges.css */
/* U08 badges row (u08_badges.go). Reads only the tone tokens (DESIGN2.md "Tone tokens"); the section's tone-* class
   sets them. Static: no motion, nothing interactive (the badges are statements, not links). */
.u08-band{padding-block:var(--s8)}
.u08-band.u08-hero{padding-block:var(--s6)}
.u08-h{margin:0 0 var(--s4);font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:var(--ink);text-align:center;text-wrap:balance}
/* equal cards in centered rows: however many badges have data, a short last row never hangs left */
.u08-row{--u08-cols:2;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3)}
.u08-row>li{flex:0 1 calc((100% - (var(--u08-cols) - 1) * var(--s3)) / var(--u08-cols))}
@media (min-width:40rem){.u08-row{--u08-cols:3}}
@media (min-width:64rem){.u08-row{--u08-cols:5}}
.u08-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s2);min-width:0;padding:var(--s3) var(--s2);border-radius:var(--radius-card);background:var(--card-bg);color:var(--ink);border:1px solid var(--border)}
/* the seal: the icon inside a double ring (a solid ring and an offset dashed one) */
.u08-seal{flex:none;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;color:var(--brand-text);border:2px solid currentColor;outline:1.5px dashed var(--ui-border);outline-offset:2px;margin:var(--s1)}
.u08-seal .i{width:1.45rem;height:1.45rem;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* the u05 draw-in animation keys off card timelines this row does not have: keep the stroke whole */
.u08-seal .u05i{animation:none;stroke-dasharray:none}
.u08-txt{display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.25;text-wrap:balance}
.u08-t{font-weight:700;font-size:.98rem;overflow-wrap:break-word;hyphens:manual}
.u08-s{font-size:.85rem;color:var(--muted);overflow-wrap:break-word;hyphens:manual}
/* placeholder (preview builds only): dashed card and a visible tag naming the owner decision */
.u08-ph{border:1.5px dashed var(--ui-border);background:var(--surface)}
.u08-need{margin-top:var(--s1);font-size:.7rem;line-height:1.3;text-wrap:balance;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ui-border);border-radius:var(--s1);padding:var(--s1) var(--s2)}
@media (forced-colors:active){
  .u08-badge{border:1px solid CanvasText}
  .u08-seal{border-color:CanvasText;outline-color:CanvasText;color:CanvasText}
}

/* css/98-u09-gallery.css */
/* U09 project gallery + lightbox (u09_gallery.go, DESIGN-UPGRADE-PLAN.md U09). Included only while module u09 is enabled.
   Semantic tokens only (the band's tone; the lightbox is a tone-dark dialog). Platform (MDN BCD read 2026-10-29):
   <dialog>.showModal + ::backdrop (Chrome 37 / Firefox 98 / Safari 15.4), closedby (Chrome 134 / Firefox 141; Safari
   uses the close button + backdrop click), grid auto-fill, aspect-ratio, overscroll-behavior: all Baseline. */
.u09-filters{display:grid;gap:var(--s4);margin:0 0 var(--s6)}
.u09-facet{border:0;margin:0;padding:0;min-width:0}
.u09-facet legend{padding:0;margin-bottom:var(--s2);font-weight:700;font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.u09-facet ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.u09-chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-btn,999px);background:var(--card-bg,var(--bg));color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--fs-small)}
a.u09-chip:hover{border-color:var(--brand-text);color:var(--brand-text)}
.u09-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u09-chip[aria-current]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
/* I-S04: the site's .chips a:hover (0,2,1) outranked the line above, so the selected chip under the pointer read red on red */
a.u09-chip[aria-current]:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u09-chip[aria-disabled=true]{opacity:.55;cursor:default;border-style:dashed}
.u09-n{font-weight:500}
.u09-status{margin:0 0 var(--s4);color:var(--muted)}
.u09-status:empty{display:none}
.u09-grid{list-style:none;padding:0;margin:0;display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.u09-item{display:flex;flex-direction:column;background:var(--card-bg,var(--bg));border:1px solid var(--border);border-radius:var(--radius-card,8px);overflow:hidden}
.u09-item[hidden],.u09-row[hidden],.u09-rows-wrap[hidden]{display:none}
.u09-thumb{position:relative;display:block;aspect-ratio:4/3;background:var(--surface);overflow:hidden}
.u09-thumb picture,.u09-thumb img{display:block;width:100%;height:100%}
.u09-thumb img{object-fit:cover}
.u09-thumb:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.u09-zoom{position:absolute;right:var(--s2);bottom:var(--s2);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--card-bg,var(--bg));color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0/.25)}
.u09-zoom svg,.u09-lb-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u09-body{padding:var(--s4)}
.u09-t{font-size:var(--fs-1,1.05rem);margin:0 0 var(--s1);line-height:var(--lh-tight,1.25)}
.u09-t a{color:var(--ink);text-decoration:none}
.u09-t a:hover{color:var(--brand-text);text-decoration:underline}
.u09-meta{margin:0;color:var(--muted);font-size:var(--fs-small)}
.u09-rows-wrap{margin-top:var(--s12)}
.u09-rows-h{margin:0 0 var(--s4)}
.u09-rows{list-style:none;padding:0;margin:0;border-top:1px solid var(--border);display:grid}
@container (min-width:860px){.u09-rows{grid-template-columns:1fr 1fr;column-gap:var(--s8)}}
.u09-row{display:flex;flex-direction:column;justify-content:center;gap:0;min-height:44px;padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.u09-row a{color:var(--link,var(--brand-text));font-weight:600;overflow-wrap:anywhere}
.u09-row .u09-meta{overflow-wrap:anywhere}
.u09-empty{margin:var(--s6) 0 0}
.u09-empty a{color:var(--link,var(--brand-text));font-weight:600}
/* the lightbox */
.u09-lb{width:min(100vw - 2 * var(--s4),1200px);max-width:none;max-height:calc(100dvh - 2 * var(--s4));padding:0;border:1px solid var(--border);border-radius:var(--radius-card,8px);background:var(--bg);color:var(--ink);overscroll-behavior:contain}
.u09-lb[open]{display:flex;flex-direction:column}
.u09-lb::backdrop{background:rgb(10 14 16/.82)}
.u09-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s4);border-bottom:1px solid var(--border)}
.u09-lb-title{margin:0;font-weight:700}
.u09-lb-pos{font-weight:500;color:var(--muted)}
.u09-lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-width:44px;min-height:44px;padding:0 var(--s3);border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-btn,999px);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.u09-lb-btn:hover{border-color:var(--brand-text);color:var(--brand-text)}
.u09-lb-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u09-lb-btn[hidden]{display:none}
.u09-lb-fig{margin:0;display:flex;flex-direction:column;min-height:0;flex:1}
.u09-lb-media{display:grid;place-items:center;min-height:0;flex:1;background:var(--surface)}
.u09-lb-media img{display:block;max-width:100%;max-height:calc(100dvh - 15rem);width:auto;height:auto;object-fit:contain}
.u09-lb-cap{padding:var(--s3) var(--s4) 0;color:var(--ink)}
.u09-lb-link{color:var(--link);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.u09-lb-nav{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4) var(--s4)}
@media (max-width:479px){.u09-lb-nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (forced-colors:active){.u09-chip[aria-current]{border:3px solid CanvasText}.u09-lb{border:2px solid CanvasText}}

/* css/99-u10-ba.css */
/* U10 before/after v2 (u10_ba.go, partial u10-ba; DESIGN-UPGRADE-PLAN.md U10, rule D44). Tone tokens only (DESIGN2.md).
   Untoned page bands (project pages) define no --ui-border / --card-bg, so those two fall back to --muted / --bg.
   The after photo is in flow, so its width/height attributes reserve the box (no CLS); the before photo lies on top,
   clipped to the left of the divider by clip-path: inset(). --u10-x (0–100%) is set by u10-ba.js from the range. */
.u10-ba{--u10-x:50%;margin:0;min-width:0}
.u10-stage{position:relative;overflow:hidden;border-radius:var(--radius-img);background:var(--surface);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.u10-stage picture{display:block}
.u10-after img{display:block;width:100%;height:auto}
.u10-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--u10-x)) 0 0)}
.u10-before picture,.u10-before img{display:block;width:100%;height:100%}
.u10-before img{object-fit:cover}
.u10-stage img{pointer-events:none;-webkit-user-drag:none}
.u10-tag{position:absolute;top:var(--s3);padding:var(--s1) var(--s3);border-radius:var(--radius-btn);background:rgba(0,0,0,.74);color:#fff;font-size:var(--fs-small);font-weight:700;line-height:1.3;pointer-events:none}
.u10-tag-b{left:var(--s3)}.u10-tag-a{right:var(--s3)}
.u10-handle{position:absolute;top:0;bottom:0;left:var(--u10-x);width:3px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;z-index:1}
.u10-knob{position:absolute;top:50%;left:50%;width:40px;height:40px;padding:var(--s2);transform:translate(-50%,-50%);border-radius:999px;background:#fff;color:#121e23;box-shadow:0 1px 4px rgba(0,0,0,.45)}
/* controls: the range sits under the photo (thumb under the divider), the toggle under it; 44px targets */
.u10-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s2)}
.u10-ctl input[type=range]{flex:1 1 100%;width:100%;min-width:0;height:44px;margin:0;accent-color:var(--brand);cursor:ew-resize;background:transparent}
.u10-ctl input[type=range]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u10-tg{display:flex;flex-wrap:wrap;gap:var(--s2)}
.u10-tg-b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 var(--s4);border:1px solid var(--ui-border,var(--muted));border-radius:var(--radius-btn);background:var(--card-bg,var(--bg));color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.u10-tg-b:hover{border-color:var(--ink)}
.u10-tg-b:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u10-tg-b[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u10-hint{margin:var(--s1) 0 0;color:var(--muted);font-size:var(--fs-small)}
.u10-ba figcaption{padding-top:var(--s2);color:var(--ink);font-size:var(--fs-small)}
/* the toggle eases the divider; dragging and keys stay instant */
@media (prefers-reduced-motion:no-preference){
  .u10-ba.u10-anim .u10-before{transition:clip-path .32s ease}
  .u10-ba.u10-anim .u10-handle{transition:left .32s ease}
}
/* several pairs: a grid of whole pairs */
.u10-set{margin-block:var(--s8)}
.u10-set-intro{color:var(--muted);margin:0 0 var(--s4)}
.u10-grid{display:grid;gap:var(--s8) var(--s6);grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.u10-set:not(.u10-multi) .u10-grid{grid-template-columns:minmax(0,1fr)}
/* without scripting: the two photos side by side, each labeled, the caption below; no controls */
@media (scripting:none){
  .u10-stage{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);overflow:visible;background:none;border-radius:0;cursor:auto}
  .u10-before{position:relative;inset:auto;clip-path:none;grid-column:1;grid-row:1}
  .u10-after{position:relative;grid-column:2;grid-row:1}
  .u10-before,.u10-after{overflow:hidden;border-radius:var(--radius-img)}
  .u10-before img{height:auto}
  .u10-handle,.u10-ctl,.u10-hint{display:none}
}
@media (forced-colors:active){
  .u10-handle{background:CanvasText;forced-color-adjust:none}
  .u10-tag{border:1px solid CanvasText}
}

/* css/9a-u11-carousel.css */
/* U11 carousels (u11_carousel.go, DESIGN-UPGRADE-PLAN.md U11 + risk note 1). Included only while module u11 is enabled.
   Mechanism, every engine: the track is a horizontal scroller (overflow-x:auto + scroll-snap-type:x mandatory, Baseline:
   Chrome 69 / Safari 11 / Firefox 99) and owns its overflow, so the page never scrolls sideways.
   Decoration, Chromium 135+ only (MDN BCD css.selectors.scroll-marker / scroll-button, read 2026-10-29: no Safari, no
   Firefox): ::scroll-button() arrows and ::scroll-marker dots, inside @supports selector(::scroll-marker).
   Elsewhere u11-carousel.js adds .u11-nav (Previous / Next, 44 px, and "n of N") and the class .u11-js, which also
   turns the decoration off (the ?u11=js test hook forces that path in Chromium).
   Components read the tone tokens only (--ink --muted --border --ui-border --card-bg --surface --brand --on-brand --focus). */
.u11{--u11-w:min(85%,22rem);position:relative;min-width:0}

/* the scroller: every width (u11-m-all), or below 48em only (u11-m-phone, e.g. U06's home cards) */
.u11-m-all>.u11-track{display:flex;gap:var(--s4);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin:0;padding:var(--s2) var(--s1) var(--s4);list-style:none;scroll-padding-inline:var(--s1);scrollbar-width:thin;scrollbar-color:var(--ui-border,var(--muted)) transparent}
.u11-m-all>.u11-track>*{flex:0 0 var(--u11-w);min-width:0;scroll-snap-align:start}
@media (width < 48em){
  .u11-m-phone>.u11-track{display:flex;gap:var(--s4);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0;padding:var(--s2) var(--s1) var(--s4);list-style:none;scroll-padding-inline:var(--s1);scrollbar-width:thin;scrollbar-color:var(--ui-border,var(--muted)) transparent;
    container-type:normal} /* U06's u06grid container goes away: its cards render their standard (photo above) form, not the compact row */
  .u11-m-phone>.u11-track>*{flex:0 0 var(--u11-w);min-width:0;scroll-snap-align:start}
}
@media (width >= 48em){.u11-m-phone>.u11-nav{display:none}}
.u11-track:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u11-slide{display:flex}
.u11-slide>*{flex:1;min-width:0}

/* Chromium decoration: arrows + dots (Safari and Firefox never parse this block) */
@supports selector(::scroll-marker){
  .u11:not(.u11-js){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"t t t" "p m n";align-items:center;gap:var(--s2)}
  .u11:not(.u11-js)>.u11-track{grid-area:t;scroll-marker-group:after}
  .u11:not(.u11-js)>.u11-track::scroll-button(*){display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-btn);border:1px solid var(--ui-border,var(--muted));
    background:var(--card-bg,var(--bg));color:var(--ink);font:700 1.25rem/1 system-ui,sans-serif;cursor:pointer}
  .u11:not(.u11-js)>.u11-track::scroll-button(left){content:"\2190" / "Previous";grid-area:p}
  .u11:not(.u11-js)>.u11-track::scroll-button(right){content:"\2192" / "Next";grid-area:n}
  .u11:not(.u11-js)>.u11-track::scroll-button(*):hover{background:var(--surface)}
  .u11:not(.u11-js)>.u11-track::scroll-button(*):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .u11:not(.u11-js)>.u11-track::scroll-button(*):disabled{opacity:.35;cursor:default}
  .u11:not(.u11-js)>.u11-track::scroll-marker-group{grid-area:m;display:flex;flex-wrap:wrap;justify-content:center;gap:0}
  .u11:not(.u11-js)>.u11-track>*::scroll-marker{content:"";width:24px;height:24px;border-radius:999px;
    background:radial-gradient(circle,var(--ui-border,var(--muted)) 0 4px,transparent 5px)}
  .u11:not(.u11-js)>.u11-track>*::scroll-marker:target-current{background:radial-gradient(circle,var(--brand) 0 6px,transparent 7px)}
  .u11:not(.u11-js)>.u11-track>*::scroll-marker:focus-visible{outline:3px solid var(--focus);outline-offset:-2px}
  @media (width >= 48em){
    .u11-m-phone:not(.u11-js){display:block}
    .u11-m-phone:not(.u11-js)>.u11-track{scroll-marker-group:none}
    .u11-m-phone:not(.u11-js)>.u11-track::scroll-button(*){content:none}
  }
}

/* the fallback controls (u11-carousel.js) */
.u11-nav{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-top:var(--s1)}
.u11-nav[hidden]{display:none}
.u11-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--radius-btn);border:1px solid var(--ui-border,var(--muted));background:var(--card-bg,var(--bg));color:var(--ink);cursor:pointer}
.u11-btn svg{width:20px;height:20px}
.u11-btn:hover{background:var(--surface)}
.u11-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u11-btn:disabled{opacity:.35;cursor:default}
.u11-status{margin:0;min-width:4.5em;text-align:center;font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums}

/* the projects card */
.u11-pj{position:relative;display:flex;flex-direction:column;background:var(--card-bg,var(--bg));color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-card,12px);overflow:hidden}
.u11-pj-img{display:block;aspect-ratio:4/3;background:var(--surface);overflow:hidden}
.u11-pj-img :is(picture,img){display:block;width:100%;height:100%}
.u11-pj-img img{object-fit:cover}
.u11-pj-body{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4)}
.u11-pj-t{margin:0;font-size:var(--fs-1);line-height:var(--lh-tight,1.2)}
.u11-pj-link{color:inherit;text-decoration:none}
.u11-pj-link::after{content:"";position:absolute;inset:0;z-index:1}
.u11-pj:has(.u11-pj-link:focus-visible){outline:3px solid var(--focus);outline-offset:-3px}
.u11-pj .u11-pj-link:focus-visible{outline:none}
.u11-pj-m,.u11-pj-d{margin:0;font-size:var(--fs-small);color:var(--muted)}
@media (hover:hover){.u11-pj:hover .u11-pj-t{text-decoration:underline;text-underline-offset:.15em}}

@media (prefers-reduced-motion:reduce){.u11-track{scroll-behavior:auto}}
@media (forced-colors:active){.u11-btn,.u11-pj{border:1px solid CanvasText}}

/* css/9b-u12-viz.css */
/* U12 gutter color visualizer v2 (u12_viz.go, partials/u12-viz.html). Reads only the tone tokens. */
.u12 [hidden]{display:none!important}
.u12-grid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:900px){.u12-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.u12-stagecol,.u12-controls{min-width:0}
.u12-legend{font-weight:700;padding:0;margin:0 0 var(--s2);color:var(--ink)}
.u12-houses,.u12-tray,.u12-sides{border:0;padding:0;margin:0 0 var(--s4);min-width:0}

/* segmented radios (house, side) */
.u12-seg{display:flex;flex-wrap:wrap;gap:var(--s2)}
.u12-seg-opt{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:var(--s2) var(--s4);border:1px solid var(--ui-border);border-radius:999px;background:var(--card-bg);color:var(--ink);font-weight:600;font-size:var(--fs-small);cursor:pointer}
.u12-seg-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.u12-seg-opt:has(input:checked){background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u12-seg-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

/* stage: house 1 shows by default; the radios (CSS :has, no script) or data-house (script) pick another */
.u12-stage{margin:0;min-width:0}
.u12-frame{position:relative;border-radius:var(--radius-img);overflow:hidden;background:var(--surface)}
.u12-img{display:none;width:100%;height:auto}
.u12-img.u12-h1{display:block}
.u12:has(#u12-house-2:checked) .u12-img.u12-h1,.u12:has(#u12-house-3:checked) .u12-img.u12-h1,.u12[data-house="2"] .u12-img.u12-h1,.u12[data-house="3"] .u12-img.u12-h1{display:none}
.u12:has(#u12-house-2:checked) .u12-img.u12-h2,.u12[data-house="2"] .u12-img.u12-h2{display:block}
.u12:has(#u12-house-3:checked) .u12-img.u12-h3,.u12[data-house="3"] .u12-img.u12-h3{display:block}
.u12-cr{display:none}.u12-cr.u12-h1{display:inline}
.u12[data-house="2"] .u12-cr.u12-h1{display:none}.u12[data-house="2"] .u12-cr.u12-h2{display:inline}
.u12-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.u12-split{position:absolute;inset:0;pointer-events:none}
.u12-split::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.u12-tag{position:absolute;top:var(--s2);max-width:calc(50% - var(--s4));padding:var(--s1) var(--s2);border-radius:var(--r-sm);background:rgba(18,30,35,.82);color:#fff;font-size:var(--fs-small);font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.u12-tag-l{left:var(--s2)}.u12-tag-r{right:var(--s2)}
.u12-stage figcaption{margin-top:var(--s2);font-size:var(--fs-small);color:var(--muted)}
.u12-status{color:var(--ink);font-weight:600}

/* compare */
.u12-compare{margin:0 0 var(--s4)}
.u12-cmp-toggle{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:700;cursor:pointer;color:var(--ink)}
.u12-cmp-toggle input{width:22px;height:22px;margin:0;accent-color:var(--brand)}
.u12-sides{margin-top:var(--s2)}

/* swatch tray */
.u12-group{margin:var(--s3) 0 var(--s2);font-size:var(--fs-small);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.u12-grp:first-of-type .u12-group{margin-top:0}
.u12-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--s2)}
.u12-sw{position:relative;display:flex;align-items:center;gap:var(--s2);min-height:52px;padding:var(--s2);border:1px solid var(--ui-border);border-radius:var(--r-md);background:var(--card-bg);color:var(--ink);cursor:pointer}
.u12-sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.u12-chip{flex:none;display:block;width:36px;height:36px}
.u12-chip rect{stroke:currentColor;stroke-opacity:.5;stroke-width:1.5}
.u12-sw-text{display:flex;flex-direction:column;min-width:0}
.u12-sw-name{font-size:var(--fs-small);font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.u12-sw-vary{font-size:.75rem;line-height:1.2;color:var(--muted)}
.u12-sw:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.u12-sw:has(input:checked) .u12-sw-name::after{content:" (selected)";font-weight:600;color:var(--muted)}
.u12-sw:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.u12-sw:hover{border-color:var(--ink)}
.u12-review{margin:var(--s3) 0 0;padding:var(--s2) var(--s3);border:1px dashed var(--ui-border);border-radius:var(--r-sm);font-size:var(--fs-small);color:var(--ink);background:var(--surface)}

@media (prefers-reduced-motion:no-preference){.u12-sw,.u12-seg-opt{transition:border-color .15s,background-color .15s}}
@media (forced-colors:active){.u12-chip{forced-color-adjust:none}.u12-sw:has(input:checked),.u12-seg-opt:has(input:checked){outline:2px solid Highlight}.u12-split::before{background:CanvasText}}

/* css/9c-u13-compare.css */
/* 9c-u13-compare.css — NJG U13 comparison table (u13_compare.go; shared with U20). Tokens only (DESIGN2.md "Tone
   tokens"): the band's tone class sets --card-bg --surface --ink --muted --border --ui-border --brand-text --brand
   --on-brand --focus. A real table at a container width of 600px and up, with a sticky header row and a sticky
   first column; stacked cards below that (container query), so a phone never scrolls sideways. border-collapse
   is separate: Firefox drops collapsed borders on sticky header cells (MDN BCD position_sticky_table_elements). */
.u13-wrap{container:u13 / inline-size;margin:0 0 var(--s6)}
.u13-filter{border:0;padding:0;margin:0 0 var(--s4);min-width:0}
.u13-legend{font-weight:700;margin:0 0 var(--s2);padding:0}
.u13-opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.u13-opt{position:relative;display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s3);border:1px solid var(--ui-border);border-radius:999px;background:var(--card-bg);color:var(--ink);cursor:pointer}
/* the checkbox covers its whole pill (a 44px hit area); .u13-box draws it */
.u13-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.u13-box{flex:none;width:18px;height:18px;border:2px solid var(--ui-border);border-radius:var(--r-sm,4px);background:var(--card-bg)}
.u13-opt:has(input:checked) .u13-box{background:var(--brand-text);border-color:var(--brand-text);box-shadow:inset 0 0 0 3px var(--card-bg)}
.u13-opt:has(input:checked){border-color:var(--brand-text);box-shadow:inset 0 0 0 1px var(--brand-text)}
.u13-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.u13-best{margin:var(--s3) 0 0;font-weight:600;min-height:1.4em}
.u13-scroll{overflow-x:auto;border:1px solid var(--ui-border);border-radius:var(--r-md,8px);background:var(--card-bg);-webkit-overflow-scrolling:touch}
.u13-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u13-table.spec-table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:var(--fs-small);background:var(--card-bg);color:var(--ink)}
.u13-table.u13-wide{min-width:72rem}
.u13-table.u13-wide td[data-kind="text"]{min-width:9rem}
.u13-table caption{caption-side:top;text-align:left;padding:var(--s3);font-weight:700;color:var(--ink);background:var(--card-bg)}
.u13-table.spec-table th,.u13-table.spec-table td{padding:var(--s3);border-top:1px solid var(--border);text-align:left;vertical-align:top;background:var(--card-bg)}
.u13-table.spec-table thead th{position:sticky;top:0;z-index:2;background:var(--surface);border-top:0;border-bottom:1px solid var(--ui-border);font-weight:700}
.u13-table.spec-table thead th.u13-corner{z-index:3}
.u13-table.spec-table tbody th{position:sticky;left:0;z-index:1;font-weight:400;min-width:11rem;max-width:15rem;border-right:1px solid var(--border)}
.u13-table thead th:first-child{left:0}
.u13-name{display:block;font-weight:700;font-size:var(--fs-0,1rem)}
.u13-sub{display:block;color:var(--muted);font-weight:400}
.u13-rate{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap;font-weight:600}
.u13-pips{flex:none;overflow:visible}
.u13-pips circle{fill:none;stroke:var(--ui-border);stroke-width:1.5}
.u13-pips circle.on{fill:var(--brand-text);stroke:var(--brand-text)}
.u13-est{display:inline-block;margin:0 0 var(--s1);padding:0 var(--s2);border:1px solid var(--ui-border);border-radius:999px;font-size:.8em;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.u13-price{display:block;font-weight:700;white-space:nowrap}
.u13-ph{display:inline-block;padding:var(--s1) var(--s2);border:2px dashed var(--ui-border);border-radius:var(--radius-card,6px);color:var(--muted)}
.u13-flag{display:inline-block;margin:var(--s2) 0 0;padding:0 var(--s2);border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:.8em;font-weight:700}
.u13-flag[hidden]{display:none}
.u13-note{margin:var(--s3) 0 0;color:var(--muted);font-size:var(--fs-small)}
/* the recommended / quiz-pick / anchored row */
.u13-table tr.u13-rec>*,.u13-table tr.u13-pick>*,.u13-table tr:target>*{background:var(--surface)}
.u13-table tr.u13-rec>th,.u13-table tr.u13-pick>th,.u13-table tr:target>th{box-shadow:inset 4px 0 0 var(--brand-text)}
.u13-table tr{scroll-margin-top:calc(var(--head-h,72px) + var(--s6))}
/* the filter (JS) */
.u13-table .u13-on{box-shadow:inset 0 -3px 0 var(--brand-text)}
.u13-table tr.u13-best>th{box-shadow:inset 4px 0 0 var(--brand-text)}
.u13-table tr.u13-dim>td{color:var(--muted)}
.u13-table tr.u13-dim .u13-pips circle.on{fill:var(--muted);stroke:var(--muted)}
/* a wide container: the table fits, so the band is not a scroll box and the header sticks under the site header */
@container u13 (min-width:1160px){
  .u13-scroll{overflow:visible}
  .u13-table.spec-table thead th{top:var(--head-h,72px)}
  .u13-table caption{border-radius:var(--r-md,8px) var(--r-md,8px) 0 0}
}
/* a narrow container: every row is a card */
@container u13 (max-width:599px){
  .u13-scroll{overflow:visible;border:0;background:none}
  .u13-table.spec-table{display:block;min-width:0;background:none}
  .u13-table caption{display:block;padding:0 0 var(--s3);background:none}
  .u13-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .u13-table tbody{display:grid;gap:var(--s3)}
  .u13-table tr{display:block;border:1px solid var(--ui-border);border-radius:var(--r-md,8px);background:var(--card-bg);overflow:hidden}
  .u13-table.spec-table tbody th,.u13-table.spec-table td{display:block;position:static;max-width:none;min-width:0;border:0;padding:var(--s2) var(--s3)}
  .u13-table.spec-table tbody th{padding-top:var(--s3);border-bottom:1px solid var(--border)}
  .u13-table.spec-table td{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s2);border-top:1px solid var(--border)}
  .u13-table.spec-table td[data-label]::before{content:attr(data-label) ":";flex:0 0 100%;font-weight:600;color:var(--muted)}
  .u13-table.u13-wide td[data-kind]{min-width:0}
  .u13-table td .u13-est{margin:0}
  .u13-price{white-space:normal}
  .u13-table tr.u13-rec,.u13-table tr.u13-pick,.u13-table tr:target{border-color:var(--brand-text);box-shadow:inset 4px 0 0 var(--brand-text)}
  .u13-table tr.u13-rec>th,.u13-table tr.u13-pick>th,.u13-table tr:target>th{box-shadow:none}
}
@media (prefers-reduced-motion:no-preference){
  .u13-table tr>*{transition:background-color .2s ease,color .2s ease}
}
@media (forced-colors:active){
  .u13-pips circle.on{fill:CanvasText;stroke:CanvasText}
  .u13-pips circle{stroke:CanvasText}
  .u13-table tr.u13-pick,.u13-table tr.u13-rec{outline:2px solid Highlight}
}

/* css/9d-u14-fin.css */
/* 9d-u14-fin.css — U14 financing payment estimator (u14_fin.go, rebuild DESIGN-UPGRADE-PLAN.md U14, owner decision 54).
   Included only while design2 module u14 is enabled. Reads only the tone tokens (--bg --surface --card-bg --ink --muted
   --border --ui-border --brand-text --link --focus), so the band works on every tone. Inputs: --card-bg ground, --ink
   text, --ui-border boundary (3:1); errors in --brand-text (4.5:1 on the band); the result panel on --card-bg.
   Platform (MDN BCD read 2026-10-29): <output for> and inputmode all current engines; [hidden] form until JS;
   @container Chrome 105 / Safari 16 / Firefox 110; forced-colors Chrome 89 / Safari 16 / Firefox 89. No motion.
   Tap targets: every input and the button >= 44px. Own class names only (u14-*). */
.u14{position:relative;padding-block:var(--section-y);background:var(--bg);color:var(--ink);isolation:isolate;container:u14/inline-size}
.u14 a:not(.btn){color:var(--link,var(--brand-text))}
.u14 :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u14 .sechead{margin-bottom:var(--s4)}
.u14 .sechead .eyebrow{color:var(--brand-text)}
.u14 .sec-intro{color:var(--muted)}
.u14-row{max-width:60rem;margin-inline:auto}
.u14-nojs{margin:0 0 var(--s4);max-width:44rem;color:var(--ink)}
.u14-calc{display:grid;gap:var(--s4);margin:0 0 var(--s4)}
.u14-calc[hidden],.u14-nojs[hidden]{display:none}
.u14-fields{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
.u14-field{display:flex;flex-direction:column;gap:var(--s1);margin:0;min-width:0}
.u14-field label{font-weight:700;color:var(--ink)}
.u14-unit{display:block;font-weight:400;font-size:var(--fs-small);color:var(--muted)}
.u14-field input{box-sizing:border-box;width:100%;min-height:48px;padding:var(--s1) var(--s2);font:inherit;font-size:max(1rem,16px);color:var(--ink);background:var(--card-bg,var(--bg));border:2px solid var(--ui-border,var(--border));border-radius:var(--radius-card,6px)}
.u14-field input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.u14-field input[aria-invalid="true"]{border-color:var(--brand-text)}
.u14-hint{font-size:var(--fs-small);color:var(--muted)}
.u14-err{font-size:var(--fs-small);font-weight:700;color:var(--brand-text);min-height:0}
.u14-err:empty{display:none}
.u14-result{padding:var(--s4) var(--s4);background:var(--card-bg,var(--bg));color:var(--ink);border:2px solid var(--ui-border,var(--border));border-radius:var(--radius-card,6px)}
.u14-out-label{margin:0 0 var(--s1);font-size:var(--fs-small);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.u14-out{display:block;font-family:var(--font-head,inherit);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-tight,1.25);color:var(--ink);overflow-wrap:anywhere}
.u14-tag{margin:var(--s2) 0 0;font-weight:700;color:var(--ink)}
.u14-note{margin:0 0 var(--s4);max-width:44rem;font-size:var(--fs-small);color:var(--muted)}
.u14-actions{margin:0}
.u14-actions .btn{min-height:44px}
.u14-review{margin:var(--s4) 0 0;padding:var(--s2) var(--s3);border:2px dashed var(--ui-border,var(--border));border-radius:var(--radius-card,6px);color:var(--muted);font-size:var(--fs-small)}
.u14-fx-lede{margin-block:var(--s6)}
@container u14 (min-width:46rem){
  .u14-fields{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
}
@media (forced-colors:active){
  .u14-field input,.u14-result{border-color:CanvasText}
  .u14-err{color:CanvasText}
}

/* css/9e-u15-quiz.css */
/* 9e-u15-quiz.css — U15 which-guard quiz (u15_quiz.go, partial u15-quiz; rebuild DESIGN-UPGRADE-PLAN.md U15, rule D48).
   Included only while design2 module u15 is enabled. Reads only the tone tokens (--bg --surface --card-bg --ink --muted
   --border --ui-border --brand --on-brand --brand-text --link --focus), so the band works on any tone (u15.json tone).
   Platform (MDN, read 2026-10-29): <fieldset>/<legend>, <progress> with appearance:none + ::-webkit-progress-* and
   ::-moz-progress-bar, :has() only as an enhancement (the checked style also rides input:checked + span), :focus-visible,
   @media (prefers-reduced-motion) and (forced-colors: active). 44px targets. Own class names only (u15-*, u15p-*). */
.u15,.u15p{padding-block:var(--section-y);background:var(--bg);color:var(--ink)}
.u15 [hidden],.u15p [hidden]{display:none!important}
.u15 a:not(.btn),.u15p a:not(.btn){color:var(--link,var(--brand-text))}
.u15 :focus-visible,.u15p :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u15-status{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* the form, one question at a time */
.u15-form{display:grid;gap:var(--s6);margin-top:var(--s4);padding:var(--s6);border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-card,8px);background:var(--card-bg,var(--bg))}
.u15-prog{display:grid;gap:var(--s2)}
.u15-prog-t{font-weight:700;font-size:var(--fs-small);color:var(--muted)}
.u15-progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border:0;border-radius:999px;background:var(--surface);color:var(--brand);overflow:hidden}
.u15-progress::-webkit-progress-bar{background:var(--surface);border-radius:999px}
.u15-progress::-webkit-progress-value{background:var(--brand);border-radius:999px}
.u15-progress::-moz-progress-bar{background:var(--brand);border-radius:999px}
.u15-q{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s3)}
.u15-q-legend{font:700 var(--fs-h3,1.35rem)/1.3 var(--font-head,inherit);padding:0;margin:0 0 var(--s2);color:var(--ink)}
.u15-q-legend:focus{outline:none}
.u15-q-legend:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.u15-q-n{color:var(--brand-text)}
.u15-q-hint{margin:0;color:var(--muted);font-size:var(--fs-small)}
.u15-opts{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.u15-opt{position:relative;display:flex;min-width:0}
.u15-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.u15-opt span{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:48px;padding:var(--s2) var(--s4);border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-card,8px);background:var(--card-bg,var(--bg));color:var(--ink);font-weight:600;cursor:pointer;overflow-wrap:anywhere}
.u15-opt span::before{content:"";flex:none;width:18px;height:18px;border:2px solid var(--ui-border,var(--muted));border-radius:50%;background:var(--card-bg,var(--bg))}
.u15-opt input:checked+span{border-color:var(--brand-text);box-shadow:inset 0 0 0 1px var(--brand-text)}
.u15-opt input:checked+span::before{border-color:var(--brand-text);background:var(--brand-text);box-shadow:inset 0 0 0 3px var(--card-bg,var(--bg))}
.u15-opt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.u15-need{margin:0;font-weight:700;color:var(--brand-text)}
.u15-q.u15-missing .u15-opt span{border-color:var(--brand-text)}
.u15-nav,.u15-actions,.u15-restart{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0}
.u15-nav .btn,.u15-actions .btn,.u15-restart .btn,.u15p-retake .btn{min-height:44px}

/* the answer */
.u15-answer{margin-top:var(--s4);display:grid;gap:var(--s4)}
.u15-card{padding:var(--s6);border:1px solid var(--ui-border,var(--border));border-left:4px solid var(--brand-text);border-radius:var(--radius-card,8px);background:var(--card-bg,var(--bg));scroll-margin-top:calc(var(--head-h,64px) + var(--s4))}
.u15-card>*{margin:0}
.u15-card>*+*{margin-top:var(--s3)}
.u15-card-h{font-size:var(--fs-h2,1.75rem)}
.u15-card-h:focus{outline:none}
.u15-card-h:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.u15-fits-h{font-weight:700}
.u15-fits{padding-left:var(--s6)}
.u15-fits li+li{margin-top:var(--s1)}
.u15-care,.u15-note{color:var(--muted);font-size:var(--fs-small)}
.u15-actions{margin-top:var(--s4)!important}
.u15-more a{display:inline-flex;align-items:center;min-height:44px}
.u15-note{margin:0}

/* the short version: the no-JS answer, and a summary with JS */
.u15-short{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--border)}
.u15-short-h{margin:0 0 var(--s3);font-size:var(--fs-h3,1.35rem)}
.u15-guide{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2);counter-reset:u15}
.u15-guide>li{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s3);align-items:baseline;padding:var(--s3) var(--s4);border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-card,8px);background:var(--card-bg,var(--bg));counter-increment:u15}
.u15-guide>li::before{content:counter(u15);grid-row:span 2;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid var(--brand-text);color:var(--brand-text);font-weight:800;line-height:1}
.u15-guide-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.u15-guide-fits{grid-column:2;margin:0;padding-left:var(--s6);color:var(--muted);overflow-wrap:anywhere}
.u15-guide-fits li+li{margin-top:var(--s1)}
.u15-ice{margin:var(--s4) 0 0;color:var(--muted)}
.u15-ice a{display:inline-flex;align-items:center;min-height:44px}

/* a result page */
.u15p .wrap>*+*{margin-top:var(--s6)}
.u15p-others-h{font-size:var(--fs-h3,1.35rem)}
.u15p-others{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0;list-style:none}
.u15p-others a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border:1px solid var(--ui-border,var(--border));border-radius:999px}

@media (prefers-reduced-motion:no-preference){.u15-opt span{transition:border-color var(--dur,.2s) var(--ease,ease),box-shadow var(--dur,.2s) var(--ease,ease)}.u15-progress::-webkit-progress-value{transition:width var(--dur,.2s) var(--ease,ease)}}
@media (forced-colors:active){.u15-opt span,.u15-card,.u15-guide>li,.u15-form{border-color:CanvasText}.u15-opt input:checked+span{outline:2px solid Highlight}.u15-opt input:checked+span::before{background:Highlight;border-color:Highlight}.u15-guide>li::before{border-color:CanvasText;color:CanvasText}.u15-progress{forced-color-adjust:auto}}
@media (max-width:639px){.u15-form,.u15-card{padding:var(--s4)}}

/* css/9f-u16-map.css */
/* 9f-u16-map.css — U16 interactive county map (rebuild DESIGN-UPGRADE-PLAN.md U16, rule D49). Reads only the
   tone tokens (DESIGN2.md "Tone tokens"). Served counties: a tint of the band's red text over the card ground,
   outlined in --ui-border (3:1); unserved: hatched --surface, hairline --border (decorative, aria-hidden).
   Hover (pointer devices only), keyboard focus and the current county fill with --brand; labels flip to
   --on-brand (4.5:1). Strokes do not scale with the map (vector-effect). */
.u16{padding-block:var(--s16)}
.u16-grid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:64em){.u16-grid{grid-template-columns:minmax(0,3fr) minmax(16rem,2fr)}}
.u16-fig{margin:0;min-width:0}
.u16-stage{background:var(--card-bg);border:1px solid var(--ui-border);border-radius:var(--radius-card);padding:var(--s2)}
.u16-svg{display:block;width:100%;height:auto;max-height:min(80vh,52rem)}
.u16-svg path{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.u16-hb{fill:var(--surface)}
.u16-hl{stroke:var(--border);stroke-width:2}
.u16-off path{fill:url(#u16-hatch);stroke:var(--border);stroke-width:1}
.u16-on path{fill:var(--surface);fill:color-mix(in srgb,var(--brand-text) 16%,var(--card-bg));stroke:var(--ui-border);stroke-width:1.25;transition:fill .15s}
.u16-on a{outline:none;cursor:pointer}
.u16-lbl{font:600 30px/1 var(--font-body,system-ui,sans-serif);fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.u16-on a.u16-cur path,.u16-on a:focus-visible path{fill:var(--brand);stroke:var(--focus);stroke-width:3}
.u16-on a:focus-visible path{stroke:var(--ink);stroke-width:4}
.u16-on a.u16-cur .u16-lbl,.u16-on a:focus-visible .u16-lbl{fill:var(--on-brand)}
@media (hover:hover){.u16-on a:hover path{fill:var(--brand-hover)}.u16-on a:hover .u16-lbl{fill:var(--on-brand)}}
.u16-pin circle{fill:var(--ink);stroke:var(--card-bg);stroke-width:3;vector-effect:non-scaling-stroke}
.u16-pin{outline:none}
.u16-pin:focus-visible circle{fill:var(--brand);stroke:var(--ink);stroke-width:4}
@media (hover:hover){.u16-pin:hover circle{fill:var(--brand)}}
@media (max-width:47.99em){.u16-lbl{display:none}}
.u16-key{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s3);font-size:.875rem;color:var(--muted)}
.u16-k{display:inline-flex;align-items:center;gap:var(--s2)}
.u16-k::before{content:"";width:1rem;height:1rem;border-radius:var(--radius-btn);border:1px solid var(--ui-border)}
.u16-k-on::before{background:var(--surface);background:color-mix(in srgb,var(--brand-text) 16%,var(--card-bg))}
.u16-k-off::before{border-color:var(--border);background:repeating-linear-gradient(45deg,var(--surface) 0 4px,var(--border) 4px 6px)}
.u16-k-pin::before{border-radius:50%;width:.75rem;height:.75rem;background:var(--ink);border-color:var(--card-bg)}
.u16-now{flex-basis:100%;min-height:1.4em;color:var(--ink);font-weight:600}
.u16-src{flex-basis:100%;font-size:.8125rem}
.u16-lh{font-size:1.125rem;margin:0 0 var(--s2)}
.u16-lh+.u16-list{margin-top:0}
.u16-list{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:var(--s2)}
.u16-list a{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--ui-border);border-radius:var(--radius-btn);background:var(--card-bg);color:var(--ink);text-decoration:none}
.u16-list a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (hover:hover){.u16-list a:hover{border-color:var(--brand-text);color:var(--brand-text)}}
.u16-list a[aria-current]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u16-list a[aria-current] .u16-meta{color:var(--on-brand)}
.u16-list a.u16-hot{border-color:var(--brand-text)}
.u16-name{font-weight:600}
.u16-meta{font-size:.8125rem;color:var(--muted);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.u16-on path{transition:none}}
@media (forced-colors:active){.u16-on path{fill:Canvas;stroke:CanvasText}.u16-on a:focus-visible path,.u16-on a.u16-cur path{fill:Highlight}.u16-lbl{fill:CanvasText}.u16-off path{fill:Canvas;stroke:GrayText}.u16-pin circle{fill:LinkText}}

/* css/a0-u17-accordion.css */
/* U17 accordion (u17_accordion.go, DESIGN-UPGRADE-PLAN.md U17). Included only while module u17 is enabled.
   Reads the semantic tokens a tone re-declares (--ink --muted --border --ui-border --brand-text --focus --surface).
   Platform (MDN BCD read 2026-10-29): <details name> (Baseline 2024); ::details-content (Chrome 131, Safari 18.4,
   Firefox 143) + interpolate-size: allow-keywords (Chrome 129 only). The animation sits in its own rules behind
   @supports and prefers-reduced-motion: no-preference, so an unsupported selector never drops a base rule and
   reduced motion opens instantly. Every FAQ block on the page (.faq details) gets the same look. */
.u17-group+.u17-group{margin-top:var(--s6)}
.u17-gh{margin:0 0 var(--s2);font-size:var(--fs-1);color:var(--brand-text);letter-spacing:.02em}
.faq details,.u17-acc details{border-bottom:1px solid var(--border)}
.u17-group>details:first-of-type{border-top:1px solid var(--border)}
.faq summary,.u17-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;padding:var(--s2) 0;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker,.u17-acc summary::-webkit-details-marker{display:none}
.faq summary::after,.u17-acc summary::after{content:"";flex:none;inline-size:.6em;block-size:.6em;margin-inline:var(--s2);border:solid var(--brand-text);border-width:0 2px 2px 0;transform:translateY(-25%) rotate(45deg)}
.faq details[open]>summary::after,.u17-acc details[open]>summary::after{transform:translateY(25%) rotate(-135deg)}
.faq summary:hover,.u17-acc summary:hover{color:var(--brand-text)}
.faq summary:focus-visible,.u17-acc summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.faq details>p,.u17-acc details>p{margin:0 0 var(--s3);color:var(--muted);max-width:var(--measure,70ch)}
.u17-body{padding:0 0 var(--s3)}
@media (forced-colors:active){.faq summary::after,.u17-acc summary::after{border-color:CanvasText}}
@media (prefers-reduced-motion:no-preference){
  .faq summary::after,.u17-acc summary::after{transition:transform .2s ease}
}
@media (prefers-reduced-motion:no-preference){
  @supports selector(::details-content) and (interpolate-size:allow-keywords){
    .faq details,.u17-acc details{interpolate-size:allow-keywords}
    .faq details::details-content,.u17-acc details::details-content{block-size:0;overflow-y:clip;transition:block-size .25s ease,content-visibility .25s allow-discrete}
    .faq details[open]::details-content,.u17-acc details[open]::details-content{block-size:auto}
  }
}

/* css/a1-u18-timeline.css */
/* U18 process timeline (u18_timeline.go, DESIGN-UPGRADE-PLAN.md U18). Included only while module u18 is enabled.
   Reads the semantic tokens a tone re-declares (--bg --ink --muted --border --brand-text).
   Base (every browser, reduced motion, no view()): an ordered list, vertical, with a FULL line behind the marks;
   from 900px a process of 3-horizontal_max steps (.u18-row) lays out in a row with the line across the marks.
   Platform (MDN BCD read 2026-10-29): a named view timeline (view-timeline on the list, animation-timeline on the fill; the same view() progress, measured on the whole list rather than the 4px line) + animation-range (Chrome 115, Safari 26,
   Firefox 159); individual `scale` (Baseline 2022). The progress animation lives only inside
   @media (prefers-reduced-motion: no-preference) and @supports (animation-timeline: view()) (rule D51). */
.u18{--u18-m:var(--s12);--u18-w:4px;--u18-gap:var(--s6)}
.u18[data-u18="3"]{--u18-n:3}.u18[data-u18="4"]{--u18-n:4}.u18[data-u18="5"]{--u18-n:5}.u18[data-u18="6"]{--u18-n:6}
.u18-tl{position:relative;margin-top:var(--s6)}
.u18-line{position:absolute;top:calc(var(--u18-m) / 2);bottom:0;left:calc((var(--u18-m) - var(--u18-w)) / 2);width:var(--u18-w);border-radius:var(--u18-w);background:var(--border);overflow:hidden}
.u18-fill{position:absolute;inset:0;background:var(--brand-text);transform-origin:50% 0}
.u18-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
.u18-step{position:relative;display:grid;grid-template-columns:var(--u18-m) minmax(0,1fr);column-gap:var(--s4);align-items:start;min-width:0}
.u18-step:last-child::after{content:"";position:absolute;left:0;width:var(--u18-m);top:var(--u18-m);bottom:0;background:var(--bg)}
.u18-mark{grid-row:1 / span 2;position:relative;z-index:1;display:grid;place-items:center;inline-size:var(--u18-m);block-size:var(--u18-m);border-radius:50%;background:var(--bg);color:var(--brand-text)}
.u18-mark .i{display:block;width:100%;height:100%;stroke-width:1.5}
.u18-num{display:grid;place-items:center;inline-size:100%;block-size:100%;border-radius:50%;border:2px solid var(--brand-text);font-weight:800;font-size:var(--fs-1);line-height:1}
.u18-step h3{margin:0 0 var(--s2);min-height:var(--u18-m);display:flex;align-items:center;color:var(--ink)}
.u18-step p{margin:0;color:var(--muted);max-width:var(--measure,70ch)}
@media (min-width:900px){
  .u18-row .u18-steps{grid-template-columns:repeat(var(--u18-n),minmax(0,1fr))}
  .u18-row .u18-step{display:flex;flex-direction:column}
  .u18-row .u18-step:last-child::after{content:none}
  .u18-row .u18-mark{margin-bottom:var(--s2)}
  .u18-row .u18-step h3{min-height:0}
  .u18-row .u18-line{top:calc((var(--u18-m) - var(--u18-w)) / 2);bottom:auto;height:var(--u18-w);width:auto;left:calc(var(--u18-m) / 2);right:calc((100% - (var(--u18-n) - 1) * var(--u18-gap)) / var(--u18-n) - var(--u18-m) / 2)}
  .u18-row .u18-fill{transform-origin:0 50%}
}
@media (forced-colors:active){
  .u18-line{background:GrayText}.u18-fill{background:CanvasText}
  .u18-mark,.u18-num{border-color:CanvasText;color:CanvasText}
}
@keyframes u18-grow-y{from{scale:1 0}to{scale:1 1}}
@keyframes u18-grow-x{from{scale:0 1}to{scale:1 1}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .u18-tl{view-timeline:--u18-tl block}
    .u18-fill{animation:u18-grow-y linear both;animation-timeline:--u18-tl;animation-range:entry 25% cover 55%}
    @media (min-width:900px){.u18-row .u18-fill{animation-name:u18-grow-x;animation-range:entry 75% cover 60%}}
  }
}

/* css/a2-u19-tabs.css */
/* u19_tabs.go — NJG U19 tabs (rebuild DESIGN-UPGRADE-PLAN.md §4 U19). Without JS: every panel stacked under its own
   h3. With JS (.u19-on): the tab row shows, one panel at a time, and the panel heading is read by screen readers
   only (the tab names it). Colors are tone tokens only (--ui-border falls back to --muted, 4.5:1, outside a toned band). */
.u19-tabs{margin:var(--s4) 0 var(--s6)}
.u19-panel{padding:var(--s4);border:1px solid var(--ui-border,var(--muted));border-left:4px solid var(--brand-text);border-radius:var(--radius-card);background:var(--surface);color:var(--ink)}
.u19-panel+.u19-panel{margin-top:var(--s3)}
.u19-panel>p{margin:0}
.u19-panel>.u19-h{margin:0 0 var(--s2);font-size:var(--fs-1)}
.u19-list{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3);padding:0}
.u19-list[hidden],.u19-panel[hidden]{display:none}
.u19-list [role="tab"]{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 var(--s4);border:1px solid var(--ui-border,var(--muted));border-radius:var(--radius-btn);background:var(--bg);color:var(--ink);font:inherit;font-weight:600;line-height:1.2;text-align:left;cursor:pointer}
.u19-list [role="tab"]:hover{border-color:var(--brand-text);color:var(--brand-text)}
.u19-list [role="tab"][aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u19-list [role="tab"]:focus-visible,.u19-panel:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u19-on .u19-panel+.u19-panel{margin-top:0}
.u19-on .u19-panel>.u19-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:no-preference){.u19-list [role="tab"]{transition:background-color .15s,border-color .15s,color .15s}}
@media (forced-colors:active){.u19-list [role="tab"]{border:1px solid ButtonText}.u19-list [role="tab"][aria-selected="true"]{border-width:3px}.u19-panel{border:1px solid CanvasText}}

/* css/a3-u21-reviews.css */
/* a3-u21-reviews.css — U21 reviews wall + strips (u21_reviews.go, DESIGN-UPGRADE-PLAN.md U21). Included only while design2
   module u21 is enabled. Reads only the tone tokens (--bg --surface --card-bg --ink --muted --border --ui-border --brand-text
   --brand --on-brand --link --focus), so the cards work on every tone.
   Platform (MDN BCD read 2026-10-29): multi-column layout `columns` + break-inside:avoid (Chrome 50 / Safari 10 / Firefox 65,
   Baseline); :has() (Chrome 105 / Safari 15.4 / Firefox 121) for the no-JS :target filter — without :has the wall simply stays
   unfiltered and every review shows; <details>/<summary> (Baseline) for "Read more". The per-topic filter rules are generated
   (u21TopicCSS). No motion. */
.u21-band{padding-block:var(--section-y);background:var(--bg);color:var(--ink)}
.u21-band a:not(.btn){color:var(--link,var(--brand-text))}
.u21-band :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u21-band .sechead .eyebrow{color:var(--brand-text)}
.u21-band .sec-intro{color:var(--muted)}
.u21-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.u21-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* stars: #u21-s used five times; filled in --brand-text, the rest outlined */
.u21-st{display:block;width:6.25rem;height:1.25rem;flex:none}
.u21-st .u21-on{fill:var(--brand-text)}
.u21-st .u21-off{fill:none;stroke:var(--ui-border);stroke-width:1.2}

/* the wall head: title + rating summary */
.u21-head{display:grid;gap:var(--s4);align-items:start;margin-bottom:var(--s4)}
.u21-head .sechead{margin:0}
@media (width >= 48em){.u21-head{grid-template-columns:minmax(0,1fr) auto}}
.u21-sum{display:grid;justify-items:start;gap:var(--s1);padding:var(--s4);border:1px solid var(--ui-border);border-radius:var(--radius-card,12px);background:var(--card-bg,var(--surface))}
.u21-val{margin:0;line-height:1}
.u21-big{font-family:var(--font-head,inherit);font-size:clamp(2.5rem,6vw,3.25rem);font-weight:700;color:var(--ink)}
.u21-sum .u21-st{width:8rem;height:1.6rem}
.u21-cnt{margin:0;color:var(--muted)}
.u21-g{margin-top:var(--s2);min-height:44px}

/* the filter: links styled as chips (44 px targets) */
.u21-tgt{display:block;scroll-margin-top:6rem}
.u21-f ul{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3);padding:0;list-style:none}
.u21-f a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s4);border:1px solid var(--ui-border);border-radius:999px;
  background:transparent;color:var(--ink);text-decoration:none;font-weight:600}
.u21-band .u21-f a{color:var(--ink)}
.u21-f a:hover{background:var(--surface)}
.u21-f .u21-n{font-weight:400;color:inherit;opacity:.85;font-variant-numeric:tabular-nums}
.u21-f a[aria-current="true"],.u21-band .u21-f a[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u21-status{margin:0 0 var(--s4);color:var(--muted);font-size:var(--fs-small)}
.u21-st-t{display:none}

/* masonry: CSS columns, DOM in date order */
.u21-cols{columns:20rem auto;column-gap:var(--s4)}
.u21-cols>.u21-card{break-inside:avoid;margin:0 0 var(--s4)}

/* a card */
.u21-card{position:relative;display:flex;flex-direction:column;gap:var(--s2);margin:0;padding:var(--s4);background:var(--card-bg,var(--bg));color:var(--ink);
  border:1px solid var(--ui-border);border-radius:var(--radius-card,12px)}
.u21-q{margin:0;padding:0;border:0;font-style:normal;quotes:none}
.u21-q p{margin:0;color:var(--ink);overflow-wrap:anywhere}
.u21-more{margin:0}
.u21-more>p{margin-top:var(--s1)}
.u21-more summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--link,var(--brand-text));font-weight:600;list-style:none;text-decoration:underline;text-underline-offset:.15em}
.u21-more summary::-webkit-details-marker{display:none}
.u21-more .u21-rl,.u21-more[open] .u21-rm{display:none}
.u21-more[open] .u21-rl{display:inline}
.u21-q:has(.u21-more[open]) .u21-ell{display:none}
/* board item 100: open = the whole review as one paragraph (the details hold all of it), then Show less under it */
.u21-q:has(.u21-more[open]) .u21-pre{display:none}
.u21-more[open]{position:relative;padding-bottom:var(--s16)}
.u21-more[open]>p{margin-top:0}
.u21-more[open]>summary{position:absolute;left:0;bottom:0}
.u21-card figcaption{margin-top:auto;color:var(--muted);font-size:var(--fs-small)}
.u21-card .u21-name{color:var(--ink)}

/* the strip (inside a U11 carousel): cards fill the slide. The slide width is set here, not by U11Carousel.Width:
   that writes a style attribute, which the site CSP (style-src 'self') refuses. */
.u11.u21-strip{--u11-w:min(85%,21rem)}
.u21-strip .u21-card{height:100%}
.u21-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:var(--s3) 0 0}
.u21-links a{display:inline-flex;align-items:center;min-height:44px}

@media (forced-colors: active){
  .u21-st .u21-on{fill:CanvasText}
  .u21-f a[aria-current="true"]{border:2px solid Highlight}
}
@media print{.u21-f,.u21-more summary,.u21-pre{display:none}.u21-more>p{display:block}}

/* css/a4-u22-crew.css */
/* a4-u22-crew.css — U22 crew section "Who comes to your house" (u22_crew.go, rebuild DESIGN-UPGRADE-PLAN.md U22).
   Included only while design2 module u22 is enabled. Reads only the tone tokens (--bg --surface --ink --muted --border
   --brand-text --focus), so it works on every tone. Text stays --ink on --bg (body pair, 4.5:1 per U02); the step
   checkmarks are --brand-text (4.5:1 on every band).
   Platform (MDN BCD read 2026-10-29): CSS grid; aspect-ratio Chrome 88 / Safari 15 / Firefox 89 (older browsers keep
   the photo's own 4:3 size from its width/height); object-fit Chrome 32 / Safari 10 / Firefox 36; @container
   Chrome 105 / Safari 16 / Firefox 110 (below that the one-column phone layout stays, which reads fine);
   forced-colors Chrome 89 / Safari 16 / Firefox 89. No motion. Own class names only (u22-*). */
.u22{position:relative;padding-block:var(--section-y);background:var(--bg);color:var(--ink);container:u22/inline-size}
.u22 :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u22 .sechead{margin-bottom:var(--s4)}
.u22 .sechead .eyebrow{color:var(--brand-text)}
.u22 .sec-intro{color:var(--muted)}
.u22-row{display:grid;gap:var(--s8);max-width:72rem;margin-inline:auto}
.u22-body{min-width:0;max-width:44rem}
.u22-story p{margin:0 0 var(--s3);color:var(--ink)}
.u22-h3{margin:var(--s6) 0 var(--s3);font-size:var(--fs-h3);line-height:var(--lh-tight,1.2);color:var(--ink)}
.u22-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.u22-steps li{position:relative;padding-inline-start:var(--s8);color:var(--ink)}
.u22-steps li::before{content:"";position:absolute;inset-inline-start:.3em;top:.2em;width:.45em;height:.85em;border:solid var(--brand-text);border-width:0 .17em .17em 0;transform:rotate(45deg)}
.u22-photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);min-width:0}
.u22-ph{margin:0;min-width:0;border-radius:var(--radius-card,6px);overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.u22-ph:first-child{grid-column:1/-1}
.u22-ph :is(picture,img){display:block;width:100%;height:auto}
.u22-ph img{aspect-ratio:4/3;object-fit:cover}
@container u22 (min-width:48rem){
  .u22-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:var(--s12)}
}
@media (forced-colors:active){
  .u22{border-top:1px solid CanvasText}
  .u22-steps li::before{border-color:CanvasText}
  .u22-ph{border-color:CanvasText}
}
.u22-fx-lede{margin-block:var(--s6)}

/* css/a5-u23-seal.css */
/* a5-u23-seal.css — U23 warranty seal (u23_seal.go, rebuild DESIGN-UPGRADE-PLAN.md U23). Included only while design2
   module u23 is enabled. Reads only the tone tokens (--bg --surface --card-bg --ink --muted --border --brand-text
   --brand --on-brand --link --focus), so the seal works on every tone: light, warm, dark, brand and photo.
   Seal colors: rosette, rings and dots in --brand-text (>= 4.5:1 on the band); the face in --card-bg; arc text and the
   year count in --ink on the face (body-text pair); the shield in --brand-text with the check cut out in --card-bg (--brand on charcoal is 2.72:1, under 3:1).
   Platform (MDN BCD read 2026-10-29): SVG <textPath href> Chrome 50 / Safari 12.1 / Firefox 2; @container Chrome 105 /
   Safari 16 / Firefox 110; forced-colors Chrome 89 / Safari 16 / Firefox 89. No motion except an optional hover lift
   under prefers-reduced-motion: no-preference. Own class names only (u23-*). */
.u23{position:relative;padding-block:var(--section-y);background:var(--bg);color:var(--ink);isolation:isolate;container:u23/inline-size}
.u23 a:not(.btn){color:var(--link,var(--brand-text))}
.u23 :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u23 .sechead{margin-bottom:var(--s4)}
.u23 .sechead .eyebrow{color:var(--brand-text)}
.u23 .sec-intro{color:var(--muted)}
.u23 .u23-row{display:grid;gap:var(--s6);justify-items:start;text-align:start;max-width:60rem;margin-inline:auto}
.u23-seal{margin:0;width:clamp(8.5rem,38vw,11.5rem);aspect-ratio:1;flex:none}
.u23-seal svg{display:block;width:100%;height:100%;overflow:visible}
.u23-rosette,.u23-dot{fill:var(--brand-text)}
.u23-face{fill:var(--card-bg,var(--bg))}
.u23-ring{stroke:var(--brand-text)}
.u23-shield{fill:var(--brand-text)}
.u23-check{stroke:var(--card-bg,var(--bg))}
.u23-arc{fill:var(--ink);font-family:var(--font-head,inherit);font-size:13px;font-weight:700;letter-spacing:.08em}
.u23-num{fill:var(--ink);font-family:var(--font-head,inherit);font-size:40px;font-weight:700}
.u23-yr{fill:var(--ink);font-size:12px;font-weight:700;letter-spacing:.12em}
.u23-has-years :is(.u23-shield,.u23-check){display:none}
.u23-body{min-width:0;max-width:44rem}
.u23-promise{margin:0 0 var(--s3);font-family:var(--font-head,inherit);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-tight,1.2);color:var(--ink)}
.u23-terms{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:var(--s2);text-align:start}
.u23-terms li{position:relative;padding-inline-start:var(--s8);color:var(--ink)}
.u23-terms li::before{content:"";position:absolute;inset-inline-start:.3em;top:.2em;width:.45em;height:.85em;border:solid var(--brand-text);border-width:0 .17em .17em 0;transform:rotate(45deg)}
.u23-facts{margin:0 0 var(--s4);text-align:start;border-top:1px solid var(--border)}
.u23-facts dt{color:var(--ink)}
.u23-facts dd{color:var(--muted)}
.u23-actions{margin:0}
.u23-actions .btn{min-height:44px}
.u23 .btn-ghost{color:var(--ink);border-color:var(--ui-border,var(--border));background:transparent}
.u23 .btn-ghost:hover{border-color:var(--ink)}
.u23-review{margin:var(--s4) 0 0;padding:var(--s2) var(--s3);border:2px dashed var(--ui-border,var(--border));border-radius:var(--radius-card,6px);color:var(--muted);font-size:var(--fs-small);text-align:start}
@container u23 (min-width:40rem){
  .u23 .u23-row{grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;text-align:start;gap:var(--s12)}
  .u23-seal{width:11.5rem}
}
@media (prefers-reduced-motion:no-preference){
  .u23-seal svg{transition:transform .25s ease}
  .u23:hover .u23-seal svg{transform:rotate(-4deg) scale(1.02)}
}
@media (forced-colors:active){
  .u23{border-top:1px solid CanvasText}
  .u23-rosette,.u23-dot,.u23-shield{fill:CanvasText}
  .u23-face{fill:Canvas}
  .u23-ring{stroke:CanvasText}
  .u23-check{stroke:Canvas}
  .u23-arc,.u23-num,.u23-yr{fill:CanvasText}
  .u23-terms li::before{border-color:CanvasText}
}
.u23-fx-lede{margin-block:var(--s6)}

/* css/a6-u24-story.css */
/* a6-u24-story.css — U24 project story (u24_story.go, partial u24-story; rebuild DESIGN-UPGRADE-PLAN.md U24, rule D57).
   Included only while design2 module u24 is enabled. Reads only the tone tokens (--bg --surface --card-bg --ink --muted
   --border --ui-border --brand-text --link --focus), so the bands work on any tone (u24.json tone / related_tone).
   Platform (MDN, read 2026-10-29): CSS grid + gap, aspect-ratio (Chrome 88, Firefox 89, Safari 15), counter() on an
   <ol>, :focus-visible, @media (forced-colors: active). No motion except a hover lift under
   prefers-reduced-motion: no-preference. Own class names only (u24-*). */
.u24-story,.u24-rel{padding-block:var(--section-y);background:var(--bg);color:var(--ink)}
.u24-story a:not(.btn),.u24-rel a:not(.btn){color:var(--link,var(--brand-text))}
.u24-story :focus-visible,.u24-rel :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u24-h{margin:0 0 var(--s4);font-size:var(--fs-h3,1.35rem)}
.u24-sub{margin:0 0 var(--s3);font-size:var(--fs-h3,1.35rem)}
.u24-story .wrap>*+*{margin-top:var(--s6)}

/* the job's own photo / its before-after pair */
.u24-media{margin:0;max-width:960px;min-width:0}
.u24-photo picture,.u24-photo img{display:block;width:100%;height:auto;border-radius:var(--radius-img,8px)}
.u24-photo figcaption{margin-top:var(--s2);color:var(--muted);font-size:var(--fs-small)}

/* facts strip: town, county, service, completed */
.u24-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:0;margin:0;border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-card,8px);background:var(--surface);overflow:hidden}
.u24-fact{padding:var(--s3) var(--s4);min-width:0;border-left:1px solid var(--border)}
.u24-fact:first-child{border-left:0}
.u24-fact dt{margin:0;color:var(--muted);font-size:var(--fs-small);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.u24-fact dd{display:flex;align-items:center;min-height:44px;margin:0;font-weight:700;overflow-wrap:anywhere}
.u24-fact dd a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:640px){.u24-facts{grid-template-columns:1fr 1fr}.u24-fact{border-left:0;border-top:1px solid var(--border)}.u24-fact:nth-child(-n+2){border-top:0}.u24-fact:nth-child(2n){border-left:1px solid var(--border)}}

/* problem -> what we did -> result */
.u24-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));counter-reset:u24}
.u24-step{margin:0;padding:var(--s4);border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-card,8px);background:var(--card-bg,var(--bg));counter-increment:u24}
.u24-step::before{content:counter(u24);display:grid;margin-bottom:var(--s2);place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid var(--brand-text);color:var(--brand-text);font-weight:800;line-height:1}
.u24-step-h{margin:0 0 var(--s2);font-size:1.25rem}
.u24-step p{margin:0}

/* related + CTA */
.u24-cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.u24-card{margin:0;min-width:0}
.u24-rel .u24-card a{display:flex;flex-direction:column;height:100%;border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-card,8px);background:var(--card-bg,var(--bg));color:var(--ink);text-decoration:none;overflow:hidden}
.u24-card-img{display:block;aspect-ratio:3/2;background:var(--surface);overflow:hidden}
.u24-card-img picture,.u24-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.u24-card-noimg{display:grid;place-items:center;padding:var(--s3);color:var(--muted);font-weight:700;text-align:center}
.u24-card-txt{display:block}
.u24-card-t{display:block;padding:var(--s3) var(--s4) 0;font-weight:700;line-height:var(--lh-tight,1.25)}
.u24-card a:hover .u24-card-t{text-decoration:underline}
.u24-card-m{display:block;padding:var(--s1) var(--s4) var(--s3);color:var(--muted);font-size:var(--fs-small)}
.u24-all{margin:var(--s4) 0 0}
.u24-all a{display:inline-flex;align-items:center;min-height:44px}
.u24-next{margin-top:var(--s8);padding:var(--s6);border:1px solid var(--ui-border,var(--border));border-radius:var(--radius-card,8px);background:var(--card-bg,var(--bg));max-width:960px}
.u24-rel .wrap>.u24-next:first-child{margin-top:0}
.u24-next-h{margin:0 0 var(--s2);font-size:var(--fs-h3,1.35rem)}
.u24-next p{margin:0}
.u24-next-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)!important}
.u24-next-actions .btn{min-height:44px}
@media (prefers-reduced-motion:no-preference){.u24-card a{transition:transform var(--dur,.2s) var(--ease,ease),box-shadow var(--dur,.2s) var(--ease,ease)}.u24-card a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12)}}
@media (forced-colors:active){.u24-step::before{border-color:CanvasText;color:CanvasText}.u24-card a,.u24-facts,.u24-step,.u24-next{border-color:CanvasText}}
@media (max-width:639px){.u24-rel .u24-card a{flex-direction:row;align-items:stretch}.u24-card-img{flex:0 0 38%;aspect-ratio:auto;min-height:96px}.u24-card-txt{flex:1;min-width:0}}

/* css/a7-u25-reveal.css */
/* a7-u25-reveal.css — U25 scroll reveals (u25_reveal.go, rebuild DESIGN-UPGRADE-PLAN.md U25, rule D58). Included only while
   design2 module u25 is enabled; for NJG it stands in for the D24 fade (00-f-design.css, not edited): the same
   elements, the same selector weight, later in the cascade, so this animation replaces fade-up.
   The defect it fixes (staging, guides page at 1280): D24 faded OPACITY from 0 over entry 0%→30%, so a card resting
   low in the window (or straddling the fold at load) stayed washed out. Here nothing ever animates opacity: the reveal
   is a short rise only, finished by entry 40% (the element 40% into view), so text is always at full opacity and full
   contrast at any scroll position. Cards in a list rise a little later one after another (sibling-index(), Chrome 138 /
   Safari 26.2 / Firefox 154, MDN css.types.sibling-index); without it, no stagger.
   Platform (MDN BCD read 2026-10-30): scroll-driven animation-timeline:view() css.properties.animation-timeline.view
   Chrome 115 / Safari 26 / Firefox 159; animation-range Chrome 115 / Safari 26 / Firefox 159. Fallback: inside
   @supports only, so a browser without view timelines shows everything static; under prefers-reduced-motion: reduce
   nothing moves (the final state renders). */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    main>section:not(:first-child) :is(.card,.sechead,.sec-head,.split,.faq details,.gallery li,.u30-card,.u06-card){animation:u25-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes u25-rise{from{translate:0 var(--s4);scale:.985}to{translate:none;scale:none}}
  }
  @supports (animation-timeline:view()) and (animation-range-start:entry calc(1% * sibling-index())){
    main>section:not(:first-child) :is(.cards,.u30-list)>li:is(.card,.u30-card){animation-range-start:entry calc(min(sibling-index() - 1, 3) * 6%)}
  }
}

/* css/a8-u26-vt.css */
/* a8-u26-vt.css — U26 cross-document view transitions, card image -> hero (u26_vt.go, rebuild DESIGN-UPGRADE-PLAN.md U26,
   rule D59). Included only while design2 module u26 is enabled. The names are set just in time by assets/u26-vt.js
   (pageswap on the card's image, pagereveal on the destination hero), never in the HTML, so a page never carries a
   duplicate view-transition-name. This file only shapes the one shared animation (view-transition-class card-hero).
   Platform (MDN BCD read 2026-10-30): @view-transition css.at-rules.view-transition Chrome 126 / Safari 18.2 / Firefox
   no; view-transition-class css.properties.view-transition-class Chrome 125 / Safari 18.2 / Firefox 144; pagereveal
   api.Window.pagereveal_event Chrome 123 / Safari 18.2 / Firefox no. Fallback: a plain navigation. The site's
   @view-transition {navigation:auto} (F22) already sits inside prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(*.card-hero){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(*.card-hero),::view-transition-new(*.card-hero){height:100%;object-fit:cover;overflow:clip}
}

/* css/a9-u28-mega.css */
/* a9-u28-mega.css — U28 mega menu v2 (u28_nav.go, rebuild DESIGN-UPGRADE-PLAN.md U28, rule D60). Included only while design2
   module u28 is enabled. Tokens only (--bg --surface --ink --muted --border --ui-border --brand-text --brand --on-brand
   --focus --head-h). Platform (MDN BCD read 2026-10-30): Popover API api.HTMLElement.popover Chrome 114 / Safari 17 /
   Firefox 125, :popover-open css.selectors.popover-open same; anchor positioning css.properties.anchor-name Chrome 125 /
   Safari 26 / Firefox 147, css.properties.position-area Chrome 129 / Safari 26 / Firefox 147,
   css.properties.position-try-fallbacks Chrome 128 / Safari 26 / Firefox 147. Fallbacks: no anchor support = the panel
   is fixed full-width under the header (--head-h); no popover support = the old hover / :focus-within panel. */

/* the trigger: looks like the other menu items, 44px, the chevron turns while its panel is open */
.u28-tg{display:flex;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;padding:var(--s2) var(--s3);border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer}
.u28-tg:hover,.u28-item:has(>.mega:popover-open)>.u28-tg{background:var(--surface)}
.u28-tg:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u28-tg[data-current]{color:var(--brand-text);box-shadow:inset 0 -2px 0 var(--brand-text)}
.u28-chev{width:12px;height:12px;flex:none}
@media (prefers-reduced-motion:no-preference){.u28-chev{transition:rotate var(--dur,.2s) var(--ease,ease)}}
.u28-item:has(>.mega:popover-open) .u28-chev{rotate:180deg}
@media (min-width:1024px) and (max-width:1279px){.u28-tg{padding:var(--s2) var(--s1)}}

/* the panel in the top layer: undo the UA popover box, keep the old panel's look */
.mega[popover]{position:fixed;inset:auto;margin:0;width:auto;max-width:none;height:auto;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--ink);background-color:var(--bg);box-shadow:0 16px 32px rgba(0,0,0,.12);overflow-y:auto;max-height:calc(100vh - var(--head-h) - var(--s2));max-height:calc(100dvh - var(--head-h) - var(--s2))}
.mega[popover]:not(:popover-open){display:none}
.mega[popover]:popover-open{display:block}
.u28-k-services{anchor-name:--u28-services}
.u28-k-areas{anchor-name:--u28-areas}
@supports (anchor-name:--a){
  .mega-services[popover]{position-anchor:--u28-services}
  .mega-areas[popover]{position-anchor:--u28-areas}
  /* the row under the menu item, every column: the panel spans the window under the header */
  .mega[popover]{position-area:bottom span-all;top:0;left:0;right:0;position-try-fallbacks:flip-block}
}
@supports not (anchor-name:--a){
  .mega[popover]{top:var(--head-h);left:0;right:0}
}
/* no Popover API: the panel opens on hover and keyboard focus as before */
@supports not selector(:popover-open){
  .u28-item{position:static}
  .u28-item:hover>.mega,.u28-item:focus-within>.mega{display:block}
}

/* inside: groups on the left, the promo tile or the map picture on the right */
.u28-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
@media (min-width:1024px){.u28-wrap{grid-template-columns:minmax(0,1fr) minmax(200px,248px)}}
.u28-main{min-width:0}
.mega .mega-head{gap:var(--s2)}
.u28-i{width:28px;height:28px;flex:none;color:var(--brand-text)}
.u28-gt{display:flex;flex-direction:column;min-width:0}
.u28-gd{font:500 var(--fs-small)/1.3 var(--font-body,inherit);color:var(--muted)}

.u28-promo{display:flex;flex-direction:column;gap:var(--s3);align-self:start;padding:var(--s4);background:var(--surface);border:1px solid var(--ui-border,var(--border));border-top:4px solid var(--brand-text);border-radius:var(--radius-card,8px)}
.u28-promo-h{margin:0;font:700 var(--fs-small)/1.2 var(--font-head,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-text)}
.u28-promo-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.mega .u28-promo-list a{display:flex;flex-direction:column;align-items:flex-start;min-height:44px;padding:var(--s1) 0;color:var(--ink);font-weight:700}
.mega .u28-promo-list a:hover .u28-promo-t{color:var(--brand-text)}
.u28-promo-e{font-size:var(--fs-small);font-weight:500;color:var(--muted)}
.u28-promo-none .u28-promo-list{display:none}
.u28-promo-cta{width:100%}

.u28-map{margin:0;align-self:start;display:grid;gap:var(--s2)}
.u28-map img{display:block;width:100%;height:auto;max-width:248px}
.u28-map figcaption a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--link,var(--brand-text))}
@media (forced-colors:active){.mega[popover]{border:1px solid CanvasText}.u28-promo{border:2px solid CanvasText}}

/* css/b-media.css */
/* S02 lane B (ADR-015 R5–R12; ADR-016 D9, D11, D19, D28): icons, photo heroes, photo cards,
   work strips, before/after sliders, the gallery filter. Tokens from site.css.tmpl (lane F). */
.b-sprite{display:none}
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
/* hero: the photo covers its page head behind a dark scrim, text left-aligned (D11); 21:9 crop (D19) */
.page-head:has(>.b-hero),.hero:has(>.b-hero){position:relative;isolation:isolate;color:#fff;background:#14171a;display:flex;align-items:flex-end}
.page-head:has(>.b-hero){min-height:420px;padding:var(--s16) 0 var(--s12)}
.hero:has(>.b-hero){min-height:70vh;align-items:center}
.page-head:has(>.b-hero)>.wrap,.hero:has(>.b-hero)>.wrap{position:relative}
.b-hero{position:absolute;inset:0;z-index:-1;overflow:hidden}
.b-hero img{display:block;width:100%;height:100%;object-fit:cover}
.b-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
@media (min-width:768px){.b-hero::after{background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.6) 60%,rgba(0,0,0,.42))}}
.page-head:has(>.b-hero) :is(p,.lede,.eyebrow,.c-byline,time),.hero:has(>.b-hero) :is(p,.lede){color:rgba(255,255,255,.94)}
.page-head:has(>.b-hero) a:not(.btn),.hero:has(>.b-hero) a:not(.btn){color:#fff}
.page-head:has(>.b-hero) .btn-ghost,.hero:has(>.b-hero) .btn-ghost{border-color:#fff;color:#fff}
.page-head:has(>.b-hero) .chips a{background:rgba(255,255,255,.94)}
/* focal point for photos the browser covers (WebP passthrough): object-position from the quantized focal */
.fp00{object-position:0% 0%}.fp01{object-position:0% 25%}.fp02{object-position:0% 50%}.fp03{object-position:0% 75%}.fp04{object-position:0% 100%}.fp10{object-position:25% 0%}.fp11{object-position:25% 25%}.fp12{object-position:25% 50%}.fp13{object-position:25% 75%}.fp14{object-position:25% 100%}.fp20{object-position:50% 0%}.fp21{object-position:50% 25%}.fp22{object-position:50% 50%}.fp23{object-position:50% 75%}.fp24{object-position:50% 100%}.fp30{object-position:75% 0%}.fp31{object-position:75% 25%}.fp32{object-position:75% 50%}.fp33{object-position:75% 75%}.fp34{object-position:75% 100%}.fp40{object-position:100% 0%}.fp41{object-position:100% 25%}.fp42{object-position:100% 50%}.fp43{object-position:100% 75%}.fp44{object-position:100% 100%}
/* cards: 16:9 photo on top, the whole card is the link (D9); the trade icon rides the photo (D28) */
.card>a>.b-cimg,.card-pad>.b-cimg{position:relative;display:block;margin:calc(-1*var(--s6)) calc(-1*var(--s6)) var(--s4);aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-card) var(--radius-card) 0 0;background:var(--surface)}
.card>a>.b-cimg img,.card-pad>.b-cimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
.card:hover>a>.b-cimg img{transform:scale(1.03)}
.b-cicon{position:absolute;left:var(--s3);bottom:var(--s3);display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--brand);color:var(--on-brand)}
.b-cicon .i{width:24px;height:24px}
.card>a>.b-cimg:not(:has(img)){aspect-ratio:auto;margin:0 0 var(--s3);background:none;overflow:visible}
.card>a>.b-cimg:not(:has(img)) .b-cicon{position:static}
.b-posts time{display:block;color:var(--muted);font-size:var(--fs-small);margin-bottom:var(--s2)}
@media (prefers-reduced-motion:reduce){.card>a>.b-cimg img{transition:none}.card:hover>a>.b-cimg img{transform:none}}
/* recent-work / gallery strip (R7, R11): 4:3 tiles */
.b-strip{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.b-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.b-strip figure,.b-gallery figure{margin:0}
.b-strip img,.b-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img)}
/* gallery filter chips (R11) */
.b-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s6)}
.b-chips[hidden]{display:none}
.b-chips button{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--bg);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.b-chips button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.b-chips .b-n{font-weight:400;opacity:.8}
.b-gallery li[hidden]{display:none}
/* before/after slider (R8): the after photo, the before photo clipped to the handle */
.b-pairs-head{margin-top:var(--s12)}
.b-pairs{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.b-ba{margin:0;--ba:50%}
.b-ba-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-img);background:var(--surface)}
.b-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ba)) 0 0)}
.b-ba-frame::after{content:"";position:absolute;top:0;bottom:0;left:var(--ba);width:3px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.b-ba-frame input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.b-ba-frame:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.b-ba-tag{position:absolute;top:var(--s3);padding:var(--s1) var(--s3);border-radius:var(--radius-btn);background:rgba(0,0,0,.72);color:#fff;font-size:var(--fs-small);font-weight:700;pointer-events:none}
.b-ba-tag-b{left:var(--s3)}.b-ba-tag-a{right:var(--s3)}
/* fix-1028: the labels sit above the divider (a dragged divider never draws through "Before"), the range input above both */
.b-ba-frame::after{z-index:1}.b-ba-tag{z-index:2}.b-ba-frame input{z-index:3}
.b-ba figcaption{padding-top:var(--s2);color:var(--muted);font-size:var(--fs-small)}
.page-head:has(>.b-hero),.hero:has(>.b-hero){background-image:none}

/* css/b0-u29-finder.css */
/* U29 town finder (u29_finder.go, DESIGN-UPGRADE-PLAN.md U29). Included only while module u29 is enabled.
   Reads only the semantic tokens a tone re-declares (--ink --muted --border --ui-border --bg --card-bg --brand-text
   --focus --surface). The county accordion is the shared U17 accordion (a0-u17-accordion.css); this file adds the form,
   the live results and the footer column. 44px targets; no motion of its own. */
.u29-form{margin:0 0 var(--s4);max-width:44rem}
.u29-card{padding:var(--s4);border:1px solid var(--border);border-radius:var(--radius-card,12px)}
.u29-label{display:block;font-weight:700;margin:0 0 var(--s2);color:var(--ink)}
.u29-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.u29-q{flex:1 1 14rem;min-width:0;min-height:48px;padding:0 var(--s4);font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--card-bg,var(--bg));border:2px solid var(--ui-border);border-radius:var(--radius-btn)}
.u29-q::placeholder{color:var(--muted);opacity:1}
.u29-q:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u29-go{min-height:48px;flex:0 0 auto}
/* board item 102: Use my location (a text-style button under the field; 44px target; shown only by the script) */
.u29-loc{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;margin:var(--s2) 0 0;padding:0 var(--s1);font:inherit;font-weight:700;color:var(--link,var(--brand-text));background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.u29-loc[hidden]{display:none}
.u29-loc[aria-busy="true"]{cursor:progress;opacity:.75}
.u29-loc-ic{flex:none}
.u29-loc:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* board item 101: a ?q= results page (hjsite) — the link back to the whole list */
.u29-all{margin:var(--s3) 0 0}
.u29-status{min-height:1.5em;margin:0 0 var(--s3);color:var(--muted)}
.u29-status:empty{margin:0}
.u29-res{margin:0 0 var(--s6)}
.u29-res h3{margin:var(--s3) 0 var(--s2);font-size:var(--fs-1);color:var(--brand-text);letter-spacing:.02em}
.u29-res h3:first-child{margin-top:0}
.u29-res mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.u29-acc .u29-list{padding-top:var(--s2)}
.u29-acc .u29-hub a{border-color:var(--ui-border)}
.u29-band .sec-head{align-items:flex-end}
/* footer: counties as links, towns named in a closed disclosure */
.u29-foot .u29-foot-list{display:block;list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s4)}
.u29-foot-list li{break-inside:avoid}
.u29-foot-list a{display:inline-flex;align-items:center;min-height:44px}
.u29-foot-towns{margin-top:var(--s3)}
.u29-foot-towns summary{cursor:pointer;padding:var(--s3) 0;line-height:1.25;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.u29-foot-towns summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u29-foot-towns p{margin:0 0 var(--s2);font-size:.875rem;line-height:1.5}
.u29-fc{font-weight:700}
@media (max-width:420px){.u29-go{flex:1 1 100%}}
@media (forced-colors:active){.u29-q{border-color:CanvasText}}

/* css/b1-u30-offers.css */
/* b1-u30-offers.css — U30 seasonal offer cards (u30_offers.go, rebuild DESIGN-UPGRADE-PLAN.md U30, rule D62). Included only
   while design2 module u30 is enabled. Reads only the tone tokens (--bg --surface --card-bg --ink --muted --ui-border
   --brand-text --brand --on-brand --link --focus), so a band works on any tone. Cards sit in a container-query grid
   (Baseline: @container Chrome 105 / Safari 16 / Firefox 110). No motion. Own class names only (u30-*). */
.u30{padding-block:var(--section-y);background:var(--bg);color:var(--ink);container:u30/inline-size}
.u30 .sechead .eyebrow{color:var(--brand-text)}
.u30 .sec-intro{color:var(--muted)}
.u30 :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u30-list{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@container u30 (min-width:620px){.u30-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container u30 (min-width:980px){.u30-list:has(>li:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}.u30-list:has(>li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}
.u30-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-width:0;padding:var(--s6);background:var(--card-bg,var(--bg));color:var(--ink);border:1px solid var(--ui-border,var(--border));border-top:4px solid var(--brand-text);border-radius:var(--radius-card,8px)}
.u30-ic{width:28px;height:28px;color:var(--brand-text);flex:none}
.u30-tag{margin:0;font-size:var(--fs-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-text)}
.u30-t{margin:0;font-family:var(--font-head,inherit);font-size:var(--fs-h3);line-height:var(--lh-tight,1.2);color:var(--ink);overflow-wrap:anywhere}
.u30-d{margin:0;color:var(--muted)}
.u30-end{margin:0;font-weight:700;color:var(--ink)}
.u30-cta{margin-top:auto;min-height:48px;max-width:100%}
.u30-fine{margin:var(--s4) 0 0;font-size:var(--fs-small);color:var(--muted)}
/* the brand band: the card keeps its own ground, so its red accents read on it */
.tone-brand .u30-card{border-color:var(--ui-border)}
@media (forced-colors:active){.u30-card{border:2px solid CanvasText}.u30-ic{color:CanvasText}}

/* css/c-depth.css */
/* S02 lane C: content depth sections (c_depth.go, partials/c-depth.html, c_guide.html) */
.c-answer{border-left:4px solid var(--brand-text);background:var(--surface);padding:var(--s4) var(--s6);border-radius:0 var(--radius-card) var(--radius-card) 0}
.c-answer .eyebrow{margin-bottom:var(--s2)}
.c-answer p:last-child{margin:0;font-size:var(--fs-body);max-width:68ch}
.c-byline{color:var(--muted);font-size:var(--fs-small);margin:var(--s2) 0 0}
.c-steps{list-style:none;counter-reset:cstep;padding:0;margin:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.c-steps li{counter-increment:cstep;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s6);min-width:0}
.c-steps li::before{content:counter(cstep,decimal-leading-zero);display:block;font-weight:800;font-size:var(--fs-h3);color:var(--brand-text);margin-bottom:var(--s2)}
.c-steps h3{margin:0 0 var(--s2)}
.c-steps p{margin:0;color:var(--muted)}
.c-cards,.c-steps{margin-top:var(--s4)}
.c-terms-list{margin:0}
.c-term{padding:var(--s4) 0;border-bottom:1px solid var(--border);scroll-margin-top:96px}
.c-term dt{font-weight:700;margin-bottom:var(--s2)}
.c-term dt a{display:inline-flex;align-items:center;min-height:44px}
.c-term dd{margin:0;color:var(--muted)}
.c-src{font-size:var(--fs-small);color:var(--muted)}
.c-src a{display:inline-flex;align-items:center;min-height:44px}
.c-cost .table-scroll td,.c-compare .table-scroll td,.c-specs .table-scroll td{white-space:normal;min-width:16ch}
.c-more{margin:var(--s6) 0 0;text-align:center}

/* css/c0-lp-u40-page.css */
/* c0-lp-u40-page.css — NJ Gutter ad landing pages, lane LA (design2 module u40, LP-CONTRACT.md) + lane lp-design
   (lp_design.go: the fall.888njgutter.com LP as the base, plus the Ace pieces). Included in the site sheet only while
   u40 is enabled (the -u40- in the name, d2CSSFilter). Reads only the U02 semantic tokens; spacing is the --s* scale
   (D3), corners the shape tokens (D13/D20). Mobile first. */
.lp{--lp-dark:#0f1d1f;--lp-dark-2:#16292c;--lp-line-dark:#2b3f42;--lp-on-dark:#f4f7f7;--lp-on-dark-muted:#b9c6c8;--lp-accent:#ff7a66}

/* top bar: the countdown (Ace) or the announcement */
.lp-cdbar,.lp-announce{background:var(--brand);color:var(--on-brand);font-size:.9375rem;font-weight:700;text-align:center}
.lp-cdbar-in,.lp-announce-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s1) var(--s3);min-height:40px;padding:var(--s1) 0}
.lp-cd{margin:0;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.lp-cdbar-go{color:var(--on-brand);text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
.lp-announce .lp-ico,.lp-cdbar .lp-ico{flex:none}
/* WCAG 2.2.2 (njg item 24): Pause for the ticking countdown. The button is a 44px hit area (house phone floor, 2.5.8)
   drawing a 32px ring (::before); margin -4px keeps the bar row 4px taller at most. The bar focus ring; pause/play by state. */
.lp-cd-pause{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;margin:calc(var(--s1) * -1) 0;padding:0;border:0;background:transparent;color:var(--on-brand);cursor:pointer}
.lp-cd-pause::before{content:"";position:absolute;inset:6px;border:2px solid currentColor;border-radius:50%}
.lp-cd-pause[hidden]{display:none}
.lp-cd-pause .lp-ico{width:16px;height:16px}
.lp-cd-pause:focus-visible{outline:3px solid var(--on-brand);outline-offset:-2px}
.lp-cd-pause[aria-pressed="true"] .lp-cd-ipause,.lp-cd-pause:not([aria-pressed="true"]) .lp-cd-iplay{display:none}
.lp-head{position:sticky;top:0;z-index:20;background:var(--bg,#fff);border-bottom:1px solid var(--border,#e3e0da)}
.lp-head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px}
.lp-brand{display:flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.lp-logo{display:block;height:36px;width:auto;max-width:100%}
@media (min-width:768px){.lp-head .lp-logo{height:44px}}
.lp-head-call{min-height:44px;padding:0 var(--s4);gap:var(--s2);white-space:nowrap}
.lp-head-call .lp-num{display:none}
@media (min-width:600px){.lp-head-call .lp-num{display:inline}}
.lp-ico{flex:none;vertical-align:-4px}
.lp-icon{flex:none;display:block;color:var(--brand-text)}
.lp section{padding:var(--s12) 0}
.lp h2{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.5rem);text-transform:uppercase;letter-spacing:-.005em;line-height:1.05}
.lp h3{font-size:1.125rem;margin:var(--s2) 0 var(--s1)}
.lp .eyebrow{color:var(--brand-text);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8125rem}

/* hero (fall LP base): dark band, the drone photo card + eyebrow + uppercase H1 left, the form card right */
.lp-hero{background:var(--lp-dark);color:var(--lp-on-dark);padding:var(--s6) 0 var(--s12)}
.lp-hero-grid{display:grid;gap:var(--s8);align-items:start}
.lp-hero-copy,.lp-hero-form{min-width:0}
@media (min-width:960px){.lp-hero{padding:var(--s12) 0 var(--s16)}.lp-hero-grid{grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:var(--s12)}}
.lp-hero-media{position:relative;margin:0 0 var(--s4);border-radius:var(--radius-img);overflow:hidden;border:1px solid var(--lp-line-dark);background:var(--lp-dark-2)}
.lp-hero-pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lp-hero-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s4) var(--s3) var(--s2);background:linear-gradient(to top,rgba(8,14,15,.9),rgba(8,14,15,0));font-size:.8125rem;color:#e4ebeb}
.lp-hero .lp-eyebrow{color:var(--lp-accent);margin:0 0 var(--s2)}
.lp-h1{font-size:clamp(2rem,1.3rem + 3vw,3.5rem);line-height:1.02;margin:0 0 var(--s3);text-transform:uppercase;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.lp-h1::after{content:"";display:block;width:72px;height:6px;margin-top:var(--s3);background:var(--brand);border-radius:999px}
.lp-sub{font-size:1.125rem;color:var(--lp-on-dark-muted);max-width:38rem}
.lp-hero .lp-sub{margin:0 0 var(--s4)}
.lp-thanks .lp-sub{color:var(--muted)} /* 1.4.3: the thanks page is tone-light; the hero muted (#b9c6c8) measured 1.75:1 on white */
.lp-hero-call{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px}
.lp-hero-offer{background:transparent;margin:var(--s6) 0 var(--s2)}
/* phones (C2 form-first; the fall LP's 2026-09-16 audit): eyebrow, H1, the form, then the sub line and the photo */
@media (max-width:959.98px){.lp-hero-grid{display:flex;flex-direction:column;gap:var(--s4)}.lp-hero-copy{display:contents}.lp-eyebrow{order:1;margin:0}.lp-h1{order:2;margin:0}.lp-hero-form{order:3}.lp-hero .lp-sub{order:4;margin:0}.lp-hero-media{order:5;margin:0}.lp-hero-offer{order:6;margin:var(--s4) 0 0}.lp-hero-call{order:7}}

/* the dashed special-offer box (Ace) */
.lp-offercard{position:relative;max-width:34rem;background:var(--card-bg,#fff);color:var(--ink);border:2px dashed var(--brand);border-radius:var(--radius-card);padding:var(--s6) var(--s4) var(--s4);text-align:center}
.lp-offercard-tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:var(--s1);margin:0;padding:var(--s1) var(--s3);background:var(--brand);color:var(--on-brand);border-radius:999px;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lp-offercard-tag .lp-star{width:14px;height:14px}
.lp-offercard-row{display:flex;align-items:center;justify-content:center;gap:var(--s2)}
.lp-offercard-cell{display:flex;flex-direction:column;align-items:center;margin:0;min-width:0;flex:1 1 0;min-height:44px;color:var(--ink);text-decoration:none;border-radius:var(--r-sm);padding:var(--s1)}
a.lp-offercard-cell:hover,a.lp-offercard-cell:focus-visible{background:color-mix(in srgb,var(--brand) 8%,var(--bg,#fff))}
.lp-offercard-big{font-family:var(--font-head);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);line-height:1;color:var(--brand-text)}
.lp-offercard-lbl{font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.04em;margin-top:var(--s1);line-height:1.25}
.lp-offercard-sub{font-size:.8125rem;color:var(--muted)}
.lp-offercard-plus{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:0;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);font-size:.75rem;font-weight:700;text-transform:uppercase}
.lp-offercard-ends{margin:var(--s2) 0 0;font-size:.8125rem;color:var(--muted)}
.lp-offercard-ends:empty{display:none}
@media (max-width:479.98px){.lp-offercard-n3 .lp-offercard-row{flex-direction:column}.lp-offercard-n3 .lp-offercard-plus{width:auto;height:auto;padding:0 var(--s2);background:transparent;color:var(--muted)}}

/* the form card */
.lp-form-card{background:transparent}
.lp-form{background:var(--card-bg,#fff);color:var(--ink);border:1px solid var(--ui-border,#888b8f);border-radius:var(--radius-card);padding:var(--s6);box-shadow:0 18px 46px rgba(0,0,0,.35);scroll-margin-top:var(--s16)}
@media (max-width:479.98px){.lp-form{padding:var(--s4)}}
.lp-form .sechead .eyebrow{margin:0}
.lp-form .sechead h2{font-size:1.5rem;margin-bottom:var(--s1)}
.lp-form .sec-intro{font-size:.9375rem;margin:0}
.lp-progress{font-size:.9375rem;color:var(--muted);margin:var(--s2) 0;min-height:1.4em}
.lp-step{border:0;margin:0;padding:0;min-width:0}
.lp-step+.lp-step{margin-top:var(--s6)}
.lp-js .lp-step+.lp-step{margin-top:0}
.lp-js .lp-step[hidden]{display:none}
.lp-legend{font-family:var(--font-head);font-weight:700;font-size:1.125rem;margin:0 0 var(--s2);padding:0}
.lp-legend-sub{margin-top:var(--s4)}
.lp-label{display:block;font-weight:700;margin:var(--s3) 0 var(--s1)}
.lp-opt-tag{font-weight:400;color:var(--muted)}
.lp-input{display:block;width:100%;min-height:48px;padding:0 var(--s3);font:inherit;font-size:1rem;color:var(--ink);background:var(--bg,#fff);border:1px solid var(--ui-border,#888b8f);border-radius:var(--r-sm)}
.lp-input:focus-visible,.lp-opt input:focus-visible+span,.lp-check input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lp-input[aria-invalid="true"]{border-color:var(--brand-text);border-width:2px}
.lp-zip-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.lp-zip{flex:1 1 9rem;max-width:none;min-height:52px;letter-spacing:.08em;font-size:1.125rem}
.lp-zip-go{flex:1 1 10rem;min-height:52px;gap:var(--s2);font-size:1.0625rem}
.lp-zipok{margin:0 0 var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:color-mix(in srgb,var(--brand) 8%,var(--bg,#fff));font-weight:700}
.lp-zipok-out{background:var(--surface,#f7f6f3);border-left:4px solid var(--brand);font-weight:600} /* njg #143: the out-of-area answer, not the good-news tint */
.lp-row{display:grid;gap:0 var(--s4)}
@media (min-width:480px){.lp-row{grid-template-columns:1fr 1fr}}
.lp-row>div{min-width:0}
.lp-q{border:0;margin:0 0 var(--s3);padding:0;min-width:0}
.lp-opts,.lp-offer-opts{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
.lp-opt{position:relative;display:block;cursor:pointer}
.lp-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lp-opt span{display:flex;align-items:center;min-height:48px;height:100%;padding:var(--s2) var(--s3);border:1px solid var(--ui-border,#888b8f);border-radius:var(--r-sm);background:var(--bg,#fff);line-height:1.25}
.lp-opt-offer span{display:block;font-size:.875rem;color:var(--muted)}
.lp-opt-amt{display:block;font-size:1rem;color:var(--ink)}
.lp-opt input:checked+span{border:2px solid var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--bg,#fff));font-weight:700}
.lp-check{display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s4) 0 0;font-size:.8125rem;color:var(--muted);line-height:1.4}
.lp-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--brand)}
.lp-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lp-err{color:var(--brand-text);font-weight:700;font-size:.9375rem;margin:var(--s1) 0 0}
.lp-zipmsg{margin:var(--s2) 0 0;font-size:.9375rem}
.lp-formerr{color:var(--brand-text);font-weight:700;margin:var(--s3) 0 0}
.lp-nav{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.lp-nav .btn{flex:1 1 8rem}
.lp-back{border-color:var(--ui-border,#888b8f);color:var(--ink);background:transparent;flex:0 1 6rem}
.lp-back,.lp-next{display:none}
.lp-js .lp-back,.lp-js .lp-next{display:inline-flex}
.lp-submit[aria-busy="true"]{opacity:.7;cursor:progress}
.lp-consent{font-size:.8125rem;color:var(--muted);margin:var(--s3) 0 0;line-height:1.45}
.lp-more{margin-top:var(--s4)}
.lp-more summary{cursor:pointer;font-weight:700;color:var(--link);min-height:44px;display:flex;align-items:center}
.lp-textarea{min-height:96px;padding:var(--s2) var(--s3);resize:vertical}

/* trust strip (fall LP) */
.lp-trust{padding:var(--s4) 0!important;border-bottom:1px solid var(--border)}
.lp-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);justify-content:center;font-size:.9375rem}
.lp-strip li{display:flex;gap:var(--s2);align-items:center}
.lp-strip .lp-ico{color:var(--brand-text)}
.lp-stars{display:inline-flex;color:var(--brand-text)}

/* the offer cards (fall LP "What each offer actually gets you") */
.lp-ocards{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s4)}
@media (min-width:768px){.lp-ocards-2,.lp-ocards-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.lp-ocards-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-ocards-1{max-width:36rem}
.lp-ocard{display:flex;flex-direction:column;background:var(--card-bg,#fff);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 8px 24px rgba(10,14,18,.08);min-width:0}
.lp-ocard-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.lp-ocard-body{display:flex;flex-direction:column;flex:1;padding:var(--s4)}
.lp-ocard-amt{margin:0;font-family:var(--font-head);font-weight:700;font-size:2rem;line-height:1;color:var(--brand-text);text-transform:uppercase}
.lp-ocard h3{margin-top:var(--s1)}
.lp-ocard-body p{color:var(--muted)}
.lp-ocard-go{margin-top:auto;width:100%;min-height:48px;text-transform:uppercase;letter-spacing:.03em}
.lp-ocards-ended{font-weight:700}
.lp-offer-in{text-align:center}
.lp-offer-in .sechead{margin-inline:auto}
.lp-offer-card-wrap{background:transparent;display:flex;justify-content:center;margin:var(--s6) 0 var(--s2)}
.lp-offer-cta{background:var(--bg);color:var(--ink);margin-top:var(--s2)}
html[data-lp-expired] [data-lp-offer-ui]{display:none!important}

/* how it works + value tiles */
.lp-steps .sechead,.lp-ba .sechead{text-align:center;margin-inline:auto;max-width:44rem}
.lp-steps-list{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s4)}
@media (min-width:768px){.lp-steps-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}}
.lp-stepcard{position:relative;text-align:center;padding:var(--s4)}
.lp-stepcard .lp-icon{margin:var(--s2) auto 0;width:32px;height:32px}
.lp-stepcard p{margin:0;color:var(--muted)}
.lp-stepnum{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-btn);background:var(--brand);color:var(--on-brand);font-family:var(--font-head);font-weight:700;font-size:1.25rem}
.lp-values{list-style:none;margin:var(--s8) 0 0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.lp-value{background:var(--card-bg,#fff);border:1px solid var(--border);border-top:4px solid var(--brand);border-radius:var(--radius-card);padding:var(--s6) var(--s4);text-align:center}
.lp-value .lp-icon{margin:0 auto;width:36px;height:36px}
.lp-value p{margin:0;color:var(--muted)}

/* before / after (Ace) */
.lp-ba-grid{display:grid;gap:var(--s4);margin-top:var(--s6)}
@media (min-width:768px){.lp-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-ba-grid.lp-ba-one{grid-template-columns:minmax(0,1fr);max-width:44rem;margin-inline:auto}}
.lp-ba-fig{position:relative;margin:0}
.lp-ba-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-img)}
.lp-ba-tag{position:absolute;top:0;left:0;z-index:1;margin:var(--s3);padding:var(--s1) var(--s3);border-radius:var(--radius-btn);background:var(--ink);color:var(--bg);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.lp-ba-after{background:var(--brand);color:var(--on-brand)}
.lp-ba-cap{text-align:center;color:var(--muted);max-width:40rem;margin:var(--s4) auto 0}
.lp-photos{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.lp-photos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img)}

/* why now (fall LP) */
.lp-why-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:960px){.lp-why-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s12)}}
.lp-why-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-img)}
.lp-why-copy h2{margin-bottom:var(--s3)}
.lp-why-copy p{color:var(--muted)}
.lp-why-foot{font-weight:700;color:var(--ink)!important;font-size:.9375rem}

/* video (item 11): poster + tap-to-play, preload none */
.lp-video-box{position:relative;max-width:28rem;margin:var(--s6) auto 0}
.lp-video-el{display:block;width:100%;height:auto;border-radius:var(--radius-img);background:#000}
.lp-video-play{position:absolute;inset:0;margin:auto;width:80px;height:80px;border:0;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;cursor:pointer}
.lp-video-play[hidden]{display:none}

/* what you're buying (item 9) */
.lp-buy{list-style:none;margin:var(--s6) 0 var(--s12);padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.lp-buycard{background:var(--card-bg,#fff);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;padding:0 0 var(--s4);min-width:0}
.lp-buycard h3,.lp-buycard p{padding:0 var(--s4)}
.lp-buycard p{margin:0;color:var(--muted);font-size:.9375rem}
.lp-buy-pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lp-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);padding:var(--s4);aspect-ratio:4/3;align-content:center;background:var(--section-alt,#f4f2ee)}
.lp-sw{width:100%;height:auto;display:block}
.lp-incl-in{margin-inline:auto}
.lp-list{list-style:none;margin:0;padding:0}
.lp-list li{display:flex;gap:var(--s2);align-items:flex-start;margin:0 0 var(--s2)}
.lp-list .lp-ico{color:var(--brand-text)}

/* reviews (fall LP grid + item 10) */
.lp-gbadge{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s4) 0 0;font-weight:700}
.lp-gbadge-n{font-family:var(--font-head);font-size:2rem;line-height:1}
.lp-rev-list{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s4)}
@media (min-width:768px){.lp-rev-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.lp-rev-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-rev{display:flex;flex-direction:column;background:var(--card-bg,#fff);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s4);min-width:0}
.lp-rev blockquote{margin:var(--s2) 0 var(--s3);flex:1}
.lp-rev blockquote p{margin:0}
.lp-rev-head{display:flex;align-items:center;gap:var(--s2);margin:0}
.lp-rev-ava{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-weight:700}
.lp-rev-who{display:flex;flex-direction:column;min-width:0}
.lp-rev-by{font-weight:700;margin:0}
.lp-rev-meta{font-size:.8125rem;color:var(--muted)}
.lp-polaroid{margin:var(--s8) auto 0;max-width:22rem;background:#fff;padding:var(--s3) var(--s3) var(--s4);box-shadow:0 10px 30px rgba(10,14,18,.18);transform:rotate(-2deg);color:#1b2126}
.lp-polaroid-pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lp-polaroid figcaption{margin-top:var(--s2);font-size:.875rem;text-align:center}
.lp-rev-more{text-align:center;margin-top:var(--s6)}

/* where we work (fall LP chips + ZIP check, item 13 map) */
.lp-area-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:960px){.lp-area-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.lp-counties{list-style:none;margin:var(--s4) 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.lp-counties li{padding:var(--s1) var(--s3);border:1px solid var(--border);border-radius:999px;font-size:.875rem;font-weight:700;background:var(--card-bg,#fff)}
.lp-areazip{max-width:28rem}
.lp-area-msg{font-size:1.0625rem;font-weight:700;margin-top:var(--s3)}
.lp-map{margin:0;min-width:0}
.lp-map-svg{display:block;width:100%;height:auto}
.lp-map-off path{fill:var(--section-alt,#eceae4);stroke:var(--bg,#fff);stroke-width:2}
.lp-map-on path{fill:color-mix(in srgb,var(--brand) 18%,var(--bg,#fff));stroke:var(--bg,#fff);stroke-width:2}
.lp-map-pins circle{fill:var(--ink);stroke:var(--bg,#fff);stroke-width:3}
.lp-map-pins text{font:700 22px/1 var(--font-body,inherit);fill:var(--ink);paint-order:stroke;stroke:var(--bg,#fff);stroke-width:5}
.lp-map-you circle{fill:color-mix(in srgb,var(--brand) 30%,transparent)}
.lp-map-you .lp-map-you-dot{fill:var(--brand);stroke:#fff;stroke-width:3}
.lp-map-you text{font:700 24px/1 var(--font-body,inherit);fill:var(--brand-text);paint-order:stroke;stroke:var(--bg,#fff);stroke-width:6}
.lp-map-you[hidden]{display:none}

/* warranty, final (dark, fall LP), thanks */
.lp-warranty-in{text-align:center}
.lp-warranty-in .lp-icon{width:44px;height:44px;margin:0 auto var(--s2);color:var(--brand)}
.lp-warranty .sechead{margin-inline:auto}
.lp-final{background:var(--lp-dark);color:var(--lp-on-dark)}
.lp-final-in{text-align:center}
.lp-final h2{color:#fff;margin-bottom:var(--s3)}
.lp-final-recap{color:var(--lp-on-dark-muted);font-size:1.0625rem}
.lp-final-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:var(--s4)}
.lp-final-go{min-height:52px;text-transform:uppercase;letter-spacing:.03em}
.lp-final-call{border:2px solid var(--lp-on-dark-muted);color:#fff;background:transparent;gap:var(--s2);min-height:52px}
.lp-thanks{padding:var(--s16) 0}
.lp-thanks-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 0 var(--s4);border-radius:50%;background:var(--brand);color:var(--on-brand)}
.lp-thanks-ico .lp-ico{width:36px;height:36px}
.lp-thanks-call{gap:var(--s2);margin-bottom:var(--s6)}
.lp-thanks-steps{margin-bottom:var(--s6)}
.lp-stepcard-h{font-size:1.125rem;margin:var(--s2) 0 var(--s1)}

/* item 15: the minimal landing-page footer (fall LP: logo, legal name, address, phone, hours, fine print) */
.lp-foot{padding:var(--s8) 0 var(--s4)}
.lp-foot-in{display:grid;gap:var(--s4)}
@media (min-width:960px){.lp-foot-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8)}}
.lp-foot-id p{margin:0 0 var(--s2)}
.lp-foot-contact{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3)}
.lp-foot-call{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:700}
.lp-foot-hours,.lp-foot-lic,.lp-fine{font-size:.875rem;color:var(--muted)}
.lp-fine{margin:0;line-height:1.5}
.lp-foot-base{margin-top:var(--s4)}

/* item 14: the U04 phone bar on a landing page: Call outlined in brand red, Get estimate solid brand red */
body:has(.lp) .ctabar[data-u04] .btn-ghost{border:2px solid var(--brand);color:var(--brand-text);background:var(--bg)}
body:has(.lp) .ctabar[data-u04] .btn-brand{background:var(--brand);color:var(--on-brand)}

@media (forced-colors:active){.lp-opt input:checked+span{outline:3px solid CanvasText}.lp-form,.lp-rev,.lp-offercard,.lp-value,.lp-ocard{border-color:CanvasText}}
@media (prefers-reduced-motion:reduce){.lp-polaroid{transform:none}}
.lp-final .sechead{margin-inline:auto}.lp-final .sec-intro{color:var(--lp-on-dark-muted)}.lp-final .eyebrow{color:var(--lp-accent)}
/* review fixes 2026-10-30 (1280 read): the tone wrapper must not paint behind the offer box; map and buying strip sizes */
.lp .lp-hero-offer.tone-light,.lp .lp-offer-card-wrap.tone-light,.lp .lp-form-card.tone-light{background:transparent}
.lp-map{max-width:34rem;width:100%;margin-inline:auto}
.lp-buy{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.lp h3{font-size:1.25rem;line-height:1.2}
.lp-ocard h3{font-size:1.375rem}
.lp-zip{flex:1 1 6.5rem;min-width:0}
.lp-zip-go{flex:1 1 auto;white-space:nowrap}
.lp-cdbar-go{min-height:44px}.lp-cdbar-in{min-height:44px;padding:0}
/* one offer (roofing): photo beside the copy on wider screens */
.lp-ocards-1{max-width:none}
@media (min-width:768px){.lp-ocards-1 .lp-ocard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lp-ocards-1 .lp-ocard-pic img{height:100%;aspect-ratio:auto;min-height:100%}.lp-ocards-1 .lp-ocard-body{padding:var(--s8)}}

/* css/c2-lpq-u43-tools.css */
/* c2-lpq-u43-tools.css — NJG landing pages lane LE (module u43; lpq_quote.go): the instant quote and gutter calculator
   inside the LP form's step 2, and the booking request on the thanks page. In site.css only while u43 is on (the
   -u43- part of the name, LP-CONTRACT.md §1). Reads only the tone tokens (DESIGN2.md "Tone tokens"), never a hex.
   Phone first: one column, 44px controls. */
.lpq[hidden],.lpq [hidden]{display:none}
.lpq-step2{display:grid;gap:var(--s4);margin:var(--s4) 0 0;min-width:0}
.lpq-quote,.lpq-calc{display:grid;gap:var(--s2);min-width:0;padding:var(--s4);border:1px solid var(--ui-border);border-radius:var(--radius-card);background:var(--surface)}
.lpq-h{margin:0;font-weight:700;color:var(--ink)}
.lpq-calc>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style-position:inside}
.lpq-calc-body{display:grid;gap:var(--s3);min-width:0;margin-top:var(--s1)}
.lpq-field{display:grid;gap:var(--s1);margin:0;min-width:0}
.lpq-field label,.lpq legend,.lpq-legend{font-weight:600;color:var(--ink);margin:0}
.lpq-unit,.lpq-hint{font-weight:400;color:var(--muted);font-size:.92em;margin:0}
.lpq input[type=text],.lpq select{min-height:44px;width:100%;max-width:100%;box-sizing:border-box;padding:var(--s2) var(--s3);font:inherit;color:var(--ink);background:var(--card-bg);border:1px solid var(--ui-border);border-radius:var(--r-sm)}
.lpq input:focus-visible,.lpq select:focus-visible,.lpq button:focus-visible,.lpq a:focus-visible,.lpq summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lpq input[aria-invalid=true]{border-color:var(--brand-text);border-width:2px}
.lpq-err{color:var(--brand-text);font-size:.92em}
.lpq-err:empty{display:none}
.lpq fieldset{border:0;margin:0;padding:0;min-width:0}
.lpq-choice{display:grid;gap:var(--s1);min-width:0}
.lpq-side-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.lpq-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.lpq-chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;font:inherit;border:0;background:none;color:var(--ink)}
button.lpq-chip,.lpq-chip span{display:inline-flex;align-items:center;min-height:44px;padding:var(--s1) var(--s4);border:1px solid var(--ui-border);border-radius:var(--radius-btn);background:var(--card-bg);color:var(--ink);cursor:pointer}
.lpq-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
button.lpq-chip[aria-pressed=true],.lpq-chip input:checked+span{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.lpq-chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.lpq-go{margin:0}
.lpq-go .btn{min-height:44px}
.lpq-result{display:grid;gap:var(--s2);min-width:0}
.lpq-status,.lpq-total,.lpq-done,.lpq-nojs{margin:0;color:var(--ink)}
.lpq-facts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s4);margin:0;max-width:28rem}
.lpq-facts dt{color:var(--muted)}
.lpq-facts dd{margin:0;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.lpq-price,.lpq-done{font-weight:700}
.lpq-price{margin:0;color:var(--ink)}
.lpq-basis{margin:0;font-size:.9em;color:var(--muted)}
.lpq-book{padding:var(--s10) 0}
.lpq-book .lpq-row{display:grid;gap:var(--s4);min-width:0}
.lpq-book .lpq-tool{display:grid;gap:var(--s4);max-width:40rem;min-width:0}
.lpq-tel{color:var(--link);font-weight:700;white-space:nowrap}
@media (min-width:40rem){.lpq-side-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (forced-colors:active){button.lpq-chip[aria-pressed=true],.lpq-chip input:checked+span{forced-color-adjust:none;background:Highlight;color:HighlightText}}

/* css/c9-u02-a11y.css */
/* WCAG 2.2 AA fixes, njg rebuild board item 24 (audit: rebuild/.claude/pm/80-qa/wcag-2026-10-31.md). Rides U02 (the
   contrast rhythm module) so it ships only with the design2 build.
   2.4.11 Focus Not Obscured: the sticky site header (--head-h), the landing pages' sticky header (.lp-head, 65px) and
   the phone Call/Estimate bar (U04, --bar-h) each covered whole focused controls when Tab scrolled them to a viewport
   edge. scroll-padding makes the browser scroll a focused element clear of them (it also governs fragment jumps). */
html{scroll-padding-top:calc(var(--head-h,80px) + var(--s2,8px))}
html:has(.lp-head){scroll-padding-top:calc(65px + var(--s2,8px))}
@media (max-width:767px){
  html:has(.ctabar[data-u04]){scroll-padding-bottom:calc(var(--bar-h,68px) + env(safe-area-inset-bottom) + var(--s2,8px))}
}
/* 2.4.7 Focus Visible: a county-map office/town pin is a 4-6px dot; focus now also draws the site focus ring around it */
.u16-pin:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* css/d-offices.css */
/* s02-d: offices + service areas (ADR-015 R21–R24, R43–R44) */
.d-office-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.d-office-cards>li{display:flex}
.d-office{display:flex;flex-direction:column;width:100%;overflow:hidden}
.d-office .card-img{margin:0;border-radius:0}
.d-office h3 a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.d-office h3 a:hover{color:var(--brand-text);text-decoration:underline}
.d-tag{display:inline-block;margin-left:var(--s2);padding:var(--s1) var(--s2);border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);font:600 var(--fs-small)/1.4 var(--font-body);color:var(--muted);vertical-align:middle}
.d-facts{grid-template-columns:max-content minmax(0,1fr);column-gap:var(--s4)}
.d-facts dd span{display:block;padding:var(--s2) 0;line-height:1.45}
.d-note{color:var(--muted);font-size:var(--fs-small);margin:var(--s3) 0 0}
.d-lede{color:var(--muted);max-width:68ch}

/* Omega v3.13 lane C (JQ-TX5HKRY4): the service-area map — state outlines, a dot a town, names on hover/focus/tap (n_map2.go, assets/map.js) */
.d-map{margin:0 0 var(--s8)}
.d-map-stage{position:relative}
.d-map-svg{display:block;width:auto;height:auto;max-width:100%;max-height:82vh;margin:0 auto;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);box-sizing:border-box;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.d-map-small .d-map-svg{max-height:min(70vh,560px)}
.d-map-ground{fill:var(--surface)}
.d-map-state{fill:color-mix(in srgb,var(--surface) 55%,var(--bg));stroke:var(--border);stroke-width:1.5;stroke-linejoin:round}
.d-map-home{fill:var(--bg);stroke:var(--muted);stroke-width:2}
.d-map-pt{cursor:pointer;outline:none}
.d-map-hit{fill:none;stroke:transparent;stroke-width:44px;vector-effect:non-scaling-stroke;pointer-events:stroke}
.d-map-city{fill:var(--brand-text);stroke:var(--bg);stroke-width:3}
.d-map-listed{fill:var(--bg);stroke:var(--brand-text);stroke-width:3}
.d-map-hq{fill:var(--brand);stroke:var(--ink);stroke-width:4}
.d-map-pt circle:last-child{transform-box:fill-box;transform-origin:center}
.d-map-pt:hover circle:last-child,.d-map-pt.is-on circle:last-child,.d-map-pt:focus-visible circle:last-child{stroke:var(--ink);stroke-width:5;transform:scale(1.45);opacity:1}
.d-map-office{font:700 26px/1 var(--font-head);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:7px;stroke-linejoin:round;pointer-events:none}
.d-map-tip{position:absolute;left:0;top:0;z-index:2;max-width:min(86%,300px);padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--ink);color:var(--bg);font:700 var(--fs-small)/1.3 var(--font-body);box-shadow:0 4px 14px rgba(0,0,0,.2);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-map-tip[hidden]{display:none}
.d-map-tip:has(a){pointer-events:auto;padding:0}
.d-map-tip-link{display:flex;align-items:center;min-height:44px;padding:0 var(--s3);color:var(--bg);text-decoration:underline;text-underline-offset:3px}
.d-map-tip-go{margin-left:var(--s2);display:inline-block;text-decoration:none}.d-map-tip-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:599px){.d-map-names{display:none}}
@media (prefers-reduced-motion:no-preference){.d-map-pt circle:last-child{transition:transform var(--dur) var(--ease)}}
.d-map-key{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:var(--s2) var(--s6);margin-top:var(--s3);color:var(--muted);font-size:var(--fs-small)}
.d-map-help{flex-basis:100%}
.d-map-src{flex-basis:100%;font-size:.9em}
.d-key{display:inline-flex;align-items:center;gap:var(--s2)}
.d-key::before{content:"";width:12px;height:12px;border-radius:50%;box-sizing:border-box}
.d-key-office::before{background:var(--brand);width:16px;height:16px;border:3px solid var(--ink)}
.d-key-city::before{background:var(--brand-text)}
.d-key-listed::before{border:2px solid var(--brand-text);background:var(--bg)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.d-groups{display:grid;gap:var(--s8) var(--s6);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.d-group h3{margin-bottom:var(--s1)}
.d-group h3 a{display:inline-flex;align-items:center;min-height:44px}
.d-group-tel{margin:0 0 var(--s2)}
.d-group-tel a{display:inline-flex;align-items:center;min-height:44px}
.d-city-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)}
.d-city-list a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg);color:var(--ink);text-decoration:none;font-weight:600}
.d-city-list a:hover{border-color:var(--brand-text);color:var(--brand-text)}
.d-region{color:var(--muted);font-weight:400}

.d-office-detail{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){.d-office-detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.d-office-photo{margin:0}

/* footer: every office + the full service-area list (R22) */
.d-foot-office-list li{display:grid;padding:0 0 var(--s3)}
.d-foot-office-list a{min-height:28px}
.d-foot-office-list .d-foot-office-name{font-weight:700}
.d-foot-addr{color:var(--muted);line-height:1.4}
.d-foot-hours{color:var(--muted);line-height:1.4}
.d-foot-area-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 var(--s3);line-height:1.3}
.d-foot-area-list a{display:inline-flex;align-items:center;min-height:28px;color:var(--ink)}

/* mega menu group (lane F places it) */
.d-mega-areas{display:grid;gap:var(--s4) var(--s6);grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
.d-mega-head{font-weight:800;margin:0 0 var(--s1)}
.d-mega-areas ul{list-style:none;padding:0;margin:0}
.d-mega-areas li a{display:inline-flex;align-items:center;min-height:32px}

/* R43/R44 */
.d-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg)}
.d-src{color:var(--muted);font-size:var(--fs-small);margin-top:var(--s3)}
.d-storm-table{width:100%;border-collapse:collapse}
.d-storm-table th,.d-storm-table td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--border)}
@media (max-width:599px){.d-storm-table thead{position:absolute;left:-9999px}.d-storm-table tr{display:block;border-bottom:1px solid var(--border);padding:var(--s2) 0}.d-storm-table td{display:flex;justify-content:space-between;gap:var(--s4);border:0;padding:var(--s1) 0}.d-storm-table td::before{content:attr(data-label);font-weight:700}}
@media (min-width:768px){.d-group:has(.d-city-list>li:nth-child(16)){grid-column:span 2}}
/* touch screens: every footer/mega link a 44px target (ADR-016 phone gate) */
@media (pointer:coarse){.d-foot-area-list a,.d-foot-office-list a,.d-mega-areas li a{min-height:44px}}
/* Omega v3.13 lane C (owner decision 61): the DB-IP credit at the end of the footer's bottom line, with -ip-geo only */
.foot-credit{font-size:var(--fs-small)}
.foot-credit a{display:inline-flex;align-items:center;min-height:44px;color:inherit}

/* css/fc-content.css */
/* s02-fix-content: pager, gallery viewer + chip row, mailing address, office details, the wide-page aside.
   Tokens from site.css.tmpl (lane F); spacing on the 8px scale. */
.fc-pager{margin-top:var(--s12);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.fc-pager-sum{margin:0;color:var(--muted);font-size:var(--fs-small)}
.fc-pager ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.fc-pg{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--bg);color:var(--ink);font-weight:600;text-decoration:none}
a.fc-pg:hover{border-color:var(--brand)}
.fc-pg[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.fc-pg-gap{border-color:transparent;min-width:24px;padding:0}
.fc-pg-step{padding:0 var(--s4)}
.fc-mailing{margin:var(--s6) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);color:var(--muted)}
.fc-mailing strong{color:var(--ink)}
.fc-dir{display:inline-flex;align-items:center;min-height:48px;font-weight:600}
.d-office .card-pad{display:flex;flex-direction:column;height:100%}
.d-office .fc-dir{margin-top:auto}
.d-office .d-facts{margin-bottom:var(--s2)}
.d-map-small .d-map-frame{max-height:480px;aspect-ratio:16/9;margin:0 auto}
.d-map-small .d-map-frame svg{width:100%;height:100%}
/* a card without a photo of its own: the icon badge on a quiet ground, same height in a row of photo cards */
.card>a>.b-cimg.b-cimg-none,.card-pad>.b-cimg.b-cimg-none{aspect-ratio:auto;margin:0 0 var(--s3);background:none;overflow:visible}
.b-cimg-none .b-cicon{position:static}
/* gallery: tiles never wider than their smallest source (400px): 2 / 3 / 4 columns */
.gallery.b-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.gallery.b-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.gallery.b-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* never upscaled: with width:auto the img takes its width attribute (the largest file written), capped by its column */
.gallery.b-gallery img{width:auto;max-width:100%;margin-inline:auto}
.gallery.b-gallery figure{background:var(--surface);border-radius:var(--radius-img)}
.fc-zoom{display:block;width:100%;padding:0;border:0;background:none;border-radius:var(--radius-img);cursor:zoom-in}
.fc-zoom:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:767px){
  .b-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:0 0 var(--s2)}
  .b-chips button{flex:none;white-space:nowrap;min-height:48px}
}
.fc-viewer{width:min(96vw,1200px);max-width:none;max-height:96vh;padding:0;border:0;border-radius:var(--radius-card);background:#14171a;color:#fff;overflow:hidden}
.fc-viewer::backdrop{background:rgba(0,0,0,.82)}
.fc-viewer figure{margin:0;display:flex;flex-direction:column;max-height:96vh}
.fc-viewer-stage{min-height:0;display:flex;align-items:center;justify-content:center}
.fc-viewer img{display:block;margin:0 auto;max-width:100%;width:auto;height:auto;max-height:calc(96vh - 208px);object-fit:contain}
.fc-viewer-one .fc-viewer-nav{display:none}
/* round 3 #2: on a short window (a phone on its side, a small laptop window) the bars sit over the photo
   instead of taking its height: the photo gets the whole height of the window, never less than its tile */
@media (max-height:719px){
  .fc-viewer{width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0}
  .fc-viewer figure{position:relative;height:100%;max-height:none}
  .fc-viewer-stage{flex:1 1 auto;height:100%}
  .fc-viewer img{max-height:100vh;max-height:100dvh}
  .fc-viewer .fc-viewer-bar{position:absolute;z-index:1;left:0;right:0;top:0;background:linear-gradient(rgba(20,23,26,.86),rgba(20,23,26,0))}
  .fc-viewer .fc-viewer-foot{top:auto;bottom:0;background:linear-gradient(rgba(20,23,26,0),rgba(20,23,26,.86))}
  .fc-viewer figcaption{position:absolute;z-index:2;left:var(--s2);bottom:var(--s2);max-width:calc(100% - 280px);min-height:0;padding:var(--s1) var(--s3);border-radius:var(--radius-btn);background:rgba(20,23,26,.86);color:#fff}
  .fc-viewer button{background:rgba(20,23,26,.72)}
}
.fc-viewer figcaption{padding:var(--s2) var(--s4);font-size:var(--fs-small);color:rgba(255,255,255,.94);min-height:40px}
.fc-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--s3)}
.fc-viewer-bar span{font-size:var(--fs-small);color:rgba(255,255,255,.94)}
.fc-viewer button{min-width:48px;min-height:48px;padding:0 var(--s4);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-btn);background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.fc-viewer button:hover{background:rgba(255,255,255,.14)}
.fc-viewer button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fc-viewer-nav{display:flex;gap:var(--s2)}
/* long text pages: the measure stays 68ch; from 1280px a sticky aside uses the right of the container */
.fc-aside{display:none}
@media (min-width:1280px){
  .fc-two{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--s16);align-items:start}
  .fc-aside{display:block;position:sticky;top:calc(var(--head-h) + var(--s6));font-size:var(--fs-small)}
  .fc-aside>*+*{margin-top:var(--s6)}
  .fc-aside ul{list-style:none;padding:0;margin:0}
  .fc-aside li+li{margin-top:var(--s1)}
  .fc-aside li a{display:block;padding:var(--s1) 0;min-height:32px}
  .fc-aside-h{margin:0 0 var(--s2);font-weight:700;color:var(--ink)}
  .fc-aside-card{padding:var(--s6);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
  .fc-aside-card p{margin:0 0 var(--s3)}
  .fc-aside-card p:last-child{margin:0}
  .fc-aside-tel{font-size:var(--fs-h4,1.25rem);font-weight:700;display:inline-flex;align-items:center;min-height:48px}
}
/* round 2: an office page with no photo of the office leads with the brand hero, never a project photo */
.page-head.fc-plain-head{min-height:0;display:block;padding:var(--s16) 0 var(--s12);color:var(--on-brand);background:var(--brand);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 24px)}
.page-head.fc-plain-head :is(h1,p,.lede,.eyebrow){color:var(--on-brand)}
.page-head.fc-plain-head a:not(.btn){color:var(--on-brand)}
.page-head.fc-plain-head .btn-brand{background:var(--bg);color:var(--ink)}
.page-head.fc-plain-head .btn-ghost{color:var(--on-brand);border-color:var(--on-brand)}
.page-head.fc-plain-head .btn-ghost:hover{background:rgba(255,255,255,.14)}
/* round 2 (ADR-016): in a grid where some cards have a photo, a card without one keeps the same 16:9 media box
   (the icon badge centered on the surface tint), so the cards of a row line up; an all-icon grid stays compact */
.cards:has(.b-cimg>:is(img,picture)) .card>a>.b-cimg.b-cimg-none,.cards:has(.b-cimg>:is(img,picture)) .card-pad>.b-cimg.b-cimg-none{display:grid;place-items:center;margin:calc(-1*var(--s6)) calc(-1*var(--s6)) var(--s4);aspect-ratio:16/9;overflow:hidden;background:var(--surface);background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 2px,transparent 2px 24px)}
.cards:has(.b-cimg>:is(img,picture)) .b-cimg-none .b-cicon{width:64px;height:64px}
.cards:has(.b-cimg>:is(img,picture)) .b-cimg-none .b-cicon .i{width:32px;height:32px}
.d-facts dd.fc-site-rating{display:flex;flex-direction:column;align-items:flex-start}
.d-facts dd.fc-site-rating .fc-rating{padding:0 0 var(--s2);color:var(--muted);font-size:var(--fs--1)}

/* round 3 #1/#5: products the old site only names (no page, so no card); a card set that would mostly be icons as a list of links */
.fc-also{margin:var(--s6) 0 0;max-width:68ch;color:var(--ink-2,var(--ink))}
.fc-linklist{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2) var(--s6);grid-template-columns:1fr}
@container (min-width:720px){.fc-linklist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fc-linklist li{padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.fc-linklist a{display:inline-flex;align-items:center;min-height:48px;font-weight:700}
.fc-linklist span{display:block;font-size:var(--fs-small);max-width:68ch}
/* round 3 #10: an address block of a policy page, one line per part */
.fc-addr{font-style:normal;display:grid;gap:var(--s1);margin:var(--s3) 0 0}
.fc-addr a{display:inline-flex;align-items:center;min-height:48px}
/* round 3 #6: the stated financing offer on the financing page */
.fc-offer{margin:0;padding:var(--s6);border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:var(--radius-card);background:var(--surface);max-width:68ch}
.fc-offer strong{display:block;font-size:var(--fs-h4,1.25rem)}
.fc-offer p{margin:var(--s2) 0 0}
/* round 3 #3: a comparison read side by side from the two service pages */
.fc-cmp{display:grid;gap:var(--s6);grid-template-columns:1fr}
@container (min-width:900px){.fc-cmp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fc-cmp h3{margin:0 0 var(--s2)}
.fc-cmp p{margin:0 0 var(--s2);max-width:68ch}
/* round 4 #5: no mixed grid. The cards of a grid that have no photo are a compact list of links under it */
.fc-nophoto{margin:var(--s6) 0}
.fc-nophoto:last-child{margin-bottom:0}
.fc-nophoto-h{margin:0 0 var(--s1);font-size:var(--fs-small);font-weight:700;color:var(--muted)}
/* round 4 #3: the storm guide's one attribution line */
.fc-storm-src{margin-top:var(--s6)}
.fc-storm h2:not(:first-child){margin-top:var(--s6)}
/* round 5 #9 (fc5_layout.go): a section with one item is a sentence with a link; no grid ends on a lone card */
.fc-one{margin:0;max-width:68ch}
.fc-one-h{font-weight:700}
.fc-one a{display:inline-flex;align-items:center;min-height:48px;font-weight:700}
.fc-one+.sechead,.fc-nophoto+.sechead,.fc-linklist+.sechead,.fc-plain-products+.sechead{margin-top:var(--s8)}
.sechead+.fc-one{margin-top:calc(-1*var(--s4))}
@container (min-width:900px){.cards.fc-cols4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards.cards-sm.fc-cols3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* round 5 #9: a text band uses the whole wrap from 1024px: the trade's name beside its passage (the storm guide) */
.fc-rows{display:grid;gap:var(--s8)}
.fc-rows .fc-row h2{font-size:var(--fs-h3);margin:0 0 var(--s3)}
.fc-row-body p{margin:0 0 var(--s4);max-width:68ch}
.fc-row-body p:last-child{margin-bottom:0}
@media (min-width:1024px){.fc-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--s16);align-items:start}.fc-rows .fc-row h2{margin:0}}
.fc-rows>.fc-storm-src{margin:0}
/* round 5 #8: projects without a page of their own: a plain list, the title and the opening of the write-up */
.fc-plist{list-style:none;padding:0;margin:0;display:grid;gap:0 var(--s12);grid-template-columns:1fr}
@container (min-width:900px){.fc-plist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fc-plist li{padding:var(--s4) 0 var(--s6);border-bottom:1px solid var(--border)}
.fc-plist h3{margin:0 0 var(--s2);font-size:var(--fs-body)}
.fc-plist p{margin:0;max-width:68ch;color:var(--muted)}
/* round 5 #3: products named without a page: the trade's name and one plain sentence */
.fc-plain-products{margin:var(--s6) 0 0}
.fc-plain-products h3{margin:0 0 var(--s1);font-size:var(--fs-body)}
.fc-plain-products p{margin:0;max-width:68ch}
.fc-plain-p{margin:0;max-width:68ch}
.cards+.sechead,.fc-plain-p+.sechead{margin-top:var(--s8)}

/* css/h-geo.css */
/* S02 lane H — geo hierarchy pages (ADR-015 R71). Tokens only (lane F): no off-scale values. */
.h-summary .lede{margin:0}
.h-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s6)}
.h-svc-group h3{margin:0 0 var(--s2);font-size:var(--fs-h4,1.25rem)}
.h-svc-group ul{list-style:none;margin:0;padding:0}
.h-svc-group li{margin:0}
.h-svc-group a{display:inline-flex;align-items:center;min-height:44px}
.h-table{margin-bottom:var(--s4)}
.h-table th[scope=row]{font-weight:600;width:44%}
.h-child-table th[scope=row]{width:auto}
.h-child-table a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.h-src{font-size:var(--fs-small);color:var(--muted);margin:0 0 var(--s4)}
.h-sub{margin:var(--s6) 0 var(--s3)}
.h-chips{list-style:none;margin:0 0 var(--s4);padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.h-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--bg);font-size:var(--fs-small)}
.h-cols{list-style:none;margin:0 0 var(--s4);padding:0;columns:4 200px;column-gap:var(--s6)}
.h-cols li{break-inside:avoid;margin:0}
.h-cols a{display:inline-flex;align-items:center;min-height:44px}
.h-office-card{max-width:480px}
@media (max-width:600px){.h-table th[scope=row]{width:auto}}
.h-sec p{max-width:var(--measure,68ch)}
.h-note{color:var(--muted);font-weight:500;margin-left:var(--s1)}
.h-steps{margin:0;padding-left:var(--s6)}
.h-steps li{margin:0 0 var(--s3)}
.h-review{margin:0 0 var(--s6)}
.h-review blockquote{margin:0 0 var(--s2)}
/* round 5: the main column of a geo page (blocks, not full-width bands) beside the sticky aside */
.h-main>.h-blk+.h-blk{margin-top:var(--s16);padding-top:var(--s16);border-top:1px solid var(--border)}
.h-blk>p,.h-blk .h-pass,.h-blk .h-opts li,.h-blk .h-steps{max-width:var(--measure)}
.h-pass{margin:0 0 var(--s6)}
.h-pass h3{margin:0 0 var(--s2);font-size:var(--fs-h4,1.25rem)}
.h-pass ul{margin:0 0 var(--s4);padding-left:var(--s6)}
.h-from{margin:0;font-size:var(--fs-small)}
.h-from a,.h-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.h-more{margin:0 0 var(--s4)}
.h-opts{list-style:none;margin:0 0 var(--s4);padding:0}
.h-opts li{margin:0 0 var(--s4)}
.h-opts a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.h-opts p{margin:0}
.h-blk .chips{margin-bottom:var(--s4)}
.h-blk .faq{max-width:var(--measure)}
/* a linked first cell is a 44px target; every cell of its row centers on it, so the row stays aligned */
.h-table th,.h-table td{vertical-align:middle}
.h-table th[scope=row] a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.h-opt-h{margin:var(--s6) 0 var(--s3);font-size:var(--fs-h4,1.25rem)}
/* round 6: a table of a place page that starts closed. Its summary holds a real heading and is a 44px target;
   the two tables a reader comes for (homes by year built, storm events by year) stay open */
.h-fold{margin:0 0 var(--s4);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.h-fold>summary{display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:var(--s2) 0;cursor:pointer;list-style:none}
.h-fold>summary::-webkit-details-marker{display:none}
.h-fold>summary::before{content:"+";font-weight:700;inline-size:1em;text-align:center;color:var(--brand)}
.h-fold[open]>summary::before{content:"\2212"}
.h-fold-h{margin:0;font-size:var(--fs-body,1rem);font-weight:700}
.h-fold>.h-table{margin:var(--s2) 0 var(--s4)}
/* round 6: on a service x location page the work strip, the projects and the reviews are blocks of the main column */
.h-main .h-work .b-strip{margin:0 0 var(--s4)}
.h-main .h-projects .cards{margin:0}
.h-main .h-review{max-width:var(--measure)}
.h-opts li>p{max-width:var(--measure)}
/* round 6: the aside of a geo page stays in view for the whole page and never runs past the viewport's
   foot (a long list of sections scrolls inside it; at 1440 x 900 it was 879px tall under a 104px header) */
@media (min-width:1280px){.h-aside{max-height:calc(100vh - var(--head-h) - var(--s12));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}
/* round 6: the aside comes BEFORE the main column in the document (after the last link of the body, Tab
   used to jump a thousand pixels back up to "On this page"); the grid keeps it on the right */
@media (min-width:1280px){.h-two>.h-aside{grid-column:2;grid-row:1}.h-two>.h-main{grid-column:1;grid-row:1}}
/* round 7: a card grid inside the main column of a geo page. The site grid gives a 900px container four
   columns: 196px cards at 1280–1920, whose titles broke inside a word ("Transformati on"). A card here is
   never narrower than 260px, and a card title wraps between words only */
.h-main .cards,.h-main .cards-sm{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.h-main .card h3,.h-lines h3,.h-projects .card h3{overflow-wrap:normal;word-break:normal;hyphens:none}
/* round 7: a city hub's one services section: every line drawn the same way (icon, name, one sentence) */
.h-lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.h-line{margin:0;padding:var(--s6);border:1px solid var(--border);border-radius:var(--radius-card,var(--radius-btn));background:var(--bg)}
.h-line-i{display:block;color:var(--brand-text);margin-bottom:var(--s2)}
.h-line-i .i{display:block;width:var(--s12);height:var(--s12);stroke-width:1.5}
.h-line h3{margin:0 0 var(--s2);font-size:var(--fs-h4,1.25rem)}
.h-line h3 a{display:inline-flex;align-items:center;min-height:44px}
.h-line p{margin:0}
.h-line-subs{list-style:none;margin:var(--s3) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--border)}
.h-line-subs li{margin:0}
.h-line-subs a{display:inline-flex;align-items:center;min-height:44px}
/* Tim QA 2026-10-22 (JQ-G6WAHB7N): each review is a card of its own, like the site's other cards */
.h-reviews .h-review{margin:0;padding:var(--s6);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card)}
.h-reviews .h-review+.h-review{margin-top:var(--s4)}
.h-reviews>.wrap>.h-review+.h-review{margin-top:0}
@media (max-width:1279.98px){.h-reviews>.wrap>.h-review+.h-review{margin-top:var(--s4)}}
.h-reviews .h-review blockquote{margin:0 0 var(--s3)}
.h-reviews .h-review figcaption{font-size:var(--fs-small);color:var(--muted)}
/* round 8: a lone card is a sentence with a link (h_r8.go geoGrids), and a list of links is a 44px target */
.h-one{margin:0 0 var(--s4);max-width:var(--measure)}
.h-one a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.h-linklist{margin:0 0 var(--s4)}
/* round 8: a city hub's line card: name, one sentence, one action link; the services sit in one closed list under the cards */
.h-line{display:flex;flex-direction:column}
.h-line .h-line-go{margin:auto 0 0;padding-top:var(--s3)}
.h-line-go a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.h-allsvc{margin-top:var(--s6)}
.h-allsvc .h-svc-grid{padding:var(--s3) 0 var(--s4)}
.h-allsvc h4{margin:0 0 var(--s2);font-size:var(--fs-body,1rem)}
/* round 8: paragraphs of a captured passage and of the local text keep the body's paragraph step */
.h-pass p{margin:0 0 var(--s4)}
/* Omega v3.13 lane A: "Find your area" is one vertical list (Tim JQ-H8BM8HRP); the reviews link to all reviews (JQ-HRSKVF83) */
.h-vlist{list-style:none;margin:0;padding:0;columns:1;column-gap:var(--s6)}
.h-vlist li{break-inside:avoid;padding:var(--s2) 0;border-bottom:1px solid var(--border)}
.h-vlist a{display:block;min-height:44px;line-height:44px;padding:0 var(--s2)}
@media (min-width:720px){.h-vlist{columns:2}}
@media (min-width:1080px){.h-vlist{columns:3}}
.h-rev-all{margin-top:var(--s4)}

/* css/i-offices.css */
/* S02 lane I (ADR-015 R41): Google Business Profile details on an office page. .d-facts is a two-column
   grid (dt | dd); a second dd for the same term stays in the value column. */
.d-facts dd.i-src{grid-column:2;margin:0;color:var(--muted);font-size:var(--fs--1)}
.d-facts dd.i-google{display:flex;flex-direction:column;align-items:flex-start}
.d-facts dd.i-google a{overflow-wrap:anywhere}
.d-facts dd.i-google .i-rating{padding:0 0 var(--s2);color:var(--muted);font-size:var(--fs--1)}

/* css/m2-media.css */
/* s02-fix-media2 (m2_phone.go, m2_cards.go) */
/* a hero whose phone file is bright behind the text (sky): a stronger scrim on phones, darkest where the heading starts */
@media (max-width:767px){.b-hero:has(>.b-hero-bright:not(.b-hero-pstack):not(.b-hero-stack))::after{background:linear-gradient(180deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.74) 55%,rgba(0,0,0,.66) 100%)}}
/* a gallery tile whose file is narrower than a full tile is never drawn wider than 1.25 x its file */
.gallery.b-gallery li.m2-small figure{background:none}
.gallery.b-gallery li.m2-w240 img{max-width:min(100%,240px)}
.gallery.b-gallery li.m2-w280 img{max-width:min(100%,280px)}
.gallery.b-gallery li.m2-w320 img{max-width:min(100%,320px)}
.gallery.b-gallery li.m2-w360 img{max-width:min(100%,360px)}
.gallery.b-gallery li.m2-w400 img{max-width:min(100%,400px)}
.gallery.b-gallery li.m2-w440 img{max-width:min(100%,440px)}
.gallery.b-gallery li.m2-w480 img{max-width:min(100%,480px)}
/* on a phone (two device pixels per CSS pixel) the cap is half as wide */
@media (max-width:767px){.gallery.b-gallery li.m2-w240 img{max-width:min(100%,120px)}.gallery.b-gallery li.m2-w280 img{max-width:min(100%,140px)}.gallery.b-gallery li.m2-w320 img{max-width:min(100%,160px)}}

/* css/p-polish.css */
/* S02 lane P (ADR-016 D28 polish): icons on process steps, benefit lists and trust items. Tokens only. */
/* process steps: the numbered mark n1…n6 replaces the text counter when the step has one */
.p-step-i{display:block;color:var(--brand-text);margin-bottom:var(--s2)}
.p-step-i .i{display:block;width:var(--s12);height:var(--s12);stroke-width:1.5}
.c-steps li:has(>.p-step-i)::before{content:none}
/* benefits: an item whose words map to an icon shows it in the bullet's place */
.p-benefits li:has(>.i){list-style:none;position:relative}
.p-benefits li>.i{position:absolute;right:100%;top:.2em;margin-right:var(--s2);color:var(--brand-text)}
/* trust items: icon before the label */
.est-k{display:inline-flex;align-items:center;gap:var(--s2)}
.est-k .i{color:var(--brand-text)}
.est-facts>li{grid-template-columns:8em minmax(0,1fr)}
.est-facts>.est-rating{grid-template-columns:auto minmax(0,1fr)}
.est-facts>.est-calc{grid-template-columns:minmax(0,1fr)}
.est-star .i{display:block;fill:currentColor}
/* the estimate heading takes focus when a button jumps to the form (estimate.js): a landing point, not a control */
.sechead h2[tabindex="-1"]:focus{outline:none}

/* css/s-nav.css */
/* lane s02-fix-nav — site chrome: dropdown panels, tap targets. Tokens only. Loaded after the other lane files. */

/* D15 dropdown panels. The nav item is as tall as the header row, so there is no gap between the trigger
   and its panel (the panel hangs from the header's bottom edge). nav.js adds .nav-js and opens a panel by
   .is-open (hover intent, touch first tap, Escape); without the script the :hover/:focus-within rule above stays. */
@media (min-width:1024px){
  .nav-wide{display:flex;align-self:stretch}
  .nav-item{display:flex;align-items:center}
}
.nav-js .has-mega>.mega{display:none}
.nav-js .has-mega.is-open>.mega{display:block}
.has-mega.is-open>a{background:var(--surface)}
.mega{padding:var(--s6) 0 var(--s8);max-height:calc(100vh - var(--head-h) - var(--s2));max-height:calc(100dvh - var(--head-h) - var(--s2))}
.mega li{break-inside:avoid}
/* the row above the groups: the index page first, then (Service areas) each state */
.mega-top{display:flex;flex-wrap:wrap;gap:0 var(--s8);margin:0 0 var(--s4)}
.mega-top a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
/* Service areas: one block per office (its heading, then ITS cities right under it). A long list is a wide
   block of three columns; the other offices fill the space beside it. States sit under the offices. */
.mega-areas .mega-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--s4) var(--s6);align-items:start}
.mega-areas .mega-wide{grid-column:span 3;grid-row:span 2}
.mega-areas .mega-state{grid-column:span 3}
.mega-areas .mega-wide ul,.mega-areas .mega-state ul{columns:3;column-gap:var(--s6)}
.mega-areas li a,.mega-areas .mega-head{font-size:var(--fs-small)}

/* tap targets (44px, ADR-016 phone gate) */
/* the map's city dots are 3–10px: on touch and phone widths they are a picture, the same cities are text links under the map */
@media (pointer:coarse),(max-width:767px){.d-map-frame a{pointer-events:none}}
.h-sub a{display:inline-flex;align-items:center;min-height:44px}
.d-contact-offices .d-office-cards+p{margin:var(--s6) 0 0}
.d-contact-offices .d-office-cards+p a{display:inline-flex;align-items:center;min-height:44px}
.foot-list a,.site-foot p a,.d-foot-area-list a,.foot-legal a{min-width:44px}
main th>a{min-width:44px}
/* the accessibility page's ways to reach us: each its own 44px target, not a link inside a sentence */
.prose .n-reach{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s6)}
.prose .n-reach li{margin:0}
.n-reach a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;overflow-wrap:anywhere}
.c-cost .table-scroll+p>a{display:inline-flex;align-items:center;min-height:44px}

/* ---- lane s02-fix-nav2 (second human verification) ---- */
/* #2 a link that wraps to two lines keeps air above and below it (it no longer reads as one block with its neighbor) */
.mega li a{padding:var(--s2) 0;line-height:1.3}
/* #2 a panel taller than the window scrolls itself, never the page behind it; an edge shadow shows there is more */
.mega{overscroll-behavior:contain;background:
  linear-gradient(var(--bg) 40%,transparent) center top/100% 48px no-repeat local,
  linear-gradient(transparent,var(--bg) 60%) center bottom/100% 48px no-repeat local,
  linear-gradient(rgba(0,0,0,.18),transparent) center top/100% 14px no-repeat scroll,
  linear-gradient(transparent,rgba(0,0,0,.18)) center bottom/100% 14px no-repeat scroll,
  var(--bg)}
.mega-more{display:none}
/* #2 short windows (1280x720, 1024x600): each office and state block keeps its first links plus "+N more nearby" */
@media (min-width:1024px) and (max-height:840px){
  .mega{padding:var(--s3) 0 var(--s4)}
  .mega-top{margin-bottom:0}
  .mega-areas .mega-grid{gap:var(--s2) var(--s6)}
  .mega-areas .mega-col:has(.mega-more) li:nth-child(n+5):not(.mega-more){display:none}
  .mega-areas .mega-more{display:block}
  .mega-areas .mega-office.mega-wide{grid-column:auto;grid-row:auto}
  .mega-areas .mega-office.mega-wide ul{columns:auto}
}
/* #3 scroll lock: the page behind a tap-opened panel (nav.js sets html.n-lock) or the open gallery viewer does not
   scroll; the scrollbar's gutter is kept, so nothing shifts sideways */
html.n-lock,html:has(dialog.fc-viewer[open]){overflow:hidden;scrollbar-gutter:stable}
/* #4 the contact page's link under the office cards (the mailing address sits between the cards and the link) */
.d-contact-offices .wrap>p:not(.fc-mailing){margin:var(--s6) 0 0}
.d-contact-offices .wrap>p:not(.fc-mailing)>a{display:inline-flex;align-items:center;min-height:44px}
/* #6 the map: a city dot under an office name is dimmed; the name's halo is in d-offices.css */
.d-map-under{opacity:.28}
/* #7 a hero photo is never drawn wider than 1.25x its source. n_nav.go heroFitClass puts the kind and the step on the
   hero's <img> at build time; --bh-max is that step.
   b-hero-fit (source 800px or wider): up to the step the photo fills the head; wider, it sits at the right of the head
   at that width and fades into the dark ground.
   b-hero-split (source under 800px): up to the step it fills the head; from 1024px the head is two columns: heading,
   lede and buttons left, the photo right in a fixed-ratio box no wider than the step; between the two the photo is stacked
   under the text at its capped width. */
:is(.page-head,.hero):has(>.b-hero>.b-hero-w1900){--bh-max:1900px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w1500){--bh-max:1500px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w1200){--bh-max:1200px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w960){--bh-max:960px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w800){--bh-max:800px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w640){--bh-max:640px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w480){--bh-max:480px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w360){--bh-max:360px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w280){--bh-max:280px}
:is(.page-head,.hero):has(>.b-hero>.b-hero-w240){--bh-max:240px}
.b-hero:has(>.b-hero-fit){left:auto;right:0;width:min(100%,var(--bh-max))}
.b-hero:has(>.b-hero-fit)::after{background:linear-gradient(90deg,#14171a 0,rgba(20,23,26,.78) 28%,rgba(0,0,0,.6) 100%)}
@media (min-width:1024px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-split){--bh-w:min(var(--bh-max),520px);display:grid;align-items:center;grid-template-columns:minmax(var(--s8),1fr) minmax(0,calc(var(--wrap) - var(--s16) - var(--s12) - var(--bh-w))) calc(var(--bh-w) + var(--s12)) minmax(var(--s8),1fr)}
  :is(.page-head,.hero):has(>.b-hero>.b-hero-split)>.wrap{grid-column:2;grid-row:1;width:auto;max-width:none;margin:0;padding:0}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-split){grid-column:3;grid-row:1;justify-self:end;position:relative;inset:auto;z-index:0;width:var(--bh-w);aspect-ratio:var(--bh-ar,21/9);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-split)::after{content:none}
}
@media (min-width:961px) and (max-width:1023px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-w960.b-hero-split){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w960.b-hero-split){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max),calc(100% - var(--s8)));aspect-ratio:var(--bh-ar,21/9);margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w960.b-hero-split)::after{content:none}
}
@media (min-width:801px) and (max-width:1023px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-w800.b-hero-split){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w800.b-hero-split){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max),calc(100% - var(--s8)));aspect-ratio:var(--bh-ar,21/9);margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w800.b-hero-split)::after{content:none}
}
@media (min-width:641px) and (max-width:1023px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-w640.b-hero-split){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w640.b-hero-split){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max),calc(100% - var(--s8)));aspect-ratio:var(--bh-ar,21/9);margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w640.b-hero-split)::after{content:none}
}
@media (min-width:481px) and (max-width:1023px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-w480.b-hero-split){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w480.b-hero-split){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max),calc(100% - var(--s8)));aspect-ratio:var(--bh-ar,21/9);margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w480.b-hero-split)::after{content:none}
}
@media (min-width:361px) and (max-width:1023px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-w360.b-hero-split){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w360.b-hero-split){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max),calc(100% - var(--s8)));aspect-ratio:var(--bh-ar,21/9);margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w360.b-hero-split)::after{content:none}
}
@media (min-width:281px) and (max-width:1023px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-w280.b-hero-split){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w280.b-hero-split){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max),calc(100% - var(--s8)));aspect-ratio:var(--bh-ar,21/9);margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w280.b-hero-split)::after{content:none}
}
@media (min-width:241px) and (max-width:1023px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-w240.b-hero-split){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w240.b-hero-split){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max),calc(100% - var(--s8)));aspect-ratio:var(--bh-ar,21/9);margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-w240.b-hero-split)::after{content:none}
}
@media (min-width:961px) and (max-width:1023px){:is(.page-head,.hero)>.b-hero:has(>.b-hero-w960.b-hero-split){margin-left:var(--s8);width:min(var(--bh-max),calc(100% - var(--s16)))}}
@media (min-width:801px) and (max-width:1023px){:is(.page-head,.hero)>.b-hero:has(>.b-hero-w800.b-hero-split){margin-left:var(--s8);width:min(var(--bh-max),calc(100% - var(--s16)))}}
@media (min-width:768px) and (max-width:1023px){:is(.page-head,.hero)>.b-hero:has(>.b-hero-w640.b-hero-split){margin-left:var(--s8);width:min(var(--bh-max),calc(100% - var(--s16)))}}
@media (min-width:768px) and (max-width:1023px){:is(.page-head,.hero)>.b-hero:has(>.b-hero-w480.b-hero-split){margin-left:var(--s8);width:min(var(--bh-max),calc(100% - var(--s16)))}}
@media (min-width:768px) and (max-width:1023px){:is(.page-head,.hero)>.b-hero:has(>.b-hero-w360.b-hero-split){margin-left:var(--s8);width:min(var(--bh-max),calc(100% - var(--s16)))}}
@media (min-width:768px) and (max-width:1023px){:is(.page-head,.hero)>.b-hero:has(>.b-hero-w280.b-hero-split){margin-left:var(--s8);width:min(var(--bh-max),calc(100% - var(--s16)))}}
@media (min-width:768px) and (max-width:1023px){:is(.page-head,.hero)>.b-hero:has(>.b-hero-w240.b-hero-split){margin-left:var(--s8);width:min(var(--bh-max),calc(100% - var(--s16)))}}
/* the split box has the shape of the source, so cover never magnifies it past the width cap: the 21:9 hero crop by
   default, 3:2 for a source at least that tall (n_nav.go heroBoxClass) */
:is(.page-head,.hero)>.b-hero:has(>.b-hero-split.b-hero-tall){--bh-ar:3/2}
/* a crop too short to cover a phone head within the cap (n_nav.go heroStackClass) is never full bleed: below 1024px
   its photo is always under the text in its capped box, whatever the window's width */
@media (max-width:1023px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-stack){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-stack){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max),calc(100% - var(--s8)));aspect-ratio:var(--bh-ar,21/9);margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-stack)::after{content:none}
}
@media (min-width:768px) and (max-width:1023px){:is(.page-head,.hero)>.b-hero:has(>.b-hero-stack){margin-left:var(--s8);width:min(var(--bh-max),calc(100% - var(--s16)))}}
/* #9 office pages from 1280px: the sections share the row with a sticky aside (contents, phone, hours, directions),
   so the right half of the page is used; below 1280px the wrapper is not a box at all */
@media (min-width:1280px){
  .n-office-two{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--s16);align-items:start;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s8)}
  .n-office-two .fc-main>.band{background:none;padding:var(--s12) 0}
  .n-office-two .fc-main>.band+.band{border-top:1px solid var(--border)}
  .n-office-two .fc-main>.band>.wrap{max-width:none;padding:0}
  .n-office-two .n-office-aside{margin-top:var(--s12)}
  .n-office-two .fc-main :is(h2[id]){scroll-margin-top:calc(var(--head-h) + var(--s6))}
}
@media (max-width:1279px){.n-office-two .fc-main>.band:nth-child(even of .band){background:var(--section-alt)}}

/* css/tp-products.css */
/* tp_products.go — the product browser (owner 2026-10-23). Without JS: every trade under its heading. With JS
   (.tp-on): the category row is tabs and the panel headings are read by screen readers only (the tab names them). */
.tp-pb .tp-panel+.tp-panel{margin-top:var(--s8)}
.tp-pb .tp-h{margin:0 0 var(--s4)}
.tp-pb .card h4{font-family:var(--font-head);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-tight);letter-spacing:-0.01em;margin:0 0 var(--s2)}
.tp-tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s6)}
.tp-tabs[hidden],.tp-panel[hidden]{display:none}
.tp-tabs button{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;padding:0 var(--s4);border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--bg);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.tp-tabs button:hover{border-color:var(--brand-text);color:var(--brand-text)}
.tp-tabs button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.tp-tabs button:focus-visible{outline:3px solid var(--brand-text);outline-offset:2px}
.tp-tabs .tp-n{font-weight:400;opacity:.8}
.tp-on .tp-panel+.tp-panel{margin-top:0}
.tp-on .tp-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (forced-colors:active){.tp-tabs button{border:1px solid ButtonText}.tp-tabs button[aria-selected="true"]{border-width:3px}}

/* css/u-media.css */
/* lane s02-fix-media (u_device.go, u_upgrade.go). Loaded last: it refines b-media.css, fc-content.css and s-nav.css. */
/* a hero <picture> (phone source = the photo's 4:3 crop) is not a box: its <img> is laid out as the wrapper's child */
.b-hero>picture{display:contents}
/* 2a. phones, in device pixels: a hero with no file that covers a phone head within 1.25x at DPR 2 is not full bleed
   below 768px: the photo sits under the text in a 21:9 box as wide as the page (u_device.go heroViewOf) */
@media (max-width:767px){
  :is(.page-head,.hero):has(>.b-hero>.b-hero-pstack){flex-direction:column;align-items:stretch;justify-content:flex-end}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-pstack){order:2;position:relative;inset:auto;z-index:0;width:min(var(--bh-max,100%),calc(100% - var(--s8)));aspect-ratio:21/9;margin:var(--s6) 0 0 var(--s4);border-radius:var(--radius-img)}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-pstack)::after{content:none}
}
/* 2a. the split hero (a photo too small to stand behind a desktop heading): the box takes the photo's 4:3 crop and
   is a framed card sized to the photo, centered beside the text; the band is as tall as its content, not 420px */
:is(.page-head,.hero)>.b-hero:has(>.b-hero-split.b-hero-43){--bh-ar:4/3}
:is(.page-head,.hero)>.b-hero:has(>.b-hero-split){box-sizing:border-box;border:6px solid #fff;background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.5)}
@media (min-width:1024px){
  .page-head:has(>.b-hero>.b-hero-split){min-height:0;align-items:center}
  :is(.page-head,.hero)>.b-hero:has(>.b-hero-split){align-self:center;justify-self:center}
}
/* 2c. the footer states the business hours once, under the head office (the same hours as the CTA band) */

/* 2b. from 1280px a band under the two-column body uses the whole wrap. A text band (a heading with paragraphs, a
   table, facts or the FAQ, each kept to the reading measure) puts its heading in a left column and its body in
   the right one, so the band is not a 68ch column beside an empty half; review bands are three cards across.
   Bands that already fill the wrap (card grids, chips, the wide tables) are untouched. */
@media (min-width:1280px){
  main>section:is(.h-sec,.h-place,.h-other,.h-links,.c-claims,.c-faq):not(:has(.h-child-table,.cards,.b-strip))>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--s16);align-items:start}
  main>section:is(.h-sec,.h-place,.h-other,.h-links,.c-claims,.c-faq):not(:has(.h-child-table,.cards,.b-strip))>.wrap>.sechead{grid-column:1;grid-row:1/span 60;margin-bottom:0;position:sticky;top:calc(var(--head-h) + var(--s6))}
  main>section:is(.h-sec,.h-place,.h-other,.h-links,.c-claims,.c-faq):not(:has(.h-child-table,.cards,.b-strip))>.wrap>:not(.sechead){grid-column:2;min-width:0}
  main>section:is(.h-sec,.h-place,.h-other,.h-links,.c-claims,.c-faq):not(:has(.h-child-table,.cards,.b-strip))>.wrap>:is(table,.faq,dl){width:100%;max-width:none}
  main>section.h-reviews>.wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);align-items:stretch}
  main>section.h-reviews>.wrap>:is(.sechead,p,a,nav){grid-column:1/-1}
  main>section.h-reviews>.wrap>.sechead{margin-bottom:0}
  main>section.h-reviews>.wrap>figure{margin:0;max-width:none}
}
/* 2f. the "On this page" aside comes BEFORE the body in the document (the Tab key reaches its links first, not after
   the last link of the body); the grid still draws it as the right column. The placement is explicit, so it holds
   for either document order. */
@media (min-width:1280px){
  .fc-two>.fc-main{grid-column:1;grid-row:1}
  .fc-two>.fc-aside{grid-column:2;grid-row:1}
  /* 2d. a short window (1280x720): the stuck aside is never taller than the window under the header; what does not
     fit scrolls inside the aside, so the bottom of its contact card is reachable while it is stuck */
  .fc-aside{max-height:calc(100vh - var(--head-h) - var(--s12));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* design2 mega-cap (u00) */
.mega-services .mega-col:has(.mega-more) li:nth-child(n+6):not(.mega-more){display:none}
.mega-services .mega-more{display:block}
.mega-services .mega-more a{font-weight:600}

/* design2 tones (u02) */
:root{--d2-brand:#DF002C;--d2-brand-deep:#a2001d;--d2-brand-hover:#bb0023;--d2-charcoal:#1f2326;--d2-charcoal-2:#2a2e31;--d2-ink:#121e23;--d2-light-2:#f7f6f3;--d2-scrim:#121e23;--d2-warm:#f4f1ec;--d2-warm-2:#ebe7e1;--d2-white:#ffffff;--d2-light-bg:#ffffff;--d2-warm-bg:#f4f1ec;--d2-dark-bg:#1f2326;--d2-brand-bg:#DF002C;--d2-photo-bg:#121e23;--u02-div-h:var(--s16)}
.tone-light{color-scheme:light;--bg:#ffffff;--surface:#f7f6f3;--card-bg:#ffffff;--ink:#121e23;--muted:#4a5257;--border:#e3e0da;--ui-border:#888b8f;--brand-text:#DF002C;--link:#DF002C;--focus:#DF002C;--brand:#DF002C;--brand-hover:#bb0023;--on-brand:#ffffff;--accent:var(--link);--section-alt:var(--surface);background:var(--bg);color:var(--ink)}
.u02-into-light{--u02-fill:var(--d2-light-bg)}
.tone-warm{color-scheme:light;--bg:#f4f1ec;--surface:#ebe7e1;--card-bg:#ffffff;--ink:#121e23;--muted:#4a4f52;--border:#dcd5ca;--ui-border:#85807c;--brand-text:#ce0028;--link:#ce0028;--focus:#ce0028;--brand:#DF002C;--brand-hover:#bb0023;--on-brand:#ffffff;--accent:var(--link);--section-alt:var(--surface);background:var(--bg);color:var(--ink)}
.u02-into-warm{--u02-fill:var(--d2-warm-bg)}
.tone-dark{color-scheme:dark;--bg:#1f2326;--surface:#2a2e31;--card-bg:#2a2e31;--ink:#f7f5f1;--muted:#c9cdd0;--border:#3c4247;--ui-border:#7d858b;--brand-text:#ff6161;--link:#ff6161;--focus:#ff6161;--brand:#DF002C;--brand-hover:#bb0023;--on-brand:#ffffff;--accent:var(--link);--section-alt:var(--surface);background:var(--bg);color:var(--ink)}
.u02-into-dark{--u02-fill:var(--d2-dark-bg)}
.tone-brand{color-scheme:dark;--bg:#DF002C;--surface:#bb0023;--card-bg:#a2001d;--ink:#ffffff;--muted:#fff4f4;--border:#f0607a;--ui-border:#ffd0d6;--brand-text:#ffffff;--link:#ffffff;--focus:#ffffff;--brand:#ffffff;--brand-hover:#f4f1ec;--on-brand:#a2001d;--accent:var(--link);--section-alt:var(--surface);background:var(--bg);color:var(--ink)}
.u02-into-brand{--u02-fill:var(--d2-brand-bg)}
.tone-photo{color-scheme:dark;--bg:#121e23;--surface:#1f2326;--card-bg:#1f2326;--ink:#ffffff;--muted:#e3e6e8;--border:#4a5257;--ui-border:#8a9297;--brand-text:#ff444c;--link:#ffffff;--focus:#ffffff;--brand:#DF002C;--brand-hover:#bb0023;--on-brand:#ffffff;--accent:var(--link);--section-alt:var(--surface);background:var(--bg);color:var(--ink)}
.u02-into-photo{--u02-fill:var(--d2-photo-bg)}
:where(.tone-light,.tone-warm,.tone-dark,.tone-brand,.tone-photo) a:where(:not([class])){color:var(--link)}

/* design2 u20 (u20) */
@container u13 (min-width:600px){#u20-seamless .u13-table.u13-wide{min-width:36rem}}
.u20-see{font-style:italic}

/* design2 u21-topics (u21) */
/* u21 topic filters (u21_reviews.go u21TopicCSS) */
.u21-wall:not(.u21-js):has(#u21-t-cleaning:target) .u21-card:not([data-u21-t~="cleaning"]),.u21-wall[data-u21-on="cleaning"] .u21-card:not([data-u21-t~="cleaning"]){display:none}
.u21-wall:not(.u21-js):has(#u21-t-cleaning:target) .u21-st-all,.u21-wall[data-u21-on="cleaning"] .u21-st-all{display:none}
.u21-wall:not(.u21-js):has(#u21-t-cleaning:target) [data-u21-for="cleaning"],.u21-wall[data-u21-on="cleaning"] [data-u21-for="cleaning"]{display:inline}
.u21-wall:not(.u21-js):has(#u21-t-cleaning:target) .u21-f a[data-u21-topic="cleaning"],.u21-wall[data-u21-on="cleaning"] .u21-f a[data-u21-topic="cleaning"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u21-wall:not(.u21-js):has(#u21-t-cleaning:target) .u21-f a[data-u21-topic=""],.u21-wall[data-u21-on="cleaning"] .u21-f a[data-u21-topic=""]{background:transparent;border-color:var(--ui-border);color:var(--ink)}
.u21-wall:not(.u21-js):has(#u21-t-installation:target) .u21-card:not([data-u21-t~="installation"]),.u21-wall[data-u21-on="installation"] .u21-card:not([data-u21-t~="installation"]){display:none}
.u21-wall:not(.u21-js):has(#u21-t-installation:target) .u21-st-all,.u21-wall[data-u21-on="installation"] .u21-st-all{display:none}
.u21-wall:not(.u21-js):has(#u21-t-installation:target) [data-u21-for="installation"],.u21-wall[data-u21-on="installation"] [data-u21-for="installation"]{display:inline}
.u21-wall:not(.u21-js):has(#u21-t-installation:target) .u21-f a[data-u21-topic="installation"],.u21-wall[data-u21-on="installation"] .u21-f a[data-u21-topic="installation"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u21-wall:not(.u21-js):has(#u21-t-installation:target) .u21-f a[data-u21-topic=""],.u21-wall[data-u21-on="installation"] .u21-f a[data-u21-topic=""]{background:transparent;border-color:var(--ui-border);color:var(--ink)}
.u21-wall:not(.u21-js):has(#u21-t-guards:target) .u21-card:not([data-u21-t~="guards"]),.u21-wall[data-u21-on="guards"] .u21-card:not([data-u21-t~="guards"]){display:none}
.u21-wall:not(.u21-js):has(#u21-t-guards:target) .u21-st-all,.u21-wall[data-u21-on="guards"] .u21-st-all{display:none}
.u21-wall:not(.u21-js):has(#u21-t-guards:target) [data-u21-for="guards"],.u21-wall[data-u21-on="guards"] [data-u21-for="guards"]{display:inline}
.u21-wall:not(.u21-js):has(#u21-t-guards:target) .u21-f a[data-u21-topic="guards"],.u21-wall[data-u21-on="guards"] .u21-f a[data-u21-topic="guards"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u21-wall:not(.u21-js):has(#u21-t-guards:target) .u21-f a[data-u21-topic=""],.u21-wall[data-u21-on="guards"] .u21-f a[data-u21-topic=""]{background:transparent;border-color:var(--ui-border);color:var(--ink)}
.u21-wall:not(.u21-js):has(#u21-t-repair:target) .u21-card:not([data-u21-t~="repair"]),.u21-wall[data-u21-on="repair"] .u21-card:not([data-u21-t~="repair"]){display:none}
.u21-wall:not(.u21-js):has(#u21-t-repair:target) .u21-st-all,.u21-wall[data-u21-on="repair"] .u21-st-all{display:none}
.u21-wall:not(.u21-js):has(#u21-t-repair:target) [data-u21-for="repair"],.u21-wall[data-u21-on="repair"] [data-u21-for="repair"]{display:inline}
.u21-wall:not(.u21-js):has(#u21-t-repair:target) .u21-f a[data-u21-topic="repair"],.u21-wall[data-u21-on="repair"] .u21-f a[data-u21-topic="repair"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u21-wall:not(.u21-js):has(#u21-t-repair:target) .u21-f a[data-u21-topic=""],.u21-wall[data-u21-on="repair"] .u21-f a[data-u21-topic=""]{background:transparent;border-color:var(--ui-border);color:var(--ink)}
.u21-wall:not(.u21-js):has(#u21-t-downspouts:target) .u21-card:not([data-u21-t~="downspouts"]),.u21-wall[data-u21-on="downspouts"] .u21-card:not([data-u21-t~="downspouts"]){display:none}
.u21-wall:not(.u21-js):has(#u21-t-downspouts:target) .u21-st-all,.u21-wall[data-u21-on="downspouts"] .u21-st-all{display:none}
.u21-wall:not(.u21-js):has(#u21-t-downspouts:target) [data-u21-for="downspouts"],.u21-wall[data-u21-on="downspouts"] [data-u21-for="downspouts"]{display:inline}
.u21-wall:not(.u21-js):has(#u21-t-downspouts:target) .u21-f a[data-u21-topic="downspouts"],.u21-wall[data-u21-on="downspouts"] .u21-f a[data-u21-topic="downspouts"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u21-wall:not(.u21-js):has(#u21-t-downspouts:target) .u21-f a[data-u21-topic=""],.u21-wall[data-u21-on="downspouts"] .u21-f a[data-u21-topic=""]{background:transparent;border-color:var(--ui-border);color:var(--ink)}
.u21-wall:not(.u21-js):has(#u21-t-roofing:target) .u21-card:not([data-u21-t~="roofing"]),.u21-wall[data-u21-on="roofing"] .u21-card:not([data-u21-t~="roofing"]){display:none}
.u21-wall:not(.u21-js):has(#u21-t-roofing:target) .u21-st-all,.u21-wall[data-u21-on="roofing"] .u21-st-all{display:none}
.u21-wall:not(.u21-js):has(#u21-t-roofing:target) [data-u21-for="roofing"],.u21-wall[data-u21-on="roofing"] [data-u21-for="roofing"]{display:inline}
.u21-wall:not(.u21-js):has(#u21-t-roofing:target) .u21-f a[data-u21-topic="roofing"],.u21-wall[data-u21-on="roofing"] .u21-f a[data-u21-topic="roofing"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.u21-wall:not(.u21-js):has(#u21-t-roofing:target) .u21-f a[data-u21-topic=""],.u21-wall[data-u21-on="roofing"] .u21-f a[data-u21-topic=""]{background:transparent;border-color:var(--ui-border);color:var(--ink)}

/* design2 u27-fonts (u27) */
/* U27 display face: Oswald, SIL Open Font License 1.1 (Copyright 2016 The Oswald Project Authors), self-hosting and bundling permitted; file and license in /assets/fonts (site.json theme.fonts). */
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/oswald-latin-wght.woff2?v=bd73278ee0c5) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;size-adjust:90.00%;}
@font-face{font-family:"Oswald Fallback";font-style:normal;font-weight:200 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Helvetica Neue Bold"),local("Helvetica Bold");size-adjust:76.55%;ascent-override:139.92%;descent-override:34.10%;line-gap-override:0%}
:root{--font-head:"Oswald","Oswald Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* imported pages (website#238) */
.cards.group{margin:var(--s4) 0 var(--s12)}
.cards.group:last-child{margin-bottom:0}
.band h2 a{color:inherit;display:inline-flex;align-items:center;min-height:44px}
.foot-legal{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--s4);padding:0;margin:var(--s2) 0 0}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.rating-sum{font-weight:700;margin-top:var(--s2)}
.review{margin:0}
.review blockquote{margin:0 0 var(--s3)}
.card .review blockquote p{display:block;-webkit-line-clamp:unset;color:var(--ink)}
.review figcaption{color:var(--muted);font-size:var(--fs-small)}
.projects .card p{-webkit-line-clamp:8}
.prose p,.prose li{overflow-wrap:anywhere}

.prose figure{margin:var(--s6) 0}
.prose img{display:block;max-width:100%;height:auto;border-radius:var(--r-lg)}
.prose p img{margin:var(--s4) 0}
.prose figcaption{padding-top:var(--s2);font-size:15px;color:var(--muted)}
.page-photo{margin:0}
.page-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl)}
.page-photo figcaption{padding-top:var(--s2);font-size:15px;color:var(--muted)}
.gallery-page .gallery li{min-width:0}

picture.b-pic{display:contents}

@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}