.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(1320px,94vw);display:flex;align-items:center;gap:24px;padding:11px 14px 11px 16px;border-radius:18px;z-index:40;overflow:visible;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-fill-blur);backdrop-filter:var(--glass-fill-blur);border:1px solid var(--glass-fill-edge);box-shadow:0 2px 10px rgba(0,0,0,.34),0 24px 50px -16px rgba(0,0,0,.42),0 60px 110px -40px color-mix(in srgb,var(--orange) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.14)}
.brand{display:flex;align-items:center;gap:11px;font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap;color:var(--glass-ink);text-decoration:none}
.shield{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:block;box-shadow:0 4px 14px -4px rgba(80,60,40,.35)}
.menu{display:flex;align-items:center;gap:2px;margin-left:6px}
.menu>a,.menu>.item>button{font-family:'Inter';font-weight:600;font-size:14.5px;color:var(--glass-ink);background:none;border:0;cursor:pointer;text-decoration:none;padding:9px 15px;border-radius:11px;display:flex;align-items:center;gap:6px;transition:color .25s var(--ease),background .25s var(--ease)}
.menu>a:hover,.menu>.item:hover>button,.menu>a:focus-visible,.menu>.item>button:focus-visible{color:#fff;background:color-mix(in srgb,var(--accent) 26%,transparent);outline:none}
.menu .caret{width:11px;height:11px;transition:transform .3s var(--ease);opacity:.7}
.menu .item:hover .caret{transform:rotate(180deg)}
.spacer{flex:1}
.icons{display:flex;align-items:center;gap:8px}
.iconbtn{position:relative;overflow:hidden;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--glass-fill);border:1px solid var(--glass-fill-edge);color:var(--glass-ink-soft);cursor:pointer;-webkit-backdrop-filter:var(--glass-fill-blur);backdrop-filter:var(--glass-fill-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:transform .25s var(--ease),background .25s var(--ease),color .25s,box-shadow .25s;text-decoration:none}
.iconbtn:hover{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05)),var(--glass-fill);color:var(--glass-ink);transform:translateY(-1px)}
.iconbtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.iconbtn svg{position:relative;z-index:2;width:18px;height:18px}
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
[data-theme="dark"] .theme-toggle .ico-sun{display:block}
[data-theme="dark"] .theme-toggle .ico-moon{display:none}
.iconbtn.call{background:linear-gradient(180deg,var(--orange-bright),var(--orange));border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.iconbtn.call:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--accent) 82%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}

/* Mobile menu (pure CSS toggle). Hidden on desktop. */
.navcb{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.burger{display:none;width:42px;height:42px;border-radius:12px;place-items:center;cursor:pointer;background:var(--glass-fill);border:1px solid var(--glass-fill-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.burger-lines{display:flex;flex-direction:column;gap:4px;width:18px}
.burger-lines i{display:block;height:2px;border-radius:2px;background:var(--glass-ink);transition:transform .25s var(--ease),opacity .2s ease}
.navcb:checked ~ .icons .burger-lines i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navcb:checked ~ .icons .burger-lines i:nth-child(2){opacity:0}
.navcb:checked ~ .icons .burger-lines i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;max-height:78vh;overflow-y:auto;border-radius:18px;padding:14px 16px 18px;flex-direction:column;z-index:60;
  background:#1D1611;
  border:1px solid var(--glass-fill-edge);box-shadow:0 34px 80px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1)}
.navcb:checked ~ .mnav{display:flex}
.mnav-scrim{display:none;position:fixed;inset:0;z-index:55;background:rgba(8,5,3,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.navcb:checked ~ .mnav-scrim{display:block}
.mnav-x{text-decoration:none;color:var(--glass-ink);font-family:'Inter';font-weight:600;font-size:16px;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.1)}
.mnav-x.sub{font-size:15px;padding-left:18px;color:var(--glass-ink-soft)}
.mnav-fold{border-bottom:1px solid rgba(255,255,255,.1)}
.mnav-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:15px 8px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);-webkit-tap-highlight-color:transparent}
.mnav-fold summary::-webkit-details-marker{display:none}
.mnav-fold summary::after{content:'';width:8px;height:8px;flex:0 0 auto;margin-right:6px;border-right:2px solid var(--glass-ink-soft);border-bottom:2px solid var(--glass-ink-soft);transform:rotate(45deg);transition:transform .25s var(--ease)}
.mnav-fold[open] summary::after{transform:rotate(225deg)}
.mnav-fold .mnav-x.sub{display:block;border-bottom:0;margin:0;padding-top:10px;padding-bottom:10px}
.mnav-fold[open]{padding-bottom:8px}
.mnav-areas{padding:4px 8px 8px;display:flex;flex-wrap:wrap;gap:6px}
.mnav-county{width:100%;font-size:13px;font-weight:700;color:var(--glass-ink)}
.mnav-city{text-decoration:none;color:var(--glass-ink);font-size:14px;padding:7px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 36%,var(--glass-fill-edge));background:color-mix(in srgb,var(--accent) 14%,transparent)}
.mnav-cta{display:flex;gap:10px;margin-top:16px}
.mnav-cta .btn{flex:1}

.item{position:relative}
.item::after{content:'';position:absolute;left:0;right:-40px;top:100%;height:20px}
.mega{position:absolute;top:calc(100% + 12px);left:-8px;width:min(720px,92vw);border-radius:22px;padding:26px 30px 22px;background:linear-gradient(160deg,rgba(36,28,22,.88),rgba(22,17,13,.8));-webkit-backdrop-filter:saturate(135%) blur(14px);backdrop-filter:saturate(135%) blur(14px);border:1px solid var(--glass-fill-edge);box-shadow:0 34px 80px -22px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.1);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .28s var(--ease),transform .32s var(--ease),visibility .28s;z-index:60}
.item:hover .mega,.item:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
/* The Services mega is near-full-width → pin it centered in the viewport so it
   never overflows the right edge (was anchored to the button and spilled off). */
.mega.wide{position:fixed;top:76px;left:50%;width:min(960px,94vw);transform:translateX(-50%) translateY(8px)}
.item:hover .mega.wide,.item:focus-within .mega.wide{transform:translateX(-50%) translateY(0)}
/* Right-side dropdowns anchor to their own right edge so they stay on-screen. */
.mega.areas{left:auto;right:-8px;width:min(560px,92vw)}
.mega.company{left:auto;right:-8px;width:min(360px,92vw)}
.company-links{display:flex;flex-direction:column;gap:2px}
.company-links a{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:11px;text-decoration:none;transition:background .18s var(--ease)}
.company-links a:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.company-links a b{font-family:'Archivo';font-weight:800;font-size:15px;color:var(--glass-ink)}
.company-links a span{font-size:12.5px;color:var(--glass-ink-soft)}
.mega .lbl{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:6px}
.megasub{font-size:13.5px;color:var(--glass-ink-soft);margin-bottom:22px;max-width:46ch}
.areas .grid{gap:0 60px}
.areacol h4{font-family:'Archivo';font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--glass-ink);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.14)}
.areacol a{display:inline-block;width:48%;text-decoration:none;color:var(--glass-ink-soft);font-size:14px;padding:6px 0;transition:color .2s}
.areacol a:hover{color:var(--accent)}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px 28px}
.svc{display:block;padding:10px 12px;margin:-2px;border-radius:14px;transition:background .2s var(--ease)}
.svc:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.svc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none}
.svc-head h4{font-family:'Archivo';font-weight:800;font-size:16px;color:var(--glass-ink)}
.svc-go{font-family:'Archivo';font-weight:700;color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.svc:hover .svc-go{opacity:1;transform:none}
.svc p{font-size:12.5px;color:var(--glass-ink-soft);margin:2px 0 9px}
.svc-tabs{display:flex;flex-wrap:wrap;gap:6px}
.svc-tabs a{font-family:'Inter';font-size:12px;font-weight:600;color:var(--glass-ink-soft);text-decoration:none;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--glass-fill-edge));transition:color .18s,border-color .18s,background .18s}
.svc-tabs a:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
.mega .all{display:inline-block;margin-top:22px;padding-top:16px;color:var(--accent);font-weight:600;font-style:italic;font-size:14px;text-decoration:none;border-top:1px solid rgba(255,255,255,.14);width:100%}
.mega .all:hover{color:var(--orange-bright)}

/* Mobile-left theme flip: hidden on desktop (the .icons one is used there). */
.theme-mobile{display:none}
@media (max-width:1180px){.mega{width:min(720px,92vw)}.mega .grid{grid-template-columns:1fr 1fr}}
@media (max-width:880px){
  .menu,.icons .iconbtn:not(.call){display:none}
  .theme-mobile{display:grid;margin-right:auto}
  .nav{width:94vw;gap:10px;padding:9px 10px}
  .burger{display:grid}
}


/* ONE hero style at every size (owner-approved): a framed LANDSCAPE photo on top,
   the always-dark glass copy box below it — never a full-bleed vertical crop. The
   whole thing is centered in a max-width column so it stays a clean "card" on wide
   desktops too. */
.hero{position:relative;width:100%;max-width:1200px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);padding:clamp(80px,10vh,100px) clamp(16px,4vw,40px) clamp(18px,3vh,32px)}
/* Photo flexes to fill exactly the height left after the copy box, so the photo
   + copy ALWAYS fit the viewport together — no scroll to reach the headline. */
.hero-media{position:relative;flex:1 1 auto;min-height:180px;width:100%;border-radius:clamp(18px,2vw,26px);overflow:hidden;box-shadow:0 26px 64px -26px rgba(0,0,0,.5);z-index:0}
.copy{flex:0 0 auto}
.room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;will-change:transform}
/* The photo stays crisp OUTSIDE the glass box — the box itself carries all the
   readability, so the old full-bleed scrim/wash is gone (owner: "pointless"). A
   faint bottom vignette is kept only so the corner review card + social row seat. */
.wash,.tone{display:none}
.scrim{display:none}
.spot{display:none}

/* Hero copy rides on the always-dark glass — accent headline + light body stay
   legible over ANY photo, in BOTH themes (only the page behind it changes).
   GLASS LAW: --glass-fill/--glass-ink (theme-independent), never the old
   theme-flipping --glass-tint — that's what made the card go cream in light mode. */
/* Theme-aware clear glass (owner 2026-07-18: "why is there a dark box on light
   theme") — light frosted card on the light theme, dark glass on dark. */
.copy{position:relative;z-index:30;width:100%;max-width:none;padding:clamp(24px,3vw,40px) clamp(22px,3vw,44px);border-radius:22px;
  background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.freepill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin-bottom:22px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.freepill .dot{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.freepill .dot{position:relative}
.freepill .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(217,59,43,.6);opacity:.5;animation:pdPulse 2.2s infinite}
@keyframes pdPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.hero-slide[hidden]{display:none}
.hero-slide h1,.hero-slide .hero-slide-h{font-family:'Archivo',sans-serif;font-weight:900;color:var(--accent);line-height:1.02;letter-spacing:-.022em;margin-bottom:16px;font-size:clamp(34px,4.4vw,60px)}
/* Per-tab hero photos: stacked, cross-fade on tab flip. Default (.active) visible. */
.room.hero-photo{opacity:0;transition:opacity .55s var(--ease)}
.room.hero-photo.active{opacity:1}
@media (prefers-reduced-motion:reduce){.room.hero-photo{transition:none}}
/* Owner rule: headlines are the page color. Body stays pure ink/paper (no gray). */
.hero h1{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(34px,4.5vw,58px);line-height:1.02;letter-spacing:-.022em;color:var(--accent);margin-bottom:16px}
.hero h1 .o{color:var(--accent)}
.sub{font-size:clamp(16px,1.35vw,18px);line-height:1.55;font-weight:500;color:var(--ink);max-width:52ch;margin-bottom:22px}
.proof{display:flex;align-items:center;gap:14px;margin:22px 0 26px;font-size:13px;font-weight:500;color:var(--ink-soft);flex-wrap:wrap}
.proof i{width:4px;height:4px;border-radius:50%;background:var(--orange);opacity:.8}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
/* Hero proof: a real review, set quiet so it supports the CTA instead of competing
   with it. Body ink (not accent) — the red belongs to the headline and the button. */
.hero-proof{margin:22px 0 0;padding:16px 0 0;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);max-width:52ch}
.hero-proof blockquote{margin:0 0 8px;font-family:'Archivo',sans-serif;font-style:italic;font-weight:600;font-size:clamp(14.5px,1.1vw,16px);line-height:1.45;color:var(--ink)}
.hero-proof figcaption{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:500;color:var(--ink);opacity:.8}
.hero-proof figcaption b{font-weight:700;opacity:1}
.hero-proof-stars{color:var(--orange)}
.hero-proof figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hero-proof figcaption a:hover{color:var(--accent)}
/* ONE button language site-wide. primary = the blessed gradient+glow (lifted from
   .pg-cta); secondary = clear glass with a crisp accent edge + the same shine sweep.
   No flat ghosts. nowrap so phone-number labels never break into "fat" two-liners. */
.btn{position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;text-decoration:none;font-family:'Archivo';font-weight:700;font-size:15px;letter-spacing:.01em;padding:14px 24px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .2s var(--ease),box-shadow .25s ease,border-color .25s ease}
/* moving specular sheen — pulls the eye to the CTA */
.btn::after{content:"";position:absolute;top:-12%;left:0;width:40%;height:124%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42) 50%,transparent);transform:translateX(-240%) skewX(-18deg);pointer-events:none;z-index:2}
@media (hover:hover){.btn::after{transition:transform .8s var(--ease)}.btn:hover::after,.btn:focus-visible::after{transform:translateX(360%) skewX(-18deg)}}
/* touch devices can't hover → the primary auto-sweeps so it still draws the eye */
@media (hover:none){.btn.primary::after{animation:btn-sheen 4.5s var(--ease) infinite}}
@keyframes btn-sheen{0%,70%{transform:translateX(-240%) skewX(-18deg)}86%,100%{transform:translateX(360%) skewX(-18deg)}}
/* darker, glassier red: a top gloss layer over a deepened red gradient */
.btn.primary{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 48%),linear-gradient(180deg,var(--orange),var(--orange-d));color:#fff;box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -12px 22px -14px rgba(0,0,0,.5)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -12px color-mix(in srgb,var(--accent) 74%,transparent),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -12px 22px -14px rgba(0,0,0,.5)}
.btn.secondary{color:var(--glass-ink);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),var(--glass-fill);-webkit-backdrop-filter:var(--glass-fill-blur);backdrop-filter:var(--glass-fill-blur);border:1px solid color-mix(in srgb,var(--accent) 48%,var(--glass-fill-edge));box-shadow:0 8px 22px -12px color-mix(in srgb,var(--accent) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.secondary:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 16px 32px -12px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1.5px 0 rgba(255,255,255,.65)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn.primary::after{animation:none}}

.rev-card{position:absolute;right:4vw;bottom:5vh;width:344px;border-radius:20px;padding:21px 21px 18px;z-index:25;background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);transform:perspective(1100px);transform-style:preserve-3d;transition:box-shadow .45s var(--ease);will-change:transform}
.rev-card>*{transform:translateZ(22px)}
.rev-card .rev-head{display:flex;align-items:center;gap:12px;margin-bottom:15px;transform:translateZ(36px)}
.rev-card .rev-g{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;box-shadow:0 6px 16px -6px rgba(80,60,40,.35)}
.rev-card .rev-g svg{width:20px;height:20px}
.rev-card .rev-rate{line-height:1.2}
.rev-card .rev-stars{font-size:15px;letter-spacing:2.5px;color:var(--orange);margin-bottom:2px}
.rev-card .rev-meta{font-size:12px;color:var(--ink-soft)}
.rev-card .rev-meta b{color:var(--ink);font-weight:700;font-size:13px}
.rev-card .rev-quote{font-family:'Archivo';font-style:italic;font-weight:600;font-size:18px;line-height:1.42;color:var(--ink);margin-bottom:16px;min-height:3.6em;transition:opacity .5s var(--ease)}
.rev-card .rev-link{display:inline-flex;align-items:center;gap:7px;font-family:'Inter';font-weight:600;font-size:13px;color:var(--accent);text-decoration:none;transition:gap .25s var(--ease),color .25s}
.rev-card .rev-link:hover{color:var(--orange);gap:11px}
.rev-card .rev-link:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

.social{position:absolute;left:6vw;bottom:4.5vh;z-index:30;display:flex;align-items:center;gap:11px}
.social .sline{width:46px;height:1px;flex:0 0 auto;margin-right:5px;background:linear-gradient(90deg,var(--orange),transparent);position:relative;overflow:hidden}
.social .sline::after{content:"";position:absolute;inset:0;width:14px;background:var(--orange);animation:trace 2.4s ease-in-out infinite}
.schip{position:relative;overflow:hidden;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 52%),var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:0 2px 8px rgba(0,0,0,.3),0 12px 26px -10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);transition:box-shadow .25s ease,transform .25s var(--ease)}
.schip svg{position:relative;z-index:2;width:20px;height:20px;display:block}
/* same slick sheen as the CTAs (icons keep their brand colors) */
.schip::after{content:"";position:absolute;top:-12%;left:0;width:48%;height:124%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45) 50%,transparent);transform:translateX(-220%) skewX(-18deg);pointer-events:none;z-index:3}
@media (hover:hover){.schip::after{transition:transform .7s var(--ease)}.schip:hover::after{transform:translateX(230%) skewX(-18deg)}}
.schip:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(80,60,40,.14),0 18px 34px -10px rgba(110,85,60,.4),inset 0 1.5px 0 rgba(255,255,255,.9)}
.schip:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@keyframes trace{0%{transform:translateX(-16px)}60%,100%{transform:translateX(48px)}}

