/* DetailOS public site - one shell for every customer page (home, quote, members, join,
   included, done, gallery, reviews, service and city pages).
   The rules: near-black ground, cream text, ONE accent (gold) used for exactly two things -
   the eyebrow label and the primary button. Two typefaces: the serif for headlines, the sans
   for everything else. 4px radius on controls, 12px on cards. No gradients, glows, badges or
   stickers. Photos do the selling. Colours and fonts come from Settings -> Brand through the
   :root tokens (src/lib/theme.js writes them into every head), so a tenant re-skins the whole
   site without touching this file. */
:root{
  --black:#0c0c0c; --panel:#161613; --panel2:#1e1e1a; --line:#2e2d27;
  --cream:#efe7d8; --cream-dim:#b9b1a2; --dim:#b9b1a2; --gold:#d6c29a; --green:#7fb97f; --red:#e08d8d;
  --serif:'Newsreader',Georgia,serif; --sans:'Manrope',-apple-system,system-ui,sans-serif;
  --wrap:1100px; --r:4px; --rc:12px; --nav:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--cream);font-family:var(--sans);line-height:1.55;font-size:16px;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(34px,7.5vw,60px)}
h2{font-size:clamp(26px,4.2vw,40px)}
h3{font-size:22px}
p{color:var(--cream-dim)}
p b,p strong{color:var(--cream);font-weight:600}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sec{padding:56px 0}
@media(min-width:900px){.sec{padding:84px 0}}
.eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.lede{font-size:17px;max-width:560px;margin-top:12px}
.dim{color:var(--cream-dim)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r);border:1px solid var(--gold);background:var(--gold);color:var(--black);font-weight:700;font-size:16px;cursor:pointer;text-align:center;transition:opacity .12s,transform .12s;white-space:nowrap}
.btn:hover{opacity:.92}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--cream-dim);opacity:1}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.btn.wide{width:100%}
.btn:disabled{opacity:.55;cursor:default}
@media(max-width:480px){.btn{white-space:normal;line-height:1.25;padding-top:10px;padding-bottom:10px;max-width:100%}}
.link{color:var(--cream);border-bottom:1px solid var(--line);padding-bottom:1px}
.link:hover{border-color:var(--cream-dim)}
/* nav */
.site-nav{position:sticky;top:0;z-index:50;height:var(--nav);background:color-mix(in srgb,var(--black) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;height:100%}
.site-nav .mark{height:34px;width:auto;max-width:170px;object-fit:contain;object-position:left}
.site-nav .links{display:none;gap:26px;font-size:14px;font-weight:600;color:var(--cream-dim)}
.site-nav .links a:hover{color:var(--cream)}
.site-nav .links a.on{color:var(--cream)}
.site-nav .tel{display:none;font-size:14px;color:var(--cream-dim)}
@media(min-width:900px){.site-nav .links{display:flex}.site-nav .tel{display:inline}.site-nav .mark{height:38px}}
/* cards, rows */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:20px}
.card.gold{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.rows{border-top:1px solid var(--line)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.row .k{color:var(--cream)}.row .v{color:var(--cream);white-space:nowrap}
.row .sub{display:block;font-size:13px;color:var(--cream-dim);margin-top:2px}
.row.head .k,.row.head .v{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);font-weight:700}
.grid{display:grid;gap:16px}
@media(min-width:900px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}}
/* controls */
.field{display:block;margin-top:12px}
.field span{display:block;font-size:13px;color:var(--cream-dim);margin-bottom:6px}
.inp,.sel,.field input,.field select,.field textarea,.wiz input,.wiz select,.wiz textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel2);color:var(--cream);font-size:16px;outline:none}
.inp:focus,.sel:focus,.field input:focus,.field select:focus,.field textarea:focus,.wiz input:focus,.wiz select:focus,.wiz textarea:focus{border-color:var(--cream-dim)}
.sel,.field select,.wiz select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9b1a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.sel option,.field select option{background:var(--panel2);color:var(--cream)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:transparent;color:var(--cream-dim);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--cream);color:var(--black);border-color:var(--cream)}
.chip:hover:not(.on){border-color:var(--cream-dim)}
/* trust strip */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust b{display:block;font-size:17px;color:var(--cream)}
.trust span{font-size:12px;color:var(--cream-dim)}
.stars{color:var(--gold);letter-spacing:2px;font-size:14px}
/* before / after pairs - always the same area of the same car */
.pairs{display:grid;gap:20px}
@media(min-width:700px){.pairs{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.pairs.c3{grid-template-columns:repeat(3,1fr)}}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.pair .shot{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--panel)}
.pair .shot img{width:100%;height:100%;object-fit:cover}
.pair .lbl{position:absolute;top:8px;left:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:3px;background:rgba(12,12,12,.82);color:var(--cream)}
.pair .lbl.a{background:var(--gold);color:var(--black)}
.pair figcaption{grid-column:1/-1;font-size:13px;color:var(--cream-dim);margin-top:2px}
.pair.solo{grid-template-columns:1fr 1fr}
/* hero photo */
.photo{position:relative;border-radius:var(--rc);overflow:hidden;background:var(--panel)}
.photo img{width:100%;height:100%;object-fit:cover}
/* quotes */
.quote{padding:18px;border:1px solid var(--line);border-radius:var(--rc);background:var(--panel)}
.quote p{color:var(--cream);font-size:15px;margin-top:8px}
.quote .who{font-size:13px;color:var(--cream-dim);margin-top:10px}
/* faq */
.faq .row{display:block}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;font-size:16px;color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--cream-dim);font-size:20px;line-height:1}
.faq details[open] summary:after{content:"\2013"}
.faq details p{margin-top:10px;font-size:15px}
/* sticky bar on phones: the price question and the phone, one thumb away */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--black) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transition:transform .2s ease}
.stick.hide{transform:translateY(110%)}
.stick .btn.ghost{padding:0 18px}
@media(min-width:900px){.stick{display:none}}
body.has-stick{padding-bottom:84px}
@media(min-width:900px){body.has-stick{padding-bottom:0}}
/* footer */
.foot{border-top:1px solid var(--line);padding:40px 0 34px;font-size:14px;color:var(--cream-dim)}
.foot .cols{display:grid;gap:22px}
@media(min-width:900px){.foot .cols{grid-template-columns:1.2fr 1fr 1fr}}
.foot b{color:var(--cream);font-weight:600}
.foot a{color:var(--cream-dim)}.foot a:hover{color:var(--cream)}
.foot .links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.foot .fine{margin-top:22px;font-size:12px;color:color-mix(in srgb,var(--cream-dim) 70%,transparent)}
/* misc */
.note{font-size:13px;color:var(--cream-dim)}
.ok{color:var(--green)}.bad{color:var(--red)}
.hr{height:1px;background:var(--line);border:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}