/* ═══════════════════════════════════════════════════════════════════════════
   HARLOW & PIKE BARBER CO. — Kissimmee. A Bots On Staff demonstration site,
   built 30 Sep 2026. Owner: "i also need a barbershop demo"; "it can be dark,
   just needs to be right for the website".
   ⭐ Dark premium: warm near-black ground, cream type, brass accent. The price
   menu sits on a cream paper card with oxblood ink, like the card on the wall.
   Measured (WCAG): cream #f4ede1 on ground #121010 16.3:1 · ink2 #d4cabb 11.9:1
   · ink3 #a89e90 on card #1f1b19 6.4:1 · brass #c9a45c on ground 8.2:1 and on
   card 7.2:1 · button label #16110b on brass 8.4:1 · oxblood #7b2432 on paper
   #f2ebdf 8.6:1 · paper ink2 #4a4038 on paper 8.9:1.
   ⛔ NO BLOBS: every scrim is a LINEAR gradient from an edge.
   ⛔ Never overflow-x:hidden on html/body (it breaks the sticky header): clip.
   ⛔ Class names are hx-*: section.hero stays on the hero because
   tools/shots-trade-sites.mjs crops from it.
   ═══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:88px}
body.v2{
  --brass:#c9a45c;
  --bg:#121010;--bg2:#1a1716;--card:#1f1b19;--card2:#27221f;--ink:#f4ede1;--ink2:#d4cabb;--ink3:#a89e90;
  --line:rgba(244,237,225,.12);--line2:rgba(244,237,225,.22);
  --acc:#c9a45c;--acc-d:#b48e46;--acc-hi:#dcbb78;--acc-ink:#16110b;--acc-t:rgba(201,164,92,.14);
  --paper:#f2ebdf;--paper2:#e8dfcf;--pink:#1b1714;--pink2:#4a4038;--oxb:#7b2432;
  --ok:#7fd6a0;--shut:#e59a8f;
  --r:16px;--r-sm:10px;
  --sh:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.35);
  --sh-lg:0 2px 4px rgba(0,0,0,.35),0 26px 70px rgba(0,0,0,.5);
  --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,"Times New Roman",serif;
  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;
}
.v2 :where(h1,h2,h3,h4){font-family:var(--fd);color:var(--ink);font-weight:600;margin:0 0 .45em;letter-spacing:-.01em;overflow-wrap:break-word}
.v2 :where(main) :where(h1){font-size:clamp(38px,5.2vw,66px);line-height:1.04}
.v2 :where(main) :where(h2){font-size:clamp(30px,3.4vw,46px);line-height:1.1}
.v2 :where(main) :where(h3){font-size:clamp(19px,1.6vw,22px);line-height:1.25}
.v2 :where(main) :where(p){margin:0 0 1em}
.v2 :where(main) :where(a){color:var(--acc);text-underline-offset:3px;text-decoration-color:rgba(201,164,92,.45)}
.v2 :where(main) :where(img){max-width:100%;display:block}
.v2 a:focus-visible,.v2 button:focus-visible,.v2 summary:focus-visible,.v2 [role=button]:focus-visible,.v2 input:focus-visible,.v2 select:focus-visible,.v2 textarea:focus-visible{outline:2px solid var(--acc-hi);outline-offset:3px}
.hx-skip{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--acc);color:var(--acc-ink)!important;padding:10px 16px;border-radius:8px;font-weight:650;text-decoration:none}
.hx-skip:focus{top:12px}
.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--alt{background:var(--bg2)}
.hx-eyebrow{display:inline-flex;align-items:center;gap:12px;font:650 12.5px/1.2 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 16px}
.hx-eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.hx-lead{font-size:clamp(17px,1.45vw,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-lead{margin-inline:auto}
.v2 main h1 .hl,.v2 main h2 .hl{color:var(--acc);font-style:italic}

/* ---------- 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(--acc);color:var(--acc-ink)!important;font:650 16px/1.2 var(--f);text-decoration:none!important;border:1.5px solid var(--acc);
  box-shadow:0 8px 24px rgba(201,164,92,.18);transition:background .18s ease,transform .18s ease,border-color .18s ease;cursor:pointer}
.hx-b:hover{background:var(--acc-hi);border-color:var(--acc-hi);transform:translateY(-1px)}
.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:rgba(244,237,225,.06);border-color:var(--ink)}
.hx-b--light{background:rgba(18,16,16,.35);color:#fff!important;border-color:rgba(255,255,255,.7);box-shadow:none}
.hx-b--light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.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;color:var(--acc)}
.hx-link::after{content:"\2192";transition:transform .18s ease}
.hx-link:hover::after{transform:translateX(3px)}

/* ══ 🧭 HEADER v2 (owner, 30 Sep: "make sure the headers on the demo sites all look way better") ══ */
/* the utility bar: open/closed from the shop's own hours, the address, the phone,
   the socials (href="#", never a real account) and the DEMO pill, on one line */