@media (max-width:1100px){.rev-card{width:330px;right:4vw}}
@media (max-width:880px){
  /* Base hero is already the framed-photo-over-copy layout; phones just soften
     the padding + type. A slightly taller crop shows more of the room on narrow. */
  .rev-card{display:none}
  /* bottom pad clears the fixed mobile Call/Guru bar so the copy is never hidden */
  .hero{padding:80px 4vw 92px;gap:13px}
  .hero h1{font-size:clamp(28px,6.8vw,42px);line-height:1.04}
  .copy{padding:clamp(18px,4vw,24px) clamp(18px,4vw,22px)}
  .actions{gap:10px}
  .btn{padding:13px 18px;font-size:14px}
  .hero-proof{margin-top:16px;padding-top:12px}
  .hero-proof blockquote{margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){.room,.wash{transition:none}}

/* Showcase hero (home): the Paint Guru card is portrait, so it rides BESIDE the
   copy (copy left, card right) instead of in the short photo-on-top slot — the card
   sizes itself, nothing clips its glow. Stacks card-over-copy on phones. */
.hero--showcase{display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,38%,448px);align-items:center;gap:clamp(22px,4vw,56px)}
.hero--showcase .hero-media{grid-column:2;grid-row:1;flex:none;min-height:0;border-radius:0;overflow:visible;box-shadow:none;background:none}
.hero--showcase .copy{grid-column:1;grid-row:1}
@media (max-width:880px){
  .hero--showcase{display:flex;flex-direction:column;gap:16px}
  .hero--showcase .hero-media,.hero--showcase .copy{grid-column:auto}
}


.grs{position:relative;width:100%;display:grid;place-items:center;padding:clamp(6px,1.4vw,16px)}
.grs-card{position:relative;display:flex;flex-direction:column;gap:13px;width:100%;max-width:440px;
  padding:16px 16px 17px;border-radius:24px;text-decoration:none;color:#f4ede3;text-align:left;
  background:linear-gradient(180deg,rgba(38,27,21,.92),rgba(20,13,10,.94));
  border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 30px 70px -20px rgba(0,0,0,.7),
    0 0 44px -8px color-mix(in srgb,var(--accent) 60%,transparent),
    0 0 130px -30px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.07)}
.grs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px}
.grs-title{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo','Fraunces',serif;font-weight:800;font-size:19px;color:#fff}
.grs-dot{width:9px;height:9px;border-radius:50%;background:#3da876}
.grs-dot{position:relative}
.grs-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(61,168,118,.6);opacity:.5;animation:pdPulse 2.2s infinite}
@keyframes pdPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.grs-status{font-family:'Inter',sans-serif;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--accent);
  padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);opacity:0;transition:opacity .25s ease}
.grs-status.grs-live{opacity:1;animation:grsBlink 1s steps(2,start) infinite}
@keyframes grsBlink{50%{opacity:.45}}

.grs-stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/11;background:#0b0806;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06)}
.grs-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.grs-photo.grs-on{opacity:1}
@media (prefers-reduced-motion:reduce){.grs-photo{transition:opacity .3s}}
/* Color chips live BELOW the photo (never on it) in a fixed-height row so the card
   never changes size as chips come and go. contain:inline-size keeps the nowrap
   chip text from inflating the card's intrinsic width — without it, the whole
   card (and its aspect-ratio photo) grows ~70px wider on chip steps and snaps
   back on chip-less ones at viewports where the hero column is narrower than
   the chips (~900px), jumping on every flip. Chips clip instead. */
.grs-labels{display:flex;flex-wrap:nowrap;gap:7px;min-height:30px;padding:0 2px;overflow:hidden;align-items:center;contain:inline-size}
.grs-label{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:rgba(244,237,227,.92);
  padding:5px 11px 5px 6px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);white-space:nowrap}
.grs-swatch{width:15px;height:15px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}

.grs-say{font-family:'Inter',sans-serif;font-size:13px;color:rgba(244,237,227,.62);padding:0 4px;margin-top:1px}
.grs-input{display:flex;align-items:center;gap:9px;padding:8px 8px 8px 15px;border-radius:15px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11)}
.grs-prompt{flex:1;min-width:0;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#f4ede3;
  line-height:1.4;height:2.8em;overflow:hidden;align-content:center}
.grs-caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--accent);animation:grsCaret 1s steps(1) infinite}
@keyframes grsCaret{50%{opacity:0}}
.grs-mic,.grs-send{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center}
.grs-mic{color:rgba(244,237,227,.72);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.grs-mic svg{width:19px;height:19px}
.grs-send{color:#fff;background:linear-gradient(180deg,var(--orange-bright,#e8593f),var(--orange,#d93b2b));
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.grs-send svg{width:20px;height:20px}
.grs-card:hover .grs-send{transform:translateY(-1px)}
.grs-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.5),0 34px 80px -20px rgba(0,0,0,.72),
  0 0 54px -6px color-mix(in srgb,var(--accent) 72%,transparent),
  0 0 150px -28px color-mix(in srgb,var(--accent) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.09)}
.grs-card,.grs-send{transition:box-shadow .3s ease,transform .2s var(--ease)}

@media (max-width:880px){
  .grs{padding:12px}
  .grs-card{max-width:none;gap:11px;padding:14px 14px 15px}
  .grs-title{font-size:17px}
  .grs-stage{aspect-ratio:16/12}
}


.ss{
  --active:#D93B2B;
  --active-rgb:214,85,63;
  --line:rgba(255,255,255,.72);
  --line-dark:rgba(23,21,29,.10);
  --shadow:0 2px 8px rgba(80,60,40,.10),0 28px 70px -14px rgba(110,85,60,.20),0 60px 120px -34px rgba(var(--active-rgb),.30);
  --glare-x:50%;
  --glare-y:36%;
  --glare-warm-x:53%;
  --glare-warm-y:34%;
  --glare-cool-x:47%;
  --glare-cool-y:39%;
  --glare-opacity:.16;
  min-height:100vh;
  width:100%;
  position:relative;
  isolation:isolate;
  padding:72px clamp(16px,4vw,56px) 92px;
  overflow:hidden;
}

.ss::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:46px -10vw auto;
  height:360px;
  background:
    linear-gradient(100deg,
      rgba(214,85,63,.20),
      rgba(77,143,207,.17) 34%,
      rgba(61,168,118,.13) 62%,
      rgba(147,121,204,.16));
  filter:blur(42px) saturate(150%);
  transform:skewY(-5deg);
}

.ss::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -16vw 5% -16vw;
  height:48%;
  background:
    linear-gradient(95deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.14) 30%,
      rgba(255,255,255,.05) 52%,
      rgba(255,255,255,.16) 74%,
      rgba(255,255,255,0) 100%);
  filter:blur(40px);
  transform:rotate(-4deg);
}

.ss__header{
  text-align:center;
  max-width:760px;
  margin:0 auto 32px;
}

.ss__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgb(var(--active-rgb));
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0;
}

.ss__kicker::before,
.ss__kicker::after{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
  opacity:.42;
}

.ss__heading{
  margin:14px 0 12px;
  font-family:'Archivo',Inter,sans-serif;
  font-size:4.25rem;
  line-height:.96;
  letter-spacing:0;
  color:rgb(var(--active-rgb));
}

.ss__heading span{
  color:rgb(var(--active-rgb));
}

.ss__subhead{
  max-width:650px;
  margin:0 auto;
  color:var(--ink);
  font-size:1.04rem;
  line-height:1.72;
}

.ss__tabs-shell{
  position:relative;
  max-width:1160px;
  margin:0 auto;
  z-index:10;
}

.ss__tabs-shell::before,
.ss__tabs-shell::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:44px;
  z-index:2;
  pointer-events:none;
}

.ss__tabs-shell::before{
  left:0;
  background:linear-gradient(90deg,rgba(255,248,239,.95),rgba(255,248,239,0));
}

.ss__tabs-shell::after{
  right:0;
  background:linear-gradient(270deg,rgba(248,251,255,.95),rgba(248,251,255,0));
}

.ss__tabs{
  display:flex;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px 10px 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:rgba(255,255,255,.36);
  backdrop-filter:saturate(170%) brightness(1.03);
  -webkit-backdrop-filter:saturate(170%) brightness(1.03);
  box-shadow:0 -1px 2px rgba(80,60,40,.05),0 16px 38px -8px rgba(95,72,52,.13),inset 0 1.5px 0 rgba(255,255,255,1);
  position:relative;
}

.ss__tabs::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.05) calc(var(--gx,50%) - 5%),rgba(255,255,255,.13) var(--gx,50%),rgba(255,255,255,.05) calc(var(--gx,50%) + 5%),transparent 56%);opacity:0;transition:opacity .4s ease}
.ss:hover .ss__tabs::before{opacity:0}

.ss__tabs::after,
.ss__window::after,
.ss__feature-panel::after,
.ss__table-wrap::after,
.ss__dos::after,
.ss__donts::after,
.ss__comp-old::after,
.ss__comp-new::after,
.ss__faq-item::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at var(--glare-x) var(--glare-y),
      rgba(255,255,255,.54) 0%,
      rgba(255,255,255,.22) 18%,
      rgba(255,255,255,0) 46%),
    radial-gradient(circle at var(--glare-warm-x) var(--glare-warm-y),
      rgba(255,213,170,.20) 0%,
      rgba(255,213,170,0) 39%),
    radial-gradient(circle at var(--glare-cool-x) var(--glare-cool-y),
      rgba(118,184,255,.16) 0%,
      rgba(118,184,255,0) 41%);
  mix-blend-mode:screen;
  opacity:0;
  z-index:2;
}

.ss__tabs::-webkit-scrollbar{display:none}

.ss__tab{
  /* Tabs are <a> now (see TabDeck.tsx) so a crawler can follow them; kill the
     default underline so they look exactly as they always did. */
  text-decoration:none;
  flex:0 0 auto;
  min-height:58px;
  min-width:152px;
  border:1px solid transparent;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--ink-soft);
  background:transparent;
  font:700 .98rem/1 'Inter',system-ui,sans-serif;
  letter-spacing:0;
  cursor:pointer;
  position:relative;
}

.ss__tab:hover{
  color:#231f29;
  background:rgba(255,255,255,.36);
}

.ss__tab:focus-visible{
  outline:2px solid rgb(var(--active-rgb));
  outline-offset:3px;
}

.ss__tab.active{
  color:#141118;
  background:
    linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.48)),
    linear-gradient(90deg,rgba(var(--active-rgb),.16),rgba(255,255,255,0));
  border-color:rgba(255,255,255,.86);
  box-shadow:0 -2px 22px rgba(var(--active-rgb),.16),inset 0 1px 0 rgba(255,255,255,.95);
}

.ss__tab.active::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgb(var(--active-rgb)),transparent);
  opacity:.9;
}

/* Each tab's name is color-coded to its own service (icons removed). */
.ss__tab-label{color:var(--tab-color);font-weight:800;transition:color .2s var(--ease)}
.ss__tab.active .ss__tab-label{color:var(--tab-color)}
.ss__tab-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  color:var(--tab-color);
  flex:0 0 auto;
}

.ss__tab-icon svg{
  width:20px;
  height:20px;
  display:block;
}

.ss__panel{
  max-width:1280px;
  min-height:660px;
  margin:-1px auto 0;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.25)),
    linear-gradient(110deg,rgba(var(--active-rgb),.13),rgba(255,255,255,0) 35%,rgba(77,143,207,.09) 72%,rgba(147,121,204,.08));
  backdrop-filter:saturate(170%) brightness(1.03);
  -webkit-backdrop-filter:saturate(170%) brightness(1.03);
  box-shadow:var(--shadow),inset 0 1.5px 0 rgba(255,255,255,1);
  position:relative;
  overflow:hidden;
}

.ss__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) calc(var(--gx,50%) - 6%),rgba(255,255,255,.36) var(--gx,50%),rgba(255,255,255,.16) calc(var(--gx,50%) + 6%),transparent 58%),
    linear-gradient(115deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,0) 23%,
      rgba(var(--active-rgb),.13) 44%,
      rgba(77,143,207,.10) 58%,
      rgba(255,255,255,.28) 76%,
      rgba(255,255,255,0) 100%);
  filter:blur(1px);
  opacity:0;
  mix-blend-mode:screen;
}

.ss__panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--glare-x) var(--glare-y),
      rgba(255,255,255,.44) 0%,
      rgba(255,255,255,.18) 18%,
      rgba(255,255,255,0) 47%),
    radial-gradient(circle at var(--glare-warm-x) var(--glare-warm-y),
      rgba(255,219,181,.20) 0%,
      rgba(255,219,181,0) 36%),
    radial-gradient(circle at var(--glare-cool-x) var(--glare-cool-y),
      rgba(105,178,255,.14) 0%,
      rgba(105,178,255,0) 38%);
  opacity:0;
  mix-blend-mode:screen;
  z-index:1;
}

.ss__curves{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.86;
  filter:drop-shadow(0 10px 24px rgba(var(--active-rgb),.10));
}

.ss__stroke{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--active-rgb),.24),rgba(255,255,255,.16),rgba(77,143,207,.18));
  clip-path:inset(0 100% 0 0);
  opacity:.55;
}

.ss__stroke.active{clip-path:inset(0 0 0 0)}

.ss__content{
  position:relative;
  z-index:5;
  width:100%;
  min-width:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:58px clamp(18px,4vw,58px) 68px;
}

.ss__window{
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  box-shadow:0 3px 12px rgba(70,52,40,.07),0 24px 54px -18px rgba(95,72,52,.20),inset 0 1.5px 0 rgba(255,255,255,.7);
  backdrop-filter:saturate(140%) brightness(1.02) blur(14px);
  -webkit-backdrop-filter:saturate(140%) brightness(1.02) blur(14px);
}

.ss__window-wrap{
  width:min(100%,1040px);
  min-width:0;
}

.ss__window{
  width:100%;
  min-width:0;
  min-height:720px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.66);
  position:relative;
}

.ss__window::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 20%);
  opacity:1;
}

.ss__titlebar{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:13px 18px;
  border-bottom:1px solid var(--hairline);
  background:rgba(255,255,255,.54);
  backdrop-filter:saturate(125%) brightness(1.03);
  -webkit-backdrop-filter:saturate(125%) brightness(1.03);
  flex:0 0 auto;
}

.ss__titlebar::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.05) calc(var(--gx,50%) - 5%),rgba(255,255,255,.13) var(--gx,50%),rgba(255,255,255,.05) calc(var(--gx,50%) + 5%),transparent 56%);opacity:0;transition:opacity .4s ease}
.ss:hover .ss__titlebar::before{opacity:0}

.ss__url{
  min-width:0;
  color:var(--ink-soft);
  text-align:center;
  font-size:.95rem;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ss__body{
  position:relative;
  z-index:3;
  flex:1 1 auto;
  max-height:760px;
  overflow:auto;
  padding:32px clamp(18px,5vw,56px) 56px;
  color:var(--ink);
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--active-rgb),.42) rgba(255,255,255,.35);
}

.ss__body::-webkit-scrollbar{width:8px}
.ss__body::-webkit-scrollbar-track{background:rgba(255,255,255,.42)}
.ss__body::-webkit-scrollbar-thumb{
  background:rgba(var(--active-rgb),.38);
  border-radius:8px;
  border:2px solid rgba(255,255,255,.64);
}

.ss__brand{
  margin:34px 0 12px;
  color:rgb(var(--active-rgb));
  font-weight:900;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:0;
}

.ss__body h2{
  margin:0 0 14px;
  /* The active service's OWN color (home tabs swap services; service-page decks
     set --active-rgb to the page accent — correct in both). */
  color:rgb(var(--active-rgb));
  font-family:'Archivo',Inter,sans-serif;
  font-size:clamp(2.35rem,5vw,4.9rem);
  line-height:1.06;
  letter-spacing:0;
}

.ss__hero-sub{
  max-width:840px;
  margin:0 0 24px;
  color:var(--ink-soft);
  font-size:1.08rem;
  line-height:1.72;
}

.ss__window-cta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:36px;
}

.ss__hero-media{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.74);
  background:rgba(255,255,255,.36);
  height:clamp(240px,26vw,340px);
  box-shadow:0 3px 12px rgba(60,46,34,.10),0 20px 46px -16px rgba(90,68,50,.20),inset 0 1px 0 rgba(255,255,255,.9);
}

.ss__hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.02);
}

.ss__hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(18,12,8,0) 30%,rgba(20,13,8,.66) 100%),
    linear-gradient(115deg,rgba(var(--active-rgb),.26),rgba(255,255,255,0) 48%);
}

.ss__hero-caption{
  position:absolute;
  z-index:1;
  left:clamp(16px,3vw,28px);
  right:clamp(16px,3vw,28px);
  bottom:clamp(14px,2.5vw,24px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  color:#fff;
}

.ss__hero-caption strong{
  font-size:clamp(1.2rem,2.4vw,1.9rem);
  line-height:1;
}

.ss__hero-caption span{
  color:rgba(255,255,255,.82);
  font-size:clamp(.88rem,1.3vw,1.08rem);
  white-space:nowrap;
}

.ss__feature-panel{
  margin:0 0 36px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.74);
  background:rgba(255,255,255,.42);
  padding:20px;
  box-shadow:0 14px 36px -16px rgba(90,68,50,.14),inset 0 1.5px 0 rgba(255,255,255,.96);
  position:relative;
  overflow:hidden;
}

.ss__feature-panel > *{position:relative;z-index:3}

.ss__feature-title{
  margin:0 0 15px;
  color:rgb(var(--active-rgb));
  font-size:.9rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0;
}

.ss__feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
}

.ss__feature-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text2);
  font-size:.96rem;
  line-height:1.52;
}

.ss__feature-check{
  flex:0 0 auto;
  color:rgb(var(--active-rgb));
  font-weight:900;
}

.wbtn-primary,
.wbtn-secondary,
.wbtn-page{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:8px;
  font-size:1rem;
  font-weight:800;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background .25s ease;
}

.wbtn-primary{
  color:#fff;
  background:linear-gradient(180deg,rgba(var(--active-rgb),.86),rgb(var(--active-rgb)));
  box-shadow:0 14px 30px -10px rgba(var(--active-rgb),.55),inset 0 1px 0 rgba(255,255,255,.28);
}

.wbtn-secondary,
.wbtn-page{
  color:var(--ink);
  background:var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(var(--active-rgb),.42);
  box-shadow:0 8px 22px -12px rgba(var(--active-rgb),.5),inset 0 1.5px 0 rgba(255,255,255,.55);
}

