/* ═══════════════════════════════════════════════════════════════════════════
   LINDEN & LACQUER NAIL STUDIO — a new demonstration site, 30 Sep 2026.
   Owner: "i also need… a nail salon demo"; "light like the home page and just
   whatever is best for the website and industry"; "make sure the headers on
   the demo sites all look way better" (HEADER v2, brief rule 8b).

   ⭐ Built from the approved light rebuilds (roofing, drain-cleaning,
   plumbing-hvac): the same header/mega/drawer machinery, promise card, chat
   and selling band, re-drawn for a salon: warm cream ground, a blush tint,
   one deep berry-rose accent and a serif display face.
   ⭐ Everything below the 🧲 SELLING BAND marker is written by
   tools/demo-sellband.mjs. ⛔ Hand CSS goes ABOVE it.
   ⭐ --accent MUST stay the first `--accent:#hex` in this file: demo-sellband
   derives the band's accent from it.
   ⭐ Berry rose #9B3553: white label on it 7.0:1; as text on the cream 6.5:1.
      Hue ≈ 342°, outside the 250–330 purple band the estate refuses.
   ⛔ NO BLOBS: every fade here is a LINEAR gradient or a linear mask from an
      edge. No radial-gradient, no ellipse, no glow.
   ⛔ Zero network requests: system fonts, inline SVG, local photos only.
   ⛔ section.hero stays on every hero: tools/shots-trade-sites.mjs crops from it.
   ⛔ overflow-x is CLIP, never hidden: hidden on html/body unpins the sticky header.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --accent:#9B3553;      /* berry rose — the brand. demo-sellband reads this line */
  --acc-d:#7E2743;       /* pressed, and small text on the tint */
  --acc-t:#F7E6EA;       /* rose tint */
  --gold:#A7804C;        /* champagne rule lines. ⛔ decoration only, never text */
  --gold-t:#F3EADF;
  --bg:#FBF7F3;          /* cream ground */
  --bg2:#F5ECE7;         /* blush band */
  --card:#fff;
  --ink:#2B1D21;         /* headings */
  --ink2:#4E4145;        /* body, 9.4:1 on cream */
  --ink3:#6B5D61;        /* small print, 6.0:1 on cream */
  --line:#EBE0DA;
  --line2:#DCCDC6;
  --navy:#2A1A20;        /* the dark: plum-espresso (utility bar, chat head, bands) */
  --navy2:#3A252D;
  --ok:#1F7A4D;
  --r:20px;--r-sm:12px;
  --sh:0 1px 2px rgba(43,29,33,.05),0 10px 30px rgba(43,29,33,.07);
  --sh-lg:0 2px 4px rgba(43,29,33,.05),0 24px 64px rgba(43,29,33,.13);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fd:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --hd:80px;
}
*,*::before,*::after{box-sizing:border-box}
[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.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
img{display:block}
a{color:var(--accent);text-decoration-color:rgba(155,53,83,.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:600;
  margin:0 0 .45em;overflow-wrap:break-word;letter-spacing:-.01em;line-height:1.18}
:where(main) :where(h1){font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.02em;font-weight:500}
:where(main) :where(h2){font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.018em;font-weight:500}
:where(main) :where(h3){font-size:clamp(20px,1.7vw,22px);line-height:1.25}
:where(main) :where(p){margin:0 0 1em}
:where(main) :where(ul,ol){padding-left:1.1em}
h1 em,h2 em,.hl{font-style:italic;color:var(--accent);font-weight:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label: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 !important;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,112px) 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:12px;font-size:12.5px;font-weight:650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.hx-eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.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,19.5px);line-height:1.65;color:var(--ink2);max-width:62ch}
.hx-head{max-width:760px;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-eyebrow::after{content:"";width:26px;height:1px;background:var(--gold)}
.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 26px;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);letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 24px rgba(155,53,83,.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:#fff;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(42,26,32,.4);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}
@media (prefers-reduced-motion:no-preference){ .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)}

/* ═══ 🧭 HEADER v2 — 30 Sep 2026 (brief rule 8b) ══════════════════════════
   Utility bar: live open/closed status, the (invented) address, the phone,
   monochrome social icons that go NOWHERE (href="#", "your page goes here"),
   and the DEMO pill. One line on desktop; on phones status, phone and pill.
   Header: sticky glass, 80px shrinking to 64px with a soft shadow once the
   page has moved (a class set by an IntersectionObserver on a sentinel).
   ⛔ Without JS the panels still open on :focus-within / :hover, and the
   Menu button is a link to #hx-menu, which opens the drawer with :target. */
