/* ── self-hosted fonts (latin subsets, woff2 only) ──
Inter ships as one variable file covering every weight we use. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/poppins-400.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/poppins-500.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/poppins-600.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/poppins-700.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 500;font-display:swap;
src:url('fonts/inter-var.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
--black:#0D0D0F;
--panel:#151518;
--crimson:#C8102E; /* card red */
--crimson-deep:#9E0D24;
--red-bright:#E4293F;
--white:#F5F5F6;
--grey:#A5A5AB;
--silver:#C9CCCF; /* card silver */
--ease:cubic-bezier(.22,.61,.36,1);
/* a gentle physical spring for interactive feedback — settles, no bounce-cartoon */
--spring:linear(0, 0.0018, 0.0069 1.15%, 0.0278 2.4%, 0.1119 5.18%, 0.687 15.2%,
0.8643 19.02%, 0.9313 21.09%, 0.9844 23.3%, 1.0227 25.77%, 1.0433 28.48%,
1.0503 31.83%, 1.0294 38.53%, 1.0075 46.42%, 0.9979 56.24%, 0.9992 76.6%, 1);
}
/* ── page-to-page continuity (View Transitions; ignored by older browsers) ── */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-group(*){animation-duration:.4s;animation-timing-function:var(--ease)}
nav{view-transition-name:site-nav}
.mark{view-transition-name:site-mark}
@media (prefers-reduced-motion: reduce){
@view-transition{navigation:none}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
*{margin:0;padding:0;box-sizing:border-box}
/* Any rule setting `display` outranks the browser's own [hidden] rule, so an
element toggled with the hidden attribute stays on screen. Settle it once. */
[hidden]{display:none !important}
picture{display:contents}
html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;font-weight:300;
background:var(--black);color:var(--white);line-height:1.65;overflow-x:hidden;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--crimson);color:var(--white)}
:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
section[id],header[id]{scroll-margin-top:4.2rem}
h1,h2{letter-spacing:-.02em}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem}
h1,h2,h3{font-family:'Poppins',sans-serif}
.kicker{
font-family:'Poppins',sans-serif;font-weight:600;text-transform:uppercase;
letter-spacing:.3em;font-size:.76rem;color:var(--crimson);margin-bottom:1rem;
}
/* ── nav ─────────────────────────────── */
nav{
position:sticky;top:0;z-index:20;background:rgba(13,13,15,.72);
backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
border-bottom:1px solid rgba(245,245,246,.06);
transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
nav.scrolled{
background:rgba(13,13,15,.86);border-bottom-color:rgba(245,245,246,.1);
box-shadow:0 10px 30px rgba(0,0,0,.35);
}
nav .links a{transition:color .2s var(--ease)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:.9rem;padding-bottom:.9rem}
.mark{text-decoration:none;line-height:0;display:flex;align-items:center}
.mark img{height:40px;width:auto;display:block}
nav .links{display:flex;gap:1.5rem;align-items:center}
nav .links a{
text-decoration:none;color:var(--grey);font-family:'Poppins',sans-serif;font-weight:500;
font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
}
nav .links a:hover{color:var(--white)}
nav .links a.call{color:var(--white);border:1px solid var(--crimson);border-radius:3px;padding:.5rem 1rem}
nav .links a.call:hover{background:var(--crimson)}
@media(max-width:700px){nav .links a:not(.call){display:none}}
/* ── buttons ─────────────────────────── */
.btns{display:flex;gap:1rem;flex-wrap:wrap}
.btn{
display:inline-block;text-decoration:none;font-family:'Poppins',sans-serif;font-weight:600;
font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 2rem;border-radius:3px;
transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),
box-shadow .25s var(--ease);
}
.btn.primary{background:var(--crimson);color:var(--white)}
.btn.primary:hover{background:var(--crimson-deep);box-shadow:0 8px 24px rgba(200,16,46,.35)}
.btn.ghost{color:var(--white);border:1px solid rgba(245,245,246,.4)}
.btn.ghost:hover{border-color:var(--crimson);color:var(--red-bright)}
/* ── home hero ───────────────────────── */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.hero .shade{
position:absolute;inset:0;
background:
linear-gradient(90deg, rgba(13,13,15,.72) 0%, rgba(13,13,15,.38) 52%, rgba(13,13,15,0) 78%),
linear-gradient(180deg, rgba(13,13,15,.55) 0%, rgba(13,13,15,.28) 40%, rgba(13,13,15,.96) 86%, var(--black) 100%);
}
@media(max-width:700px){
.hero .shade{
background:
linear-gradient(180deg, rgba(13,13,15,.72) 0%, rgba(13,13,15,.72) 35%, rgba(13,13,15,.97) 74%, var(--black) 100%);
}
.hero{min-height:76vh}
.hero .inner{padding-top:5rem;padding-bottom:3.2rem}
.hero .kicker{font-size:.68rem;letter-spacing:.18em}
.hero p.lead{font-size:.98rem;margin-bottom:1.6rem}
.hero .btns{flex-direction:column;gap:.7rem;max-width:400px}
.hero .btn{width:100%;text-align:center}
}
.hero .kicker{color:var(--silver);text-shadow:0 1px 10px rgba(13,13,15,.85)}
.hero h1 .red{text-shadow:0 2px 18px rgba(13,13,15,.85)}
.hero .inner{position:relative;width:100%;padding-top:7rem;padding-bottom:4.5rem;text-align:left}
.hero h1{
font-weight:700;font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.12;
max-width:17ch;margin-bottom:1.1rem;text-shadow:0 2px 24px rgba(13,13,15,.6);
}
.hero h1 .red{color:var(--red-bright)}
.hero p.lead{max-width:50ch;font-size:1.1rem;color:#D8D8DC;margin-bottom:2rem;text-shadow:0 1px 12px rgba(13,13,15,.7)}
/* ── brand strip ─────────────────────── */
.strip{
background:var(--panel);border-top:1px solid rgba(245,245,246,.07);border-bottom:1px solid rgba(245,245,246,.07);
padding:1.15rem 1.5rem;text-align:center;
font-family:'Poppins',sans-serif;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
font-size:.78rem;color:var(--grey);
}
.strip b{color:var(--crimson);margin:0 1.9em;font-weight:500}
/* ── services grid (home) ────────────── */
.services{padding:5rem 1.5rem;text-align:center}
.services h2{font-weight:600;font-size:clamp(1.7rem,4.2vw,2.4rem);margin-bottom:.8rem}
.services .lead{max-width:58ch;margin:0 auto 3rem;color:var(--grey)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem;text-align:left}
.card{
background:var(--panel);border:1px solid rgba(245,245,246,.08);border-radius:6px;
padding:1.9rem 1.7rem;position:relative;overflow:hidden;
}
.card.photo{padding:0;display:flex;flex-direction:column}
.card .ph{
width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;filter:saturate(.92);
transition:filter .5s var(--ease);
}
a.card.photo:hover .ph{filter:saturate(1.05)}
.card .body{padding:1.5rem 1.7rem 1.8rem}
.card::before{content:"";position:absolute;top:0;left:0;height:100%;width:3px;background:var(--crimson)}
.card h3{font-weight:600;font-size:1.08rem;margin-bottom:.55rem;color:var(--white)}
.card p{font-size:.94rem;color:var(--grey)}
a.card{
display:block;text-decoration:none;
transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
a.card:hover{border-color:rgba(226,59,78,.55);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.card .tags{margin-top:.9rem;display:flex;gap:.4rem;flex-wrap:wrap}
.card .tag{
font-family:'Poppins',sans-serif;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
color:#D8D8DC;border:1px solid rgba(245,245,246,.18);border-radius:99px;padding:.25rem .7rem;
}
.card .go{
margin-top:1rem;font-family:'Poppins',sans-serif;font-size:.76rem;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;color:var(--red-bright);
}
/* ── why / hours (home) ──────────────── */
.why{padding:5rem 1.5rem;background:var(--panel);border-top:1px solid rgba(245,245,246,.07);border-bottom:1px solid rgba(245,245,246,.07)}
.why .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center}
@media(max-width:760px){.why .wrap{grid-template-columns:1fr;gap:2.2rem}}
.why h2{font-weight:600;font-size:clamp(1.7rem,4.2vw,2.3rem);margin-bottom:1.1rem}
.why p{color:var(--grey);margin-bottom:1rem;max-width:54ch}
.why p b{color:var(--white);font-weight:500}
.hours{
background:var(--black);border:1px solid rgba(245,245,246,.1);border-radius:6px;padding:1.8rem 1.7rem;
}
.hours h3{font-weight:600;font-size:1.05rem;margin-bottom:1rem}
.hours table{width:100%;border-collapse:collapse;font-size:.94rem}
.hours td{padding:.45rem 0;border-bottom:1px solid rgba(245,245,246,.08);color:var(--grey)}
.hours tr:last-child td{border-bottom:0}
.hours td:last-child{text-align:right;color:var(--white)}
.hours .addr{margin-top:1.1rem;font-size:.9rem;color:var(--grey)}
/* ── contact / cta band ──────────────── */
.contact{
padding:5rem 1.5rem 4rem;text-align:center;
background:
radial-gradient(ellipse 70% 60% at 50% 100%, rgba(176,30,46,.14), transparent 70%),
var(--black);
}
.contact h2{font-weight:600;font-size:clamp(1.7rem,4.2vw,2.4rem);margin-bottom:.9rem}
.contact p{max-width:48ch;margin:0 auto 2.4rem;color:var(--grey)}
.contact .phone{
display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1.5rem,4.5vw,2.2rem);
color:var(--white);text-decoration:none;margin-bottom:1.6rem;letter-spacing:.04em;
}
.contact .phone:hover{color:var(--red-bright)}
footer{margin-top:4rem;border-top:1px solid rgba(245,245,246,.1);padding-top:1.6rem;font-size:.82rem;color:#6E6E74}
/* ── service pages ───────────────────── */
.page-hero{
padding:4.5rem 1.5rem 3.5rem;
background:
radial-gradient(ellipse 70% 90% at 85% 0%, rgba(176,30,46,.16), transparent 60%),
var(--black);
border-bottom:1px solid rgba(245,245,246,.07);
}
.crumb{
display:inline-block;text-decoration:none;color:var(--grey);
font-family:'Poppins',sans-serif;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
margin-bottom:1.6rem;
}
.crumb:hover{color:var(--white)}
.page-hero h1{font-weight:700;font-size:clamp(2rem,5vw,3rem);max-width:20ch;margin-bottom:1rem;line-height:1.12}
.page-hero p.lead{max-width:58ch;color:var(--grey);font-size:1.08rem;margin-bottom:1.9rem}
.prods{padding:3.5rem 1.5rem 1rem}
.prod{
display:grid;grid-template-columns:64px 1fr;gap:1.5rem;align-items:start;
background:var(--panel);border:1px solid rgba(245,245,246,.08);border-radius:6px;
padding:2rem 1.9rem;margin-bottom:1.2rem;position:relative;overflow:hidden;
}
.prod::before{content:"";position:absolute;top:0;left:0;height:100%;width:3px;background:var(--crimson)}
.prod .no{
font-family:'Poppins',sans-serif;font-weight:700;font-size:1.3rem;color:var(--red-bright);
border:1px solid rgba(226,59,78,.4);border-radius:6px;width:56px;height:56px;
display:flex;align-items:center;justify-content:center;
}
.prod h2{font-weight:600;font-size:1.3rem;margin-bottom:.5rem}
.prod p{color:var(--grey);font-size:.97rem;margin-bottom:.9rem;max-width:66ch}
.prod .good{font-size:.92rem;color:#D8D8DC;margin-bottom:.9rem}
.prod .good b{color:var(--white);font-weight:500}
.prod .tags{display:flex;gap:.4rem;flex-wrap:wrap}
.prod .tag{
font-family:'Poppins',sans-serif;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
color:#D8D8DC;border:1px solid rgba(245,245,246,.18);border-radius:99px;padding:.25rem .7rem;
}
.step{scroll-margin-top:84px}
.prod.has-photo{grid-template-columns:64px 1fr 200px}
.prod .shot{display:block;border-radius:6px;overflow:hidden;align-self:center}
.prod .shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media(max-width:760px){
.prod.has-photo{grid-template-columns:64px 1fr}
.prod .shot{grid-column:1/-1;max-width:300px}
}
@media(max-width:560px){.prod{grid-template-columns:1fr}.prod.has-photo{grid-template-columns:1fr}.prod .no{width:48px;height:48px;font-size:1.1rem}}
.guide{
margin:2.2rem auto 0;max-width:1080px;
background:var(--black);border:1px dashed rgba(226,59,78,.45);border-radius:6px;
padding:1.9rem 2rem;
}
.guide h3{font-weight:600;font-size:1.1rem;margin-bottom:.5rem;color:var(--red-bright)}
.guide p{color:var(--grey);font-size:.97rem;max-width:70ch}
.guide p b{color:var(--white);font-weight:500}
.more{padding:3.5rem 1.5rem 4.5rem;text-align:center}
.more h3{
font-family:'Poppins',sans-serif;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
font-size:.78rem;color:var(--grey);margin-bottom:1.2rem;
}
.more .chips{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.more .chips a{
text-decoration:none;color:var(--white);font-family:'Poppins',sans-serif;font-size:.8rem;
letter-spacing:.1em;text-transform:uppercase;font-weight:500;
border:1px solid rgba(245,245,246,.22);border-radius:99px;padding:.55rem 1.2rem;
transition:border-color .15s,color .15s;
}
.more .chips a:hover{border-color:var(--red-bright);color:var(--red-bright)}
/* ── card-style slash motif ──────────── */
.slashes{position:absolute;pointer-events:none}
.slashes.tr{top:0;right:0}
.hero .slashes{z-index:1;opacity:.9}
@media(max-width:700px){
.hero .slashes{display:none}
.page-hero .slashes,.quote-hero .slashes{opacity:.18}
.scue{display:none}
.ribbon{font-size:.6rem;padding:.35rem .7rem;bottom:.7rem;left:.7rem}
}
.page-hero{position:relative;overflow:hidden}
.page-hero .slashes{opacity:.55}
/* ── the slash system ──────────────────
One diagonal, borrowed from the brand slashes, used for every wipe on the
site. Tokens and rules live in assets/MOTION.md — read it before adding
motion anywhere. */
/* wordmark: a single crimson sweep on load, then never again */
.js .mark{position:relative;overflow:hidden}
.js .mark::after{
content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:46%;
background:linear-gradient(90deg,transparent,rgba(200,16,46,.85),transparent);
transform:translateX(-160%) skewX(-31deg);
animation:markswipe .9s var(--ease) .35s 1 both;pointer-events:none;
}
@keyframes markswipe{to{transform:translateX(390%) skewX(-31deg)}}
/* service cards: crimson slash crosses the card once on hover */
a.card.photo::before{
content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:34%;z-index:2;
background:linear-gradient(90deg,transparent,rgba(200,16,46,.28) 45%,rgba(201,204,207,.18) 55%,transparent);
transform:translateX(-180%) skewX(-31deg);pointer-events:none;
}
a.card.photo:hover::before{transition:transform .6s var(--ease);transform:translateX(460%) skewX(-31deg)}
/* homepage hero: the diagonal band that cuts the scene as you scroll out */
@media (prefers-reduced-motion: reduce){
.js .mark::after{display:none}
a.card.photo::before{display:none}
}
/* ── interactive feedback: one spring, everywhere ── */
.pill,.qbtn,.btn,.addon,.hit,.cmp-choose,.tab{transition-property:scale;transition-duration:.45s;transition-timing-function:var(--spring)}
.pill:active,.qbtn:active,.btn:active,.addon:active,.hit:active,.cmp-choose:active,.tab:active{scale:.965;transition-duration:.12s;transition-timing-function:ease-out}
/* quote steps: named so unlocking animates as a view transition */
#step1{view-transition-name:qstep1}
#step2{view-transition-name:qstep2}
#step3{view-transition-name:qstep3}
#step4{view-transition-name:qstep4}
@keyframes vt-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
::view-transition-new(qstep1),::view-transition-new(qstep2),
::view-transition-new(qstep3),::view-transition-new(qstep4){
animation:vt-rise .45s var(--ease) both;
}
/* ── preview badge ───────────────────── */
.ribbon{
position:fixed;bottom:1rem;left:1rem;z-index:50;
background:var(--crimson);color:var(--white);
font-family:'Poppins',sans-serif;font-weight:600;font-size:.68rem;
letter-spacing:.16em;text-transform:uppercase;
padding:.45rem .9rem;border-radius:3px;transform:skewX(-8deg);
box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.ribbon span{display:inline-block;transform:skewX(8deg)}
/* ── from-price chips ────────────────── */
.card .from{
margin-top:.9rem;font-family:'Poppins',sans-serif;font-weight:600;
font-size:.86rem;color:var(--red-bright);letter-spacing:.04em;
}
.pricenote{margin-top:1.6rem;font-size:.8rem;color:#6E6E74}
.fromline{
font-family:'Poppins',sans-serif;font-weight:500;font-size:.92rem;color:var(--silver);
margin:-.8rem 0 1.9rem;
}
.fromline b{color:var(--red-bright);font-weight:600}
/* ── reviews ─────────────────────────── */
.reviews{padding:5rem 1.5rem;text-align:center;background:var(--black)}
.reviews h2{font-weight:600;font-size:clamp(1.7rem,4.2vw,2.4rem);margin-bottom:.6rem}
.reviews .stars{color:var(--red-bright);font-size:1.4rem;letter-spacing:.25em;margin-bottom:.6rem}
.reviews .sub{color:var(--grey);max-width:52ch;margin:0 auto 2.6rem}
.rev-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem;text-align:left;align-items:start}
.rev{
background:var(--panel);border:1px solid rgba(245,245,246,.08);border-radius:6px;
padding:1.6rem 1.5rem;position:relative;
}
.rev .who{font-family:'Poppins',sans-serif;font-weight:600;font-size:.9rem;margin-top:1rem;color:var(--white)}
.rev p{color:var(--grey);font-size:.94rem}
.rev .st{color:var(--red-bright);letter-spacing:.2em;font-size:.85rem;margin-bottom:.7rem}
.rev .ex{
position:absolute;top:.8rem;right:.9rem;font-family:'Poppins',sans-serif;
font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#6E6E74;
border:1px solid rgba(245,245,246,.15);border-radius:99px;padding:.15rem .55rem;
}
/* ── work strip (home) ───────────────── */
.workstrip{
padding:5rem 1.5rem;text-align:center;background:var(--panel);
border-top:1px solid rgba(245,245,246,.07);border-bottom:1px solid rgba(245,245,246,.07);
}
.workstrip h2{font-weight:600;font-size:clamp(1.7rem,4.2vw,2.4rem);margin-bottom:.6rem}
.workstrip .sub{color:var(--grey);max-width:54ch;margin:0 auto 2.4rem}
.workgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.workgrid img{
width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:6px;
border:1px solid rgba(245,245,246,.1);filter:saturate(.95);
transition:filter .5s var(--ease),border-color .5s var(--ease);
}
.workgrid img:hover{filter:saturate(1.08) brightness(1.05);border-color:rgba(245,245,246,.25)}
/* ── quote band (home) ───────────────── */
.quoteband{
background:linear-gradient(100deg,var(--crimson) 0%,var(--crimson-deep) 55%,var(--crimson) 100%);
background-size:220% 100%;background-position:15% 50%;
padding:2.6rem 1.5rem;text-align:center;
}
.quoteband h2{font-weight:600;font-size:clamp(1.3rem,3.4vw,1.8rem);margin-bottom:.4rem}
.quoteband p{color:rgba(245,245,246,.85);margin-bottom:1.4rem;font-size:.98rem}
.quoteband .btn{background:var(--black);color:var(--white)}
.quoteband .btn:hover{background:#232327}
/* ── quote page ──────────────────────── */
.quote-hero{padding:4rem 1.5rem 2.4rem;position:relative;overflow:hidden;
background:radial-gradient(ellipse 70% 90% at 85% 0%,rgba(200,16,46,.16),transparent 60%),var(--black);
border-bottom:1px solid rgba(245,245,246,.07)}
.quote-hero h1{font-weight:700;font-size:clamp(1.9rem,4.6vw,2.7rem);margin-bottom:.7rem}
.quote-hero p{color:var(--grey);max-width:60ch}
.qwrap{max-width:840px;margin:0 auto;padding:2.4rem 1.5rem 5rem}
.step{
background:var(--panel);border:1px solid rgba(245,245,246,.08);border-radius:6px;
padding:1.8rem 1.7rem;margin-bottom:1.2rem;position:relative;overflow:hidden;
}
.step.locked{opacity:.38;pointer-events:none}
.step h3{display:flex;align-items:center;gap:.8rem;font-weight:600;font-size:1.05rem;margin-bottom:1.1rem}
.step h3 .n{
font-family:'Poppins',sans-serif;font-weight:700;font-size:.85rem;color:var(--white);
background:var(--crimson);width:1.7rem;height:1.7rem;border-radius:3px;
display:inline-flex;align-items:center;justify-content:center;transform:skewX(-8deg);flex:none;
}
.pills{display:flex;gap:.55rem;flex-wrap:wrap}
.pill{
font-family:'Poppins',sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.06em;
color:var(--white);background:none;border:1px solid rgba(245,245,246,.25);border-radius:99px;
padding:.6rem 1.15rem;cursor:pointer;transition:all .15s;
}
.pill:hover{border-color:var(--red-bright)}
.pill.active{background:var(--crimson);border-color:var(--crimson)}
.pill.queued{border-color:var(--red-bright);border-style:dashed}
.pill.done{opacity:.65}
.pill.done::after{content:" \2713";color:var(--red-bright)}
.step h3 .prog{font-family:'Inter',sans-serif;font-weight:400;font-size:.8rem;color:var(--grey);letter-spacing:0}
.tabs{display:flex;gap:.5rem;margin-bottom:1.1rem}
.tab{
font-family:'Poppins',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--grey);background:none;border:none;cursor:pointer;
padding:.5rem .2rem;border-bottom:2px solid transparent;
}
.tab.active{color:var(--white);border-bottom-color:var(--crimson)}
.qrow{display:flex;gap:.7rem;flex-wrap:wrap}
.qrow select,.qrow input[type=text]{
background:var(--black);color:var(--white);border:1px solid rgba(245,245,246,.22);
border-radius:3px;padding:.75rem .9rem;font-family:'Inter',sans-serif;font-size:.95rem;
flex:1;min-width:130px;
}
.qrow input[type=text]{text-transform:uppercase;letter-spacing:.08em;font-family:'Poppins',sans-serif;font-weight:600}
/* Reg plates are shouted; a model you're typing from memory is not. */
.qrow input[type=text].freetext{text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif;font-weight:400}
.qrow select:focus,.qrow input:focus{outline:none;border-color:var(--crimson)}
.hits:not(:empty){margin-top:.7rem;border:1px solid rgba(245,245,246,.14);border-radius:4px;max-height:19rem;overflow-y:auto}
.hit{
display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
background:none;border:0;border-bottom:1px solid rgba(245,245,246,.08);color:var(--grey);
font-family:'Inter',sans-serif;font-size:.9rem;text-align:left;padding:.7rem .9rem;cursor:pointer;
}
.hit:last-child{border-bottom:0}
.hit:hover,.hit:focus-visible{background:rgba(200,16,46,.12);color:var(--white);outline:none}
.hit b{font-family:'Poppins',sans-serif;font-weight:600;color:var(--white);white-space:nowrap}
.hits .hint{margin:0;padding:.8rem .9rem}
/* Buying guidance. The price list has no descriptions, so this is where the
customer works out what the model names actually mean. */
.blurb{margin-top:1rem;font-size:.92rem;line-height:1.65;color:var(--grey);max-width:68ch}
.blurb b{color:var(--white);font-weight:500}
.cmp-toggle{
display:inline-block;margin-top:1rem;background:none;border:0;cursor:pointer;padding:0;
font-family:'Inter',sans-serif;font-size:.86rem;color:#6E6E74;text-align:left;
}
.cmp-toggle b{color:var(--red-bright);font-weight:500;border-bottom:1px solid rgba(228,41,63,.4)}
.cmp-toggle:hover b{border-bottom-color:var(--red-bright)}
.cmp-toggle::after{content:" ↓";color:var(--red-bright)}
.cmp-toggle.open::after{content:" ↑"}
.cmp{margin-top:1.2rem;border-top:1px solid rgba(245,245,246,.1);padding-top:1.3rem}
.cmp h5{
font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;color:var(--white);
margin-bottom:.4rem;
}
.cmp-intro,.cmp-group>p{font-size:.88rem;color:var(--grey);margin-bottom:1rem;max-width:66ch}
.cmp-group{margin-bottom:1.8rem}
.cmp-group:last-child{margin-bottom:0}
.cmp-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.cmp-card{
display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.05rem;border-radius:6px;
border:1px solid rgba(245,245,246,.13);background:rgba(245,245,246,.03);
}
.cmp-head{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem}
.cmp-card h4{font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;color:var(--white)}
.cmp-price{font-family:'Poppins',sans-serif;font-weight:700;color:var(--white);white-space:nowrap}
.cmp-card p{font-size:.85rem;line-height:1.6;color:var(--grey);margin:0}
.cmp-row{display:flex;flex-direction:column;gap:.1rem}
.cmp-row span{
font-family:'Poppins',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:#6E6E74;
}
.cmp-choose{
margin-top:auto;align-self:flex-start;background:none;cursor:pointer;
border:1px solid rgba(245,245,246,.28);border-radius:3px;padding:.5rem 1rem;
font-family:'Poppins',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--white);
}
.cmp-choose:hover{background:var(--crimson);border-color:var(--crimson)}
/* Extras that fit during the same install. Presented as a genuine convenience,
not a countdown timer — the saving is the second visit they don't pay for. */
.addons{margin-top:1.3rem;padding:1.3rem 1.4rem;border-radius:6px;
border:1px solid rgba(245,245,246,.14);background:rgba(245,245,246,.03)}
.addons h4{font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;color:var(--white);margin-bottom:.45rem}
.addons-lead{font-size:.87rem;line-height:1.6;color:var(--grey);max-width:64ch;margin-bottom:1.1rem}
.addon-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.addon{
display:flex;gap:.75rem;text-align:left;cursor:pointer;padding:.9rem 1rem;border-radius:5px;
border:1px solid rgba(245,245,246,.16);background:var(--black);font-family:'Inter',sans-serif;
}
.addon:hover{border-color:rgba(228,41,63,.5)}
.addon.on{border-color:var(--crimson);background:rgba(200,16,46,.1)}
.addon-tick{
flex:none;width:18px;height:18px;margin-top:.15rem;border-radius:3px;
border:1px solid rgba(245,245,246,.35);
}
.addon.on .addon-tick{background:var(--crimson);border-color:var(--crimson)}
.addon.on .addon-tick::after{
content:"";display:block;width:4px;height:9px;margin:2px auto 0;
border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.addon-body{display:flex;flex-direction:column;gap:.35rem}
.addon-head{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem}
.addon-head b{font-family:'Poppins',sans-serif;font-weight:600;font-size:.9rem;color:var(--white);margin-right:auto}
.addon-head i{font-family:'Poppins',sans-serif;font-style:normal;font-weight:700;color:var(--white);white-space:nowrap}
.addon-was{font-family:'Poppins',sans-serif;font-weight:500;color:#6E6E74;white-space:nowrap;text-decoration:line-through}
.addon-save{
align-self:flex-start;font-family:'Poppins',sans-serif;font-weight:700;font-size:.66rem;
letter-spacing:.09em;text-transform:uppercase;color:var(--white);
background:var(--crimson);border-radius:2px;padding:.22rem .5rem;
}
.addon-what{font-size:.85rem;line-height:1.55;color:var(--grey)}
.addon-why{font-size:.8rem;line-height:1.5;color:#8A8A90;font-style:italic}
.addon-later{font-size:.78rem;line-height:1.5;color:#6E6E74;border-top:1px solid rgba(245,245,246,.08);padding-top:.45rem}
.addons-total{margin-top:1rem;font-size:.9rem;color:var(--grey)}
.addons-total b{font-family:'Poppins',sans-serif;font-weight:700;color:var(--white)}
.addons-total.saving{
border-left:2px solid var(--crimson);padding:.5rem 0 .5rem .8rem;background:rgba(200,16,46,.07);
border-radius:0 4px 4px 0;
}
/* A car that isn't on the sheet is a conversation, not a dead end. Quiet by
default; steps forward once a search has actually come up empty. */
.notfound{
display:flex;align-items:center;justify-content:space-between;gap:1.1rem;flex-wrap:wrap;
margin-top:1rem;padding:1rem 1.1rem;border-radius:6px;
border:1px solid rgba(245,245,246,.14);background:rgba(245,245,246,.03);
}
.notfound p{margin:0;font-size:.88rem;color:var(--grey);max-width:52ch}
.notfound .qbtn{flex:none;text-decoration:none;background:none;border:1px solid rgba(245,245,246,.3)}
.notfound .qbtn:hover{background:var(--crimson);border-color:var(--crimson)}
.notfound.loud{border:1px dashed rgba(228,41,63,.55);background:rgba(200,16,46,.08)}
.notfound.loud p{color:var(--white)}
.notfound.loud .qbtn{background:var(--crimson);border-color:var(--crimson)}
.notfound.loud .qbtn:hover{background:var(--crimson-deep)}
.qbtn{
font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.1em;
text-transform:uppercase;background:var(--crimson);color:var(--white);border:none;
border-radius:3px;padding:.75rem 1.5rem;cursor:pointer;
}
.qbtn:hover{background:var(--crimson-deep)}
.qbtn.ghost{background:none;border:1px solid rgba(245,245,246,.3)}
.hint{font-size:.8rem;color:#6E6E74;margin-top:.8rem}
.hint b{color:var(--grey);font-weight:500}
.carview{
display:none;margin-top:1.3rem;background:var(--black);border:1px solid rgba(245,245,246,.12);
border-radius:6px;padding:1.2rem 1.4rem;align-items:center;gap:1.3rem;
}
.carview.show{display:flex}
.carview svg{flex:none}
.carview .plate{
font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.1em;
background:#FDD835;color:#111;border-radius:4px;padding:.2rem .7rem;display:inline-block;margin-bottom:.35rem;
}
.carview .cname{font-family:'Poppins',sans-serif;font-weight:600;color:var(--white)}
.carview .csub{font-size:.85rem;color:var(--grey)}
.result{display:none;margin-top:1.3rem;border-radius:6px;padding:1.4rem 1.5rem}
.result.show{display:block}
.result.ok{background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.45)}
.result.warn{background:var(--black);border:1px dashed rgba(228,41,63,.5)}
.result .big{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.7rem;color:var(--white)}
.result .big small{font-size:.9rem;font-weight:500;color:var(--grey)}
.result p{color:var(--grey);font-size:.93rem;margin-top:.5rem;max-width:64ch}
.result p b{color:var(--white);font-weight:500}
/* The running estimate. Sits between steps 2 and 3, outside the numbered flow,
so a customer pricing one thing never meets it — it only appears once there's
something in it, and "+ Add another service" is what fills it. */
.estbox{
margin:0 0 1.2rem;padding:1.4rem 1.5rem;border-radius:6px;
border:1px solid rgba(200,16,46,.45);background:rgba(200,16,46,.06);
}
.estbox h4{font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;color:var(--white);margin-bottom:.6rem}
.brow{
display:flex;align-items:baseline;gap:.9rem;padding:.6rem 0;
border-bottom:1px solid rgba(245,245,246,.09);
}
.brow-name{
margin-right:auto;display:flex;flex-direction:column;gap:.2rem;
font-family:'Poppins',sans-serif;font-weight:600;font-size:.9rem;color:var(--white);
}
.brow-now{
font-family:'Inter',sans-serif;font-weight:400;font-style:italic;font-size:.76rem;color:var(--grey);
}
.brow-sub{font-family:'Inter',sans-serif;font-weight:400;font-size:.82rem;color:var(--grey)}
.brow>b{font-family:'Poppins',sans-serif;font-weight:700;color:var(--white);white-space:nowrap}
.brem{
flex:none;align-self:center;width:26px;height:26px;line-height:1;cursor:pointer;
background:none;border:1px solid rgba(245,245,246,.25);border-radius:3px;
color:var(--grey);font-size:1rem;
}
.brem:hover{border-color:var(--red-bright);color:var(--white)}
.estbox.solo h4{display:none}
.estbox.solo .estbox-foot{margin-top:0}
.estbox-foot{
display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
margin-top:1.1rem;
}
.estbox-foot b{font-family:'Poppins',sans-serif;font-weight:700;color:var(--white)}
.summary{
display:none;background:var(--black);border:1px solid rgba(245,245,246,.14);border-radius:6px;
padding:1.5rem 1.6rem;margin-top:1.3rem;
}
.summary.show{display:block}
.summary table{width:100%;border-collapse:collapse;font-size:.94rem;margin-bottom:1.2rem}
.summary td{padding:.5rem 0;border-bottom:1px solid rgba(245,245,246,.08);color:var(--grey)}
.summary td:last-child{text-align:right;color:var(--white);font-family:'Poppins',sans-serif;font-weight:600}
.summary tr:last-child td{border-bottom:0}
.livenote{
margin-top:2rem;background:var(--panel);border:1px dashed rgba(245,245,246,.25);border-radius:6px;
padding:1.4rem 1.5rem;font-size:.88rem;color:var(--grey);
}
.livenote b{color:var(--white);font-weight:500}
@media(max-width:560px){.carview{flex-direction:column;align-items:flex-start}}
/* ── motion support (GSAP owns the choreography) ── */
/* .js is added by an inline head script only when motion will run; a timeout
failsafe removes it if site.js never initialises. Prevents above-fold flash. */
.js .hero .inner>*,.js .page-hero .wrap>*,.js .quote-hero .wrap>*{visibility:hidden}
.hero .bg,.hero .slashes,.hero .inner{will-change:transform}
/* nav hide-on-scroll-down */
nav{transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .35s var(--ease)}
nav.hide{transform:translateY(-101%)}
/* scroll cue (home hero) */
.scue{
position:absolute;left:50%;bottom:1.1rem;width:22px;height:34px;margin-left:-11px;
border:1.5px solid rgba(245,245,246,.5);border-radius:12px;opacity:0;pointer-events:none;
}
.scue::after{
content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;
border-radius:2px;background:var(--red-bright);
}
@media (prefers-reduced-motion: no-preference){
.scue::after{animation:cuedrop 1.8s ease-in-out infinite}
}
@keyframes cuedrop{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}}
/* brand marquee */
.strip{padding:0;overflow:hidden}
.strip .mqtrack{display:flex;width:max-content}
.strip .mq{flex:none;display:flex;align-items:center;white-space:nowrap;padding:1.15rem 0}
.strip .mq span{margin:0 .8em}
@media (prefers-reduced-motion: no-preference){
.strip .mq{animation:mq 169s linear infinite}
}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* workstrip frames (overflow-hidden so images can zoom inside) */
.workgrid .frame{
overflow:hidden;border-radius:6px;border:1px solid rgba(245,245,246,.1);
}
.workgrid .frame img{
width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border:0;border-radius:0;
transition:transform .8s var(--ease),filter .5s var(--ease);
}
.workgrid .frame:hover img{transform:scale(1.05);filter:saturate(1.08) brightness(1.05)}
/* card cursor highlight + shared vanishing point for tilt */
.cards{perspective:1100px}
a.card.photo{--mx:50%;--my:50%}
a.card.photo::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1;
background:radial-gradient(320px circle at var(--mx) var(--my),rgba(245,245,246,.09),transparent 65%);
transition:opacity .35s var(--ease);
}
a.card.photo:hover::after{opacity:1}
/* button sheen sweep */
.btn{position:relative;overflow:hidden}
.btn::before{
content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
background:linear-gradient(105deg,transparent,rgba(245,245,246,.22),transparent);
transform:skewX(-18deg);transition:none;
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
.btn:hover::before{animation:sheen .8s var(--ease)}
}
@keyframes sheen{from{left:-70%}to{left:130%}}
/* touch press feedback (desktop press handled by pointer effects) */
@media (hover:none){
.btn{transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .12s ease}
.btn:active{transform:scale(.97)}
a.card:active{transform:scale(.985)}
}
/* ============================================================================
Umber Studio credit badge — pasted from umber-studio/snippets/credit-badge.html.
Do not edit: per-site changes go on the as --us-ink / --us-size / --us-accent.
==========================================================================*/
/* ============================================================================
Umber Studio credit badge
Sits in the footer's normal flow. Loads nothing at all: no webfont, no
image, no script from anywhere, no cookie, no beacon. It inherits the host
site's typeface and ink on purpose, so at rest it reads as one more line of
the client's own footer rather than another brand's advert.
Per-site overrides, set inline on the — never by editing this block:
--us-ink the badge's ink (default: the footer's own colour)
--us-accent wet paint + hairline (default: #8F7151, the logo's brown)
--us-size size within its row (default: .72em)
==========================================================================*/
/* Self-defence. The badge is pasted into stylesheets we do not control, so
neutralise what could deform it while still INHERITING host typography.
Deliberately not `all:unset`, and deliberately not applied to the