/* ═══════════════════════════════════════════════════════════════════════════
   COPPERFIELD PLUMBING & AIR — THE LIGHT REBUILD, 30 Sep 2026.
   Owner: "update all demo sites to look like real website for customer
   business", "light like the home page", "make the hero for all the pages
   excellent", "just make everything look real like it's an actual customer's
   website", "make sure all the menus and hamburger menus drop down correctly".

   ⭐ EVERY PAGE IS REBUILT, so the old dark "gauge cluster" sheet is gone from
   above this line. Everything below the 🧲 SELLING BAND marker is written by
   tools/demo-sellband.mjs and is kept byte for byte. ⛔ Hand CSS goes ABOVE it.
   ⭐ --accent MUST stay the first `--accent:#hex` in this file: demo-sellband
   derives the band's accent from it (it reads the first match).
   ⭐ Brand kept: Copperfield copper #A8461C (white label 5.9:1; as text on the
   cream 5.4:1) with a cool slate-teal for the cooling side.
   ⛔ NO BLOBS: every scrim and fade here is a LINEAR gradient from an edge.
      No radial-gradient, no ellipse, no glow. (memory: no-blobs-a-sheen-…)
   ⛔ Zero network requests: system fonts, inline SVG, local photos only.
   ⛔ section.hero stays on every hero: tools/shots-trade-sites.mjs crops from it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --accent:#A8461C;      /* copper — the brand. demo-sellband reads this line */
  --acc-d:#8A3814;       /* copper pressed / as small text on the tint */
  --acc-t:#F6E6DC;       /* copper tint */
  --copper:#A8461C;     /* the chat engine names --copper; same copper */
  --cool:#1D5A78;        /* cooling side — white label 7.4:1 */
  --cool-t:#E3EEF3;
  --bg:#F5F3EE;          /* cream ground */
  --bg2:#ECE7DE;         /* the tint band */
  --card:#fff;
  --ink:#13202B;         /* headings */
  --ink2:#3F4B55;        /* body, 8.9:1 on cream */
  --ink3:#56626C;        /* small print, 5.9:1 on cream */
  --line:#E2DCD1;
  --line2:#D2CABC;
  --navy:#0E1C27;
  --ok:#1F7A4D;          /* a reading in range */
  --warn:#A35A00;        /* a reading out of range (text, 4.9:1 on white) */
  --r:18px;--r-sm:12px;
  --sh:0 1px 2px rgba(19,32,43,.05),0 8px 28px rgba(19,32,43,.07);
  --sh-lg:0 2px 4px rgba(19,32,43,.05),0 22px 60px rgba(19,32,43,.13);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hd:72px;
}
*,*::before,*::after{box-sizing:border-box}
/* .chatbox and #bookmsg are toggled with the hidden attribute */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink2);font-family:var(--f);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
img{display:block}
a{color:var(--accent);text-decoration-color:rgba(168,70,28,.35);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:where(main,.hx-ft,.hx-drawer) :where(h1,h2,h3,h4){font-family:var(--fd);color:var(--ink);font-weight:700;
  margin:0 0 .45em;overflow-wrap:break-word;letter-spacing:-.012em;line-height:1.2}
:where(main) :where(h1){font-size:clamp(38px,5.4vw,66px);line-height:1.04;letter-spacing:-.032em}
:where(main) :where(h2){font-size:clamp(29px,3.4vw,44px);line-height:1.08;letter-spacing:-.026em}
:where(main) :where(h3){font-size:clamp(19px,1.6vw,21px);line-height:1.25}
:where(main) :where(p){margin:0 0 1em}
:where(main) :where(ul,ol){padding-left:1.1em}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hx-skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}
.hx-skip:focus{top:10px}
.hx-w{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.hx-s{padding:clamp(64px,8vw,108px) 0}
.hx-s--tint{background:var(--bg2)}
.hx-s--white{background:#fff}
.hx-s--tight{padding-top:clamp(40px,5vw,64px)}
.hx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.hx-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.hx-s--tint .hx-eyebrow,.hx-s--tint .hx-link,.hx-s--tint .hx-card__more{color:var(--acc-d)}
.hx-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink2);max-width:62ch}
.hx-head{max-width:780px;margin:0 0 clamp(32px,4vw,52px)}
.hx-head--c{margin-inline:auto;text-align:center}
.hx-head--c .hx-eyebrow{justify-content:center}
.hx-head--c .hx-lead{margin-inline:auto}
.hx-head--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hx-head--row>div{max-width:720px}

/* ---------- buttons ---------- */
.hx-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:14px 24px;border-radius:999px;background:var(--accent);color:#fff !important;
  font:650 16px/1.2 var(--f);text-decoration:none !important;border:1.5px solid var(--accent);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px rgba(168,70,28,.22);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;cursor:pointer;text-align:center}