.utilbar{background:var(--navy);color:#F1E4E8;font-size:13px;position:relative;z-index:61}
.utilbar__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px);min-height:38px;display:flex;
  align-items:center;gap:6px 22px}
.hx-ub{display:inline-flex;align-items:center;gap:8px;color:#F1E4E8;white-space:nowrap;text-decoration:none;line-height:1.3}
.hx-ub svg{width:15px;height:15px;color:#E9B8C6;flex:0 0 auto}
a.hx-ub:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hx-ub b{color:#fff;font-weight:650}
.hx-status__dot{width:8px;height:8px;border-radius:50%;background:#9AA3AA;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.hx-status[data-open="1"] .hx-status__dot{background:#7FDCA9}
.hx-status[data-open="0"] .hx-status__dot{background:#F0A5B8}
.hx-ub--addr{margin-left:auto}
.hx-soc{display:flex;align-items:center;gap:2px}
.hx-soc a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#E9D3DA;text-decoration:none}
.hx-soc a:hover{background:rgba(255,255,255,.1);color:#fff}
.hx-soc svg{width:15px;height:15px}
.demostrip{display:inline-flex;gap:7px;align-items:center;color:#fff;font-size:12px;text-decoration:none;line-height:1;
  padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);white-space:nowrap;font-weight:600;letter-spacing:.02em}
.demostrip b{color:#fff;font-weight:750;letter-spacing:.08em}
.demostrip:hover{background:rgba(255,255,255,.16)}
.demostrip__dot{width:7px;height:7px;border-radius:50%;background:#F0C06A;flex:0 0 auto}
/* ⛔ the disclosure is never dropped on a phone — it shortens to the pill */
.utilbar__demotail{display:inline;font-weight:500;letter-spacing:0;color:#F1E4E8}
@media (max-width:1180px){ .hx-soc{display:none} }
@media (max-width:980px){ .hx-ub--addr{display:none} .hx-ub--tel{margin-left:auto} }
@media (max-width:620px){ .utilbar__demotail{display:none} .utilbar__in{gap:6px 12px} .hx-ub--tel .hx-ub__l{display:none} }
/* ⛔ the DEMO pill is never cut: below 431px the phone leaves the bar (it is the round call
   button in the header), the pill keeps its size, and the status shortens with an ellipsis */
.demostrip{flex:0 0 auto}
.hx-status{min-width:0}
.hx-status__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:430px){ .hx-ub--tel{display:none} .demostrip{margin-left:auto} }
/* 🔴 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. */
html[data-embedded] .demostrip{display:none !important}

.hx-sentinel{position:absolute;top:0;left:0;width:1px;height:120px;pointer-events:none}
.hx-hd{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid rgba(235,224,218,.9);transition:box-shadow .25s ease}
html.is-stuck .hx-hd{box-shadow:0 8px 28px rgba(43,29,33,.09)}
.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;transition:min-height .25s ease}
html.is-stuck .hx-hd__in{min-height:64px}
.hx-brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink) !important;text-decoration:none !important;white-space:nowrap;flex:0 0 auto;min-height:44px}
.hx-brand .nav__mark{width:44px;height:44px;flex:0 0 auto;transition:width .25s ease,height .25s ease}
html.is-stuck .hx-hd .hx-brand .nav__mark{width:38px;height:38px}
.hx-brand__t{display:flex;flex-direction:column;line-height:1}
.hx-brand__t b{font:500 23px/1.05 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.hx-brand__t b i{font-style:italic;color:var(--accent)}
.hx-brand__t small{font:650 10.5px/1.3 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-top:5px}
.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{position:relative;display:inline-flex;align-items:center;gap:7px;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}
/* the animated underline: grows from the centre on hover and focus; the current page keeps it, in the accent */
.hx-nav__a::after,.hx-dd__t::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;border-radius:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.hx-nav__a:hover::after,.hx-dd__t:hover::after,.hx-nav__a:focus-visible::after,.hx-dd__t:focus-visible::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);background:var(--accent)}
.hx-dd__t i{width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .22s ease;opacity:.75}
.hx-dd.is-open>.hx-dd__t i{transform:translateY(1px) rotate(225deg)}
/* the phone block: icon, a small label over the number */
.hx-tel{display:inline-flex;align-items:center;gap:10px;color:var(--ink) !important;text-decoration:none !important;white-space:nowrap;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:18px;height:18px}
.hx-tel__t{display:flex;flex-direction:column;line-height:1.15}
.hx-tel__t small{font:650 10.5px/1.2 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.hx-tel__t b{font:700 16px/1.2 var(--f);color:var(--ink)}
.hx-tel:hover .hx-tel__t b{color:var(--accent)}
.hx-hd .hx-hd__cta{min-height:48px;padding:10px 20px;font-size:15.5px;box-shadow:none;white-space:nowrap}
/* the current page, when it is the request page: the button wears a ring */
.hx-hd .hx-hd__cta[aria-current]{background:var(--acc-d);border-color:var(--acc-d);box-shadow:0 0 0 3px var(--acc-t),0 0 0 4px var(--accent)}
/* round call button — phones only */
.hx-call{display:none;width:46px;height:46px;border-radius:50%;place-items:center;background:var(--acc-t);color:var(--accent) !important;flex:0 0 auto}
.hx-call svg{width:20px;height:20px}
/* 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:24px;
  box-shadow:0 30px 80px rgba(43,29,33,.20),0 2px 6px rgba(43,29,33,.06);
  display:grid;grid-template-columns:1fr 1fr 320px;gap:0;overflow:hidden}
.hx-mm__col{padding:26px 22px 20px}
.hx-mm__col+.hx-mm__col{border-left:1px solid var(--line)}
.hx-mm__h{display:flex;align-items:center;gap:10px;font:700 11.5px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px 10px}
.hx-mm__h::before{content:"";width:16px;height:1px;background:var(--gold)}
.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:46px 1fr;gap:14px;align-items:center;padding:10px;border-radius:16px;
  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:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--acc-t);color:var(--accent)}
.hx-mm__ic svg{width:23px;height:23px}
.hx-mm__item b{display:flex;justify-content:space-between;gap:10px;color:var(--ink);font:600 17px/1.25 var(--fd)}
.hx-mm__item b span{font:650 13px/1.6 var(--f);color:var(--acc-d);white-space:nowrap}
.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:#F1E4E8;display:flex;flex-direction:column}
.hx-mm__side img{width:100%;height:150px;object-fit:cover}
.hx-mm__sb{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px}
.hx-mm__side b{font:500 21px/1.2 var(--fd);color:#fff}
.hx-mm__side p{margin:0;font-size:14.5px;line-height:1.5;color:#E6D3D9}
.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:#E9B8C6}
.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:#FCF9F7;font-size:14.5px}
.hx-mm__all span{color:var(--ink3)}
.hx-drop{left:0;top:calc(100% + 6px);min-width:270px;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px rgba(43,29,33,.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}
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){ .hx-mm,.hx-drop,.hx-drawer__p,.hx-drawer__bg,.hx-hd,.hx-hd__in,.hx-brand .nav__mark,.hx-nav__a::after,.hx-dd__t::after{transition:none !important} }
/* the Menu button (phones and tablets) */
.hx-burger{display:none;align-items:center;gap:10px;min-height:46px;padding:8px 16px 8px 14px;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;width:12px}.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:60px}
  html.is-stuck .hx-hd__in{min-height:60px}
  .hx-nav,.hx-hd .hx-tel{display:none}
  .hx-burger{display:inline-flex}
  .hx-call{display:grid;margin-left:auto}
  .hx-hd__in{gap:10px}
  .hx-brand .nav__mark,html.is-stuck .hx-hd .hx-brand .nav__mark{width:36px;height:36px}
  .hx-brand__t b{font-size:20px}
}
@media (max-width:700px){ .hx-hd .hx-hd__cta{display:none} }
@media (max-width:420px){ .hx-brand__t small{display:none} .hx-brand__t b{font-size:18.5px} .hx-brand{gap:9px} }
@media (max-width:350px){ .hx-burger__l{display:none} .hx-burger{padding:8px 13px} .hx-brand__t b{font-size:17px} }

/* the slide-in drawer (<1024) */
.hx-drawer{position:fixed;inset:0;z-index:95;visibility:hidden;pointer-events:none}
.hx-drawer__bg{position:absolute;inset:0;background:rgba(42,26,32,.5);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(42,26,32,.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:10px 14px 10px 18px;border-bottom:1px solid var(--line);min-height:64px}
.hx-drawer__hd .hx-brand .nav__mark{width:34px;height:34px}
.hx-drawer__hd .hx-brand__t b{font-size:19px}
.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:600 18px/1.3 var(--fd);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 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}
.hx-acc a .hx-mm__ic svg{width:19px;height:19px}
.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:#FCF9F7}
.hx-drawer__ft .hx-b{width:100%}
.hx-drawer__info{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--ink3);flex-wrap:wrap}
.hx-drawer__info .hx-soc a{color:var(--ink2);width:40px;height:40px}
.hx-drawer__info .hx-soc a:hover{background:var(--bg2);color:var(--ink)}
.hx-drawer__info .hx-soc{display:flex}
html.hx-lock,html.hx-lock body{overflow:hidden}
@media (min-width:1024px){ .hx-drawer{display:none} }

/* ---------- heroes ----------
   ⭐ The words sit on the cream, never on the photograph, so every glyph clears
   4.5:1 by construction. The home photo bleeds off the right edge and fades
   into the cream through a LINEAR mask from its left edge (no scrim, no blob);
   inner pages carry the photo in an arch frame beside the words.
   On phones and tablets the photo sits ABOVE the words, whole and visible. */
.hero.hx-hero{position:relative;background:var(--bg);overflow:hidden;isolation:isolate;margin:0}
.hx-hero--home{min-height:clamp(620px,78vh,760px);display:flex;align-items:center}
.hx-hero--home .hx-hero__img{position:absolute;top:0;right:0;bottom:0;width:56%;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.hx-hero__img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% 50%)}
@media (prefers-reduced-motion:no-preference){
  .hx-hero--home .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.05)}}
