:root{
  --p:#856b35;--pd:#584723;--a:#d074cb;
  --ink:#191f1d;--bg:#f8f8f7;--sf:#fcfcfb;--ln:#e2e5dd;
  --onp:#ffffff;--ona:#191f1d;
  --tint:color-mix(in srgb,#856b35 6%,#f8f8f7);--r:12px;--r-lg:24px;--shad:none;
  --btn-bg:#d074cb;--btn-txt:#191f1d;
  --card-bg:#fcfcfb;--card-bdr:1px solid #e2e5dd;--card-r:24px;
  --inp-bdr:1.5px solid #e2e5dd;--inp-foc:#856b35;
  --tint2:color-mix(in srgb,#856b35 3%,#f8f8f7);
  --dark:color-mix(in srgb,#000 38%,#856b35);
  --ond:color-mix(in srgb,#fff 90%,#856b35);
  --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 'Mulish',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:'Titillium Web',Georgia,serif;font-weight:600;line-height:1.08;
  text-wrap:balance;letter-spacing:-0.01em;text-transform:capitalize;margin:0 0 .7rem}
h1{font-size:clamp(2.5rem,3.0vw,3.88rem)}
h2{font-size:clamp(1.7rem,1.88vw,2.31rem);margin-top:0;line-height:1.14}
h3{font-size:1.23rem;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}
.util a{color:var(--ond)}
.util a{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:'Titillium Web';font-weight:600;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:'Titillium Web';font-weight:600;letter-spacing:-0.01em;text-transform:uppercase;white-space:nowrap;line-height:1.05}
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:4px;
  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)}
.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:'Titillium Web';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;gap:0}
.areamenu ul li{break-inside:avoid;margin-bottom:0}
/* location pin before every service-area item */
.navitem .areamenu ul a{display:flex;align-items:center;gap:8px;padding:11px 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:4px;
  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{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18);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)}
.hero--dark,.hero--photo-dark{color:var(--ond);
  background:linear-gradient(128deg,var(--dark) 0%,var(--p) 58%,
  color-mix(in srgb,var(--a) 14%,var(--p)) 100%)}
.hero--dark a,.hero--photo-dark a{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(--p) 56%,
  color-mix(in srgb,var(--a) 16%,var(--p)) 100%)}
.hero--banner a{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(--p),color-mix(in srgb,var(--p) 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{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)}
.hero__wm{position:absolute;right:-2%;top:50%;transform:translateY(-52%);
  font-family:'Titillium Web';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:'Mulish';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}
  .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}
/* ── 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(--ond);
  background:linear-gradient(150deg,var(--dark) 0%,var(--p) 72%)}
.g-dark a{color:var(--ond);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:38px;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}
/* FAQ accordion — premium question/answer cards (native <details>, no JS) */
.faqs{display:flex;flex-direction:column;gap:12px;margin-top:1.6rem;max-width:60rem}
.faq{background:var(--card-bg);border:1px solid var(--ln);border-radius:var(--card-r);
  overflow:hidden;transition:border-color .18s,box-shadow .18s}
.faq[open]{border-color:color-mix(in srgb,var(--p) 42%,var(--ln));box-shadow:var(--shad-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:17px 22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;flex:1;font-size:1.04rem;line-height:1.4;color:var(--ink)}
.faq summary:hover{background:color-mix(in srgb,var(--p) 5%,transparent)}
.faq-ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;position:relative;
  background:color-mix(in srgb,var(--p) 12%,transparent);transition:background .2s}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;top:50%;left:50%;border-radius:2px;
  background:var(--p);transform:translate(-50%,-50%)}