.hx-b:hover{background:var(--acc-d);border-color:var(--acc-d)}
.hx-b svg{width:18px;height:18px;flex:0 0 auto}
.hx-b--ghost{background:transparent;color:var(--ink) !important;border-color:var(--line2);box-shadow:none}
.hx-b--ghost:hover{background:#fff;border-color:var(--ink)}
.hx-b--light{background:rgba(9,18,26,.35);color:#fff !important;border-color:rgba(255,255,255,.75);box-shadow:none}
.hx-b--light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.hx-b--cool{background:var(--cool);border-color:var(--cool);box-shadow:0 8px 22px rgba(29,90,120,.22)}
.hx-b--cool:hover{background:#15465e;border-color:#15465e}
@media (min-width:0px){ .hx-b:hover{transform:translateY(-1px)} }
.hx-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hx-link{font-weight:650;text-decoration:none !important;display:inline-flex;gap:6px;align-items:center}
.hx-link::after{content:"\2192";transition:transform .18s ease}
.hx-link:hover::after{transform:translateX(3px)}

/* ---------- demo strip + utility bar ---------- */
.utilbar{background:var(--navy);color:#dfe6ee;font-size:13px;position:relative;z-index:61}
.utilbar__in{max-width:1240px;margin:0 auto;padding:7px clamp(16px,4vw,40px);display:flex;
  justify-content:space-between;align-items:center;gap:6px 16px;flex-wrap:wrap}
.utilbar__hours{margin:0;color:#dfe6ee}
.utilbar__hours a{color:#fff;font-weight:600;text-decoration:none}
.demostrip{display:inline-flex;gap:8px;align-items:center;color:#dfe6ee;font-size:13px;text-decoration:none;line-height:1.4}
.demostrip b{color:#fff}
.demostrip:hover b{text-decoration:underline}
.demostrip__dot{width:8px;height:8px;border-radius:50%;background:#5fd0c6;flex:0 0 auto}
/* ⛔ the disclosure is never trimmed on a phone */
.utilbar__demotail{display:inline}
@media (max-width:820px){ .utilbar__hours{display:none} }
/* 🔴 INSIDE OUR OWN FRAME THE BANNER IS DUPLICATE — 11 Sep 2026 (owner).
   botsonstaff.com prints its own disclosure under the frame. ⚠️ Fails in the
   honest direction: with JavaScript off nothing is hidden. A STANDALONE page
   keeps the strip. ⛔ If the note under the frame is removed, delete this rule. */
html[data-embedded] .demostrip{display:none !important}

/* ═══ 🧭 HEADER + MEGA MENU — 30 Sep 2026 ══════════════════════════════════
   Owner: "make sure all the menus and hamburger menus drop down correctly and
   are also done as best as possible, if we can make mega do so."
   Desktop (≥1024): Services is a full-width mega panel, Company a dropdown.
   Opens on hover (150ms close delay), click and keyboard; Esc closes and
   returns focus; outside click closes; one open at a time.
   Measured: with the phone the row needs 1052px, so the phone number hides
   below 1240 and the row then fits at 1024; the hamburger runs below 1024.
   ⛔ Without JS the panels still open on :focus-within / :hover, and the
   hamburger is a link to #hx-menu, which opens the drawer with :target. */
.hx-hd{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line)}
html[data-scrolled] .hx-hd{box-shadow:0 6px 24px rgba(19,32,43,.08)}
.hx-hd__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px);min-height:var(--hd);
  display:flex;align-items:center;gap:18px}
.hx-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink) !important;text-decoration:none !important;white-space:nowrap;flex:0 0 auto}
.hx-brand .nav__mark{width:34px;height:34px;color:var(--accent);flex:0 0 auto}
.hx-brand__t{display:flex;flex-direction:column;line-height:1}
.hx-brand__t b{font:760 20px/1.05 var(--fd);letter-spacing:-.02em}
.hx-brand__t small{font:600 11.5px/1.3 var(--f);letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
.hx-nav{margin-left:auto}
.hx-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.hx-nav__list>li{margin:0;position:static}
.hx-nav__list>li.hx-dd--sm{position:relative}
.hx-nav__a,.hx-dd__t{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 13px;border-radius:10px;
  color:var(--ink) !important;text-decoration:none !important;font:600 15.5px/1.2 var(--f);background:none;border:0;cursor:pointer;white-space:nowrap}
.hx-nav__a:hover,.hx-dd__t:hover,.hx-dd.is-open>.hx-dd__t{background:var(--bg)}
.hx-nav__a[aria-current],.hx-dd__t.is-current{box-shadow:inset 0 -2px 0 var(--accent);border-radius:10px 10px 0 0}
.hx-dd__t i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;opacity:.7}
.hx-dd.is-open>.hx-dd__t i{transform:translateY(1px) rotate(225deg)}
.hx-tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink) !important;text-decoration:none !important;white-space:nowrap;font-size:15.5px}
.hx-tel svg{width:18px;height:18px;color:var(--accent)}
.hx-hd .hx-b{min-height:46px;padding:10px 20px;font-size:15.5px;box-shadow:none;white-space:nowrap}
/* the panels */
.hx-mm,.hx-drop{position:absolute;z-index:75;visibility:hidden;opacity:0;pointer-events:none;
  transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.hx-mm{left:0;right:0;top:100%;padding:0 clamp(16px,4vw,40px)}
.hx-mm__in{max-width:1160px;margin:10px auto 0;background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 30px 80px rgba(19,32,43,.20),0 2px 6px rgba(19,32,43,.06);
  display:grid;grid-template-columns:1fr 1fr 300px;gap:0;overflow:hidden}
.hx-mm__col{padding:26px 22px 22px}
.hx-mm__col+.hx-mm__col{border-left:1px solid var(--line)}
.hx-mm__h{display:flex;align-items:center;gap:8px;font:700 12.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px 10px}
.hx-mm__h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cool)}
.hx-mm__col--pl .hx-mm__h::before{background:var(--accent)}
.hx-mm ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hx-mm li{margin:0}
.hx-mm__item{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:10px;border-radius:14px;
  text-decoration:none !important;color:var(--ink2) !important}
.hx-mm__item:hover,.hx-mm__item:focus-visible{background:var(--bg)}
.hx-mm__item[aria-current]{background:var(--acc-t)}
.hx-mm__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--cool-t);color:var(--cool)}
.hx-mm__col--pl .hx-mm__ic{background:var(--acc-t);color:var(--accent)}
.hx-mm__ic svg{width:22px;height:22px}
.hx-mm__item b{display:block;color:var(--ink);font:650 15.5px/1.25 var(--f)}
.hx-mm__item small{display:block;font-size:13.5px;line-height:1.4;color:var(--ink3);margin-top:2px}
.hx-mm__side{grid-column:3;grid-row:1 / 3;background:var(--navy);color:#e6edf2;padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.hx-mm__side b{font:700 19px/1.25 var(--fd);color:#fff;letter-spacing:-.01em}
.hx-mm__side p{margin:0;font-size:14.5px;line-height:1.5;color:#cfd9e1}
.hx-mm__side .hx-b{width:100%;min-height:48px}
.hx-mm__tel{color:#fff !important;font-weight:700;text-decoration:none !important;display:flex;align-items:center;gap:8px;font-size:16px}
.hx-mm__tel svg{width:18px;height:18px;color:#f2b08f}
.hx-mm__all{grid-column:1 / 3;border-top:1px solid var(--line);padding:14px 32px;display:flex;justify-content:space-between;gap:16px;align-items:center;background:#faf8f4;font-size:14.5px}
.hx-mm__all span{color:var(--ink3)}
.hx-drop{left:0;top:calc(100% + 6px);min-width:260px;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px rgba(19,32,43,.18);padding:10px}
.hx-drop ul{list-style:none;margin:0;padding:0}
.hx-drop li{margin:0}
.hx-drop a{display:block;padding:11px 14px;border-radius:12px;color:var(--ink) !important;text-decoration:none !important;font-weight:600;font-size:15px}
.hx-drop a small{display:block;font-weight:400;color:var(--ink3);font-size:13px;margin-top:1px}
.hx-drop a:hover,.hx-drop a:focus-visible{background:var(--bg)}
.hx-drop a[aria-current]{background:var(--acc-t)}
.hx-dd.is-open>.hx-mm,.hx-dd.is-open>.hx-drop{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity .16s ease,transform .16s ease,visibility 0s}
/* no JS: the panel opens while the trigger or anything inside it has focus, or on hover */
html:not(.js) .hx-dd:focus-within>.hx-mm,html:not(.js) .hx-dd:focus-within>.hx-drop,
html:not(.js) .hx-dd:hover>.hx-mm,html:not(.js) .hx-dd:hover>.hx-drop{visibility:visible;opacity:1;pointer-events:auto;transform:none}
@media (prefers-reduced-motion:reduce) and (max-width:0px){ .hx-mm,.hx-drop,.hx-drawer__p,.hx-drawer__bg{transition:none !important} }
/* the hamburger (hidden on desktop) */
.hx-burger{display:none;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 12px;border:1px solid var(--line2);border-radius:999px;
  color:var(--ink) !important;text-decoration:none !important;font:650 15px/1 var(--f);background:#fff;cursor:pointer}
.hx-burger__i{position:relative;width:18px;height:14px;display:block}
.hx-burger__i i,.hx-burger__i::before,.hx-burger__i::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .18s ease}
.hx-burger__i::before{top:0}.hx-burger__i i{top:6px}.hx-burger__i::after{top:12px}
.hx-burger[aria-expanded="true"] .hx-burger__i::before{transform:translateY(6px) rotate(45deg)}
.hx-burger[aria-expanded="true"] .hx-burger__i i{opacity:0}
.hx-burger[aria-expanded="true"] .hx-burger__i::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1239px){ .hx-hd .hx-tel{display:none} }
@media (max-width:1023px){
  :root{--hd:64px}
  .hx-nav,.hx-hd .hx-tel{display:none}
  .hx-burger{display:inline-flex;margin-left:auto}
  .hx-hd__in{gap:10px}
}
@media (max-width:560px){ .hx-hd .hx-hd__cta{display:none} .hx-brand__t b{font-size:18.5px} .hx-brand .nav__mark{width:30px;height:30px} }
@media (max-width:360px){ .hx-burger__l{display:none} .hx-burger{padding:8px 12px} }

/* the slide-in drawer (<1024). Full height, from the LEFT, so the hamburger on
   the right stays in view behind the backdrop and can be seen turning into an X. */
.hx-drawer{position:fixed;inset:0;z-index:95;visibility:hidden;pointer-events:none}
.hx-drawer__bg{position:absolute;inset:0;background:rgba(9,18,26,.52);opacity:0;transition:opacity .22s ease}
.hx-drawer__p{position:absolute;top:0;bottom:0;left:0;width:min(88vw,400px);background:#fff;display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);box-shadow:20px 0 60px rgba(9,18,26,.25)}
.hx-drawer.is-open,.hx-drawer:target{visibility:visible;pointer-events:auto}
.hx-drawer.is-open .hx-drawer__bg,.hx-drawer:target .hx-drawer__bg{opacity:1}
.hx-drawer.is-open .hx-drawer__p,.hx-drawer:target .hx-drawer__p{transform:none}
.hx-drawer__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 12px 20px;border-bottom:1px solid var(--line);min-height:64px}
.hx-drawer__x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:#fff;color:var(--ink) !important;cursor:pointer;text-decoration:none !important}
.hx-drawer__x svg{width:20px;height:20px}
.hx-drawer__bd{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:8px 12px 16px}
.hx-drawer__bd>ul{list-style:none;margin:0;padding:0}
.hx-drawer__bd li{margin:0}
.hx-drawer__a,.hx-acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:12px 10px;
  border-bottom:1px solid var(--line);color:var(--ink) !important;text-decoration:none !important;font:650 17px/1.3 var(--f);cursor:pointer;list-style:none}
.hx-drawer__a[aria-current]{color:var(--accent) !important}
.hx-acc>summary::-webkit-details-marker{display:none}
.hx-acc>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .2s ease}
.hx-acc[open]>summary::after{transform:rotate(225deg);margin-bottom:-4px}
.hx-acc ul{list-style:none;margin:0;padding:6px 0 10px}
.hx-acc__g{font:700 12px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:12px 10px 6px}
.hx-acc a{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 10px;border-radius:12px;color:var(--ink2) !important;text-decoration:none !important;font-size:16px}
.hx-acc a:hover{background:var(--bg)}
.hx-acc a[aria-current]{background:var(--acc-t);color:var(--ink) !important}
.hx-acc a .hx-mm__ic{width:36px;height:36px;border-radius:10px}
.hx-acc a .hx-mm__ic svg{width:19px;height:19px}
.hx-acc--pl .hx-mm__ic{background:var(--acc-t);color:var(--accent)}
.hx-drawer__ft{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:grid;gap:10px;background:#faf8f4}
.hx-drawer__ft .hx-b{width:100%}
html.hx-lock,html.hx-lock body{overflow:hidden}
@media (min-width:1024px){ .hx-drawer{display:none} }

/* ---------- hero (photo) ---------- */
.hero.hx-hero{position:relative;background:var(--navy);overflow:hidden;min-height:clamp(600px,80vh,760px);
  display:flex;align-items:center;isolation:isolate;padding:0;margin:0}
.hx-hero__img{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hx-hero__img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% 50%)}
@media (min-width:0px){
  .hx-hero__img img{animation:hxpush 24s cubic-bezier(.2,.6,.3,1) both;transform-origin:70% 60%}
}
@keyframes hxpush{from{transform:scale(1)}to{transform:scale(1.06)}}
/* ⛔ edge-anchored LINEAR fades. Never a radial or an ellipse behind the type. */
.hx-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,17,24,.92) 0%,rgba(8,17,24,.85) 32%,rgba(8,17,24,.55) 52%,rgba(8,17,24,.12) 70%,rgba(8,17,24,0) 82%),
             linear-gradient(0deg,rgba(8,17,24,.55) 0%,rgba(8,17,24,0) 32%)}