.utilbar{background:#0b0a09;color:#d9cfbf;font-size:13px;border-bottom:1px solid rgba(201,164,92,.18)}
.utilbar__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px);min-height:38px;display:flex;align-items:center;gap:18px}
.utilbar__st{display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
.utilbar__st b{color:#fff;font-weight:650}
.utilbar__dot{width:8px;height:8px;border-radius:50%;background:#8a8278;flex:0 0 auto}
.utilbar__st[data-state=open] .utilbar__dot{background:var(--ok);box-shadow:0 0 0 3px rgba(127,214,160,.18)}
.utilbar__st[data-state=shut] .utilbar__dot{background:var(--shut)}
.utilbar__addr{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:#d9cfbf}
.utilbar__addr svg,.utilbar__tel svg{width:14px;height:14px;color:var(--acc)}
.utilbar__sp{flex:1 1 auto}
.utilbar__tel{display:inline-flex;align-items:center;gap:6px;color:#fff!important;text-decoration:none;font-weight:600;white-space:nowrap}
.utilbar__tel:hover{color:var(--acc-hi)!important}
.hx-soc{display:inline-flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.hx-soc a{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#d9cfbf!important;transition:color .15s ease,background .15s ease}
.hx-soc a:hover{color:var(--acc-hi)!important;background:rgba(244,237,225,.06)}
.hx-soc svg{width:15px;height:15px}
.demostrip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:999px;border:1px solid rgba(201,164,92,.5);
  background:rgba(201,164,92,.1);color:#f4ede1!important;text-decoration:none!important;font-size:12px;line-height:1.2;white-space:nowrap}
.demostrip b{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--acc-hi)}
.demostrip__dot{width:6px;height:6px;border-radius:50%;background:var(--acc-hi)}
.demostrip:hover{background:rgba(201,164,92,.2)}
html[data-embedded] .demostrip{display:none!important}
@media (max-width:1180px){.utilbar__addr{display:none}}
@media (max-width:820px){.utilbar .hx-soc,.utilbar__sp{display:none}.utilbar__in{justify-content:space-between;gap:10px}.demostrip__tail{display:none}}
@media (max-width:420px){.utilbar__tel span{display:none}}

.hx-sentinel{position:absolute;top:120px;left:0;width:1px;height:1px;pointer-events:none}
.hx-hd{position:sticky;top:0;z-index:1000;background:rgba(18,16,16,.9);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent;transition:box-shadow .25s ease,border-color .25s ease,background .25s ease}
html[data-scrolled] .hx-hd{background:rgba(14,12,12,.94);border-bottom-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.hx-hd__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px);min-height:80px;display:flex;align-items:center;gap:22px;transition:min-height .25s ease}
html[data-scrolled] .hx-hd__in{min-height:64px}
.hx-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none!important;color:var(--ink)!important;white-space:nowrap}
.hx-brand .nav__mark{width:44px;height:44px;flex:0 0 auto;transition:width .25s ease,height .25s ease}
html[data-scrolled] .hx-hd .hx-brand .nav__mark{width:38px;height:38px}
.hx-brand__t{display:flex;flex-direction:column;line-height:1}
.hx-brand__n{font:600 22px/1.05 var(--fd);letter-spacing:.005em;color:var(--ink)}
.hx-brand__n i{font-style:italic;color:var(--acc)}
.hx-brand__tag{font:600 10.5px/1.2 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-top:5px}
.hx-nav{margin-left:auto;align-self:stretch;display:flex}
.hx-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.hx-nav__list>li{margin:0;display:flex;align-items:center;align-self:stretch}
.hx-nav__t{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 12px;color:var(--ink)!important;text-decoration:none!important;
  font:550 15px/1.2 var(--f);white-space:nowrap;cursor:pointer}
.hx-nav__t::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.hx-nav__t:hover::after,.hx-dd.is-open>.hx-nav__t::after{transform:scaleX(1)}
.hx-nav__t[aria-current]::after{transform:scaleX(1);background:var(--acc)}
.hx-nav__t[aria-current]{color:var(--acc-hi)!important}
.hx-nav__t svg{width:12px;height:12px;transition:transform .2s ease}
.hx-dd.is-open>.hx-nav__t svg{transform:rotate(180deg)}
.hx-mega,.hx-drop{position:absolute;top:100%;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;z-index:5}
.hx-dd.is-open>.hx-mega,.hx-dd.is-open>.hx-drop,
html:not(.hx-js) .hx-dd:hover>.hx-mega,html:not(.hx-js) .hx-dd:focus-within>.hx-mega,
html:not(.hx-js) .hx-dd:hover>.hx-drop,html:not(.hx-js) .hx-dd:focus-within>.hx-drop{visibility:visible;opacity:1;transform:none;transition:opacity .16s ease,transform .16s ease}
.hx-mega{left:0;right:0;background:#171413;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.hx-mega__in{max-width:1240px;margin:0 auto;padding:26px clamp(16px,4vw,40px) 30px;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:32px}
.hx-mega__k{font:650 12px/1.2 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 12px 12px}
.hx-mega__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.hx-mega__grid a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:14px;row-gap:2px;align-items:start;padding:10px 12px;border-radius:12px;text-decoration:none!important;color:var(--ink3)!important}
.hx-mega__grid a:hover,.hx-mega__grid a:focus-visible,.hx-mega__grid a[aria-current]{background:rgba(244,237,225,.05)}
.hx-mega__ico{grid-row:1 / span 2;align-self:center;width:44px;height:44px;border-radius:12px;background:var(--acc-t);color:var(--acc);display:grid;place-items:center;border:1px solid rgba(201,164,92,.25)}
.hx-mega__ico svg{width:22px;height:22px}
.hx-mega__grid b{color:var(--ink);font:600 16px/1.3 var(--fd)}
.hx-mega__grid small{font-size:13.5px;line-height:1.4;grid-column:2}
.hx-mega__grid em{grid-row:1;grid-column:3;font:650 14px/1 var(--f);font-style:normal;color:var(--acc)}
.hx-mega__all{margin:12px 0 0 12px;font-size:15px}
.hx-mega__side{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;margin:0}
.hx-mega__side img{width:100%;height:150px;object-fit:cover;display:block}
.hx-mega__side div{padding:16px 18px 18px;display:grid;gap:10px}
.hx-mega__side b{color:var(--ink);font:600 18px/1.3 var(--fd)}
.hx-mega__side p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.hx-mega__side .hx-b{width:100%;min-height:46px;font-size:15px;white-space:normal;text-align:center;line-height:1.25}
.hx-mega__tel{font-weight:650;text-align:center;color:var(--ink)!important;text-decoration:none!important;font-size:15px}
.hx-dd--drop{position:relative}
.hx-drop{right:-8px;width:290px;margin-top:-6px;background:#171413;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 48px rgba(0,0,0,.55);padding:8px}
.hx-drop a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none!important;color:var(--ink3)!important}
.hx-drop a:hover,.hx-drop a:focus-visible,.hx-drop a[aria-current]{background:rgba(244,237,225,.05)}
.hx-drop b{display:block;color:var(--ink);font:600 16px/1.3 var(--fd)}
.hx-drop small{font-size:13.5px}
.hx-tel{display:grid;grid-template-columns:36px auto;column-gap:10px;align-items:center;text-decoration:none!important;white-space:nowrap}
.hx-tel__i{grid-row:span 2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--acc)}
.hx-tel__i svg{width:17px;height:17px}
.hx-tel small{font:600 11px/1.1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.hx-tel b{font:650 15.5px/1.2 var(--f);color:var(--ink)}
.hx-tel:hover b{color:var(--acc-hi)}
.hx-hd .hx-hdcta{min-height:46px;padding:10px 18px;font-size:15px;box-shadow:none;white-space:nowrap}
.hx-hd .hx-hdcta svg{width:17px;height:17px}
@media (min-width:1024px) and (max-width:1279px){.hx-hd .hx-tel{display:none}.hx-nav__t{padding:10px 9px}.hx-nav__t::after{left:9px;right:9px}.hx-hd__in{gap:14px}}
/* phones: mark + name, a round call button and a "Menu" button (icon + word) */
.hx-navq{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hx-call{display:none;width:44px;height:44px;border-radius:50%;background:var(--acc);color:var(--acc-ink)!important;place-items:center;flex:0 0 auto}
.hx-call svg{width:19px;height:19px}
.hx-burger{display:none;min-height:44px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line2);cursor:pointer;
  align-items:center;gap:9px;color:var(--ink);font:600 15px/1 var(--f)}
.hx-burger__ico{display:inline-flex;flex-direction:column;gap:4px;width:18px}
.hx-burger__ico i{display:block;height:2px;border-radius:2px;background:currentColor}
.hx-burger__ico i:nth-child(2){width:70%}
.hx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,88vw);background:#161312;z-index:1200;display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s;box-shadow:-20px 0 60px rgba(0,0,0,.5);border-left:1px solid var(--line)}
.hx-navq:checked ~ .hx-drawer{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.hx-backdrop{position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.hx-navq:checked ~ .hx-backdrop{opacity:1;visibility:visible;transition:opacity .28s ease}
html.hx-lock,html.hx-lock body{overflow:hidden}
.hx-drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 18px;border-bottom:1px solid var(--line);min-height:64px}
.hx-drawer__hd .hx-brand .nav__mark{width:36px;height:36px}
.hx-drawer__hd .hx-brand__n{font-size:19px}
.hx-x{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;position:relative;flex:0 0 auto}
.hx-x i{position:absolute;left:13px;top:22px;width:18px;height:2px;border-radius:2px;background:var(--ink)}
.hx-x i:nth-child(1){transform:rotate(45deg)}.hx-x i:nth-child(2){transform:rotate(-45deg)}
.hx-drawer__nav{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:6px 10px 12px}
.hx-drawer__nav>a,.hx-acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 12px;
  font:600 18px/1.2 var(--fd);color:var(--ink)!important;text-decoration:none!important;border-bottom:1px solid var(--line);cursor:pointer}
.hx-drawer__nav>a[aria-current]{color:var(--acc)!important}
.hx-acc>summary{list-style:none}
.hx-acc>summary::-webkit-details-marker{display:none}
.hx-acc>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s ease}
.hx-acc[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.hx-acc>div{padding:4px 0 10px}
.hx-acc>div a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 12px 0 22px;border-radius:10px;font-size:16px;color:var(--ink2)!important;text-decoration:none!important}
.hx-acc>div a em{font-style:normal;color:var(--acc);font-weight:650;font-size:14.5px}
.hx-acc>div a[aria-current]{color:var(--acc)!important;font-weight:650;background:rgba(244,237,225,.05)}
.hx-drawer__ft{padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:10px;background:#161312}
.hx-drawer__ft .hx-b{width:100%}
.hx-drawer__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink3)}
.hx-drawer__meta .hx-soc a{width:44px;height:44px}
@media (max-width:1023px){
  .hx-nav,.hx-hd .hx-tel,.hx-hd .hx-hdcta{display:none}
  .hx-burger{display:inline-flex}
  .hx-call{display:inline-grid;margin-left:auto}
  .hx-hd__in,html[data-scrolled] .hx-hd__in{min-height:60px;gap:10px}
  .hx-hd .hx-brand .nav__mark,html[data-scrolled] .hx-hd .hx-brand .nav__mark{width:36px;height:36px}
  .hx-brand__n{font-size:19px}
}
@media (min-width:1024px){.hx-drawer,.hx-backdrop,.hx-burger,.hx-call{display:none!important}}
@media (prefers-reduced-motion:reduce){.hx-mega,.hx-drop,.hx-drawer,.hx-backdrop,.hx-nav__t::after,.hx-nav__t svg,.hx-hd,.hx-hd__in,.hx-brand .nav__mark{transition:none!important}}

/* ---------- hero (photo) ---------- */
.v2 .hero.hx-hero{position:relative;background:#0b0a09;padding:0;border:0;overflow:hidden;min-height:clamp(600px,82vh,780px);display:flex;align-items:center;isolation:isolate}
.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:62% 45%}
@media (prefers-reduced-motion:no-preference){.hx-hero__img img{animation:hxpush 24s cubic-bezier(.2,.6,.3,1) both;transform-origin:70% 50%}}
@keyframes hxpush{from{transform:scale(1)}to{transform:scale(1.06)}}
.hx-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,10,9,.94) 0%,rgba(11,10,9,.86) 32%,rgba(11,10,9,.55) 52%,rgba(11,10,9,.12) 70%,rgba(11,10,9,0) 82%),
             linear-gradient(0deg,rgba(11,10,9,.7) 0%,rgba(11,10,9,0) 32%)}
