:root{
  --p:#629d5c;--pd:#41683d;--a:#bd4816;
  --ink:#1f1b19;--bg:#f7f7f6;--sf:#fbfbfb;--ln:#e4e0dc;
  --onp:#1f1b19;--ona:#ffffff;
  /* --onp means "legible on --p". The dark bands are built from --dark and --pd,
     which are far darker than --p, so on light-primary palettes --onp is ink and
     unreadable there. White clears AA on --dark and --pd for every site. */
  --ond:#ffffff;
  --tint:color-mix(in srgb,#629d5c 6%,#f7f7f6);--r:2px;--r-lg:4px;--shad:0 1px 2px rgba(16,24,32,.06), 0 1px 3px rgba(16,24,32,.10);
  --btn-bg:#bd4816;--btn-txt:#ffffff;
  --card-bg:#fbfbfb;--card-bdr:1px solid #e4e0dc;--card-r:4px;
  --inp-bdr:1px solid #e4e0dc;--inp-foc:#629d5c;
  --tint2:color-mix(in srgb,#629d5c 3%,#f7f7f6);
  --dark:color-mix(in srgb,#000 38%,#629d5c);
  --shad-2:0 2px 6px rgba(10,16,24,.06),0 10px 28px rgba(10,16,24,.09);
  --shad-3:0 4px 12px rgba(10,16,24,.08),0 22px 56px rgba(10,16,24,.16);
}
*{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16.5px/1.88 'Source Sans 3',system-ui,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;--dv:.86}
body.density-tight{--dv:.66}
body.density-loose{--dv:1.14}
h1,h2,h3,h4{font-family:'Public Sans',Georgia,serif;font-weight:700;line-height:1.08;
  text-wrap:balance;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .7rem}
h1{font-size:clamp(2.5rem,2.88vw,3.72rem)}
h2{font-size:clamp(1.7rem,1.8vw,2.22rem);margin-top:0;line-height:1.14}
h3{font-size:1.18rem;margin-top:2.2rem;line-height:1.3}
p{margin:0 0 1.2rem;max-width:72ch}
/* FAQ question: sits on its own line, answer starts below */
.qa-q{display:block;margin-bottom:.35rem}
.lead{font-size:clamp(1.12rem,1.9vw,1.36rem);line-height:1.58;max-width:58ch;
  font-weight:400}
a{color:var(--pd);text-underline-offset:3px}a:hover{color:var(--a)}
:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.std{font-family:ui-monospace,Consolas,monospace;font-size:.88em;
  background:color-mix(in srgb,var(--a) 10%,transparent);padding:.1em .4em;border-radius:3px}
.phg{vertical-align:-2px;margin-right:7px}
/* ── utility bar ── */
.util{background:var(--dark);color:var(--ond);font-size:.8rem;letter-spacing:.02em}
.util__in{display:flex;align-items:center;gap:22px;min-height:34px;flex-wrap:wrap}
.util__spacer{flex:1}
/* header.site a is (0,1,1) too and is emitted later, so a bare .util a lost
   the tie and the utility strip kept nav-coloured links on its --dark band. */
header.site .util a{color:var(--ond);opacity:.85;text-decoration:none}
.util a:hover{opacity:1;text-decoration:underline}
.util .phg{margin-right:5px;vertical-align:-2px}
.util span{opacity:.78;display:inline-flex;align-items:center}
/* ── nav ── */
header.site{background:var(--p);color:var(--onp);position:sticky;top:0;z-index:30;
  box-shadow:0 1px 0 color-mix(in srgb,var(--onp) 12%,transparent),0 6px 24px rgba(8,12,20,.18)}
header.site a{color:var(--onp);text-decoration:none}
.hd{display:flex;align-items:center;flex-wrap:nowrap;gap:30px;min-height:76px;
  padding:0 clamp(20px,4vw,44px);max-width:1080px;margin:0 auto;position:relative}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;flex:0 0 auto;
  font-family:'Public Sans';font-weight:700;font-size:1.08rem;letter-spacing:-0.01em}
.brand img{height:34px;width:auto}
.brand__chip{display:inline-flex;background:#fff;border-radius:5px;padding:4px 6px;
  box-shadow:0 2px 8px rgba(0,0,0,.2)}
.brand__chip img{height:40px;width:auto;display:block}
.brand .bn{font-family:'Public Sans';font-weight:700;letter-spacing:-0.01em;text-transform:uppercase;white-space:nowrap}
nav.top{margin-left:auto;display:flex;gap:4px;font-size:.83rem;flex-wrap:nowrap}
nav.top a{padding:9px 13px;border-radius:6px;white-space:nowrap;position:relative;
  font-weight:600;letter-spacing:.055em;text-transform:uppercase;opacity:.85;
  transition:background .16s,opacity .16s}
nav.top a:hover{background:color-mix(in srgb,var(--onp) 10%,transparent);opacity:1}
.tel{background:var(--a);color:var(--ona) !important;padding:11px 22px;border-radius:6px;
  font-weight:700;white-space:nowrap;text-decoration:none;margin-left:10px;font-size:.92rem;
  box-shadow:0 3px 10px color-mix(in srgb,var(--a) 40%,transparent);
  transition:transform .16s,box-shadow .16s;display:inline-flex;align-items:center}
.tel:hover{transform:translateY(-1px);
  box-shadow:0 6px 18px color-mix(in srgb,var(--a) 55%,transparent)}
/* nav layout variants — every id must have a rule */
.nav--center-logo .hd{justify-content:center;gap:40px}
.nav--phone-forward .tel{order:-1;margin-left:0;margin-right:auto}
/* utility-two-row: the utility strip above is its distinguishing feature. The nav
   itself stays inline on the SAME row as the brand and CTA — never wrap it to a
   second line (an empty brand row over a stranded nav reads as broken). */
.nav--utility-two-row .hd{padding-top:4px}
.nav--utility-two-row nav.top{order:0;width:auto;margin-left:auto}
/* flow-root contains the .hd's 8px margin so it doesn't collapse out of the header and
   show the page background as a white strip above the hero */
.nav--island{display:flow-root}
.nav--island .hd{max-width:1200px;margin:8px auto;border-radius:var(--r-lg);
  background:var(--p);padding:0 24px}
.nav--floating{background:transparent;position:absolute;width:100%;z-index:30}
.nav--boxed .hd{border:1px solid color-mix(in srgb,var(--onp) 20%,transparent);
  border-radius:var(--r)}
.nav--left-all nav.top{margin-left:32px}
/* stacked/burger-min predate the mega-menu nav — a column .hd or a hidden nav.top
   would break the horizontal bar, so they keep the row and just tweak spacing */
.nav--stacked .hd{gap:22px;padding-block:8px}
.nav--burger-min .hd{gap:34px}
/* nav theme variants — every id must have a rule */
.nav--dark,.nav--brand{background:var(--p);color:var(--onp)}
.nav--light{background:var(--bg);color:var(--ink)}
.nav--light a{color:var(--ink)}
/* the nav sits in normal flow (not floating over the hero), so a transparent background
   just shows the white page behind it — use a solid dark band instead of leaving a gap */
.nav--transparent{background:var(--dark);color:var(--ond)}
.nav--bordered{border-bottom:2px solid var(--a)}
/* ── services mega menu / service-areas dropdown ──
   Open/close/delay/exclusivity are pure CSS (real :hover can only ever match one
   .navitem at a time, so mutual exclusion is inherent — no JS needed for that).
   Escape-to-close is the one thing CSS genuinely cannot do; nav.js handles only that. */
/* static so the panel anchors to .hd (below) and can span a large width right-aligned
   to the header instead of overflowing off the right edge from the nav item's position */
.navitem{position:static}
/* the narrow Service Areas dropdown anchors to its OWN nav item (drops directly under
   it) rather than to .hd like the wide Products panel — else it appears far to the right */
.navitem--areas{position:relative}
.navitem--areas .areamenu{left:0;right:auto}
.navitem summary{padding:9px 13px;border-radius:6px;white-space:nowrap;list-style:none;
  cursor:pointer;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  font-size:.83rem;opacity:.85;transition:background .16s,opacity .16s;
  display:inline-flex;align-items:center;gap:6px}
.navitem summary::-webkit-details-marker{display:none}
.navitem summary::after{content:"";width:7px;height:7px;border:2px solid currentColor;
  border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .16s}
.navitem:hover summary::after,.navitem.is-open summary::after{transform:rotate(225deg) translateY(1px)}
.navitem summary:hover{background:color-mix(in srgb,var(--onp) 10%,transparent);opacity:1}
/* Mega panels: white @ 90% + blur, dark-ash text, deep-black on hover, never underlined.
   Anchored to .hd (the header row) and right-aligned so it can be wide without running off
   the right edge; on big screens it fills much of the header width. */
.megamenu,.areamenu{position:absolute;top:100%;right:0;left:auto;z-index:40;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  color:#374151;border:1px solid rgba(17,17,17,.08);border-radius:var(--r-lg);
  box-shadow:0 18px 50px -12px rgba(8,12,20,.35),0 4px 14px rgba(8,12,20,.12);
  padding:24px;margin-top:10px;
  max-height:min(84vh,860px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(17,17,17,.28) transparent;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease,visibility 0s linear .12s}
/* invisible bridge spanning the whole summary→panel gap so the cursor can cross
   between the nav item and the panel without a hover-loss flicker */
.megamenu::before,.areamenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.megamenu::-webkit-scrollbar,.areamenu::-webkit-scrollbar{width:7px}
.megamenu::-webkit-scrollbar-track,.areamenu::-webkit-scrollbar-track{background:transparent}
.megamenu::-webkit-scrollbar-thumb,.areamenu::-webkit-scrollbar-thumb{
  background:rgba(17,17,17,.24);border-radius:999px}
.megamenu:hover::-webkit-scrollbar-thumb,.areamenu:hover::-webkit-scrollbar-thumb{
  background:rgba(17,17,17,.42)}
/* Open on :hover (pointer) or .is-open (keyboard/tap via nav.js) — deliberately NOT
   :focus-within, which is what left Service Areas stuck open after a click. Opens
   immediately on hover (no delay); the panel stays open while the cursor is over the
   nav item OR the panel (it's a descendant, so :hover covers both), and closes as soon
   as the cursor leaves both. */
.navitem:hover .megamenu,.navitem.is-open .megamenu,
.navitem:hover .areamenu,.navitem.is-open .areamenu{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .12s ease,visibility 0s}
/* Escape (nav.js) forces the panel shut until the next real mouseleave */
.navitem.force-closed .megamenu,.navitem.force-closed .areamenu{
  opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
/* definite width (not shrink-to-fit) so auto-fit resolves to real columns. Right-anchored
   to .hd, so it can be wide on big screens (more columns in one row = less scrolling) while
   the viewport-minus-gutter cap keeps it fully on-screen at every width. */
/* megamenu is a vertical stack: featured link, then the categories grid, then the
   full-width "Site Equipment" row — so no spanning item forces an empty grid track */
.megamenu{display:flex;flex-direction:column;gap:18px;
  width:min(1120px,calc(100vw - 48px))}
/* single categories in an auto-fit grid: empty tracks collapse, so the columns always
   fill the panel width with no trailing blank space */
.mm-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px 26px;align-items:start}
/* .navitem-scoped so these out-rank header.site a (which would otherwise paint links white) */
.navitem .megamenu a,.navitem .areamenu a,.navitem .am-all,.navitem .mm-featured{text-decoration:none}
/* wrap long labels onto a second line instead of overflowing into the next column
   (overrides nav.top a's white-space:nowrap) */
/* links read as links: a medium brand-slate (clearly interactive, distinct from the
   near-black headings) + a clear branded hover pill with a left accent bar */
.navitem .megamenu a,.navitem .areamenu a{
  color:color-mix(in srgb,var(--pd) 52%,#64748b);white-space:normal;line-height:1.3;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;cursor:pointer;
  transition:color .14s ease,background .14s ease,box-shadow .14s ease}
/* list-item links: tight, consistent spacing with no left indent (nav.top a's 9px/13px
   padding was leaking in). margin:0 -8px pulls the hover pad back so text lines up with the
   heading, and putting the pad in the base means hover adds no vertical shift. */
.navitem .mm-col ul a,.navitem .areamenu ul a{display:block;padding:6px 8px;margin:0 -8px;
  border-radius:6px}
/* right arrow that slides in on hover so items read as "go here" links */
.navitem .mm-col ul a{display:flex;align-items:center;justify-content:space-between;gap:8px}
.navitem .mm-col ul a::after{content:"";flex:0 0 auto;width:14px;height:12px;background:var(--a);
  opacity:0;transform:translateX(-5px);transition:opacity .14s ease,transform .14s ease;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 11h12.2l-3.6-3.6L14 6l6 6-6 6-1.4-1.4 3.6-3.6H4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 11h12.2l-3.6-3.6L14 6l6 6-6 6-1.4-1.4 3.6-3.6H4z"/></svg>') center/contain no-repeat}
.navitem .mm-col ul a:hover::after,.navitem .mm-col ul a:focus::after{opacity:1;transform:translateX(0)}
.navitem .megamenu a:hover,.navitem .megamenu a:focus,.navitem .megamenu a:active,
.navitem .areamenu a:hover,.navitem .areamenu a:focus,.navitem .areamenu a:active{color:#0b0f19;
  text-decoration:none;background:color-mix(in srgb,var(--a) 15%,transparent);
  box-shadow:inset 2px 0 0 var(--a)}
/* Featured cost link: a bold item at the top — no card, no bottom separator, and a clean
   hover pill without the left accent bar the generic item-hover adds */
.navitem .megamenu a.mm-featured{display:flex;align-items:center;gap:8px;
  padding:5px 8px;margin:0 -8px;border-radius:6px;
  font-weight:800;font-size:.9rem;letter-spacing:.01em;color:#111111;background:none}
.navitem .megamenu a.mm-featured:hover,.navitem .megamenu a.mm-featured:focus,
.navitem .megamenu a.mm-featured:active{color:#111111;box-shadow:none;
  background:color-mix(in srgb,var(--a) 14%,transparent)}
.navitem .megamenu a.mm-featured:hover .ar{transform:translateX(3px)}
.mm-col{break-inside:avoid}
/* the big catch-all bucket is a full-width row below the categories grid; its links flow
   across as many sub-columns as fit, filling the width (.navitem-scoped so display:block
   beats the base .mm-col ul flex rule) */
.navitem .mm-col--wide ul{display:block;column-width:200px;column-gap:26px}
.mm-col--wide ul li{break-inside:avoid}
/* category heading: bolder/larger than the links, with a divider rule beneath it */
.mm-col strong{display:block;font-family:'Public Sans';letter-spacing:.06em;text-transform:uppercase;
  font-size:.95rem;margin-bottom:10px;padding-bottom:10px;color:#111111;font-weight:800;
  border-bottom:1px solid rgba(17,17,17,.14)}
.mm-col ul,.areamenu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.areamenu{grid-template-columns:none;min-width:340px;max-width:440px}
.areamenu ul{column-count:2;column-gap:22px;margin-top:14px}
.areamenu ul li{break-inside:avoid;margin-bottom:8px}
/* location pin before every service-area item */
.navitem .areamenu ul a{display:flex;align-items:center;gap:8px}
.navitem .areamenu ul a::before{content:"";flex:0 0 12px;width:12px;height:14px;background:var(--a);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 8.5A2.5 2.5 0 1 1 12 5.5a2.5 2.5 0 0 1 0 5z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 8.5A2.5 2.5 0 1 1 12 5.5a2.5 2.5 0 0 1 0 5z"/></svg>') center/contain no-repeat}
.navitem .am-all{font-weight:700;color:#111111;display:inline-flex;align-items:center;gap:6px}
/* hamburger (checkbox-hack, no JS) — hidden by default, only shown ≤900px */
.nt-input{position:absolute;opacity:0;pointer-events:none}
.nt-btn{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:34px;height:34px;cursor:pointer;flex:0 0 auto}
.nt-btn span,.nt-btn span::before,.nt-btn span::after{content:"";display:block;height:2px;
  width:100%;background:currentColor;border-radius:2px;transition:transform .18s,opacity .18s}
.nt-btn span{position:relative}
.nt-btn span::before{position:absolute;top:-8px}
.nt-btn span::after{position:absolute;top:8px}
.nt-input:checked ~ .nt-btn span{background:transparent}
.nt-input:checked ~ .nt-btn span::before{top:0;transform:rotate(45deg)}
.nt-input:checked ~ .nt-btn span::after{top:0;transform:rotate(-45deg)}
/* ── buttons ── */
.btn{display:inline-flex;align-items:center;padding:15px 30px;border-radius:6px;
  font-weight:700;text-decoration:none;font-size:1rem;line-height:1.2;
  border:2px solid transparent;transition:all .18s ease;letter-spacing:.01em}
.btn--a{background:var(--btn-bg);color:var(--btn-txt);
  box-shadow:0 4px 14px color-mix(in srgb,var(--btn-bg) 42%,transparent)}
.btn--a:hover{text-decoration:underline;color:var(--btn-txt)}
.btn--g{border-color:color-mix(in srgb,currentColor 45%,transparent);color:inherit;
  background:color-mix(in srgb,currentColor 6%,transparent);backdrop-filter:blur(4px)}
.btn--g:hover{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit}
.ar{margin-left:6px;transition:transform .18s}
.btn--a:hover .ar{transform:translateX(4px)}
/* ── hero ── */
.hero{padding:calc(clamp(3.6rem,8vw,7rem) * var(--dv)) 0 calc(clamp(3rem,6vw,5.4rem) * var(--dv));
  position:relative;
  overflow:hidden}
.hero--light{background:var(--bg)}
.hero--tinted{background:var(--tint)}
/* The gradient ends on --pd rather than --p so both ends of the sweep are dark
   enough for --ond. Ending on --p meant a light-primary palette faded to a
   surface no single text colour could sit on. */
.hero--dark,.hero--photo-dark{color:var(--ond);
  background:linear-gradient(128deg,var(--dark) 0%,var(--pd) 58%,
  color-mix(in srgb,var(--a) 14%,var(--pd)) 100%)}
/* :not(.btn) matters — this selector is (0,1,1) and would otherwise outrank
   .btn--a at (0,1,0), repainting the primary button's label white over an accent
   fill that expects --btn-txt. Same for the banner and bleed rules below. */
.hero--dark a:not(.btn),.hero--photo-dark a:not(.btn){color:var(--ond)}
.hero--photo-light{background:var(--sf)}
.hero--duotone{background:var(--tint)}
/* banner fallback — a real banner on every page even before a photo is sourced */
.hero--banner{color:var(--ond);background:linear-gradient(128deg,var(--dark) 0%,var(--pd) 56%,
  color-mix(in srgb,var(--a) 16%,var(--pd)) 100%)}
.hero--banner a:not(.btn){color:var(--ond)}
.hero--banner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,
  color-mix(in srgb,var(--onp) 16%,transparent) 1px,transparent 0);background-size:22px 22px}
.hero--banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--a) 0%,var(--a) 40%,transparent 40.1%)}
.hero--photo-bleed{background:linear-gradient(135deg,var(--pd),color-mix(in srgb,var(--pd) 60%,#000));
  color:var(--ond);background-image:var(--hero-img,none);background-size:cover;
  background-position:center}
.hero--photo-bleed::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,color-mix(in srgb,var(--dark) 88%,transparent) 0%,
  color-mix(in srgb,var(--dark) 62%,transparent) 46%,rgba(4,8,14,.18) 100%);z-index:0}
.hero--photo-bleed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--a) 0%,var(--a) 34%,transparent 34.1%);z-index:2}
.hero--photo-bleed .hero__in{position:relative;z-index:1}
.hero--photo-bleed a:not(.btn){color:var(--ond)}
.hero--overlap-card{background:var(--hero-img,var(--tint)) center/cover;color:var(--ink);
  padding-bottom:0}