.faq-ic::before{width:11px;height:2px}
.faq-ic::after{width:2px;height:11px;transition:transform .2s}
.faq[open] .faq-ic{background:var(--p)}
.faq[open] .faq-ic::before,.faq[open] .faq-ic::after{background:var(--onp)}
.faq[open] .faq-ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{padding:0 22px 18px;color:var(--ink)}
.faq-a>*:first-child{margin-top:0}.faq-a>*:last-child{margin-bottom:0}
.faq-a a{color:var(--p);text-decoration-color:color-mix(in srgb,var(--p) 40%,transparent)}
/* 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:'Titillium Web';font-size:1.06rem;letter-spacing:-0.01em}
/* ── heading treatments ── */
.ht{margin-bottom:1.6rem}
.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(--a);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}
.ht--center h2{margin-inline:auto}
.ht--quote h2{font-style:italic;font-size:clamp(1.3rem,2.5vw,1.9rem)}
.ht--two-tone h2 span{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 ── */
.toc{background:var(--card-bg);border:1px solid var(--ln);border-radius:var(--card-r);
  padding:1.5rem 1.8rem 1.3rem;margin:0 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:'Titillium Web';font-weight:600;
  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(--a);
  font-weight:700;flex:0 0 auto}
/* ── 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:'Titillium Web';font-weight:600;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:'Titillium Web';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}
.cta-band a:not(.btn){color:var(--ond)}
/* ── footer ── */
footer.site{background:color-mix(in srgb,#000 30%,#856b35);color:var(--ond);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:'Titillium Web';font-weight:800;
  font-size:clamp(14rem,26vw,24rem);line-height:1;opacity:.045;pointer-events:none;
  user-select:none;color:var(--ond)}
footer.site a{color:var(--ond);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;
  align-items:start;position:relative;z-index:1}
.fcols strong{display:block;margin-bottom:1rem;font-family:'Titillium Web';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}
.f-addr{margin:.1rem 0 .55rem;opacity:.82;font-size:.9rem;line-height:1.5;max-width:34ch}
.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,var(--ond) 12%,transparent);
  padding:5px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ond) 14%,transparent)}
.f-areas a{opacity:.75;white-space:nowrap}.f-areas a:hover{opacity:1}
.f-areas-band{margin-top:34px;padding-top:22px;position:relative;z-index:1;
  border-top:1px solid color-mix(in srgb,var(--ond) 15%,transparent)}
.f-areas-band strong{display:block;margin-bottom:.7rem;font-family:'Titillium Web';letter-spacing:.12em;
  font-size:.76rem;text-transform:uppercase;opacity:.72}