.hx-hero__in{width:100%;max-width:1240px;margin:0 auto;padding:clamp(72px,9vw,120px) clamp(16px,4vw,40px) clamp(112px,11vw,150px)}
.hx-hero__copy{max-width:640px}
.v2 .hx-hero h1{color:#fff;margin:0 0 20px;font-size:clamp(38px,5.2vw,66px);line-height:1.04}
.v2 .hx-hero--page h1{font-size:clamp(36px,4.6vw,58px)}
.v2 .hx-hero h1 .hl{color:var(--acc-hi)}
.hx-hero__sub{color:#ece4d6;font-size:clamp(17px,1.45vw,19.5px);line-height:1.6;max-width:54ch;margin:0 0 30px}
.hx-hero .hx-eyebrow{color:var(--acc-hi)}
.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:rgba(11,10,9,.62);border:1px solid rgba(244,237,225,.26);color:#fff;font-size:14.5px;font-weight:550}
.hx-chips svg{width:18px;height:18px;color:var(--acc-hi);flex:0 0 auto}
.hx-hero--page{min-height:clamp(480px,62vh,600px)}
@media (min-width:1101px){.hx-hero--page .hx-hero__scrim{background:linear-gradient(90deg,rgba(11,10,9,.95) 0%,rgba(11,10,9,.9) 40%,rgba(11,10,9,.68) 56%,rgba(11,10,9,.18) 76%,rgba(11,10,9,0) 90%),linear-gradient(0deg,rgba(11,10,9,.6) 0%,rgba(11,10,9,0) 30%)}}
.hx-hero--page .hx-hero__in{padding-bottom:clamp(96px,9vw,128px)}
.hx-crumbs{font-size:14px;color:#d9cfbf;margin:0 0 14px}
.hx-crumbs a{color:#fff!important;text-decoration:none!important}
.hx-crumbs a:hover{text-decoration:underline!important}
/* phones and tablets: the photograph is a plate on top, the words sit below it
   on the dark ground, so the cut is SEEN and never buried under a shade */
@media (max-width:1100px){
  .v2 .hero.hx-hero{min-height:0;display:block}
  .hx-hero__img{position:relative;inset:auto;z-index:0;aspect-ratio:16/9}
  .hx-hero__scrim{inset:auto;top:0;left:0;right:0;aspect-ratio:16/9;z-index:0;background:linear-gradient(180deg,rgba(11,10,9,0) 60%,rgba(11,10,9,.8) 88%,#0b0a09 100%)}
  .hx-hero__in{position:relative;z-index:1;margin-top:-8px;padding-top:0;padding-bottom:96px}
  .hx-hero__copy{max-width:720px}
}
@media (min-width:821px) and (max-width:1100px){.hx-hero__img,.hx-hero__scrim{aspect-ratio:21/9}}
@media (max-width:560px){.hx-hero__img,.hx-hero__scrim{aspect-ratio:4/3}.hx-hero .hx-b{flex:1 1 100%}}

/* ---------- the promise card on the hero's edge ---------- */
.v2 .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:var(--card);border:1px solid var(--line);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(--acc);margin-bottom:12px}
.hx-promise__i h3{font-size:18px;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){.v2 .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:20px;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}}
.v2 .offerbar.hx-promise--flat{margin-top:0}

/* ---------- service cards ---------- */
.hx-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.hx-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none!important;color:var(--ink2)!important;transition:transform .22s ease,border-color .22s ease;min-width:0}
a.hx-card:hover{transform:translateY(-3px);border-color:rgba(201,164,92,.5)}
.hx-card__ph{aspect-ratio:3/2;overflow:hidden;background:#0b0a09}
.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.04)}
.hx-card__b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.hx-card__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hx-card__b h3{margin:0;font-size:21px}
.hx-card__price{font:650 16px/1 var(--f);color:var(--acc);white-space:nowrap}
.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(--acc);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}}