.hero--overlap-card .hero__copy{background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:clamp(1.8rem,4vw,3.2rem);max-width:760px;box-shadow:var(--shad-3);
  margin-top:clamp(3rem,8vw,7rem)}
/* the copy card is a light surface even when the hero itself is a dark variant, so the
   white link colour those variants set has to be reverted inside it or the links vanish */
.hero--overlap-card .hero__copy a:not(.btn){color:var(--pd)}
.hero--overlap-card .hero__copy a:not(.btn):hover{color:var(--a)}
.hero--overlap-card .hero__copy .btn--g{color:var(--pd);border-color:var(--pd);
  background:color-mix(in srgb,var(--pd) 6%,transparent)}
.hero--overlap-card .hero__copy .btn--g:hover{background:var(--pd);color:var(--onp);
  border-color:var(--pd)}
.hero__wm{position:absolute;right:-2%;top:50%;transform:translateY(-52%);
  font-family:'Public Sans';font-weight:800;font-size:clamp(16rem,34vw,30rem);line-height:1;
  opacity:.05;pointer-events:none;user-select:none;z-index:0}
.al-center .hero__in{text-align:center}
.al-center .lead{margin-inline:auto}
.al-right .hero__in{text-align:right}.al-right .lead{margin-left:auto}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin:2rem 0 0}
.al-center .hero__cta{justify-content:center}.al-right .hero__cta{justify-content:flex-end}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 1.1rem;font-family:'Source Sans 3';font-weight:700}
.eyebrow--chip{display:inline-flex;align-items:center;gap:9px;
  background:color-mix(in srgb,var(--a) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--a) 38%,transparent);
  color:inherit;padding:7px 16px;border-radius:999px}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:var(--a);flex:0 0 8px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 25%,transparent)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:2.1rem 0 0;
  font-size:.86rem;font-weight:600}
