/* MasterTint UK · "Showroom" design, ported from the approved demo (demos/mastertint-uk-bolton, branch showroom, 18 Oct 2026).
   Copied as-is; tokens (fonts, colours) are in tokens.css. Client additions are at the end, marked "client build". */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--ink);text-decoration-color:var(--mag);text-underline-offset:4px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--mag-l);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--disp);font-weight:500;font-stretch:125%;line-height:1.02;margin:0;letter-spacing:-.01em;text-transform:uppercase}
p{margin:0 0 .8em}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:10px 14px;z-index:50}
.skip:focus{left:8px;top:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec-h{font-size:clamp(1.7rem,4vw,3rem)}
.kicker,.hero-eyebrow{margin:0 0 14px;font:600 .74rem/1.2 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.kicker::before,.hero-eyebrow::before{content:"";width:28px;height:1px;background:var(--mag);flex:none}
.stars{color:var(--ink);letter-spacing:.12em;font-size:.85em}
.stars3,.h-stars,.qd-stars{display:none!important}

/* buttons: square-cut, quiet */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:var(--r);font:600 .95rem/1.1 var(--body);letter-spacing:.02em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn-go{background:var(--ink);color:#0B0B0D}
.btn-go:hover{background:#fff;color:#000}
.btn-line,.btn-onink{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-line:hover,.btn-onink:hover{border-color:var(--ink);color:#fff}

/* preview tag */
.preview{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;padding:7px 44px 7px 14px;background:#000;color:var(--ink-2);font-size:.8rem;position:relative;text-align:center;border-bottom:1px solid var(--line)}
.preview a{color:var(--ink)}
.preview button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;background:none;border:0;color:var(--ink);font-size:1.3rem;cursor:pointer}
.preview.is-hidden{display:none}

/* header */
.mast{display:flex;align-items:center;gap:12px;padding:8px var(--gut);background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:20}
.brand{display:block;flex:none;line-height:0}
.brand img{height:52px;width:auto}
@media (min-width:701px){.brand img{height:62px}}
.mast-nav{display:none;margin-left:36px;gap:30px}
.mast-nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.88rem;letter-spacing:.04em;padding:10px 0;transition:color .2s}
.mast-nav a:hover{color:var(--ink)}
.mast-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.mast-find,.mast-call,.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border-radius:var(--r);text-decoration:none;font:600 .9rem/1 var(--body)}
.mast-find{color:var(--ink);border:1px solid var(--line-2)}
.mast-find svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.mast-call{background:var(--ink);color:#0B0B0D;padding:0 16px}
.mast-call:hover{background:#fff;color:#000}
.mast-call svg{width:13px;height:13px;fill:currentColor}
.menu-wrap{position:relative}
.menu-btn{background:none;border:1px solid var(--line-2);color:var(--ink);padding:0 12px;cursor:pointer}
.menu-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.menu-btn span{display:none}
.menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 20px 40px rgba(0,0,0,.5);min-width:200px;padding:6px;z-index:30;display:flex;flex-direction:column}
.menu a{padding:12px 14px;color:var(--ink);text-decoration:none;font-weight:500;border-radius:2px}
.menu a:hover,.menu a[aria-current]{background:rgba(255,255,255,.06)}
@media (min-width:400px){.menu-btn span{display:inline}}
@media (min-width:1080px){.mast-nav{display:flex}}

/* hero: headline over the car, the car full-bleed, the rear-tint slider on the glass panel at its foot */
.hero{background:var(--bg);padding:clamp(28px,5vw,72px) 0 0}
.hero-in{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut);display:grid;gap:18px 56px}
.hero h1{font-size:clamp(2.1rem,7.4vw,5.6rem);line-height:.96;font-weight:500}
.hero h1 span{display:block}
/* "Film fade" (Yusuf picked D, 18 Oct): the words tint left to right, light to near-black, like film going on */
.hero h1{font-weight:700;font-stretch:125%;letter-spacing:-.03em;line-height:.9;font-size:clamp(2.3rem,8.2vw,6.4rem)}
.hero h1 span{background:linear-gradient(90deg,#F2EFEA 0%,#F2EFEA 25%,#8d8a86 55%,#3a3a3e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.6px rgba(242,239,234,.35)}
.hero h1 .h-b{background:linear-gradient(90deg,#F2EFEA,#6f6c67 80%);-webkit-background-clip:text;background-clip:text}
.hero-tag{color:var(--ink-2);max-width:44ch;margin:0 0 20px;font-size:1.02rem}
.hero-acts{display:flex;flex-wrap:wrap;gap:10px}
/* phones and tablets (Yusuf, 18 Oct): headline, then the car and its slider, then the line and buttons */
@media (max-width:959px){
  .hero{display:flex;flex-direction:column}
  .hero-in{display:contents}
  .hero-eyebrow,.hero h1,.hero-side{padding-left:var(--gut);padding-right:var(--gut)}
  .hero-eyebrow{margin-bottom:14px}
  .hero-side{order:3;padding-top:26px;padding-bottom:36px;position:relative}
  .hero-side::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--line)}
  .hero-fig{order:2}
}
@media (max-width:519px){.hide-s{display:none}.hero-acts{flex-wrap:nowrap}.hero-acts .btn{flex:1;padding:12px 14px}.hero-tag{font-size:.95rem;margin-bottom:16px}.hero-fig{margin-top:22px}}
@media (min-width:960px){
  .hero-in{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:end}
  .hero-eyebrow{grid-column:1/-1}
  .hero-side{padding-bottom:6px}
}
.hero-fig{margin:clamp(28px,4vw,56px) 0 0}
.hero-stage{position:relative}
.hero-photo{position:relative;overflow:hidden;background:#151518;aspect-ratio:4/3}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,13,.55) 0,transparent 18%,transparent 62%,rgba(11,11,13,.85) 100%)}
@media (min-width:701px){.hero-photo{aspect-ratio:16/9}}
.tint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* the slider: a smoked-glass panel */
.tint-ctl{position:relative;z-index:2;background:var(--bg-2);padding:14px var(--gut) 10px;border-bottom:1px solid var(--line)}
@media (min-width:1280px){
  .tint-ctl{position:absolute;right:var(--gut);top:clamp(18px,3vw,36px);width:min(400px,44%);padding:16px 20px 12px;background:rgba(14,14,17,.62);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--line-2);border-radius:var(--r)}
}
/* two sliders cover the front glass when laid over a narrower photo, so from 701 to 1279px they sit side by side under it (Baz's front slider, 18 Oct) and the panel floats top right only from 1280px, clear of the car */
@media (min-width:701px) and (max-width:1279px){.tint-ctl{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,48px);padding:16px var(--gut) 12px}.tint-ctl .tc-row+.tc-row{margin:0;padding:0;border:0}.tc-note,.tc-try{grid-column:1/-1;justify-self:start}}
.tc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tc-top label{font:600 .72rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.tc-out{font:500 2rem/1 var(--disp);font-stretch:125%;color:#fff;font-variant-numeric:tabular-nums}
.tint-ctl input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:40px;margin:2px 0 0;background:transparent;cursor:pointer;touch-action:pan-y}
.tint-ctl input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.08))}
.tint-ctl input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.08))}
.tint-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(212,35,127,.35),0 4px 12px rgba(0,0,0,.6)}
.tint-ctl input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(212,35,127,.35)}
.tc-row+.tc-row{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
/* six snap points: each label is centred under its stop (the thumb is 22px wide) */
.tc-ticks{display:flex;justify-content:space-between;margin:-6px -4px 0;font-size:.74rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tc-ticks span{width:30px;text-align:center;transition:color .2s}
.tc-ticks span.is-on{color:var(--ink);font-weight:600}
.tc-law{margin:6px 0 0;font-size:.74rem;line-height:1.35;color:var(--ink)}
.tc-law:empty{margin:0}
.tc-note{margin:8px 0 0;font-size:.72rem;color:var(--ink-3)}
.hero-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:16px var(--gut) 18px;font-size:.85rem;color:var(--ink-2)}
.hc-car{font:500 .9rem var(--disp);font-stretch:125%;text-transform:uppercase;color:var(--ink);letter-spacing:.02em}
.hc-spec b{font-weight:500;color:var(--ink-3);margin-right:5px}
.hc-note{display:none}
/* Phones (Yusuf, 18 Oct: "too much going on"): the caption moves under the photo and is the one "as fitted" line,
   the % sits small beside each label, only the end shades are named (dots for the four between), and the note and
   "Like that?" link go (the Call / See it on your car buttons below do that job). Laptop and tablet unchanged. */
@media (max-width:700px){
  .hero-fig{display:flex;flex-direction:column;position:relative}
  .hero-stage{display:contents}
  .hero-photo{order:1}
  .hero-cap{order:2;padding:12px var(--gut) 10px;gap:2px 14px}
  .tint-ctl{order:3;padding:6px var(--gut) 8px}
  .hc-note{display:block;flex-basis:100%;font-size:.74rem;color:var(--ink-3)}
  .tc-out{font:600 .95rem/1 var(--body);color:var(--ink)}
  .tint-ctl input[type=range]{height:34px}
  .tc-ticks span:not(:first-child):not(:last-child){font-size:0;position:relative}
  .tc-ticks span:not(:first-child):not(:last-child)::after{content:"";position:absolute;left:50%;top:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink-3)}
  .tc-ticks span.is-on:not(:first-child):not(:last-child)::after{background:var(--ink)}
  .tc-row+.tc-row{margin-top:4px;padding-top:6px}
  .tc-note,.tc-try{display:none!important}
}
.hc-spec b:not(:first-child){margin-left:12px}
.hc-src{margin-left:auto;color:var(--ink-3)}