.wbtn-primary::after,
.wbtn-secondary::after,
.wbtn-page::after{
  content:"";
  position:absolute;
  top:0;
  left:-130%;
  width:55%;
  height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
  transform:skewX(-18deg);
  pointer-events:none;
  z-index:2;
  transition:left .7s cubic-bezier(.2,.7,.2,1);
}
.wbtn-primary:hover,
.wbtn-secondary:hover,
.wbtn-page:hover{transform:translateY(-2px)}
.wbtn-primary:hover::after,
.wbtn-secondary:hover::after,
.wbtn-page:hover::after{left:135%}
.wbtn-primary:hover{box-shadow:0 20px 46px rgba(var(--active-rgb),.36)}
.wbtn-secondary:hover{background:rgba(255,255,255,.74);box-shadow:0 14px 30px rgba(95,72,52,.14)}
.wbtn-page:hover{background:rgba(255,255,255,.5);box-shadow:0 14px 30px rgba(var(--active-rgb),.16)}
.wbtn-primary:active,
.wbtn-secondary:active,
.wbtn-page:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .wbtn-primary::after,.wbtn-secondary::after,.wbtn-page::after{display:none}
  .wbtn-primary,.wbtn-secondary,.wbtn-page{transition:box-shadow .25s ease,background .25s ease}
}

.ss__w-section{
  margin:0 0 34px;
}

.ss__w-section:last-child{margin-bottom:0}

.ss__w-section h3{
  margin:0 0 7px;
  color:var(--ink);
  font-size:1.38rem;
  line-height:1.18;
}

.ss__w-sub{
  margin:0 0 14px;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.5;
}

.ss__table-wrap{
  overflow:auto;
  border:1px solid var(--hairline);
  border-radius:8px;
  background:rgba(255,255,255,.42);
  position:relative;
}

.ss__table-wrap table{position:relative;z-index:3}

.ss__table-wrap table{
  width:100%;
  border-collapse:collapse;
  min-width:600px;
}

.ss__table-wrap th{
  text-align:left;
  padding:13px 15px;
  background:rgba(255,255,255,.62);
  border-bottom:1px solid var(--hairline);
  color:var(--ink-soft);
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0;
}

.ss__table-wrap td{
  padding:15px;
  color:var(--text2);
  line-height:1.55;
  border-bottom:1px solid var(--hairline);
  vertical-align:top;
}

.ss__table-wrap tr:last-child td{border-bottom:0}
.ss__table-wrap td:first-child{
  color:var(--ink);
  font-weight:800;
}

.ss__dosdonts,
.ss__comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.ss__dos,
.ss__donts,
.ss__comp-old,
.ss__comp-new{
  border-radius:8px;
  padding:16px;
  background:rgba(255,255,255,.44);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
  position:relative;
  overflow:hidden;
}

.ss__dos > *,
.ss__donts > *,
.ss__comp-old > *,
.ss__comp-new > *{position:relative;z-index:3}

.ss__dos{border-color:rgba(34,197,94,.26)}
.ss__donts{border-color:rgba(239,68,68,.24)}
.ss__comp-old{border-color:rgba(239,68,68,.24)}
.ss__comp-new{border-color:rgba(34,197,94,.26)}

.ss__dos-title,
.ss__donts-title,
.ss__comp-old-title,
.ss__comp-new-title{
  margin-bottom:10px;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0;
}

.ss__dos-title,
.ss__comp-new-title{color:#177a46}
.ss__donts-title,
.ss__comp-old-title{color:#b63737}

.ss__dos-item,
.ss__donts-item,
.ss__comp-item{
  color:var(--text2);
  font-size:.92rem;
  line-height:1.62;
  margin-top:6px;
}

.ss__faq-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ss__faq-item{
  overflow:hidden;
  border-radius:8px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.42);
  position:relative;
}

.ss__faq-item > *{position:relative;z-index:3}

.ss__faq-btn{
  width:100%;
  min-height:50px;
  border:0;
  padding:12px 15px;
  background:rgba(255,255,255,.46);
  color:var(--ink);
  font:800 .96rem/1.3 'Inter',system-ui,sans-serif;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  text-align:left;
  cursor:pointer;
}

.ss__faq-toggle{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(var(--active-rgb),.12);
  color:rgb(var(--active-rgb));
  flex:0 0 auto;
}

.ss__faq-toggle.open{transform:rotate(45deg)}

.ss__faq-answer{
  max-height:0;
  overflow:hidden;
}

.ss__faq-answer.open{max-height:180px}

.ss__faq-answer-inner{
  padding:0 15px 16px;
  color:var(--ink-soft);
  font-size:.94rem;
  line-height:1.65;
}

.ss__fade{
  position:absolute;
  z-index:6;
  left:0;
  right:0;
  bottom:0;
  height:90px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.82));
}

@media(max-width:1040px){
  .ss__heading{font-size:3.45rem}
  .ss__content{padding-top:40px}
}

@media(max-width:720px){
  .ss{padding:52px 12px 72px}
  .ss__header{margin-bottom:24px}
  .ss__heading{font-size:2.65rem}
  .ss__subhead{font-size:.98rem}
  /* Mobile: tabs WRAP into a pill grid so every tab is visible — no hidden
     horizontal scroll (owner: "no way to know to scroll over to click tabs"). */
  .ss__tabs-shell::before,.ss__tabs-shell::after{display:none}
  .ss__tabs{flex-wrap:wrap;overflow:visible;gap:6px;padding:8px;border-radius:14px 14px 0 0}
  .ss__tab{flex:1 1 calc(50% - 6px);min-width:0;min-height:46px;padding:0 12px;border:1px solid var(--hairline);border-radius:11px}
  .ss__tab.active::after{display:none}
  .ss__panel{min-height:0}
  .ss__content{padding:24px 12px 28px;gap:16px}
  .ss__window{min-height:0}
  /* Contain the tab content so it scrolls WITHIN the window on mobile instead of
     running the whole section thousands of px tall (owner: "tabs dont scroll"). */
  .ss__body{max-height:min(600px,68vh);overflow-y:auto;overscroll-behavior:auto;padding:26px 18px 42px}
  .ss__body h2{font-size:2rem}
  .ss__hero-sub{font-size:1rem}
  .ss__hero-caption{align-items:flex-start;flex-direction:column;gap:6px}
  .ss__hero-caption span{white-space:normal}
  .ss__feature-grid{grid-template-columns:1fr}
  .ss__dosdonts,
  .ss__comparison{grid-template-columns:1fr}
}

@media(max-width:440px){
  .ss__heading{font-size:2.24rem}
  .ss__kicker::before,
  .ss__kicker::after{width:22px}
  .wbtn-primary,
  .wbtn-secondary,
  .wbtn-page{width:100%}
}

/* ---------- DARK THEME OVERRIDES ---------- */
/* Section-scoped vars: re-point the shared border + shadow to the glass tokens
   so every descendant that reads var(--line)/var(--shadow) flips at once. */
[data-theme="dark"] .ss{
  --line:var(--glass-edge);
  --shadow:var(--glass-shadow);
}

/* The light-only wash gradients (::before warm sheen, ::after bright streak)
   read as muddy/grey on the dark page — soften them. */
[data-theme="dark"] .ss::before{
  background:
    linear-gradient(100deg,
      rgba(214,85,63,.26),
      rgba(77,143,207,.20) 34%,
      rgba(61,168,118,.16) 62%,
      rgba(147,121,204,.20));
}
[data-theme="dark"] .ss::after{
  background:
    linear-gradient(95deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 30%,
      rgba(255,255,255,.04) 52%,
      rgba(255,255,255,.12) 74%,
      rgba(255,255,255,0) 100%);
}

/* Edge fades on the tab scroller: fade to the dark page color, not paper. */
[data-theme="dark"] .ss__tabs-shell::before{
  background:linear-gradient(90deg,rgba(19,15,12,.95),rgba(19,15,12,0));
}
[data-theme="dark"] .ss__tabs-shell::after{
  background:linear-gradient(270deg,rgba(19,15,12,.95),rgba(19,15,12,0));
}

/* Translucent-white surfaces -> dark glass tint + dark inner highlight. */
[data-theme="dark"] .ss__tabs{
  background:var(--glass-tint);
  box-shadow:0 -1px 2px rgba(0,0,0,.3),0 16px 38px -8px rgba(0,0,0,.5),inset 0 1.5px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .ss__tab:hover{
  color:var(--ink);
  background:rgba(255,255,255,.06);
}
[data-theme="dark"] .ss__tab.active{
  color:var(--ink);
  background:
    linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),
    linear-gradient(90deg,rgba(var(--active-rgb),.22),rgba(255,255,255,0));
  border-color:var(--glass-edge);
  box-shadow:0 -2px 22px rgba(var(--active-rgb),.24),inset 0 1px 0 rgba(255,255,255,.12);
}

[data-theme="dark"] .ss__panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
    linear-gradient(110deg,rgba(var(--active-rgb),.16),rgba(255,255,255,0) 35%,rgba(77,143,207,.10) 72%,rgba(147,121,204,.10));
  box-shadow:var(--shadow),inset 0 1.5px 0 rgba(255,255,255,.1);
}

[data-theme="dark"] .ss__window{
  background:var(--surface);
  border-color:var(--glass-edge);
  box-shadow:var(--glass-shadow);
}
[data-theme="dark"] .ss__window::before{
  background:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.05) calc(var(--gx,50%) - 6%),rgba(255,255,255,.12) var(--gx,50%),rgba(255,255,255,.05) calc(var(--gx,50%) + 6%),transparent 58%),
    linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,0) 36%),
    linear-gradient(90deg,rgba(var(--active-rgb),.10),rgba(77,143,207,.07) 74%,rgba(255,255,255,0));
}
[data-theme="dark"] .ss__titlebar{
  background:rgba(255,255,255,.04);
}
[data-theme="dark"] .ss__body{
  scrollbar-color:rgba(var(--active-rgb),.5) rgba(255,255,255,.08);
}
[data-theme="dark"] .ss__body::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
[data-theme="dark"] .ss__body::-webkit-scrollbar-thumb{
  background:rgba(var(--active-rgb),.5);
  border:2px solid rgba(255,255,255,.1);
}

[data-theme="dark"] .ss__feature-panel{
  background:rgba(255,255,255,.04);
  border-color:var(--glass-edge);
  box-shadow:0 14px 36px -16px rgba(0,0,0,.5),inset 0 1.5px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .ss__hero-media{
  background:rgba(255,255,255,.05);
  border-color:var(--glass-edge);
  box-shadow:0 3px 12px rgba(0,0,0,.4),0 20px 46px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
}

[data-theme="dark"] .ss__table-wrap{
  background:rgba(255,255,255,.03);
}
[data-theme="dark"] .ss__table-wrap th{
  background:rgba(255,255,255,.06);
}

[data-theme="dark"] .ss__dos,
[data-theme="dark"] .ss__donts,
[data-theme="dark"] .ss__comp-old,
[data-theme="dark"] .ss__comp-new{
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .ss__dos-title,
[data-theme="dark"] .ss__comp-new-title{color:#4ed489}
[data-theme="dark"] .ss__donts-title,
[data-theme="dark"] .ss__comp-old-title{color:#e87d7d}

[data-theme="dark"] .ss__faq-item{
  background:rgba(255,255,255,.03);
}
[data-theme="dark"] .ss__faq-btn{
  background:rgba(255,255,255,.05);
}

/* Bottom scrim fades to the dark window surface, not white. */
[data-theme="dark"] .ss__fade{
  background:linear-gradient(180deg,rgba(30,24,19,0),rgba(30,24,19,.82));
}

/* Secondary button: dark glass + legible ink. */
[data-theme="dark"] .wbtn-secondary{
  color:var(--ink);
  background:rgba(255,255,255,.06);
}
[data-theme="dark"] .wbtn-secondary:hover{
  background:rgba(255,255,255,.1);
  box-shadow:0 14px 30px rgba(0,0,0,.4);
}
[data-theme="dark"] .wbtn-page{
  background:rgba(255,255,255,.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING-GLASS TABS (owner: "the tab section shouldn't be inside the box — it
   should like glass just be floating there, tabs right above it; use how you did
   the hero for the text"). Tabs = a glass pill row; panel = always-dark glass
   (both themes) with hero-style text (accent headings, light body). Kills the
   white browser-window chrome. Applies to home .ss AND service-page .ss.ssx.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss{min-height:auto!important;overflow:visible!important}
/* tab row → a centered glass pill, detached from the panel. Tabs WRAP onto
   multiple centered rows on desktop instead of hiding behind a side-scroll
   (owner: "if i didnt build it i wouldnt have known they were there… they should
   stack"). width is full (not max-content) so flex-wrap has room to break rows. */
.ss__tabs-shell{background:none!important;border:none!important;box-shadow:none!important;padding:0!important;width:100%;max-width:100%;margin:0 auto;overflow:visible;scrollbar-width:none}
.ss__tabs-shell::before,.ss__tabs-shell::after{display:none!important}
.ss__tabs{border:none!important;border-radius:16px;padding:7px;gap:5px;margin:0 auto;flex-wrap:wrap;justify-content:center;overflow:visible!important;width:max-content;max-width:100%;box-shadow:var(--glass-shadow)!important;
  background:var(--glass-tint)!important;-webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important}
.ss__tabs::before{display:none!important}
/* Each tab is a distinct, clickable chip. Surfaces + label use ADAPTIVE tokens so
   the pill is LIGHT glass on light, dark glass on dark (owner: "tabs are still dark
   in light mode"). --ink flips per theme, so labels always read. */
.ss__tab{border-radius:11px!important;border:1px solid var(--glass-edge)!important;background:color-mix(in srgb,var(--ink) 5%,transparent)!important;color:var(--ink-soft)!important;transition:background .2s var(--ease),border-color .2s ease,transform .15s var(--ease),color .2s ease!important}
.ss__tab:hover{background:color-mix(in srgb,var(--ink) 11%,transparent)!important;color:var(--ink)!important;transform:translateY(-1px)}
.ss__tab.active{color:var(--ink)!important;background:color-mix(in srgb,var(--active) 26%,transparent)!important;border-color:color-mix(in srgb,var(--active) 60%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--active) 45%,transparent),0 6px 16px -8px color-mix(in srgb,var(--active) 60%,transparent)!important}
/* panel → one floating glass card below the tabs (light on light, dark on dark) */
.ss__panel{margin:16px auto 0!important;min-height:auto!important;border-radius:26px!important;
  border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-shadow)!important;
  background:var(--glass-tint)!important;-webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important}
.ss__panel::before,.ss__panel::after,.ss__curves,.ss__stroke{display:none!important}
/* no nested window box / titlebar */
.ss__window{background:none!important;border:none!important;box-shadow:none!important}
.ss__window::before,.ss__window::after{display:none!important}
.ss__titlebar{display:none!important}
.ss__body{background:none!important}
/* accent headings, adaptive body text */
.ss__body h2,.ss__body .ss__brand,.ss__body .ss__hero-sub h3,.ss__body .td-point-head,.ss__body .ss__feature-check{color:var(--active)!important}
.ss__body,.ss__body .ss__hero-sub,.ss__body .ss__hero-sub p,.ss__body .td-point-detail,.ss__body p,.ss__body li,.ss__body td,.ss__body th,.ss__body .ss__feature-item{color:var(--ink)!important}
.ss__feature-panel{background:color-mix(in srgb,var(--ink) 6%,transparent)!important;border:1px solid var(--glass-edge)!important;border-radius:16px!important}
.ss__feature-panel::before,.ss__feature-panel::after{display:none!important}
.ss__body .wbtn-secondary,.ss__body .wbtn-page{color:var(--ink)!important;border-color:var(--glass-edge)!important;background:color-mix(in srgb,var(--ink) 6%,transparent)!important}
.ss__body table td,.ss__body table th{border-color:var(--glass-edge)!important}
.ss__body table th{color:var(--ink-soft)!important}


.ssx{min-height:auto;width:auto;max-width:1140px;margin:0 auto;padding:60px 5vw 30px}
.ssx .ss__content{padding:0}
.ssx .ss__window-wrap{width:100%}
.ssx .ss__window{display:none;min-height:0}
.ssx .ss__window.ssx-active{display:flex}
/* The tab PANEL scrolls inside itself (owner: "the tab page should scroll, not the
   whole page") — the tab strip above stays put while you read. */
/* overscroll-behavior:auto (not contain) so reaching the tab's top/bottom CHAINS
   into the page scroll — one continuous finger gesture flows on to the next
   section instead of trapping at the box edge (owner: "hard to go to the next
   section… i dont want to lose the scrolling tab"). The inner scroll stays. */
.ssx .ss__body{max-height:min(640px,72vh);overflow-y:auto;overscroll-behavior:auto;padding:30px clamp(18px,4vw,48px) 40px}
.ssx .ss__brand{margin-top:6px}
.ssx__heading{font-size:clamp(26px,3.4vw,38px)!important;margin:10px 0 8px}
.ssx .ss__body h2{font-size:clamp(1.7rem,3vw,2.5rem)}
/* Lead-in line under the tab headline. */
.ssx .td-subtitle{margin:0 0 14px;font-size:1.06rem;line-height:1.5;font-weight:600;color:var(--glass-ink-soft)}
/* Prominent "go to the full surface page" link, right under the headline. */
.ssx .td-surface{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:9px 16px;border-radius:11px;
  font-weight:800;font-size:1rem;text-decoration:none;color:var(--active);
  background:color-mix(in srgb,var(--active) 14%,transparent);border:1px solid color-mix(in srgb,var(--active) 42%,transparent);
  transition:background .2s var(--ease),transform .15s var(--ease),gap .2s var(--ease)}
.ssx .td-surface:hover{background:color-mix(in srgb,var(--active) 24%,transparent);transform:translateY(-1px);gap:12px}
.ssx .td-surface-arrow{font-weight:700;line-height:1}
.ssx .ss__hero-sub{font-size:1.02rem;margin-bottom:20px}
.ssx .ss__hero-sub p{margin:0 0 14px}
.ssx .ss__hero-sub p:last-child{margin-bottom:0}
/* accent sub-headlines injected into the blurb at real topic breaks (Part 2) */
.ssx .ss__hero-sub h3{font-family:'Archivo',Inter,sans-serif;font-weight:800;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.12;letter-spacing:-.01em;color:var(--accent);margin:26px 0 10px}
.ssx .ss__hero-sub h3:first-child{margin-top:0}
.ssx .ss__hero-sub a,.ssx .ss__feature-item a,.ssx .td-point-head a,.ssx .td-point-detail a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 38%,transparent);transition:border-color .2s}
.ssx .ss__hero-sub a:hover,.ssx .ss__feature-item a:hover,.ssx .td-point-head a:hover,.ssx .td-point-detail a:hover{border-bottom-color:var(--accent)}
.ssx .ss__feature-item{align-items:flex-start}
.ssx .td-point{display:flex;flex-direction:column;gap:2px}
.ssx .td-point-head{font-weight:800;color:var(--accent);line-height:1.3}
.ssx .td-point-detail{font-weight:400;font-size:.92em;color:var(--ink);line-height:1.45}
.ssx .ss__window-cta{margin-top:8px}
/* Per-tab call-out box (Part 4) — accent frame; fixed min-height keeps CLS at 0
   as the rotator swaps lines. Content is wired in Pass 2. */
.ssx .td-callout{margin-top:22px;min-height:64px;display:flex;align-items:center;padding:16px 20px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  font-size:1rem;font-weight:600;color:var(--ink)}
.ssx .td-callout-text{transition:opacity .4s var(--ease)}


.svc-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.svc-pricing,.svc-features,.svc-table,.svc-subs{padding:clamp(48px,7vw,88px) 0}
.svc-eyb{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-d);margin-bottom:16px}
.svc-eyb .r{width:30px;height:1px;background:var(--accent)}
.svc-h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(30px,4.6vw,54px);line-height:.98;letter-spacing:-.02em;color:var(--accent);margin-bottom:14px}
.svc-sub{font-size:clamp(15px,1.4vw,17px);color:var(--ink);max-width:60ch;margin-bottom:26px}

.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:30px}
.price-card{position:relative;border-radius:18px;padding:26px 22px;border:1px solid var(--glass-edge)}
.price-card-feat{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 18px 44px -20px color-mix(in srgb,var(--accent) 60%,transparent)}
.price-flag{position:absolute;top:-11px;left:22px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.price-label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.price-display{font-family:'Archivo',sans-serif;font-weight:900;font-size:26px;color:var(--ink);line-height:1.05}
.price-note{font-size:13.5px;color:var(--text2);line-height:1.5;margin-top:10px}
.price-foot{margin-top:24px;font-size:14px;color:var(--ink-soft)}

.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:30px}
.feat-item{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--glass-edge);font-size:15px;color:var(--ink);font-weight:500}
.feat-check{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--accent)}
.feat-check svg{width:15px;height:15px}