/* ---------- the chooser (signature motion on the home page: "formation") ---------- */
.hx-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.hx-pill{font:600 15.5px/1.2 var(--f);padding:12px 18px;border-radius:999px;border:1.5px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer;min-height:46px;transition:background .2s ease,color .2s ease,border-color .2s ease}
.hx-pill:hover{border-color:var(--acc)}
.hx-pill[aria-selected=true]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.hx-pick{display:grid;grid-template-columns:1.1fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:360px}
.hx-pick__ph{position:relative;min-height:300px}
.hx-pick__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-pick__b{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:10px;justify-content:center}
.hx-pick__b h3{font-size:clamp(24px,2.4vw,32px);margin:0}
.hx-pick__price{font:650 15px/1.3 var(--f);color:var(--acc);letter-spacing:.02em}
.hx-pick__b p{margin:0}
.hx-panel[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.hx-panel.is-in .hx-pick__b>*{animation:hxup .38s cubic-bezier(.2,.7,.2,1) both}.hx-panel.is-in .hx-pick__b>*:nth-child(2){animation-delay:.04s}.hx-panel.is-in .hx-pick__b>*:nth-child(3){animation-delay:.08s}.hx-panel.is-in .hx-pick__b>*:nth-child(4){animation-delay:.12s}.hx-panel.is-in .hx-pick__ph img{animation:hxfade .45s ease both}}
@keyframes hxup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hxfade{from{opacity:.2}to{opacity:1}}
@media (max-width:820px){.hx-pick{grid-template-columns:1fr}.hx-pick__ph{min-height:0;aspect-ratio:16/10}
  .hx-pills{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding:2px clamp(16px,4vw,40px) 6px;scrollbar-width:none}.hx-pill{flex:0 0 auto}}

