/* Self-hosted webfonts (Website decision 29): files in /assets/fonts, sources and licenses in site.json theme.fonts. */
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lato-400-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:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lato-400-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:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/lato-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:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/lato-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:"Raleway";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/raleway-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:"Raleway";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/raleway-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 cap18.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:999px;--radius-card:12px;--radius-img:12px;
  --r-sm:8px;--r-md:8px;--r-lg:12px;--r-xl:12px;--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:#f6f6f6;--ink:#000000;--muted:#595959;--border:#e0e0e0;
  --brand:#3cafd3;--on-brand:#111111;--brand-text:#29778f;--accent:#2b93b0;
  --focus:#29778f;
  --section-alt:var(--surface);--scrim:rgba(0,0,0,.6);
  --font-head:"Raleway",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Lato",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 */
@media (min-width:1024px) and (max-width:1279px){.head-call-w{display:none}.nav-item>a{padding:var(--s2)}.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}
}

/* 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);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.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/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)}
.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/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 .card p{-webkit-line-clamp:2}
.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}

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

.d-map{margin:0 0 var(--s8)}
.d-map-frame{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.d-map-svg{display:block;width:100%;height:auto}
.d-map-ground{fill:var(--surface)}
.d-map-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:2 6}
.d-map-spoke{stroke:var(--muted);stroke-width:1.2;opacity:.35}
.d-map-city{fill:var(--brand-text);stroke:var(--bg);stroke-width:2}
.d-map-listed{fill:var(--bg);stroke:var(--brand-text);stroke-width:2}
.d-map-office circle{fill:var(--brand);stroke:var(--bg);stroke-width:4}
.d-map-office text{font:700 26px/1 var(--font-head);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round}
.d-map-dim{opacity:.25}
.d-map svg a:hover .d-map-city,.d-map svg a:hover circle{stroke:var(--ink)}
.d-map-key{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin-top:var(--s3);color:var(--muted);font-size:var(--fs-small)}
.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}
.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-city-list a.d-listed{font-weight:400;border-style:dashed}
.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-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)}
.d-foot-area-list a.d-listed{color:var(--muted)}

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

/* 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>img) .card>a>.b-cimg.b-cimg-none,.cards:has(.b-cimg>img) .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>img) .b-cimg-none .b-cicon{width:64px;height:64px}
.cards:has(.b-cimg>img) .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}
/* round 8: reviews are set apart: a rule and the section step between one review's attribution and the next quote */
.h-reviews .h-review{margin:0;padding:var(--s6) 0;border-top:1px solid var(--border)}
.h-reviews .h-review:last-child{padding-bottom:0}
.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)}

/* 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/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) */
.d-foot-hours{display:block;color:var(--muted);line-height:1.4}
/* 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:start}
  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}
}

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