.tbl-scroll{margin-top:26px;border-radius:16px;border:1px solid var(--glass-edge);overflow-x:auto}
.svc-table table{width:100%;border-collapse:collapse;min-width:520px}
.svc-table th,.svc-table td{text-align:left;padding:15px 18px;font-size:14px}
.svc-table th{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-d);border-bottom:1px solid var(--glass-edge)}
.svc-table td{color:var(--text2);border-bottom:1px solid var(--hairline)}
.svc-table tbody tr:last-child td{border-bottom:0}
.svc-table td:first-child{color:var(--ink);font-weight:600}

.subs-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.sub-chip{padding:10px 16px;border-radius:999px;border:1px solid var(--glass-edge);font-size:14px;font-weight:500;color:var(--ink);background:color-mix(in srgb,var(--accent) 7%,transparent)}


.gloss::after{content:'';position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);border-radius:inherit;
  -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent);opacity:.7}
.gallery{max-width:1340px;margin:0 auto;padding:60px 5vw 90px;position:relative}
.g-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:42px;flex-wrap:wrap}
.g-head{max-width:680px}
.eyb{display:inline-flex;align-items:center;gap:13px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-d);margin-bottom:18px}
.eyb .r{width:34px;height:1px;background:var(--orange)}
.g-head h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(42px,6.2vw,78px);line-height:.92;letter-spacing:-.02em;margin-bottom:18px}
.g-head h2 em{color:var(--orange);font-style:italic;font-weight:600}
.g-head p{font-size:clamp(15px,1.4vw,17px);color:var(--text2);line-height:1.62;max-width:56ch}
.g-head p b{color:var(--ink);font-weight:600}
.stat{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:18px 24px;border-radius:18px}
.stat .n{font-family:'Archivo',sans-serif;font-weight:900;font-style:italic;font-size:46px;line-height:1;color:var(--ink)}
.stat .l{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5}

/* slider */
.viewport{overflow:hidden;border-radius:24px;margin:0 -6px;padding:22px 6px 30px}
.track{display:flex;gap:26px;transition:transform .6s var(--ease);will-change:transform}
.proj{flex:0 0 auto;width:min(88vw,520px);position:relative;cursor:pointer;outline:none;perspective:1100px}

/* frame tilts toward the cursor */
.frame{position:relative;border-radius:24px;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),box-shadow .35s var(--ease);
  box-shadow:var(--sx,0px) var(--sy,22px) 50px -22px rgba(120,72,40,.45), inset 0 1px 0 rgba(255,255,255,.85);
  will-change:transform}
.proj:hover .frame,.proj:focus-within .frame{transition:transform .12s linear,box-shadow .3s var(--ease)}

/* window — photo set back behind glass. LANDSCAPE 3:2 to match the way the owner
   shoots (horizontal); portrait shots live in the modal stack, not cropped here.
   Scoped to .proj so the generic ".window" class can't leak this aspect onto other
   components (e.g. the service-map card, which also uses class="window"). */
.proj .window{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:3/2;transform:translateZ(0);
  border:1px solid var(--glass-edge);background:var(--paper-3)}
.proj .window::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 2px 12px rgba(40,24,12,.30), inset 0 0 0 1px rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(20,12,6,.20),transparent 22%,transparent 58%,rgba(20,12,6,.40));
  transition:opacity .5s var(--ease);opacity:.92}
.proj:hover .window::after,.proj:focus-within .window::after{opacity:.6}
.proj .window img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .7s var(--ease)}
.proj:hover .window img,.proj:focus-within .window img{transform:scale(1.08)}

.cat{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.72);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 16px -8px rgba(0,0,0,.3);transform:translateZ(30px)}
.cat i{width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* multi-photo badge — signals a project stack you can flip through */
.stackbadge{position:absolute;top:14px;right:66px;z-index:5;display:inline-flex;align-items:center;gap:5px;
  padding:7px 11px;border-radius:999px;font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--orange-bright),var(--orange));
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.4);transform:translateZ(34px)}
.stackbadge svg{width:14px;height:14px}

/* plus — opens the project; floats forward with the card, never clipped */
.plus{position:absolute;top:14px;right:14px;z-index:5;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,var(--orange-bright),var(--orange));
  box-shadow:0 10px 22px -7px rgba(217,59,43,.7), inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateZ(40px);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.plus:hover{transform:translateZ(40px) rotate(90deg) scale(1.06);box-shadow:0 14px 28px -8px rgba(217,59,43,.8), inset 0 1px 0 rgba(255,255,255,.6)}
.plus:focus-visible{outline:3px solid rgba(217,59,43,.55);outline-offset:3px}
.plus svg{width:20px;height:20px}

/* plate — slim strip: just city + color dots, so the card stays mostly photo */
.plate{position:absolute;left:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:12px;padding:8px 13px;border-radius:12px;
  background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,250,245,.5));
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(6px) saturate(140%);backdrop-filter:blur(6px) saturate(140%);
  box-shadow:0 8px 20px -10px rgba(80,45,20,.42), inset 0 1px 0 rgba(255,255,255,.92);
  transform:translateZ(10px);transition:transform .5s var(--ease)}
.proj:hover .plate,.proj:focus-within .plate{transform:translateZ(44px)}
.plate .loc{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:13px;font-weight:600}
.plate .loc svg{width:13px;height:13px;color:var(--accent)}
.plate .dots{display:flex;gap:6px}
.plate .dots span{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 2px 5px -1px rgba(0,0,0,.3)}

/* controls */
.controls{display:flex;align-items:center;gap:20px;margin-top:34px}
.arrows{display:flex;gap:10px}
.arrow{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.6);border:1px solid var(--glass-edge);color:var(--ink);transition:.2s var(--ease);
  box-shadow:0 10px 24px -12px rgba(120,72,40,.4), inset 0 1px 0 rgba(255,255,255,.95)}
.arrow:hover:not(:disabled){background:var(--surface);transform:translateY(-2px)}
.arrow:disabled{opacity:.4;cursor:not-allowed}
.arrow svg{width:20px;height:20px}
.bar{flex:1;height:3px;border-radius:3px;background:var(--hairline);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--orange-bright));transition:width .6s var(--ease)}
.counter{font-family:'Archivo',sans-serif;font-style:italic;font-weight:500;font-size:20px;color:var(--text2);min-width:74px;text-align:right}
.counter b{color:var(--ink);font-weight:700;font-style:normal}

@media(prefers-reduced-motion:reduce){.frame,.proj .window img,.plate,.proj .window::after,.track{transition:none!important}.plate{transform:none}}

/* ── PROJECT MODAL (light liquid glass) ── */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse at 70% 20%,rgba(255,230,212,.55),rgba(40,28,18,.42));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal.open{display:flex;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:min(980px,100%);max-height:92vh;overflow:hidden;border-radius:26px;display:flex;flex-direction:column;
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,250,245,.7));
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 50px 100px -30px rgba(80,45,20,.6), inset 0 1px 0 rgba(255,255,255,1);
  animation:rise .45s var(--ease)}
@keyframes rise{from{transform:translateY(24px) scale(.98);opacity:0}to{transform:none;opacity:1}}
/* Landscape stage on TOP — the owner shoots horizontal. contain (never crop),
   with a blurred cover-fit copy of the same photo filling the bed — so a
   portrait shot reads as a designed vignette, never black pillar bars. */
.sheet-photo{position:relative;flex:0 0 auto;aspect-ratio:3/2;max-height:50vh;background:#0f0c09;overflow:hidden}
.sheet-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#mImgBg{object-fit:cover;filter:blur(26px) saturate(1.15) brightness(.66);transform:scale(1.12);z-index:0}
#mImg{position:absolute;z-index:1;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
/* before/after drag comparison */
.sheet-ba{position:absolute;inset:0;z-index:2;cursor:ew-resize;touch-action:none;--ba:50%}
.sheet-ba .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.sheet-ba .ba-after{clip-path:inset(0 0 0 var(--ba))}
.sheet-ba .ba-handle{position:absolute;top:0;bottom:0;left:var(--ba);width:2px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.55);transform:translateX(-1px)}
.sheet-ba .ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.92);border:1px solid var(--glass-edge);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.sheet-ba .ba-grip svg{width:20px;height:20px}
.ba-tag{position:absolute;bottom:14px;z-index:3;padding:6px 12px;border-radius:999px;font-family:'Inter';font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(20,14,10,.66);pointer-events:none}
.ba-tag-b{left:14px}.ba-tag-a{right:14px}
.sheet-nav{position:absolute;bottom:16px;z-index:3;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.85);border:1px solid var(--glass-edge);color:var(--ink);box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.sheet-nav.prev{left:16px}.sheet-nav.next{left:74px}
.sheet-nav svg{width:20px;height:20px}
.sheet-count{position:absolute;bottom:24px;right:18px;z-index:3;font-family:'Archivo',sans-serif;font-style:italic;color:#fff;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
/* vertical nav — flip through THIS project's photo stack */
.sheet-vnav{position:absolute;top:50%;right:16px;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:9px}
.vnav{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.88);border:1px solid var(--glass-edge);color:var(--ink);box-shadow:0 8px 20px -8px rgba(0,0,0,.45);transition:.2s var(--ease)}
.vnav:hover{background:#fff;transform:scale(1.06)}
.vnav svg{width:20px;height:20px}
.vnav-count{font-family:'Archivo',sans-serif;font-style:italic;font-weight:700;font-size:13px;color:#fff;background:rgba(20,14,10,.62);padding:4px 10px;border-radius:999px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.sheet-body{padding:26px 34px 30px;overflow-y:auto;min-height:0}
.sheet-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:6px 44px;align-items:start}
.sheet-col .block-lbl:first-child{margin-top:2px}
.sheet-eyb{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-d);margin-bottom:14px}
.sheet-eyb .r{width:26px;height:1px;background:var(--orange)}
.sheet-body h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:-.01em}
.sheet-body h2 em{color:var(--orange);font-style:italic;font-weight:500}
.sheet-loc{display:inline-flex;align-items:center;gap:7px;color:var(--text2);font-size:14px;font-weight:500;margin-top:12px}
.sheet-loc svg{width:15px;height:15px;color:var(--orange)}
.sheet-desc{font-size:14.5px;line-height:1.62;color:var(--text2);margin-top:16px}
.block-lbl{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:26px 0 14px}
.colors{display:flex;flex-direction:column;gap:13px}
.color-row{display:flex;align-items:center;gap:13px}
.color-sw{width:30px;height:30px;border-radius:50%;flex:0 0 auto;border:1.5px solid var(--glass-edge);box-shadow:0 3px 8px -3px rgba(0,0,0,.35)}
/* Named in the filename but not a stocked fandeck chip, so no measured value. */
.color-sw--unknown{background:none;border-style:dashed;box-shadow:none;opacity:.55}
.color-nm{font-family:'Archivo',sans-serif;font-style:italic;font-weight:600;font-size:16px;color:var(--ink)}
.color-meta{margin-left:auto;text-align:right;font-size:12.5px;color:var(--muted);font-weight:500}
.divider{height:1px;background:var(--hairline);margin:24px 0}
.surfaces{display:flex;flex-wrap:wrap;gap:9px}
.surf{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:500;color:var(--text2);
  background:rgba(255,255,255,.6);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.meta-row{display:flex;gap:48px;margin-top:24px}
.meta-row .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.meta-row .v{font-family:'Archivo',sans-serif;font-style:italic;font-weight:600;font-size:22px;color:var(--ink)}
.sheet-actions{display:flex;gap:12px;flex-wrap:wrap;position:sticky;bottom:-30px;z-index:2;
  margin:22px -34px -30px;padding:16px 34px 20px;
  background:linear-gradient(180deg,transparent,rgba(255,250,245,.94) 30%)}
.btn-quote{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;flex:1;justify-content:center;
  padding:15px 22px;border:0;border-radius:14px;cursor:pointer;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;color:#fff;
  background:linear-gradient(180deg,var(--orange-bright),var(--orange));
  box-shadow:0 14px 30px -10px rgba(217,59,43,.7), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 18px -12px rgba(150,60,20,.5);transition:.2s var(--ease)}
.btn-quote::after{content:'';position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);pointer-events:none}
.btn-quote:hover{transform:translateY(-2px)}
.btn-quote svg{width:17px;height:17px}
.btn-text{display:inline-flex;align-items:center;gap:9px;padding:15px 22px;border-radius:14px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.62);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.95);transition:.2s var(--ease)}
.btn-text:hover{background:var(--surface);transform:translateY(-2px)}
.btn-text svg{width:17px;height:17px;color:var(--orange)}
.x{position:absolute;top:16px;right:16px;z-index:4;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.8);border:1px solid var(--glass-edge);color:var(--ink);box-shadow:0 6px 16px -6px rgba(0,0,0,.3);transition:.2s var(--ease)}
.x:hover{background:var(--surface);transform:rotate(90deg)}
.x svg{width:18px;height:18px}

@media(max-width:780px){
  .sheet{max-height:94vh}
  .sheet-photo{aspect-ratio:4/3;max-height:42vh}
  .sheet-cols{grid-template-columns:1fr}
  .meta-row{gap:32px}
}