.hx-hero__in{width:100%;max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,100px) clamp(16px,4vw,40px) clamp(110px,10vw,140px)}
.hx-hero__copy{max-width:540px}
@media (min-width:1101px) and (max-width:1300px){ .hx-hero--home .hx-hero__copy{max-width:500px} }
.hx-hero h1{margin:0 0 20px}
.hx-hero__sub{color:var(--ink2);font-size:clamp(17px,1.5vw,19.5px);line-height:1.65;max-width:54ch;margin:0 0 28px}
.hx-chips{list-style:none;padding:0 !important;margin:26px 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:#fff;border:1px solid var(--line);color:var(--ink);font-size:14.5px;font-weight:550}
.hx-chips svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
.hx-rating{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--ink2);font-size:15px;flex-wrap:wrap}
.hx-stars{display:inline-flex;gap:2px;color:#C9973C}
.hx-stars svg{width:17px;height:17px}
.hx-rating b{font-weight:700;color:var(--ink)}
.hx-crumbs{font-size:14px;color:var(--ink3);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:var(--ink) !important;text-decoration:none}
.hx-crumbs a:hover{text-decoration:underline}
@media (max-width:1100px){
  .hx-hero--home{display:block;min-height:0}
  .hx-hero--home .hx-hero__img{position:relative;width:100%;aspect-ratio:16/9;z-index:0;
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 16%);mask-image:linear-gradient(0deg,transparent 0,#000 16%)}
  .hx-hero--home .hx-hero__in{padding-top:12px}
  .hx-hero__copy{max-width:680px}
}
@media (max-width:640px){ .hx-hero--home .hx-hero__img{aspect-ratio:4/3} .hx-hero .hx-row .hx-b{flex:1 1 100%} }

/* the inner-page hero: words left, the photograph in an arch on the right */
.hx-hero--page{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.hx-hero--page .hx-hero__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center;
  padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(104px,10vw,136px)}
.hx-hero--page h1{font-size:clamp(36px,4.4vw,56px)}
.hx-hero__copy--page{max-width:600px}
.hx-arch{position:relative;margin:0;justify-self:end;width:100%;max-width:470px}
.hx-arch__ph{border-radius:999px 999px 26px 26px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh-lg);background:var(--bg2);
  outline:1px solid rgba(167,128,76,.45);outline-offset:10px}
.hx-arch__ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hx-arch__tag{position:absolute;left:-26px;bottom:34px;background:#fff;border-radius:16px;box-shadow:var(--sh-lg);padding:14px 18px;
  display:grid;gap:2px;min-width:170px}
.hx-arch__tag small{font:700 11px/1.2 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.hx-arch__tag b{font:500 26px/1.1 var(--fd);color:var(--ink)}
.hx-arch__tag span{font-size:13.5px;color:var(--ink3)}
.hx-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:1/1.05;width:100%;max-width:500px;justify-self:end}
.hx-mosaic img{width:100%;height:100%;object-fit:cover;border-radius:22px;box-shadow:var(--sh)}
.hx-mosaic img:first-child{grid-row:span 2;border-radius:999px 999px 22px 22px}
@media (max-width:900px){
  .hx-hero--page .hx-hero__in{grid-template-columns:1fr;padding-top:20px}
  .hx-arch,.hx-mosaic{order:-1;justify-self:stretch;max-width:none}
  .hx-arch__ph{aspect-ratio:16/10;border-radius:26px;outline-offset:6px}
  .hx-arch__tag{left:14px;bottom:14px;padding:10px 14px;min-width:0}
  .hx-arch__tag b{font-size:21px}
  .hx-mosaic{aspect-ratio:16/10;grid-template-columns:1.4fr 1fr}
  .hx-mosaic img:first-child{border-radius:22px}
}
@media (max-width:560px){ .hx-arch__ph{aspect-ratio:4/3} }
/* the photo-less hero (privacy): the same cream band, the words alone */
.hx-hero--plain .hx-hero__in{grid-template-columns:1fr}

/* ---------- promise card: the white card on the hero's edge (the offer strip) ---------- */
.offerbar.hx-promise{position:relative;z-index:3;margin:-72px 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:18.5px;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:-56px}
  .hx-promise__card{grid-template-columns:1fr}
  .hx-promise__i{border-left:0;border-top:1px solid var(--line);padding: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} }