.chips li{display:inline-flex;align-items:center;gap:8px;
  background:color-mix(in srgb,currentColor 7%,transparent);
  border:1px solid color-mix(in srgb,currentColor 16%,transparent);
  padding:8px 15px;border-radius:999px;letter-spacing:.01em}
.chips li::before{content:"";width:15px;height:15px;flex:0 0 15px;border-radius:50%;
  background:var(--a);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.5 12.2 2.8 8.5l1.4-1.4 2.3 2.3 5.3-5.3 1.4 1.4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.5 12.2 2.8 8.5l1.4-1.4 2.3 2.3 5.3-5.3 1.4 1.4z"/></svg>') center/contain no-repeat}
/* hero layout variants — every id must have a rule */
.hero__in{display:grid;gap:clamp(1.8rem,4vw,3.6rem);align-items:center;position:relative;z-index:1}
@media(min-width:900px){
  .hero--split-r .hero__in{grid-template-columns:6fr 5fr}
  .hero--split-l .hero__in{grid-template-columns:5fr 6fr}
  .hero--split-l .hero__copy{order:2}
  .hero--panel-l .hero__in{grid-template-columns:4fr 7fr}
  .hero--panel-r .hero__in{grid-template-columns:7fr 4fr}
  .hero--panel-r .hero__copy{order:2}
  .hero--form-right .hero__in,.hero--form-left .hero__in{grid-template-columns:6fr 5fr}
  .hero--offset .hero__in{grid-template-columns:1fr 8fr 1fr}
  .hero--offset .hero__copy{grid-column:2}
  .hero--fullbleed-c .hero__in,.hero--centered-solid .hero__in{
    max-width:820px;margin-inline:auto;text-align:center}
  .hero--fullbleed-c .hero__cta,.hero--centered-solid .hero__cta{justify-content:center}
  .hero--fullbleed-l .hero__in{max-width:900px}
  .hero--stacked .hero__in,.hero--band-bottom .hero__in{grid-template-columns:1fr}
  /* band-bottom is the one layout in SPLITS whose grid is a single column, so
     the media panel meant to sit beside the copy spans the full width instead.
     Left at the shared hero ratio it renders as a very tall slab. The name is
     the spec: a band across the bottom, so bound it to a letterbox strip. */
  .hero--band-bottom .hero__media,
  .hero--band-bottom .hero__media .fig{height:auto}
  .hero--band-bottom .hero__media img{
    height:auto;aspect-ratio:16/6;object-fit:cover;
    max-height:clamp(190px,26vh,320px)}
  .hero--diagonal .hero__in{grid-template-columns:5fr 6fr}
  .hero--overlap-card .hero__in{grid-template-columns:1fr}
  .hero--map-hero .hero__in{grid-template-columns:5fr 5fr}
  .hero--photo-bleed .hero__in{grid-template-columns:1fr}
  .hero--photo-bleed .hero__copy{max-width:700px}
}
.hero__media{border-radius:var(--r-lg);overflow:visible;position:relative}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;
  border-radius:var(--r-lg);box-shadow:var(--shad-3);position:relative;z-index:1}