/* ── DARK theme overrides (light stays byte-identical above) ── */
[data-theme="dark"] .gloss::after{background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);opacity:.6}
[data-theme="dark"] .frame{box-shadow:var(--sx,0px) var(--sy,22px) 50px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08)}
/* card chrome over photos — dark glass plates */
[data-theme="dark"] .cat{background:rgba(20,16,12,.66);border-color:var(--glass-edge);color:var(--ink)}
[data-theme="dark"] .plate{background:linear-gradient(150deg,rgba(30,24,19,.82),rgba(24,19,14,.7));border-color:var(--glass-edge);box-shadow:0 16px 32px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="dark"] .proj:hover .plate,[data-theme="dark"] .proj:focus-within .plate{box-shadow:0 28px 52px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1)}
/* controls */
[data-theme="dark"] .arrow{background:var(--glass-tint);box-shadow:0 10px 24px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="dark"] .arrow:hover:not(:disabled){background:var(--surface)}
/* modal sheet */
[data-theme="dark"] .sheet{background:linear-gradient(150deg,rgba(30,24,19,.9),rgba(24,19,14,.82));border-color:var(--glass-edge);box-shadow:0 50px 100px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="dark"] .sheet-nav{background:rgba(30,24,19,.85);border-color:var(--glass-edge)}
[data-theme="dark"] .vnav{background:rgba(30,24,19,.85);border-color:var(--glass-edge);color:var(--ink)}
[data-theme="dark"] .vnav:hover{background:var(--surface)}
[data-theme="dark"] .surf{background:var(--glass-tint);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
[data-theme="dark"] .sheet-actions{background:linear-gradient(180deg,transparent,rgba(26,20,15,.94) 30%)}
[data-theme="dark"] .btn-text{background:var(--glass-tint);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
[data-theme="dark"] .btn-text:hover{background:var(--surface)}
[data-theme="dark"] .x{background:rgba(30,24,19,.82);border-color:var(--glass-edge)}


/* ── ONE glass review card, flip-through (owner: "one beautiful glass review card
   with my best"). Always-dark see-through glass in BOTH themes — only the page
   behind it flips; text stays legible over the glass. Reuses global tokens. ── */
.pdr{position:relative;isolation:isolate;padding:clamp(56px,8vw,104px) clamp(16px,5vw,48px);display:flex;justify-content:center}
.pdr-inner{width:100%;max-width:780px;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.pdr-head{display:flex;flex-direction:column;align-items:center;gap:9px}
.pdr-hstars{color:#f5a623;letter-spacing:3px;font-size:18px}
.pdr-head h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.pdr-head h2 em{font-style:italic;color:var(--accent)}
.pdr-sum{font-size:14px;font-weight:600;color:var(--ink-soft)}
.pdr-sum b{color:var(--accent);font-weight:800}

.pdr-stage{position:relative;width:100%;display:flex;align-items:center;gap:12px;justify-content:center}
.pdr-card{position:relative;flex:1 1 auto;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:clamp(30px,4vw,52px) clamp(24px,4vw,56px);border-radius:26px;text-align:center;overflow:hidden;
  background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);color:var(--ink);
  transition:opacity .28s var(--ease),transform .28s var(--ease);outline:none}
.pdr-card.is-out{opacity:0;transform:translateY(10px)}
.pdr-card:focus-visible{box-shadow:var(--glass-shadow),0 0 0 2px var(--accent)}
.pdr-fstars{color:#f5a623;letter-spacing:3px;font-size:17px;position:relative;z-index:1}
.pdr-headline{font-family:'Archivo',sans-serif;font-style:italic;font-weight:800;font-size:clamp(19px,2.2vw,27px);line-height:1.28;color:var(--ink);max-width:24ch;position:relative;z-index:1}
.pdr-text{font-size:clamp(14px,1.15vw,15.5px);line-height:1.62;font-weight:450;color:var(--ink-soft);max-width:54ch;position:relative;z-index:1}
.pdr-more{position:relative;z-index:1;cursor:pointer;padding:6px 4px;border:0;background:none;font:inherit;font-size:13px;font-weight:800;letter-spacing:.01em;
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.pdr-more:hover{opacity:.82}
.pdr-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* Full-text state: let the card grow and top-align so a long quote reads cleanly. */
.pdr-card.is-open{justify-content:flex-start}
.pdr-card.is-open .pdr-text{max-width:60ch}
.pdr-foot{display:flex;align-items:center;gap:13px;margin-top:6px;position:relative;z-index:1}
/* Avatar now shows the review SOURCE (Google / Nextdoor) — white disc, brand mark. */
.pdr-av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.06)}
.pdr-av svg{width:24px;height:24px;display:block}
.pdr-who{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.pdr-name{font-family:'Archivo';font-weight:800;font-size:15px;color:var(--ink)}
.pdr-meta{font-size:12px;font-weight:600;color:var(--ink-soft);opacity:.9}
.pdr-proj{font-weight:800}
.pdr-meta-rest{color:var(--ink-soft)}

.pdr-nav{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:24px;line-height:1;padding:0;
  color:var(--ink);background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);transition:transform .2s var(--ease),border-color .2s ease}
.pdr-nav:hover{transform:translateY(-2px);border-color:var(--accent)}
.pdr-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pdr-dots{display:flex;gap:1px;flex-wrap:wrap;justify-content:center;max-width:340px}
/* The dot stays 8px visually; the button itself is a 24px tap target (WCAG 2.5.8)
   so a thumb can hit it — the visible circle is the ::before. */
.pdr-dot{width:24px;height:24px;display:grid;place-items:center;cursor:pointer;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent}
.pdr-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent);transition:transform .2s var(--ease),background .2s ease}
.pdr-dot:hover::before{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.pdr-dot.is-active::before{background:var(--accent);transform:scale(1.35)}
.pdr-dot:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-radius:50%}

.pdr-social{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:4px}
.pdr-chip{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);transition:transform .2s var(--ease),border-color .2s ease}
.pdr-chip:hover{transform:translateY(-2px);border-color:var(--accent)}
.pdr-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pdr-chip svg{width:23px;height:23px;display:block}

@media (max-width:640px){
  /* Keep the arrows on mobile (owner) — just smaller + tighter so the card breathes. */
  .pdr-stage{gap:7px}
  .pdr-nav{width:38px;height:38px;font-size:21px}
  .pdr-card{min-height:400px;padding:clamp(26px,6vw,40px) clamp(18px,5vw,32px)}
}
@media (prefers-reduced-motion:reduce){
  .pdr-card{transition:none}
}


.faq{position:relative;width:100%;padding:80px 0 90px;overflow:hidden}
.faq-bg-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:400px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--orange) 7%,transparent) 0%,transparent 70%);pointer-events:none;z-index:0}
.faq-header{position:relative;z-index:1;text-align:center;margin-bottom:48px;padding:0 20px}
.faq-header-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--orange-d);font-family:'Inter',sans-serif;margin-bottom:12px}
.faq-header h2{font-family:'Archivo','Inter',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:800;color:var(--ink);line-height:1.15;margin:0 0 12px}
.faq-header p{font-size:16px;color:var(--ink-soft);max-width:500px;margin:0 auto;line-height:1.6}