/* ---------- service cards ---------- */
.hx-grid{display:grid;gap:22px;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(-3px);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 .6s ease}
a.hx-card:hover .hx-card__ph img{transform:scale(1.04)}
.hx-card__tag{position:absolute;left:14px;top:14px;font:700 12px/1 var(--f);letter-spacing:.06em;padding:8px 12px;border-radius:999px;background:#fff;color:var(--acc-d)}
.hx-card__b{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.hx-card__b h3{margin:0;font-size:23px}
.hx-card__b p{margin:0;font-size:15.5px;line-height:1.6}
.hx-card__more{margin-top:auto;padding-top:10px;font-weight:650;color:var(--accent);font-size:15px}
.hx-card__more::after{content:" \2192"}
@media (max-width:1000px){ .hx-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .hx-grid{grid-template-columns:1fr} }
.hx-more{margin-top:36px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ---------- splits ---------- */
.hx-split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,80px);align-items:center}
.hx-split--r{grid-template-columns:6fr 5fr}
.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;object-position:var(--pos,50% 50%)}
.hx-split__ph--wide img{aspect-ratio:4/3}
.hx-split__ph--arch{border-radius:999px 999px 24px 24px}
.hx-split__ph figcaption{position:absolute;left:14px;bottom:14px;right:14px;background:rgba(255,255,255,.95);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='%237E2743' 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{grid-template-columns:1fr} .hx-split__ph img{aspect-ratio:4/3} .hx-split__ph--arch{border-radius:24px} }

