/* ===========================================================================
   Safe & Secure Locksmith — SHARED COMPONENT LIBRARY (proof-of-concept)
   ---------------------------------------------------------------------------
   De-scoped from home.html's `.sshome` neo-brutalist system into a neutral
   `.ssx` namespace so the SAME macro markup renders correctly on a LIGHT
   (paper) section and a DARK (onyx) band. Components NEVER hardcode a
   paper/onyx surface — they read a generic surface contract:

       --surface  --on-surface  --mut  --card  --card-line  --accent

   ...which is remapped by a SURFACE WRAPPER class on the section host:
       .ssx-on-paper  → light section
       .ssx-on-onyx   → dark band

   Rules: token-only colors (no raw hex in components; #fff only inside
   genuinely dark faces); NO !important; sharp corners (radius 0); 2px ink
   hairlines; hard offset shadows. Keep under ~500 lines.

   NOTE (POC): this is additive. home.html is untouched and still ships its
   own scoped `.sshome` CSS. The JS in ssl-checks.js binds `.svc`/`.checks`;
   these new components use `.ssx-svc[data-flip]` / `.ssx-checks[data-checks]`
   — wire those selectors in a later build step (out of scope here).
   =========================================================================== */

/* ---- 1. Token contract (single source of truth for brass/gold) ---------- */
.ssx-root{
  --bg:#EFE9DC; --paper:#F7F2E7; --sunk:#E7E0D0; --ink:#1A1813;
  --navy:#1B2540; --navy-d:#141B30; --dim:#6E6757; --faint:#9A917E;
  --brass:#A9803A; --gold:#C9A24B; --line:#1A1813; --line-soft:#D6CFBE;
  --ok:#2E7D52; --red:#C0392B; --onyx:#14131C; --onyx-card:#1C1B24;
  --disp:'Archivo',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --hard:6px 6px 0 var(--ink); --hard-sm:4px 4px 0 var(--ink);
  /* default (paper) surface mapping — overridden by surface wrappers below */
  --surface:var(--paper); --on-surface:var(--ink); --mut:var(--dim);
  --card:var(--paper); --card-line:var(--ink); --accent:var(--gold);
  color:var(--on-surface); font-family:var(--disp); line-height:1.55;
}
.ssx-root *{box-sizing:border-box}
.ssx-root img{display:block;max-width:100%}
.ssx-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.ssx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- 2. Surface wrappers (light / dark agnostic) ------------------------ */
.ssx-on-paper{
  --surface:var(--paper); --on-surface:var(--ink); --mut:var(--dim);
  --card:var(--paper); --card-line:var(--ink); --accent:var(--gold);
  background:var(--surface); color:var(--on-surface);
}
.ssx-on-bg{
  --surface:var(--bg); --on-surface:var(--ink); --mut:var(--dim);
  --card:var(--paper); --card-line:var(--ink); --accent:var(--gold);
  background:var(--surface); color:var(--on-surface);
}
.ssx-on-onyx{
  --surface:var(--onyx); --on-surface:#F2ECDE; --mut:rgba(242,236,222,.74);
  --card:var(--onyx-card); --card-line:#F2ECDE; --accent:var(--gold);
  background:var(--surface); color:var(--on-surface);
}

/* ---- DB content prose (unique per-page authored body) -------------------
   Renders the imported ai_output 'content' sections so each page shows its
   real, differentiated copy. Surface-aware (reads --on-surface / --mut /
   --accent) so it's readable on paper AND onyx. The page template still owns
   the single <h1>; section headings here are <h2>, body prose is <p>/text. */