/* ---------- the price menu, on paper ---------- */
.hx-menu{background:var(--paper);color:var(--pink2);border-radius:6px;box-shadow:var(--sh-lg);padding:clamp(28px,4vw,56px);position:relative}
.hx-menu::before{content:"";position:absolute;inset:10px;border:1px solid rgba(123,36,50,.35);border-radius:3px;pointer-events:none}
.hx-menu__hd{text-align:center;margin:0 0 clamp(20px,3vw,34px)}
.v2 .hx-menu h2,.v2 .hx-menu h3{color:var(--pink)}
.hx-menu__hd p{margin:6px 0 0;color:var(--pink2);font-size:15px}
.hx-menu__k{font:650 12px/1.2 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--oxb);margin:0 0 8px}
.hx-menu__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px clamp(28px,4vw,64px)}
.hx-menu__grp{margin:0 0 18px}
.v2 .hx-menu__grp h3{font:600 italic 22px/1.2 var(--fd);color:var(--oxb);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid rgba(123,36,50,.3)}
.hx-mi{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;padding:8px 0}
.hx-mi b{font:600 17.5px/1.3 var(--fd);color:var(--pink)}
.hx-mi i{border-bottom:1.5px dotted rgba(74,64,56,.45);transform:translateY(-4px)}
.hx-mi span{font:650 17px/1 var(--f);color:var(--pink);font-variant-numeric:tabular-nums}
.hx-mi small{grid-column:1 / -1;font-size:14px;line-height:1.45;color:var(--pink2);margin-top:-2px}
.hx-mi a{color:var(--pink)!important;text-decoration:none!important}
.hx-mi a:hover b{text-decoration:underline;text-decoration-color:var(--oxb)}
.hx-menu__ft{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(123,36,50,.3);text-align:center;font-size:14.5px;color:var(--pink2)}
@media (max-width:760px){.hx-menu__cols{grid-template-columns:1fr}}
.hx-pricebox{background:var(--paper);color:var(--pink2);border-radius:6px;padding:22px 24px;margin:0 0 24px}
.hx-pricebox .hx-mi{padding:6px 0}