/* ---------- the price menu ---------- */
.hx-menu{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hx-menu__grp{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(22px,3vw,34px)}
.hx-menu__grp h3{display:flex;align-items:center;gap:12px;font-size:25px;margin:0 0 4px}
.hx-menu__grp h3 .hx-mm__ic{width:40px;height:40px}
.hx-menu__grp h3 .hx-mm__ic svg{width:21px;height:21px}
.hx-menu__grp>p{font-size:14.5px;color:var(--ink3);margin:0 0 12px}
.hx-menu dl{margin:0}
.hx-menu__row{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-top:1px solid var(--line)}
.hx-menu__row:first-child{border-top:0}
.hx-menu__row dt{font:600 17px/1.35 var(--fd);color:var(--ink);display:flex;align-items:baseline;gap:10px;min-width:0}
.hx-menu__row dt::after{content:"";flex:1 1 auto;border-bottom:1px dotted var(--line2);transform:translateY(-4px);min-width:12px}
.hx-menu__row dd{margin:0;font:700 17px/1.35 var(--f);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hx-menu__row p{grid-column:1 / -1;margin:0;font-size:14.5px;line-height:1.5;color:var(--ink3)}
.hx-menu__row p i{font-style:normal;color:var(--acc-d);font-weight:600}
.hx-menu--one{grid-template-columns:1fr}
@media (max-width:900px){ .hx-menu{grid-template-columns:1fr} }
.hx-pricebox{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);padding:clamp(22px,3vw,32px);border-top:3px solid var(--accent)}
.hx-pricebox h3{font-size:24px}
.hx-pricebox .hx-b{width:100%;margin-top:14px}
.hx-pricebox__fine{font-size:13.5px;color:var(--ink3);margin:12px 0 0}

/* ---------- 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,decimal-leading-zero);display:block;font:italic 500 30px/1 var(--fd);color:var(--accent);margin-bottom:14px}
.hx-steps h3{font-size:19px;margin:0 0 6px}
.hx-steps p{margin:0;font-size:15.5px;line-height:1.55}
.hx-steps--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .hx-steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .hx-steps,.hx-steps--3{grid-template-columns:1fr} }

/* ---------- 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-mm__ic{margin-bottom:16px}
.hx-facts h3{font-size:20px}
.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:19px}
.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:20px/1 var(--f)}
.hx-no p{margin:0;font-size:15.5px}
@media (max-width:900px){ .hx-no{grid-template-columns:1fr} }

/* ---------- compare (gel / dip / acrylic) ---------- */
.hx-cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hx-cmp>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(22px,2.6vw,30px);border-top:3px solid var(--line2)}
.hx-cmp>div.is-this{border-top-color:var(--accent)}
.hx-cmp h3{font-size:23px;margin:0 0 4px}
.hx-cmp dl{margin:14px 0 0;display:grid;gap:10px}
.hx-cmp dt{font:700 11.5px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.hx-cmp dd{margin:2px 0 0;font-size:15.5px;color:var(--ink)}
.hx-k{font-size:12.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
@media (max-width:900px){ .hx-cmp{grid-template-columns:1fr} }

/* ---------- prose + details ---------- */
.hx-prose{max-width:760px}
.hx-prose h2{font-size:clamp(25px,2.4vw,32px);margin:40px 0 12px}
.hx-prose h2:first-child{margin-top:0}
.hx-prose p,.hx-prose li{font-size:17px;line-height:1.75}

/* ---------- gallery ---------- */
.hx-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.hx-filter button{min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--ink);font:600 15px/1 var(--f);cursor:pointer}
.hx-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.hx-gal{columns:3 300px;column-gap:18px}
.hx-gal figure{break-inside:avoid;margin:0 0 18px;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.hx-gal img{width:100%;height:auto}
.hx-gal figcaption{padding:14px 18px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.hx-gal figcaption b{font:600 17px/1.3 var(--fd);color:var(--ink)}
.hx-gal figcaption span{font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-d);white-space:nowrap}
.hx-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hx-strip a{display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);position:relative;aspect-ratio:3/4}
.hx-strip a:nth-child(even){transform:translateY(28px)}
.hx-strip img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hx-strip a:hover img{transform:scale(1.04)}
.hx-strip span{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.95);color:var(--ink);font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px}
@media (max-width:900px){ .hx-strip{grid-template-columns:1fr 1fr} .hx-strip a:nth-child(even){transform:none} }

