/* ═══════════════════════════════════════════════════════════════════════════
   BEACH CITIES COLLISION CENTER — demonstration site, Miami FL.
   🏗️ REBUILT 1 Oct 2026 (owner: "fix this one"). Built by
   botsonstaff-work/demo-upgrade/beach-builder/build.py; this file is its bc.css.
   ⭐ Light, like the botsonstaff.com home page: a cool white ground, deep navy
     ink, and the shop's signal red on the actions only. Headlines stay ink or
     white; red is never a paragraph colour.
   ⛔ NO BLOBS. Every scrim is a LINEAR gradient from an edge. No radial, no
     ellipse, anywhere in this file.
   ⛔ overflow-x is CLIP on html/body, never hidden: hidden breaks the sticky
     header.
   ⛔ Zero external requests: system fonts only, every photo beside the pages.
   ⛔ The old dark sheet carried a "GLASS DOORS" block (23 Sep, owner: "use
     glass buttons"). The glass survives here as the hero's secondary button and
     the chips: a translucent dark fill with a 1px light edge, measured on the
     hero's darkest and lightest backdrop.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --brand:#c8102e;            /* the shop's signal red. demo-sellband.mjs derives the band accent from it */
  --red:#c8102e;--red-d:#a10c24;--red-t:#fdecee;
  --navy:#0f1b2a;--navy2:#162538;
  --bg:#f5f6f8;--bg2:#e9edf2;--card:#fff;
  --ink:#0f1720;--ink2:#36414e;--ink3:#55616e;
  --line:#dde2e8;--line2:#c6cdd6;
  --ok:#1f7a4d;
  --r:18px;--r-sm:12px;
  --sh:0 1px 2px rgba(15,23,32,.05),0 8px 28px rgba(15,23,32,.07);
  --sh-lg:0 2px 4px rgba(15,23,32,.05),0 22px 60px rgba(15,23,32,.13);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fd:"Avenir Next",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink2);font-family:var(--f);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
:where(main,.hx-ft) :where(h1,h2,h3,h4){font-family:var(--fd);color:var(--ink);font-weight:700;margin:0 0 .45em;
  overflow-wrap:break-word;letter-spacing:-.012em}