.faq-pills{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;margin-bottom:32px;padding:0 20px;flex-wrap:wrap}
.faq-pill{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,251,246,.18));-webkit-backdrop-filter:saturate(128%) brightness(1.03);backdrop-filter:saturate(128%) brightness(1.03);border:1px solid var(--glass-edge);box-shadow:0 2px 8px rgba(80,60,40,.1),inset 0 1.5px 0 rgba(255,255,255,1);font-size:12px;color:var(--ink-soft);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),border-color .2s ease,box-shadow .2s ease}
a.faq-pill:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--orange-d) 45%,var(--glass-edge));box-shadow:0 6px 16px -6px color-mix(in srgb,var(--orange-d) 40%,transparent),inset 0 1.5px 0 rgba(255,255,255,1)}
.faq-pill-label{font-weight:700;color:var(--orange-d)}
.faq-pill-count{font-size:11px;font-weight:800;color:var(--orange-d);opacity:.72;font-family:'Inter',sans-serif}
.faq-pill[data-cat="interior"]{--orange-d:#8f4529}
.faq-pill[data-cat="exterior"]{--orange-d:#356ba6}
.faq-pill[data-cat="cabinets"]{--orange-d:#8a6a26}
.faq-pill[data-cat="commercial"]{--orange-d:#2c7d56}
.faq-pill[data-cat="sheetrock"]{--orange-d:#a85628}
.faq-pill[data-cat="color"]{--orange-d:#6f59a3}
.faq-pill[data-cat="general"]{--orange-d:#73604a}
/* Filter pills (home): buttons need the font reset; hover + active read as clickable. */
button.faq-pill{font-family:'Inter',sans-serif;font-size:12px}
.faq-pill:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--orange-d) 45%,var(--glass-edge));box-shadow:0 6px 16px -6px color-mix(in srgb,var(--orange-d) 40%,transparent),inset 0 1.5px 0 rgba(255,255,255,1)}
.faq-pill.active{border-color:var(--orange-d);background:color-mix(in srgb,var(--orange-d) 15%,transparent);box-shadow:0 4px 14px -6px color-mix(in srgb,var(--orange-d) 40%,transparent),inset 0 1.5px 0 rgba(255,255,255,.9)}

.faq-scroll-wrap{position:relative;z-index:1}
.faq-fade-left,.faq-fade-right{position:absolute;top:0;bottom:0;width:60px;z-index:5;pointer-events:none;transition:opacity .3s}
.faq-fade-left{left:0;background:linear-gradient(to right,var(--paper-2),transparent);opacity:0}
.faq-fade-right{right:0;background:linear-gradient(to left,var(--paper-2),transparent)}
.faq-scroll{display:flex;gap:16px;padding:8px clamp(20px,4vw,60px) 20px;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.faq-scroll::-webkit-scrollbar{display:none}

.faq-card{position:relative;min-width:344px;max-width:344px;width:344px;background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,251,246,.22));-webkit-backdrop-filter:saturate(128%) brightness(1.03);backdrop-filter:saturate(128%) brightness(1.03);border-radius:16px;border:1px solid var(--glass-edge);border-top:3px solid var(--orange);padding:28px 26px;cursor:pointer;transition:all .5s var(--ease);flex-shrink:0;overflow:hidden;box-shadow:0 2px 8px rgba(80,60,40,.1),0 16px 34px -14px rgba(110,85,60,.22),inset 0 1.5px 0 rgba(255,255,255,1);z-index:1}
/* Per-service color (home + /faq show mixed categories — give each its own color). */
.faq-card[data-cat="interior"]{--orange:#b85c3e;--orange-d:#8f4529}
.faq-card[data-cat="exterior"]{--orange:#4d8fcf;--orange-d:#356ba6}
.faq-card[data-cat="cabinets"]{--orange:#cca34d;--orange-d:#8a6a26}
.faq-card[data-cat="commercial"]{--orange:#3da876;--orange-d:#2c7d56}
.faq-card[data-cat="sheetrock"]{--orange:#d97742;--orange-d:#a85628}
.faq-card[data-cat="color"]{--orange:#9379cc;--orange-d:#6f59a3}
.faq-card[data-cat="general"]{--orange:#9a7f63;--orange-d:#73604a}
.faq-card:hover{box-shadow:0 4px 12px rgba(80,60,40,.14),0 24px 44px -14px rgba(110,85,60,.3),0 0 40px color-mix(in srgb,var(--orange) 8%,transparent),inset 0 1.5px 0 rgba(255,255,255,1)}
.faq-card.expanded{min-width:min(520px,90vw);max-width:520px;width:min(520px,90vw);padding:28px;cursor:default;box-shadow:0 30px 64px -20px rgba(110,85,60,.4),0 0 40px color-mix(in srgb,var(--orange) 14%,transparent),inset 0 1.5px 0 rgba(255,255,255,1);z-index:20}
.faq-card.dimmed{opacity:.4;transform:scale(.96);filter:saturate(.85)}
.faq-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.faq-card.expanded .faq-card-header{margin-bottom:16px}
.faq-card-cat{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;font-family:'Inter',sans-serif;color:var(--orange-d);text-decoration:none;cursor:pointer;position:relative;z-index:5}
a.faq-card-cat:hover{text-decoration:underline}
.faq-card-toggle{width:28px;height:28px;border-radius:50%;border:1px solid color-mix(in srgb,var(--orange) 35%,transparent);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;line-height:1;background:color-mix(in srgb,var(--orange) 12%,transparent);color:var(--orange-d)}
.faq-card.expanded .faq-card-toggle{transform:rotate(45deg);background:var(--orange);border-color:var(--orange);color:#fff}
.faq-card-question{font-family:'Archivo','Inter',sans-serif;font-size:17px;font-weight:700;color:var(--ink);line-height:1.32;margin:0 0 10px;transition:font-size .4s var(--ease)}
.faq-card.expanded .faq-card-question{font-size:22px}
.faq-card-teaser{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.faq-card.expanded .faq-card-teaser{display:none}
.faq-card-expanded{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s ease .1s}
.faq-card.expanded .faq-card-expanded{max-height:600px;opacity:1}
.faq-card-answer{font-size:15px;color:var(--text2);line-height:1.75;margin:0 0 16px}
.faq-card-tip{border-radius:10px;padding:12px 14px;margin-bottom:20px;display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--orange) 8%,transparent);border:1px solid color-mix(in srgb,var(--orange) 18%,transparent)}
.faq-card-tip-badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;font-family:'Inter',sans-serif;padding:3px 8px;border-radius:4px;flex-shrink:0;margin-top:1px;color:#fff;background:var(--orange)}
.faq-card-tip p{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0}
.faq-card-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.faq-card-cta a{padding:10px 20px;border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;text-decoration:none;display:inline-block;transition:opacity .2s,transform .2s}
.faq-card-cta a:hover{transform:translateY(-1px)}
.fbtn-primary{background:var(--orange);color:#fff;font-weight:700;box-shadow:0 10px 22px -10px rgba(217,59,43,.5)}
.fbtn-secondary{background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,251,246,.18));color:var(--ink);font-weight:600;border:1px solid var(--glass-edge)}

.faq-arrows{position:relative;z-index:1;display:flex;justify-content:center;gap:12px;margin-top:28px}
.faq-arrow{width:40px;height:40px;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,251,246,.18));-webkit-backdrop-filter:saturate(128%) brightness(1.03);backdrop-filter:saturate(128%) brightness(1.03);border:1px solid var(--glass-edge);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s ease,border-color .3s ease,opacity .3s ease,transform .3s ease;-webkit-appearance:none;appearance:none;color:var(--ink-soft);box-shadow:0 2px 8px rgba(80,60,40,.1),inset 0 1.5px 0 rgba(255,255,255,1)}
.faq-arrow:hover{color:var(--orange-d);transform:translateY(-1px)}
.faq-arrow.hidden{opacity:.35;color:var(--ink-soft);cursor:default;pointer-events:none}
.faq-arrow:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.faq-bottom-cta{position:relative;z-index:1;text-align:center;margin-top:40px;padding:0 20px}
.faq-bottom-cta p{font-size:15px;color:var(--ink-soft);margin:0 0 16px}
.faq-bottom-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.faq-bottom-buttons a{padding:12px 28px;border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;text-decoration:none;display:inline-block;transition:transform .2s ease}
.faq-bottom-buttons a:hover{transform:translateY(-1px)}

@media (max-width:600px){
  .faq-card{min-width:300px;max-width:300px;width:300px}
  .faq-card.expanded{min-width:min(340px,92vw);max-width:min(340px,92vw);width:min(340px,92vw)}
}

/* ---------- DARK: re-skin hardcoded light surfaces as dark glass ---------- */
/* Light declarations above are left untouched so light mode stays identical;
   only the dark theme re-routes card/pill/arrow/button surfaces to glass tokens
   with dark shadows + legible text, keeping the red top-border accent. */
[data-theme="dark"] .faq-pill{background:var(--glass-tint);border:1px solid var(--glass-edge);box-shadow:0 2px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="dark"] .faq-card{background:var(--glass-tint);border-color:var(--glass-edge);border-top:3px solid var(--orange);box-shadow:0 2px 10px rgba(0,0,0,.5),0 16px 34px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="dark"] .faq-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.55),0 24px 44px -14px rgba(0,0,0,.7),0 0 40px color-mix(in srgb,var(--orange) 16%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="dark"] .faq-card.expanded{box-shadow:0 30px 64px -20px rgba(0,0,0,.75),0 0 40px color-mix(in srgb,var(--orange) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="dark"] .faq-arrow{background:var(--glass-tint);border:1px solid var(--glass-edge);box-shadow:0 2px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="dark"] .fbtn-secondary{background:var(--glass-tint);border:1px solid var(--glass-edge)}


.service-map{--bald:var(--accent);--bald-d:var(--orange-d);--mob:color-mix(in srgb,var(--accent) 46%,#8a8f96);--mob-d:color-mix(in srgb,var(--accent) 66%,#000);max-width:1000px;margin:0 auto;padding:14px 18px 22px}

.service-map .window{position:relative;border-radius:26px;padding:15px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,251,246,.56));
  backdrop-filter:saturate(1.35) brightness(1.03);-webkit-backdrop-filter:saturate(1.35) brightness(1.03);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 2px 8px rgba(80,60,40,.12),0 26px 56px rgba(110,85,60,.22),0 60px 110px -26px color-mix(in srgb,var(--bald) 34%,transparent),inset 0 1.5px 0 rgba(255,255,255,1)}
.service-map .window::before{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;z-index:6;padding:1.3px;
  background:var(--map-ring,linear-gradient(135deg,#D93B2B,#F2A0C0 24%,#7FB0E8 48%,#6FD6D0 66%,#F2A0C0 82%,#D93B2B));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.65}
.service-map .window::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) calc(var(--gx,50%) - 6%),rgba(255,255,255,.36) var(--gx,50%),rgba(255,255,255,.16) calc(var(--gx,50%) + 6%),transparent 58%);opacity:0;transition:opacity .4s ease}
.stage:hover .service-map .window::after{opacity:0}
.service-map .sheen{display:none;position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .35s ease;mix-blend-mode:screen;
  background:
    radial-gradient(240px circle at calc(var(--mx,50%) + 7px) var(--my,50%),rgba(255,170,110,.28),transparent 60%),
    radial-gradient(240px circle at calc(var(--mx,50%) - 7px) var(--my,50%),rgba(110,170,255,.24),transparent 60%),
    radial-gradient(210px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.32),transparent 58%)}

.service-map .toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;position:relative;z-index:2;flex-wrap:wrap}
.service-map .rate{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:14px;font-size:13px;font-weight:600;color:var(--ink);
  background:linear-gradient(160deg,rgba(244,239,231,.85),rgba(233,225,213,.7));
  box-shadow:inset 4px 4px 10px rgba(176,158,134,.6),inset -4px -4px 10px rgba(255,255,255,.92)}
.service-map .rate .st{color:var(--bald)}.service-map .rate .mut{color:var(--ink-soft);font-weight:400}
.service-map .hint{font-size:12.5px;color:var(--ink-soft)}.service-map .hint b{color:var(--bald-d);font-weight:600}

.service-map .maparea{position:relative;border-radius:18px;overflow:hidden;z-index:2;border:1px solid rgba(176,158,134,.3)}
.service-map .maparea::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:4;
  box-shadow:inset 7px 7px 18px rgba(120,98,74,.32),inset -5px -5px 14px rgba(255,255,255,.45)}
.service-map svg{display:block;width:100%;height:auto}
.service-map .zoneLabel{font-weight:600;letter-spacing:.22em;font-size:19px}
.service-map .cityLabel{font-size:13.5px;fill:#6f675b;font-weight:500}
.service-map .hqLabel{font-weight:600;font-size:13.5px;fill:var(--bald-d)}
.service-map .hqSub{font-weight:600;font-size:8.5px;letter-spacing:.12em;fill:var(--bald-d);opacity:.85}
.service-map .road{fill:none;stroke:#D6C2A6;stroke-width:2.6;opacity:.72;stroke-linecap:round}
.service-map .road.big{stroke:#D8B98E;stroke-width:3.8;opacity:.85}
.service-map .river{fill:none;stroke:#AEC8DC;stroke-width:2.5;opacity:.55;stroke-linecap:round}
.service-map .border{fill:none;stroke:#C0A98C;stroke-width:1.4;stroke-dasharray:7 7;opacity:.45}
.service-map .dot{cursor:pointer}
.service-map .dot circle.core{fill:#fff;stroke:#cdbfa9;stroke-width:1.5;filter:drop-shadow(0 2px 3px rgba(80,60,40,.3));transition:r .18s ease}
.service-map .dot:hover circle.core,.service-map .dot.act circle.core{r:8}
.service-map .spoke{fill:none;stroke-width:1.5;stroke-dasharray:4 5;opacity:0;transition:opacity .25s ease}
.service-map .spoke.on{opacity:.6}
.service-map .pulse{fill:var(--bald);opacity:.25;transform-origin:center;animation:smap-pulse 3.2s ease-out infinite}
@keyframes smap-pulse{0%{transform:scale(.6);opacity:.4}70%{opacity:0}100%{transform:scale(2.4);opacity:0}}

.service-map .wells{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;position:relative;z-index:2}
@media(max-width:720px){.service-map .wells{grid-template-columns:1fr}}
.service-map .well{border-radius:16px;padding:13px 14px;
  background:linear-gradient(160deg,rgba(244,239,231,.7),rgba(233,225,213,.58));
  box-shadow:inset 5px 5px 13px rgba(176,158,134,.6),inset -5px -5px 13px rgba(255,255,255,.92)}
.service-map .well .ch{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.service-map .well .ch .d{width:9px;height:9px;border-radius:50%}
.service-map .well .ch .n{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.service-map .well .ch .c{margin-left:auto;font-size:11px;color:var(--ink-soft)}
.service-map .chips{display:flex;flex-wrap:wrap;gap:6px}
.service-map .chip{border:1px solid;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.7);transition:transform .15s,box-shadow .2s}
.service-map .chip:hover,.service-map .chip.act{transform:translateY(-1px)}

.service-map .cta{margin-top:16px;position:relative;z-index:2;text-align:center}
.service-map .cta p{font-size:13px;color:var(--ink-soft);margin:0 0 11px;line-height:1.5}
.service-map .cta p b{color:var(--ink);font-weight:600}
.service-map .ctabtns{display:flex;gap:10px}@media(max-width:520px){.service-map .ctabtns{flex-direction:column}}
.service-map .call{flex:1;border:0;cursor:pointer;font-family:'Archivo',inherit;font-size:15px;font-weight:700;white-space:nowrap;color:#fff;padding:13px 22px;border-radius:13px;
  background:linear-gradient(180deg,var(--orange-bright),var(--orange));box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .2s var(--ease),box-shadow .25s ease}
.service-map .call:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px color-mix(in srgb,var(--accent) 82%,transparent),inset 0 1px 0 rgba(255,255,255,.32)}
.service-map .txt{flex:1;cursor:pointer;font-family:'Archivo',inherit;font-size:15px;font-weight:700;white-space:nowrap;color:var(--ink);padding:13px 22px;border-radius:13px;
  background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid color-mix(in srgb,var(--accent) 42%,var(--glass-edge));box-shadow:0 8px 22px -12px color-mix(in srgb,var(--accent) 48%,transparent),inset 0 1.5px 0 rgba(255,255,255,.55);transition:transform .2s var(--ease),border-color .25s ease}
.service-map .txt:hover{transform:translateY(-2px);border-color:var(--accent)}

.pop{position:fixed;z-index:30;pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s;
  padding:16px 18px;border-radius:16px;width:250px;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,251,246,.88));
  backdrop-filter:saturate(1.3) brightness(1.03);-webkit-backdrop-filter:saturate(1.3) brightness(1.03);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 40px rgba(110,85,60,.3),inset 0 1px 0 rgba(255,255,255,1)}
.pop.on{opacity:1;visibility:visible;transform:translateY(0)}
.pop .x{position:absolute;top:10px;right:12px;cursor:pointer;border:0;background:none;font-size:18px;line-height:1;margin:0;padding:2px 4px;color:#b3a799}
.pop .t{font-family:"Fraunces",serif;font-weight:600;font-size:20px;line-height:1}
.pop .co{font-size:12.5px;color:var(--ink-soft);margin:3px 0 10px}
.pop .hook{font-size:13.5px;line-height:1.5;color:#4a443b;margin-bottom:14px}
.pop a.lk{display:block;text-align:center;text-decoration:none;font-size:14px;font-weight:600;color:#fff;padding:11px 14px;border-radius:12px;transition:transform .15s}
.pop a.lk:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.service-map .pulse{animation:none}.service-map .sheen{display:none}}

/* ---------- DARK overrides (light appearance above is untouched) ---------- */
/* Brighten the dark county-accent variants so text-on-dark reads. These cascade
   into every inline color:var(--bald-d)/var(--mob-d) (well labels, .hint b) and the
   .hqLabel/.hqSub classes — JS uses literal hexes so it's unaffected. */
[data-theme="dark"] .service-map{--bald-d:color-mix(in srgb,var(--bald) 55%,#fff);--mob-d:color-mix(in srgb,var(--mob) 60%,#fff)}
/* Panel/window: dark glass surface instead of warm paper gradient */
[data-theme="dark"] .service-map .window{
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 88%,#000),color-mix(in srgb,var(--surface) 78%,#000));
  border:1px solid var(--glass-edge);
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 26px 60px -12px rgba(0,0,0,.6),0 60px 110px -26px color-mix(in srgb,var(--bald) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="dark"] .service-map .window::before{opacity:.5}

/* Rate pill + wells: dark inset surfaces */
[data-theme="dark"] .service-map .rate{
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 92%,#fff),var(--surface));
  box-shadow:inset 4px 4px 10px rgba(0,0,0,.5),inset -4px -4px 10px rgba(255,255,255,.05)}
[data-theme="dark"] .service-map .well{
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 92%,#fff),var(--surface));
  box-shadow:inset 5px 5px 13px rgba(0,0,0,.5),inset -5px -5px 13px rgba(255,255,255,.05)}

/* Map window frame + bevel */
[data-theme="dark"] .service-map .maparea{border:1px solid var(--hairline)}
[data-theme="dark"] .service-map .maparea::after{
  box-shadow:inset 7px 7px 18px rgba(0,0,0,.5),inset -5px -5px 14px rgba(255,255,255,.04)}

/* SVG landmass: flatten the three paper/zone rects to a dark surface */
[data-theme="dark"] .service-map svg>rect{fill:var(--paper-2)}

/* Water/bay: keep blue but dimmer on dark */
[data-theme="dark"] .service-map svg path[fill="url(#bay)"]{fill:color-mix(in srgb,var(--blue) 42%,#000)}

/* Roads / rivers / county border read on dark */
[data-theme="dark"] .service-map .road{stroke:rgba(200,182,158,.45)}
[data-theme="dark"] .service-map .road.big{stroke:rgba(216,185,142,.55)}
[data-theme="dark"] .service-map .river{stroke:color-mix(in srgb,var(--blue) 55%,#fff);opacity:.4}
[data-theme="dark"] .service-map .border{stroke:var(--hairline)}

/* Labels / city dots */
[data-theme="dark"] .service-map .cityLabel{fill:var(--ink-soft)}
[data-theme="dark"] .service-map .dot circle.core{fill:var(--surface);stroke:var(--hairline);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
[data-theme="dark"] .service-map svg .zoneLabel[fill="#9DB4CE"]{fill:color-mix(in srgb,var(--mob) 62%,#fff)}
[data-theme="dark"] .service-map svg .zoneLabel[fill="#D9A878"]{fill:color-mix(in srgb,var(--bald) 60%,#fff)}
/* on-water decorative labels (GULF / MOBILE BAY / Gulf Shores) */
[data-theme="dark"] .service-map svg [fill="#8FB0CC"],
[data-theme="dark"] .service-map svg [fill="#7FA6C6"]{fill:color-mix(in srgb,var(--blue) 35%,#fff)}

/* CTA secondary button (chips are JS-colored inline, intentionally not retinted) */
[data-theme="dark"] .service-map .txt{border:1px solid var(--hairline);background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink)}

/* Popover: dark glass */
[data-theme="dark"] .pop{
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 94%,#fff),var(--surface));
  border:1px solid var(--glass-edge);
  box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="dark"] .pop .x{color:var(--ink-soft)}
[data-theme="dark"] .pop .hook{color:var(--text2)}



.pg-scope{
  /* locked tokens */
  --pg-orange:#D93B2B;
  --pg-amber:#F5A623;
  --pg-red:#DC0109;
  --pg-ink:#1A1410;          /* dark glass base */
  --pg-glass:rgba(26,20,16,0.92);
  --pg-glass-2:rgba(46,36,28,0.85);
  --pg-line:rgba(255,255,255,0.10);
  --pg-text:#F6EFE7;
  --pg-mut:#B7ADA2;
  --pg-page:#FBF6EF;         /* warm light page behind the dark panel */

  font-family:'Inter',system-ui,sans-serif;
  color:var(--pg-text);
  box-sizing:border-box;
  width:100%;
  /* Transparent so the section sits on the page's dark backdrop like every other
     section — the dark .pg-shell card carries the look (was a light cream band). */
  background:transparent;
  padding:64px 24px;
}
.pg-scope *,.pg-scope *::before,.pg-scope *::after{box-sizing:border-box;}

@property --pg-ang{syntax:'<angle>';initial-value:0deg;inherits:false;}

/* Owner: no surrounding box — the render preview floats ALONE and the pitch gets
   its OWN hero-style glass box. .pg-shell is now just the two-column layout grid. */
.pg-shell{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3vw,44px);align-items:center;
  position:relative;
}
/* the pitch text rides its own dark-glass box — same treatment as the hero copy */
.pg-copy{
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-fill-blur);backdrop-filter:var(--glass-fill-blur);
  border:1px solid var(--glass-fill-edge);
  box-shadow:var(--glass-fill-shadow);
  border-radius:22px;
  padding:clamp(28px,3.4vw,44px);
  position:relative;overflow:hidden;
}
.pg-shell::after{ /* soft warm wash behind the floating render card (no box) */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(620px 360px at 82% 40%, rgba(217,59,43,.16), transparent 70%);
}

/* ---------- LEFT: the pitch ---------- */
.pg-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.16em;font-weight:600;color:var(--pg-orange);
  text-transform:uppercase;margin:0 0 18px;
}
.pg-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--pg-orange);
  box-shadow:0 0 0 0 rgba(217,59,43,.6);animation:pg-pulse 2.4s infinite;}
@keyframes pg-pulse{0%{box-shadow:0 0 0 0 rgba(217,59,43,.55)}70%{box-shadow:0 0 0 9px rgba(217,59,43,0)}100%{box-shadow:0 0 0 0 rgba(217,59,43,0)}}

.pg-h1{
  font-family:'Fraunces',serif;font-weight:600;font-optical-sizing:auto;
  font-size:clamp(34px,4.2vw,52px);line-height:1.02;letter-spacing:-.01em;
  margin:0 0 20px;color:#fff;
}
.pg-h1 em{font-style:italic;color:var(--pg-orange);}

.pg-oldway{
  font-size:14.5px;color:var(--pg-mut);text-decoration:line-through;
  text-decoration-color:rgba(220,1,9,.55);text-decoration-thickness:2px;
  margin:0 0 6px;
}
.pg-lead{font-size:16px;line-height:1.6;color:#E6DCD0;margin:0 0 26px;max-width:46ch;}
.pg-lead b{color:#fff;font-weight:600;}

.pg-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px;}
.pg-chip{
  font-size:13px;font-weight:500;color:#F1E7DB;
  background:var(--pg-glass-2);border:1px solid var(--pg-line);
  padding:8px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;
}
.pg-chip svg{width:14px;height:14px;color:var(--pg-orange);flex:none;}

.pg-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#F0884A,var(--pg-orange));
  color:#fff;font-weight:600;font-size:16px;text-decoration:none;
  padding:15px 26px;border-radius:14px;
  box-shadow:0 14px 30px -10px rgba(217,59,43,.7),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease,box-shadow .15s ease;
}
.pg-cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(217,59,43,.8),inset 0 1px 0 rgba(255,255,255,.25);}
.pg-cta:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.pg-cta svg{width:18px;height:18px;}
.pg-sub{font-size:12.5px;color:var(--pg-mut);margin:11px 0 0;}

/* ---------- RIGHT: the live Guru card (signature element) ---------- */
.pg-stage{position:relative;perspective:1400px;display:flex;justify-content:center;}

.pg-card-wrap{position:relative;width:100%;max-width:380px;border-radius:24px;}
.pg-card-wrap::before{ /* swept warm glow ring */
  content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--pg-ang),var(--pg-orange),var(--pg-amber),var(--pg-red),var(--pg-orange));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pg-spin 6s linear infinite;z-index:3;pointer-events:none;
}
.pg-card-wrap::after{ /* soft blurred halo of the same sweep */
  content:'';position:absolute;inset:-14px;border-radius:32px;z-index:0;pointer-events:none;
  background:conic-gradient(from var(--pg-ang),var(--pg-orange),var(--pg-amber),var(--pg-red),var(--pg-orange));
  filter:blur(26px);opacity:.5;animation:pg-spin 6s linear infinite;
}
@keyframes pg-spin{to{--pg-ang:360deg;}}

.pg-card{
  position:relative;z-index:2;border-radius:24px;overflow:hidden;
  background:rgba(20,14,10,.86);
  backdrop-filter:saturate(125%) brightness(1.03);-webkit-backdrop-filter:saturate(125%) brightness(1.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.8);
}
.pg-card-head{
  display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:'Fraunces',serif;font-weight:600;font-size:15px;letter-spacing:.01em;
}
.pg-card-head .live{width:7px;height:7px;border-radius:50%;background:#5BE08C;box-shadow:0 0 8px #5BE08C;}
.pg-card-head .badge{margin-left:auto;font-family:'Inter';font-size:11px;font-weight:600;
  color:var(--pg-orange);background:rgba(217,59,43,.12);padding:3px 9px;border-radius:999px;letter-spacing:.04em;}

/* render-card stack */
.pg-deck{position:relative;height:236px;margin:18px 16px 6px;transform-style:preserve-3d;
  transition:transform .25s ease;}
.pg-render{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s ease,filter .7s ease;
  will-change:transform,opacity;
}
/* .pg-scene is now a real render <img> filling the card. */
.pg-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--pg-glass-2);}
.pg-scene .wall{position:absolute;inset:0;}
.pg-scene .wall2{position:absolute;top:0;left:0;width:34%;height:100%;filter:brightness(.86);}
.pg-scene .floor{position:absolute;left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(180deg,#3a2f27,#241c16);}
.pg-scene .trim{position:absolute;left:0;right:0;bottom:30%;height:4px;background:#F2E9DD;}
.pg-scene .feat{position:absolute;border-radius:3px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 6px 16px -8px rgba(0,0,0,.6);
  background-image:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),
    linear-gradient(rgba(255,255,255,.45) 0 0),linear-gradient(rgba(255,255,255,.45) 0 0);
  background-size:100% 100%,2px 100%,100% 2px;
  background-position:0 0,center,center;background-repeat:no-repeat;}
.pg-scene .grain{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 70% 10%,rgba(255,255,255,.10),transparent 55%),
             radial-gradient(80% 80% at 20% 120%,rgba(0,0,0,.35),transparent 60%);}
.pg-render .chips{position:absolute;left:10px;bottom:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;}
.pg-render .swatch{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  color:#fff;background:rgba(15,10,7,.62);backdrop-filter:saturate(125%) brightness(1.03);
  padding:4px 8px 4px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.16);}
.pg-render .swatch i{width:11px;height:11px;border-radius:50%;display:inline-block;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);}

/* stacked positions */
.pg-render.p0{transform:translateY(0) translateZ(40px) scale(1);opacity:1;z-index:4;}
.pg-render.p1{transform:translateY(14px) translateX(16px) translateZ(0) scale(.95) rotate(2.2deg);opacity:.85;z-index:3;filter:brightness(.85);}
.pg-render.p2{transform:translateY(26px) translateX(30px) translateZ(-40px) scale(.9) rotate(4deg);opacity:.6;z-index:2;filter:brightness(.7);}
.pg-render.p3{transform:translateY(8px) translateX(-18px) translateZ(-70px) scale(.92) rotate(-3deg);opacity:0;z-index:1;}
/* decks can hold more than 4 renders — anything not in a stack slot stays hidden */
.pg-render:not(.p0):not(.p1):not(.p2):not(.p3){opacity:0;z-index:0;}

/* "talk colors" rotating input */
.pg-saying{font-size:12px;color:var(--pg-mut);margin:14px 16px 8px;font-weight:500;}
.pg-input{
  margin:0 16px 18px;display:flex;align-items:center;gap:10px;
  background:rgba(10,7,5,.6);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:12px 12px 12px 14px;min-height:50px;
}
.pg-typed{flex:1;font-size:14.5px;color:#F2E8DC;line-height:1.3;min-width:0;}
.pg-typed .caret{display:inline-block;width:1.5px;height:1.05em;background:var(--pg-orange);
  margin-left:1px;vertical-align:-2px;animation:pg-blink 1s steps(1) infinite;}
@keyframes pg-blink{50%{opacity:0;}}
.pg-mic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(217,59,43,.14);color:var(--pg-orange);border:1px solid rgba(217,59,43,.3);}
.pg-mic svg{width:16px;height:16px;}
.pg-send{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,#F0884A,var(--pg-orange));color:#fff;border:none;cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(217,59,43,.8);}
.pg-send svg{width:17px;height:17px;}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .pg-shell{grid-template-columns:1fr;gap:36px;padding:30px;}
  .pg-scope{padding:40px 16px;}
  .pg-stage{order:-1;}
}
@media (prefers-reduced-motion:reduce){
  .pg-card-wrap::before,.pg-card-wrap::after,.pg-kicker .dot{animation:none;}
  .pg-render{transition:none;}
}


.cf-section{position:relative;width:100%;min-height:92vh;overflow:hidden}
.home-hero__glow{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 55% 50%,color-mix(in srgb,var(--orange) 6%,transparent) 0%,transparent 70%);pointer-events:none}
.home-hero__inner{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;min-height:92vh;padding:clamp(70px,9vw,120px) 20px 74px}
.home-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,0.9fr);gap:clamp(24px,5vw,70px);max-width:1200px;width:100%;align-items:center}
.home-hero__left{display:flex;flex-direction:column}
/* Eyebrow, NOT a boxed pill — just the dot + accent text on the page (owner:
   "we shouldnt box text at all… you stamped the text in the page"). */
.home-hero__badge{display:inline-flex;align-items:center;gap:9px;padding:0;background:none;border:none;margin-bottom:22px;width:fit-content}
.home-hero__pulse{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px color-mix(in srgb,var(--orange) 50%,transparent);animation:heroPulse 2s ease-in-out infinite}
@keyframes heroPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.home-hero__badge-text{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--orange-d);font-family:'Inter',sans-serif}
.home-hero__title{font-size:clamp(34px,5vw,64px);font-weight:800;line-height:1.05;color:var(--ink);font-family:'Inter',sans-serif;margin:0}
.home-hero__gradient{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-bright) 58%,var(--orange) 100%);-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text}
.home-hero__divider{width:64px;height:3px;background:linear-gradient(90deg,var(--orange),transparent);border-radius:2px;margin:22px 0}
.home-hero__sub{font-size:clamp(15px,1.7vw,20px);font-weight:400;line-height:1.65;color:var(--text2);max-width:520px;margin:0 0 10px}
.home-hero__sub strong{color:var(--ink);font-weight:600}
.home-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin:0}
/* Site-standard control metrics. */
.cf-section .h-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;font-size:13.5px;line-height:1;font-family:'Inter',sans-serif;text-decoration:none;cursor:pointer;border:none;transition:transform 0.25s var(--ease),background 0.2s ease,border-color 0.2s ease,box-shadow 0.25s ease,color 0.2s ease}
.cf-section .h-btn-primary{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 48%),var(--accent);color:#fff;font-weight:700;box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.34)}
.cf-section .h-btn-primary:hover{transform:translateY(-2px)}
.cf-section .h-btn-secondary{color:var(--accent);font-weight:700;border:1.5px solid color-mix(in oklch,var(--accent) 55%,transparent);background:color-mix(in oklch,var(--accent) 8%,transparent)}
.cf-section .h-btn-secondary:hover{transform:translateY(-2px);border-color:var(--accent);background:color-mix(in oklch,var(--accent) 15%,transparent)}
.home-hero__trust{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.home-hero__stars{display:flex;align-items:center;gap:4px}
.home-hero__stars svg{width:14px;height:14px;fill:var(--orange);stroke:var(--orange)}
.home-hero__stars .star-empty{fill:none;opacity:.4}
.home-hero__star-label{font-size:12px;color:var(--ink-soft);margin-left:4px}
.home-hero__trust-divider{width:1px;height:14px;background:var(--glass-edge)}
.home-hero__location{font-size:12px;color:var(--ink-soft);font-family:'Inter',sans-serif}
.home-hero__right{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:560px;justify-self:center;position:relative}
.home-hero__bottom-fade{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,var(--paper-3) 0%,transparent 100%);pointer-events:none;z-index:5}
/* ── the fan-deck panel (replaces the globe) ───────────────────────────── */
/* Fixed frame; the rebuild's --room-h value inlined (this bundle has no such
   token). The section's footprint never changes — a family tab only swaps
   what is inside the frame. */
.cf-panel{width:100%;height:min(680px,calc(100dvh - 190px));display:flex;flex-direction:column;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-fill-blur);backdrop-filter:var(--glass-fill-blur);border-radius:16px;border:1px solid var(--glass-fill-edge);box-shadow:var(--glass-fill-shadow);padding:18px}
.cf-tabs{display:flex;flex:0 0 auto;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.cf-tab{font-family:'Inter',sans-serif;font-size:12px;font-weight:650;letter-spacing:0.2px;color:var(--glass-ink-soft);background:rgba(255,255,255,.06);border:1px solid var(--glass-fill-edge);border-radius:100px;padding:8px 14px;cursor:pointer;transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease}
.cf-tab:hover{background:rgba(255,255,255,.12);color:var(--glass-ink)}
.cf-tab[aria-pressed="true"]{background:color-mix(in oklch,var(--accent) 34%,transparent);border-color:color-mix(in oklch,var(--accent) 60%,transparent);color:#fff}
/* THE FAN DECK — HORIZONTAL here (owner 2026-08-24: "make it horizontal, it
   was vertical over there"). One COLUMN per printed SW card, chips stacked in
   the store's own C1…C7 order top to bottom — the way the strips hang on the
   store rack — and the DECK scrolls sideways through the cards inside the
   fixed frame. Vertical scroll is the fallback when the frame is shorter than
   a full seven-chip strip. */
.cf-deck{position:relative;display:flex;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--glass-fill-edge) transparent}
.cf-deck::-webkit-scrollbar{width:6px;height:6px}
.cf-deck::-webkit-scrollbar-thumb{background:var(--glass-fill-edge);border-radius:100px}
.cf-group{display:flex;flex-direction:row;gap:10px;padding-bottom:6px}
/* An author rule, because [hidden] in the UA sheet loses to .cf-group's display. */
.cf-group[hidden]{display:none}
.cf-strip{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;width:104px}
/* The column's head states the card number ONCE — the column IS the strip, so
   the address does not need repeating under all seven chips. */
.cf-strip__head{display:flex;flex-direction:column;gap:1px;font-family:'Inter',sans-serif}
.cf-strip__id{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--glass-ink);white-space:nowrap}
.cf-strip__where{font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--glass-ink-soft)}
.cf-strip__chips{display:flex;flex-direction:column;gap:4px}
/* A chip is a WHITE CARD in both themes — that is what it is in the store, and
   it is the only way a white color reads as a color rather than as the panel. */
.cf-chip{margin:0;flex:0 0 auto;width:104px;border-radius:6px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.16);transition:transform 0.15s ease,box-shadow 0.2s ease}
.cf-chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.26)}
/* 38px (was 46 in the vertical deck) so a full seven-chip strip stands inside
   the frame without a second scrollbar on most screens. */