/* ---------- 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:26px;display:flex;flex-direction:column;gap:12px;margin:0}
.hx-rv .hx-stars svg{width:16px;height:16px}
.hx-rv blockquote{margin:0;color:var(--ink);font:17.5px/1.6 var(--fd)}
.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:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 16px/1 var(--fd);color:#fff;background:var(--accent);flex:0 0 auto;letter-spacing:.02em}
.hx-av--2{background:#7A5A3A}.hx-av--3{background:#4F6450}.hx-av--4{background:#3E4F66}
.hx-rv__svc{display:inline-block;font-size:12.5px;font-weight:650;color:var(--acc-d);background:var(--acc-t);border-radius:999px;padding:4px 10px}
.hx-score{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hx-score__n{font:500 64px/1 var(--fd);color:var(--ink)}
.hx-score .hx-stars svg{width:22px;height:22px}
.hx-score p{margin:4px 0 0;font-size:15px;color:var(--ink3)}
.hx-bars{display:grid;gap:8px;max-width:360px}
.hx-bars div{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;font-size:14px;color:var(--ink3)}
.hx-bars i{display:block;height:8px;border-radius:6px;background:var(--line)}
.hx-bars i b{display:block;height:100%;border-radius:6px;background:var(--accent)}
@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:470px;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:42px;height:42px;border-radius:50%;background:var(--acc-t);color:var(--accent);display:grid;place-items:center}
.hx-chatcard__av svg{width:24px;height:24px}
.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:#FCF9F7}
.hx-bub{max-width:90%;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} }

/* ---------- team ---------- */
.hx-team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hx-team>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:26px;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start}
.hx-team .hx-av{width:64px;height:64px;font-size:24px}
.hx-team h3{font-size:23px;margin:0 0 2px}
.hx-team small{display:block;color:var(--acc-d);font-weight:650;font-size:13px;letter-spacing:.04em;margin-bottom:8px}
.hx-team p{margin:0;font-size:15px;line-height:1.55}
.hx-team ul{list-style:none;padding:0 !important;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.hx-team li{margin:0;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
@media (max-width:1000px){ .hx-team{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .hx-team{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:500 clamp(32px,3.2vw,44px)/1.05 var(--fd);color:var(--ink)}
.hx-stats span{font-size:14.5px;color:var(--ink3)}
@media (max-width:900px){ .hx-stats{grid-template-columns:1fr 1fr} }

/* ---------- visit: hours, map ---------- */
.hx-hours{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(22px,3vw,32px)}
.hx-hours h3{font-size:24px}
.hx-hours table{width:100%;border-collapse:collapse;font-size:16px}
.hx-hours th,.hx-hours td{padding:11px 0;border-top:1px solid var(--line);text-align:left;font-weight:500;color:var(--ink2)}
.hx-hours td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.hx-hours tr:first-child th,.hx-hours tr:first-child td{border-top:0}
.hx-hours tr.is-today th,.hx-hours tr.is-today td{color:var(--acc-d);font-weight:700}
.hx-hours tr.is-today th::after{content:" \00b7 today";font-weight:600}
.hx-map{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin:0}
.hx-map svg{display:block;width:100%;height:auto}
.hx-map figcaption{padding:14px 20px;font-size:14.5px;color:var(--ink3);border-top:1px solid var(--line)}
.hx-visit{display:grid;grid-template-columns:7fr 5fr;gap:22px;align-items:start}
@media (max-width:900px){ .hx-visit{grid-template-columns:1fr} }
.hx-towns{list-style:none;padding:0 !important;margin:0;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}

/* ---------- 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:600 19px/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:24px;top:50%;width:11px;height:11px;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 48px}
.hx-faqgrp:last-child{margin-bottom:0}
.hx-faqgrp>h2{font-size:clamp(25px,2.2vw,30px);margin:0 0 16px}

/* ---------- closing band ---------- */
.hx-cta{background:var(--navy);color:#F1E4E8;overflow:hidden}
.hx-cta__in{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;max-width:1240px;margin:0 auto}
.hx-cta__b{padding:clamp(56px,7vw,96px) clamp(16px,4vw,40px)}
.hx-cta h2{color:#fff;max-width:18ch;font-family:var(--fd);font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.1;margin:0 0 .45em}
.hx-cta h2 em{color:#F2BFCD}
.hx-cta p{color:#EBDDE2;max-width:52ch;font-size:18px}
.hx-cta .hx-eyebrow{color:#F2BFCD}
.hx-cta__ph{position:relative;min-height:320px}
.hx-cta__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.hx-cta--flat .hx-cta__in{grid-template-columns:1fr}
.hx-cta--flat .hx-cta__b{text-align:center}
.hx-cta--flat h2,.hx-cta--flat p{margin-inline:auto}
.hx-cta--flat .hx-row{justify-content:center}
.hx-cta--flat .hx-eyebrow{justify-content:center}
@media (max-width:900px){ .hx-cta__in{grid-template-columns:1fr} .hx-cta__ph{order:-1;min-height:0;aspect-ratio:16/9}
  .hx-cta__ph img{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%)} }

/* ---------- related services ---------- */
.hx-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hx-rel a{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh);padding:16px 18px;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:600 17.5px/1.3 var(--fd);margin:0 0 2px}
.hx-rel span.hx-rel__l{font-size:14px;line-height:1.45;display:block}
@media (max-width:1000px){ .hx-rel{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .hx-rel{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(26px,2.4vw,32px)}
.hx-qform .field{margin:0 0 16px;border:0;padding:0;min-width:0}
.hx-qform .field--split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hx-qform label,.hx-qform legend{display:block;font:600 15px/1.3 var(--f);color:var(--ink);margin:0 0 6px;padding:0}
.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);min-height:48px}
.hx-qform textarea{min-height:110px;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-pills{display:flex;flex-wrap:wrap;gap:8px}
.hx-pills label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1.5px solid var(--line2);border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;margin:0}
.hx-pills input{width:auto;min-height:0;accent-color:var(--accent)}
.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:21px;margin:0 0 10px}
.hx-box p:last-child{margin:0}
.hx-warn{background:#FFF5F6;border:1px solid #EFCBD4;border-radius:var(--r);padding:22px 24px}
.hx-warn h3{color:var(--acc-d);font-size:21px}
.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:600 15px/30px var(--fd);text-align:center}
.hx-demonote{background:#FFF8EC;border:1px solid #EED8B0;border-radius:12px;padding:10px 14px;font-size:14.5px;color:var(--ink2);margin:0 0 18px}
.hx-demonote b{color:#7A4E12}
@media (max-width:900px){ .hx-form2{grid-template-columns:1fr} }
@media (max-width:560px){ .hx-qform .field--split{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.hx-ft{background:#F1E7E1;color:var(--ink2);padding:68px 0 36px;font-size:15px}
.hx-ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.hx-ft h4{font:700 12px/1.2 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.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:12px;align-items:center;font:500 23px/1 var(--fd);color:var(--ink);margin:0 0 16px}
.hx-ft__brand svg{width:40px;height:40px}
.hx-ft__addr{margin:0 0 10px;line-height:1.75}
.hx-ft__lic{font-size:14px;color:var(--ink3);margin:0}
.hx-ft .hx-soc{margin-top:14px;gap:6px}
.hx-ft .hx-soc a{width:40px;height:40px;border:1px solid var(--line2);color:var(--ink2) !important;background:#fff}
.hx-ft .hx-soc a:hover{border-color:var(--ink);color:var(--ink) !important}
.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 ═════════════════════════════════════════
   ⛔ Keep #launch, its aria-expanded / aria-controls and the open handler: the
   page buttons (data-chat) call the same open function. Bottom-RIGHT.
   💬 The floating button waits until the hero and the promise card have
   scrolled away (roofing reviewer, 30 Sep). ⛔ 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:50px;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(43,29,33,.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:#9BE7BD}
@media (prefers-reduced-motion:no-preference){
  .lchat__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#9BE7BD;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(380px,calc(100vw - 32px));max-height:min(600px,calc(100vh - 32px));display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px rgba(43,29,33,.28);overflow:hidden}
.chatbox__hd{display:flex;align-items:center;gap:10px;padding:14px 14px 14px 16px;background:var(--navy);color:#fff}
.launch__mark{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto}
.launch__mark svg{width:30px;height:30px}
.chatbox__t{font:600 16px/1.2 var(--fd);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:40px;height:40px;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:#FCF9F7}
.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:#FCF9F7}
.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;min-height:40px}
.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}
.opts form{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.opts form input.chip{flex:1 1 100%;cursor:text;border-radius:12px;font-weight:400}
.opts form .chip[type="submit"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-reduced-motion:reduce){ .launch{transition:none} }
.hx-drawer__x:focus-visible,.chatbox__x:focus-visible,.hx-burger:focus-visible,.hx-call:focus-visible{border-radius:999px}
/* the selling band names .wrap for its container */
.sellband .wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}

/* ── 🧲 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:#c96281;--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}