.ssx-cprose{max-width:1100px;display:grid;gap:16px}
.ssx-cprose-item{border:2px solid var(--card-line);border-left:6px solid var(--accent);background:var(--card);box-shadow:var(--hard-sm);padding:24px clamp(22px,3vw,32px)}
.ssx-cprose h2{font-family:var(--disp);font-weight:900;font-size:clamp(22px,3vw,32px);line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;color:var(--on-surface);margin:0 0 12px}
.ssx-prose{color:var(--on-surface);font-family:var(--disp);font-size:16px;line-height:1.72;max-width:72ch}
.ssx-prose>*:first-child{margin-top:0}
.ssx-prose h3{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.12;letter-spacing:-.01em;text-transform:uppercase;color:var(--on-surface);margin:24px 0 12px}
.ssx-prose p{margin:0 0 16px}
.ssx-prose p:last-child{margin-bottom:0}
.ssx-prose ul,.ssx-prose ol{margin:0 0 16px;padding-left:22px}
.ssx-prose li{margin:0 0 8px;line-height:1.6}
.ssx-prose li::marker{color:var(--accent)}
.ssx-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.6px}
.ssx-prose a:hover{color:var(--on-surface)}
.ssx-prose strong{font-weight:800;color:var(--on-surface)}
.ssx-prose em{font-style:italic}