.hx-hero__in{width:100%;max-width:1240px;margin:0 auto;padding:clamp(64px,8vw,112px) clamp(16px,4vw,40px) clamp(112px,11vw,150px)}
.hx-hero__copy{max-width:640px}
.hx-hero h1{color:#fff;margin:0 0 20px}
.hx-hero--page h1{font-size:clamp(36px,4.8vw,58px)}
.hx-hero h1 .hl{color:#FFC9AE;font-style:normal}
.hx-hero__sub{color:#e9eef3;font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:56ch;margin:0 0 28px}
.hx-hero .hx-eyebrow{color:#FFC9AE}
.hx-chips{list-style:none;padding:0 !important;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.hx-chips li{margin:0;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;
  background:rgba(8,17,24,.58);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:14.5px;font-weight:550}
.hx-chips svg{width:18px;height:18px;color:#FFC9AE;flex:0 0 auto}
.hx-rating{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#fff;font-size:15px}
.hx-stars{display:inline-flex;gap:2px;color:#F5B942}
.hx-stars svg{width:18px;height:18px}
.hx-rating b{font-weight:700}
.hx-hero--page{min-height:clamp(500px,64vh,620px)}
/* measured 30 Sep (contrast.mjs): the home subhead read 3.07:1 at 1180 and
   3.44:1 at 1280 over the bright window, so every hero takes the deeper fade. */
@media (min-width:1101px){
  .hx-hero__scrim{background:linear-gradient(90deg,rgba(8,17,24,.93) 0%,rgba(8,17,24,.87) 40%,rgba(8,17,24,.62) 56%,rgba(8,17,24,.18) 74%,rgba(8,17,24,0) 88%),
    linear-gradient(0deg,rgba(8,17,24,.55) 0%,rgba(8,17,24,0) 30%)}
}
.hx-crumbs{font-size:14px;color:#dfe6ee;margin:0 0 14px}
.hx-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.hx-crumbs li{margin:0;display:inline-flex;gap:8px;align-items:center}
.hx-crumbs li+li::before{content:"/";opacity:.6}
.hx-crumbs a{color:#fff !important;text-decoration:none}
.hx-crumbs a:hover{text-decoration:underline}
/* ≤1100: the photo becomes a plate and the words sit below it on navy, so the
   photo is SEEN, not buried, and every glyph sits on a solid ground. */
@media (max-width:1100px){
  .hero.hx-hero{min-height:0;display:block}
  .hx-hero__img{position:relative;inset:auto;z-index:0;aspect-ratio:21/9}
  .hx-hero__scrim{inset:auto;top:0;left:0;right:0;aspect-ratio:21/9;z-index:0;
    background:linear-gradient(180deg,rgba(14,28,39,0) 60%,rgba(14,28,39,.78) 88%,#0E1C27 100%)}
  .hx-hero__in{position:relative;z-index:1;margin-top:-8px;padding-top:6px;padding-bottom:96px}
  .hx-hero__copy{max-width:720px}
}
@media (max-width:820px){ .hx-hero__img,.hx-hero__scrim{aspect-ratio:16/10} }
@media (max-width:560px){ .hx-hero__img,.hx-hero__scrim{aspect-ratio:4/3} .hx-hero .hx-b{flex:1 1 100%} }

/* ---------- promise row: the white card on the hero's edge (the offer strip) ---------- */
.offerbar.hx-promise{position:relative;z-index:3;margin:-64px auto 0;max-width:1240px;padding:0 clamp(16px,4vw,40px)}
.hx-promise__card{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);display:grid;grid-template-columns:repeat(4,1fr)}
.hx-promise__i{padding:26px 24px;border-left:1px solid var(--line)}
.hx-promise__i:first-child{border-left:0}
.hx-promise__i svg{width:28px;height:28px;color:var(--accent);margin-bottom:12px;display:block}
.hx-promise__i h3{font-size:17px;margin:0 0 6px}
.hx-promise__i p{font-size:15px;line-height:1.55;margin:0;color:var(--ink2)}
@media (max-width:980px){ .hx-promise__card{grid-template-columns:1fr 1fr}
  .hx-promise__i:nth-child(3){border-left:0}
  .hx-promise__i:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:560px){ .offerbar.hx-promise{margin-top:-40px}
  .hx-promise__card{grid-template-columns:1fr}
  .hx-promise__i{border-left:0;border-top:1px solid var(--line);padding:18px 18px;display:grid;grid-template-columns:36px 1fr;column-gap:12px}
  .hx-promise__i:first-child{border-top:0}
  .hx-promise__i svg{grid-row:span 2;margin:2px 0 0} }

/* ---------- two doors ---------- */
.hx-doors{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hx-door{position:relative;border-radius:24px;overflow:hidden;min-height:520px;display:flex;align-items:flex-end;isolation:isolate;box-shadow:var(--sh)}
.hx-door>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.hx-door:hover>img{transform:scale(1.03)}
.hx-door::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,17,24,.95) 0%,rgba(8,17,24,.86) 42%,rgba(8,17,24,.35) 68%,rgba(8,17,24,0) 86%)}
.hx-door__b{padding:30px;color:#e9eef3;width:100%}
.hx-door__tag{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:var(--cool);color:#fff;margin:0 0 14px}
.hx-door--pl .hx-door__tag{background:var(--accent)}
.hx-door h3{color:#fff;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;margin:0 0 8px}
.hx-door p{color:#dfe6ee;margin:0 0 18px;max-width:44ch}
.hx-door ul{list-style:none;padding:0 !important;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hx-door li{margin:0}
.hx-door li a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);color:#fff !important;text-decoration:none !important;font-weight:600;font-size:15px}
.hx-door li a::after{content:"\2192";opacity:.8}
.hx-door li a:hover{background:rgba(255,255,255,.2)}
@media (max-width:900px){ .hx-doors{grid-template-columns:1fr} .hx-door{min-height:480px} }
@media (max-width:420px){ .hx-door ul{grid-template-columns:1fr} .hx-door__b{padding:22px} }

/* ---------- symptom cards ---------- */
.hx-sym{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hx-sym a{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh);
  text-decoration:none !important;color:var(--ink2) !important;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hx-sym a:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--line)}
.hx-sym__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--cool-t);color:var(--cool);margin-bottom:6px}
.hx-sym__ic--pl{background:var(--acc-t);color:var(--accent)}
.hx-sym__ic svg{width:24px;height:24px}
.hx-sym b{font:650 17.5px/1.3 var(--fd);color:var(--ink)}
.hx-sym span{font-size:15px;line-height:1.5}
.hx-sym em{margin-top:auto;padding-top:6px;font-style:normal;font-weight:650;font-size:14.5px;color:var(--accent)}
.hx-s--tint .hx-sym em{color:var(--acc-d)}
@media (max-width:1100px){ .hx-sym{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .hx-sym{grid-template-columns:1fr} .hx-sym a{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:18px}
  .hx-sym__ic{margin:0} .hx-sym b{flex:1 1 60%} .hx-sym em{flex:1 1 100%} }

/* ---------- the numbers (signature motion: "benchmark") ---------- */
.hx-num{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,64px);align-items:center}
.hx-meter{background:var(--navy);color:#e6edf2;border-radius:26px;padding:clamp(26px,3vw,40px);box-shadow:var(--sh-lg)}
.hx-meter__k{font:700 12.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:#9fb3c2;margin:0 0 14px}
.hx-meter__big{display:flex;align-items:baseline;gap:6px;font:800 clamp(88px,11vw,140px)/.9 var(--fd);letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;margin:0 0 6px}
.hx-meter__big small{font-size:.32em;letter-spacing:0;color:#cfd9e1;font-weight:700}
.hx-meter__state{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;padding:7px 12px;border-radius:999px;background:#3a2a10;color:#FFCF8A}
.hx-meter[data-state="ok"] .hx-meter__state{background:#123a29;color:#9CE6BF}
.hx-meter__bar{position:relative;height:10px;border-radius:6px;background:#23384a;margin:26px 0 8px;overflow:hidden}
.hx-meter__band{position:absolute;top:0;bottom:0;left:40%;width:30%;background:#2f6b52}
.hx-meter__pin{position:absolute;top:-4px;width:4px;height:18px;border-radius:2px;background:#FFCF8A;left:20%;transition:left .9s cubic-bezier(.2,.8,.2,1),background .3s ease}
.hx-meter[data-state="ok"] .hx-meter__pin{left:52%;background:#9CE6BF}
.hx-meter__scale{display:flex;justify-content:space-between;font-size:12.5px;color:#9fb3c2}
.hx-meter__rows{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.hx-meter__rows div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px}
.hx-meter__rows span{display:block;font-size:12.5px;color:#9fb3c2}
.hx-meter__rows b{font:700 20px/1.2 var(--fd);color:#fff;font-variant-numeric:tabular-nums}
.hx-meter__rows b.is-out{color:#FFCF8A}.hx-meter__rows b.is-in{color:#9CE6BF}
.hx-cards3{display:grid;gap:14px}
.hx-cards3>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:22px 24px;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
.hx-cards3 .hx-sym__ic{margin:0}
.hx-cards3 h3{font-size:18.5px;margin:0 0 4px}
.hx-cards3 p{margin:0;font-size:15.5px}
@media (max-width:900px){ .hx-num{grid-template-columns:1fr} }
@media (max-width:420px){ .hx-meter__rows{grid-template-columns:1fr} .hx-cards3>div{grid-template-columns:1fr} }

/* ---------- service cards ---------- */
.hx-grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.hx-grid--3{grid-template-columns:repeat(3,1fr)}
.hx-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;
  text-decoration:none !important;color:var(--ink2) !important;transition:transform .22s ease,box-shadow .22s ease;min-width:0}
a.hx-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.hx-card__ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg2);position:relative}
.hx-card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.hx-card:hover .hx-card__ph img{transform:scale(1.03)}
.hx-card__tag{position:absolute;left:12px;top:12px;font:700 11.5px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:#fff;color:var(--cool)}
.hx-card__tag--pl{color:var(--accent)}
.hx-card__b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.hx-card__b h3{margin:0;font-size:19px}
.hx-card__b p{margin:0;font-size:15.5px;line-height:1.55}
.hx-card__more{margin-top:auto;padding-top:8px;font-weight:650;color:var(--accent);font-size:15px}
.hx-card__more::after{content:" \2192"}
@media (max-width:1100px){ .hx-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){ .hx-grid--3{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .hx-grid,.hx-grid--3{grid-template-columns:1fr} }
.hx-more{margin-top:32px;display:flex;justify-content:center}
.hx-sub{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:clamp(22px,2vw,26px)}
.hx-sub::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--cool)}
.hx-sub--pl::before{background:var(--accent)}
.hx-group+.hx-group{margin-top:48px}

/* ---------- splits ---------- */
.hx-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,72px);align-items:center}
.hx-split--r{grid-template-columns:7fr 5fr}
.hx-split--even{grid-template-columns:1fr 1fr}
.hx-split>*{min-width:0}
.hx-split__ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin:0;position:relative}
.hx-split__ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.hx-split__ph--wide img{aspect-ratio:4/3}
.hx-split__ph figcaption{position:absolute;left:14px;bottom:14px;right:14px;background:rgba(255,255,255,.94);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--ink);line-height:1.4;box-shadow:var(--sh)}
.hx-split__ph figcaption b{display:block}
.hx-ticks{list-style:none;padding:0 !important;margin:0 0 28px;display:grid;gap:14px}
.hx-ticks li{margin:0;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;color:var(--ink2)}
.hx-ticks li::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--acc-t) no-repeat center/14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A3814' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.hx-ticks b{color:var(--ink)}
.hx-note{background:#fff;border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;margin:0 0 28px;font-size:15.5px;color:var(--ink2)}
.hx-note b{color:var(--ink)}
@media (max-width:900px){ .hx-split,.hx-split--r,.hx-split--even{grid-template-columns:1fr} .hx-split__ph img{aspect-ratio:4/3} }

/* ---------- the report, as paper ---------- */
.hx-rep{position:relative}
.rep{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);color:var(--ink2);overflow:hidden;position:relative}
.rep__hd{background:#faf8f4;border-bottom:1px solid var(--line);padding:20px 22px}
.rep__title{font:750 19px/1.2 var(--fd);color:var(--ink);letter-spacing:-.01em;margin:0 0 10px}
.rep__meta{font-size:13.5px;color:var(--ink3);display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.rep__meta b{color:var(--ink)}
.rep__row{border-top:1px solid var(--line);padding:14px 22px;background:#fff}
.rep__row:first-of-type{border-top:0}
.rep__top{display:flex;justify-content:space-between;gap:12px}
.rep__no{font-size:13px;color:var(--ink3);letter-spacing:.04em}
.rep__cost{font-variant-numeric:tabular-nums;font-weight:650;color:var(--ink);font-size:15px;white-space:nowrap}
.rep__item{font:650 16px/1.35 var(--f);color:var(--ink);margin:4px 0}
.rep__note{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:0}
.rep__row--declined{background:var(--acc-t)}
.rep__row--declined .rep__cost,.rep__row--declined .rep__item{color:var(--acc-d)}
.rep__foot{display:flex;justify-content:space-between;padding:16px 22px;border-top:2px solid var(--ink);font-weight:750;color:var(--ink);background:#fff}
.rep__left{padding:12px 22px 18px;margin:0;font-size:14px;color:var(--ink2);background:#f2f8f5;border-top:1px solid #d5e8de}
.rep__left b{color:var(--ok)}
.hx-rep__tag{position:absolute;top:-13px;right:18px;z-index:2;background:var(--ink);color:#fff;font-size:12.5px;font-weight:650;padding:6px 12px;border-radius:999px;letter-spacing:.02em}
.hx-rep.is-clipped .rep{max-height:560px}
.hx-rep.is-clipped .rep::after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 76%)}
.hx-rep__more{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:none;background:#fff !important}
.hx-rep.is-clipped .hx-rep__more{display:inline-flex}

/* ---------- gauge tiles (what we measure) ---------- */
.hx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hx-tile{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:18px 18px 16px;border-top:3px solid var(--cool);min-width:0}
.hx-tile--pl{border-top-color:var(--accent)}
.hx-tile span{display:block;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.hx-tile b{display:block;font:800 30px/1.1 var(--fd);color:var(--ink);letter-spacing:-.02em;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.hx-tile b small{font-size:.5em;font-weight:700;letter-spacing:0;color:var(--ink3);margin-left:3px}
.hx-tile p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
@media (max-width:1000px){ .hx-tiles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .hx-tiles{grid-template-columns:1fr} }

/* ---------- steps ---------- */
.hx-steps{list-style:none;padding:0 !important;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.hx-steps>li{margin:0;background:#fff;border-radius:var(--r);box-shadow:var(--sh);counter-increment:st;padding:24px 22px}
.hx-steps>li::before{content:counter(st);display:block;width:40px;height:40px;border-radius:50%;background:var(--acc-t);
  color:var(--acc-d);font:750 17px/40px var(--fd);text-align:center;margin-bottom:14px}
.hx-steps h3{font-size:18px;margin:0 0 6px}
.hx-steps p{margin:0;font-size:15.5px;line-height:1.55}
@media (max-width:1000px){ .hx-steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .hx-steps{grid-template-columns:1fr} .hx-steps>li{display:grid;grid-template-columns:40px 1fr;column-gap:14px;padding:20px}
  .hx-steps>li::before{grid-row:span 2;margin:0} }

/* ---------- icon fact cards ---------- */
.hx-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hx-facts>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:26px}
.hx-facts .hx-sym__ic{margin-bottom:14px}
.hx-facts h3{font-size:18.5px}
.hx-facts p{margin:0;font-size:15.5px}
@media (max-width:900px){ .hx-facts{grid-template-columns:1fr} }
.hx-no{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hx-no>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:24px}
.hx-no h3{display:flex;gap:10px;align-items:center;font-size:18px}
.hx-no h3::before{content:"\00d7";display:inline-grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--acc-t);color:var(--acc-d);font-size:20px;line-height:1}
.hx-no p{margin:0;font-size:15.5px}
@media (max-width:900px){ .hx-no{grid-template-columns:1fr} }

/* ---------- prose + details ---------- */
.hx-prose{max-width:760px}
.hx-prose h2{font-size:clamp(24px,2.4vw,30px);margin:40px 0 12px}
.hx-prose h2:first-child{margin-top:0}
.hx-prose p,.hx-prose li{font-size:17px;line-height:1.7}
.hx-details{max-width:880px}
.hx-details details{background:#fff;border-radius:var(--r-sm);border:1px solid var(--line);margin:0 0 12px}
.hx-details summary{cursor:pointer;padding:18px 52px 18px 22px;font:650 17.5px/1.4 var(--fd);color:var(--ink);list-style:none;position:relative}
.hx-details summary::-webkit-details-marker{display:none}
.hx-details summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}
.hx-details details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.hx-details details>div{padding:0 22px 20px}
.hx-details details>div p:last-child{margin-bottom:0}

/* ---------- cost box ---------- */
.hx-cost{display:grid;grid-template-columns:7fr 5fr;gap:22px}
.hx-cost>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(22px,3vw,34px)}
.hx-cost__call{background:var(--navy) !important;color:#dfe6ee}
.hx-cost__call h3{color:#fff}
.hx-cost__call p{color:#cfd9e1}
.hx-cost__call .hx-b{margin-top:6px}
@media (max-width:900px){ .hx-cost{grid-template-columns:1fr} }

/* ---------- life band ---------- */
.hx-life{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.hx-life figure{margin:0;border-radius:var(--r);overflow:hidden;position:relative;min-height:420px}
.hx-life img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-life__big figcaption{position:absolute;left:0;right:0;bottom:0;padding:90px 28px 26px;color:#fff;
  background:linear-gradient(0deg,rgba(8,17,24,.9) 0%,rgba(8,17,24,.72) 50%,rgba(8,17,24,0) 100%)}
.hx-life__big figcaption strong{display:block;font:700 clamp(24px,2.6vw,34px)/1.15 var(--fd);letter-spacing:-.02em;margin-bottom:6px}
@media (max-width:900px){ .hx-life{grid-template-columns:1fr} .hx-life figure{min-height:300px} }

/* ---------- reviews ---------- */
.hx-rv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hx-rv article{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:24px;display:flex;flex-direction:column;gap:12px;margin:0}
.hx-rv .hx-stars svg{width:17px;height:17px}
.hx-rv blockquote{margin:0;color:var(--ink);font-size:16.5px;line-height:1.6}
.hx-rv footer{margin-top:auto;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink3)}
.hx-rv footer b{display:block;color:var(--ink);font-size:15px}
.hx-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--fd);color:#fff;background:var(--cool);flex:0 0 auto}
.hx-av--2{background:var(--accent)}.hx-av--3{background:#4F6B3A}.hx-av--4{background:#6B4F8A}
.hx-av--4{background:#2F5F5A}
.hx-rv__svc{display:inline-block;font-size:12.5px;font-weight:650;color:var(--ink3);background:var(--bg);border-radius:999px;padding:4px 10px}
.hx-score{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hx-score__n{font:800 56px/1 var(--fd);color:var(--ink);letter-spacing:-.03em}
.hx-score .hx-stars svg{width:22px;height:22px}
.hx-score p{margin:4px 0 0;font-size:15px;color:var(--ink3)}
@media (max-width:1000px){ .hx-rv{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .hx-rv{grid-template-columns:1fr} }

/* ---------- chat showcase ---------- */
.hx-chatcard{background:#fff;border-radius:24px;box-shadow:var(--sh-lg);overflow:hidden;max-width:460px;justify-self:end;width:100%}
.hx-chatcard__hd{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.hx-chatcard__av{width:40px;height:40px;border-radius:50%;background:var(--acc-t);color:var(--accent);display:grid;place-items:center}
.hx-chatcard__av svg{width:22px;height:22px}
.hx-chatcard__hd b{display:block;color:var(--ink);font-size:16px}
.hx-chatcard__hd small{color:var(--ok);font-size:13px;font-weight:600}
.hx-chatcard__bd{padding:22px 20px;display:grid;gap:12px;background:#faf8f4}
.hx-bub{max-width:88%;padding:12px 16px;border-radius:18px 18px 18px 6px;background:#fff;border:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink);margin:0}
.hx-chatcard__opts{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.hx-chatcard__opts a{display:inline-block;padding:11px 16px;border-radius:18px 18px 6px 18px;background:var(--accent);color:#fff !important;text-decoration:none !important;font-weight:600;font-size:15px}
.hx-chatcard__opts a:hover{background:var(--acc-d)}
.hx-chatcard__ft{padding:12px 20px;font-size:13.5px;color:var(--ink3);border-top:1px solid var(--line);margin:0}
@media (max-width:900px){ .hx-chatcard{justify-self:stretch;max-width:none} }

/* ---------- areas ---------- */
.hx-towns{list-style:none;padding:0 !important;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:8px}
.hx-towns li{margin:0;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:15px;color:var(--ink);font-weight:550}
.hx-town{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hx-town>div{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:20px 22px;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.hx-town h3{font-size:18px;margin:0 0 4px}
.hx-town p{margin:0;font-size:15px}
.hx-town svg{width:40px;height:40px;color:var(--accent)}
@media (max-width:760px){ .hx-town{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.hx-faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.hx-faq details{background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh);border:1px solid transparent}
.hx-faq details[open]{border-color:var(--line)}
.hx-faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;font:650 18px/1.4 var(--fd);color:var(--ink);position:relative}
.hx-faq summary::-webkit-details-marker{display:none}
.hx-faq summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;margin-top:-8px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s ease}
.hx-faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.hx-faq details>div{padding:0 24px 22px;color:var(--ink2)}
.hx-faq details>div p:last-child{margin:0}
.hx-faqgrp{max-width:880px;margin:0 auto 44px}
.hx-faqgrp:last-child{margin-bottom:0}
.hx-faqgrp>h2{font-size:clamp(22px,2vw,26px);margin:0 0 16px}

/* ---------- closing photo band ---------- */
.hx-cta{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:clamp(80px,10vw,136px) 0}
.hx-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hx-cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,17,24,.93) 0%,rgba(8,17,24,.86) 45%,rgba(8,17,24,.6) 70%,rgba(8,17,24,.35) 100%)}
.hx-cta h2{color:#fff;max-width:20ch}
.hx-cta p{color:#e9eef3;max-width:54ch;font-size:18px}
.hx-cta .hx-eyebrow{color:#FFC9AE}
@media (max-width:820px){ .hx-cta::before{background:linear-gradient(180deg,rgba(8,17,24,.8) 0%,rgba(8,17,24,.9) 100%)} }

/* ---------- related services ---------- */
.hx-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hx-rel a{display:block;background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh);padding:18px 20px;text-decoration:none !important;color:var(--ink2) !important;transition:transform .2s ease,box-shadow .2s ease}
.hx-rel a:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.hx-rel b{display:block;color:var(--ink);font:650 16.5px/1.3 var(--fd);margin:0 0 4px}
.hx-rel span{font-size:14.5px;line-height:1.5}
@media (max-width:1100px){ .hx-rel{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .hx-rel{grid-template-columns:1fr} }

/* ---------- timeline (process) ---------- */
.hx-tl{list-style:none;padding:0 !important;margin:0;display:grid;gap:22px;counter-reset:tl}
.hx-tl>li{margin:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;counter-increment:tl}
.hx-tl>li:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.hx-tl>li:nth-child(even) .hx-tl__ph{order:2}
.hx-tl__ph{position:relative;min-height:280px;background:var(--bg2)}
.hx-tl__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-tl__b{padding:clamp(24px,3vw,40px);align-self:center}
.hx-tl__b::before{content:"Step " counter(tl);display:block;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.hx-tl__b h3{font-size:clamp(20px,2vw,24px);margin:0 0 10px}
.hx-tl__b p{margin:0 0 .8em;font-size:16.5px}
.hx-tl__b p:last-child{margin:0}
@media (max-width:820px){ .hx-tl>li,.hx-tl>li:nth-child(even){grid-template-columns:1fr} .hx-tl>li:nth-child(even) .hx-tl__ph{order:0} .hx-tl__ph{min-height:0;aspect-ratio:16/10} }
.hx-doc{position:absolute;inset:0;background:linear-gradient(180deg,#f7f4ee,#efe9df);display:flex;align-items:center;justify-content:center}
.hx-doc__sheet{width:70%;max-width:340px;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(19,32,43,.14);padding:18px 18px 14px;font-size:13px;line-height:1.35;color:var(--ink2)}
.hx-doc__sheet b{display:block;font-size:14px;color:var(--ink);margin-bottom:8px}
.hx-doc__sheet span{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:6px 0}
.hx-doc__sheet em{font-style:normal;font-weight:650;color:var(--ok)}
.hx-doc__sheet em.is-out{color:var(--warn)}

/* ---------- two-card comparison (warranty) ---------- */
.hx-cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hx-cmp>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(24px,3vw,36px)}
.hx-cmp h3{font-size:22px}
.hx-cmp ul{margin:14px 0 0;padding-left:1.1em}
.hx-cmp li{margin:0 0 10px}
.hx-k{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
@media (max-width:820px){ .hx-cmp{grid-template-columns:1fr} }
.hx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hx-stats>div{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:22px}
.hx-stats b{display:block;font:800 clamp(30px,3vw,40px)/1.05 var(--fd);color:var(--ink);letter-spacing:-.02em}
.hx-stats span{font-size:14.5px;color:var(--ink3)}
@media (max-width:900px){ .hx-stats{grid-template-columns:1fr 1fr} }
.hx-crew{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hx-crew>div{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:22px;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.hx-crew .hx-av{width:48px;height:48px;font-size:18px}
.hx-crew h3{font-size:17px;margin:0 0 2px}
.hx-crew p{margin:0;font-size:14.5px;line-height:1.5}
.hx-crew small{display:block;color:var(--accent);font-weight:650;font-size:13px;margin-bottom:6px}
@media (max-width:1000px){ .hx-crew{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .hx-crew{grid-template-columns:1fr} }

/* ---------- the request form (book) ---------- */
.hx-form2{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start}
.hx-qform{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);padding:clamp(22px,3vw,36px)}
.hx-qform h2{font-size:clamp(24px,2.4vw,30px)}
.hx-qform .field{margin:0 0 16px}
.hx-qform .field--split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hx-qform label{display:block;font:600 15px/1.3 var(--f);color:var(--ink);margin:0 0 6px}
.hx-qform input,.hx-qform select,.hx-qform textarea{width:100%;font:16px/1.4 var(--f);padding:12px 14px;border:1.5px solid var(--line2);border-radius:12px;background:#fff;color:var(--ink)}
.hx-qform textarea{min-height:130px;resize:vertical}
.hx-qform input:focus,.hx-qform select:focus,.hx-qform textarea:focus{border-color:var(--accent)}
.hx-qform .hx-b{width:100%}
.hx-formnote{font-size:14px;color:var(--ink3);margin:14px 0 0}
.hx-sent{margin-top:16px;background:#f2f8f5;border:1px solid #cfe5d8;border-radius:14px;padding:16px 18px;color:var(--ink2)}
.hx-sent b{color:var(--ok)}
.hx-stack{display:grid;gap:18px;align-content:start}
.hx-box{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(22px,3vw,28px)}
.hx-box h3{font-size:19px;margin:0 0 10px}
.hx-box p:last-child{margin:0}
.hx-warn{background:#FFF4EC;border:1px solid #F0CDB6;border-radius:var(--r);padding:22px 24px}
.hx-warn h3{color:var(--acc-d);font-size:19px}
.hx-warn p:last-child{margin:0}
.hx-ol{list-style:none;padding:0 !important;margin:0;counter-reset:nm;display:grid;gap:12px}
.hx-ol li{margin:0;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;counter-increment:nm}
.hx-ol li::before{content:counter(nm);width:30px;height:30px;border-radius:50%;background:var(--acc-t);color:var(--acc-d);font:700 14px/30px var(--fd);text-align:center}
@media (max-width:900px){ .hx-form2{grid-template-columns:1fr} }
@media (max-width:560px){ .hx-qform .field--split{grid-template-columns:1fr} }
.hx-pagehead{background:var(--bg2);padding:clamp(56px,7vw,96px) 0 clamp(88px,9vw,120px)}
.hx-pagehead .hx-crumbs{color:var(--ink3)}
.hx-pagehead .hx-crumbs a{color:var(--ink) !important}
.hx-pagehead h1{font-size:clamp(36px,4.8vw,58px);line-height:1.05;letter-spacing:-.03em;margin:0 0 16px}

/* ---------- footer ---------- */
.hx-ft{background:#E9E4DA;color:var(--ink2);padding:64px 0 36px;font-size:15px}
.hx-ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.hx-ft h4{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.hx-ft ul{list-style:none;padding:0;margin:0}
.hx-ft li{margin:0 0 9px}
.hx-ft a{color:var(--ink) !important;text-decoration:none}
.hx-ft a:hover{text-decoration:underline}
.hx-ft__brand{display:inline-flex;gap:10px;align-items:center;font:750 20px/1 var(--fd);color:var(--ink);margin:0 0 14px}
.hx-ft__brand svg{width:30px;height:30px;color:var(--accent)}
.hx-ft__addr{margin:0 0 10px;line-height:1.7}
.hx-ft__lic{font-size:14px;color:var(--ink3);margin:0}
.hx-ft__legal{margin:40px 0 0;padding-top:22px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--ink3);line-height:1.6;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hx-ft__legal p{margin:0}
@media (max-width:900px){ .hx-ft__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .hx-ft__grid{grid-template-columns:1fr} }

/* ═══ 💬 THE CHAT: launcher + panel, re-inked for the light site ═══════════
   ⛔ Keep #launch, its aria-expanded / aria-controls and the open handler: the
   page buttons (data-chat) call the same open function. Bottom-RIGHT, framed
   or not (owner, 24 Sep: "right and go").
   💬 The floating button waits until the hero and the promise card have
   scrolled away (roofing reviewer, 30 Sep: it covered the hero's call button
   at 390). The hero's own button opens the same chat. ⛔ visibility, not
   opacity alone. Without JS the attribute is never set, so it simply shows. */
.launch{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border-radius:999px;cursor:pointer;
  background:var(--accent);color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 28px rgba(19,32,43,.28);
  font:650 15px/1.2 var(--f);transition:opacity .25s ease,transform .25s ease,visibility .25s,background .16s ease}
.launch:hover{background:var(--acc-d)}
html[data-hero-in-view] .launch{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(12px)}
.lchat__dot{position:relative;flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#8BE3B0}
@media (min-width:0px){
  .lchat__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#8BE3B0;animation:lchat-pulse 2.4s ease-out infinite}
}
@keyframes lchat-pulse{0%{transform:scale(1);opacity:.65}80%,100%{transform:scale(2.8);opacity:0}}
.lchat__sm{display:none}
@media (max-width:480px){ .lchat__lg{display:none} .lchat__sm{display:inline} .launch{padding:0 16px 0 14px} }
.chatbox{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;
  width:min(372px,calc(100vw - 32px));max-height:min(580px,calc(100vh - 32px));display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(19,32,43,.28);overflow:hidden}
.chatbox__hd{display:flex;align-items:center;gap:10px;padding:14px 14px 14px 18px;background:var(--navy);color:#fff}
.launch__dot{width:9px;height:9px;border-radius:50%;background:#8BE3B0;flex:0 0 auto}
.chatbox__t{font:650 15px/1.2 var(--f);color:#fff;margin-right:auto}
.chatbox__x{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;padding:0}
.chatbox__x:hover{background:rgba(255,255,255,.2)}
.log{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:160px;background:#faf8f4}
.msg{max-width:88%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.5}
.msg--bot{background:#fff;border:1px solid var(--line);align-self:flex-start;color:var(--ink);border-bottom-left-radius:6px}
.msg--me{background:var(--accent);align-self:flex-end;color:#fff;border-bottom-right-radius:6px}
.opts{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px;background:#faf8f4}
.chip{background:#fff;border:1.5px solid var(--line2);color:var(--ink);cursor:pointer;font:600 14px/1.3 var(--f);padding:9px 13px;border-radius:999px;text-align:left}
.chip:hover{border-color:var(--accent);color:var(--acc-d)}
.ask{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:#fff}
.ask .ask__in{flex:1 1 auto;border-radius:12px;cursor:text;font-weight:400}
.ask .ask__go{background:var(--accent);border-color:var(--accent);color:#fff}
.chatbox__fine{font-size:12px;color:var(--ink3);padding:8px 16px 12px;margin:0;line-height:1.45;background:#fff}
/* the chat's own name/number form carries an inline pale-copper label written
   for the old dark panel; on white it measured 1.8:1. ⛔ The chat script is kept
   word for word, so the colour is corrected here instead. */
.opts form .chip[type="submit"]{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important}
.opts form input.chip{border-radius:12px}
/* the selling band below names .wrap for its container (from the old sheet) */
.sellband .wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.hx-cta .hx-eyebrow{font-size:13px}
/* phones and tablets: the door becomes photo-on-top, words on navy, so no
   line of text ever sits on a busy part of the photograph */
@media (max-width:900px){
  .hx-door{display:block;min-height:0;background:var(--navy)}
  .hx-door>img{position:relative;inset:auto;height:auto;aspect-ratio:16/10;z-index:0}
  .hx-door::before{display:none}
}
.hx-sym .hx-sym__ic{flex:0 0 46px;width:46px}
@media (max-width:520px){ .hx-sym a>span:not(.hx-sym__ic){flex:1 1 100%} .hx-sym a>span.hx-sym__ic{flex:0 0 46px} }
@media (prefers-reduced-motion:reduce) and (max-width:0px){ .launch{transition:none} }
.hx-drawer__hd .hx-brand{min-height:44px}
.hx-drawer__x:focus-visible,.chatbox__x:focus-visible,.hx-burger:focus-visible{border-radius:999px}
.hx-demonote{background:#FFF4EC;border:1px solid #F0CDB6;border-radius:12px;padding:10px 14px;font-size:14.5px;color:var(--ink2);margin:0 0 18px}
.hx-demonote b{color:var(--acc-d)}
.hx-pagehead .hx-row{margin-top:8px}

/* ═══ 🧭 HEADER v2 — 30 Sep 2026 ═══════════════════════════════════════════
   Owner: "make sure the headers on the demo sites all look way better";
   "social, open closed hours, fake address, phone number, make modern and
   clean that match". Brief rule 8b.
   Utility bar (36px, navy): live open/closed from the shop's own hours ·
   short address + area · phone · monochrome socials (href="#", never a real
   account) · a neat DEMO pill. Header: crafted mark + tagline, animated
   underlines, phone block, CTA with icon; sticky glass that shrinks 80→64
   and gains a shadow when a sentinel leaves the screen (IntersectionObserver,
   no scroll listener). Phones: mark + name, round call button, Menu; 60px.
   ⛔ No radial, no glow. ⛔ Reduced motion: nothing animates. */
.utilbar{font-size:13px;line-height:1.3}
.utilbar__in{min-height:36px;padding-top:4px;padding-bottom:4px;flex-wrap:nowrap;gap:18px}
.utilbar p{margin:0}
.ub-status{display:inline-flex;align-items:center;gap:8px;color:#e6edf2;white-space:nowrap;font-weight:600}
.ub-dot{width:8px;height:8px;border-radius:50%;background:#9fb3c2;flex:0 0 auto;box-shadow:0 0 0 3px rgba(159,179,194,.18)}
.ub-status.is-open .ub-dot{background:#5FD39A;box-shadow:0 0 0 3px rgba(95,211,154,.2)}
.ub-status.is-closed .ub-dot{background:#F2A65A;box-shadow:0 0 0 3px rgba(242,166,90,.2)}
.ub-addr{display:inline-flex;align-items:center;gap:6px;color:#c9d5de;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ub-addr svg{width:14px;height:14px;flex:0 0 auto;color:#FFC9AE}
.ub-right{margin-left:auto;display:inline-flex;align-items:center;gap:16px;white-space:nowrap}
.ub-tel{display:inline-flex;align-items:center;gap:6px;color:#fff !important;text-decoration:none !important;font-weight:650}
.ub-tel svg{width:14px;height:14px;color:#FFC9AE}
.ub-tel:hover{text-decoration:underline !important}
.ub-soc{display:inline-flex;align-items:center;gap:4px}
.ub-soc a{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#c9d5de !important}
.ub-soc a:hover{background:rgba(255,255,255,.1);color:#fff !important}
.ub-soc svg{width:15px;height:15px}
.utilbar .demostrip{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:3px 10px 3px 8px;font-size:12px;letter-spacing:.02em;gap:6px;color:#dfe6ee}
.utilbar .demostrip b{text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.utilbar .demostrip:hover{background:rgba(255,255,255,.08)}
@media (max-width:1239px){ .ub-area{display:none} }
@media (max-width:1023px){ .ub-addr,.ub-soc{display:none} }
.ub-status__s{display:none}
@media (max-width:640px){ .utilbar .utilbar__demotail{display:none} .ub-tel__l{display:none} .utilbar__in{gap:6px 12px;flex-wrap:wrap}
  .ub-status__t{display:none} .ub-status__s{display:inline} .ub-right{gap:12px} }


/* the sentinel sits just under the utility bar; when it leaves, we're scrolled */
.hx-sentinel{height:1px;margin-bottom:-1px;pointer-events:none}
.hx-hd{background:rgba(255,255,255,.92);border-bottom-color:transparent;transition:box-shadow .25s ease,background .25s ease,border-color .25s ease}
.hx-hd__in{min-height:80px;transition:min-height .25s ease}
html[data-scrolled] .hx-hd{background:rgba(255,255,255,.95);border-bottom-color:var(--line);box-shadow:0 10px 30px -12px rgba(19,32,43,.22)}
html[data-scrolled] .hx-hd__in{min-height:64px}
.hx-brand .nav__mark{width:40px;height:40px;transition:width .25s ease,height .25s ease}
html[data-scrolled] .hx-brand .nav__mark{width:34px;height:34px}
.hx-brand__t b{font-size:21px}
.hx-brand__t small{letter-spacing:.06em;font-size:11.5px;margin-top:4px}
/* nav: animated underline, current page underlined in copper */
.hx-nav__a,.hx-dd__t{position:relative;background:none !important}
.hx-nav__a::after,.hx-dd__t::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.hx-nav__a:hover::after,.hx-dd__t:hover::after,.hx-dd.is-open>.hx-dd__t::after{transform:scaleX(1)}
.hx-nav__a[aria-current]::after,.hx-dd__t.is-current::after{transform:scaleX(1)}
.hx-nav__a[aria-current],.hx-dd__t.is-current{box-shadow:none;color:var(--acc-d) !important}
.hx-dd__t::after{right:30px}
/* phone block */
.hx-tel{gap:10px;min-height:44px}
.hx-tel__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--acc-t);color:var(--accent)}
.hx-tel__ic svg{width:19px;height:19px;color:currentColor}
.hx-tel__t{display:flex;flex-direction:column;line-height:1.15}
.hx-tel__t small{font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.hx-tel__t b{font-size:16px;color:var(--ink)}
.hx-tel:hover .hx-tel__ic{background:var(--accent);color:#fff}
.hx-hd .hx-hd__cta svg{width:17px;height:17px}
.hx-callbtn{display:none;width:44px;height:44px;border-radius:50%;place-items:center;background:var(--accent);color:#fff !important;flex:0 0 auto;
  box-shadow:0 6px 16px rgba(168,70,28,.28)}
.hx-callbtn svg{width:20px;height:20px}
@media (max-width:1023px){
  .hx-hd__in,html[data-scrolled] .hx-hd__in{min-height:60px}
  .hx-brand .nav__mark,html[data-scrolled] .hx-brand .nav__mark{width:36px;height:36px}
  .hx-hd .hx-hd__cta{margin-left:auto}
  .hx-callbtn{display:inline-grid}
  .hx-burger{margin-left:0}
}
@media (max-width:560px){ .hx-callbtn{margin-left:auto} }
@media (max-width:560px){ .hx-brand__t b{font-size:18.5px} .hx-brand__t small{font-size:10.5px} }
@media (max-width:359px){ .hx-brand__t small{display:none} }
/* drawer footer: address and socials live here on phones */
.hx-drawer__info{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--ink3);flex-wrap:wrap}
.hx-drawer__info>svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.hx-drawer__info>span{flex:1 1 60%}
.hx-drawer__info .ub-soc{margin-left:auto}
.hx-drawer__info .ub-soc a{color:var(--ink2) !important;width:36px;height:36px}
.hx-drawer__info .ub-soc a:hover{background:var(--bg);color:var(--ink) !important}
@media (prefers-reduced-motion:reduce) and (max-width:0px){
  .hx-hd,.hx-hd__in,.hx-brand .nav__mark,.hx-nav__a::after,.hx-dd__t::after{transition:none !important}
}
/* phones: status · phone · DEMO pill on ONE line at 390 (measured: it wrapped at 400px of content) */
@media (max-width:640px){
  .utilbar{font-size:12.5px}
  .utilbar__in{padding-left:12px;padding-right:12px}
  .ub-tel svg{display:none}
  .utilbar .demostrip{padding:2px 8px 2px 7px}
  .utilbar .demostrip b{letter-spacing:.04em;font-size:10.5px}
  .ub-right{gap:10px}
}


/* ── 🧲 THE SELLING BAND — 24 Sep 2026 ───────────────────────────────────────────
   Written by tools/demo-sellband.mjs. Read that file before changing anything
   here; it records why the ground is ours and fixed while the accent is derived
   from this folder's own brand token and resolved to a literal.
   ⛔ The ground is deliberately NOT var(--anything): borrowing each site's
      surface made this read as the invented company's own sales copy, and the
      point of the band is that a stranger can see it is not.
   ⛔ The accent paints a pip, a rule and a chevron. It never carries prose. */
.sellband{--sb-accent:#db5c26;--sb-ground:#0f1b2a;--sb-card:#182b40;
  background:var(--sb-ground);color:#eef3f8;
  border-top:3px solid var(--sb-accent);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:clamp(2.2rem,5vw,3.4rem) 0;
  /* ⛔ isolate: several demos paint body gradients and grids that would show
     through, and one composites a fixed background over its sections. */
  position:relative;z-index:1;isolation:isolate}
.sellband *{box-sizing:border-box}
/* 🔴 TYPE IS NORMALISED, AND THIS IS NOT FUSSINESS.
   Each demo styles its h2 and h3 with its own display face — rv-powersports
   puts them in condensed UPPERCASE, tree-service in a serif, garage-door in a
   third face. Inheriting those made our pitch render in the invented company's
   own signature type on all thirteen, which is precisely the illusion the band
   exists to step outside of, and it made one heading read as their headline.
   ⛔ Compound selectors (0,2,0) on purpose: a bare .sellband__h loses to a site
   rule such as .sec h2 (0,1,1), and it loses SILENTLY.
   ⛔ No backticks anywhere in this CSS — it lives in a template literal. */
.sellband .sellband__h,.sellband .sellband__k,.sellband .sellband__sum{
  font-family:inherit;text-transform:none;font-style:normal}
.sellband .sellband__h{letter-spacing:-.015em}
.sellband .sellband__k,.sellband .sellband__sum{letter-spacing:0}
.sellband .sellband__h::after,.sellband .sellband__k::after,
.sellband .sellband__h::before,.sellband .sellband__k::before{content:none}
.sellband__in{padding-inline:20px}
/* ⛔ flex-start, not center: the eyebrow wraps to two lines at phone width and
   a centred pip then floats in the gap between them, pointing at nothing. */
.sellband__eyebrow{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .6rem;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  line-height:1.45;color:#c7d4e0}
.sellband__pip{width:8px;height:8px;border-radius:50%;background:var(--sb-accent);
  flex:0 0 auto;margin-top:.38em}
.sellband__h{margin:0 0 1.5rem;font-size:clamp(1.45rem,3.1vw,2.1rem);line-height:1.18;
  font-weight:800;letter-spacing:-.015em;color:#fff;max-width:32ch}
.sellband__grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);align-items:start}
.sellband__card{background:var(--sb-card);border:1px solid #35506e;border-radius:12px;
  padding:1.1rem 1.15rem 1.2rem;min-width:0}
.sellband__k{margin:0 0 .5rem;font-size:.95rem;font-weight:700;color:#fff;line-height:1.3}
.sellband__p{margin:0 0 .6rem;font-size:.9rem;line-height:1.55;color:#dae3ec}
.sellband__fine{margin:.5rem 0 0;font-size:.8rem;line-height:1.5;color:#b2c0ce}
/* ⛔ Each figure is one unwrappable unit. Without this "$349" and "a month"
   land on different lines and the page appears to publish a bare number. */
.sellband__price{margin:0 0 .6rem;font-size:1.05rem;line-height:1.4;color:#fff;
  font-weight:400;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem}
.sellband__fig{white-space:nowrap}
.sellband__price b{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.sellband__dot{color:var(--sb-accent)}

/* the disclosure — it answers "what comes with it" where the question is asked,
   which is the only reason to add one. No JavaScript. */
.sellband__more{margin-top:.7rem;border-top:1px solid #35506e;padding-top:.6rem}
.sellband__sum{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  cursor:pointer;list-style:none;font-size:.85rem;font-weight:700;color:#fff;
  padding:.2rem 0;min-height:32px}
.sellband__sum::-webkit-details-marker{display:none}
.sellband__chev{width:9px;height:9px;border-right:2px solid var(--sb-accent);
  border-bottom:2px solid var(--sb-accent);transform:rotate(45deg);flex:0 0 auto;
  margin-bottom:3px;transition:transform .18s ease}
.sellband__more[open] .sellband__chev{transform:rotate(-135deg);margin-bottom:-3px}
.sellband__list{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.34rem}
.sellband__list li{position:relative;padding-left:1.05rem;font-size:.84rem;
  line-height:1.5;color:#dae3ec}
.sellband__list li::before{content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--sb-accent)}
.sellband__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:1.4rem 0 0}
.sellband__go{display:inline-flex;align-items:center;min-height:44px;
  padding:.6rem 1.25rem;border-radius:8px;background:#fff;color:#0f1b2a;
  font-weight:700;font-size:.92rem;text-decoration:none;border:1px solid #fff}
.sellband__go:hover{background:#dce7f2;border-color:#dce7f2}
.sellband__alt{display:inline-flex;align-items:center;min-height:44px;
  color:#dae3ec;font-size:.9rem;text-decoration:none;
  border-bottom:1px solid #46586c;padding-bottom:1px}
.sellband__alt:hover{color:#fff;border-bottom-color:#fff}
@media (prefers-reduced-motion:no-preference){
  .sellband__card{transition:border-color .18s ease}
  .sellband__card:hover{border-color:#4a6a8f}
}
@media (max-width:900px){
  .sellband__grid{grid-template-columns:1fr}
  .sellband__h{max-width:28ch}
}
@media (max-width:560px){
  .sellband__in{padding-inline:16px}
  .sellband__price b{font-size:1.35rem}
}
/* ⛔ Inside our own iframe the surrounding chrome already sells; the band is a
   second pitch on top of the pitch. Hidden there and ONLY there, exactly as the
   disclosure chip is. */
html[data-embedded] .sellband{display:none !important}

/* ═══ 📷 PHOTO QUOTES — the home-page band, 1 Oct 2026 ═══════════════════════
   "Get a quote from photos": three steps and two buttons. "Watch it work" opens
   the chat in auto-play; "Start my photo quote" opens it on the photo path
   (photo-quote.js). Without script both are links to book.html.
   ⛔ No overflow-x on html/body here; nothing in this band is wider than 375. */
.pqs{--pq-bg:#ECE7DE;--pq-ink:#13202B;--pq-ink2:#3F4B55;--pq-acc:#A8461C;--pq-acc-ink:#FFFFFF;--pq-kick:#A8461C;--pq-line:#D2CABC;--pq-card:#FFFFFF;--pq-ghost:#13202B;--pq-q-acc:#A8461C;--pq-fd:var(--fd);--pq-f:var(--f);background:var(--pq-bg);color:var(--pq-ink);padding:clamp(56px,7vw,96px) 0;font-family:var(--pq-f)}
.pqs__in{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.pqs__copy{min-width:0}
.pqs__kick{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font:800 12.5px/1.2 var(--pq-f);letter-spacing:.14em;text-transform:uppercase;color:var(--pq-kick)}
.pqs__kick svg{width:18px;height:18px}
.pqs h2{margin:0 0 14px;font-family:var(--pq-fd);font-weight:800;font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.015em;color:var(--pq-ink)}
.pqs__lede{margin:0 0 24px;font-size:clamp(16px,1.6vw,18.5px);line-height:1.55;color:var(--pq-ink2);max-width:36em}
.pqs__steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;counter-reset:none}
.pqs__steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--pq-line);border-radius:14px;background:var(--pq-card)}
.pqs__n{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--pq-acc);color:var(--pq-acc-ink);font:800 15px/1 var(--pq-f)}
.pqs__steps b{display:block;font-size:16.5px;line-height:1.3;color:var(--pq-ink);margin-top:1px}
.pqs__steps small{display:block;font-size:14.5px;line-height:1.45;color:var(--pq-ink2);margin-top:2px}
.pqs__btns{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.pqs .pqs__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:999px;font:700 16px/1.1 var(--pq-f);text-decoration:none;border:2px solid var(--pq-acc);transition:transform .15s ease,box-shadow .15s ease}
.pqs .pqs__btn svg{width:20px;height:20px;flex:0 0 auto}
.pqs .pqs__btn--go{background:var(--pq-acc);color:var(--pq-acc-ink)}
.pqs .pqs__btn--ghost{background:transparent;color:var(--pq-ink);border-color:var(--pq-ghost)}
.pqs .pqs__btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.pqs .pqs__btn:focus-visible{outline:3px solid var(--pq-acc);outline-offset:3px}
.pqs__fine{margin:0;font-size:14.5px;color:var(--pq-ink2)}
.pqs__fine a{color:inherit;font-weight:700;white-space:nowrap}
.pqs__vis{position:relative;margin:0;min-width:0;min-height:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3.4;background:var(--pq-line);box-shadow:0 24px 60px rgba(10,20,30,.22)}
.pqs__vis img{display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0}
.pqs__pill{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.95);color:#14202a;font:700 13.5px/1 var(--pq-f);box-shadow:0 6px 18px rgba(0,0,0,.16)}
.pqs__pill i{width:8px;height:8px;border-radius:50%;background:#1f8a4c}
.pqs__q{position:absolute;right:16px;bottom:16px;width:min(300px,calc(100% - 32px));background:#fff;color:#14202a;border-radius:16px;padding:14px 16px 14px;box-shadow:0 18px 44px rgba(0,0,0,.3);font-family:var(--pq-f);text-align:left}
.pqs__q span{display:block;font:800 11px/1.2 var(--pq-f);letter-spacing:.1em;text-transform:uppercase;color:#56616c}
.pqs__q b{display:block;margin:7px 0 3px;font-size:15px;line-height:1.3;color:#14202a}
.pqs__q strong{display:block;font-size:27px;line-height:1.1;color:var(--pq-q-acc);font-weight:800}
.pqs__q strong small{font-size:15px;font-weight:700}
.pqs__q em{display:block;margin-top:5px;font-style:normal;font-size:12.5px;line-height:1.35;color:#56616c}
.pqs__yes{display:flex;gap:6px;margin-top:11px}
.pqs__yes i{flex:1 1 auto;padding:8px 6px;border-radius:9px;text-align:center;font:700 12.5px/1.1 var(--pq-f);font-style:normal;border:1.5px solid #cfd5db;color:#14202a}
.pqs__yes i:first-child{background:var(--pq-q-acc);border-color:var(--pq-q-acc);color:#fff}
@media (max-width:900px){.pqs__in{grid-template-columns:minmax(0,1fr)}.pqs__vis{aspect-ratio:4/3.2}}
/* ⭐ on a phone the photo stays visible: the quote card sits UNDER it, overlapping its foot, not on top of it */
@media (max-width:600px){.pqs__vis{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none;border-radius:0}.pqs__vis img{aspect-ratio:16/11;height:auto;border-radius:18px;box-shadow:0 14px 34px rgba(10,20,30,.2)}.pqs__q{position:relative;right:auto;bottom:auto;width:auto;margin:-44px 12px 0;padding:12px 14px}.pqs__q strong{font-size:23px}.pqs__pill{left:12px;top:12px}}
@media (max-width:480px){.pqs .pqs__btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.pqs .pqs__btn{transition:none}.pqs .pqs__btn:hover{transform:none}}

/* 17 Oct 2026 (sample sweep, defect 7): the top-bar phone link was 16-19 px tall on a phone. Padding grows the tap area to 44 px; the equal
   negative margin keeps the bar exactly as tall as before. */
@media (max-width:820px){a.hx-ub__tel,a.ub-tel,a.tx-ub__tel,a.utilbar__tel,a.ub__tel,a.ub--tel,a.hx-ub--tel,a.hx-util__tel,.utilbar a.utilbar__lnk[href^="tel:"]{padding-block:14px;margin-block:-14px}}