/* proof strip */
.proof{padding:clamp(34px,5vw,64px) var(--gut) 0}
.proof ul{list-style:none;margin:0 auto;padding:0;max-width:var(--max);display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.proof li{padding:20px 16px 20px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.proof li:nth-child(odd){padding-right:16px;border-right:1px solid var(--line)}
.proof li:nth-child(even){padding-left:16px}
.proof li:last-child{grid-column:1/-1;border-right:0;padding-left:0}
.proof b{font:500 clamp(1.05rem,2.4vw,1.6rem)/1.1 var(--disp);font-stretch:125%;color:#fff;letter-spacing:-.01em}
.proof span{font-size:.82rem;color:var(--ink-2)}
@media (min-width:960px){
  .proof ul{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
  .proof li:last-child{grid-column:auto;padding-left:24px}
  .proof li,.proof li:nth-child(odd),.proof li:nth-child(even){border-bottom:0;padding:26px 24px;border-right:1px solid var(--line)}
  .proof li:first-child{padding-left:0}.proof li:last-child{border-right:0}
}

/* signature: See it on your car, laid out like a car maker's build page (Yusuf picked "C · Configurator", 18 Oct):
   the photo with a filmstrip (your car, best angle, examples) on the left, a spec panel on the right */
.viz{padding:clamp(56px,8vw,120px) var(--gut);max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
.vc-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;margin-bottom:22px}
.vc-top>p{margin:0;color:var(--ink-2);max-width:40ch}
.vc-grid{display:grid;border:1px solid var(--line)}
.vc-grid>*{min-width:0}
@media (min-width:900px){.vc-grid{grid-template-columns:minmax(0,1fr) 340px}}
.viz-stage{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden}
@media (min-width:900px){.viz-stage{aspect-ratio:auto;height:100%;min-height:480px}.vc-left{display:flex;flex-direction:column}.vc-left .viz-stage{flex:1}}
.vc-strip{display:flex;gap:6px;padding:8px;background:var(--bg-2);border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.vc-strip::-webkit-scrollbar{display:none}
.vc-strip>*{flex:none;position:relative;width:92px;aspect-ratio:3/2;padding:0;border:1px solid transparent;background:#000;cursor:pointer;overflow:hidden;border-radius:2px}
.vc-strip img{width:100%;height:100%;object-fit:cover}
.vc-strip span{position:absolute;left:5px;bottom:4px;font:600 .55rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px #000}
.vc-strip [data-b]{opacity:.6;transition:opacity .2s}
.vc-strip [data-b]:hover,.vc-strip [data-b][aria-pressed=true]{opacity:1}
.vc-strip [aria-pressed=true]{border-color:#fff}
.vc-you{display:grid!important;place-items:center;background-color:transparent!important;background-size:cover!important;background-position:center!important;border:1px dashed var(--line-2)!important;color:var(--ink)}
.vc-you span{position:static;font:500 .74rem/1.2 var(--body);letter-spacing:0;text-transform:none;text-shadow:none;text-align:center;padding:0 6px}
.vc-you.has{border-style:solid!important;border-color:#fff!important}
.vc-you.has span{position:absolute;left:5px;bottom:4px;font:600 .55rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 3px #000;padding:0}
#viz-file:focus-visible+label{outline:2px solid var(--mag-l);outline-offset:2px}
.vc-sep{width:1px!important;aspect-ratio:auto!important;background:var(--line)!important;margin:4px 2px;cursor:default!important}
.vc-panel{background:var(--bg-2);display:flex;flex-direction:column;min-width:0}
@media (min-width:900px){.vc-panel{border-left:1px solid var(--line)}}
@media (max-width:899px){.vc-panel{border-top:1px solid var(--line)}}
.vc-blk{padding:18px 20px;border:0;border-bottom:1px solid var(--line);margin:0;min-width:0}
.vc-lab{float:left;display:flex;justify-content:space-between;width:100%;padding:0;font:600 .64rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.vc-lab+*{clear:both}
.vc-lab output{font-weight:500;color:var(--ink);letter-spacing:.06em}
.vc-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.vc-sw label{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:var(--ink-3);font:500 .72rem var(--body)}
.vc-sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.vc-sw i{display:block;width:100%;aspect-ratio:1;border-radius:3px;position:relative;overflow:hidden;outline:1px solid var(--line-2);outline-offset:3px;transition:outline-color .2s}
.vc-sw i::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%)}
.vc-sw input:checked+i{outline-color:#fff}
.vc-sw input:checked~span{color:#fff}
.vc-sw input:focus-visible+i{outline:2px solid var(--mag-l)}
/* segmented choice (it held the trial "front 70%" option; the front now uses the swatches, 18 Oct; kept for reuse) */
.vc-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.vc-seg label{position:relative;display:block}
.vc-seg label+label{border-left:1px solid var(--line-2)}
.vc-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.vc-seg span{display:flex;align-items:center;justify-content:center;min-height:46px;font:500 .86rem var(--body);color:var(--ink-2);transition:background .2s,color .2s}
.vc-seg input:checked+span{background:var(--ink);color:#0B0B0D}
.vc-seg input:focus-visible+span{outline:2px solid var(--mag-l);outline-offset:-4px}
.vc-tg{display:grid;gap:8px}
.vc-tg label{position:relative;display:block;cursor:pointer}
.vc-tg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.vc-tg span{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 12px;border:1px solid var(--line-2);border-radius:3px;color:var(--ink-2);font:500 .88rem var(--body);transition:border-color .2s,color .2s}
.vc-tg span i{width:22px;height:22px;border-radius:50%;flex:none}
.vc-tg span::after{content:"";margin-left:auto;width:16px;height:16px;border:1px solid var(--line-2);border-radius:50%;flex:none}
.vc-tg input:checked+span{border-color:var(--ink);color:#fff}
.vc-tg input:checked+span::after{background:var(--mag);border-color:var(--mag);box-shadow:inset 0 0 0 3px var(--bg-2)}
.vc-tg input:focus-visible+span{outline:2px solid var(--mag-l);outline-offset:2px}
.viz-hint{margin:10px 0 0;font-size:.78rem;color:var(--ink-2)}
/* rear and front: Leave + six shades in one row */
.vc-sw-7{grid-template-columns:repeat(7,1fr);gap:8px}
@media (max-width:430px){.vc-sw-7{gap:5px}.vc-sw-7 label{font-size:.68rem}}
.viz-law{color:var(--ink)}
.viz-law:empty{margin:0}
.vc-sum{padding:18px 20px 20px;margin-top:auto;display:grid;gap:10px}
.vc-sum>p{margin:0;font-size:.84rem;color:var(--ink-2)}
.vc-sum>p b{color:#fff;font-weight:500}
.vc-sum .btn{width:100%}
.viz-err{margin:0;color:var(--mag-l);font-weight:600;font-size:.88rem}
.viz-book{display:grid;gap:10px}
.viz-small{margin:12px 0 0;font-size:.74rem;color:var(--ink-3);max-width:70ch}
.cmp .cmp-bg{inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(26px) brightness(.4) saturate(.8);background:none}
.cmp .cmp-a,.cmp .cmp-b img{background:transparent}
.eg-h{font-size:1rem;margin:2px 0 10px}
.eg-tips{margin:0;padding:0 0 4px 18px;color:var(--ink-2);font-size:.92rem;display:grid;gap:4px}
.viz-stage[data-state=ready] .viz-empty,.viz-stage[data-state=busy] .viz-empty,.viz-stage[data-state=done] .viz-empty{display:none}
.cmp{position:absolute;inset:0;--p:50%}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.cmp-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.cmp::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.6);pointer-events:none}
.cmp-r{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y;z-index:2}
.cmp-r::-webkit-slider-runnable-track{height:100%;background:transparent}
.cmp-r::-moz-range-track{height:100%;background:transparent}
.cmp-r::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;opacity:0}
.cmp-r::-moz-range-thumb{width:44px;height:44px;border:0;opacity:0}
.cmp-r:focus-visible{outline:2px solid var(--mag-l);outline-offset:-2px}
.cmp-l{position:absolute;top:12px;z-index:1;font:600 .66rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;padding:6px 8px;background:rgba(0,0,0,.55);color:#fff}
.cmp-l-a{left:12px}.cmp-l-b{right:12px}
/* the drag handle is drawn separately so it sits in the middle of the photo; the whole photo stays draggable */
.cmp-h{position:absolute;left:var(--p);top:50%;z-index:1;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0D' stroke-width='1.8'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.cmp-r:focus-visible~.cmp-h{outline:2px solid var(--mag-l);outline-offset:2px}
.viz-stage[data-state=ready] .cmp-h,.viz-stage[data-state=busy] .cmp-h{display:none}
.viz-stage[data-state=ready] .cmp-b,.viz-stage[data-state=ready] .cmp::after,.viz-stage[data-state=ready] .cmp-r,.viz-stage[data-state=ready] .cmp-l,
.viz-stage[data-state=busy] .cmp-b,.viz-stage[data-state=busy] .cmp::after,.viz-stage[data-state=busy] .cmp-r,.viz-stage[data-state=busy] .cmp-l{display:none}
.viz-stage[data-state=busy] .viz-busy{display:block}
.viz-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;cursor:pointer;background:radial-gradient(ellipse at 50% 60%,#1d1d22,var(--bg-2) 70%);transition:background .3s}
.viz-empty:hover{background:radial-gradient(ellipse at 50% 60%,#25252b,var(--bg-2) 72%)}
.viz-empty::after{content:"";position:absolute;inset:14px;border:1px dashed var(--line-2);border-radius:4px;pointer-events:none;transition:border-color .3s}
.viz-empty:hover::after{border-color:rgba(255,255,255,.35)}
.ve-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);margin-bottom:6px}
.ve-ic svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.ve-t{font:500 1.2rem var(--disp);font-stretch:125%;text-transform:uppercase;color:var(--ink)}
.ve-s{font-size:.82rem;color:var(--ink-3);max-width:30ch}
/* waiting: a squeegee-like light sweeps across their own photo, darkening it behind the edge; the step line says what's being done */
.viz-busy{position:absolute;inset:0;display:none;z-index:3;overflow:hidden;background:rgba(11,11,13,.25)}
.viz-busy::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:60%;transform:translateX(-100%) skewX(-12deg);background:linear-gradient(90deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.55) 70%,rgba(255,255,255,.08) 92%,rgba(255,255,255,.55) 96%,rgba(255,255,255,0) 100%);animation:sweep 2.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-110%) skewX(-12deg)}100%{transform:translateX(190%) skewX(-12deg)}}
.vb-pill{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:grid;gap:8px;min-width:min(78%,300px);padding:12px 16px 12px;background:rgba(10,10,12,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:6px;text-align:center}
.vb-pill span{font:500 .86rem var(--body);color:var(--ink);letter-spacing:.01em;transition:opacity .3s}
.vb-pill span.is-out{opacity:0}
.vb-pill i{display:block;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.vb-pill b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mag),var(--mag-l));transition:width 18s cubic-bezier(.1,.6,.3,1)}
@media (prefers-reduced-motion:reduce){.viz-busy::before{animation:none;opacity:0}.vb-pill b{transition:none;width:60%!important}}

/* reviews */
.reviews{padding:clamp(36px,5vw,64px) 0 clamp(28px,4vw,52px);background:#111114;border-top:1px solid var(--line)}
.reviews .rv-card{background:#18181c;border-color:rgba(255,255,255,.07)}
.rv-src{display:block;width:100%;font:600 .7rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.rv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 var(--gut);max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto 24px}
.reviews .sec-h{font-size:clamp(1.3rem,3vw,2.2rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.rv-score{color:#fff}
.rv-count{font:500 .9rem var(--body);text-transform:none;letter-spacing:0;color:var(--ink-2)}
.rv-ctl{display:flex;gap:6px;flex:none}
.rv-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:border-color .2s,background .2s}
.rv-btn:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
.rv-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.rv-rail{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:0 var(--gut) 10px;scrollbar-width:none;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
.rv-rail::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 min(84vw,360px);scroll-snap-align:start;background:var(--bg-2);border:1px solid var(--line);padding:24px 22px 18px;display:flex;flex-direction:column;margin-right:12px}
.rv-tag{margin:0 0 12px;font:600 .68rem/1 var(--body);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3)}
.rv-stars{margin:0 0 10px;color:var(--ink);font-size:.78rem;letter-spacing:.18em}
.rv-ex{margin:0}
.rv-ex p{margin:0;font-size:1.06rem;line-height:1.45;color:var(--ink)}
.rv-full p{font-size:.95rem;color:var(--ink-2);margin:.6em 0 0}
.rv-more{align-self:flex-start;background:none;border:0;padding:8px 0;min-height:44px;color:var(--ink-2);font:500 .85rem var(--body);cursor:pointer;text-decoration:underline;text-decoration-color:var(--mag);text-underline-offset:4px}
.rv-card footer{margin-top:auto;padding-top:12px;font-size:.82rem;color:var(--ink-3)}
.rv-name{font-weight:600;color:var(--ink-2)}

/* services */
.board{padding:clamp(56px,7vw,110px) var(--gut);border-top:1px solid var(--line)}
.board-head,.svc-list,.board-more{max-width:var(--max);margin-left:auto;margin-right:auto}
.board-head{display:grid;gap:10px;margin-bottom:28px}
.board-head p{color:var(--ink-2);margin:0;max-width:52ch}
@media (min-width:900px){.board-head{grid-template-columns:auto 1fr;align-items:end;gap:48px}.board-head p{justify-self:end}}
.svc-list{list-style:none;padding:0;margin-top:0;margin-bottom:0;border-top:1px solid var(--line);counter-reset:sv}
.svc-list li{border-bottom:1px solid var(--line);counter-increment:sv}
.svc summary{list-style:none;display:grid;grid-template-columns:52px 1fr auto;gap:4px 18px;align-items:center;gap:4px 14px;padding:20px 0;min-height:64px;cursor:pointer;transition:padding .3s var(--ease)}
.svc summary:hover{padding-left:6px}
.svc summary::-webkit-details-marker{display:none}
.svc summary::after{content:"";width:14px;height:14px;grid-row:1/span 2;grid-column:3;background:linear-gradient(var(--ink),var(--ink)) center/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 14px no-repeat;transition:transform .3s var(--ease)}
.svc[open] summary::after{transform:rotate(45deg)}
/* their icons from the first design, redrawn in fine white line with a pink film accent (Yusuf, 18 Oct) */
.svc-ic{width:52px;height:52px;padding:7px;border:1px solid var(--line-2);border-radius:10px;background:linear-gradient(160deg,#1c1c21,#111114);grid-row:span 2;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9;transition:transform .3s var(--ease)}
.svc-ic .ic-film{stroke:var(--mag-l);fill:rgba(212,35,127,.16)}
.svc summary:hover .svc-ic{transform:scale(1.06)}
.svc-name{font:500 clamp(1.1rem,2.4vw,1.6rem)/1.1 var(--disp);font-stretch:125%;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em}
.svc-note{grid-column:2;font-size:.85rem;color:var(--ink-2)}
.svc-body{display:grid;gap:18px;padding:0 0 28px 70px}
.svc-body img{width:100%;max-height:340px;object-fit:cover}
.svc-body p{color:var(--ink-2);font-size:.98rem}
.svc-body blockquote{margin:0;padding-left:14px;border-left:1px solid var(--mag);color:var(--ink)}
.svc-body blockquote footer,.svc-src{font-size:.8rem;color:var(--ink-3);margin-top:6px}
@media (min-width:700px){.svc-body:not(.svc-text){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media (max-width:599px){.svc-body{padding-left:0}.svc summary{grid-template-columns:44px 1fr auto;gap:4px 14px}.svc-ic{width:44px;height:44px;padding:6px;border-radius:8px}}
.board-more{margin-top:28px}

/* Done one like yours? */
.yours{padding:clamp(56px,7vw,110px) var(--gut);border-top:1px solid var(--line)}
.yr-head,.yr-makes,.yr-stage,.yr-law,.yr-more{max-width:var(--max);margin-left:auto;margin-right:auto}
.yr-head{display:grid;gap:10px;margin-bottom:24px}
.yr-head p{margin:0;color:var(--ink-2);max-width:56ch}
@media (min-width:900px){.yr-head{grid-template-columns:auto 1fr;align-items:end;gap:48px}.yr-head p{justify-self:end}}
.yr-makes{display:flex;gap:0;overflow-x:auto;padding:0 0 2px;scrollbar-width:none;margin-bottom:18px;border-bottom:1px solid var(--line)}
.yr-makes::-webkit-scrollbar{display:none}
.yr-makes button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 16px;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;background:none;color:var(--ink-2);font:500 .9rem/1 var(--body);cursor:pointer;transition:color .2s,border-color .2s}
.yr-makes button small{font-size:.72rem;color:var(--ink-3)}
.yr-makes button:hover{color:var(--ink)}
.yr-makes button[aria-checked=true]{color:#fff;border-bottom-color:var(--mag)}
.yr-stage{display:grid;background:var(--bg-2);border:1px solid var(--line)}
@media (min-width:900px){.yr-stage{grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr)}}
.yr-photo{margin:0;position:relative;aspect-ratio:4/3;background:#151518;overflow:hidden}
.yr-photo img{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease,transform .8s var(--ease)}
.yr-photo img.is-out{opacity:0;transform:scale(1.02)}
.yr-card{padding:22px 20px 18px;display:flex;flex-direction:column;gap:10px}
@media (min-width:900px){.yr-card{padding:32px 30px 26px;border-left:1px solid var(--line)}}
.yr-pos{margin:0;font:600 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.yr-card h3{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.spec{margin:6px 0 0;display:grid}
.spec>div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.spec dt{font:600 .68rem/1.6 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.spec dd{margin:0;font-weight:500}
.yr-src{margin:2px 0 0;font-size:.82rem;color:var(--ink-3)}
.yr-src a{color:var(--ink-2)}
.yr-acts{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.yr-nav{display:flex;gap:6px;order:-1}
.yr-more{margin-top:8px;font-weight:500}
.yr-more a,.yr-src a{display:inline-block;padding:12px 0}
.yr-src a{padding:12px 4px}
.yr-cap{display:none}

/* how a visit goes */
.visit{padding:clamp(56px,7vw,110px) var(--gut);border-top:1px solid var(--line);display:grid;gap:28px}
.visit>*{max-width:var(--max);width:100%;margin-left:auto;margin-right:auto}
.vs-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s;border-top:1px solid var(--line)}
@media (min-width:760px){.vs-steps{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.vs-steps{grid-template-columns:repeat(4,1fr)}}
.vs-steps li{padding:24px 22px 22px 0;counter-increment:s;border-bottom:1px solid var(--line)}
@media (min-width:760px){.vs-steps li{padding-right:28px}.vs-steps li:nth-child(odd){border-right:1px solid var(--line)}.vs-steps li:nth-child(even){padding-left:28px}}
@media (min-width:1200px){.vs-steps li{border-bottom:0;border-right:1px solid var(--line);padding:28px 28px 8px}.vs-steps li:first-child{padding-left:0}.vs-steps li:last-child{border-right:0}}
.vs-steps h3{font-size:1.05rem;margin-bottom:10px;display:flex;align-items:baseline;gap:12px}
.vs-steps h3::before{content:counter(s,decimal-leading-zero);font:500 .78rem var(--body);color:var(--mag-l)}
.vs-steps p{font-size:.95rem;color:var(--ink-2);margin-bottom:12px}
.vs-steps blockquote{margin:0;font-size:.95rem;color:var(--ink)}
.vs-steps blockquote footer{font-size:.78rem;color:var(--ink-3);margin-top:4px}
.vs-aside{display:none}

/* get a price */
.close{padding:clamp(56px,7vw,110px) var(--gut);border-top:1px solid var(--line);display:grid;gap:24px}
.close>*{max-width:var(--max);width:100%;margin-left:auto;margin-right:auto}
@media (min-width:960px){.close{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:64px;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;align-items:start}.close>*{margin:0}}
.close-txt p{color:var(--ink-2)}
.close-txt .sec-h{margin-bottom:14px}
.qcard{background:var(--bg-2);border:1px solid var(--line);padding:22px;display:grid;gap:18px}
@media (min-width:640px){.qcard{grid-template-columns:1fr 1fr;padding:32px}}
.qc-top{grid-column:1/-1;margin:0;font:600 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.f-row{display:grid;gap:8px}
.f-wide,.f-chips,.f-err,.f-send{grid-column:1/-1}
.f-row label,.f-chips legend{font-size:.82rem;font-weight:500;color:var(--ink-2)}
.f-row label span{color:var(--ink-3)}
.f-row input,.f-row textarea{font:inherit;font-size:1rem;padding:12px 0;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;color:var(--ink);min-height:48px;width:100%}
.f-row input::placeholder,.f-row textarea::placeholder{color:var(--ink-3)}
.f-row input:focus,.f-row textarea:focus{border-bottom-color:var(--ink);outline:0}
.f-chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.f-chips legend{margin-bottom:10px;padding:0}
.f-chips label{position:relative}
.f-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.f-chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);font-size:.86rem;color:var(--ink-2);transition:all .15s}
.f-chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#0B0B0D}
.f-chips input:focus-visible+span{outline:2px solid var(--mag-l);outline-offset:2px}
.f-err{margin:0;color:var(--mag-l);font-weight:600}
.f-send{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.f-copy{margin:0;font-size:.8rem;color:var(--ink-3)}
.f-mail{flex-basis:100%;min-height:44px;padding:0;text-align:left;background:none;border:0;font:inherit;font-size:.85rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.f-mail:hover{color:var(--ink)}
.f-mail:disabled{opacity:.5;cursor:default}
.qd-wa{font-size:.9rem;color:var(--ink-2)}
.qd-wa a{color:var(--ink)}
.q-done{background:var(--bg-2);border:1px solid var(--line);padding:36px 24px;text-align:center}
.q-viz{grid-column:1/-1;display:flex;gap:12px;align-items:center;font-size:.85rem;color:var(--ink-2)}
.q-viz img{width:96px;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-2)}

/* find us */
.find{padding:clamp(56px,7vw,110px) var(--gut);border-top:1px solid var(--line);display:grid;gap:28px;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
@media (min-width:960px){.find{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;gap:64px}}
.find-map{position:relative;height:300px;overflow:hidden;border:1px solid var(--line);background:#111114}
@media (min-width:960px){.find-map{height:480px}}
.map-svg{width:100%;height:100%;object-fit:cover}
.m-ground{fill:#111114}.m-green{fill:#141a15}.m-bld{fill:#1b1b20;stroke:#24242a;stroke-width:.6}
.m-rail{fill:none;stroke:#3a3a42;stroke-width:1.4;stroke-dasharray:6 4}
.m-r{fill:none;stroke-linecap:round;stroke-linejoin:round}
.m-service{stroke:#26262c;stroke-width:3.4}.m-minor{stroke:#2a2a31;stroke-width:6}.m-mid{stroke:#34343c;stroke-width:9}.m-major{stroke:#45454f;stroke-width:11}
.m-lbl{font:500 12px var(--body);fill:#8c8892;paint-order:stroke;stroke:#111114;stroke-width:4px;letter-spacing:.06em}
.m-route-bed{fill:none;stroke:rgba(212,35,127,.16);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.m-route{fill:none;stroke:var(--mag-l);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
html.js .find-map:not(.is-drawn) .m-route{stroke-dashoffset:1}
.find-map.is-drawn .m-route{transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.3,1)}
.m-pin-halo{fill:rgba(212,35,127,.2)}.m-pin-body{fill:#fff}.m-pin-star{fill:var(--mag)}
.m-tag rect{fill:#fff}.m-tag-a{font:600 13px var(--body);fill:#0B0B0D}.m-tag-b{font:500 11px var(--body);fill:#6F6C67}
.front-btn{position:absolute;left:10px;bottom:10px;width:34%;max-width:200px;padding:0;border:1px solid var(--line-2);background:var(--bg-2);box-shadow:0 10px 24px rgba(0,0,0,.5);cursor:zoom-in;display:flex;flex-direction:column;transition:opacity .5s}
.front-btn img{width:100%;aspect-ratio:6/5;object-fit:cover}
.front-btn span{font:500 .68rem/1.2 var(--body);color:var(--ink-2);padding:6px 6px 5px;text-align:left}
html.js .find-map:not(.is-drawn) .front-btn{opacity:0}
.find-go{margin-top:12px}
.find-go .btn{width:100%}
@media (min-width:960px){.find-go .btn{width:auto}}
.find-txt address{font-style:normal;font-size:1.15rem;margin:18px 0 12px;color:var(--ink)}
.find-dir,.find-note{color:var(--ink-2);font-size:.97rem}
.hours{margin:16px 0;display:grid;max-width:380px}
.hours div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.hours dt{color:var(--ink-2)}.hours dd{margin:0}
.find-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.find-gm{font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.front-dlg{border:1px solid var(--line-2);padding:0;max-width:min(92vw,1000px);background:var(--bg-2);color:var(--ink)}
.front-dlg::backdrop{background:rgba(0,0,0,.8)}
.front-dlg figure{margin:0}
.front-dlg figcaption{padding:12px 16px;font-size:.88rem;color:var(--ink-2)}
.front-dlg [data-close]{position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#000;font-size:1.4rem;cursor:pointer}
@media (max-width:959px){.find-txt{order:-1}}

/* footer */
.foot{border-top:1px solid var(--line);color:var(--ink-3);padding:32px var(--gut) 96px;font-size:.84rem;line-height:1.6}
.foot p{margin:0 0 6px;max-width:var(--max);margin-left:auto;margin-right:auto}
.foot a{color:var(--ink-2)}
.foot-name{font:500 1rem var(--disp);font-stretch:125%;text-transform:uppercase;color:var(--ink);margin-bottom:10px!important}
.foot-small{font-size:.76rem}
@media (min-width:900px){.foot{padding-bottom:32px}}

/* floating Call / Get a price */
.dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;background:rgba(18,18,21,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line-2);border-radius:6px;box-shadow:0 16px 36px rgba(0,0,0,.5);transition:transform .3s,opacity .3s}
.dock .btn{min-height:48px}
.dock.is-off{transform:translateY(130%);opacity:0;pointer-events:none}
@media (min-width:900px){.dock{left:auto;right:18px;bottom:18px;width:340px}}

/* entrances (visitors only) */
html.js .rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rise.in{opacity:1;transform:none}
html.js .hero h1 span,html.js .hero-side,html.js .hero-eyebrow{opacity:0;transform:translateY(14px)}
html.js .hero.go h1 span,html.js .hero.go .hero-side,html.js .hero.go .hero-eyebrow{animation:hIn .9s var(--ease) forwards}
html.js .hero.go h1 .h-b{animation-delay:.1s}
html.js .hero.go .hero-side{animation-delay:.25s}
html.js .hero-photo img{transform:scale(1.04);transition:transform 2.2s var(--ease)}
html.js .hero.go .hero-photo img{transform:none}
@keyframes hIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .hero h1 span,html.js .hero-side,html.js .hero-eyebrow,html.js .rise{opacity:1!important;transform:none!important;animation:none!important}
  html.js .hero-photo img{transform:none!important;transition:none!important}
  html.js .find-map .m-route{stroke-dashoffset:0!important;transition:none!important}
  html.js .find-map .front-btn{opacity:1!important}
  .yr-photo img,.svc summary{transition:none}
  .viz-busy i::after{animation:none;width:100%}
}

/* phones */
@media (max-width:699px){
  .reviews{padding:30px 0 26px}
  .rv-head{margin-bottom:14px}
  .reviews .sec-h{font-size:1.25rem}
  .rv-card{padding:14px 16px 6px;flex-basis:80vw}
  .rv-stars{display:none}
  .rv-tag{margin-bottom:8px}
  .rv-ex p{font-size:.98rem;line-height:1.4}
  .rv-card footer{padding-top:4px}
  .vs-steps li{padding-right:0}
}

/* sub-pages */
.pg-head{padding:clamp(36px,6vw,80px) var(--gut) clamp(24px,4vw,40px)}
.pg-head>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.pg-head h1{font-size:clamp(2rem,6vw,4.2rem);line-height:1;margin:6px auto 16px;max-width:var(--max)}
.pg-head p:last-child{color:var(--ink-2);max-width:min(var(--max),64ch);margin-left:max(0px,calc((100% - var(--max))/2));margin-bottom:0}
.board-page{padding-top:12px;border-top:0}
.svc-list-page{grid-template-columns:1fr!important}
.pg-cta{padding:clamp(48px,6vw,90px) var(--gut);border-top:1px solid var(--line)}
.pg-cta>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.pg-cta p{color:var(--ink-2)}
.pg-cta .btn{margin:6px 8px 0 0}
.pf{padding:20px var(--gut) clamp(48px,6vw,90px)}
.pf>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.pf-makes{display:flex;flex-wrap:nowrap;gap:0;margin-bottom:22px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.pf-makes::-webkit-scrollbar{display:none}
.pf-makes button{flex:none;white-space:nowrap;min-height:48px;padding:0 16px;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;background:none;font:500 .9rem var(--body);color:var(--ink-2);cursor:pointer}
.pf-makes button small{color:var(--ink-3);font-size:.72rem}
.pf-makes button[aria-selected=true]{color:#fff;border-bottom-color:var(--mag)}
.pf-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.job{background:var(--bg-2);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.job img{aspect-ratio:4/3;object-fit:cover;width:100%}
.job-txt{padding:16px 16px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.job h3{font-size:1rem}
.job .spec>div{padding:7px 0}
.job-src{font-size:.78rem;color:var(--ink-3);margin:8px 0 4px}
.job-src a{color:var(--ink-2)}
.job-ask{margin-top:auto;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.pf-note{font-size:.82rem;color:var(--ink-3);margin-top:22px}
.pf-h{font-size:clamp(1.2rem,2.6vw,1.7rem);margin-bottom:14px}

/* section dividers (Yusuf, 18 Oct): a magenta hairline with a soft glow, fading out at both ends, like light on a film edge */
.reviews,.viz,.board,.yours,.visit,.close,.find,.foot,.pg-cta{position:relative;border-top:0!important}
.reviews::before,.viz::before,.board::before,.yours::before,.visit::before,.close::before,.find::before,.foot::before,.pg-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(212,35,127,0) 0%,rgba(212,35,127,.55) 22%,#F06AAE 50%,rgba(212,35,127,.55) 78%,rgba(212,35,127,0) 100%);
  box-shadow:0 0 14px 1px rgba(212,35,127,.35),0 0 3px rgba(240,106,174,.5)}
.viz::before,.find::before,.close::before{left:calc(-1 * max(0px,(100vw - 100%) / 2));right:calc(-1 * max(0px,(100vw - 100%) / 2))}

/* the reveal (Yusuf, 18 Oct): ready card, squeegee sweep, drag hint, caption */
.viz-reveal{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;background:rgba(8,8,10,.58);-webkit-backdrop-filter:blur(3px) saturate(.8);backdrop-filter:blur(3px) saturate(.8);animation:vrIn .5s var(--ease) both}
.viz-stage[data-state=reveal] .viz-reveal{display:flex}
.vr-t{margin:0;font:600 clamp(1.15rem,3.6vw,1.7rem)/1.15 var(--disp);font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;color:#fff;max-width:18ch}
.vr-go{min-width:170px;position:relative}
.vr-go::after{content:"";position:absolute;inset:-6px;border:1px solid rgba(240,106,174,.7);border-radius:6px;animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
@keyframes vrIn{from{opacity:0}to{opacity:1}}
.viz-stage[data-state=reveal] .cmp-h,.viz-stage[data-state=reveal] .cmp-l,.viz-stage[data-state=reveal] .cmp::after,.viz-stage[data-state=reveal] .cmp-r,
.viz-stage[data-state=sweep] .cmp-h,.viz-stage[data-state=sweep] .cmp-l,.viz-stage[data-state=sweep] .cmp-r,.viz-stage[data-state=sweep] .cmp-hint{display:none}
/* during the sweep the dividing line becomes the squeegee edge: brighter, with a pink glow */
.viz-stage[data-state=sweep] .cmp::after{width:2px;background:#fff;box-shadow:0 0 18px 4px rgba(240,106,174,.55),0 0 4px #fff}
.cmp-hint{position:absolute;left:var(--p);top:calc(50% - 58px);transform:translateX(-50%);z-index:2;padding:6px 10px;border-radius:4px;background:rgba(10,10,12,.78);color:#fff;font:600 .7rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .4s}
.viz-stage.is-hint .cmp-hint{opacity:1}
.viz-stage.is-hint .cmp-h{animation:hpulse 1.1s ease-in-out 3}
@keyframes hpulse{0%,100%{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 0 rgba(240,106,174,.6)}50%{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 12px rgba(240,106,174,0)}}
.viz-cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;margin:0;padding:10px 12px;border-radius:4px;background:rgba(10,10,12,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 .85rem/1.35 var(--body);text-align:center;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.viz-stage[data-state=done].is-hint .viz-cap{opacity:1;transform:none}
.viz-book .btn-go{animation:bookIn .6s var(--ease) both}
@keyframes bookIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vr-go::after,.viz-stage.is-hint .cmp-h,.viz-book .btn-go,.viz-reveal{animation:none}}

/* hero links into the tool (Yusuf, 18 Oct) */
.hero-try{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:rgba(10,10,12,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 .85rem/1 var(--body);cursor:pointer;transition:background .2s,border-color .2s}
.hero-try:hover{background:rgba(10,10,12,.8);border-color:#fff}
.hero-try svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.hero-try::after{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid var(--mag-l);opacity:0;animation:tryRing 2.4s ease-out 1.2s 3}
@keyframes tryRing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
@media (min-width:1280px){.hero-try{top:auto;bottom:clamp(18px,3vw,36px);right:auto;left:var(--gut)}}
.tc-try{display:inline-block;margin-top:10px;padding:8px 0;color:#fff;font-weight:600;font-size:.88rem;text-decoration:underline;text-decoration-color:var(--mag);text-underline-offset:5px;animation:bookIn .5s var(--ease) both}
@media (prefers-reduced-motion:reduce){.hero-try::after,.tc-try{animation:none}}

/* colour themes (Yusuf, 18 Oct): Black is the default; Navy and Stone switch from the preview bar's colour switch */
.pv-theme{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;overflow:hidden;margin-left:4px}
.pv-theme button{position:static!important;transform:none!important;width:auto!important;height:auto!important;min-height:28px;padding:0 10px!important;background:none;border:0;color:#cfcac2;font:600 .72rem/1 var(--body);letter-spacing:.06em;cursor:pointer}
.pv-theme button[aria-pressed=true]{background:#F2EFEA;color:#0B0B0D}

html[data-theme=navy]{--bg:#0E1524;--bg-2:#141D2F;--bg-3:#1B263B;--line:rgba(200,215,255,.10);--line-2:rgba(200,215,255,.18)}
html[data-theme=navy],html[data-theme=navy] body,html[data-theme=navy] .mast,html[data-theme=navy] .hero{background:#0E1524}
html[data-theme=navy] .preview{background:#0A101C}
html[data-theme=navy] .reviews{background:#111A2B!important}html[data-theme=navy] .reviews .rv-card{background:#18233A!important}
html[data-theme=navy] .hero-photo::after{background:linear-gradient(180deg,rgba(14,21,36,.55) 0,transparent 18%,transparent 62%,rgba(14,21,36,.85) 100%)}
html[data-theme=navy] .viz-empty{background:radial-gradient(ellipse at 50% 60%,#1B263B,#141D2F 70%)}
html[data-theme=navy] .svc-ic{background:linear-gradient(160deg,#1B263B,#111A2B)}
html[data-theme=navy] .dock{background:rgba(16,24,40,.88)}
html[data-theme=navy] .m-ground{fill:#0F1726}html[data-theme=navy] .m-bld{fill:#172136;stroke:#1E2A42}html[data-theme=navy] .m-service{stroke:#1A2438}html[data-theme=navy] .m-minor{stroke:#1E2940}html[data-theme=navy] .m-mid{stroke:#27344F}html[data-theme=navy] .m-major{stroke:#32415F}html[data-theme=navy] .m-lbl{stroke:#0F1726}

html[data-theme=stone]{--bg:#EFEBE5;--bg-2:#F8F5F0;--bg-3:#FFFFFF;--line:rgba(23,21,26,.10);--line-2:rgba(23,21,26,.20);--ink:#17151A;--ink-2:#55514B;--ink-3:#8A857E;color-scheme:light}
html[data-theme=stone],html[data-theme=stone] body,html[data-theme=stone] .mast,html[data-theme=stone] .hero{background:#EFEBE5}
html[data-theme=stone] .preview{background:#17151A;color:#d9d4cc}html[data-theme=stone] .preview a{color:#fff}html[data-theme=stone] .preview>button{color:#fff}
html[data-theme=stone] .btn-go,html[data-theme=stone] .mast-call{background:#17151A;color:#fff}html[data-theme=stone] .btn-go:hover,html[data-theme=stone] .mast-call:hover{background:#000;color:#fff}
html[data-theme=stone] .btn-line:hover,html[data-theme=stone] .btn-onink:hover{color:#000}
html[data-theme=stone] a:hover{color:#000}
html[data-theme=stone] .hero h1 span{background:linear-gradient(90deg,#17151A 0%,#17151A 25%,#5d5953 55%,#a9a39a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.6px rgba(23,21,26,.25)}
html[data-theme=stone] .hero h1 .h-b{background:linear-gradient(90deg,#17151A,#8a857e 80%);-webkit-background-clip:text;background-clip:text}
html[data-theme=stone] .hero-photo::after{background:linear-gradient(180deg,transparent 0,transparent 70%,rgba(23,21,26,.35) 100%)}
html[data-theme=stone] .tc-out,html[data-theme=stone] .tc-try{color:var(--ink)}
@media (min-width:1280px){html[data-theme=stone] .tc-out,html[data-theme=stone] .tc-try{color:#fff}html[data-theme=stone] .tint-ctl .tc-top label,html[data-theme=stone] .tint-ctl .tc-ticks{color:#ddd}html[data-theme=stone] .tint-ctl .tc-note{color:#bbb}html[data-theme=stone] .tint-ctl .tc-ticks .is-on,html[data-theme=stone] .tint-ctl .tc-law{color:#fff}}
@media (max-width:1279px){html[data-theme=stone] .tint-ctl input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,rgba(23,21,26,.25),rgba(23,21,26,.7))}}
html[data-theme=stone] .reviews{background:#E6E1D9!important}html[data-theme=stone] .reviews .rv-card{background:#FBF9F6!important;border-color:rgba(23,21,26,.08)}
html[data-theme=stone] .rv-score,html[data-theme=stone] .proof b{color:var(--ink)}
html[data-theme=stone] .viz-empty{background:radial-gradient(ellipse at 50% 60%,#fff,#F1EDE7 70%)}
html[data-theme=stone] .vc-strip{background:#F3EFE9}
html[data-theme=stone] .vc-you span{color:var(--ink)!important;text-shadow:none!important}
html[data-theme=stone] .vc-sw input:checked+i{outline-color:var(--ink)}html[data-theme=stone] .vc-sw input:checked~span,html[data-theme=stone] .vc-lab output,html[data-theme=stone] .vc-sum>p b{color:var(--ink)}
html[data-theme=stone] .vc-tg input:checked+span{color:var(--ink);border-color:var(--ink)}
html[data-theme=stone] .vc-seg input:checked+span,html[data-theme=stone] .f-chips input:checked+span{background:var(--ink);color:#fff}
html[data-theme=stone] .yr-makes button[aria-checked=true],html[data-theme=stone] .pf-makes button[aria-selected=true]{color:var(--ink)}
html[data-theme=stone] .svc-ic{background:linear-gradient(160deg,#fff,#F1EDE7)}
html[data-theme=stone] .dock{background:rgba(248,245,240,.92)}
html[data-theme=stone] .m-ground{fill:#F1EDE7}html[data-theme=stone] .m-green{fill:#E3E8DA}html[data-theme=stone] .m-bld{fill:#E4DED5;stroke:#D8D0C4}html[data-theme=stone] .m-rail{stroke:#B8B0A4}
html[data-theme=stone] .m-service{stroke:#fff}html[data-theme=stone] .m-minor{stroke:#fff}html[data-theme=stone] .m-mid{stroke:#fff}html[data-theme=stone] .m-major{stroke:#fff}
html[data-theme=stone] .m-lbl{fill:#55514B;stroke:#F1EDE7}html[data-theme=stone] .m-pin-body{fill:#17151A}html[data-theme=stone] .m-tag rect{fill:#17151A}html[data-theme=stone] .m-tag-a{fill:#fff}html[data-theme=stone] .m-tag-b{fill:#d9d4cc}
html[data-theme=stone] .front-btn{background:#fff}

/* About & contact page (Yusuf, 18 Oct) */
.ab{padding:clamp(28px,4vw,56px) var(--gut) clamp(48px,6vw,90px);max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;display:grid;gap:28px}
@media (min-width:900px){.ab{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}}
.ab-fig{margin:0}
.ab-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 0;border:1px solid var(--line)}   /* portrait shop-front photo (Baz, 18 Oct): keeps the sign and the car, drops the forecourt */
.ab-fig figcaption{margin-top:10px;font-size:.8rem;color:var(--ink-3)}
.ab-txt .sec-h{margin-bottom:16px}
.ab-txt p{color:var(--ink-2)}
.ab-facts{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ab-facts li{padding:16px 12px 16px 0;display:flex;flex-direction:column;gap:4px}
.ab-facts li+li{border-left:1px solid var(--line);padding-left:14px}
.ab-facts b{font:500 clamp(1rem,2.4vw,1.4rem)/1.1 var(--disp);font-stretch:125%;color:var(--ink)}
.ab-facts span{font-size:.78rem;color:var(--ink-2)}
.ab-say,.ct{position:relative;padding:clamp(48px,6vw,90px) var(--gut)}
.ab-say>*,.ct>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.ab-say::before,.ct::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(212,35,127,0) 0%,rgba(212,35,127,.55) 22%,#F06AAE 50%,rgba(212,35,127,.55) 78%,rgba(212,35,127,0) 100%);box-shadow:0 0 14px 1px rgba(212,35,127,.35),0 0 3px rgba(240,106,174,.5)}
.ab-say .sec-h,.ct>.sec-h{margin-bottom:24px}
.ab-quotes{display:grid;gap:12px}
@media (min-width:900px){.ab-quotes{grid-template-columns:repeat(3,1fr)}}
.ab-quotes blockquote{margin:0;padding:22px;background:var(--bg-2);border:1px solid var(--line)}
.ab-quotes p{margin:0 0 12px;font-size:1.02rem;line-height:1.5;color:var(--ink)}
.ab-quotes footer{font-size:.8rem;color:var(--ink-3)}
.ct-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.ct-grid{grid-template-columns:repeat(4,1fr)}}
.ct-card{display:flex;flex-direction:column;gap:6px;padding:18px;min-height:132px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.ct-card:hover{border-color:var(--ink-3);color:var(--ink);transform:translateY(-2px)}
.ct-card h3{font-size:.95rem;margin-top:auto}
.ct-card p{margin:0;font-size:.85rem;color:var(--ink-2);overflow-wrap:break-word}
@media (max-width:480px){.ct-card{padding:16px 14px}.ct-card p{font-size:.76rem}}
.ct-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2)}
.ct-ic svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.ct-card:first-child .ct-ic{border-color:var(--mag-l)}
.ct-visit{display:grid;gap:28px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
@media (min-width:900px){.ct-visit{grid-template-columns:1.2fr 1fr;gap:56px}}
.ct-visit h3{font-size:1rem;margin-bottom:12px}
.ct-visit address{font-style:normal;font-size:1.1rem;margin-bottom:10px}
.ct-dir,.ct-note{color:var(--ink-2);font-size:.95rem}
.ct-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ct-legal{font-size:.78rem;color:var(--ink-3);margin-top:14px}

/* Glow (Yusuf picked "A · Corner glow", 18 Oct): near-black with a soft pink light from the top-right corner and a
   fainter one bottom-left, fixed to the screen so it stays put while the page scrolls, like showroom lighting */
html[data-theme=glow]{background:#0B0B0D}html[data-theme=glow] body{background:transparent}
html[data-theme=glow] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 50% at 100% 0%,rgba(212,35,127,.20),rgba(212,35,127,0) 70%),radial-gradient(60% 45% at 0% 100%,rgba(212,35,127,.12),rgba(212,35,127,0) 70%),#0B0B0D}
html[data-theme=glow] .mast,html[data-theme=glow] .hero{background:transparent}
html[data-theme=glow] .preview{background:rgba(0,0,0,.55)}
html[data-theme=glow] .reviews{background:rgba(255,255,255,.025)!important}html[data-theme=glow] .reviews .rv-card{background:rgba(18,14,18,.72)!important}
html[data-theme=glow] .hero-photo::after{background:linear-gradient(180deg,rgba(11,11,13,.35) 0,transparent 18%,transparent 62%,rgba(11,11,13,.7) 100%)}
html[data-theme=glow] .tint-ctl{background:rgba(18,16,20,.6)}
@media (min-width:1280px){html[data-theme=glow] .tint-ctl{background:rgba(14,14,17,.62)}}
html[data-theme=glow] .vc-grid{background:rgba(11,11,13,.35)}

/* from their own site (18 Oct): chameleon jobs, shade guide + law, FAQ */
.cham-row{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.svc-list-page .cham-row{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.cham-row li{position:relative;margin:0}
.cham-row img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line)}
.cham-row span{position:absolute;left:5px;bottom:5px;right:5px;font:600 .58rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px #000}
.proof ul{grid-template-columns:1fr 1fr}
@media (min-width:960px){.proof ul{grid-template-columns:repeat(3,1fr)!important}.proof li:nth-child(3n){border-right:0}.proof li:nth-child(-n+3){border-bottom:1px solid var(--line)}.proof li:nth-child(4){padding-left:0}.proof li:last-child{grid-column:auto;padding-left:24px}}
@media (max-width:959px){.proof li:last-child{grid-column:auto;border-right:0;padding-left:16px}}
.law,.faq{position:relative;padding:clamp(48px,6vw,90px) var(--gut)}
.law>*,.faq>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.law::before,.faq::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(212,35,127,0) 0%,rgba(212,35,127,.55) 22%,#F06AAE 50%,rgba(212,35,127,.55) 78%,rgba(212,35,127,0) 100%);box-shadow:0 0 14px 1px rgba(212,35,127,.35),0 0 3px rgba(240,106,174,.5)}
.law .sec-h,.faq .sec-h{margin-bottom:24px}
.law-grid{display:grid;gap:28px}
@media (min-width:900px){.law-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}
.law-lede{font-size:1.05rem;color:var(--ink)}
.law p{color:var(--ink-2)}
.law-lede{color:var(--ink)!important}
.shades{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.shades li{display:grid;grid-template-columns:44px 64px 1fr;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.shades i{display:block;width:44px;height:30px;border-radius:3px;border:1px solid var(--line-2);background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 55%),linear-gradient(rgba(5,6,8,calc(1 - var(--v))),rgba(5,6,8,calc(1 - var(--v)))),linear-gradient(160deg,#b8cad6,#7d909e)}
.shades b{font:500 1.1rem var(--disp);font-stretch:125%}
.shades span{font-size:.88rem;color:var(--ink-2)}
.faq-list{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;cursor:pointer;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 12px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--ink-2);max-width:70ch}

/* the selling-points strip gets the same pink divider as the other sections (Yusuf, 18 Oct) */
.proof{position:relative;padding-top:clamp(48px,6vw,80px)}
.proof::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(212,35,127,0) 0%,rgba(212,35,127,.55) 22%,#F06AAE 50%,rgba(212,35,127,.55) 78%,rgba(212,35,127,0) 100%);box-shadow:0 0 14px 1px rgba(212,35,127,.35),0 0 3px rgba(240,106,174,.5)}
.proof ul{border-top:0}

/* ---- client build (18 Oct 2026): what the demo did not need ---- */
/* footer small print now comes from Business details as rich text */
.foot-small p{font-size:.76rem}
/* quote card: privacy line, per-field errors and send status from the starter's form handling */
.f-privacy,.c-form__status{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--ink-3)}
.f-privacy a{color:var(--ink-2)}
.c-form__status:empty{display:none}
.c-field__error{margin:6px 0 0;color:var(--mag-l);font-weight:600;font-size:.85rem}
.qcard [aria-invalid=true]{border-color:var(--mag-l)}
/* unfinished content markers ([placeholder] text, an unconnected form) */
.u-todo{background:#ffe58a;color:#000;padding:0 .2em}
.f-unconnected{margin-top:14px;font-size:.85rem}
/* legal pages */
.legal{max-width:calc(68ch + 2 * var(--gut));margin:0 auto;padding:0 var(--gut) clamp(48px,6vw,90px);color:var(--ink-2)}
.legal h2{font-size:1.3rem;margin:1.6em 0 .6em;color:var(--ink)}