/* ---- 3. Atoms: eyebrow, section heading, buttons ------------------------ */
.ssx-eb{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.ssx-on-onyx .ssx-eb{color:var(--gold)}

.ssx-shead{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:34px}
.ssx-shead h2{font-family:var(--disp);font-weight:900;font-size:clamp(28px,3.4vw,40px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase;margin-top:14px;color:var(--on-surface)}
.ssx-shead .ssx-sp{font-size:14.5px;color:var(--mut);line-height:1.55;padding-bottom:4px}
@media(max-width:980px){.ssx-shead{grid-template-columns:1fr}}

.ssx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding:14px 20px;border:2px solid var(--ink);cursor:pointer;transition:transform .08s,box-shadow .08s;text-decoration:none;border-radius:0}
.ssx-btn-lg{padding:18px 26px;font-size:14px}
.ssx-btn svg{width:16px;height:16px}
.ssx-btn-gold{background:var(--gold);color:#1B1402;box-shadow:var(--hard-sm)}
.ssx-btn-gold:hover,.ssx-btn-gold:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.ssx-btn-navy{background:var(--navy);color:#fff;box-shadow:var(--hard-sm)}
.ssx-btn-navy:hover,.ssx-btn-navy:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.ssx-btn-ghost{background:transparent;color:var(--on-surface);border-color:var(--card-line);box-shadow:var(--hard-sm)}
.ssx-btn-ghost:hover,.ssx-btn-ghost:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--card-line)}
.ssx-on-onyx .ssx-btn-ghost{box-shadow:4px 4px 0 #000}
.ssx-on-onyx .ssx-btn-ghost:hover,.ssx-on-onyx .ssx-btn-ghost:active{box-shadow:0 0 0 #000}

/* ---- 4. Light hero ------------------------------------------------------ */
.ssx-hero{padding:58px 0 66px;border-bottom:2px solid var(--ink)}
.ssx-hero .ssx-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.ssx-hero .ssx-h1{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 6px}
.ssx-htitle{font-family:var(--disp);font-weight:900;font-size:clamp(34px,4.6vw,52px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;margin-top:8px;color:var(--on-surface)}
.ssx-hl{background:linear-gradient(180deg,var(--gold),var(--brass));color:#1B1402;padding:0 .05em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ssx-hero p{font-size:16px;color:var(--mut);line-height:1.6;margin-top:22px;max-width:50ch}
.ssx-hero p b{color:var(--on-surface);font-weight:700}
.ssx-hero .ssx-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.ssx-himgs{position:relative;align-self:stretch;min-height:520px}
.ssx-himgs .ssx-main{width:84%;margin-left:auto;height:520px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--brass);background:var(--sunk);overflow:hidden}
.ssx-himgs .ssx-main img{width:100%;height:100%;object-fit:cover}
.ssx-himgs .ssx-inset{position:absolute;left:0;bottom:46px;width:48%;height:250px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--brass);background:var(--sunk);overflow:hidden}
.ssx-himgs .ssx-inset img{width:100%;height:100%;object-fit:cover}
.ssx-himgs .ssx-tagchip{position:absolute;top:-14px;left:8%;background:var(--navy);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border:2px solid var(--ink);z-index:3}
@media(max-width:980px){.ssx-hero .ssx-wrap{grid-template-columns:1fr;gap:40px}.ssx-himgs{min-height:440px}.ssx-himgs .ssx-main{height:440px;width:88%}}

/* ---- 5. Flip service cards (light front → dark detail back) ------------- */
.ssx-svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ssx-svc{position:relative;perspective:1500px;cursor:pointer;background:transparent;border:0;padding:0;box-shadow:none;color:inherit}
.ssx-svc:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.ssx-svc-inner{position:relative;display:grid;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ssx-svc.ssx-flipped .ssx-svc-inner{transform:rotateY(180deg)}
.ssx-svc-face{grid-area:1/1;display:flex;flex-direction:column;border:2px solid var(--ink);padding:24px;box-shadow:var(--hard-sm);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:0;transition:transform .08s,box-shadow .08s}
.ssx-svc-front{background:var(--card);text-align:center;align-items:center;justify-content:center}
/* HOVER (not yet flipped) → the front face reads like a button being PRESSED:
   it shifts down-right and its hard offset shadow collapses to 0. Scoped to
   :not(.ssx-flipped) so it never fights the 3D flip transform. */
.ssx-svc:not(.ssx-flipped):hover .ssx-svc-front{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.ssx-svc-back{background:var(--onyx);color:#F2ECDE;transform:rotateY(180deg);overflow:hidden;padding-top:34px}
.ssx-svc .ssx-no{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brass);letter-spacing:.05em}
.ssx-svc-front h3{font-family:var(--disp);font-weight:900;font-size:clamp(23px,2.4vw,29px);text-transform:uppercase;letter-spacing:-.02em;margin-top:12px;line-height:1.02;color:var(--on-surface)}
.ssx-svc-front p{font-size:14.5px;color:var(--mut);margin-top:11px;line-height:1.5;max-width:32ch}
.ssx-svc .ssx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.ssx-svc-front .ssx-tags span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--on-surface);border:1.5px solid var(--line-soft);padding:5px 9px}
.ssx-flipcue{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:8px}
.ssx-flipcue svg{width:19px;height:19px;flex:0 0 auto}
.ssx-svc-front .ssx-flipcue{margin-top:18px;padding-top:0}
.ssx-svc-back .ssx-ghost{position:absolute;left:24px;right:24px;top:10px;margin:0;font-family:var(--disp);font-weight:900;font-size:clamp(30px,4vw,46px);line-height:.82;letter-spacing:-.04em;text-transform:uppercase;color:rgba(242,236,222,.06);pointer-events:none;z-index:0;text-align:left;white-space:nowrap;overflow:hidden}
.ssx-svc-back>*{position:relative;z-index:1}
.ssx-svc-back p{font-size:12.5px;color:rgba(242,236,222,.82);line-height:1.5;margin:0}
.ssx-svc-back .ssx-tags span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#F2ECDE;border:1.5px solid rgba(242,236,222,.28);padding:5px 9px}
.ssx-svc-back .ssx-backfoot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ssx-svc-back .ssx-gobtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);background:#F2ECDE;border:2px solid #F2ECDE;padding:10px 14px;box-shadow:4px 4px 0 var(--gold);text-decoration:none;transition:transform .08s,box-shadow .08s}
.ssx-svc-back .ssx-gobtn:hover,.ssx-svc-back .ssx-gobtn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--gold);color:var(--ink)}
.ssx-svc-back .ssx-gobtn svg{width:14px;height:14px}
.ssx-svc-back .ssx-flipcue{margin-top:0;padding-top:0;color:var(--gold)}
/* EMERGENCY card (card.emergency) — its hard offset shadow turns RED on both
   faces so the 24/7 lockout tile reads as urgent; the BACK CTA is the red
   "Call now — 24/7" tel: button (call ASAP), not a page link. */