.cf-chip__color{display:block;height:38px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.cf-chip__label{display:flex;flex-direction:column;gap:1px;padding:5px 7px 6px;line-height:1.24;font-family:'Inter',sans-serif}
.cf-chip__name{font-size:10.5px;font-weight:700;color:#1c1917;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-chip__code{font-size:9.5px;font-weight:500;color:#57534e}
.cf-chip__slot{font-style:normal;font-weight:700;color:#78716c}
@media(max-width:768px){
  .home-hero__grid{grid-template-columns:1fr;text-align:center}
  .home-hero__right{max-width:420px;margin:0 auto}
  .home-hero__badge{margin-left:auto;margin-right:auto}
  .home-hero__sub{margin-left:auto;margin-right:auto}
  .home-hero__ctas{justify-content:center}
  .home-hero__trust{justify-content:center}
  .cf-tabs{justify-content:center}
}


.int-preview{max-width:760px;margin:0 auto;padding:64px 5vw 28px;position:relative}
.int-pv-head{text-align:center;margin-bottom:26px}
.int-pv-eyebrow{font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-d)}
.int-pv-title{font-family:'Archivo';font-weight:800;font-size:clamp(26px,4vw,40px);letter-spacing:-.01em;color:var(--ink);margin:10px 0 8px;line-height:1.04}
.int-pv-accent{color:var(--accent);font-style:italic}
.int-pv-sub{font-size:14.5px;color:var(--ink-soft);max-width:52ch;margin:0 auto;line-height:1.5}

.int-room-wrap{max-width:640px;margin:0 auto;border-radius:20px;padding:16px;background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:0 2px 8px rgba(80,60,40,.1),0 26px 56px -16px rgba(110,85,60,.24),inset 0 1.5px 0 rgba(255,255,255,.7)}
.int-room-svg{width:100%;display:block;border-radius:12px;overflow:hidden}
.int-sf{cursor:pointer;transition:filter .3s var(--ease);outline:none}
.int-sf:hover{filter:brightness(1.06)}
.int-sf:focus-visible{outline:3px solid var(--accent);outline-offset:2px;filter:brightness(1.08)}

.int-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}
.int-tab{display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:11px;border:1px solid var(--glass-edge);background:var(--glass-tint);color:var(--ink-soft);font-family:'Inter';font-weight:600;font-size:13px;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.int-tab .int-dot{width:11px;height:11px;border-radius:3px;border:1px solid var(--hairline)}
.int-tab.int-on{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 14%,transparent)}

.int-cbar{display:flex;flex-direction:column;align-items:center;gap:8px;margin:16px 0 4px}
.int-cbar-label{font-family:'Inter';font-size:11px;letter-spacing:.12em;color:var(--orange-d);font-weight:700;text-transform:uppercase}
.int-cbar-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.int-bc{width:32px;height:32px;border-radius:9px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--hairline);transition:transform .15s var(--ease),border-color .15s var(--ease)}
.int-bc:hover{transform:scale(1.1)}
.int-bc.int-on{border-color:var(--accent);transform:scale(1.12)}
.int-cbar-info{font-size:12.5px;color:var(--ink-soft);min-height:16px;font-weight:500}

.int-cards-wrap{max-width:680px;margin:18px auto 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 4px 10px}
.int-cards-wrap::-webkit-scrollbar{display:none}
.int-cards-track{display:flex;gap:11px;width:max-content;margin:0 auto}
.int-pcard{width:152px;flex-shrink:0;border:1px solid var(--glass-edge);background:var(--glass-tint);border-radius:13px;padding:12px;cursor:pointer;text-align:center;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.int-pcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--glass-edge));box-shadow:0 14px 30px -14px rgba(110,85,60,.3)}
.int-pcard.int-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 14px 30px -14px color-mix(in srgb,var(--accent) 40%,transparent)}
.int-pcard-room{width:100%;aspect-ratio:2/1;border-radius:8px;overflow:hidden;margin-bottom:9px;background:#2a2622}
.int-pcard-room svg{width:100%;height:100%;display:block}
.int-pcard-name{font-family:'Archivo';font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.int-pcard-desc{font-size:10.5px;color:var(--ink-soft);margin-bottom:7px}
.int-pcard-dots{display:flex;gap:4px;justify-content:center}
.int-pcard-dot{width:15px;height:15px;border-radius:4px;border:1px solid var(--hairline)}

.int-combo{max-width:640px;margin:22px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-radius:16px;background:color-mix(in srgb,var(--accent) 7%,var(--glass-tint));border:1px solid var(--glass-edge)}
.int-combo-text{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.int-combo-text strong{color:var(--ink)}
.int-combo-ctas{display:flex;gap:9px;flex:0 0 auto}
.int-combo-p,.int-combo-s{font-family:'Inter';font-weight:600;font-size:13.5px;text-decoration:none;padding:10px 18px;border-radius:11px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.int-combo-p{background:var(--orange);color:#fff;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--orange) 60%,transparent)}
.int-combo-p:hover{transform:translateY(-1px)}
.int-combo-s{background:var(--glass-tint);color:var(--ink);border:1px solid var(--glass-edge)}

@media(max-width:560px){
  .int-tab{padding:6px 11px;font-size:12px}
  .int-bc{width:28px;height:28px}
  .int-combo{flex-direction:column;text-align:center}
}


.ext-preview{max-width:980px;margin:0 auto;padding:64px 5vw 28px;position:relative}
.ext-pv-head{text-align:center;margin-bottom:26px}
.ext-pv-eyebrow{font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-d)}
.ext-pv-title{font-family:'Archivo';font-weight:800;font-size:clamp(26px,4vw,40px);letter-spacing:-.01em;color:var(--ink);margin:10px 0 8px;line-height:1.04}
.ext-pv-accent{color:var(--accent);font-style:italic}
.ext-pv-sub{font-size:14.5px;color:var(--ink-soft);max-width:58ch;margin:0 auto;line-height:1.5}

.ext-house-wrap{max-width:820px;margin:0 auto;border-radius:20px;padding:16px;background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:0 2px 8px rgba(80,60,40,.1),0 26px 56px -16px rgba(110,85,60,.24),inset 0 1.5px 0 rgba(255,255,255,.7)}
.ext-house-svg{width:100%;display:block;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#cfe0ec,#e8eef2)}

.ext-zone-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}
.ext-zone-tab{display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:11px;border:1px solid var(--glass-edge);background:var(--glass-tint);color:var(--ink-soft);font-family:'Inter';font-weight:600;font-size:13px;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.ext-zone-tab-dot{width:12px;height:12px;border-radius:4px;border:1px solid var(--hairline)}
.ext-zone-tab.active{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 14%,transparent)}

.ext-zone-picker{display:flex;flex-direction:column;align-items:center;gap:8px;margin:16px 0 4px}
.ext-zone-picker-label{font-family:'Inter';font-size:11px;letter-spacing:.12em;color:var(--orange-d);font-weight:700;text-transform:uppercase}
.ext-zone-colors{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.ext-color-btn{width:32px;height:32px;border-radius:9px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--hairline);transition:transform .15s var(--ease),border-color .15s var(--ease)}
.ext-color-btn:hover{transform:scale(1.1)}
.ext-color-btn.active{border-color:var(--accent);transform:scale(1.12)}

/* Schemes are a slideable row (arrows + finger swipe) instead of a tall stack
   (owner: "if color selectors are stacked make them slideable"). */
.ext-scheme-slider{display:flex;align-items:center;gap:8px;max-width:880px;margin:22px auto 0}
.ext-scheme-grid{display:flex;gap:12px;flex:1;min-width:0;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.ext-scheme-grid::-webkit-scrollbar{display:none}
.ext-scheme-arrow{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:0 2px 8px rgba(80,60,40,.1),inset 0 1.5px 0 rgba(255,255,255,.9);transition:color .2s var(--ease),transform .2s var(--ease),opacity .2s ease}
.ext-scheme-arrow svg{width:18px;height:18px}
.ext-scheme-arrow:hover{color:var(--accent);transform:translateY(-1px)}
.ext-scheme-arrow:disabled{opacity:.32;cursor:default;pointer-events:none}
.ext-scheme-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ext-scheme-card{flex:0 0 clamp(150px,42%,190px);scroll-snap-align:start;text-align:left;border:1px solid var(--glass-edge);background:var(--glass-tint);border-radius:14px;padding:12px;cursor:pointer;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);font-family:inherit}
.ext-scheme-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--glass-edge));box-shadow:0 14px 30px -14px rgba(110,85,60,.3)}
.ext-scheme-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 14px 30px -14px color-mix(in srgb,var(--accent) 40%,transparent)}
.ext-mini-house{position:relative;height:62px;border-radius:8px;overflow:hidden;margin-bottom:9px;background:linear-gradient(180deg,#cfe0ec,#e8eef2)}
.ext-mini-roof{position:absolute;top:0;left:8%;right:8%;height:20px;background:#4a4a4a;clip-path:polygon(8% 100%,50% 0,92% 100%)}
.ext-mini-body{position:absolute;left:14%;right:14%;top:20px;bottom:8px;border-radius:2px;display:flex;align-items:center;justify-content:center;gap:5px}
.ext-mini-door{width:11px;height:20px;border-radius:1px;align-self:flex-end;margin-bottom:0}
.ext-mini-window{width:11px;height:14px;border:2px solid #fff;border-radius:1px;background:rgba(135,181,212,.5)}
.ext-mini-trim{position:absolute;left:14%;right:14%;top:20px;height:3px}
.ext-scheme-name{font-family:'Archivo';font-size:13px;font-weight:700;color:var(--ink)}
.ext-scheme-desc{font-size:10.5px;color:var(--ink-soft);margin:1px 0 7px}
.ext-scheme-swatches{display:flex;gap:5px}
.ext-scheme-swatch{width:16px;height:16px;border-radius:4px;border:1px solid var(--hairline)}

.ext-combo{max-width:820px;margin:22px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-radius:16px;background:color-mix(in srgb,var(--accent) 7%,var(--glass-tint));border:1px solid var(--glass-edge)}
.ext-combo-text{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.ext-combo-text strong{color:var(--ink)}
.ext-combo-ctas{display:flex;gap:9px;flex:0 0 auto}
.ext-combo-p,.ext-combo-s{font-family:'Inter';font-weight:600;font-size:13.5px;text-decoration:none;padding:10px 18px;border-radius:11px;transition:transform .2s var(--ease)}
.ext-combo-p{background:var(--orange);color:#fff;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--orange) 60%,transparent)}
.ext-combo-p:hover{transform:translateY(-1px)}
.ext-combo-s{background:var(--glass-tint);color:var(--ink);border:1px solid var(--glass-edge)}

@media(max-width:560px){
  .ext-zone-tab{padding:6px 11px;font-size:12px}
  .ext-color-btn{width:28px;height:28px}
  .ext-combo{flex-direction:column;text-align:center}
}


.cab-preview{max-width:760px;margin:0 auto;padding:64px 5vw 28px;position:relative}
.cab-pv-head{text-align:center;margin-bottom:26px}
.cab-pv-eyebrow{font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-d)}
.cab-pv-title{font-family:'Archivo';font-weight:800;font-size:clamp(26px,4vw,40px);letter-spacing:-.01em;color:var(--ink);margin:10px 0 8px;line-height:1.04}
.cab-pv-accent{color:var(--accent);font-style:italic}
.cab-pv-sub{font-size:14.5px;color:var(--ink-soft);max-width:54ch;margin:0 auto;line-height:1.5}

.cab-picker-card{max-width:460px;margin:0 auto;background:#221f1b;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(80,60,40,.14),0 30px 64px -20px rgba(40,28,16,.5)}
.cab-picker-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.cab-picker-dots{display:flex;gap:6px}
.cab-picker-dot{width:11px;height:11px;border-radius:50%}
.cab-picker-url{font-family:'Inter';font-size:12px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.01em}

.cab-kitchen{padding:20px 16px 12px;background:linear-gradient(180deg,#2a2520,#1e1b17);position:relative}
.cab-kitchen-wall{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.01) 0px,rgba(255,255,255,.01) 40px,transparent 40px,transparent 42px);pointer-events:none}
.cab-label-row{display:flex;justify-content:flex-end;margin-bottom:4px}
.cab-label-tag{font-family:'Inter';font-size:8px;font-weight:600;letter-spacing:.15em;color:rgba(255,255,255,.25);padding:2px 6px;border:1px solid rgba(255,255,255,.08);border-radius:3px}
.cab-door-row{display:flex;gap:5px;position:relative;z-index:1}
.cab-door{flex:1;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#cbb98f;background:#e7d9bf;transition:background .6s cubic-bezier(.16,1,.3,1),color .6s;box-shadow:inset 0 0 0 2px currentColor,0 2px 8px rgba(0,0,0,.25)}
.cab-door-panel{width:72%;height:60%;border:1.5px solid currentColor;border-radius:2px;opacity:.35;transition:border-color .6s}
.cab-knob{width:4px;height:14px;background:#1a1a1a;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.cab-counter{height:14px;background:linear-gradient(90deg,#8a7d6b,#a09380,#8a7d6b);border-radius:2px;margin:6px 0;position:relative}
.cab-counter-edge{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(0,0,0,.2);border-radius:0 0 2px 2px}
.cab-drawer-row{display:flex;gap:5px;position:relative;z-index:1;margin-top:4px}
.cab-drawer{flex:1;height:28px;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#cbb98f;background:#e7d9bf;transition:background .6s cubic-bezier(.16,1,.3,1),color .6s;box-shadow:inset 0 0 0 2px currentColor,0 1px 4px rgba(0,0,0,.2)}
.cab-pull{width:22px;height:3px;background:#1a1a1a;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.cab-floor{height:2px;background:rgba(255,255,255,.04);margin-top:10px;border-radius:1px}

.cab-active-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.cab-active-swatch{width:30px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.12);flex-shrink:0;transition:background .5s}
.cab-active-info{flex:1;min-width:0}
.cab-active-name{font-family:'Archivo';font-size:14px;font-weight:700;color:#f4efe7}
.cab-active-brand{font-size:11px;color:rgba(255,255,255,.45)}
.cab-active-family{font-family:'Inter';font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap}

.cab-palette-tabs{display:flex;gap:6px;padding:12px 16px 2px;overflow-x:auto;scrollbar-width:none}
.cab-palette-tabs::-webkit-scrollbar{display:none}
.cab-palette-tab{display:flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid rgba(255,255,255,.1);border-radius:9px;cursor:pointer;background:transparent;font-family:'Inter';font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6);transition:color .25s,border-color .25s,background .25s;white-space:nowrap;flex-shrink:0}
.cab-palette-tab:hover{color:rgba(255,255,255,.85)}
.cab-palette-tab.active{border-color:var(--accent);color:#fff;background:color-mix(in srgb,var(--accent) 22%,transparent)}
.cab-tab-dots{display:flex;gap:3px}
.cab-tab-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.15)}
.cab-color-row{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 18px;justify-content:center}
.cab-color-btn{width:42px;height:42px;border-radius:9px;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;padding:0;border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:rgba(0,0,0,.5);text-shadow:0 0 4px rgba(255,255,255,.4)}
.cab-color-btn:hover{transform:scale(1.06)}
.cab-color-btn.active{border-color:var(--accent);transform:scale(1.1);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 35%,transparent)}

.cab-combo{max-width:560px;margin:22px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,var(--glass-tint));border:1px solid var(--glass-edge)}
.cab-combo-text{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.cab-combo-text strong{color:var(--ink)}
.cab-combo-ctas{display:flex;gap:9px;flex:0 0 auto}
.cab-combo-p,.cab-combo-s{font-family:'Inter';font-weight:600;font-size:13.5px;text-decoration:none;padding:10px 18px;border-radius:11px;transition:transform .2s var(--ease)}
.cab-combo-p{background:var(--orange);color:#fff;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--orange) 60%,transparent)}
.cab-combo-p:hover{transform:translateY(-1px)}
.cab-combo-s{background:var(--glass-tint);color:var(--ink);border:1px solid var(--glass-edge)}

@media(max-width:560px){
  .cab-color-btn{width:38px;height:38px}
  .cab-combo{flex-direction:column;text-align:center}
}


.legal{position:relative;max-width:820px;margin:0 auto;padding:120px clamp(20px,5vw,40px) 80px;font-family:'Inter',sans-serif}
.legal-head{margin-bottom:44px}
.legal-kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange-d);font-family:'Inter',sans-serif}
.legal-head h1{font-family:'Archivo','Inter',sans-serif;font-size:clamp(28px,4.4vw,44px);font-weight:800;color:var(--ink);line-height:1.12;margin:12px 0 14px}
.legal-head p{font-size:16px;color:var(--ink-soft);line-height:1.6;margin:0;max-width:60ch}
.legal-updated{font-size:14px;color:var(--ink-soft);opacity:.8;margin:0}
.legal-body{display:flex;flex-direction:column;gap:34px;font-size:16px;line-height:1.8;color:var(--ink-soft)}
.legal-body h2{font-family:'Archivo','Inter',sans-serif;font-size:22px;font-weight:700;color:var(--ink);margin:0 0 12px}
.legal-body p{margin:0 0 14px}
.legal-body p:last-child{margin-bottom:0}
.legal-body a{color:var(--orange-d);text-decoration:none;font-weight:600}
.legal-body a:hover{text-decoration:underline}
.legal-card{padding:22px 24px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,251,246,.22));-webkit-backdrop-filter:saturate(128%) brightness(1.03);backdrop-filter:saturate(128%) brightness(1.03);border:1px solid var(--glass-edge);box-shadow:0 2px 8px rgba(80,60,40,.1),inset 0 1.5px 0 rgba(255,255,255,1)}
.legal-card--accent{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.legal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.legal-label{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--orange-d);margin-bottom:8px}
.legal-strong{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 6px}
.legal-table-wrap{border:1px solid var(--glass-edge);border-radius:12px;overflow:hidden;margin:4px 0}
.legal-table{width:100%;border-collapse:collapse;font-size:14px}
.legal-table th{text-align:left;padding:13px 16px;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--orange-d);border-bottom:1px solid var(--glass-edge);background:color-mix(in srgb,var(--orange) 5%,transparent)}
.legal-table td{padding:11px 16px;color:var(--ink-soft);border-bottom:1px solid var(--glass-edge)}
.legal-table tr:last-child td{border-bottom:none}
.legal-list{display:flex;flex-direction:column;gap:8px}
.legal-list-item{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-radius:9px;background:color-mix(in srgb,var(--orange) 5%,transparent);border:1px solid var(--glass-edge)}
.legal-check{color:var(--accent);font-weight:800;flex-shrink:0;margin-top:1px}
.legal-num{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--orange) 12%,transparent);color:var(--orange-d);font-weight:800;font-size:13px;flex-shrink:0}
.legal-cta{text-align:center;padding:14px 0 4px}
.legal-cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.legal-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none;font-family:'Inter',sans-serif}
.legal-btn--call{background:var(--orange);color:#fff;box-shadow:0 10px 22px -10px color-mix(in srgb,var(--orange) 60%,transparent)}
.legal-btn--text{background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,251,246,.18));color:var(--ink);border:1px solid var(--glass-edge)}
.legal-note{font-size:14px;color:var(--ink-soft);opacity:.75;margin:6px 0 0}
[data-theme="dark"] .legal-card{background:var(--glass-tint);border-color:var(--glass-edge);box-shadow:0 2px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="dark"] .legal-list-item,[data-theme="dark"] .legal-table th{background:var(--glass-tint)}