/* ---------- splits, ticks, facts ---------- */
.hx-split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,72px);align-items:center}
.hx-split--r{grid-template-columns:6fr 5fr}
.hx-split__ph{border-radius:var(--r);overflow:hidden;margin:0;box-shadow:var(--sh)}
.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-cap{font-size:13.5px;color:var(--ink3);padding:10px 4px 0;line-height:1.45}
.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}
.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='%23dcbb78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");border:1px solid rgba(201,164,92,.3)}
.hx-ticks b{color:var(--ink)}
.hx-note{background:var(--card);border-left:3px solid var(--acc);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;margin:0 0 24px;font-size:15.5px}
.hx-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hx-facts>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.hx-facts svg{width:28px;height:28px;color:var(--acc);margin:0 0 12px;display:block}
.hx-facts h3{font-size:20px}
.hx-facts p{margin:0;font-size:15.5px}
@media (max-width:900px){.hx-split,.hx-split--r{grid-template-columns:1fr}.hx-split__ph img{aspect-ratio:4/3}.hx-facts{grid-template-columns:1fr}}
.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:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;counter-increment:st}
.hx-steps>li::before{content:counter(st,decimal-leading-zero);display:block;font:600 italic 30px/1 var(--fd);color:var(--acc);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}
@media (max-width:1000px){.hx-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hx-steps{grid-template-columns:1fr}}

/* ---------- the shop band and gallery ---------- */
.hx-strip{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.hx-strip figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;min-height:340px}
.hx-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-strip figcaption,.hx-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 14px;color:#fff;font:600 15px/1.3 var(--f);
  background:linear-gradient(0deg,rgba(11,10,9,.9) 0%,rgba(11,10,9,.62) 55%,rgba(11,10,9,0) 100%)}
.hx-strip figcaption small,.hx-gal figcaption small{display:block;font-weight:500;font-size:13px;color:#e5dccd}
@media (max-width:820px){.hx-strip{grid-template-columns:1fr 1fr}.hx-strip figure:first-child{grid-column:1 / -1}.hx-strip figure{min-height:240px}}
.hx-gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;grid-auto-flow:dense;gap:14px}
.hx-gal figure{margin:0;position:relative;border-radius:var(--r-sm);overflow:hidden;background:#0b0a09}
.hx-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hx-gal figure:hover img{transform:scale(1.04)}
.hx-gal .is-big{grid-column:span 2;grid-row:span 2}
.hx-gal .is-tall{grid-row:span 2}
@media (max-width:1000px){.hx-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}}
@media (max-width:560px){.hx-gal{grid-template-columns:1fr 1fr;grid-auto-rows:180px;gap:10px}.hx-gal .is-big{grid-column:1 / -1}.hx-gal figcaption{padding:36px 10px 10px;font-size:13.5px}}