.ssx-svc-emergency .ssx-svc-face{box-shadow:4px 4px 0 var(--red)}
.ssx-svc-emergency:not(.ssx-flipped):hover .ssx-svc-front{transform:translate(4px,4px);box-shadow:0 0 0 var(--red)}
.ssx-svc-emergency .ssx-no{color:var(--red)}
.ssx-svc-back .ssx-gobtn-call{background:var(--red);border-color:var(--red);color:#fff;box-shadow:4px 4px 0 #000}
.ssx-svc-back .ssx-gobtn-call svg{width:15px;height:15px}
.ssx-svc-back .ssx-gobtn-call:hover,.ssx-svc-back .ssx-gobtn-call:active{color:#fff;transform:translate(4px,4px);box-shadow:0 0 0 #000}
/* CONTACT card (card.contact) — a NON-flip solid card filled with the accent
   (gold), inverse colors (ink on gold), neo-brutalist; the whole tile is one
   link and it presses down-right (shadow collapses) on hover like a button. */
.ssx-svc-contact{display:flex;flex-direction:column;border:2px solid var(--ink);background:var(--gold);color:#1B1402;padding:24px;box-shadow:var(--hard);text-decoration:none;text-align:center;align-items:center;justify-content:center;border-radius:0;transition:transform .08s,box-shadow .08s}
.ssx-svc-contact:hover,.ssx-svc-contact:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink);color:#1B1402}
.ssx-svc-contact .ssx-no{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.05em;color:#1B1402;opacity:.7}
.ssx-svc-contact h3{font-family:var(--disp);font-weight:900;font-size:clamp(23px,2.4vw,29px);text-transform:uppercase;letter-spacing:-.02em;margin-top:12px;line-height:1.02;color:#1B1402}
.ssx-svc-contact p{font-size:14.5px;color:#1B1402;opacity:.84;margin-top:11px;line-height:1.5;max-width:32ch}
.ssx-svc-contact .ssx-contact-go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1B1402}
.ssx-svc-contact .ssx-contact-go svg{width:16px;height:16px}
@media(max-width:980px){.ssx-svcgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ssx-svcgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ssx-svc-inner{transition:none}}

/* ---- 6. Interactive checkmark block ------------------------------------ */
.ssx-checks{display:grid;gap:14px}
.ssx-check{display:flex;gap:13px;align-items:flex-start;border:2px solid var(--card-line);background:var(--card);padding:16px;box-shadow:var(--hard-sm);border-radius:0}
.ssx-check .ssx-ic{flex:0 0 auto;width:30px;height:30px;border:2px solid var(--card-line);display:grid;place-items:center;color:var(--ok);background:var(--surface);padding:0;cursor:pointer;font:inherit;-webkit-appearance:none;appearance:none;transition:background .15s,color .15s,transform .08s;border-radius:0}
.ssx-check .ssx-ic:hover{background:var(--ok);color:var(--paper)}
.ssx-check .ssx-ic:active{transform:scale(.9)}
.ssx-check .ssx-ic:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.ssx-check .ssx-ic svg{width:17px;height:17px;overflow:visible;pointer-events:none}
.ssx-check .ssx-ic svg path{stroke-dasharray:26;stroke-dashoffset:0;transition:stroke-dashoffset .34s ease}
.ssx-check.ssx-swapping .ssx-ic svg path{stroke-dashoffset:26}
.ssx-check .ssx-check-body{flex:1 1 auto;min-width:0;transition:opacity .26s ease,transform .26s ease}
.ssx-check.ssx-swapping .ssx-check-body{opacity:0;transform:translateY(3px)}
.ssx-check h3{font-family:var(--disp);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;color:var(--on-surface)}
.ssx-check p{font-size:13px;color:var(--mut);margin-top:4px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.ssx-check .ssx-ic svg path,.ssx-check .ssx-check-body{transition:none}}

/* ---- 7. Who-we-work-with cards ----------------------------------------- */
.ssx-whogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ssx-wcard{border:2px solid var(--card-line);background:var(--card);padding:20px 18px;box-shadow:var(--hard-sm);border-radius:0}
.ssx-wcard h3{font-family:var(--disp);font-weight:900;font-size:16px;text-transform:uppercase;letter-spacing:-.01em;color:var(--on-surface)}
.ssx-wcard p{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);margin-top:8px;line-height:1.5}
@media(max-width:980px){.ssx-whogrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ssx-whogrid{grid-template-columns:1fr}}

/* ---- 8. Common-jobs cards (open booking popup) ------------------------- */
.ssx-jobgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ssx-job{display:flex;align-items:center;gap:14px;border:2px solid var(--card-line);background:var(--card);padding:18px;box-shadow:var(--hard-sm);cursor:pointer;transition:transform .08s,box-shadow .08s;text-align:left;width:100%;font:inherit;color:var(--on-surface);border-radius:0}
.ssx-job:hover,.ssx-job:active{transform:translate(-2px,-2px);box-shadow:var(--hard)}
.ssx-job .ssx-jn{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--brass);flex:0 0 auto}
.ssx-job .ssx-jt{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em;flex:1}
.ssx-job .ssx-jar{color:var(--brass);flex:0 0 auto}
@media(max-width:900px){.ssx-jobgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ssx-jobgrid{grid-template-columns:1fr}}

/* ---- 9. How-it-works steps + trust row --------------------------------- */
.ssx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ssx-step{border:2px solid var(--card-line);background:var(--card);padding:24px;box-shadow:var(--hard-sm);border-radius:0}
.ssx-step .ssx-n{font-family:var(--disp);font-weight:900;font-size:40px;letter-spacing:-.03em;color:var(--sunk);line-height:1;-webkit-text-stroke:1.5px var(--ink);transition:color .18s,-webkit-text-stroke-color .18s}
.ssx-on-onyx .ssx-step .ssx-n{color:transparent;-webkit-text-stroke:1.5px rgba(242,236,222,.4)}
/* hover → the number lights up gold (both surfaces) */
.ssx-step:hover .ssx-n{color:var(--gold);-webkit-text-stroke-color:var(--gold)}
.ssx-on-onyx .ssx-step:hover .ssx-n{color:var(--gold);-webkit-text-stroke-color:var(--gold)}
.ssx-step h3{font-family:var(--disp);font-weight:800;font-size:17px;text-transform:uppercase;margin-top:14px;color:var(--on-surface)}
.ssx-step p{font-size:13px;color:var(--mut);margin-top:8px;line-height:1.5}
/* clickable "Call or book online" step — a real button that opens the Book sheet */
.ssx-step-book{display:block;font:inherit;text-align:left;width:100%;color:inherit;cursor:pointer;border-color:var(--gold);box-shadow:6px 6px 0 var(--gold);transition:transform .08s,box-shadow .08s}
/* HOVER → press down-right, gold shadow collapses to 0 (neo-brutalist press) */
.ssx-step-book:hover,.ssx-step-book:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--gold)}
.ssx-step-book:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ssx-step-book .ssx-bookcue{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
@media(max-width:900px){.ssx-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ssx-steps{grid-template-columns:1fr}}
.ssx-trustrow{display:flex;flex-wrap:wrap;border:2px solid var(--card-line);margin-top:36px}
.ssx-trustrow span{flex:1 1 auto;text-align:center;padding:14px 12px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface);border-right:2px solid var(--card-line)}
.ssx-trustrow span:last-child{border-right:none}
@media(max-width:700px){.ssx-trustrow{display:none}}