:where(main) :where(h1){font-size:clamp(38px,5.4vw,66px);line-height:1.03;letter-spacing:-.032em}
:where(main) :where(h2){font-size:clamp(29px,3.4vw,44px);line-height:1.08;letter-spacing:-.028em}
:where(main) :where(h3){font-size:clamp(19px,1.6vw,21px);line-height:1.25}
:where(main) :where(p){margin:0 0 1em}
:where(main) :where(a){color:var(--red-d);text-decoration-color:rgba(161,12,36,.35);text-underline-offset:3px}
:where(main) :where(a):hover{text-decoration-color:var(--red-d)}
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.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--navy{background:var(--navy);color:#d6dee8}
.hx-s--navy :where(h2,h3){color:#fff}
.hx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red-d);margin:0 0 16px}
.hx-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.hx-s--navy .hx-eyebrow{color:#ffb3bd}
.hx-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink2);max-width:62ch}
.hx-s--navy .hx-lead{color:#c9d4e0}
.hx-head{max-width:780px;margin:0 0 clamp(32px,4vw,52px)}
.hx-head--c{margin-inline:auto;text-align:center}
.hx-head--c .hx-eyebrow{justify-content:center}
.hx-head--c .hx-lead{margin-inline:auto}

/* ---------- 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(--red);color:#fff !important;font:650 16px/1.2 var(--f);text-decoration:none !important;
  border:1.5px solid var(--red);box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px rgba(200,16,46,.24);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;cursor:pointer}
.hx-b:hover{background:var(--red-d);border-color:var(--red-d);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:#fff;border-color:var(--ink)}
/* the glass door: kept from the 23 Sep sheet, re-measured on the new heroes */
.hx-b--glass{background:rgba(10,16,24,.42);color:#fff !important;border-color:rgba(255,255,255,.62);box-shadow:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hx-b--glass:hover{background:rgba(10,16,24,.62);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(--red-d)}
.hx-link::after{content:"\2192";transition:transform .18s ease}
.hx-link:hover::after{transform:translateX(3px)}
.hx-s--navy .hx-link{color:#fff}

/* ═══ 🧭 HEADER v2 — utility bar, crafted mark, sticky glass header that shrinks,
   mega menu ≥1024, slide-in drawer below. ⛔ The socials link nowhere (href="#"). ═══ */
.hx-skip{position:absolute;left:12px;top:-60px;z-index:2000;background:#fff;color:var(--ink) !important;padding:10px 16px;
  border-radius:10px;font-weight:650;text-decoration:none !important;box-shadow:var(--sh-lg)}
.hx-skip:focus{top:10px}
.utilbar.hx-ub{background:var(--navy);color:#d9e1ea;font:500 13.5px/1.2 var(--f)}
.hx-ub__in{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,40px);min-height:38px;display:flex;align-items:center;gap:22px}
.hx-ub p{margin:0}
.hx-ub svg{width:15px;height:15px;flex:0 0 auto;color:#9fb3c8}
.hx-ub__status{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hx-ub__dot{width:8px;height:8px;border-radius:50%;background:#9aa4ae;box-shadow:0 0 0 3px rgba(154,164,174,.18)}
.hx-ub__status.is-open .hx-ub__dot{background:#4fd18b;box-shadow:0 0 0 3px rgba(79,209,139,.22)}
.hx-ub__status.is-open .hx-ub__st b{color:#8ee6b4}
.hx-ub__st b{color:#fff;font-weight:650}
.hx-ub__addr{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-left:22px;border-left:1px solid rgba(255,255,255,.16)}
.hx-ub a.hx-ub__tel{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-weight:600;white-space:nowrap;margin-left:auto}
.hx-ub a.hx-ub__tel:hover{text-decoration:underline}
.hx-soc{display:inline-flex;align-items:center;gap:4px}
.hx-soc a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#d9e1ea;text-decoration:none;transition:background .18s ease}
.hx-soc a:hover{background:rgba(255,255,255,.12);color:#fff}
.hx-soc svg{width:15px;height:15px;color:currentColor}
.hx-ub .demostrip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);color:#d9e1ea;font-size:12.5px;white-space:nowrap;text-decoration:none}
.hx-ub .demostrip b{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.hx-ub .demostrip__dot{width:6px;height:6px;border-radius:50%;background:#ff5c70}
@media (max-width:1279px){ .hx-ub__addr{display:none} .hx-ub .utilbar__demotail{display:none} }
@media (max-width:1023px){ .hx-ub__soc{display:none} }
@media (max-width:640px){ .hx-ub__in{gap:12px;min-height:36px} .hx-ub__tel{font-size:13px} .hx-ub__tel svg{display:none} .hx-ub .demostrip{padding:3px 9px 3px 8px} }
@media (max-width:430px){ .hx-ub__lbl,.hx-ub__more{display:none} .hx-ub__in{gap:10px} }
@media (max-width:359px){ .hx-ub a.hx-ub__tel{display:none} }
.hx-sentinel{position:absolute;top:0;left:0;width:1px;height:48px;pointer-events:none}
.hx-hd{position:sticky;top:0;z-index:1000;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 transparent;transition:box-shadow .25s ease,border-color .25s ease}
.hx-hd__in{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,40px);min-height:80px;display:flex;align-items:center;gap:16px;transition:min-height .25s ease}
html.hx-shrunk .hx-hd{box-shadow:0 10px 30px rgba(15,23,32,.10);border-bottom-color:var(--line)}
html.hx-shrunk .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 1 auto;min-width:0}
.hx-brand .nav__mark{width:42px;height:42px;flex:0 0 auto;transition:width .25s ease,height .25s ease}
html.hx-shrunk .hx-hd .hx-brand .nav__mark{width:36px;height:36px}
.hx-brand__t{display:flex;flex-direction:column;line-height:1}
.hx-brand__t b{font:800 20px/1 var(--fd);letter-spacing:-.02em;color:var(--ink)}
.hx-brand__t small{font:650 12px/1.2 var(--f);letter-spacing:.07em;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 10px;color:var(--ink) !important;
  text-decoration:none !important;font:550 15px/1.2 var(--f);white-space:nowrap;cursor:pointer}
.hx-nav__t svg{width:12px;height:12px;transition:transform .2s ease}
.hx-nav__t::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.hx-dd>.hx-nav__t::after{right:28px}
.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(--red);height:3px}
.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:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(15,23,32,.14)}
.hx-mega__in{max-width:1320px;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-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--red-d);margin:0 0 10px 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);column-gap:14px;align-items:center;padding:10px 12px;border-radius:12px;
  text-decoration:none !important;color:var(--ink2) !important}
.hx-mega__grid a:hover,.hx-mega__grid a:focus-visible,.hx-mega__grid a[aria-current]{background:var(--bg)}
.hx-mega__ico{grid-row:span 2;width:44px;height:44px;border-radius:12px;background:var(--red-t);color:var(--red-d);display:grid;place-items:center}
.hx-mega__ico svg{width:22px;height:22px}
.hx-mega__grid b{color:var(--ink);font:650 15.5px/1.3 var(--fd)}
.hx-mega__grid small{font-size:13.5px;line-height:1.4}
.hx-mega__all{margin:12px 0 0 12px;font-size:15px}
.hx-mega__side{background:var(--bg);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;margin:0}
.hx-mega__side img{width:100%;height:150px;object-fit:cover}
.hx-mega__side div{padding:16px 18px 18px;display:grid;gap:10px}
.hx-mega__side b{color:var(--ink);font:700 17px/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{left:-8px;width:300px;margin-top:-6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 48px rgba(15,23,32,.14);padding:8px}
.hx-drop a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none !important;color:var(--ink2) !important}
.hx-drop a:hover,.hx-drop a:focus-visible,.hx-drop a[aria-current]{background:var(--bg)}
.hx-drop b{display:block;color:var(--ink);font:650 15.5px/1.3 var(--fd)}
.hx-drop small{font-size:13.5px}
a.hx-call{display:inline-flex;align-items:center;gap:10px;text-decoration:none !important;color:var(--ink) !important;margin-left:8px;white-space:nowrap}
.hx-call__ic{width:38px;height:38px;border-radius:50%;background:var(--red-t);color:var(--red-d);display:grid;place-items:center;flex:0 0 auto}
.hx-call__ic svg{width:18px;height:18px}
.hx-call__t{display:flex;flex-direction:column;line-height:1.1}
.hx-call__t small{font:600 11.5px/1.2 var(--f);letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.hx-call__t b{font:700 16px/1.2 var(--f);color:var(--ink)}
.hx-hd .hx-b{min-height:44px;padding:10px 18px;font-size:15px;box-shadow:none;white-space:nowrap;gap:8px}
.hx-hd .hx-b svg{width:17px;height:17px}
.hx-callr{display:none}
.hx-navq{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hx-burger{display:none;height:44px;padding:0 14px 0 12px;border-radius:999px;gap:8px;align-items:center;border:1.5px solid var(--line2);
  background:#fff;font:650 15px/1 var(--f);color:var(--ink);cursor:pointer}
.hx-burger__i{display:inline-flex;flex-direction:column;gap:4px}
.hx-burger i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .22s ease}
.hx-navq:checked ~ .hx-hd .hx-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hx-navq:checked ~ .hx-hd .hx-burger i:nth-child(2){opacity:0}
.hx-navq:checked ~ .hx-hd .hx-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,88vw);background:#fff;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(10,14,20,.18)}
.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(10,14,20,.5);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:12px 16px 12px 18px;border-bottom:1px solid var(--line)}
.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 17px/1.2 var(--f);color:var(--ink) !important;text-decoration:none !important;border-bottom:1px solid var(--line);cursor:pointer}
.hx-drawer__nav>a[aria-current]{color:var(--red-d) !important}
.hx-acc>summary{list-style:none}
.hx-acc>summary::-webkit-details-marker{display:none}
.hx-acc>summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);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;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[aria-current]{color:var(--red-d) !important;font-weight:650;background:var(--bg)}
.hx-drawer__ft{padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:10px;background:#fff}
.hx-drawer__ft .hx-b{width:100%}
.hx-drawer__info{margin:0;display:grid;grid-template-columns:18px 1fr;gap:2px 8px;font-size:14.5px;color:var(--ink2);line-height:1.45}
.hx-drawer__info svg{width:16px;height:16px;color:var(--red);margin-top:2px}
.hx-drawer__info span{grid-column:2;color:var(--ink3)}
.hx-drawer__soc a{color:var(--ink2);width:44px;height:44px;background:var(--bg)}
.hx-drawer__soc{gap:8px}
@media (min-width:1024px) and (max-width:1279px){ .hx-hd .hx-call{display:none} .hx-brand__t small{display:none} .hx-hd__cta{margin-left:auto} .hx-nav__t{padding:10px 8px} .hx-nav__t::after{left:8px;right:8px} .hx-hd__in{gap:12px} }
@media (max-width:1023px){
  .hx-nav,.hx-hd .hx-call,.hx-hd .hx-hd__cta{display:none}
  .hx-burger{display:inline-flex}
  .hx-hd__in,html.hx-shrunk .hx-hd__in{min-height:60px;gap:10px}
  a.hx-callr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff !important;margin-left:auto;flex:0 0 auto}
  .hx-callr svg{width:19px;height:19px}
  .hx-brand .nav__mark{width:38px;height:38px}
  .hx-brand__t b{font-size:18px}
}
@media (min-width:1024px){ .hx-drawer,.hx-backdrop,.hx-burger{display:none !important} }
@media (max-width:640px){ .hx-brand__town{display:none} }
@media (max-width:374px){ .hx-brand__t small{display:none} .hx-burger__w{display:none} .hx-burger{padding:0 12px} }
@media (prefers-reduced-motion:reduce) and (max-width:0px){ .hx-mega,.hx-drop,.hx-drawer,.hx-backdrop,.hx-burger i,.hx-nav__t svg,.hx-hd,.hx-hd__in,.hx-nav__t::after,.hx-brand .nav__mark{transition:none !important} }

/* ═══ 🧭 HEADER v3 — 7 Oct 2026. Owner: "make sure headers are way better, this looks a little
   dated" (the boxed app-icon tile, the big solid call circle, the bordered caps MENU pill).
   Now: a drawn mark with no tile, calmer type, a slim utility bar, a glass bar with a hairline
   that shrinks and gains a soft shadow on scroll; on phones ONE slim "Estimate" pill and a
   clean icon menu button. Every v2 rule stays: status, address, "Call (656) …", socials go
   nowhere, 44px targets, focus rings, skip link, 4.5:1, no nav wrap at 1024–1440. */
.utilbar.hx-ub{font:500 13px/1.2 var(--f);background:#0c1622;border-bottom:1px solid rgba(255,255,255,.06)}
.hx-ub__in{min-height:34px;gap:20px}
.hx-ub__addr{padding-left:20px;border-left-color:rgba(255,255,255,.12)}
.hx-ub .demostrip{padding:3px 10px 3px 8px;font-size:12px;background:transparent;border-color:rgba(255,255,255,.2)}
.hx-ub .demostrip b{font-size:11px}
.hx-soc a{width:28px;height:28px}

.hx-hd{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid rgba(15,23,32,.07)}
.hx-hd__in{min-height:76px;gap:20px}
html.hx-shrunk .hx-hd{background:rgba(255,255,255,.92);box-shadow:0 1px 0 rgba(15,23,32,.04),0 12px 32px -12px rgba(15,23,32,.18);border-bottom-color:rgba(15,23,32,.08)}
html.hx-shrunk .hx-hd__in{min-height:62px}

/* the brand: a drawn mark, no tile, tight to a calm wordmark */
.hx-brand{gap:10px;color:var(--ink) !important}
.hx-brand .nav__mark{width:38px;height:38px;color:var(--ink)}
html.hx-shrunk .hx-hd .hx-brand .nav__mark{width:34px;height:34px}
.hx-brand__t b{font:760 19px/1 var(--fd);letter-spacing:-.025em}
.hx-brand__t small{font:550 12.5px/1.2 var(--f);letter-spacing:0;text-transform:none;color:var(--ink3);margin-top:4px}
.hx-ft__brand .nav__mark{color:#fff}
.hx-drawer__hd .nav__mark{width:34px;height:34px;color:var(--ink)}

/* nav: calmer type, the underline draws in from the left */
.hx-nav__t{font:500 15px/1.2 var(--f);color:var(--ink2) !important;padding:10px 12px;transition:color .18s ease}
.hx-nav__t:hover,.hx-dd.is-open>.hx-nav__t,.hx-nav__t[aria-current]{color:var(--ink) !important}
.hx-nav__t::after{left:12px;right:12px;bottom:2px;height:2px;background:var(--red)}
.hx-dd>.hx-nav__t::after{right:30px}
.hx-nav__t[aria-current]::after{height:2px}

@media (min-width:1024px) and (max-width:1279px){ .hx-nav__t{padding:10px 8px} .hx-nav__t::after{left:8px;right:8px} .hx-dd>.hx-nav__t::after{right:26px} .hx-hd__in{gap:12px} }
/* the phone block: a hairline ring, not a filled disc */
.hx-call__ic{width:36px;height:36px;background:transparent;border:1px solid var(--line2);color:var(--red-d)}
.hx-call__t small{font:500 12px/1.2 var(--f);letter-spacing:0;text-transform:none;color:var(--ink3)}
.hx-call__t b{font:650 15.5px/1.2 var(--f)}
a.hx-call:hover .hx-call__ic{border-color:var(--red);background:var(--red-t)}
/* the one strong action */
.hx-hd .hx-hd__cta{min-height:46px;padding:10px 20px;font-weight:650;box-shadow:0 1px 2px rgba(200,16,46,.25),0 8px 20px -6px rgba(200,16,46,.55)}
.hx-hd .hx-hd__cta:hover{box-shadow:0 1px 2px rgba(200,16,46,.3),0 12px 26px -6px rgba(200,16,46,.6)}

/* phone: the slim pill and the clean menu button */
.hx-est{display:none}
@media (max-width:1023px){
  .hx-hd__in{min-height:60px;gap:8px;padding:0 clamp(16px,3vw,28px)}
  html.hx-shrunk .hx-hd__in{min-height:56px}
  .hx-brand{gap:8px}
  .hx-brand .nav__mark,html.hx-shrunk .hx-hd .hx-brand .nav__mark{width:32px;height:32px}
  .hx-brand__t b{font-size:17.5px}
  .hx-brand__t small{font-size:12px;margin-top:3px}
  a.hx-callr{display:none !important}
  a.hx-est{position:relative;display:inline-flex;align-items:center;gap:7px;margin-left:auto;height:40px;padding:0 15px 0 13px;border-radius:999px;
    background:var(--red);color:#fff !important;text-decoration:none !important;font:650 14.5px/1 var(--f);white-space:nowrap;flex:0 0 auto;
    box-shadow:0 6px 16px -6px rgba(200,16,46,.6)}
  a.hx-est::after{content:"";position:absolute;inset:-2px 0}
  .hx-est svg{width:17px;height:17px}
  .hx-est:hover{background:var(--red-d)}
  .hx-burger{height:44px;min-width:44px;padding:0 4px 0 8px;margin-right:-6px;border:0;background:transparent;border-radius:12px;gap:7px;font:500 13.5px/1 var(--f);color:var(--ink)}
  .hx-burger:hover{background:rgba(15,23,32,.05)}
  .hx-burger__i{gap:5px;width:20px}
  .hx-burger i{height:1.75px;width:20px}
  .hx-burger i:nth-child(2){width:14px;margin-left:auto}
  .hx-navq:checked ~ .hx-hd .hx-burger i:nth-child(1){transform:translateY(6.75px) rotate(45deg)}
  .hx-navq:checked ~ .hx-hd .hx-burger i:nth-child(3){transform:translateY(-6.75px) rotate(-45deg)}
  .hx-x{border:0;background:var(--bg);width:44px;height:44px}
  .hx-x i{left:13px;top:21px;height:1.75px}
}
@media (max-width:420px){ .hx-burger__w{display:none} .hx-burger{padding:0 10px;margin-right:-10px} }
@media (max-width:359px){ .hx-brand__t small{display:none} .hx-est span{display:none} a.hx-est{width:44px;height:44px;padding:0;justify-content:center} }
.hx-burger:focus-visible,.hx-est:focus-visible,.hx-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:reduce) and (max-width:0px){ .hx-nav__t{transition:none} }

/* ---------- hero ---------- */
.hero.hx-hero{position:relative;background:var(--navy);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% 55%}
@media (min-width:0px){ .hx-hero__img img{animation:hxpush 24s cubic-bezier(.2,.6,.3,1) both;transform-origin:70% 60%} }
@keyframes hxpush{from{transform:scale(1)}to{transform:scale(1.06)}}
/* ⛔ edge fades only: from the left (under the words) and from the bottom (under the chips) */
.hx-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,15,23,.93) 0%,rgba(9,15,23,.86) 34%,rgba(9,15,23,.58) 54%,rgba(9,15,23,.14) 72%,rgba(9,15,23,0) 84%),
             linear-gradient(0deg,rgba(9,15,23,.6) 0%,rgba(9,15,23,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:660px}
.hx-hero h1{color:#fff;margin:0 0 20px;font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.034em}
.hx-hero--page h1{font-size:clamp(36px,4.8vw,60px)}
/* ⭐ the one accented phrase: white type over a red rule rising from the baseline (no salmon, no orange) */
.hx-hero h1 .hl{color:#fff;background:linear-gradient(0deg,rgba(228,33,62,.9) 0,rgba(228,33,62,.9) .14em,transparent .14em);padding:0 .04em}
.hx-hook{font:700 clamp(18px,1.8vw,22px)/1.2 var(--fd);color:#fff;margin:0 0 14px;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
.hx-hook::before{content:"";width:28px;height:3px;border-radius:2px;background:#e4213e}
.hx-hero__sub{color:#e6ecf2;font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:56ch;margin:0 0 30px}
.hx-hero .hx-b{min-height:54px}
.hx-chips{list-style:none;padding:0;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(9,15,23,.58);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:14.5px;font-weight:550}
.hx-chips svg{width:18px;height:18px;color:#fff;flex:0 0 auto}
.hx-hero--page{min-height:clamp(500px,64vh,620px)}
.hx-hero--page .hx-hero__in{padding-bottom:clamp(96px,9vw,128px)}
.hx-crumbs{font-size:14px;color:#d9e1ea;margin:0 0 14px}
.hx-crumbs a{color:#fff !important;text-decoration:none}
.hx-crumbs a:hover{text-decoration:underline}
/* the split hero: a drawing or a framed photo BESIDE the words */
.hx-hero--split{background:var(--navy)}
.hx-hero--split .hx-hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,64px);align-items:center}
.hx-hero__fig{margin:0;border-radius:var(--r);overflow:hidden;background:#13243a;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.hx-hero__fig svg{display:block;width:100%;height:auto}
/* ≤1100: the photo is a plate on top and the words sit below on navy, so the work is SEEN */
@media (max-width:1100px){
  .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(15,27,42,0) 60%,rgba(15,27,42,.78) 88%,#0f1b2a 100%)}
  .hx-hero__in{position:relative;z-index:1;margin-top:-8px;padding-top:0;padding-bottom:96px}
  .hx-hero--split .hx-hero__in{grid-template-columns:1fr;padding-top:40px}
  .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%} .hx-chips li{font-size:13.5px} }

/* ---------- promise card (the offer strip, on the hero's edge) ---------- */
.offerbar.hx-promise{position:relative;z-index:3;margin:-64px auto 0;max-width:1240px;padding:0 clamp(16px,4vw,40px)}
.hx-promise__card{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);display:grid;grid-template-columns:repeat(4,1fr)}
.hx-promise__i{padding:28px 26px;border-left:1px solid var(--line)}
.hx-promise__i:first-child{border-left:0}
.hx-promise__i svg{width:28px;height:28px;color:var(--red);margin-bottom:12px}
.hx-promise__i h3{font:700 17px/1.3 var(--fd);color:var(--ink);margin:0 0 6px}
.hx-promise__i p{font-size:15px;line-height:1.55;margin:0;color:var(--ink2)}
@media (max-width:980px){ .hx-promise__card{grid-template-columns:1fr 1fr} .hx-promise__i:nth-child(3){border-left:0} .hx-promise__i:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:560px){ .offerbar.hx-promise{margin-top:-40px} .hx-promise__card{grid-template-columns:1fr}
  .hx-promise__i{border-left:0;border-top:1px solid var(--line);padding: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} }

/* ---------- splits, ticks, notes ---------- */
.hx-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,72px);align-items:center}
.hx-split--r{grid-template-columns:7fr 5fr}
.hx-split--even{grid-template-columns:1fr 1fr}
.hx-split--top{align-items:start}
.hx-ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin:0;background:var(--bg2)}
.hx-ph img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5}
.hx-ph--wide img{aspect-ratio:4/3}
.hx-ph--cine img{aspect-ratio:16/9}
.hx-ph figcaption{font-size:13.5px;color:var(--ink3);padding:10px 14px 12px;line-height:1.45;background:#fff}
.hx-ticks{list-style:none;padding:0;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%;margin-top:1px;
  background:var(--red-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a10c24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/14px}
.hx-ticks b{color:var(--ink)}
.hx-note{background:#fff;border-left:3px solid var(--red);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;font-size:15.5px;color:var(--ink2);margin:0 0 24px}
.hx-note b{color:var(--ink)}
@media (max-width:900px){ .hx-split,.hx-split--r,.hx-split--even{grid-template-columns:1fr} .hx-ph img{aspect-ratio:4/3} }

/* ---------- photo cards + icon services ---------- */
.hx-grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.hx-grid--3{grid-template-columns:repeat(3,1fr)}
.hx-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;
  text-decoration:none !important;color:var(--ink2) !important;transition:transform .22s ease,box-shadow .22s ease;min-width:0}
a.hx-card:hover{transform:translateY(-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 .5s ease}
a.hx-card:hover .hx-card__ph img{transform:scale(1.04)}
.hx-card__tag{position:absolute;left:12px;top:12px;background:rgba(9,15,23,.78);color:#fff;font-size:12.5px;font-weight:650;padding:5px 10px;border-radius:999px}
.hx-card__b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.hx-card__b h3{margin:0;font:700 19px/1.25 var(--fd);color:var(--ink)}
.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(--red-d);font-size:15px}
.hx-card__more::after{content:" \2192"}
.hx-card__meta{font-size:13.5px;color:var(--ink3);font-weight:600}
@media (max-width:1100px){ .hx-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){ .hx-grid--3{grid-template-columns:1fr} }
@media (max-width:560px){ .hx-grid{grid-template-columns:1fr} }
.hx-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hx-svc a{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:var(--r);padding:24px 22px 22px;box-shadow:var(--sh);
  text-decoration:none !important;color:var(--ink2) !important;transition:transform .22s ease,box-shadow .22s ease}
.hx-svc a:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.hx-svc__ico{width:48px;height:48px;border-radius:14px;background:var(--red-t);color:var(--red-d);display:grid;place-items:center;margin-bottom:6px}
.hx-svc__ico svg{width:24px;height:24px}
.hx-svc b{font:700 18px/1.25 var(--fd);color:var(--ink)}
.hx-svc span{font-size:15px;line-height:1.5}
.hx-svc__n{position:absolute;right:20px;top:22px;font:600 13px/1 var(--mono);color:var(--ink3)}
.hx-svc a.hx-svc--feat{background:var(--navy);color:#cfd9e4 !important}
.hx-svc a.hx-svc--feat b{color:#fff}
.hx-svc a.hx-svc--feat .hx-svc__ico{background:rgba(255,255,255,.1);color:#fff}
.hx-svc a.hx-svc--feat .hx-svc__n{color:#9fb3c8}
.hx-svc .hx-card__more{margin-top:auto}
.hx-svc a.hx-svc--feat .hx-card__more{color:#fff}
@media (max-width:1100px){ .hx-svc{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .hx-svc{grid-template-columns:1fr} }
.hx-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.hx-mini div{background:#fff;border-radius:var(--r-sm);padding:18px 20px;border:1px solid var(--line);display:grid;grid-template-columns:40px 1fr;gap:4px 14px}
.hx-mini svg{width:24px;height:24px;color:var(--red);grid-row:span 2;margin-top:2px}
.hx-mini b{color:var(--ink);font:700 16px/1.3 var(--fd)}
.hx-mini span{font-size:14.5px;line-height:1.5}
@media (max-width:820px){ .hx-mini{grid-template-columns:1fr} }

/* ---------- the photo-estimate flow (the core of this demo) ---------- */
.hx-flow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,64px);align-items:start}
.hx-flow__steps{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:4px;counter-reset:fl}
.hx-flow__steps li{counter-increment:fl;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:16px 0;border-top:1px solid var(--line);margin:0}
.hx-flow__steps li:first-child{border-top:0}
.hx-flow__steps li::before{content:counter(fl);grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;
  font:700 16px/40px var(--fd);text-align:center}
.hx-flow__steps b{color:var(--ink);font:700 17.5px/1.3 var(--fd)}
.hx-flow__steps span{font-size:15.5px;line-height:1.55}
.hx-angles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 0;grid-column:2}
.hx-angles div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 10px 8px;text-align:center;font-size:13px;line-height:1.35;color:var(--ink2)}
.hx-angles svg{width:100%;height:58px;color:var(--ink);margin-bottom:4px}
.hx-angles b{display:block;color:var(--ink);font-size:13.5px}
.hx-flow__side{display:grid;gap:18px;position:sticky;top:96px}
@media (max-width:980px){ .hx-flow{grid-template-columns:1fr} .hx-flow__side{position:static} }
@media (max-width:420px){ .hx-angles{grid-template-columns:1fr 1fr 1fr;gap:6px} .hx-angles div{padding:8px 4px 6px;font-size:12px} }
.hx-phone{background:#fff;border-radius:28px;box-shadow:var(--sh-lg);overflow:hidden;border:1px solid var(--line)}
.hx-phone__hd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.hx-phone__hd svg{width:38px;height:38px;flex:0 0 auto}
.hx-phone__hd b{display:block;color:var(--ink);font-size:15.5px}
.hx-phone__hd small{color:var(--ink3);font-size:13px}
.hx-phone__bd{padding:18px;display:grid;gap:10px;background:#f6f7f9}
.hx-bub{max-width:88%;padding:11px 15px;border-radius:18px 18px 18px 6px;background:#fff;border:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink)}
.hx-bub--me{justify-self:end;background:var(--navy);border-color:var(--navy);color:#fff;border-radius:18px 18px 6px 18px}
.hx-opts{display:flex;flex-wrap:wrap;gap:8px}
.hx-opts span{padding:8px 13px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;font-size:14px;font-weight:600;color:var(--ink)}
.hx-opts span:first-child{border-color:var(--red);color:var(--red-d)}
.hx-phone__ft{padding:14px 18px 18px;display:grid;gap:8px;background:#fff;border-top:1px solid var(--line)}
.hx-phone__ft .hx-b{width:100%}
.hx-phone__ft small{font-size:13px;color:var(--ink3);text-align:center}

/* ---------- the repair order (paper) ---------- */
.ro{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden;color:var(--ink2);position:relative}
.ro__hd{background:#f7f8fa;border-bottom:1px solid var(--line);padding:18px 22px}
.ro__k{font:700 12px/1 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--red-d);margin:0 0 8px}
.ro__t{font:750 19px/1.25 var(--fd);color:var(--ink);margin:0 0 6px}
.ro__meta{font-size:13.5px;color:var(--ink3);margin:0}
.ro__row{display:grid;grid-template-columns:32px 1fr auto;gap:4px 12px;padding:14px 22px;border-top:1px solid var(--line);align-items:start}
.ro__row:first-of-type{border-top:0}
.ro__n{font:600 13px/1.5 var(--mono);color:var(--ink3)}
.ro__i{font:650 15.5px/1.4 var(--f);color:var(--ink)}
.ro__i small{display:block;font-weight:400;font-size:13.5px;color:var(--ink3)}
.ro__c{font:650 15px/1.4 var(--f);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;text-align:right}
.ro__row--no{background:var(--red-t)}
.ro__row--no .ro__i,.ro__row--no .ro__c{color:var(--red-d)}
.ro__why{grid-column:2 / -1;font-size:14px;line-height:1.55;color:var(--ink2);margin:6px 0 0}
.ro__ft{display:flex;justify-content:space-between;padding:14px 22px;border-top:2px solid var(--ink);font-weight:700;color:var(--ink)}
.ro__sig{font-size:13px;color:var(--ink3);padding:10px 22px 16px;margin:0}
.ro__stamp{position:absolute;top:16px;right:18px;font:700 11.5px/1 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--red-d);
  border:1.5px solid var(--red);border-radius:6px;padding:6px 8px;transform:rotate(-4deg);background:#fff}

/* ---------- corridor table ---------- */
.hx-corr{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.hx-corr__row{display:grid;grid-template-columns:1.2fr 1.3fr 1.1fr .9fr;gap:16px;padding:16px 22px;border-top:1px solid var(--line);align-items:center;font-size:15px}
.hx-corr__row:first-child{border-top:0}
.hx-corr__row--hd{background:var(--navy);color:#cfd9e4;font-size:12.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase}
.hx-corr b{color:var(--ink);font-family:var(--fd)}
.hx-corr__p{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:650}
@media (max-width:820px){
  .hx-corr__row--hd{display:none}
  .hx-corr__row{grid-template-columns:1fr auto;gap:2px 12px}
  .hx-corr__row>*:nth-child(1){grid-column:1}
  .hx-corr__row>*:nth-child(2){grid-column:1;font-size:14px}
  .hx-corr__row>*:nth-child(3){grid-column:1;font-size:14px;color:var(--ink3)}
  .hx-corr__row>*:nth-child(4){grid-column:2;grid-row:1 / span 3;text-align:right}
}

/* ---------- bands, life, quote ---------- */
.hx-life{position:relative;min-height:clamp(380px,48vw,560px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;color:#fff}
.hx-life img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hx-life::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(9,15,23,.86) 0%,rgba(9,15,23,.5) 34%,rgba(9,15,23,0) 62%)}
.hx-life .hx-w{padding-bottom:clamp(36px,5vw,64px)}
.hx-life p{margin:0;max-width:60ch;color:#e6ecf2;font-size:17px}
.hx-life strong{display:block;font:750 clamp(28px,3.4vw,46px)/1.08 var(--fd);letter-spacing:-.025em;color:#fff;margin:0 0 10px}
.hx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(28px,4vw,44px)}
.hx-stats div{border-top:2px solid var(--red);padding-top:14px}
.hx-stats b{display:block;font:750 clamp(28px,3vw,38px)/1 var(--fd);color:var(--ink);letter-spacing:-.02em;margin-bottom:6px}
.hx-stats span{font-size:14.5px;line-height:1.45}
.hx-s--navy .hx-stats b{color:#fff}
@media (max-width:820px){ .hx-stats{grid-template-columns:1fr 1fr} }

/* ---------- process ---------- */
.hx-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:st}
.hx-steps>li{margin:0;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:26px 24px;counter-increment:st}
.hx-steps>li::before{content:counter(st);display:block;width:40px;height:40px;border-radius:50%;background:var(--red-t);color:var(--red-d);
  font:700 17px/40px var(--fd);text-align:center;margin-bottom:14px}
.hx-steps h3{font-size:18.5px;margin:0 0 6px}
.hx-steps p{margin:0;font-size:15.5px;line-height:1.55}
.hx-steps small{display:block;margin-top:10px;font-size:13px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.hx-s--navy .hx-steps>li{background:var(--navy2);box-shadow:none;border:1px solid #24364d}
.hx-s--navy .hx-steps p{color:#c9d4e0}
.hx-s--navy .hx-steps small{color:#9fb3c8}
.hx-s--navy .hx-steps>li::before{background:#e4213e;color:#fff}
@media (max-width:980px){ .hx-steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .hx-steps{grid-template-columns:1fr} }

/* ---------- price bands ---------- */
.hx-bands{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hx-band{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:24px 22px;display:flex;flex-direction:column;gap:6px}
.hx-band b{font:700 17px/1.3 var(--fd);color:var(--ink)}
.hx-band__p{font:750 clamp(22px,2vw,28px)/1.1 var(--fd);white-space:nowrap;color:var(--ink);letter-spacing:-.02em;margin:6px 0 2px}
.hx-band span{font-size:14.5px;line-height:1.5}
@media (max-width:820px){ .hx-bands{grid-template-columns:1fr} }
.hx-qual{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hx-qual .hx-card__b h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px;vertical-align:middle;background:var(--ok)}
.hx-qual .hx-card--no .hx-card__b h3::before{background:var(--red)}
@media (max-width:820px){ .hx-qual{grid-template-columns:1fr} }

/* ---------- reviews ---------- */
.hx-revsum{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:999px;padding:10px 18px;box-shadow:var(--sh);margin:0 0 28px}
.hx-revsum b{font:750 24px/1 var(--fd);color:var(--ink)}
.hx-revsum span{font-size:14.5px;color:var(--ink2)}
.hx-stars{display:inline-flex;gap:2px;color:#e2a400}
.hx-stars svg{width:17px;height:17px;fill:currentColor}
.hx-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hx-rev{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:24px;margin:0;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(--navy);color:#fff;display:grid;place-items:center;font:700 15px/1 var(--fd);flex:0 0 auto}
.hx-rev__hd b{display:block;color:var(--ink);font-size:15.5px}
.hx-rev__hd small{color:var(--ink3);font-size:13.5px}
.hx-rev blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
@media (max-width:980px){ .hx-revs{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .hx-revs{grid-template-columns:1fr} }

/* ---------- faq ---------- */
.hx-faq{display:grid;gap:12px;max-width:860px}
.hx-faq details{background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh);overflow:hidden}
.hx-faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font:650 17px/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:24px;width:10px;height:10px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg);transition:transform .2s ease}
.hx-faq details[open] summary::after{transform:rotate(225deg);top:28px}
.hx-faq details>div{padding:0 22px 20px;font-size:16px;line-height:1.6}
.hx-faq details>div p:last-child{margin:0}

/* ---------- articles (repair notes) ---------- */
.hx-post{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,48px);align-items:center;background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin:0 0 24px}
.hx-post img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hx-post__b{padding:clamp(22px,3vw,36px) clamp(22px,3vw,36px) clamp(22px,3vw,36px) 0}
.hx-post__k{font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--red-d);margin:0 0 8px}
.hx-post h2{font-size:clamp(23px,2.4vw,30px);line-height:1.15;margin:0 0 10px}
.hx-post p{font-size:16px;margin:0 0 .8em}
.hx-post--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.hx-post--flip .hx-post__b{order:-1;padding:clamp(22px,3vw,36px) 0 clamp(22px,3vw,36px) clamp(22px,3vw,36px)}
@media (max-width:820px){ .hx-post,.hx-post--flip{grid-template-columns:1fr} .hx-post__b,.hx-post--flip .hx-post__b{order:0;padding:4px 22px 24px} }

/* ---------- related + cta ---------- */
.hx-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hx-rel a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);
  text-decoration:none !important;color:var(--ink2) !important;transition:border-color .18s ease,transform .18s ease}
.hx-rel a:hover{border-color:var(--ink);transform:translateY(-2px)}
.hx-rel b{color:var(--ink);font:700 16px/1.3 var(--fd)}
.hx-rel span{font-size:14px;line-height:1.45}
@media (max-width:980px){ .hx-rel{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .hx-rel{grid-template-columns:1fr} }
.hx-cta{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(84px,10vw,136px) 0;background:var(--navy)}
.hx-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hx-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,15,23,.92) 0%,rgba(9,15,23,.8) 42%,rgba(9,15,23,.35) 74%,rgba(9,15,23,.15) 100%)}
.hx-cta--flat::after{background:linear-gradient(90deg,rgba(228,33,62,.16) 0,rgba(228,33,62,0) 40%)}
.hx-cta--flat{border-top:4px solid var(--red)}
.hx-cta h2{color:#fff;max-width:20ch;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.028em;margin:0 0 14px}
.hx-cta p{color:#e1e8ef;max-width:54ch;font-size:18px;margin:0 0 28px}

/* ---------- footer ---------- */
.foot{background:#09121d;color:#b9c5d2;padding:clamp(56px,7vw,84px) 0 32px;font-size:15px}
.hx-ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.hx-ft h4{color:#fff;font:700 14px/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.hx-ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hx-ft a{color:#dbe3ec;text-decoration:none}
.hx-ft a:hover{color:#fff;text-decoration:underline}
.hx-ft__brand{display:flex;align-items:center;gap:12px;color:#fff;font:800 19px/1.2 var(--fd);margin:0 0 14px}
.hx-ft__brand svg{width:40px;height:40px}
.hx-ft__addr{margin:0 0 12px;line-height:1.7}
.hx-ft__small{font-size:13.5px;color:#9fb0c2;margin:0}
.hx-ft__legal{border-top:1px solid #1f2f42;margin-top:40px;padding-top:22px;font-size:13.5px;color:#9fb0c2}
.hx-ft__legal a{color:#dbe3ec}
@media (max-width:900px){ .hx-ft__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .hx-ft__grid{grid-template-columns:1fr} }

/* ---------- reveal (one quiet motion: things rise 12px as they arrive) ---------- */
html.hx-js .rise{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
html.hx-js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce) and (max-width:0px){ html.hx-js .rise{opacity:1;transform:none;transition:none} }

.hx-cap{color:var(--ink3)}
/* ▶ the "watch the whole process" link under the hero buttons */
.hx-watch{margin:16px 0 0}
a.hx-watch__a{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:650;font-size:16px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px}
a.hx-watch__a:hover{text-decoration-color:#fff}
a.hx-watch__a svg{width:26px;height:26px;color:#fff;flex:0 0 auto}

/* ═══ 💬 THE CHAT — the live shop widget (ssf-widget.css), rebranded to Beach Cities.
   Copied: the branded launcher with its "?" badge, the panel, the red header with the mark in a
   white disc, grey bot bubbles, red user bubbles, outlined chips, the dark "strong" chip and the
   input row. Only the colours are ours. ⛔ Scripted: chat.js makes no network call. ═══ */
.cw,.cw-btn{--ssf-primary:#c8102e;--ssf-primary-dark:#a10c24;--ssf-bg:#fff;--ssf-text:#1a1a1a;--ssf-bot-bubble:#f1f2f4;--ssf-radius:14px;--ssf-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.ssf-launcher{position:fixed;bottom:20px;right:20px;z-index:900;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:var(--ssf-primary);color:#fff;font-size:26px;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .15s ease,opacity .2s ease}
.ssf-launcher.ssf-branded{background:none;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:0}
.ssf-launcher.ssf-branded svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4))}
.ssf-launcher.ssf-branded:hover{transform:scale(1.09)}
.ssf-launcher .ssf-q{position:absolute;bottom:-3px;right:-3px;width:22px;height:22px;border-radius:50%;background:var(--ssf-primary);color:#fff;
  font:700 14px/22px "Segoe UI",sans-serif;text-align:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
html[data-hero-in-view] .cw-btn{visibility:hidden;opacity:0}
.ssf-panel{position:fixed;bottom:92px;right:20px;z-index:1300;width:360px;max-width:calc(100vw - 24px);height:540px;max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;background:var(--ssf-bg);border-radius:var(--ssf-radius);box-shadow:0 8px 40px rgba(0,0,0,.28);
  font-family:var(--ssf-font);color:var(--ssf-text);overflow:hidden}
.ssf-panel[hidden]{display:none}
/* 7 Oct: while the chat is open its launcher is hidden ([hidden] lost to display:flex and sat on the input row) */
.ssf-launcher[hidden]{display:none !important}
.ssf-header{background:var(--ssf-primary);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ssf-header .ssf-brandmark{flex:none;width:36px;height:36px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ssf-header .ssf-brandmark svg{width:78%;height:78%;display:block}
.ssf-header .ssf-title{font-weight:700;font-size:16px}
.ssf-header .ssf-subtitle{font-size:13px;opacity:.96}
.ssf-header .ssf-menu{margin-left:auto;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;opacity:.9;padding:2px 4px;min-width:36px;min-height:36px}
.ssf-header .ssf-close{margin-left:6px;background:none;border:none;color:#fff;font-size:25px;cursor:pointer;line-height:1;padding:2px 6px;min-width:36px;min-height:36px}
.cw-note{margin:0;padding:7px 14px;font-size:12px;line-height:1.4;color:#5b4a00;background:#fff6d8;border-bottom:1px solid #f0e2a8;flex:0 0 auto}
.ssf-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.ssf-msg{max-width:82%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;animation:ssf-pop .18s ease}
.ssf-msg.bot{background:var(--ssf-bot-bubble);align-self:flex-start;border-bottom-left-radius:4px}
.ssf-msg.user{background:var(--ssf-primary);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
@keyframes ssf-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ssf-typing{align-self:flex-start;padding:10px 14px}
.ssf-typing span{display:inline-block;width:7px;height:7px;margin:0 1.5px;border-radius:50%;background:#aaa;animation:ssf-blink 1s infinite}
.ssf-typing span:nth-child(2){animation-delay:.2s}.ssf-typing span:nth-child(3){animation-delay:.4s}
@keyframes ssf-blink{0%,100%{opacity:.25}50%{opacity:1}}
.ssf-choices{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;flex:0 0 auto}
.ssf-choices:empty{display:none}
.ssf-choices button,.ssf-choices .ssf-chip{border:1.5px solid var(--ssf-primary);color:var(--ssf-primary);background:#fff;border-radius:999px;padding:8px 14px;
  font-size:13px;font-family:var(--ssf-font);cursor:pointer;min-height:36px;text-decoration:none;display:inline-flex;align-items:center}
.ssf-choices button:hover,.ssf-choices .ssf-chip:hover{background:var(--ssf-primary);color:#fff}
.ssf-choices button.ssf-strong{background:#1b1c20;color:#fff;border-color:#1b1c20;font-weight:700}
.ssf-choices button.quiet{border-color:transparent;color:#55616e;text-decoration:underline;padding-inline:6px}
.ssf-choices button.quiet:hover{background:none;color:#1b1c20}
.ssf-choices button.tap{background:var(--ssf-primary);color:#fff;transform:scale(.96)}
.ssf-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #e6e6e6;flex:0 0 auto;margin:0}
.ssf-input-row input{flex:1;min-width:0;border:1.5px solid #d5d5d5;border-radius:999px;padding:9px 14px;font-size:16px;font-family:var(--ssf-font);outline:none}
.ssf-input-row input:focus{border-color:var(--ssf-primary)}
.ssf-input-row button{border:none;background:var(--ssf-primary);color:#fff;border-radius:50%;width:46px;height:46px;font-size:22px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.ssf-input-row button:disabled,.ssf-input-row input:disabled{opacity:.5;cursor:default}
@media (max-width:480px){ .ssf-panel{left:12px;right:12px;width:auto;bottom:80px;height:60vh;height:60dvh;max-height:calc(100dvh - 140px)} }
.cw-form__note{margin:0 0 4px;width:100%;font-size:12px;line-height:1.4;color:#5b4a00;background:#fff6d8;border-radius:8px;padding:6px 10px}
.cw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cw-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cw-ctl{display:flex;align-items:center;gap:8px;padding:7px 12px;background:#eef2f6;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2);flex:0 0 auto}
.cw-ctl[hidden]{display:none}
.cw-ctl span{margin-right:auto;font-weight:650;color:var(--ink)}
.cw-ctl button{font:650 12.5px/1 var(--f);min-height:32px;padding:0 11px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer}
.cw-ctl button:disabled{opacity:.6;cursor:default}
.cw-thumbs{align-self:flex-end;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:90%}
.cw-thumbs figure{margin:0;width:84px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.cw-thumbs img,.cw-thumbs .cw-ph{width:84px;height:64px;object-fit:cover;display:block}
.cw-ph{display:grid !important;place-items:center;background:#dfe5ec;font-size:22px}
.cw-thumbs figcaption{font-size:12px;line-height:1.3;padding:4px 6px;color:var(--ink2)}
.cw-card{align-self:stretch;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:13.5px}
.cw-card__hd{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;background:#f7f8fa;border-bottom:1px solid var(--line)}
.cw-card__hd b{color:var(--ink)}
.cw-card__tag{font:700 12px/1 var(--f);letter-spacing:.08em;color:#fff;background:#1b1c20;padding:5px 8px;border-radius:6px;white-space:nowrap}
.cw-card ul{list-style:none;margin:0;padding:4px 12px}
.cw-card li{padding:6px 0;border-top:1px solid var(--line);color:var(--ink2)}
.cw-card li:first-child{border-top:0}
.cw-card p{margin:0;padding:8px 12px 10px;font-size:12.5px;line-height:1.5;color:var(--ink3);border-top:1px solid var(--line)}
.cw-stage .row{display:flex;justify-content:space-between;gap:10px;padding:6px 12px;border-top:1px solid var(--line)}
.cw-stage .done b::before{content:"\2713  ";color:var(--ok)}
.cw-stage .now b{color:var(--red-d)}
.cw-inbox{align-self:stretch;display:flex;gap:10px;align-items:center;padding:9px 11px;background:#fff;border:1px dashed var(--line2);border-radius:12px;cursor:pointer}
.cw-inbox span{font-size:19px}
.cw-inbox b{display:block;font-size:12.5px;color:var(--ink);line-height:1.35}
.cw-inbox small{font-size:11.5px;color:var(--ink3)}
/* the message sheet: slides up over the chat; the message scrolls inside; never sideways */
.cw-mail{position:absolute;inset:0;z-index:5;background:#fff;display:flex;flex-direction:column;transform:translateY(24px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.cw-mail.is-in,.cw-mail.is-still{transform:none;opacity:1}
.cw-mail.is-still{transition:none}
.cw-mail__bar{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 14px;background:#1b1c20;color:#fff;flex:0 0 auto}
.cw-mail--shop .cw-mail__bar{background:#0f1b2a}
.cw-mail__k{font:700 11.5px/1.2 var(--f);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.cw-mail__lbl{font-size:11.5px;line-height:1.35;color:#c9d4e0;flex:1;min-width:0}
.cw-mail__x{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto}
.cw-mail__hd{padding:9px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;justify-content:space-between;align-items:baseline}
.cw-mail__hd b{color:var(--ink);font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.cw-mail__hd span{font-size:12px;color:var(--ink3);white-space:nowrap}
.cw-mail__scroll{flex:1 1 auto;min-height:0;background:#eef1f4;padding:8px;display:flex}
.cw-mail__frame{width:100%;height:100%;border:0;border-radius:10px;background:#fff;display:block}
.cw-mail__ft{padding:9px 12px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;background:#fff;flex:0 0 auto}
.cw-go{font:650 14.5px/1.2 var(--f);min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid #1b1c20;background:#fff;color:#1b1c20;cursor:pointer}
.cw-go.is-key{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 4px #fff,0 0 0 7px #f5b301}
.cw-go.tap{transform:scale(.96)}
.cw-tap{animation:cwtap .45s ease}
@keyframes cwtap{0%{transform:scale(1)}40%{transform:scale(.94)}100%{transform:scale(1)}}
.cw-mailin{align-self:stretch;background:#eef1f4;border-radius:12px;padding:8px}
.cw-mailin .cw-mail__lbl{display:block;margin:0 0 6px;color:var(--ink2);font-weight:650}
.cw-mailin .cw-mail__frame{height:380px}
@media (prefers-reduced-motion:reduce) and (max-width:0px){ .cw-mail{transition:none;transform:none;opacity:1} .cw-tap,.ssf-msg{animation:none} .ssf-launcher{transition:none} }

/* ═══ 🏠 THE HOME HERO: headline beside the open walkthrough (owner, 1 Oct: "this is how the home
   page top piece should be"). The photo stays visible: it fills the hero behind both. ═══ */
.hx-hero--chat .hx-hero__in{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(28px,4vw,56px);align-items:center}
.hx-hero--chat .hx-hero__scrim{background:linear-gradient(90deg,rgba(9,15,23,.92) 0%,rgba(9,15,23,.82) 36%,rgba(9,15,23,.45) 60%,rgba(9,15,23,.25) 100%),linear-gradient(0deg,rgba(9,15,23,.55) 0%,rgba(9,15,23,0) 32%)}
.cw--inline{position:relative;inset:auto;bottom:auto;right:auto;z-index:2;width:100%;max-width:none;height:640px;max-height:none;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.cw--inline .ssf-close{display:none}
.hx-hero--chat .hx-chatcap{margin:10px 0 0;font-size:13px;color:#d9e1ea;text-align:center}
@media (max-width:1100px){
  .hx-hero--chat .hx-hero__in{grid-template-columns:1fr}
  .cw--inline{height:600px;max-width:560px}
}
@media (max-width:560px){ .cw--inline{height:580px} }


/* ═══ 📸 FAST ONLINE ESTIMATE — the live shop’s form (.cdef), rebranded. Same steps, labels and
   styling; the fonts fall back to the system's condensed faces (no external requests). ═══ */
.cdef{max-width:760px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.12);padding:34px 30px;font-family:"Avenir Next Condensed","Arial Narrow",var(--f);color:#2F2F2F}
.cdef h3{font-family:"Avenir Next Condensed","Arial Narrow",var(--fd);font-weight:800;font-size:24px;color:#212121;text-transform:uppercase;margin:0 0 4px}
.cdef .sub{color:#575756;font-size:15px;margin:0 0 20px;line-height:1.55}
.cdef label{display:block;font-family:"Avenir Next Condensed","Arial Narrow",var(--fd);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#212121;margin:14px 0 6px}
.cdef input[type=text],.cdef input[type=tel],.cdef input[type=email],.cdef textarea,.cdef select{width:100%;box-sizing:border-box;border:1.5px solid #212121;border-radius:8px;padding:12px 14px;font-size:16px;font-family:var(--f);background:#fff;color:#212121;transition:border-color .12s,box-shadow .12s,transform .12s}
.cdef .cdvp-row{display:grid;grid-template-columns:112px 1fr 1fr;gap:10px}
@media(max-width:600px){.cdef .cdvp-row{grid-template-columns:1fr}.cdef{padding:26px 18px}}
.cdef input:focus,.cdef textarea:focus,.cdef select:focus{outline:none;border-color:#c8102e;box-shadow:0 5px 16px rgba(200,16,46,.24);transform:translateY(-2px)}
.cdef .prefrow{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.cdef .prefopt{font-family:var(--f);font-size:15px;text-transform:none;letter-spacing:0;color:#2F2F2F;display:flex;align-items:center;gap:6px;margin:0;cursor:pointer;min-height:44px}
.cdef .prefopt input{width:auto;margin:0}
.cdef .row{display:flex;gap:14px;flex-wrap:wrap}
.cdef .row>div{flex:1 1 220px}
.cdef .btn{display:inline-block;border:none;cursor:pointer;background:#c8102e;color:#fff;font-family:"Avenir Next Condensed","Arial Narrow",var(--fd);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.5px;padding:13px 22px;border-radius:8px;min-height:44px}
.cdef .btn.sec{background:#212121}
.cdef .btn:hover{opacity:.92}
.cdef .drop{border:2px dashed #c8102e;border-radius:12px;background:#FFF7F7;padding:18px;text-align:center;margin-top:6px}
.cdef .drop p{margin:8px 0 2px;color:#575756;font-size:14px}
.cdef .angles{font-size:13px;color:#6f6f6f;margin-top:6px;line-height:1.55}
.cdef .thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;justify-content:center}
.cdef .thumbs img{width:86px;height:64px;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.cdef .count{font-family:"Avenir Next Condensed","Arial Narrow",var(--fd);font-size:14px;margin-top:10px}
.cdef .count.ok{color:#1a8917}.cdef .count.nudge{color:#8a6100;font-weight:600}
.cdef .vinrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cdef .vinrow input{flex:1 1 240px}
.cdef .vinok{font-size:13px;color:#1a8917}
.cdef .submit{width:100%;margin-top:22px;padding:17px;font-size:17px;box-shadow:0 10px 26px rgba(200,16,46,.35)}
.cdef .fine{font-size:12.5px;color:#6f6f6f;text-align:center;margin-top:12px;line-height:1.5}
.cdef .demo{font-family:var(--f);font-size:13.5px;line-height:1.45;color:#5b4a00;background:#fff6d8;border:1px solid #f0e2a8;border-radius:10px;padding:10px 12px;margin:0 0 6px}
.cdef .done{text-align:center;padding:30px 10px}
.cdef .done h3{font-size:26px}
.cdvin{position:fixed;inset:0;background:rgba(12,13,16,.72);z-index:2100;display:flex;align-items:center;justify-content:center;padding:18px}
.cdvin[hidden]{display:none}
.cdvin__b{background:#fff;border-radius:16px;max-width:430px;width:100%;padding:24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.4);color:#1b1c20;text-align:center}
.cdvin__b button{display:block;width:100%;border:none;padding:15px;border-radius:11px;font-size:16px;font-weight:800;cursor:pointer;margin-bottom:9px;font-family:var(--f)}
.fe-tick{background:var(--navy);color:#e6ecf2;overflow:hidden}
.fe-tick ul{list-style:none;margin:0 auto;padding:12px clamp(16px,4vw,40px);max-width:1240px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;font-size:14px}
.fe-tick li{margin:0;display:inline-flex;align-items:center;gap:8px}
.fe-tick li::before{content:"";width:7px;height:7px;border-radius:50%;background:#e4213e}
.fe-tick b{color:#fff}

/* ═══ ⭐ 2 OCT 2026 UPGRADE — "way better than any body-shop site". Trust up top (proof bar,
   a named estimator with a face, reviews), one photo-first action, a picker that changes the
   next steps, one chat per page, a modern estimate page, and an Insurance page.
   ⛔ Old body-shop sites are the baseline to beat, not the model: no insurer logo wall, no
   four equal buttons, no OEM logos (text badges only). ⛔ No blobs: every shade is an edge fade. */
.hx-mega__art{display:grid;place-items:center;height:118px;background:linear-gradient(90deg,#0f1b2a 0,#162538 100%)}
.hx-mega__art svg{width:150px;height:auto}

/* the compact proof bar under every inner hero (replaces the 4-card strip that repeated) */
.bc-proof{position:relative;z-index:3;max-width:1240px;margin:-44px auto 0;padding:0 clamp(16px,4vw,40px)}
.bc-proof__in{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.bc-proof__i{padding:18px 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.bc-proof__i:first-child{border-left:0}
.bc-proof__i b{font:750 22px/1.15 var(--fd);color:var(--ink);letter-spacing:-.02em}
.bc-proof__i span{font-size:14px;line-height:1.4;color:var(--ink2)}
.bc-proof__star{color:#e2a400;margin-left:3px;font-size:.85em}
@media (max-width:900px){ .bc-proof__in{grid-template-columns:1fr 1fr} .bc-proof__i:nth-child(3){border-left:0} .bc-proof__i:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:1100px){ .bc-proof{margin-top:-56px} }
@media (max-width:420px){ .bc-proof__i{padding:14px 14px} .bc-proof__i b{font-size:19px} .bc-proof__i span{font-size:13px} }

/* ── the home hero: brighter, the photo SEEN, one big action ── */
.bc-hero .hx-hero__in{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(28px,4vw,56px);align-items:center}
.bc-hero .hx-hero__scrim{background:linear-gradient(90deg,rgba(9,15,23,.86) 0%,rgba(9,15,23,.7) 34%,rgba(9,15,23,.28) 58%,rgba(9,15,23,0) 76%),linear-gradient(0deg,rgba(9,15,23,.5) 0%,rgba(9,15,23,0) 30%)}
.bc-b--xl{min-height:62px !important;padding:16px 32px;font-size:18px;box-shadow:0 2px 4px rgba(0,0,0,.12),0 14px 34px rgba(200,16,46,.42)}
.bc-b--xl svg{width:22px;height:22px}
.bc-hero__acts{gap:14px}
.bc-hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:24px;color:#e6ecf2;font-size:15px}
.bc-rate{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(9,15,23,.62);border:1px solid rgba(255,255,255,.28)}
.bc-rate b{color:#fff;font:750 16px/1 var(--fd)}
.bc-rate .hx-stars svg{width:15px;height:15px}
.bc-luis-mini{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:14.5px;line-height:1.3}
.bc-luis-mini img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid #fff}
.bc-luis-mini small{display:block;color:#c9d4e0;font-size:13px}
/* the "start here" card: what happened × how you're paying → the next steps */
.bc-start{background:#fff;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.35);padding:24px 24px 22px;color:var(--ink2)}
.bc-start__k{font:700 13px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--red-d);margin:0 0 14px}
.bc-start fieldset{border:0;margin:0 0 16px;padding:0;min-width:0}
.bc-start legend{font:700 17px/1.3 var(--fd);color:var(--ink);margin:0 0 10px;padding:0}
.bc-pick__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bc-pick__opts label,.bc-seg__opts label{position:relative;display:block;cursor:pointer;margin:0}
.bc-pick__opts input,.bc-seg__opts input{position:absolute;opacity:0;width:1px;height:1px}
.bc-pick__opts span{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;font:650 15px/1.25 var(--f);color:var(--ink);transition:border-color .15s ease,background .15s ease}
.bc-pick__opts svg{width:22px;height:22px;flex:0 0 auto;color:var(--red-d)}
.bc-pick__opts label:hover span{border-color:var(--ink3)}
.bc-pick__opts input:checked+span{border-color:var(--red);background:var(--red-t);box-shadow:inset 0 0 0 1px var(--red)}
.bc-pick__opts input:focus-visible+span,.bc-seg__opts input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.bc-seg__opts{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg2);border-radius:999px;padding:4px;gap:4px}
.bc-seg__opts span{display:grid;place-items:center;min-height:44px;padding:6px 8px;border-radius:999px;font:650 14.5px/1.15 var(--f);color:var(--ink2);text-align:center;transition:background .15s ease,color .15s ease}
.bc-seg__opts input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,23,32,.12),0 4px 12px rgba(15,23,32,.08)}
.bc-next{border-top:1px solid var(--line);padding-top:14px}
.bc-next__k{font:700 13px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.bc-next ol{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px;counter-reset:nx}
.bc-next li{counter-increment:nx;display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:14.5px;line-height:1.45;margin:0}
.bc-next li::before{content:counter(nx);width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font:700 12.5px/24px var(--fd);text-align:center}
.bc-next li.is-warn::before{background:var(--red)}
.bc-next li b{color:var(--ink)}
.bc-next .hx-b{width:100%}
@media (min-width:0px){ .bc-next ol.is-swap li{animation:bcin .32s ease both} .bc-next ol.is-swap li:nth-child(2){animation-delay:.04s} .bc-next ol.is-swap li:nth-child(3){animation-delay:.08s} .bc-next ol.is-swap li:nth-child(4){animation-delay:.12s} }
@keyframes bcin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1100px){
  .bc-hero .hx-hero__in{grid-template-columns:minmax(0,1fr)}
  .bc-hero .hx-hero__scrim{background:linear-gradient(180deg,rgba(15,27,42,0) 62%,rgba(15,27,42,.7) 88%,#0f1b2a 100%)}
  .bc-start{max-width:620px}
}
@media (max-width:560px){ .bc-hero .hx-hero__in{padding-bottom:84px} .bc-start{padding:20px 16px 18px;border-radius:18px} .bc-pick__opts span{font-size:14px;padding:10px} .bc-seg__opts span{font-size:13.5px} .bc-b--xl{font-size:17px} }

/* the home trust card: figures + text badges (no logo wall) */
.bc-trust{position:relative;z-index:3;margin-top:-48px}
.bc-trust__card{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);padding:clamp(20px,3vw,30px) clamp(18px,3vw,34px)}
.bc-trust__figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bc-trust__figs div{display:flex;flex-direction:column;gap:4px;min-width:0}
.bc-trust__figs b{font:780 clamp(26px,2.8vw,36px)/1.05 var(--fd);color:var(--ink);letter-spacing:-.03em}
.bc-trust__figs span{font-size:14.5px;line-height:1.45}
.bc-badges{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.bc-badges li{margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid var(--line2);font:650 13.5px/1.2 var(--f);color:var(--ink)}
.bc-badges li::before{content:"";width:16px;height:16px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a10c24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-3 7.4-7 9-4-1.6-7-4.8-7-9V6z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center/16px}
@media (max-width:900px){ .bc-trust__figs{grid-template-columns:1fr 1fr} }
@media (max-width:1100px){ .bc-trust{margin-top:-40px} }

/* the estimator, by name, with a face */
.bc-est{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(32px,5vw,72px);align-items:start}
.bc-luis{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center;margin:8px 0 28px;padding:18px;background:var(--bg);border-radius:var(--r)}
.bc-luis img{width:132px;height:165px;border-radius:14px;object-fit:cover;object-position:50% 25%}
.bc-luis figcaption{display:flex;flex-direction:column;gap:4px}
.bc-luis b{font:750 19px/1.2 var(--fd);color:var(--ink)}
.bc-luis span{font-size:14px;color:var(--ink3)}
.bc-luis blockquote{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink)}
.bc-steps4{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px;counter-reset:s4}
.bc-steps4 li{counter-increment:s4;display:grid;grid-template-columns:34px 1fr;gap:14px;margin:0}
.bc-steps4 li::before{content:counter(s4);width:34px;height:34px;border-radius:50%;background:var(--red-t);color:var(--red-d);font:750 15px/34px var(--fd);text-align:center}
.bc-steps4 b{display:block;color:var(--ink);font-size:16.5px}
.bc-steps4 span{font-size:15px;line-height:1.5}
.bc-est__chat{position:sticky;top:96px;min-width:0}
.bc-est__copy{min-width:0}
.cw-note{max-width:100%;min-width:0}
.bc-est .cw--inline{height:620px}
.bc-est .hx-chatcap{margin:10px 0 0;font-size:13px;color:var(--ink3);text-align:center}
@media (max-width:1100px){ .bc-est{grid-template-columns:minmax(0,1fr)} .bc-est__chat{position:static} .bc-est .cw--inline{max-width:560px;margin:0 auto} }
@media (max-width:560px){ .bc-luis{grid-template-columns:96px 1fr;gap:14px;padding:14px} .bc-luis img{width:96px;height:120px} .bc-luis blockquote{font-size:15px} .bc-est .cw--inline{height:560px} }

/* before → after (or the honest progress rail) */
.bc-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bc-rail figure{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.bc-rail img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.bc-rail figcaption{padding:14px 18px 18px;font-size:15px;line-height:1.5}
.bc-rail figcaption b{display:block;color:var(--ink);font:700 17px/1.3 var(--fd);margin-bottom:2px}
.bc-rail__n{display:inline-block;font:700 12px/1 var(--mono);color:var(--red-d);letter-spacing:.06em;margin-bottom:8px}
@media (max-width:900px){ .bc-rail{grid-template-columns:1fr;max-width:560px} }
.bc-ba{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:3/2;background:var(--bg2);--x:50%}
.bc-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bc-ba__after{clip-path:inset(0 0 0 var(--x))}
.bc-ba__line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.bc-ba__line::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.bc-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.bc-ba input:focus-visible~.bc-ba__line::after{outline:3px solid var(--red);outline-offset:2px}
.bc-ba__tag{position:absolute;top:14px;padding:5px 11px;border-radius:999px;background:rgba(9,15,23,.78);color:#fff;font:650 13px/1.2 var(--f);pointer-events:none}
.bc-ba__tag--b{left:14px}.bc-ba__tag--a{right:14px}

/* the repair order, fixed at 375: the stamp sits in the header row, the total stacks */
.ro .ro__hd{padding-right:0}
.ro__hdrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ro .ro__stamp{position:static;transform:rotate(-3deg);flex:0 0 auto}
.ro__ft{flex-wrap:wrap;gap:4px 16px}
.ro__ft--sub{border-top:1px dashed var(--line2);font-weight:600;font-size:14.5px}

/* the express band, without a photo: the three posted prices are the picture */
.bc-xp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px);align-items:center}
.bc-xp .hx-band{min-width:0;padding:22px 18px}
.bc-xp .hx-band__p{font-size:clamp(20px,1.7vw,25px)}
@media (max-width:1100px){ .bc-xp{grid-template-columns:1fr} }

/* the life band: a stronger floor under the words (audit #17) */
.bc-life::after{background:linear-gradient(0deg,rgba(9,15,23,.92) 0%,rgba(9,15,23,.66) 38%,rgba(9,15,23,0) 70%)}

/* reviews: three on the front page, sized for a phone */
.bc-revs3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){ .bc-revs3{grid-template-columns:1fr;max-width:640px} }
.bc-revhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 32px;margin:0 0 clamp(24px,3vw,36px)}
.bc-revhead .hx-head{margin:0}
.bc-revhead .hx-revsum{margin:0}

/* the thumb bar on phones: photos first, call second (never "text us": no inbound text exists) */
.bc-thumb{display:none}
@media (max-width:760px){
  .bc-thumb{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:950;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(15,23,32,.1);transition:transform .25s ease}
  .bc-thumb a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;font:700 16px/1 var(--f);text-decoration:none}
  .bc-thumb svg{width:20px;height:20px}
  .bc-thumb__p{background:var(--red);color:#fff}
  .bc-thumb__c{border:1.5px solid var(--ink);color:var(--ink)}
  html[data-hero-in-view] .bc-thumb{transform:translateY(110%);visibility:hidden}
  .bc-home .cw-btn{display:none}
  .bc-home .foot{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce) and (max-width:0px){ .bc-thumb{transition:none} }

/* chat on a phone: a one-line note, a compact header (audit #8) */
.cw-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){ .ssf-header{padding:10px 12px} .ssf-header .ssf-subtitle{font-size:12px} }

/* ── the estimate page ── */
.fe-ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.fe-ticks li{margin:0;display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.45}
.fe-ticks li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--red-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a10c24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/12px}
.fe-ticks b{color:var(--ink)}
@media (max-width:640px){ .fe-ticks{grid-template-columns:1fr} }
.fe-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:1000px){ .fe-grid{grid-template-columns:minmax(0,1fr)} }
.fe-side{display:grid;gap:20px;position:sticky;top:96px}
@media (max-width:1000px){ .fe-side{position:static} }
.fe-card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(20px,3vw,28px)}
.fe-card h3{margin:0 0 10px}
.fe-form{background:#fff;border-radius:22px;box-shadow:var(--sh-lg);padding:clamp(22px,4vw,40px)}
.fe-form h2{font-size:clamp(26px,2.6vw,34px);margin:0 0 8px}
.fe-demo{font-size:14px;line-height:1.5;color:#5b4a00;background:#fff6d8;border:1px solid #f0e2a8;border-radius:12px;padding:10px 14px;margin:0 0 22px}
.fe-step{border:0;margin:0 0 26px;padding:0;min-width:0}
.fe-step>legend{display:flex;align-items:center;gap:10px;font:700 18px/1.3 var(--fd);color:var(--ink);margin:0 0 14px;padding:0}
.fe-step>legend span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font:700 14px/1 var(--fd);flex:0 0 auto}
.fe-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fe-row--3{grid-template-columns:110px minmax(0,1fr) minmax(0,1fr)}
@media (max-width:600px){ .fe-row,.fe-row--3{grid-template-columns:1fr} }
.fe-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.fe-f+.fe-f{margin-top:0}
.fe-f>label,.fe-lbl{font:650 15px/1.3 var(--f);color:var(--ink)}
.fe-f>label i,.fe-lbl i{font-style:normal;font-weight:500;color:var(--ink3)}
.fe-f input,.fe-f select,.fe-f textarea{width:100%;min-height:52px;border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px;font:400 16px/1.4 var(--f);color:var(--ink);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.fe-f textarea{min-height:96px;resize:vertical}
.fe-f input:focus,.fe-f select:focus,.fe-f textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(200,16,46,.14)}
.fe-f [aria-invalid=true]{border-color:#b00020;background:#fff8f8}
.fe-err{display:none;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#b00020}
.fe-err.is-on{display:flex}
.fe-err::before{content:"!";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#b00020;color:#fff;font:800 12px/1 var(--f);flex:0 0 auto}
.fe-help{font-size:13.5px;line-height:1.45;color:var(--ink3);margin:0}
.fe-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fe-seg label{position:relative;margin:0;cursor:pointer}
.fe-seg input{position:absolute;opacity:0;width:1px;height:1px}
.fe-seg span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:8px 10px;border:1.5px solid var(--line2);border-radius:12px;font:650 15px/1.2 var(--f);color:var(--ink);text-align:center}
.fe-seg svg{width:18px;height:18px;flex:0 0 auto;color:var(--red-d)}
.fe-seg input:checked+span{border-color:var(--red);background:var(--red-t);box-shadow:inset 0 0 0 1px var(--red)}
.fe-seg input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:400px){ .fe-seg span{font-size:14px;padding:8px 6px} .fe-seg svg{display:none} }
.fe-drop{border:2px dashed var(--line2);border-radius:16px;background:var(--bg);padding:22px 18px;text-align:center;transition:border-color .15s ease,background .15s ease}
.fe-drop.is-over{border-color:var(--red);background:var(--red-t)}
.fe-drop .hx-row{justify-content:center}
.fe-drop .hx-b{min-height:50px}
.fe-drop p{margin:10px 0 0;font-size:14px;color:var(--ink3)}
.fe-thumbs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.fe-thumbs:empty{display:none}
.fe-thumbs img{width:88px;height:66px;object-fit:cover;border-radius:10px;box-shadow:var(--sh)}
.fe-count{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--ink2)}
.fe-count.is-ok{color:var(--ok)}
.fe-errsum{display:none;background:#fff1f2;border:1.5px solid #f3b7bf;border-radius:12px;padding:12px 16px;margin:0 0 20px;color:#7a0016;font-size:15px}
.fe-errsum.is-on{display:block}
.fe-errsum ul{margin:6px 0 0;padding-left:20px}
.fe-errsum a{color:#7a0016}
.fe-submit{width:100%;min-height:58px;font-size:17px}
.fe-fine{font-size:13.5px;line-height:1.5;color:var(--ink3);text-align:center;margin:12px 0 0}
.fe-angles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.fe-angles div{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35;color:var(--ink3);text-align:center}
.fe-angles b{color:var(--ink);font-size:14px}
.fe-angles svg{width:100%;height:auto;color:var(--ink);margin-bottom:4px}
/* the thank-you, built from what the visitor typed */
.fe-done{display:grid;gap:18px}
.fe-done__h{display:flex;gap:14px;align-items:flex-start}
.fe-done__h svg{width:40px;height:40px;flex:0 0 auto;color:var(--ok)}
.fe-done__h h2{margin:0 0 4px}
.fe-mail{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.fe-mail__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink3)}
.fe-mail__bar b{color:var(--ink)}
.fe-mail__body{padding:20px clamp(16px,3vw,26px) 24px;font-size:15.5px;line-height:1.6}
.fe-mail__body h3{font-size:22px;margin:0 0 10px}
.fe-mail__body ol{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}
.fe-mail__sum{list-style:none;margin:12px 0 16px;padding:12px 14px;background:var(--bg);border-radius:12px;display:grid;gap:4px;font-size:14.5px}
.fe-mail__sum li{margin:0}
/* the sample estimate, line by line */
.est{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden;font-size:15px}
.est__hd{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:20px clamp(16px,3vw,28px);background:var(--navy);color:#d6dee8}
.est__hd b{display:block;color:#fff;font:750 19px/1.25 var(--fd)}
.est__hd small{font-size:13.5px}
.est__ok{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(79,209,139,.16);color:#9ff0c2;font:650 13.5px/1.2 var(--f)}
.est__ok svg{width:16px;height:16px}
.est__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;padding:14px clamp(16px,3vw,28px);border-top:1px solid var(--line)}
.est__row:first-of-type{border-top:0}
.est__i b{display:block;color:var(--ink);font-weight:650}
.est__i small{display:block;color:var(--ink3);font-size:13.5px;margin-top:2px}
.est__c{font:650 15px/1.3 var(--mono);color:var(--ink);white-space:nowrap;text-align:right}
.est__row--no{background:#fbf3f4}
.est__row--no .est__c{color:var(--ink3);text-decoration:line-through}
.est__row--no .est__i b::before{content:"Declined";display:inline-block;margin-right:8px;padding:2px 8px;border-radius:6px;background:var(--red);color:#fff;font:700 12px/1.5 var(--f);letter-spacing:.05em;text-transform:uppercase;vertical-align:2px}
.est__why{grid-column:1/-1;margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink2);border-left:3px solid var(--red);padding-left:12px}
.est__row--pm{background:var(--bg)}
.est__tot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;padding:16px clamp(16px,3vw,28px);border-top:2px solid var(--ink);background:#fff}
.est__tot span{font-size:14.5px}
.est__tot b{font:750 20px/1.2 var(--fd);color:var(--ink);text-align:right;white-space:nowrap}
.est__note{margin:0;padding:14px clamp(16px,3vw,28px) 18px;font-size:14px;line-height:1.55;color:var(--ink2);background:var(--bg);border-top:1px solid var(--line)}
@media (max-width:420px){ .est__row,.est__tot{grid-template-columns:1fr} .est__c,.est__tot b{text-align:left} }

/* ── the team (About) ── */
.bc-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.bc-team figure{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.bc-team img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.bc-team figcaption{padding:16px 18px 18px;display:flex;flex-direction:column;gap:3px}
.bc-team b{font:750 18px/1.25 var(--fd);color:var(--ink)}
.bc-team span{font-size:14px;color:var(--red-d);font-weight:650}
.bc-team p{margin:6px 0 0;font-size:14.5px;line-height:1.5}
@media (max-width:1000px){ .bc-team{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .bc-team{grid-template-columns:1fr} .bc-team figure{display:grid;grid-template-columns:120px 1fr} .bc-team img{height:100%;aspect-ratio:auto} .bc-team figcaption{padding:14px} }
.bc-follow{display:flex;flex-wrap:wrap;gap:10px}
.bc-follow li{list-style:none;margin:0;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:15px;color:var(--ink)}
.bc-follow svg{width:18px;height:18px;color:var(--ink)}
.bc-follow{padding:0;margin:0}

/* ── the insurance page ── */
.bc-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bc-cmp>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(20px,3vw,30px)}
.bc-cmp h3{margin:0 0 12px}
@media (max-width:820px){ .bc-cmp{grid-template-columns:1fr} }

/* footer: 44px tap rows on phones (audit #18) */
@media (max-width:760px){ .hx-ft ul{gap:0} .hx-ft ul a{display:inline-flex;align-items:center;min-height:44px} }
/* repair notes without a photo: a quiet three-up (no photo repeats to fill a slot) */
.bc-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bc-notes--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.bc-notes p{font-size:15.5px}
.bc-notes h3{margin:0 0 10px}
@media (max-width:900px){ .bc-notes{grid-template-columns:1fr} }
/* ═══ ⭐ 7 OCT 2026 — "EXTRA GOOD" PASS. Owner: "auto body beach cities needs to be extra good".
   The photo-estimate chat is the star on every page (the chat band), photo cards for the services,
   two reviews for each job, and phones get swipe rows instead of endless stacks.
   ⛔ No blobs: every shade here is a straight edge fade. ⛔ Nothing here prices a car by itself:
   the phone shows a range "Approved by Luis". */
.bc-live{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2fd47a;box-shadow:0 0 0 0 rgba(47,212,122,.55);flex:0 0 auto}
@media (min-width:0px){ .bc-live{animation:bclive 2.2s ease-out infinite} }
@keyframes bclive{0%{box-shadow:0 0 0 0 rgba(47,212,122,.55)}70%{box-shadow:0 0 0 9px rgba(47,212,122,0)}100%{box-shadow:0 0 0 0 rgba(47,212,122,0)}}

/* the chat band: closes every inner page */
.bc-chatband{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#cfd9e4;padding:clamp(72px,9vw,120px) 0;border-top:4px solid var(--red)}
.bc-chatband::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(228,33,62,.14) 0,rgba(228,33,62,0) 38%),linear-gradient(180deg,rgba(79,179,217,0) 55%,rgba(79,179,217,.08) 100%)}
.bc-chatband__in{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(36px,6vw,96px);align-items:center}
.bc-chatband__k{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;font:650 14px/1.2 var(--f)}
.bc-chatband h2{color:#fff;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.028em;margin:0 0 14px;max-width:20ch}
.bc-chatband__lede{color:#e1e8ef;font-size:18px;line-height:1.6;max-width:54ch;margin:0 0 22px}
.bc-chatband__ticks{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.bc-chatband__ticks li{display:grid;grid-template-columns:26px 1fr;gap:12px;margin:0;font-size:16px;line-height:1.5}
.bc-chatband__ticks svg{width:26px;height:26px;padding:5px;border-radius:50%;background:rgba(47,212,122,.16);color:#5fe39a}
.bc-chatband__ticks b{color:#fff}
.bc-chatband .hx-row{gap:14px}
.bc-chatband__watch{display:inline-flex;align-items:center;gap:10px;margin-top:20px;min-height:44px;color:#fff !important;font-weight:650;font-size:15.5px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.bc-chatband__watch:hover{text-decoration-color:#fff}
.bc-chatband__watch span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);font-size:10px}

/* the phone: what the customer sees, drawn in HTML so it stays sharp and reads aloud */
.bc-phone{margin:0;justify-self:center;width:100%;max-width:360px}
.bc-phone__scr{background:#fff;border-radius:38px;padding:12px;box-shadow:0 0 0 10px #1c2b3d,0 0 0 11px #31455c,0 40px 80px rgba(0,0,0,.45);overflow:hidden}
.bc-phone__hd{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;margin:-12px -12px 0;background:var(--red);color:#fff}
.bc-phone__mk svg{display:block;width:34px;height:34px}
.bc-phone__hd b{display:block;font:700 15px/1.2 var(--fd)}
.bc-phone__hd small{display:flex;align-items:center;gap:6px;font-size:12px;color:#fff}
.bc-phone__hd small i{width:7px;height:7px;border-radius:50%;background:#7dffb4;flex:0 0 auto}
.bc-phone__log{display:flex;flex-direction:column;gap:8px;padding:14px 4px 10px;font-size:14px;line-height:1.4}
.bc-bm{margin:0;max-width:86%;padding:9px 12px;border-radius:16px}
.bc-bm--bot{align-self:flex-start;background:#f1f2f4;color:#1a1a1a;border-bottom-left-radius:5px}
.bc-bm--me{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:5px}
.bc-bm--ph{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;width:74%}
.bc-bm--ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.bc-bm--card{align-self:stretch;max-width:none;background:#f3fbf6;border:1.5px solid #bfe8cf;color:var(--ink2);display:flex;flex-direction:column;gap:3px;padding:12px 14px}
.bc-bm__tag{display:inline-flex;align-items:center;gap:6px;color:#14653f;font:700 12.5px/1.2 var(--f)}
.bc-bm__tag svg{width:15px;height:15px}
.bc-bm--card b{color:var(--ink);font:700 14.5px/1.3 var(--fd)}
.bc-bm__amt{font:800 24px/1.15 var(--fd);color:var(--ink);letter-spacing:-.02em}
.bc-bm--card small{font-size:12.5px;color:var(--ink3)}
.bc-phone__in{margin:2px 0 0;padding:10px 14px;border-radius:999px;background:#f1f2f4;color:#5c6670;font-size:13px}
.bc-phone figcaption{margin-top:22px;text-align:center;font-size:13.5px;color:#a9bbcd}
@media (min-width:0px){
  html.hx-js .bc-phone .bc-bm{animation:bcbm .5s cubic-bezier(.2,.7,.3,1) both;animation-play-state:paused}
  html.hx-js .bc-phone.in .bc-bm{animation-play-state:running}
  .bc-phone .bc-bm:nth-child(2){animation-delay:.35s}.bc-phone .bc-bm:nth-child(3){animation-delay:.7s}
  .bc-phone .bc-bm:nth-child(4){animation-delay:1.05s}.bc-phone .bc-bm:nth-child(5){animation-delay:1.5s}
}
@keyframes bcbm{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:980px){ .bc-chatband__in{grid-template-columns:minmax(0,1fr)} .bc-phone{max-width:340px} }
@media (max-width:560px){ .bc-chatband .hx-b{flex:1 1 100%} .bc-chatband__lede{font-size:17px} .bc-chatband__ticks li{font-size:15px} }

/* photo cards for the services (home + Services page) */
.hx-svc--ph a{padding:0 0 20px;overflow:hidden;gap:6px}
.hx-svc--ph a > :not(.hx-svc__ph){margin-inline:22px}
.hx-svc__ph{display:block;aspect-ratio:3/2;overflow:hidden;margin:0 0 10px !important;background:var(--bg2)}
.hx-svc__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hx-svc--ph a:hover .hx-svc__ph img{transform:scale(1.045)}
.hx-svc--ph a:not(.hx-svc--feat) .hx-svc__ico{display:none}
.hx-svc--ph .hx-svc__n{top:14px;right:14px;margin:0 !important;padding:5px 9px;border-radius:999px;background:rgba(9,15,23,.72);color:#fff;z-index:1}
.hx-svc--ph a.hx-svc--feat{padding:26px 0 22px;justify-content:flex-start}
.hx-svc--ph a.hx-svc--feat .hx-svc__ico{background:var(--red);color:#fff}
@media (prefers-reduced-motion:reduce) and (max-width:0px){ .hx-svc__ph img{transition:none} }
/* phones: two across, photo and name, so seven services fit in two screens */
@media (max-width:560px){
  .hx-svc.hx-svc--ph{grid-template-columns:1fr 1fr;gap:12px}
  .hx-svc--ph a{padding-bottom:14px;border-radius:14px}
  .hx-svc--ph a > :not(.hx-svc__ph){margin-inline:12px}
  .hx-svc--ph b{font-size:15.5px}
  .hx-svc--ph a:not(.hx-svc--feat) > span:not(.hx-svc__ph):not(.hx-card__more){display:none}
  .hx-svc--ph .hx-card__more{font-size:13.5px}
  .hx-svc--ph a.hx-svc--feat{padding:16px 0 14px;justify-content:space-between}
  .hx-svc--ph a.hx-svc--feat > span:not(.hx-svc__ico):not(.hx-card__more){display:none}
  .hx-svc--ph a.hx-svc--feat .hx-svc__ico{width:42px;height:42px}
}

/* two reviews per job */
.bc-revs2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bc-voices .hx-rev{box-shadow:none;border:1px solid var(--line);background:var(--bg)}
.bc-voices .hx-revsum{box-shadow:none;border:1px solid var(--line)}
@media (max-width:760px){ .bc-revs2{grid-template-columns:1fr} }

/* a wide photo in the body of a service page */
.bc-figwide{margin:clamp(28px,4vw,44px) 0 0;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh)}
.bc-figwide img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.bc-figsec .bc-figwide{margin:0}
.bc-figwide figcaption{padding:14px 20px 16px;font-size:15px;line-height:1.5;color:var(--ink2)}
@media (max-width:560px){ .bc-figwide img{aspect-ratio:4/3} }

/* home: the estimate section is a dark studio around the live chat */
.bc-studio{background:linear-gradient(180deg,#0f1b2a 0,#13243a 100%);color:#cfd9e4;border-top:4px solid var(--red)}
.bc-studio h2{color:#fff}
.bc-studio .hx-eyebrow{color:#fff}
.bc-studio .hx-eyebrow::before{display:none}
.bc-studio .hx-lead{color:#d5dee8}
.bc-studio .bc-luis{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.bc-studio .bc-luis b,.bc-studio .bc-luis blockquote{color:#fff}
.bc-studio .bc-luis span{color:#b9c7d6}
.bc-studio .bc-steps4 b{color:#fff}
.bc-studio .bc-steps4 span{color:#cfd9e4}
.bc-studio .bc-steps4 li::before{background:rgba(228,33,62,.25);color:#fff}
.bc-studio .hx-link{color:#fff !important}
.bc-studio .cw--inline{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px rgba(0,0,0,.45)}
.bc-studio .hx-chatcap{color:#a9bbcd !important}

/* the start card names the person who reads the photos */
.bc-start__hd{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.bc-start__hd img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 auto;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red-t)}
.bc-start__hd p{margin:0;display:flex;flex-direction:column;gap:3px}
.bc-start__hd b{font:700 13px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--red-d)}
.bc-start__hd span{font-size:14px;line-height:1.35;color:var(--ink2)}

/* phones: the three floor photos and the home reviews swipe sideways instead of stacking */
@media (max-width:760px){
  .bc-rail,.bc-revs3{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;max-width:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * clamp(16px,4vw,40px));padding:4px clamp(16px,4vw,40px) 16px;scroll-padding-inline:clamp(16px,4vw,40px);scrollbar-width:none}
  .bc-rail::-webkit-scrollbar,.bc-revs3::-webkit-scrollbar{display:none}
  .bc-rail > *,.bc-revs3 > *{scroll-snap-align:start}
}

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

/* 🔁 11 Oct 2026: sample-photo gallery inside the chat (replaces the device picker as the first choice) */
.cw-gallery{align-self:stretch;background:#f5f6f8;border:1px solid #e3e6ea;border-radius:14px;padding:12px;margin:2px 0}
.cw-gal-h{margin:0 0 8px;font-size:15px;font-weight:600;color:#1a1f26;line-height:1.35}
.cw-gal-h small{display:block;font-weight:400;font-size:13px;color:#4a5260;margin-top:2px}
.cw-gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cw-gal-ph{position:relative;display:block;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;min-height:44px;text-align:left}
.cw-gal-ph span{display:block;height:78px;background-size:cover;background-position:center}
.cw-gal-ph em{display:block;font-style:normal;font-size:13px;padding:4px 8px 6px;color:#1a1f26}
.cw-gal-ph i{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-style:normal;font-size:14px;line-height:24px;text-align:center;opacity:.0;transform:scale(.7);transition:opacity .15s,transform .15s}
.cw-gal-ph.on{border-color:var(--ssf-primary,#c8102e)}
.cw-gal-ph.on i{opacity:1;transform:scale(1);background:var(--ssf-primary,#c8102e)}
.cw-gal-ph:focus-visible{outline:3px solid #1a1f26;outline-offset:2px}
.cw-gal-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.cw-gal-send{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--ssf-primary,#c8102e);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.cw-gal-send:disabled{opacity:.45;cursor:default}
.cw-gal-dev{min-height:44px;padding:0 6px;border:0;background:none;color:#3a4350;font-size:14px;text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.cw-gal-ph i{transition:none}}

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

/* ═══════════════════════════════════════════════════════════════════════════
   🪟 GLASS BUTTONS + HAMBURGER — 21 Oct 2026 (autobody-page). The same pasteable block the Halyard Roofing sample got
   (public/demo/roofing/styles.css), adapted to Beach Cities: its signal red (#c8102e) and ink (#0f1720), and THIS template's markup
   (no body.v2; the burger is .hx-burger > .hx-burger__i > i×3 + .hx-burger__w; the header button is .hx-hd__cta; the phone pill .hx-est).
   (Owner, 21 Oct: "new school looking, glass style buttons … not the old school, just rounded plain buttons"; the hamburgers "need to be
   larger with just more thought to them".)
   · Glass = a translucent fill + backdrop blur, a 1px light inner highlight, a layered DARK shadow (no glow halo), and a plain
     solid-translucent fallback where backdrop-filter is not supported.
   · Primary = the brand red, glass-lit, white type (5.9:1); ghost on light = clear glass, ink type; --glass on photos = clear glass, white.
   · Hover lifts 2px, press settles, focus-visible is a 3px ring. Motion: transform only. Reduced motion: none.
   ⛔ No radial gradients, no glow. ⛔ Not .btn (check-demo-polish polices .btn order).
   ═══════════════════════════════════════════════════════════════════════════ */
body{
  --gb-brand:200,16,46;       /* #C8102E, white on it 5.9:1 */
  --gb-brand-d:161,12,36;     /* #A10C24 */
  --gb-ink:15,23,32;          /* #0F1720 */
  --gb-r:999px;
  --gb-sh:0 1px 2px rgba(15,23,32,.14),0 6px 14px -6px rgba(15,23,32,.28),0 14px 30px -14px rgba(15,23,32,.32);
  --gb-sh-up:0 2px 4px rgba(15,23,32,.14),0 10px 20px -8px rgba(15,23,32,.32),0 22px 40px -18px rgba(15,23,32,.38);
}
body .hx-b{
  position:relative;border-radius:var(--gb-r);
  color:#fff !important;
  background-color:rgba(var(--gb-brand),.94);
  background-image:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 100%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.14),var(--gb-sh);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  text-shadow:0 1px 0 rgba(0,0,0,.12);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
body .hx-b:hover{background-color:rgba(var(--gb-brand-d),.96);border-color:rgba(255,255,255,.4);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.14),var(--gb-sh-up)}
body .hx-b:active{transform:translateY(0) scale(.98);transition-duration:.08s;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--gb-sh)}
body .hx-b:focus-visible{outline:3px solid rgb(var(--gb-ink));outline-offset:3px}
/* secondary, on light grounds: clear glass, ink type */
body .hx-b.hx-b--ghost{
  color:rgb(var(--gb-ink)) !important;text-shadow:none;
  background-color:rgba(255,255,255,.62);
  background-image:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 100%);
  border:1px solid rgba(var(--gb-ink),.16);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,32,.08),0 10px 24px -14px rgba(15,23,32,.3);
}
body .hx-b.hx-b--ghost:hover{background-color:rgba(255,255,255,.92);border-color:rgba(var(--gb-ink),.32)}
/* secondary, on dark grounds and photos (the hero's "Call"): clear glass, white type */
body .hx-b.hx-b--glass{
  color:#fff !important;
  background-color:rgba(255,255,255,.14);
  background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 60%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 1px 2px rgba(0,0,0,.2),0 12px 26px -14px rgba(0,0,0,.5);
}
body .hx-b.hx-b--glass:hover{background-color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.66)}
body .hx-b.hx-b--glass:focus-visible{outline-color:#fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .hx-b{background-color:rgb(var(--gb-brand))}
  body .hx-b.hx-b--ghost{background-color:#fff}
  body .hx-b.hx-b--glass{background-color:rgba(15,27,42,.78)}
}
/* the header's "Free photo estimate": the same primary glass, compact */
body .hx-hd .hx-b.hx-hd__cta{min-height:46px;padding:0 20px;gap:8px;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.14),0 1px 2px rgba(15,23,32,.14),0 8px 18px -10px rgba(15,23,32,.4)}
body .hx-hd .hx-b.hx-hd__cta:hover{background-color:rgba(var(--gb-brand-d),.96)}
/* the phone's slim "Estimate" pill: the same primary glass, 44px tall */
@media (max-width:1023px){
  body a.hx-est{height:44px;border:1px solid rgba(255,255,255,.34);
    background-color:rgba(var(--gb-brand),.94);
    background-image:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.14),0 1px 2px rgba(15,23,32,.14),0 8px 18px -10px rgba(15,23,32,.4);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    text-shadow:0 1px 0 rgba(0,0,0,.12);transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s ease}
  body a.hx-est:hover{background-color:rgba(var(--gb-brand-d),.96);transform:translateY(-1px)}
  body a.hx-est:active{transform:scale(.97)}
}

/* ── THE HAMBURGER: a 52px glass chip, three 3px rounded bars with a clear stagger, an X when open (transform only) ── */
body .hx-burger{
  width:52px !important;height:52px !important;min-width:52px;padding:0 !important;margin-right:0 !important;
  border-radius:16px;justify-content:center;align-items:center;gap:0;flex:0 0 auto;
  color:rgb(var(--gb-ink));
  background-color:rgba(255,255,255,.66);
  background-image:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.2) 100%);
  border:1px solid rgba(var(--gb-ink),.14) !important;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,32,.1),0 10px 22px -12px rgba(15,23,32,.38);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background-color .18s ease;
}
body .hx-burger .hx-burger__w{display:none !important}
body .hx-burger .hx-burger__i{display:block;position:relative;width:26px;height:20px;gap:0}
body .hx-burger .hx-burger__i i{position:absolute;right:0;height:3px;margin:0;border-radius:3px;background:currentColor;opacity:1;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),width .26s cubic-bezier(.2,.8,.2,1)}
body .hx-burger .hx-burger__i i:nth-child(1){top:0;width:26px}
body .hx-burger .hx-burger__i i:nth-child(2){top:8.5px;width:17px;background:rgb(var(--gb-brand))}
body .hx-burger .hx-burger__i i:nth-child(3){top:17px;width:22px}
@media (hover:hover){
  body .hx-burger:hover{transform:translateY(-2px);background-color:rgba(255,255,255,.92);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(15,23,32,.1),0 14px 26px -12px rgba(15,23,32,.42)}
  body .hx-burger:hover .hx-burger__i i{width:26px}
}
body .hx-burger:active{transform:scale(.96)}
body .hx-burger:focus-visible{outline:3px solid rgb(var(--gb-ink));outline-offset:3px}
body .hx-navq:checked ~ .hx-hd .hx-burger .hx-burger__i i:nth-child(1){width:26px;transform:translateY(8.5px) rotate(45deg)}
body .hx-navq:checked ~ .hx-hd .hx-burger .hx-burger__i i:nth-child(2){opacity:1;transform:scaleX(0)}
body .hx-navq:checked ~ .hx-hd .hx-burger .hx-burger__i i:nth-child(3){width:26px;transform:translateY(-8.5px) rotate(-45deg)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ body .hx-burger{background-color:#fff} }
/* the drawer's close button: the same glass chip, 3px bars */
body .hx-x{width:52px;height:52px;border-radius:16px;
  background-color:rgba(255,255,255,.7);border:1px solid rgba(var(--gb-ink),.14);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,32,.1),0 10px 22px -12px rgba(15,23,32,.38)}
body .hx-x i{left:12px;top:23.5px;width:26px;height:3px;border-radius:3px;background:rgb(var(--gb-ink))}
body .hx-x:focus-visible{outline:3px solid rgb(var(--gb-ink));outline-offset:3px}
/* phones: brand + Estimate + the burger must share the row — the estimate's camera steps out first, nothing clips */
@media (max-width:400px){ body .hx-hd__in{gap:8px} body a.hx-est{padding:0 13px} body a.hx-est svg{display:none} }
@media (max-width:380px){ body .hx-burger{width:48px !important;height:48px !important;min-width:48px} }
@media (prefers-reduced-motion:reduce) and (max-width:0px){
  body .hx-b,body .hx-burger,body .hx-burger .hx-burger__i i,body a.hx-est{transition:none !important}
  body .hx-b:hover,body .hx-burger:hover,body a.hx-est:hover{transform:none}
}
/* ≤359 the pill is icon-only (the rule above hides its word), so its camera comes back */
@media (max-width:359px){ body a.hx-est svg{display:block} body a.hx-est{padding:0} }