/* ---------- barbers ---------- */
.hx-team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hx-bar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.hx-bar__ph{aspect-ratio:4/3;overflow:hidden}
.hx-bar__ph img{width:100%;height:100%;object-fit:cover}
.hx-bar__b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.hx-bar__b h3{font-size:26px;margin:0}
.hx-bar__role{font:650 12px/1.3 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0!important}
.hx-bar__b p{margin:0;font-size:15.5px}
.hx-bar__days{margin-top:auto!important;padding-top:10px;border-top:1px solid var(--line);font-size:14px!important;color:var(--ink3)}
@media (max-width:1100px){.hx-team{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hx-team{grid-template-columns:1fr}}

/* ---------- reviews ---------- */
.hx-revsum{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-radius:999px;border:1px solid var(--line2);margin:0 0 28px}
.hx-revsum>b{font:600 26px/1 var(--fd);color:var(--ink)}
.hx-revsum span{font-size:15px;color:var(--ink2)}
.hx-stars{display:inline-flex;gap:2px;color:var(--acc)}
.hx-stars svg{width:17px;height:17px;fill:currentColor}
.hx-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hx-rev{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px}
.hx-rev__hd{display:flex;align-items:center;gap:12px}
.hx-rev__av{width:44px;height:44px;border-radius:50%;background:var(--acc-t);border:1px solid rgba(201,164,92,.35);color:var(--acc-hi);display:grid;place-items:center;font:600 16px/1 var(--fd);flex:0 0 auto}
.hx-rev__hd b{display:block;color:var(--ink);font-size:16px}
.hx-rev__hd small{color:var(--ink3);font-size:13.5px}
.hx-rev blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink2)}
.hx-rev__svc{margin-top:auto;font-size:13px;color:var(--ink3);letter-spacing:.04em}
@media (max-width:1000px){.hx-revs{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hx-revs{grid-template-columns:1fr}}

/* ---------- FAQ and details ---------- */
.hx-faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.hx-faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
.hx-faq details[open]{border-color:rgba(201,164,92,.4)}
.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:22px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);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}
.hx-faq details>div p:last-child{margin:0}

/* ---------- closing band: dark, brass hairlines from the edge ---------- */
.hx-cta{position:relative;overflow:hidden;background:#0b0a09;border-top:1px solid rgba(201,164,92,.25);padding:clamp(72px,9vw,120px) 0}
.hx-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(201,164,92,.07) 0 2px,transparent 2px 22px);
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 100%);mask-image:linear-gradient(90deg,transparent 35%,#000 100%)}
.hx-cta .hx-w{position:relative}
.v2 .hx-cta h2{max-width:20ch}
.hx-cta p{max-width:54ch;font-size:18px}

/* ---------- visit ---------- */
.hx-hours{width:100%;border-collapse:collapse;font-size:16px}
.hx-hours th,.hx-hours td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left}
.hx-hours th{font-weight:600;color:var(--ink)}
.hx-hours td{text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums}
.hx-hours tr.is-today th,.hx-hours tr.is-today td{color:var(--acc-hi)}
.hx-map{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#191615}
.hx-map svg{display:block;width:100%;height:auto}
.hx-towns{list-style:none;padding:0!important;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px}
.hx-towns li{margin:0;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);font-size:15px;color:var(--ink)}