/* ---- 10. Service-area chips -------------------------------------------- */
.ssx-area h2{font-family:var(--disp);font-weight:900;font-size:clamp(28px,3.4vw,40px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase;margin-top:14px;color:var(--on-surface)}
.ssx-area .ssx-lead{font-size:14.5px;color:var(--mut);margin-top:14px;max-width:60ch;line-height:1.55}
.ssx-cities{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.ssx-cities a,.ssx-cities span{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border:2px solid var(--card-line);padding:8px 12px;background:var(--card);color:var(--on-surface);text-decoration:none;transition:background .1s,color .1s;border-radius:0}
.ssx-cities a:hover{background:var(--navy);color:#fff}
.ssx-cities .ssx-home{background:var(--navy);color:#fff}
.ssx-area-more{margin-top:14px}
.ssx-area-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);padding:6px 0;width:fit-content}
.ssx-area-more>summary::-webkit-details-marker{display:none}
.ssx-area-more>summary .ssx-amx{display:inline-grid;place-items:center;width:20px;height:20px;border:2px solid var(--card-line);font-size:14px;line-height:1;background:var(--card);color:var(--on-surface);transition:transform .18s}
.ssx-area-more[open]>summary{color:var(--mut)}
.ssx-area-more[open]>summary .ssx-amx{transform:rotate(45deg)}
.ssx-area-more .ssx-cities{margin-top:12px}
.ssx-area .ssx-areacta{margin-top:26px}

/* ---- 11. FAQ accordion -------------------------------------------------- */
.ssx-faqlist{border-top:2px solid var(--card-line);max-width:880px}
.ssx-faqlist details{border-bottom:2px solid var(--card-line)}
.ssx-faqlist summary{list-style:none;cursor:pointer;padding:20px 4px;display:flex;align-items:center;gap:16px;font-family:var(--disp);font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:-.01em;color:var(--on-surface)}
.ssx-faqlist summary::-webkit-details-marker{display:none}
.ssx-faqlist summary .ssx-pm{margin-left:auto;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--brass)}
.ssx-faqlist details[open] summary .ssx-pm{transform:rotate(45deg)}
.ssx-faqlist .ssx-ans{padding:0 4px 22px 4px;font-size:14.5px;color:var(--mut);line-height:1.6;max-width:80ch}
.ssx-faqlist .ssx-ans a{color:var(--brass);font-weight:700;text-decoration:underline}

/* ---- 12. Our Shop section (NEW) ---------------------------------------- */
.ssx-shop .ssx-wrap{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.ssx-shop-img{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--brass);overflow:hidden;background:var(--sunk)}
.ssx-shop-img img{width:100%;height:100%;object-fit:cover}
.ssx-shop h2{font-family:var(--disp);font-weight:900;font-size:clamp(28px,3.4vw,40px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase;margin-top:14px;color:var(--on-surface)}
.ssx-shop .ssx-shop-body{font-size:14.5px;color:var(--mut);margin-top:14px;line-height:1.6;max-width:54ch}
.ssx-nap{border:2px solid var(--card-line);background:var(--card);padding:18px;box-shadow:var(--hard-sm);margin-top:22px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--on-surface)}
.ssx-nap .ssx-nap-name{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:var(--on-surface)}
.ssx-nap a{color:var(--brass);font-weight:700;text-decoration:underline}
.ssx-shop .ssx-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;align-items:center}
@media(max-width:980px){.ssx-shop .ssx-wrap{grid-template-columns:1fr;gap:30px}}