.f-areas-band .f-areas{margin-top:0}
.f-legal{border-top:1px solid color-mix(in srgb,var(--ond) 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:repeat(auto-fit,minmax(220px,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,var(--ond) 20%,transparent)}
.ft--contact-forward .f-brand{grid-column:1/-1;display:flex;gap:32px;align-items:flex-start}
.ft--areas-heavy .f-areas{gap:7px 10px}
.ft--four-col .fcols{grid-template-columns:repeat(3,minmax(0,1fr))}
.ft--three-col .fcols{grid-template-columns:repeat(3,minmax(0,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%,#856b35)}
.ft--brand footer.site{background:#856b35}
.ft--light footer.site{background:#f8f8f7;color:#191f1d}
.ft--light footer.site a{color:#191f1d}
.ft--surface footer.site{background:#fcfcfb;color:#191f1d}
.ft--surface footer.site a{color:#191f1d}
.ft--split footer.site{background:#856b35}
/* ── 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}
  /* call button is not in the top bar on mobile — it drops into the open hamburger drawer */
  .tel{display:none}
  .nt-btn{order:2;margin-left:12px}
  .nt-input:checked ~ .tel{display:inline-flex;order:4;width:100%;
    justify-content:center;margin:10px 0 4px}
  /* the drawer call button shows the full number, not just the phone icon */
  .nt-input:checked ~ .tel .tel__t{display:inline}
  .nt-input:checked ~ .tel .phg{margin-right:7px}
  /* 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}
  /* Some nav layouts (e.g. .nav--utility-two-row) set nav.top{order:0;width:auto} at a higher
     specificity than the bare nav.top above, which would leave the drawer as a narrow inline
     column and let flex-wrap scatter the brand + hamburger onto separate rows. Re-assert the
     drawer's order/width via .hd nav.top (same specificity, later in source) so it wins for
     every layout and the brand + X stay on the top row with the drawer full-width below. */
  .hd nav.top{order:3;width:100%;margin-left:0}
  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}
}


h1{text-transform:capitalize;letter-spacing:0}
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:36px;--tk-h1-lh:1.05;--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:48px;--tk-h1-lh:1.15;--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:60px;--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:18px;--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}
/* Hero media fills its band. Split-section media is a clean fixed-aspect image
   aligned to the top of the copy and sticky, so a much taller text column no longer
   stretches the photo to crop the whole height. Mobile keeps the stacked natural ratio. */
@media(min-width:900px){
  .hero__in{align-items:stretch}
  .hero__media{height:100%}
  .hero__media img{height:100%;aspect-ratio:auto;object-fit:cover}
  .grid--split{align-items:start}
  .grid--split .col--media{align-self:start;position:sticky;top:100px}
  .grid--split .col--media .fig,.grid--split .col--media .fig img{height:auto}
  .grid--split .col--media .fig img{aspect-ratio:4/3;object-fit:cover;max-height:560px}
}
/* == end design-token layer ======================================== */


/* ==================================================================
   FIX 1 — Hamburger menu (<=900px): opens as a FIXED overlay pinned
   directly below the header at the header's live on-screen position
   (--drawer-top, set by nav.js). It floats above the page (no layout
   push) and stays attached to the sticky navbar at the user's current
   scroll position — never jumping to the top of the page.
   ================================================================== */
@media(max-width:900px){
  .nt-input:checked ~ nav.top{
    position:fixed;
    top:var(--drawer-top,64px);
    left:0;
    right:0;
    margin:0;
    border-top:0;
    padding:10px clamp(20px,4vw,44px) 16px;
    max-height:calc(100vh - var(--drawer-top,64px));
    max-height:calc(100dvh - var(--drawer-top,64px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:var(--p);
    box-shadow:0 14px 30px rgba(8,12,20,.34);
    z-index:29;
  }
  /* match the overlay to light / transparent header themes */
  .nav--light .nt-input:checked ~ nav.top{background:var(--bg)}
  .nav--transparent .nt-input:checked ~ nav.top{background:var(--dark)}
}

/* ==================================================================
   FIX 2 — Mobile sticky "Call Now" CTA (<=640px). Injected by nav.js
   from the page's own tel: link (correct number per site, nothing
   hardcoded). Self-contained styling so it renders identically on
   every site: full-width, fixed to the bottom, mobile-only. Body gets
   bottom padding so the bar never covers footer content.
   ================================================================== */
.sticky-call{display:none}
@media(max-width:640px){
  .sticky-call{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    z-index:60;
    padding:15px 22px;
    background:var(--a);
    color:var(--ona);
    font-weight:700;
    font-size:1.05rem;
    line-height:1.2;
    text-decoration:none;
    box-shadow:0 -6px 24px rgba(0,0,0,.22);
  }
  .sticky-call .phg{margin-right:9px;flex:0 0 auto}
  body{padding-bottom:64px}
}


/* ==================================================================
   FIX 3 — Sticky "Call Now" hover/focus/active contrast (mobile).
   The global `a:hover{color:var(--a)}` was recolouring the button
   text to the accent — i.e. the same colour as its accent background,
   making it vanish. Pin the on-accent text colour in every state so
   contrast is preserved; brand colours are unchanged.
   ================================================================== */
.sticky-call,
.sticky-call:link,
.sticky-call:visited,
.sticky-call:hover,
.sticky-call:focus,
.sticky-call:active{
  color:var(--ona);
  background:var(--a);
  text-decoration:none;
}
.sticky-call:active{filter:brightness(.95)}

/* ==================================================================
   FIX 4 — Navbar row stability (<=900px).
   The header row (.hd) was allowed to wrap, so a long company name
   pushed the hamburger onto a second line and the row height changed
   when the menu opened. Force a single, fixed row: the brand name
   truncates with an ellipsis instead of wrapping, and the hamburger
   (and any header phone button) never leave the row. This keeps the
   navbar's dimensions and alignment identical whether the menu is
   open or closed.
   ================================================================== */
@media(max-width:900px){
  header.site .hd{flex-wrap:nowrap}
  .brand{min-width:0;flex:0 1 auto}
  .bn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nt-btn{flex:0 0 auto}
  header.site .hd .tel{flex:0 0 auto}
}


/* ==================================================================
   FIX 5 — Header call button must never appear in the navbar on
   tablet/mobile. On <=900px the header .tel is hidden from the navbar
   row and instead shown as an item inside the hamburger drawer (a copy
   is placed there by nav.js). On desktop the original stays in the
   navbar and the in-menu copy is hidden.
   ================================================================== */
.tel--in-menu{display:none}
@media(max-width:900px){
  /* remove the call button from the navbar row (keep the drawer copy) */
  header.site .hd > .tel{display:none}
  /* show the copy inside the opened hamburger menu, full width */
  .tel--in-menu{
    display:flex;
    justify-content:center;
    width:100%;
    order:1;
    margin:12px 0 2px;
  }
  /* always show the phone number text on the in-menu button */
  .tel--in-menu .tel__t{display:inline}
}


/* ==================================================================
   FIX 6a — Long company name wraps to (up to) two lines instead of
   being cut off with an ellipsis. The header row stays single-row
   (nowrap) so the hamburger never moves; only the brand text wraps,
   which just makes the row a little taller.
   ================================================================== */
@media(max-width:900px){
  .bn{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.18;
  }
}

/* ==================================================================
   FIX 6b — Give the hamburger drawer a background that is a little
   different from the navbar, so the open menu reads as a distinct
   panel instead of blending into the bar. Subtle per-theme shift.
   ================================================================== */
@media(max-width:900px){
  .nt-input:checked ~ nav.top{
    background:color-mix(in srgb,#000 14%,var(--p));
  }
  .nav--light .nt-input:checked ~ nav.top{
    background:color-mix(in srgb,#000 6%,var(--bg));
  }
  .nav--transparent .nt-input:checked ~ nav.top{
    background:color-mix(in srgb,#fff 9%,var(--dark));
  }
}


/* FIX 6a (correction) — override the higher-specificity `.brand .bn`
   rule so the company name actually wraps to two lines instead of
   staying on one line / being ellipsised. */
@media(max-width:900px){
  .brand .bn{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.18;
  }
}


/* ==================================================================
   FIX 7 — Remove the blank strip below the footer on mobile. The
   sticky "Call Now" clearance was added as body padding-bottom, which
   shows the light page background as a gap beneath the footer. Move
   the clearance INSIDE the footer instead, so the footer's own
   background fills the space and the fixed button overlays it cleanly.
   ================================================================== */
@media(max-width:640px){
  body{padding-bottom:0}
  footer.site{padding-bottom:86px}
}


/* ==================================================================
   FIX 8 — Light, readable hamburger drawer (<=900px). Some sites have
   a dark on-primary text colour (--onp), which on the previous dark
   drawer background produced dark-on-dark, invisible text. Make the
   open drawer a LIGHT panel with DARK text on every theme so items are
   always legible and the panel stays clearly distinct from the navbar.
   ================================================================== */
@media(max-width:900px){
  .nt-input:checked ~ nav.top,
  .nav--light .nt-input:checked ~ nav.top,
  .nav--transparent .nt-input:checked ~ nav.top{
    background:var(--sf);
    color:var(--ink);
    border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
    box-shadow:0 16px 32px rgba(8,12,20,.26);
  }
  /* all drawer text/links dark for contrast on the light panel */
  .nt-input:checked ~ nav.top a,
  .nt-input:checked ~ nav.top summary,
  .nt-input:checked ~ nav.top strong,
  .nt-input:checked ~ nav.top .am-all{
    color:var(--ink);
  }
  /* category-heading divider on light */
  .nt-input:checked ~ nav.top .mm-col strong{
    border-bottom-color:color-mix(in srgb,var(--ink) 14%,transparent);
  }
  /* hover/focus on light: subtle brand-accent wash, text stays dark */
  .nt-input:checked ~ nav.top a:hover,
  .nt-input:checked ~ nav.top a:focus,
  .nt-input:checked ~ nav.top summary:hover{
    background:color-mix(in srgb,var(--a) 16%,transparent);
    color:var(--ink);
  }
  /* keep the in-menu Call button on its accent colours */
  .tel--in-menu{background:var(--a);color:var(--ona)}
}


/* ==================================================================
   FIX 9 — Mobile hamburger polish.
   (a) The open panel fills the space from directly below the navbar
       (--drawer-top) to directly above the sticky Call Now button
       (--cta-h, 0 when the button is hidden). Content taller than that
       scrolls INSIDE the panel only.
   (b) Dropdown chevron reflects the OPEN state only on touch devices,
       never a stuck :hover; closed = down, open = up.
   (c) The open menu never overlaps the sticky navbar (z-index below it)
       or the Call Now button (which sits above the panel).
   ================================================================== */
@media(max-width:900px){
  .nt-input:checked ~ nav.top{
    top:var(--drawer-top,64px);
    bottom:var(--cta-h,0px);
    height:auto;
    max-height:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    z-index:29;                 /* below the sticky header (z-index 30) */
  }
}

/* Touch devices: drive the chevron + row highlight by open-state only,
   so nothing stays "stuck" after a tap closes the dropdown. */
@media (hover:none) and (max-width:900px){
  .navitem summary::after,
  .navitem:hover summary::after{transform:rotate(45deg) translateY(-2px)}      /* closed = down */
  .navitem summary:hover{background:transparent}
  .nt-input:checked ~ nav.top a:hover,
  .nt-input:checked ~ nav.top summary:hover{background:transparent}
  .navitem.is-open summary::after,
  .navitem.is-open:hover summary::after{transform:rotate(225deg) translateY(1px)} /* open = up */
  .navitem.is-open > summary{background:color-mix(in srgb,var(--ink) 7%,transparent)}
}


/* ==================================================================
   FIX 10 — Make the open-menu bottom clearance CSS-only (no JS timing
   dependency). On tablet the panel fills to the bottom; on mobile it
   stops above the fixed Call Now button. Overrides FIX 9's JS var.
   ================================================================== */
@media(max-width:900px){
  .nt-input:checked ~ nav.top{bottom:0}
}
@media(max-width:640px){
  .nt-input:checked ~ nav.top{bottom:calc(54px + env(safe-area-inset-bottom, 0px))}
}


/* ==================================================================
   FIX 11 — Dropdown chevron + row highlight must reflect the OPEN
   state ONLY, never a stuck :hover left over from a tap. FIX 9 gated
   this behind @media(hover:none), but some touch devices (e.g. Samsung)
   still report hover capability, so that block never applied and the
   chevron stayed "up" (and the row stayed highlighted) after closing.
   Apply it at every mobile/tablet width instead — at <=900px the nav is
   always the hamburger drawer and hover never opens a panel, so the
   chevron/highlight should track is-open only.
   ================================================================== */
@media(max-width:900px){
  /* chevron: closed = down, open = up; hover never rotates it */
  .navitem:hover summary::after{transform:rotate(45deg) translateY(-2px)}
  .navitem.is-open summary::after,
  .navitem.is-open:hover summary::after{transform:rotate(225deg) translateY(1px)}
  /* row highlight: only while actually open, never a stuck hover */
  .nt-input:checked ~ nav.top summary:hover{background:transparent}
  .navitem.is-open > summary{background:color-mix(in srgb,var(--ink) 8%,transparent)}
}