.company{max-width:900px;margin:0 auto;padding:98px clamp(14px,4vw,32px) 24px}
.company-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;position:sticky;top:90px;z-index:20;padding:8px;border-radius:16px;
  background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-fill-blur);backdrop-filter:var(--glass-fill-blur);
  border:1px solid var(--glass-fill-edge);box-shadow:var(--glass-fill-shadow)}
.company-tab{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--glass-ink-soft);text-decoration:none;padding:10px 16px;border-radius:11px;transition:color .2s var(--ease),background .2s var(--ease)}
.company-tab:hover{color:var(--glass-ink)}
.company-tab.active{color:#fff;background:color-mix(in srgb,var(--accent) 32%,transparent)}
.company-panel{display:none}
.company-panel.active{display:block}
/* Panels reuse the .legal content styles, but drop the standalone top padding
   (the sticky tab bar already clears the fixed header). */
.company .legal{padding:26px 0 20px;max-width:none}
/* The Reviews section is a full-width component — let its panel break out of the
   900px company column so it isn't cramped/overflowing. */
.company-panel[data-panel="reviews"]{width:100vw;position:relative;left:50%;transform:translateX(-50%)}
.company-panel[data-panel="reviews"] .pd-reviews{padding-top:12px}
@media(max-width:560px){.company-tabs{top:82px}.company-tab{font-size:13px;padding:9px 12px}}


.cty-sec{margin:0 0 26px}
.cty-sec:last-child{margin-bottom:18px}
.cty-sec h3{font-family:'Archivo',Inter,sans-serif;font-weight:800;font-size:clamp(1.28rem,2.3vw,1.62rem);line-height:1.16;color:rgb(var(--active-rgb));margin:0 0 8px}
.cty-sec p{margin:0 0 10px;line-height:1.7}
.cty-sec-cta{font-weight:600;color:var(--glass-ink)}


.gw{position:fixed;right:clamp(12px,3vw,22px);bottom:clamp(12px,3vw,22px);z-index:95;font-family:'Inter',system-ui,sans-serif}

.gw-launch{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);
  background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),0 0 34px -12px color-mix(in srgb,var(--accent) 60%,transparent);
  transition:transform .18s var(--ease),box-shadow .25s ease}
.gw-launch:hover{transform:translateY(-2px)}
.gw-launch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gw-launch-ico{border-radius:6px;display:block;flex:0 0 auto}
.gw-launch-dot{width:8px;height:8px;border-radius:50%;background:#3da876}
.gw-launch-dot{position:relative}
.gw-launch-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(61,168,118,.6);opacity:.5;animation:pdPulse 2.2s infinite}
@keyframes pdPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.gw[data-open="true"] .gw-launch{display:none}

/* MOBILE: one launcher per viewport. The sticky Call/Ask bar IS the launcher, so the
   floating bubble is hidden — otherwise they stack 8px apart and read as a duplicate.
   MUST stay BELOW the base .gw-launch rule: same specificity, so source order decides.
   (It sat above until 2026-07-28 and was silently dead the whole time.) */
@media(max-width:768px){
  .gw{bottom:78px}          /* the open panel clears the sticky bar */
  .gw-launch{display:none}
}

.gw-panel{position:fixed;right:clamp(12px,3vw,22px);bottom:clamp(12px,3vw,22px);z-index:96;display:flex;flex-direction:column;
  width:min(384px,calc(100vw - 24px));height:min(560px,calc(100dvh - 90px));
  border-radius:20px;overflow:hidden;color:var(--ink);
  background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),0 0 60px -18px color-mix(in srgb,var(--accent) 55%,transparent)}
@media(max-width:768px){.gw-panel{bottom:72px;height:min(560px,calc(100dvh - 150px))}}
.gw-panel[hidden]{display:none}

.gw-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 12px 15px;border-bottom:1px solid var(--hairline)}
.gw-title{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;color:var(--ink)}
.gw-title-ico{border-radius:6px;display:block}
.gw-live{display:inline-flex;align-items:center;gap:5px;font-family:'Inter';font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:lowercase;letter-spacing:.02em}
.gw-live-dot{width:7px;height:7px;border-radius:50%;background:#3da876}
.gw-close{width:32px;height:32px;flex:0 0 auto;border:0;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .2s ease,color .2s ease}
.gw-close:hover{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
.gw-close svg{width:16px;height:16px}

.gw-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 15px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.gw-intro{color:var(--ink-soft);font-size:13.5px;line-height:1.55}
.gw-intro b{color:var(--ink)}
.gw-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.gw-chip{font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer;padding:7px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  transition:background .18s ease;font-family:inherit;text-align:left;line-height:1.3}
.gw-chip:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}

.gw-msg{max-width:86%;padding:10px 13px;border-radius:15px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.gw-msg.u{align-self:flex-end;background:linear-gradient(160deg,var(--orange-bright,#e8593f),var(--orange,#d93b2b));color:#fff;border-bottom-right-radius:5px;font-weight:500}
.gw-msg.g{align-self:flex-start;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--glass-edge);color:var(--ink);border-bottom-left-radius:5px}
.gw-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 14px;border-radius:15px;border-bottom-left-radius:5px;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--glass-edge)}
.gw-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.6;animation:gwType 1.1s infinite}
.gw-typing span:nth-child(2){animation-delay:.15s}.gw-typing span:nth-child(3){animation-delay:.3s}
@keyframes gwType{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

.gw-foot{flex:0 0 auto;border-top:1px solid var(--hairline);padding:10px 12px 11px}
.gw-form{display:flex;align-items:center;gap:8px}
.gw-input{flex:1;min-width:0;font-family:inherit;font-size:14px;color:var(--ink);padding:11px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid var(--glass-edge)}
.gw-input::placeholder{color:var(--ink-soft);opacity:.8}
.gw-input:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.gw-send{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:11px;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,var(--orange-bright,#e8593f),var(--orange,#d93b2b));
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .18s ease,opacity .2s ease}
.gw-send:hover:not(:disabled){transform:translateY(-1px)}
.gw-send:disabled{opacity:.4;cursor:default}
.gw-send svg{width:19px;height:19px}
.gw-vis{display:block;margin-top:9px;text-align:center;font-size:12px;color:var(--ink-soft);text-decoration:none}
.gw-vis b{color:var(--accent)}
.gw-vis:hover b{text-decoration:underline}


.job-video{width:100%;max-width:1200px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(16px,4vw,40px)}
.jv-inner{display:flex;flex-direction:column;gap:14px}
.job-video .jv-kicker{font-family:'Inter';font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.job-video h2{font-family:'Archivo';font-weight:900;font-size:clamp(24px,3vw,38px);line-height:1.08;letter-spacing:-.018em;color:var(--accent)}
.job-video video{width:100%;height:auto;display:block;border-radius:clamp(14px,1.6vw,22px);background:#0b0806;box-shadow:0 26px 64px -26px rgba(0,0,0,.5)}
.job-video .jv-cap{font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:70ch}


.site-footer{background:var(--paper-2);border-top:1px solid var(--glass-edge);padding:48px clamp(20px,4vw,40px) 24px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-grid{margin-bottom:36px}
.footer-brand-col{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.footer-brand-block{display:flex;flex-direction:column;gap:14px;min-width:220px}
@media(max-width:768px){.footer-brand-col{gap:20px}}
.footer-heading{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-soft);font-family:'Inter',sans-serif;margin-bottom:14px}
.footer-link{display:block;font-size:14px;color:var(--ink-soft);text-decoration:none;padding:4px 0;transition:color .2s var(--ease)}
.footer-link:hover{color:var(--orange-d)}
.footer-brand-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.footer-logo-img{width:44px;height:44px;border-radius:10px;object-fit:cover;box-shadow:0 4px 14px -4px rgba(80,60,40,.35)}
.footer-brand-name{font-size:18px;font-weight:700;font-family:'Archivo',sans-serif;color:var(--ink)}
.footer-brand-tag{font-size:13px;color:var(--ink-soft);font-style:italic}
/* Not a stamped box — a panel that HOVERS: no hard border, soft raised surface +
   floating shadow + top highlight (owner: "more depth… hovering over the page"). */
.footer-hours{flex:1;min-width:240px;border-radius:18px;padding:20px 22px;color:var(--ink);
  background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow)}
.footer-hours-label{font-family:'Inter',sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:6px}
.footer-hours-row{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;font-size:13px;color:var(--ink-soft);padding:3px 0}
.footer-hours-row-online{border-top:1px solid var(--hairline);margin-top:5px;padding-top:7px}
.footer-hours-row-online span:first-child{color:var(--ink);font-weight:700}
.footer-hours-row-online span:last-child{color:var(--ink);font-weight:700}
.footer-hours-phone{border-top:1px solid var(--hairline);margin-top:5px;padding-top:9px;text-decoration:none;align-items:center;transition:color .2s var(--ease)}
.footer-hours-phone span:first-child{color:var(--ink);font-weight:700}
.footer-hours-phone span:last-child{color:var(--accent);font-weight:800;font-size:15px;letter-spacing:.01em}
.footer-hours-phone:hover span:last-child{text-decoration:underline}
.footer-rating-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.footer-rating-star{color:var(--orange);font-size:14px;letter-spacing:2px}
.footer-rating{font-size:13px;color:var(--ink-soft)}
.footer-bbb{display:inline-flex;margin-top:14px;font-size:12px;font-weight:600;color:var(--orange-d);text-decoration:none;transition:color .2s var(--ease)}
.footer-bbb:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid var(--hairline);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom-links{display:flex;align-items:center;gap:4px}
.footer-bottom-link{font-size:12px;color:var(--ink-soft);text-decoration:none;transition:color .2s var(--ease)}
.footer-bottom-link:hover{color:var(--orange-d)}
.footer-copy{font-size:12px;color:var(--ink-soft)}

.sticky-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;border-top:1px solid var(--glass-edge);padding:10px 16px;gap:8px}
@media(max-width:768px){.sticky-cta-bar{display:flex}}
.sticky-cta{position:relative;z-index:1;flex:1;text-align:center;padding:14px;border-radius:11px;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;text-decoration:none;line-height:1.2;transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease}
.cta-call{background:var(--orange);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 7px rgba(120,50,12,.28),0 14px 30px -10px rgba(217,59,43,.5)}
.cta-call:hover{background:var(--orange-bright)}
.cta-text{color:var(--ink);border:1px solid var(--glass-edge);background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,251,246,.18));-webkit-backdrop-filter:saturate(128%) brightness(1.03);backdrop-filter:saturate(128%) brightness(1.03);box-shadow:inset 0 1.5px 0 rgba(255,255,255,1)}
.cta-text:hover{background:linear-gradient(160deg,rgba(255,255,255,.46),rgba(255,251,246,.28))}

/* dark: the .cta-text "Text Us" button's light glass fill + full-white sheen don't read on dark — give it a subtle dark glass surface */
[data-theme="dark"] .cta-text{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
[data-theme="dark"] .cta-text:hover{background:linear-gradient(160deg,var(--hairline),rgba(255,255,255,.06))}