/* ---- 12b. Service area / mobile van band (NEW) ------------------------- */
/* Scope overflow-x:clip to the section so the 112% photo bleed never makes a
   page-level horizontal scrollbar — applied locally so it can't break sticky
   headers or other layout elsewhere. */
.ssx-van{overflow-x:clip}
.ssx-van .ssx-wrap{padding-top:84px;padding-bottom:84px}
/* align-items:start so expanding the "More service areas +" disclosure grows
   the LEFT column DOWN without vertically re-centering / dropping the van
   photo — the photo stays anchored at the top of the grid. */
.ssx-van-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:start}
.ssx-van-photo-col{align-self:start}
.ssx-van h2{font-family:var(--disp);font-weight:900;font-size:clamp(34px,4vw,54px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;margin-top:16px;color:var(--on-surface)}
.ssx-van .ssx-van-lead{font-size:16px;color:var(--mut);margin-top:18px;max-width:50ch;line-height:1.6}
/* flat text labels — NOT buttons (no fill, no shadow); real <a> links for SEO */
.ssx-van-chips{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:30px}
.ssx-van-chips a,.ssx-van-chips span{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:6px 0;border-bottom:1.6px solid var(--line-soft);background:transparent;box-shadow:none;text-decoration:none;transition:color .12s,border-bottom-color .12s}
.ssx-van-chips a:hover{color:var(--on-surface);border-bottom-color:var(--brass)}
.ssx-van-chips .ssx-van-here{color:var(--on-surface);border-bottom-color:var(--brass)}
.ssx-van-more{margin-top:24px}
.ssx-van-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);width:fit-content}
.ssx-van-more>summary::-webkit-details-marker{display:none}
.ssx-van-more>summary .ssx-van-plus{display:inline-grid;place-items:center;width:26px;height:26px;border:1.6px solid var(--ink);background:var(--paper);color:var(--ink);font-size:15px;line-height:1;transition:transform .18s}
.ssx-van-more[open]>summary .ssx-van-plus{transform:rotate(45deg)}
.ssx-van-more .ssx-van-chips{margin-top:16px}
/* photo frame — the image bleeds past the RIGHT edge (112% width, anchored
   left); overflow:visible so the bleed + the overlaid buttons can extend out.
   Bottom margin reserves room for the buttons that overhang the frame. */