/* ---------- forms ---------- */
.hx-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,36px);display:grid;gap:16px}
.hx-form__note{margin:0;padding:12px 14px;border-radius:10px;background:var(--acc-t);border:1px solid rgba(201,164,92,.35);color:var(--ink);font-size:14.5px}
.hx-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hx-form label{display:grid;gap:6px;font-size:14.5px;font-weight:600;color:var(--ink)}
.hx-form input,.hx-form select,.hx-form textarea{font:16px/1.4 var(--f);color:var(--ink);background:#141110;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;min-height:48px;width:100%}
.hx-form textarea{min-height:96px;resize:vertical}
.hx-form fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.hx-form legend{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:8px;padding:0}
.hx-form fieldset label{display:inline-flex;align-items:center;gap:8px;font-weight:500;padding:10px 14px;border:1px solid var(--line2);border-radius:999px;min-height:44px;cursor:pointer}
.hx-form fieldset input{min-height:0;width:auto;accent-color:var(--acc)}
.hx-form__msg{margin:0;padding:14px 16px;border-radius:10px;background:rgba(127,214,160,.1);border:1px solid rgba(127,214,160,.4);color:var(--ink)}
@media (max-width:640px){.hx-form__row{grid-template-columns:1fr}}

/* ---------- privacy / page head ---------- */
.hx-pagehead{background:var(--bg2);padding:clamp(56px,7vw,96px) 0 clamp(88px,9vw,120px);border-bottom:1px solid var(--line)}
.hx-pagehead .hx-crumbs{color:var(--ink3)}
.hx-prose{max-width:760px}
.v2 .hx-prose h2{font-size:clamp(24px,2.4vw,30px);margin:40px 0 12px}
.v2 .hx-prose h2:first-child{margin-top:0}
.hx-prose p,.hx-prose li{font-size:17px;line-height:1.7}
.hx-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hx-rel a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;text-decoration:none!important;color:var(--ink2)!important;transition:border-color .2s ease,transform .2s ease}
.hx-rel a:hover{border-color:rgba(201,164,92,.5);transform:translateY(-2px)}
.hx-rel b{display:flex;justify-content:space-between;gap:10px;color:var(--ink);font:600 18px/1.3 var(--fd);margin:0 0 4px}
.hx-rel b em{font:650 15px/1.3 var(--f);font-style:normal;color:var(--acc)}
.hx-rel span{font-size:14.5px;line-height:1.5}
@media (max-width:900px){.hx-rel{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hx-rel{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.hx-ft{background:#0b0a09;color:var(--ink3);padding:64px 0 36px;font-size:15px;border-top:1px solid var(--line)}
.hx-ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.v2 .hx-ft h4{font:650 12.5px/1.2 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
.hx-ft ul{list-style:none;padding:0;margin:0}
.hx-ft li{margin:0 0 8px}
.hx-ft a{color:var(--ink2)!important;text-decoration:none}
.hx-ft a:hover{color:var(--ink)!important;text-decoration:underline}
.hx-ft__brand{margin:0 0 16px}
.hx-ft__addr{margin:0 0 10px;line-height:1.7;color:var(--ink2)}
.hx-ft__legal{margin:40px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink3);line-height:1.6}
@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 bottom-right, panel above it. ⛔ Keep #launch and its
   aria-expanded/aria-controls: the page buttons (data-chat) call the same open. */
.launch{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:900;display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 20px 0 16px;border-radius:999px;cursor:pointer;background:var(--acc);color:var(--acc-ink);border:1px solid rgba(22,17,11,.25);
  box-shadow:0 6px 22px rgba(0,0,0,.5);font:650 15px/1.2 var(--f);transition:transform .16s ease,background .16s ease,opacity .25s ease,visibility .25s}
.launch:hover{background:var(--acc-hi)}
.lchat__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--acc-ink);flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){.lchat__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--acc-ink);animation:lchat-pulse 2.4s ease-out infinite}}
@keyframes lchat-pulse{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.8);opacity:0}}
.lchat__sm{display:none}
@media (max-width:480px){.lchat__lg{display:none}.lchat__sm{display:inline}}
html[data-hero-in-view] body.v2 .launch{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(12px)}
.chatbox{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:950;width:min(370px,calc(100vw - 32px));max-height:min(580px,calc(100vh - 32px));
  display:flex;flex-direction:column;background:#1a1716;color:var(--ink);border:1px solid var(--line2);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden}
.chatbox__hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:#141110}
.launch__mark{display:block;width:28px;height:28px;flex:0 0 auto}
.launch__mark svg{display:block;width:100%;height:100%}
.chatbox__t{margin-right:auto;font:600 16px/1.2 var(--fd);color:var(--ink)}
.chatbox__t small{display:block;font:500 12px/1.3 var(--f);color:var(--ink3)}
.chatbox__x{width:36px;height:36px;border-radius:50%;background:none;border:1px solid var(--line2);color:var(--ink);cursor:pointer;font-size:20px;line-height:1}
.log{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;min-height:160px}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.5}
.msg--bot{background:#262120;border:1px solid var(--line);align-self:flex-start;color:var(--ink);border-bottom-left-radius:4px}
.msg--me{background:var(--acc);color:var(--acc-ink);align-self:flex-end;border-bottom-right-radius:4px}
.opts{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 12px}
.chip{background:transparent;border:1px solid var(--line2);color:var(--ink);cursor:pointer;font:500 14px/1.3 var(--f);padding:9px 12px;border-radius:999px;text-align:left;min-height:40px}
.chip:hover{border-color:var(--acc);color:var(--acc-hi)}
.ask{display:flex;gap:7px;padding:0 14px 12px}
.ask__in{flex:1 1 auto;min-width:0;cursor:text;border-radius:10px;background:#141110}
.ask__go{flex:0 0 auto;background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:650}
@media (max-width:760px){.ask__in,.opts input{font-size:16px}}
.chatbox__fine{margin:0;font-size:12px;color:var(--ink3);padding:9px 14px;border-top:1px solid var(--line);line-height:1.45}
.hx-ft .hx-soc{margin-top:14px}
.hx-ft .hx-soc a{width:44px;height:44px;border:1px solid var(--line);margin-right:6px}
/* phones: the bar keeps the status, the phone and the DEMO pill on one line */
.ub-s{display:none}
@media (max-width:480px){
  .utilbar{font-size:12px}.utilbar__in{gap:8px}
  .ub-l{display:none}.ub-s{display:inline}
  .demostrip{padding:3px 8px 3px 7px}
  .hx-brand__tag{display:none}
}
@media (max-width:360px){.utilbar__tel{font-size:0;gap:0}.utilbar__tel svg{width:16px;height:16px}.utilbar__tel{min-width:30px;min-height:30px;justify-content:center}}
@media (max-width:374px){.hx-hd__in,html[data-scrolled] .hx-hd__in{padding:0 12px;gap:8px}.hx-hd .hx-brand{gap:8px}.hx-hd .hx-brand .nav__mark,html[data-scrolled] .hx-hd .hx-brand .nav__mark{width:30px;height:30px}.hx-hd .hx-brand__n{font-size:16.5px}.hx-burger{padding:0 10px;gap:7px}.hx-call{width:42px;height:42px}}


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