.hero__media-accent{position:absolute;inset:-14px auto auto -14px;width:52%;height:52%;
  border-radius:var(--r-lg);background:linear-gradient(135deg,var(--a),
  color-mix(in srgb,var(--a) 40%,var(--p)));z-index:0}
/* ── FAQ accordion (question h3s rewritten by faq_accordion) ── */
.faq{display:grid;gap:12px;margin:1.9rem 0}
.faq__i{border:1px solid var(--ln);border-radius:var(--r);background:var(--card-bg);
  box-shadow:var(--shad-1);overflow:hidden}
.faq__i summary{cursor:pointer;list-style:none;display:block;position:relative;
  padding:17px 52px 17px 20px;font-family:'Public Sans';font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.35}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--a);border-bottom:2px solid var(--a);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.faq__i[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq__i summary:hover{background:color-mix(in srgb,var(--a) 8%,transparent)}
.faq__i summary:focus-visible{outline:3px solid var(--a);outline-offset:-3px}
.faq__a{padding:0 20px 18px}
.faq__a>*:first-child{margin-top:0}
.faq__a>*:last-child{margin-bottom:0}
.g-dark .faq__i{background:color-mix(in srgb,#000 16%,var(--p));
  border-color:color-mix(in srgb,var(--onp) 18%,transparent)}
.g-dark .faq__i summary:hover{background:color-mix(in srgb,var(--onp) 8%,transparent)}
/* ── sections ── */
.sec{padding:calc(clamp(3.4rem,6.5vw,5.8rem) * var(--dv)) 0;position:relative}
.g-page{background:var(--bg)}
.g-tint{background:linear-gradient(180deg,var(--tint2) 0%,var(--tint) 100%)}
.g-dark{color:var(--onp);
  background:linear-gradient(150deg,var(--dark) 0%,var(--p) 72%)}
.g-dark a:not(.btn){color:var(--onp);text-decoration-color:var(--a)}
.g-dark .t th{background:color-mix(in srgb,#000 22%,var(--p))}
.g-dark .tw{background:color-mix(in srgb,#000 14%,var(--p));
  border-color:color-mix(in srgb,var(--onp) 18%,transparent)}
.g-dark .t tbody tr:nth-child(even) td{background:color-mix(in srgb,#000 8%,transparent)}
.g-dark .t td{border-bottom-color:color-mix(in srgb,var(--onp) 14%,transparent)}
/* ── dividers — every shape id must have a rule ── */
.dv{height:12px;overflow:hidden}
.dv--straight{height:0;border-top:2px solid var(--ln)}
.dv--angle{clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}
.dv--angle-reverse{clip-path:polygon(0 0,100% 100%,100% 0,0 0)}
.dv--curve{border-radius:50% 50% 0 0/100% 100% 0 0}
.dv--arch{clip-path:ellipse(55% 100% at 50% 100%)}
.dv--wave{clip-path:path("M0,56 C240,0 480,112 720,56 C960,0 1200,112 1440,56 L1440,120 L0,120 Z")}
.dv--notch{clip-path:polygon(0 0,42% 0,50% 62%,58% 0,100% 0,100% 100%,0 100%)}
.dv--step{clip-path:polygon(0 100%,0 40%,50% 40%,50% 0,100% 0,100% 100%)}
.dv--torn{clip-path:polygon(0 40%,3% 0,7% 30%,12% 5%,18% 35%,24% 8%,30% 40%,36% 12%,
  42% 38%,48% 6%,54% 32%,60% 10%,66% 36%,72% 8%,78% 34%,84% 4%,90% 30%,96% 0,100% 40%,
  100% 100%,0 100%)}
.dv--overlap-card{height:0;position:relative}
/* ── grid / layout ── */
.grid{display:grid;gap:clamp(1.8rem,4vw,4rem);align-items:start}
/* min-width:0 stops a long word (e.g. a heading like "CONSTRUCTION") from expanding a
   grid item past its track and overlapping the next column */
.grid>*{min-width:0}
@media(min-width:900px){
  .grid--rail{grid-template-columns:var(--c)}
  .grid--split{grid-template-columns:var(--c)}
  .grid--flip .col{order:2}
  .grid--flip .col--media{order:1}
}
.rail h2{position:sticky;top:100px;overflow-wrap:break-word;hyphens:auto}
.col>*:first-child{margin-top:0}
.col--media{position:sticky;top:100px}
.col--media .fig{margin:0}
/* offset panel: prose in an indented elevated card with an accent spine */
.offset-panel{background:var(--card-bg);border-radius:var(--card-r);
  box-shadow:var(--shad-2);padding:clamp(1.6rem,3.4vw,2.8rem);
  border-left:5px solid var(--a);max-width:56rem;margin-left:clamp(0px,4vw,3.4rem)}
.g-dark .offset-panel{background:color-mix(in srgb,#000 18%,var(--p));
  box-shadow:0 14px 40px rgba(0,0,0,.32)}
.offset-panel>*:first-child{margin-top:0}
.offset-panel>*:last-child{margin-bottom:0}
/* tables break OUT wider than prose — one measure for everything is a document */
.breakout{margin:2rem calc(50% - 50vw) 0;padding:0 22px;max-width:100vw}
.breakout .tw{max-width:min(1320px,94vw);margin-inline:auto}
/* card rows */
.cards{list-style:none;padding:0;margin:1.8rem 0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards .card{background:var(--card-bg);border:var(--card-bdr);border-radius:var(--card-r);
  padding:26px 26px 24px;margin:0;font-size:.96rem;line-height:1.62;
  box-shadow:var(--shad-2);position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.cards .card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--a),color-mix(in srgb,var(--a) 30%,var(--p)))}
.cards .card:hover{transform:translateY(-4px);box-shadow:var(--shad-3)}
/* dark cards need light text/links even inside a light .depth-card (which forces ink) */
.g-dark .cards .card{background:color-mix(in srgb,#000 16%,var(--p));
  border-color:color-mix(in srgb,var(--onp) 20%,transparent);color:var(--onp)}
.g-dark .cards .card a{color:var(--onp);text-decoration-color:var(--a)}
.g-dark .cards .card a:hover{color:var(--a)}
.cards .card strong:first-child{display:block;margin-bottom:.55rem;
  font-family:'Public Sans';font-size:1.06rem;letter-spacing:-0.01em}
/* ── heading treatments ── */
/* Headings share the prose measure. Left unbounded a 56px h2 runs the full
   container while its paragraph stops at the text measure, so the heading reads
   as detached from the copy it introduces. */
.ht{margin-bottom:1.6rem;max-width:72ch}
.ht--eyebrow h2::before{content:"";display:block;width:44px;height:4px;
  background:linear-gradient(90deg,var(--a),color-mix(in srgb,var(--a) 30%,transparent));
  margin-bottom:.85rem;border-radius:2px}
.ht--numbered h2::before{content:var(--sn,"01");display:block;
  font-size:.8rem;letter-spacing:.18em;color:var(--pd);font-weight:700;
  font-family:ui-monospace,Consolas,monospace;margin-bottom:.55rem}
.ht--rule h2{padding-bottom:.7rem;border-bottom:3px solid var(--a);display:inline-block}
.ht--over h2{font-size:clamp(2.2rem,5.4vw,3.9rem);letter-spacing:-0.025em}
.ht--side{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.ht--side h2{grid-column:2}
.ht--side::before{content:"";width:5px;background:linear-gradient(180deg,var(--a),transparent);
  border-radius:3px;
  grid-row:1;margin-top:.3rem}
.ht--center{text-align:center;margin-inline:auto}
.ht--center h2{margin-inline:auto}
.ht--quote h2{font-style:italic;font-size:clamp(1.3rem,2.5vw,1.9rem)}
/* The accent is picked to be legible as a BACKGROUND (paired with --ona), not as
   text on --bg: it measured under 4.5:1 there on 23 of 28 sites. --pd carries the
   same brand tint and clears AA. On dark bands the accent is legible again. */
.ht--two-tone h2 span{color:var(--pd)}
.g-dark .ht--two-tone h2 span,.g-dark .ht--numbered h2::before{color:var(--a)}
.ht--stacked-caps h2{text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1rem,2vw,1.4rem)}
/* ── layered depth: one element crosses a band seam ── */
.depth-card{position:relative;z-index:2;margin-top:-3rem;
  background:var(--card-bg);border:var(--card-bdr);border-radius:var(--card-r);
  padding:2rem 2.4rem;box-shadow:0 8px 32px rgba(0,0,0,.14);color:var(--ink)}
/* the card is always a light surface, so keep dark text/links even inside a .g-dark section */
.depth-card a{color:var(--pd);text-decoration-color:var(--a)}
.depth-card a:hover{color:var(--a)}
/* ── sticky TOC ── */
/* top margin keeps the card off the hero it sits directly beneath */
.toc{background:var(--card-bg);border:1px solid var(--ln);border-radius:var(--card-r);
  padding:1.5rem 1.8rem 1.3rem;margin:clamp(2.2rem,4.5vw,3.6rem) 0 2.8rem;font-size:.88rem;
  box-shadow:var(--shad-2);border-top:4px solid var(--a)}
.toc strong{display:block;margin-bottom:.9rem;font-family:'Public Sans';font-weight:700;
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;opacity:.75}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px 26px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.toc li{margin:0}
.toc a{color:var(--ink);text-decoration:none;display:flex;gap:10px;align-items:baseline;
  padding:6px 8px;border-radius:6px;line-height:1.4}
.toc a:hover{background:color-mix(in srgb,var(--a) 8%,transparent);color:var(--pd)}
.toc__n{font-family:ui-monospace,Consolas,monospace;font-size:.72rem;color:var(--pd);
  font-weight:700;flex:0 0 auto}
/* ── last-updated stamp ── */
/* Sits under the breadcrumb, above the body. Quiet, but --ink at 72% mixed on
   --bg still clears AA on every palette, so it is readable rather than decorative. */
.upd{margin:.9rem 0 0;font-size:.8rem;letter-spacing:.02em;
  color:color-mix(in srgb,var(--ink) 72%,var(--bg))}
.upd time{font-weight:600}
/* ── tables ── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ln);
  border-radius:var(--card-r);margin:1.8rem 0;box-shadow:var(--shad-2);background:var(--card-bg)}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
.t th{background:var(--dark);color:var(--ond);font-weight:700;text-align:left;
  padding:13px 17px;white-space:nowrap;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase}
.t td{padding:12px 17px;border-bottom:1px solid var(--ln);vertical-align:top}
.t tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--p) 3%,transparent)}
.t tr:last-child td{border-bottom:0}
.t tr:hover td{background:color-mix(in srgb,var(--a) 7%,transparent)}
.t td:first-child{font-weight:600}
/* ── figures ── */
.fig{margin:2rem 0;position:relative;overflow:hidden;border-radius:var(--r-lg)}
.fig img{width:100%;height:auto;border-radius:var(--r-lg);display:block;
  box-shadow:var(--shad-2);filter:saturate(1.08) contrast(1.05) brightness(.98)}
/* one photographer, not eighteen: a consistent brand-primary wash ties the set together */
.fig::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:color-mix(in srgb,var(--p) 14%,transparent);mix-blend-mode:multiply}
.fig--hero img{aspect-ratio:16/9;object-fit:cover}
.fig--pool img{aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shad-2)}
.fig--pool{position:relative}
.fig--pool::after{content:"";position:absolute;inset:auto auto -10px -10px;width:56px;height:56px;
  border-left:4px solid var(--accent);border-bottom:4px solid var(--accent);
  border-radius:0 0 0 var(--r-lg);pointer-events:none}
/* branded plate — placeholder section image until real photography is sourced */
.fig--plate{margin:2rem 0}
.fig--plate svg{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--r-lg)}
figcaption{font-size:.84rem;color:color-mix(in srgb,var(--ink) 60%,transparent);
  margin-top:.7rem;padding-left:14px;border-left:3px solid var(--a);line-height:1.5}
/* ── breadcrumb ── */
.crumbbar{background:var(--bg);padding:1rem 0 1.25rem}
.crumb{font-size:.82rem;margin:0;opacity:.66;letter-spacing:.01em}.crumb a{color:inherit}
/* ── request-a-quote embed ── */
.quote-embed{padding:clamp(1.6rem,3.5vw,2.8rem) 0;background:var(--tint)}
.quote-embed__h{margin:0 0 1rem;font-family:'Public Sans';font-weight:700;letter-spacing:-0.01em;
  font-size:clamp(1.4rem,2.6vw,2rem)}
.quote-embed__box{position:relative;min-height:720px;border-radius:var(--r-lg);
  overflow:hidden;background:#fff;box-shadow:var(--shad-2)}
.quote-embed__frame{position:relative;z-index:1;display:block;width:100%;
  min-height:720px;border:0;background:transparent}
/* shimmer skeleton mirroring the form (labelled fields, City/State row, textarea, submit) */
.quote-embed__skel{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  gap:12px;padding:clamp(20px,4vw,30px);transition:opacity .4s ease}
.quote-embed__box.is-loaded .quote-embed__skel{opacity:0}
.sk-f{display:flex;flex-direction:column;gap:6px}
.sk-r{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sk-l,.sk-i,.sk-btn{border-radius:6px;
  background:linear-gradient(90deg,color-mix(in srgb,#111 9%,#fff) 25%,
    color-mix(in srgb,#111 4%,#fff) 37%,color-mix(in srgb,#111 9%,#fff) 63%);
  background-size:400% 100%;animation:sk 1.4s ease infinite}
.sk-l{height:10px;width:32%}
.sk-i{height:40px}
.sk-i--area{height:88px}
.sk-i--cb{height:14px;width:82%}
.sk-btn{height:44px;width:100%;margin-top:4px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* ── CTA band ── */
.cta-band{color:var(--ond);padding:clamp(3.4rem,7vw,5.6rem) 0;position:relative;
  overflow:hidden;background:linear-gradient(120deg,var(--dark) 0%,var(--pd) 55%,
  color-mix(in srgb,var(--a) 20%,var(--pd)) 100%)}
.cta-band__wm{position:absolute;right:-1%;bottom:-22%;font-family:'Public Sans';font-weight:800;
  font-size:clamp(12rem,26vw,22rem);line-height:1;opacity:.06;pointer-events:none;
  user-select:none}
.cta-band__in{display:grid;gap:2rem;align-items:center;position:relative;z-index:1}
@media(min-width:900px){.cta-band__in{grid-template-columns:1.5fr 1fr}
  .cta-band__cta{justify-content:flex-end}}
.cta-band h2{color:var(--ond);margin-top:0;
  font-size:clamp(1.9rem,3.4vw,2.6rem)}.cta-band p{max-width:56ch;margin-bottom:0}
/* :not(.btn) for the same reason as the hero rules — the band holds two real
   buttons, and this selector would otherwise repaint their labels --onp over a
   --btn-bg fill that expects --btn-txt. */
.cta-band a:not(.btn){color:var(--ond)}
/* ── footer ── */
footer.site{background:#fbfbfb;color:#1f1b19;padding:64px 0 30px;font-size:.92rem;
  position:relative;overflow:hidden;
  border-top:5px solid var(--a)}
.f-wm{position:absolute;left:-2%;bottom:-30%;font-family:'Public Sans';font-weight:800;
  font-size:clamp(14rem,26vw,24rem);line-height:1;opacity:.045;pointer-events:none;
  user-select:none;color:#1f1b19}
footer.site a{color:#1f1b19;opacity:.86;text-decoration:none}
footer.site a:hover{opacity:1;text-decoration:underline}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:38px;
  position:relative;z-index:1}
.fcols strong{display:block;margin-bottom:1rem;font-family:'Public Sans';letter-spacing:.12em;
  font-size:.76rem;text-transform:uppercase;opacity:.72}
.f-links{display:flex;flex-direction:column;gap:9px}
.f-brand p{max-width:34ch;line-height:1.65;opacity:.85;margin:1rem 0}
.f-tel a{display:inline-flex;align-items:center;font-weight:700;font-size:1.05rem}
/* <address> is italic by UA default, and nothing else in the footer is, so the
   one line of the NAP read as a styling mistake. */
.f-addr{font-style:normal;line-height:1.6;opacity:.85;margin:.5rem 0 0}
/* Only the bare <img class="flogo">. The chip variant puts .flogo on the wrapping
   span, whose image is already sized by .brand__chip img. */
img.flogo{height:46px;width:auto;max-width:100%}
.f-areas{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:.6rem;font-size:.85rem}
.f-areas--chips a{background:color-mix(in srgb,#1f1b19 12%,transparent);
  padding:5px 13px;border-radius:999px;border:1px solid color-mix(in srgb,#1f1b19 14%,transparent)}
.f-areas a{opacity:.75}.f-areas a:hover{opacity:1}
.f-legal{border-top:1px solid color-mix(in srgb,#1f1b19 20%,transparent);
  margin-top:44px;padding-top:18px;font-size:.8rem;opacity:.6;position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
.f-legal p{margin:0}
/* footer layout variants — every id must have a rule */
.ft--minimal .fcols{grid-template-columns:1fr 1fr}
.ft--centered .fcols{text-align:center;justify-items:center}
.ft--two-tier .fcols{padding-bottom:28px;
  border-bottom:1px solid color-mix(in srgb,#1f1b19 20%,transparent)}
.ft--contact-forward .f-brand{grid-column:1/-1;display:flex;gap:32px;align-items:flex-start}
.ft--areas-heavy .f-areas{column-count:3;display:block}
/* The multi-column areas list assumes plain text links. Chips are pills with
   padding and a border, and an inline pill straddling a column or line break is
   painted twice: "Broomfield," keeps the background and ", CO" spills outside it.
   Chips keep the flex row, and are made unbreakable so a long name cannot split
   whichever layout they land in. */
.ft--areas-heavy .f-areas--chips{column-count:initial;display:flex}
.f-areas--chips a{display:inline-block;white-space:nowrap}
.ft--four-col .fcols{grid-template-columns:repeat(4,1fr)}
.ft--three-col .fcols{grid-template-columns:repeat(3,1fr)}
.ft--brand-left-links-right .f-brand{grid-column:1/2}
.ft--cta-top{padding-top:0}
.ft--map-footer .f-brand{grid-column:1/-1}
/* footer theme variants — every id must have a rule */
.ft--dark footer.site{background:color-mix(in srgb,#000 30%,#629d5c)}
.ft--brand footer.site{background:#629d5c}
.ft--light footer.site{background:#f7f7f6;color:#1f1b19}
.ft--light footer.site a{color:#1f1b19}
.ft--surface footer.site{background:#fbfbfb;color:#1f1b19}
.ft--surface footer.site a{color:#1f1b19}
.ft--split footer.site{background:#629d5c}
/* ── phone sticky bar (mobile, recipe-driven) ── */
.sticky-call{display:none}
@media(max-width:640px){
  .sticky-call{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--a);color:var(--ona);padding:15px 22px;font-weight:700;
    justify-content:center;align-items:center;text-decoration:none;font-size:1.05rem;
    box-shadow:0 -6px 24px rgba(0,0,0,.22)}
}
/* ── nav: hamburger drawer + nested accordions, ≤900px ── */
@media(max-width:900px){
  .nt-btn{display:flex}
  .hd{flex-wrap:wrap}
  /* hamburger pinned to the right; brand shoves everything else across */
  .brand{margin-right:auto}
  .tel{order:1}
  .nt-btn{order:2;margin-left:12px}
  /* drawer capped to the viewport (minus the utility strip) and scrolls as a whole */
  nav.top{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:2px;margin:12px 0 4px;padding-top:12px;
    border-top:1px solid color-mix(in srgb,var(--onp) 18%,transparent);
    max-height:calc(100vh - 34px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--onp) 32%,transparent) transparent}
  nav.top::-webkit-scrollbar{width:6px}
  nav.top::-webkit-scrollbar-track{background:transparent}
  nav.top::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--onp) 30%,transparent);border-radius:999px}
  .nt-input:checked ~ nav.top{display:flex}
  nav.top > a{padding:13px 6px;text-transform:none;letter-spacing:0;font-weight:600;flex:0 0 auto}
  .navitem{flex:0 0 auto}
  .navitem summary{padding:13px 6px;text-transform:none;letter-spacing:0;
    justify-content:space-between;font-weight:600}
  /* panels are inline accordions here, on the dark drawer — reset the desktop glass/light look.
     Each expanded submenu scrolls INSIDE itself (own 45vh cap) so it never inflates the drawer
     or pushes About/Contact out of view. */
  .megamenu,.areamenu{display:none;position:static;box-shadow:none;border:0;border-radius:0;
    background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit;
    padding:2px 0 10px 12px;margin:0;min-width:0;max-width:none;width:auto;
    max-height:45vh;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--onp) 32%,transparent) transparent;
    opacity:1;visibility:visible;pointer-events:auto}
  .megamenu::-webkit-scrollbar,.areamenu::-webkit-scrollbar{width:6px}
  .megamenu::-webkit-scrollbar-thumb,.areamenu::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--onp) 30%,transparent);border-radius:999px}
  .megamenu::before,.areamenu::before{display:none}
  /* expand only on explicit tap/keyboard (.is-open) or the no-JS [open] fallback —
     not :hover, which sticks after a tap on touch devices */
  .navitem.is-open .megamenu,.navitem[open] .megamenu,
  .navitem.is-open .areamenu,.navitem[open] .areamenu{
    display:flex;flex-direction:column;gap:16px}
  .navitem.force-closed .megamenu,.navitem.force-closed .areamenu{display:none !important}
  .megamenu{grid-template-columns:none}
  .mm-featured{order:-1}
  /* dark drawer → light text; override (and out-specify) the desktop dark-ash/black palette.
     The featured link needs the full desktop selector to win, else #111 stays invisible here. */
  .navitem .megamenu a,.navitem .areamenu a,.mm-col strong,.navitem .am-all,
  .navitem .megamenu a.mm-featured{color:inherit}
  .mm-col strong{border-bottom-color:color-mix(in srgb,var(--onp) 22%,transparent)}
  .navitem .megamenu a:hover,.navitem .megamenu a:focus,.navitem .megamenu a:active,
  .navitem .areamenu a:hover,.navitem .areamenu a:focus,.navitem .areamenu a:active{color:var(--onp);
    background:color-mix(in srgb,var(--onp) 12%,transparent)}
  /* featured needs its full selector to beat the desktop mm-featured:hover (#111, invisible here) */
  .navitem .megamenu a.mm-featured:hover,.navitem .megamenu a.mm-featured:focus,
  .navitem .megamenu a.mm-featured:active{color:inherit;
    background:color-mix(in srgb,var(--onp) 12%,transparent)}
  .areamenu ul{column-count:1;max-height:none;overflow-y:visible;margin-top:8px}
  .mm-cats{display:block}
  .navitem .mm-col--wide ul{column-width:auto;column-count:1}
  .mm-col ul,.areamenu ul{gap:4px}
  .navitem a,.areamenu a{padding:9px 4px;display:block}
}
/* ── responsive ── */
@media(max-width:640px){
  body{font-size:16px}
  .util__in{justify-content:center;gap:10px;font-size:.72rem}
  .util span:first-child{display:none}
  .hd{gap:8px;padding:8px 12px}
  .tel{margin-left:auto}.tel__t{display:none}.tel .phg{margin-right:0}
  .hero__cta{flex-direction:column;align-items:stretch}.btn{text-align:center;justify-content:center}
  .hero__wm,.cta-band__wm,.f-wm{display:none}
  .offset-panel{margin-left:0;padding:1.4rem}
  .hero__media-accent{display:none}
  table.t{min-width:0;display:block}
  .t thead{display:none}
  .t tbody,.t tr,.t td{display:block;width:100%}
  .t tr{border-top:2px solid var(--ln);padding:8px 0}
  .t td{border:0;padding:6px 15px;display:flex;gap:12px}
  .t td::before{content:attr(data-l);font-weight:600;flex:0 0 42%;color:var(--pd);
    text-transform:uppercase;font-size:.78rem}
  .g-dark .t td::before{color:var(--a)}
  .tw{overflow:visible;border:0;background:transparent}
  .toc{display:none}
  .cta-band__cta{justify-content:flex-start}
  .grid--rail,.grid--split{grid-template-columns:1fr !important}
  .grid--flip .col,.grid--flip .col--media{order:0}
  .col--media{position:static}
  .rail h2{position:static}
  .breakout{margin:1.2rem 0;padding:0}
  .depth-card{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
main p::first-letter{font-size:3.2em;float:left;line-height:.8;margin:.06em .12em 0 0;font-family:'Public Sans';font-weight:700;color:var(--p)}

h1{text-transform:uppercase;letter-spacing:.04em}
h2,h3,h4{text-transform:none;letter-spacing:0}
.eyebrow,.kicker{text-transform:uppercase}

/* == design-token layer (Figma Desk1440/Tab768/Mobi320) ============ */
:root{
  --tk-side:20px;--tk-sec:40px;--tk-gap:30px;
  --tk-h1:40px;--tk-h1-lh:1.0;--tk-h2:32px;--tk-h2-lh:1.25;
  --tk-h3:28px;--tk-h3-lh:1.28;--tk-h4:24px;--tk-h4-lh:1.42;
  --tk-body:16px;--tk-body-lh:1.5;--tk-lead:18px;--tk-lead-lh:1.55;
  --tk-btn-pad:12px 16px;--tk-btn-fs:16px;--tk-btn-ls:0;--tk-btn-r:0;
  --tk-h-p:16px;--tk-p-p:16px;--tk-p-btn:24px;
  --card-r:12px;
}
@media(min-width:768px){:root{
  --tk-side:40px;--tk-sec:60px;--tk-gap:40px;
  --tk-h1:56px;--tk-h1-lh:1.21;--tk-h2:42px;--tk-h2-lh:1.19;
  --tk-h3:36px;--tk-h3-lh:1.22;--tk-h4:28px;--tk-h4-lh:1.43;
  --tk-body:18px;--tk-body-lh:1.55;--tk-lead:22px;--tk-lead-lh:1.5;
  --tk-btn-pad:12px 24px;--tk-btn-fs:18px;--tk-btn-ls:.5px;--tk-btn-r:999px;
  --tk-h-p:20px;--tk-p-p:20px;--tk-p-btn:30px;
  --card-r:16px;
}}
@media(min-width:1200px){:root{
  --tk-side:100px;--tk-sec:120px;--tk-gap:60px;
  --tk-h1:76px;--tk-h1-lh:1.1;--tk-h2:56px;--tk-h2-lh:1.21;
  --tk-h3:42px;--tk-h3-lh:1.33;--tk-h4:34px;--tk-h4-lh:1.24;
  --tk-body:20px;--tk-body-lh:1.5;--tk-lead:24px;--tk-lead-lh:1.5;
  --tk-btn-pad:15px 32px;--tk-btn-fs:20px;--tk-btn-ls:1.25px;--tk-btn-r:999px;
  --tk-h-p:24px;--tk-p-p:24px;--tk-p-btn:40px;
  --card-r:20px;
}}
body{font-size:var(--tk-body);line-height:var(--tk-body-lh)}
h1{font-size:var(--tk-h1);line-height:var(--tk-h1-lh)}
h2{font-size:var(--tk-h2);line-height:var(--tk-h2-lh)}
h3{font-size:var(--tk-h3);line-height:var(--tk-h3-lh)}
h4{font-size:var(--tk-h4);line-height:var(--tk-h4-lh)}
.lead{font-size:var(--tk-lead);line-height:var(--tk-lead-lh)}
.wrap,.hd{max-width:1440px;padding-left:var(--tk-side);padding-right:var(--tk-side)}
.sec{padding-top:calc(var(--tk-sec) * var(--dv));padding-bottom:calc(var(--tk-sec) * var(--dv))}
.hero{padding-top:calc(var(--tk-sec) * var(--dv));padding-bottom:calc(var(--tk-sec) * var(--dv))}
.grid{gap:var(--tk-gap)}
/* The big token headings don't fit the narrow side rail (they wrap to 4-6 lines),
   so stack rail sections: the H2 spans full width ABOVE the content, not beside it. */
.grid--rail{grid-template-columns:1fr}
.rail{position:static}
.rail h2,.rail h3{position:static;max-width:none}
.btn{padding:var(--tk-btn-pad);font-size:var(--tk-btn-fs);
  letter-spacing:var(--tk-btn-ls);border-radius:var(--tk-btn-r)}
.cta-band{padding-top:calc(var(--tk-sec) * var(--dv));padding-bottom:calc(var(--tk-sec) * var(--dv))}
/* Section rhythm comes ONLY from the section-padding token: collapse the
   recipe's decorative divider bands so every section gap is identical. */
.dv,.dv--straight{height:0;border:0;clip-path:none}
/* Text-stack rhythm: heading->p, p->p, p->button gaps from the token export. */
h1,h2,h3,h4{margin-bottom:var(--tk-h-p)}
h3{margin-top:calc(var(--tk-h-p) * 1.5)}
p{margin-bottom:var(--tk-p-p)}
p+.btn,p+.hero__cta,.hero__cta,p+.f-cta{margin-top:var(--tk-p-btn)}
.hero__cta .btn{margin-top:0}
/* Split-section media. The hero keeps the edge-to-edge fill: its copy is short
   and controlled, so stretching the photo to the copy height is safe there.
   Body split grids do NOT stretch. They used to, and with height:100% plus
   aspect-ratio:auto and no ceiling the photo's height was dictated by however
   much prose sat beside it - a 1200x900 image rendered 2307px tall next to a
   long section. The photo now keeps its own ratio and travels with the text via
   position:sticky, which is what the stretch was really trying to achieve.
   Mobile keeps the stacked layout's natural aspect ratio (base CSS). */
@media(min-width:900px){
  .hero__in{align-items:stretch}
  .hero__media,.hero__media .fig{height:100%}
  .hero__media img{height:100%;aspect-ratio:auto;object-fit:cover}

  .grid--split{align-items:start}
  .grid--split .col--media,.grid--split .col--media .fig{height:auto}
  .grid--split .col--media{position:sticky;top:110px}
  .grid--split .col--media .fig img{
    height:auto;aspect-ratio:4/3;object-fit:cover;
    max-height:min(72vh,620px);width:100%}
}
/* == end design-token layer ======================================== */

/* ============================================================
   mobile header call button hidden
   The header .tel pill stays visible when the nav collapses to the hamburger.
   Hidden below 900px so the burger button and brand share the row cleanly;
   users still reach the phone via the tap-to-call link in the utility strip
   and every /contact/ CTA.
   ============================================================ */
@media(max-width:900px){
  header.site .tel{display:none !important}
}

/* ============================================================
   hide bn on mobile
   The logo image already contains the brand name. Hiding the .bn text label at
   mobile widths removes the duplication; desktop keeps it, and the logo chip
   itself is untouched at every width.
   ============================================================ */
@media(max-width:640px){
  header.site .bn{display:none}
}