.ssx-van-photo{position:relative;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--navy);aspect-ratio:5/4;overflow:visible;margin-bottom:48px}
.ssx-van-photo img{position:absolute;top:0;left:0;width:112%;height:100%;object-fit:cover}
/* the two CTA buttons OVERLAID at the photo's bottom-left — they sit on top of
   the photo and extend slightly past its bottom/left edges (the frame is
   overflow:visible) for the brutalist pop; hard shadows keep them readable. */
.ssx-van-btns{position:absolute;left:-12px;bottom:-26px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ssx-van-btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:18px 26px;border:1.6px solid var(--ink);text-decoration:none;border-radius:0;transition:transform .05s,box-shadow .05s}
.ssx-van-btn-primary{background:var(--navy);color:#fff;box-shadow:8px 8px 0 var(--ink)}
/* HOVER + active both press down-right and collapse the hard shadow */
.ssx-van-btn-primary:hover,.ssx-van-btn-primary:active{color:#fff;transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.ssx-van-btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line-soft);box-shadow:4px 4px 0 var(--ink)}
.ssx-van-btn-ghost:hover,.ssx-van-btn-ghost:active{color:var(--gold);transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
@media(max-width:900px){.ssx-van-grid{grid-template-columns:1fr;gap:40px}.ssx-van .ssx-wrap{padding-top:56px;padding-bottom:56px}
  /* single column — keep the buttons anchored to the photo's bottom-left, but
     pull them inside the left edge so they never overflow the viewport. */
  .ssx-van-photo{margin-bottom:60px}
  .ssx-van-btns{left:0;bottom:-30px}}
@media(max-width:420px){.ssx-van-btns{position:static;margin-top:28px}.ssx-van-photo{margin-bottom:0}}

/* ---- 13. Final CTA ------------------------------------------------------ */
.ssx-final h2{font-family:var(--disp);font-weight:900;font-size:clamp(34px,4.6vw,56px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase;margin-top:16px;color:var(--navy)}
.ssx-on-onyx .ssx-final h2{color:var(--on-surface)}
.ssx-final p{font-size:15px;color:var(--mut);margin-top:18px;max-width:56ch;line-height:1.6}
.ssx-final .ssx-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;align-items:center}
.ssx-final .ssx-callbig{display:inline-flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:900;font-size:28px;letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.ssx-on-onyx .ssx-final .ssx-callbig{color:var(--on-surface)}
.ssx-final .ssx-callbig svg{width:24px;height:24px;color:var(--brass)}