/* ============================================================
   Empire Custom Paint & Body Repair, concept demo stylesheet
   Shared by every page under /p/empire/.

   Palette comes straight off their sign: black plate, white
   condensed type, one hot red. The cyan is reserved for Lumilor,
   which is a glowing paint. It only ever appears on Lumilor
   surfaces, so it keeps meaning something.
   ============================================================ */

:root{
  --ink:#0a0c0f;
  --ink-2:#12161c;
  --panel:#191f28;
  --line:#262e39;
  --line-lt:#e2e6ec;
  --paper:#ffffff;
  --off:#f3f5f8;
  --steel:#6b7684;
  --steel-lt:#a8b2bf;
  --red:#ee1c25;
  --red-dk:#c0141b;
  --glow:#3fe0ea;
  --glow-dk:#12a6b2;
  --shadow:0 18px 44px rgba(6,10,16,.14);
  --wrap:1200px;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
/* every <img> carries width/height attributes to reserve layout space, so the
   `height:auto` here is load bearing: without it the attribute height wins and
   portrait photos render at their full pixel height. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:'Barlow Condensed','Barlow',system-ui,sans-serif;
  font-weight:700;line-height:1.04;letter-spacing:-.005em;margin:0;
  text-transform:uppercase;
}
h1{font-size:clamp(2.9rem,7.4vw,5.1rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.28rem,2.1vw,1.55rem)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 18px;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--glow);outline-offset:2px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:700;font-size:1.14rem;letter-spacing:.055em;text-transform:uppercase;
  padding:14px 26px;border-radius:var(--r);text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-dk);border-color:var(--red-dk)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:#e8ecf1;border-color:#e8ecf1}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-2);border-color:var(--ink-2)}

.more-link{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.94rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--red);text-decoration:none;
  border-bottom:2px solid rgba(238,28,37,.3);padding-bottom:3px;
}
.more-link::after{content:"\2192";transition:transform .18s}
.more-link:hover{border-bottom-color:var(--red)}
.more-link:hover::after{transform:translateX(4px)}
.more-wrap{margin-top:44px}
.on-dark .more-link,.band-dark .more-link,.band-black .more-link{color:#fff;border-bottom-color:rgba(255,255,255,.32)}
.band-dark .more-link:hover,.band-black .more-link:hover{border-bottom-color:#fff}

/* ---------------- top strip + header ---------------- */
.topstrip{background:var(--red);color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.topstrip .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topstrip a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}

.site-header{background:#000;position:sticky;top:0;z-index:90;border-bottom:3px solid var(--red)}
.site-header .wrap{display:flex;align-items:center;gap:24px;padding-top:12px;padding-bottom:12px}
.brand{display:block;flex:none}
.brand img{width:214px;height:auto}
.mainnav{margin-left:auto;display:flex;gap:22px;align-items:center}
.mainnav a{
  color:#e9edf2;text-decoration:none;font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:600;font-size:1.08rem;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.mainnav a:hover,.mainnav a.here{color:#fff;border-bottom-color:var(--red)}
.header-cta{display:flex;align-items:center;gap:14px;flex:none}
.header-tel{
  color:#fff;text-decoration:none;font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:700;font-size:1.36rem;letter-spacing:.02em;white-space:nowrap;
}
.header-cta .btn{padding:11px 20px;font-size:1.02rem}
.burger{display:none;margin-left:auto;width:46px;height:40px;background:transparent;border:1px solid #333b46;border-radius:var(--r);position:relative;cursor:pointer}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:11px;right:11px;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.burger span{top:19px}
.burger::before{top:12px}
.burger::after{top:26px}
.navscrim{display:none;position:fixed;inset:0;background:rgba(6,9,13,.6);border:0;z-index:88}
.navscrim.on{display:block}

/* Ten nav items, one of them spelled out as "Book an appointment", make this a
   wide header. It sheds width in steps rather than jumping straight to a burger,
   because a hamburger on a 1366 laptop reads as a downgrade. The phone goes
   first: the top strip directly above already carries the same number.

   Every step moved up when PeelClear became the tenth item. The tenth costs
   about 100px, which is more slack than the old steps had: measured against the
   live header, ten items overflowed the viewport at 1020, 1400, 1500 and 1560.
   The widths below are the measured ones, each chosen so the row still clears
   its viewport by at least 18px at every width from 1251 up. Below 1251 it is
   the burger, which also retires the old 1180 step: everything that step set is
   either overridden there or sits on `.header-cta`, which the burger hides. */
@media (max-width:1900px){
  .mainnav{gap:16px}
  .mainnav a{font-size:1.02rem;letter-spacing:.05em}
}
@media (max-width:1650px){
  .mainnav{gap:13px}
  .mainnav a{font-size:.97rem;letter-spacing:.04em}
  .brand img{width:200px}
  .header-tel{font-size:1.18rem}
}
@media (max-width:1500px){
  .header-tel{display:none}
}
@media (max-width:1250px){
  .burger{display:block}
  .header-cta{display:none}
  .brand img{width:176px}
  .mainnav{
    position:fixed;top:0;right:-100%;width:min(320px,86vw);height:100vh;background:#000;
    flex-direction:column;align-items:flex-start;gap:0;padding:88px 26px 30px;
    z-index:89;transition:right .24s ease;overflow-y:auto;border-left:3px solid var(--red);
  }
  .mainnav.open{right:0}
  .mainnav a{width:100%;padding:15px 0;border-bottom:1px solid #1d242e;font-size:1.2rem}
  .mainnav a:hover,.mainnav a.here{border-bottom-color:#1d242e;color:var(--red)}
}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.05)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(6,8,11,.94) 0%,rgba(6,8,11,.86) 42%,rgba(6,8,11,.44) 74%,rgba(6,8,11,.6) 100%);
}
.hero-inner{padding:104px 22px 96px;max-width:830px}
.hero h1{margin:16px 0 20px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{font-size:1.24rem;color:#d3dae2;max-width:60ch;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.kicker{
  display:inline-flex;align-items:center;gap:11px;background:rgba(238,28,37,.14);
  border:1px solid rgba(238,28,37,.45);border-radius:999px;padding:8px 18px;
  font-weight:700;font-size:.83rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--red);display:block;flex:none}
.hero-sub{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-sub span{
  font-size:.83rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#c3ccd6;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:7px 13px;
}
.hero-slim .hero-inner{padding:74px 22px 64px;max-width:900px}
.hero-slim h1{font-size:clamp(2.4rem,5.6vw,4rem)}
.hero-slim p{font-size:1.14rem;margin-bottom:0}

/* ---------------- proof strip ---------------- */
.proof{background:var(--ink-2);color:#fff;border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.proof-item{background:var(--ink-2);padding:30px 24px}
.proof-item b{
  display:block;font-family:'Barlow Condensed','Barlow',sans-serif;font-size:2.5rem;
  font-weight:700;line-height:1;color:var(--red);letter-spacing:.01em;
}
.proof-item span{display:block;margin-top:9px;font-size:.95rem;color:var(--steel-lt);line-height:1.45}
@media (max-width:900px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.proof-grid{grid-template-columns:1fr}}

/* ---------------- bands ---------------- */
.band{padding:96px 0}
.band-off{background:var(--off)}
.band-dark{background:var(--ink-2);color:#fff}
.band-black{background:#05070a;color:#fff}
.band-red{background:var(--red);color:#fff}
.band-dark h2,.band-black h2,.band-red h2{color:#fff}
.band-dark .lede,.band-black .lede{color:var(--steel-lt)}
.band-red .lede{color:rgba(255,255,255,.9)}
.eyebrow{
  font-size:.83rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px;
}
.band-dark .eyebrow,.band-black .eyebrow{color:var(--red)}
.band-red .eyebrow{color:rgba(255,255,255,.8)}
.lede{font-size:1.16rem;color:var(--steel);max-width:66ch;margin-top:20px}
.band h2 + .lede{margin-top:20px}
@media (max-width:760px){.band{padding:66px 0}}

/* ---------------- service cards ---------------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.svc{background:#fff;border:1px solid var(--line-lt);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.svc:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.band-dark .svc,.band-black .svc{background:var(--panel);border-color:var(--line)}
.svc-img{aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.svc:hover .svc-img img{transform:scale(1.045)}
.svc-body{padding:26px 24px 28px;flex:1}
.svc-body h3{margin-bottom:11px}
.svc-body p{font-size:.99rem;color:var(--steel);margin:0}
.band-dark .svc-body p,.band-black .svc-body p{color:var(--steel-lt)}
@media (max-width:1024px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.svc-grid{grid-template-columns:1fr}}
/* Cards that end in a button: the body becomes a column and the button is
   pushed to the bottom, so a short card and a long one still line their
   buttons up across the row. Opt-in, because most .svc cards are text only. */
.svc-body-cta{display:flex;flex-direction:column}
.svc-body .svc-cta{margin:auto 0 0;padding-top:20px}

/* ---------------- plain feature list ---------------- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:52px;background:var(--line-lt)}
.feat-item{background:#fff;padding:32px 26px}
.band-dark .feat,.band-black .feat{background:var(--line)}
.band-dark .feat-item,.band-black .feat-item{background:var(--ink-2)}
.band-black .feat-item{background:#05070a}
.feat-item h3{margin-bottom:10px;font-size:1.28rem}
.feat-item p{margin:0;font-size:.98rem;color:var(--steel)}
.band-dark .feat-item p,.band-black .feat-item p{color:var(--steel-lt)}
.feat-item .n{
  display:block;font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:.16em;color:var(--red);margin-bottom:12px;
}
@media (max-width:900px){.feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat{grid-template-columns:1fr}}

/* ---------------- split blocks ---------------- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
/* portrait shots would otherwise run a long way past the copy beside them */
.split-photo img{width:100%;max-height:660px;object-fit:cover;border-radius:var(--r)}
.split.flip .split-copy{order:2}
@media (max-width:940px){
  .split{grid-template-columns:1fr;gap:38px}
  .split.flip .split-copy{order:0}
}

/* two-up photo compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.compare figure{margin:0}
/* the two halves of an off/on pair are different shapes; force one frame so
   the reader compares the finish rather than the crop */
.compare img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.compare figcaption{
  margin-top:11px;font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--steel);
}
.band-dark .compare figcaption,.band-black .compare figcaption{color:var(--steel-lt)}
/* these have to out-specify the .band-dark / .band-black figcaption colours above */
.compare .tag,.band-dark .compare .tag,.band-black .compare .tag{color:var(--red)}
.compare .tag-glow,.band-dark .compare .tag-glow,.band-black .compare .tag-glow{color:var(--glow)}

/* ---------------- ticks ---------------- */
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px;font-size:1.02rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.44em;width:16px;height:9px;
  border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg);
}
.ticks.two{grid-template-columns:1fr 1fr;gap:12px 32px}
@media (max-width:680px){.ticks.two{grid-template-columns:1fr}}

/* ---------------- badges + chips ---------------- */
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.badge{
  border:1px solid var(--line-lt);border-radius:var(--r);padding:9px 15px;
  font-size:.83rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);
  background:#fff;
}
.band-dark .badge,.band-black .badge{background:var(--panel);border-color:var(--line);color:var(--steel-lt)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chip{
  background:#fff;border:1px solid var(--line-lt);border-radius:999px;padding:8px 17px;
  font-size:.92rem;font-weight:600;color:var(--ink-2);
}
.band-dark .chip,.band-black .chip{background:var(--panel);border-color:var(--line);color:#e6eaef}

/* ---------------- photo wall (cycling, home) ---------------- */
.wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:216px;gap:12px;margin-top:52px}
.wall-tile{
  position:relative;overflow:hidden;border:0;padding:0;background:var(--ink);cursor:zoom-in;
  border-radius:var(--r);
}
.wall-tile:first-child{grid-column:span 2;grid-row:span 2}
.wall-tile .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .85s ease}
.wall-tile .layer.on{opacity:1}
@media (prefers-reduced-motion:reduce){.wall-tile .layer{transition:none}}
.wall-cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;text-align:left;
  font-size:.82rem;font-weight:600;color:#fff;line-height:1.3;
  background:linear-gradient(to top,rgba(5,8,12,.86),rgba(5,8,12,0));
}
@media (max-width:760px){
  .wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .wall-tile:first-child{grid-column:span 2;grid-row:span 2}
}

/* ---------------- static gallery ---------------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.gal-tile{position:relative;border:0;padding:0;background:var(--ink);cursor:zoom-in;overflow:hidden;border-radius:var(--r);aspect-ratio:1/1}
.gal-tile img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.gal-tile:hover img{transform:scale(1.05)}
.gal-tile .gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 13px 10px;text-align:left;
  font-size:.79rem;font-weight:600;color:#fff;line-height:1.3;
  background:linear-gradient(to top,rgba(5,8,12,.88),rgba(5,8,12,0));
}
.gal-head{display:flex;align-items:baseline;gap:16px;margin-top:62px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.gal-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.gal-head span{font-size:.86rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
@media (max-width:900px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ---------------- lightbox ---------------- */
.lb{position:fixed;inset:0;background:rgba(4,6,9,.95);display:none;align-items:center;justify-content:center;z-index:150;padding:26px}
.lb.on{display:flex;flex-direction:column}
.lb img{max-width:min(1200px,94vw);max-height:82vh;object-fit:contain;border-radius:var(--r)}
.lb-cap{color:#dde3ea;margin-top:16px;font-size:.96rem;text-align:center;max-width:64ch}
.lb-close{
  position:absolute;top:16px;right:20px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;
}
.lb-close:hover{background:rgba(255,255,255,.22)}

/* ---------------- lumilor: the glow ---------------- */
.glow-wrap{position:relative}
.glow-note{
  display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(63,224,234,.4);
  background:rgba(63,224,234,.09);border-radius:999px;padding:8px 18px;color:var(--glow);
  font-size:.83rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.glow-note i{width:8px;height:8px;border-radius:50%;background:var(--glow);display:block;flex:none;box-shadow:0 0 10px var(--glow)}
.band-black .btn-primary{background:var(--glow);color:#04191c;border-color:var(--glow)}
.band-black .btn-primary:hover{background:var(--glow-dk);border-color:var(--glow-dk);color:#fff}
.band-black .eyebrow{color:var(--glow)}
.band-black .ticks li::before{border-color:var(--glow)}
.band-black .feat-item .n{color:var(--glow)}
.band-black .more-link{color:var(--glow);border-bottom-color:rgba(63,224,234,.35)}

/* ---------------- process steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:52px;background:rgba(255,255,255,.14)}
.steps .step{background:var(--red);padding:32px 24px;counter-increment:st}
.steps .step h3{margin-bottom:11px;color:#fff}
.steps .step p{margin:0;font-size:.98rem;color:rgba(255,255,255,.92)}
.steps .step::before{
  content:"0" counter(st);display:block;font-family:'Barlow Condensed','Barlow',sans-serif;
  font-size:2.2rem;font-weight:700;line-height:1;color:rgba(255,255,255,.45);margin-bottom:12px;
}
.steps{counter-reset:st}
.steps.two{grid-template-columns:1fr 1fr}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps.two{grid-template-columns:1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------------- reviews ---------------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.rev-card{background:#fff;border:1px solid var(--line-lt);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column}
.band-dark .rev-card,.band-black .rev-card{background:var(--panel);border-color:var(--line)}
.rev-card .stars{color:#f5a623;letter-spacing:.14em;font-size:1.02rem}
.rev-card p{margin:14px 0 20px;font-size:1.01rem;flex:1}
.rev-meta{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line-lt);padding-top:16px}
.band-dark .rev-meta,.band-black .rev-meta{border-top-color:var(--line)}
.rev-av{
  width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;letter-spacing:.03em;
}
.rev-meta b{display:block;font-size:.99rem}
.rev-meta span{display:block;font-size:.83rem;color:var(--steel)}
.band-dark .rev-meta span,.band-black .rev-meta span{color:var(--steel-lt)}
@media (max-width:1000px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.rev-grid{grid-template-columns:1fr}}

/* ---------------- people ---------------- */
.people{display:grid;grid-template-columns:1fr .88fr;gap:60px;align-items:start}
.person{border-top:1px solid var(--line-lt);padding-top:20px;margin-top:24px}
.band-dark .person,.band-black .person{border-top-color:var(--line)}
.person h3{margin-bottom:8px}
.person p{margin:0;color:var(--steel)}
.band-dark .person p{color:var(--steel-lt)}
.people-photo img{width:100%;border-radius:var(--r)}
@media (max-width:940px){.people{grid-template-columns:1fr;gap:38px}}

/* ---------------- area + map ---------------- */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.mapbox{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-lt);background:var(--off);aspect-ratio:4/3}
.band-dark .mapbox,.band-black .mapbox{border-color:var(--line)}
.mapbox iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:940px){.area-grid{grid-template-columns:1fr;gap:34px}}

/* ---------------- contact ---------------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
@media (max-width:940px){.contact-grid{grid-template-columns:1fr}}
.form{background:#fff;border:1px solid var(--line-lt);border-radius:var(--r);padding:34px 32px 36px}
.band-dark .form,.band-black .form{background:var(--panel);border-color:var(--line)}
.form h3{margin-bottom:8px}
.hint{font-size:.95rem;color:var(--steel);margin-bottom:24px}
.band-dark .hint,.band-black .hint{color:var(--steel-lt)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.band-dark .field label,.band-black .field label{color:var(--steel-lt)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink-2);background:#fff;
  border:1px solid #c9d1da;border-radius:var(--r);padding:12px 14px;
}
.band-dark .field input,.band-dark .field select,.band-dark .field textarea,
.band-black .field input,.band-black .field select,.band-black .field textarea{
  background:var(--ink-2);border-color:var(--line);color:#fff;
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(238,28,37,.16)}
.err{display:none;color:var(--red);font-size:.86rem;margin-top:6px;font-weight:600}
.field.bad input,.field.bad select{border-color:var(--red)}
.field.bad .err{display:block}
.form-ok{display:none;background:#0f2f1c;color:#c9f0d8;border-left:4px solid #35c07a;padding:15px 18px;border-radius:var(--r);margin-bottom:22px;font-size:.97rem}
.form-ok.show{display:block}

.info-card{background:#fff;border:1px solid var(--line-lt);border-radius:var(--r);padding:28px 26px;margin-bottom:22px}
.band-dark .info-card,.band-black .info-card{background:var(--panel);border-color:var(--line)}
.info-card h3{margin-bottom:16px}
.info-line{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line-lt);font-size:.97rem}
.band-dark .info-line,.band-black .info-line{border-top-color:var(--line)}
.info-line .k{font-size:.79rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding-top:3px}
.info-line a{color:var(--red);text-decoration:none;font-weight:600}
.info-line a:hover{text-decoration:underline}
@media (max-width:420px){.info-line{grid-template-columns:1fr;gap:2px}}

.open-pill{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:7px 16px;
  font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;
}
.open-pill i{width:9px;height:9px;border-radius:50%;display:block;flex:none}
.open-pill.open{background:rgba(53,192,122,.14);color:#1f8a51;border:1px solid rgba(53,192,122,.4)}
.open-pill.open i{background:#35c07a}
.open-pill.shut{background:rgba(238,28,37,.1);color:var(--red-dk);border:1px solid rgba(238,28,37,.34)}
.open-pill.shut i{background:var(--red)}
.band-dark .open-pill.open,.band-black .open-pill.open{color:#6fe3a6}
.band-dark .open-pill.shut,.band-black .open-pill.shut{color:#ff7a80}

.hours-list{list-style:none;padding:0;margin:0}
.hours-list li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line-lt);font-size:.97rem}
.band-dark .hours-list li,.band-black .hours-list li{border-top-color:var(--line)}
.hours-list li:first-child{border-top:0}
.hours-list li.today{font-weight:700}
.hours-list li.today .d::after{content:" · today";color:var(--red);font-weight:700}

/* ---------------- footer ---------------- */
.site-footer{background:#000;color:#c3ccd6;padding:70px 0 30px;border-top:3px solid var(--red)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.foot-logo img{width:220px;height:auto;margin-bottom:20px}
.foot-about{font-size:.97rem;max-width:42ch;color:#98a3af}
.foot-contact{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:13px}
.foot-contact li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem}
.foot-contact svg{width:19px;height:19px;flex:none;margin-top:3px;fill:none;stroke:var(--red);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.foot-contact a{color:#e4e9ee;text-decoration:none}
.foot-contact a:hover{color:#fff;text-decoration:underline}
.foot-tel{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:.02em}
.site-footer h3{font-size:1.1rem;letter-spacing:.09em;color:#fff;margin-bottom:18px}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site-footer ul a{color:#98a3af;text-decoration:none;font-size:.96rem}
.site-footer ul a:hover{color:#fff}
.foot-hours li{display:flex;justify-content:space-between;gap:12px;font-size:.94rem;color:#98a3af}
.foot-hours li.today{color:#fff;font-weight:700}
.foot-note{margin:18px 0 0;font-size:.87rem;color:#78838f}
.foot-social{display:flex;gap:12px;margin-top:22px}
.foot-social a{
  display:inline-flex;align-items:center;gap:8px;border:1px solid #232a34;border-radius:var(--r);
  padding:8px 14px;color:#c3ccd6;text-decoration:none;font-size:.88rem;font-weight:600;
}
.foot-social a:hover{border-color:var(--red);color:#fff}
.foot-social svg{width:17px;height:17px;fill:currentColor}
.foot-bottom{
  border-top:1px solid #1a2029;margin-top:52px;padding-top:24px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.85rem;color:#78838f;
}
.foot-credit a{color:#c3ccd6;text-decoration:none;border-bottom:1px solid #333b46}
.foot-credit a:hover{color:#fff;border-bottom-color:var(--red)}
.foot-credit strong{color:#fff}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* ---------------- sticky mobile call bar ---------------- */
.callbar{display:none}
@media (max-width:980px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;
    border-top:1px solid #1a2029;
  }
  .callbar a{
    background:#000;color:#fff;text-decoration:none;text-align:center;padding:15px 8px;
    font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;font-size:1.1rem;
    letter-spacing:.08em;text-transform:uppercase;
  }
  .callbar a:last-child{background:var(--red)}
  body{padding-bottom:56px}
}

/* ---------------- misc ---------------- */
.note{
  border-left:4px solid var(--red);background:var(--off);padding:20px 24px;border-radius:0 var(--r) var(--r) 0;
  font-size:1rem;margin-top:32px;
}
.band-dark .note,.band-black .note{background:var(--panel);color:var(--steel-lt)}
.note p:last-child{margin:0}
.pricebox{background:var(--ink);color:#fff;border-radius:var(--r);padding:32px 30px}
.price-row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid var(--line)}
.price-row:first-of-type{border-top:0}
.price-row b{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1.28rem;color:var(--red)}
.price-note{margin-top:18px;font-size:.87rem;color:var(--steel-lt)}
.crumb{font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#98a3af;margin-bottom:0}
.crumb a{color:#98a3af;text-decoration:none;border-bottom:1px solid #454e59}
.crumb a:hover{color:#fff}

/* ---------------- FAQ ---------------- */
.faq{margin-top:48px;border-top:1px solid var(--line-lt)}
.faq-item{border-bottom:1px solid var(--line-lt)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 48px 22px 0;position:relative;
  font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1.3rem;font-weight:700;
  line-height:1.25;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:9px;top:50%;width:11px;height:11px;margin-top:-8px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq-item summary:hover{color:var(--red)}
.faq-item summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.faq-a{padding:0 48px 24px 0}
.faq-a p{margin:0;color:var(--steel);font-size:1rem}

/* ---------------- gallery filter (injected by site.js) ----------------
   `hidden` alone loses to .gal's display:grid and .gal-head's display:flex,
   so the filter needs an explicit override to actually hide a group. */
.gal-filter{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px}
.gal-filter button{
  font:inherit;font-size:.85rem;font-weight:600;letter-spacing:.04em;
  padding:9px 18px;border:1px solid var(--line-lt);background:#fff;color:var(--steel);
  border-radius:var(--r);cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.gal-filter button:hover{border-color:var(--ink);color:var(--ink)}
.gal-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gal-filter button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.gal-head[hidden],.gal[hidden]{display:none}

/* ---------------- estimate booking ----------------
   Replaces the Acuity iframe (#695) with the shop's own picker. Dave's rules,
   from his 2026-08-24 email: estimates only, so no price and no duration is
   shown anywhere; two vehicles per slot; estimate hours are 9 to 3, which is
   narrower than the 9 to 4 the shop itself keeps.

   Laid out as three numbered steps that stay on one page. A wizard that hides
   the earlier steps would cost a tap every time somebody changes their mind
   about the service, and changing your mind is the normal case here.
--------------------------------------------------- */
.booker{margin-top:26px;display:grid;grid-template-columns:1fr .82fr;gap:34px;align-items:start}
@media (max-width:940px){.booker{grid-template-columns:1fr;gap:26px}}

.bk-step{background:#fff;border:1px solid var(--line-lt);border-radius:var(--r);padding:26px 24px;margin-bottom:18px}
.bk-step > h3{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.bk-step > h3 .n{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;
  font-size:.98rem;display:inline-flex;align-items:center;justify-content:center;
}
.bk-step .bk-help{font-size:.93rem;color:var(--steel);margin:0 0 18px}
.bk-step[data-locked="true"]{opacity:.5}
.bk-step[data-locked="true"] button:not(.bk-clear){pointer-events:none}

/* service chips, and the day and time buttons, share one look */
.bk-opts{display:flex;flex-wrap:wrap;gap:9px}
.bk-opt{
  font:inherit;font-size:.9rem;font-weight:600;padding:10px 16px;cursor:pointer;
  border:1px solid var(--line-lt);background:#fff;color:var(--ink-2);border-radius:var(--r);
  transition:background .18s,border-color .18s,color .18s;
}
.bk-opt:hover{border-color:var(--ink)}
.bk-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.bk-opt:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* calendar */
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.bk-cal-head strong{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase}
.bk-nav{
  font:inherit;width:34px;height:34px;line-height:1;cursor:pointer;border-radius:var(--r);
  border:1px solid var(--line-lt);background:#fff;color:var(--ink-2);
}
.bk-nav:hover:not(:disabled){border-color:var(--ink)}
.bk-nav:disabled{opacity:.35;cursor:default}
.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.bk-dow{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);text-align:center;padding-bottom:6px}
.bk-day{
  font:inherit;font-size:.95rem;font-weight:600;aspect-ratio:1;cursor:pointer;
  border:1px solid var(--line-lt);background:#fff;color:var(--ink-2);border-radius:var(--r);
}
.bk-day:hover:not(:disabled){border-color:var(--ink)}
.bk-day:disabled{background:var(--off);color:var(--steel-lt);border-color:transparent;cursor:default}
.bk-day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.bk-day.empty{border:0;background:none;cursor:default}
.bk-day:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* time slots carry how many of the two openings are left, never a duration */
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:9px}
.bk-slot{
  font:inherit;cursor:pointer;padding:11px 8px;text-align:center;border-radius:var(--r);
  border:1px solid var(--line-lt);background:#fff;color:var(--ink-2);
}
.bk-slot .t{display:block;font-weight:700;font-size:1rem}
.bk-slot .left{display:block;font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);margin-top:3px}
.bk-slot:hover:not(:disabled){border-color:var(--ink)}
.bk-slot:disabled{background:var(--off);color:var(--steel-lt);border-color:transparent;cursor:default}
.bk-slot:disabled .left{color:var(--steel-lt)}
.bk-slot[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.bk-slot[aria-pressed="true"] .left{color:rgba(255,255,255,.72)}
.bk-slot:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* running summary, sticky beside the steps on a wide screen */
.bk-summary{background:var(--ink);color:#e4e9ee;border-radius:var(--r);padding:28px 26px;position:sticky;top:98px}
@media (max-width:940px){.bk-summary{position:static}}
.bk-summary h3{color:#fff;margin-bottom:16px}
.bk-line{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid #232a34;font-size:.95rem}
.bk-line:first-of-type{border-top:0}
.bk-line .k{color:var(--steel-lt);flex:none}
.bk-line .v{text-align:right;font-weight:600;color:#fff}
.bk-line .v.none{color:var(--steel-lt);font-weight:400}
.bk-summary .bk-note{font-size:.86rem;color:var(--steel-lt);margin:16px 0 0}
.bk-clear{
  font:inherit;font-size:.84rem;font-weight:600;margin-top:14px;cursor:pointer;
  background:none;border:0;padding:0;color:var(--steel-lt);text-decoration:underline;
}
.bk-clear:hover{color:#fff}

.bk-form[hidden]{display:none}
.bk-form .field label{color:var(--steel)}
.bk-done{
  display:none;background:#0f2f1c;color:#c9f0d8;border-left:4px solid #35c07a;
  padding:22px 24px;border-radius:var(--r);margin-top:18px;
}
.bk-done.show{display:block}
.bk-done h3{color:#eafff2;margin-bottom:10px}
.bk-done p{margin:0 0 .7em;font-size:.97rem}
.bk-done p:last-child{margin-bottom:0}

/* ---------------- footer email signup ----------------
   The one thing his Squarespace site captures that the demo did not. Sits
   above the footer columns on every page rather than on one marketing page,
   because a shop's list grows from people who came for something else.
------------------------------------------------------- */
.foot-signup{
  display:grid;grid-template-columns:1fr .9fr;gap:34px;align-items:center;
  border-bottom:1px solid #1a2029;padding-bottom:38px;margin-bottom:44px;
}
@media (max-width:820px){.foot-signup{grid-template-columns:1fr;gap:20px}}
.foot-signup h3{margin-bottom:8px}
.foot-signup p{margin:0;font-size:.95rem;color:#98a3af;max-width:52ch}
.signup-form{display:flex;gap:10px;flex-wrap:wrap}
.signup-form input{
  flex:1 1 220px;min-width:0;font:inherit;font-size:.98rem;padding:13px 15px;color:#fff;
  background:#12161c;border:1px solid #232a34;border-radius:var(--r);
}
.signup-form input::placeholder{color:#6b7684}
.signup-form input:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(238,28,37,.2)}
.signup-form button{flex:none}
.signup-msg{display:none;margin:12px 0 0;font-size:.9rem;color:#8fe0b0}
.signup-msg.show{display:block}
.signup-msg.bad{color:#ff8f95}

/* ---------------- meet the crew ----------------
   Dave sent the roster on 2026-08-24 but the bios and the professional photos
   are still being put together, so these are name-and-role cards with a slot
   the portrait drops into later. No stock faces and no invented biography:
   this shop's credibility is the whole pitch, and a stranger's headshot on
   Dakota's card would undo it.
------------------------------------------------- */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin-top:52px;background:var(--line)}
.crew-card{background:var(--ink-2);padding:30px 26px}
.crew-card h3{margin-bottom:4px;color:#fff}
.crew-role{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin-bottom:13px;
}
.crew-card p{margin:0;font-size:.97rem;color:var(--steel-lt)}
.crew-card.pup{background:#05070a}
@media (max-width:600px){.crew{grid-template-columns:1fr}}

/* ---- live-site additions (ported off the demo 2026-08-25) ---- */
/* honeypot fields: parked off screen, never display:none, because some bots
   skip fields the layout engine dropped */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* the booking form's failure line: bookings can genuinely be refused now
   (a slot filling while the customer types), so the refusal needs a home */
.bk-err{color:var(--red);font-weight:600;margin:0 0 14px}
/* manage page: the short day strip reuses the calendar button look */
.mg-days{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.mg-days .bk-day{min-width:110px}