/* ==========================================================================
   RAFA'S AUTO REPAIR — core stylesheet
   Palette: charcoal / warm off-white / neutral grays / one controlled red
   ========================================================================== */

:root{
  --ink:#0B0B0C;
  --ink-2:#141416;
  --ink-3:#1C1C1F;
  --ink-line:rgba(245,242,237,.14);

  --paper:#F5F2ED;
  --paper-2:#EAE5DC;
  --paper-line:rgba(11,11,12,.12);

  --gray:#8B8B92;
  --gray-2:#5A5A61;

  --accent:#D7262C;
  --accent-hi:#F03B41;
  --accent-soft:rgba(215,38,44,.10);

  --star:#E8A33D;

  --max:1360px;
  --pad:clamp(20px,5vw,72px);

  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.85s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-display);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,11vw,160px);position:relative}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.paper{background:var(--paper);color:var(--ink)}
.paper .eyebrow{color:var(--gray-2)}
.rule{height:1px;background:var(--ink-line);border:0;margin:0}
.paper .rule{background:var(--paper-line)}

/* ---------- type ---------- */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);margin:0 0 22px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:.94;text-wrap:balance}
.d1{font-size:clamp(46px,8.4vw,120px);font-weight:800;letter-spacing:-.045em}
.d2{font-size:clamp(36px,5.6vw,82px);font-weight:800;letter-spacing:-.042em}
.d3{font-size:clamp(28px,3.4vw,50px);font-weight:700;letter-spacing:-.035em}
.d4{font-size:clamp(21px,1.9vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.up{text-transform:uppercase}
.serif{font-family:var(--f-serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.accent{color:var(--accent)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.62;color:rgba(245,242,237,.72);max-width:56ch;margin:0}
.paper .lede{color:var(--gray-2)}
.small{font-size:14px;line-height:1.55;color:var(--gray)}
.paper .small{color:var(--gray-2)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--accent);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;background:var(--bg);color:var(--fg);
  font-size:13.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border-radius:2px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--accent-hi);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.btn--ghost{--bg:transparent;--fg:var(--paper);border:1px solid rgba(245,242,237,.32)}
.btn--ghost:hover{--bg:var(--paper);--fg:var(--ink);border-color:var(--paper)}
.paper .btn--ghost{--fg:var(--ink);border-color:rgba(11,11,12,.28)}
.paper .btn--ghost:hover{--bg:var(--ink);--fg:var(--paper);border-color:var(--ink)}
.btn--lg{padding:20px 38px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.txtlink{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding-bottom:5px;
  border-bottom:1px solid currentColor;transition:gap .3s var(--ease),color .3s var(--ease);
}
.txtlink:hover{gap:15px;color:var(--accent)}
.txtlink .ar{transition:transform .3s var(--ease)}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:80;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(11,11,12,.9);backdrop-filter:blur(14px);border-bottom-color:var(--ink-line)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
/* Wordmark: the lettering from the shop's own logo */
.brand{display:flex;flex:none;line-height:0}
.brand__logo{display:block;height:48px;width:auto}
@media (max-width:620px){.brand__logo{height:42px}}
.brand__t{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(245,242,237,.7);transition:color .25s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--paper)}
.hdr__cta{display:flex;align-items:center;gap:10px}
.hdr__tel{font-size:13px;font-weight:700;letter-spacing:.06em;padding:9px 0;border-bottom:1px solid var(--accent)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:22px;height:1.5px;background:var(--paper);position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--paper);transition:.3s var(--ease)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:79;background:var(--ink);padding:100px var(--pad) 40px;display:none;flex-direction:column;justify-content:space-between}
.mnav.is-open{display:flex}
.mnav a.mnav__l{display:block;font-size:clamp(30px,8vw,46px);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;padding:11px 0;border-bottom:1px solid var(--ink-line)}
.mnav__foot{display:grid;gap:10px;padding-top:26px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:120px}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:grayscale(.55) contrast(1.08) brightness(.62) saturate(.7);transform:scale(1.06)}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,var(--ink) 2%,rgba(11,11,12,.82) 34%,rgba(11,11,12,.34) 62%,rgba(11,11,12,.72) 100%),
  radial-gradient(120% 80% at 20% 80%,rgba(11,11,12,.6),transparent 60%)}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(30px,5vw,58px)}
.hero__h{font-size:clamp(44px,9.2vw,142px);font-weight:800;letter-spacing:-.05em;line-height:.87;text-transform:uppercase;margin:0 0 26px}
.hero__h .ln{display:block;overflow:hidden}
.hero__h .ln>span{display:block}
.hero__sub{max-width:50ch;font-size:clamp(16px,1.3vw,19.5px);line-height:1.6;color:rgba(245,242,237,.8);margin:0 0 34px}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(34px,5vw,56px)}

.proof{border-top:1px solid var(--ink-line);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-line)}
.proof__i{background:var(--ink);padding:24px 24px 24px 0}
.proof__i:not(:first-child){padding-left:24px}
.proof__k{display:flex;align-items:baseline;gap:8px;font-size:clamp(26px,2.8vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1}
.proof__v{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-top:9px}
.stars{display:inline-flex;gap:2px;color:var(--star);font-size:15px;letter-spacing:.06em}

.scrollcue{position:absolute;right:var(--pad);bottom:clamp(30px,5vw,58px);z-index:3;display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.scrollcue i{display:block;width:1px;height:44px;background:linear-gradient(var(--accent),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- statement ---------- */
.stmt__h{font-size:clamp(32px,6.4vw,96px);font-weight:800;letter-spacing:-.045em;line-height:.95;text-transform:uppercase;max-width:19ch}
.stmt__h .serif{text-transform:none;font-size:1.03em}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:start}
.two--mid{align-items:center}

/* ---------- honesty counter (signature #1) ---------- */
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--paper);border-top:1px solid var(--paper-line);border-left:1px solid var(--paper-line)}
.tally__i{padding:30px 22px;border-right:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line)}
.tally__n{font-size:clamp(38px,4.6vw,66px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.tally__n .x{color:var(--accent);font-size:.5em;vertical-align:.42em;margin-left:2px}
.tally__l{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2);margin-top:10px}

/* ---------- services editorial list (signature #2) ---------- */
.svc{display:grid;grid-template-columns:1fr minmax(300px,.62fr);gap:clamp(24px,4vw,64px);align-items:start}
.svc__list{border-top:1px solid var(--ink-line)}
.svc__row{display:flex;align-items:center;gap:20px;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--ink-line);position:relative;transition:padding-left .45s var(--ease)}
.svc__row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .5s var(--ease)}
.svc__row:hover,.svc__row:focus-within{padding-left:16px}
.svc__row:hover::after,.svc__row:focus-within::after{width:100%}
.svc__num{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--gray);flex:none;width:34px}
.svc__nm{font-size:clamp(22px,2.9vw,42px);font-weight:700;letter-spacing:-.035em;text-transform:uppercase;line-height:1;transition:color .35s var(--ease)}
.svc__row:hover .svc__nm{color:var(--accent)}
.svc__d{margin-left:auto;font-size:13.5px;color:var(--gray);text-align:right;max-width:30ch;display:none}
.svc__ar{margin-left:auto;flex:none;opacity:.35;transition:opacity .3s,transform .3s var(--ease)}
.svc__row:hover .svc__ar{opacity:1;transform:translateX(5px)}
.svc__stage{position:sticky;top:120px;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);border:1px solid var(--ink-line)}
.svc__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .6s var(--ease),transform 1.1s var(--ease);filter:grayscale(.5) contrast(1.06) brightness(.78)}
.svc__stage img.on{opacity:1;transform:scale(1)}
.svc__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;background:linear-gradient(transparent,rgba(11,11,12,.9));font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,242,237,.82)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-line);border-top:1px solid var(--ink-line)}
.paper .steps{background:var(--paper-line);border-top-color:var(--paper-line)}
.step{background:var(--ink);padding:32px 26px 40px}
.paper .step{background:var(--paper)}
.step__n{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--accent);margin-bottom:22px}
.step__h{font-size:clamp(19px,1.7vw,25px);font-weight:700;letter-spacing:-.025em;text-transform:uppercase;margin-bottom:11px}
.step__p{font-size:14.5px;line-height:1.6;color:var(--gray)}
.paper .step__p{color:var(--gray-2)}

/* ---------- reviews ---------- */
.rev__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:44px}
.score{display:flex;align-items:flex-end;gap:20px}
.score__n{font-size:clamp(64px,10vw,140px);font-weight:800;letter-spacing:-.06em;line-height:.8}
.score__m{padding-bottom:8px}
.score__s{font-size:19px;color:var(--star);letter-spacing:.1em;display:block;margin-bottom:7px}
.score__c{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.chip{
  padding:10px 17px;border:1px solid var(--paper-line);border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-2);transition:.28s var(--ease);
}
.paper .chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip__n{opacity:.5;margin-left:6px;font-weight:500}

.wall{columns:3;column-gap:20px}
.card{
  break-inside:avoid;margin-bottom:20px;background:var(--paper);border:1px solid var(--paper-line);
  padding:26px 26px 24px;display:block;
}
.card--dark{background:var(--ink-2);border-color:var(--ink-line)}
.card__s{color:var(--star);font-size:13.5px;letter-spacing:.09em;margin-bottom:14px}
.card__q{font-size:15.5px;line-height:1.62;color:var(--ink);margin:0 0 20px}
.card--dark .card__q{color:rgba(245,242,237,.9)}
.card__q .hl{background:linear-gradient(transparent 62%,var(--accent-soft) 62%);font-weight:600}
.card__m{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--paper-line);padding-top:14px}
.card--dark .card__m{border-top-color:var(--ink-line)}
.card__nm{font-size:13px;font-weight:700;letter-spacing:-.01em}
.card__dt{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gray)}
.card__tag{display:inline-block;margin-bottom:14px;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.card--lg .card__q{font-size:clamp(19px,2vw,27px);line-height:1.35;letter-spacing:-.02em;font-weight:500}
.card--min{padding:20px 22px}
.card--min .card__q{font-size:14.5px;margin-bottom:14px}

.gsrc{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gray)}
.gsrc b{color:var(--accent);font-weight:700}

/* ---------- traveler band ---------- */
.band{position:relative;overflow:hidden;background:var(--ink-2)}
.band__bg{position:absolute;inset:0;opacity:.24}
.band__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.band__in{position:relative;z-index:2}

/* ---------- pricing philosophy ---------- */
.big2{font-size:clamp(34px,7.2vw,110px);font-weight:800;letter-spacing:-.05em;line-height:.92;text-transform:uppercase}
.big2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--accent);letter-spacing:-.01em}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,11.5vw,180px);gap:14px}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2);height:100%}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:grayscale(.35) contrast(1.05)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;bottom:0;padding:16px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,242,237,.9);background:linear-gradient(transparent,rgba(11,11,12,.85));width:100%}
.g-a{grid-column:span 7;grid-row:span 3}
.g-b{grid-column:span 5;grid-row:span 3}
.g-c{grid-column:span 5;grid-row:span 3}
.g-d{grid-column:span 7;grid-row:span 3}
.ph{display:grid;place-content:center;justify-items:center;text-align:center;padding:26px;border:1px dashed rgba(245,242,237,.3);color:var(--gray);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.7}
.gal .ph{grid-row:span 2}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--paper-line)}
.paper .faq{border-top-color:var(--paper-line)}
.faq details{border-bottom:1px solid var(--paper-line)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-size:clamp(17px,1.75vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;background:currentColor;transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:12px;top:50%;width:1.5px;height:13px;background:var(--accent);transform:translateY(-50%);transition:transform .35s var(--ease)}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg)}
.faq p{margin:0 0 26px;max-width:70ch;font-size:16px;line-height:1.65;color:var(--gray-2)}

/* ---------- request form ---------- */
.form{display:grid;gap:26px}
.fgrp__l{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:14px;display:block}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:block;padding:14px 19px;border:1px solid var(--ink-line);border-radius:2px;
  font-size:13.5px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:.25s var(--ease);
}
.opt span:hover{border-color:rgba(245,242,237,.45)}
.opt input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.opt input:focus-visible+span{outline:2px solid var(--accent-hi);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:flex;flex-direction:column;gap:9px}
.f--full{grid-column:1/-1}
.f label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.f input,.f textarea,.f select{
  background:transparent;border:0;border-bottom:1px solid var(--ink-line);
  padding:13px 0;color:var(--paper);font:inherit;font-size:16px;border-radius:0;
  transition:border-color .3s var(--ease);
}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-bottom-color:var(--accent)}
.f textarea{resize:vertical;min-height:88px}
.f select option{background:var(--ink-2)}
.formnote{font-size:12.5px;color:var(--gray);line-height:1.6}

/* ---------- footer ---------- */
.ftr{background:var(--ink);border-top:1px solid var(--ink-line);padding-block:clamp(52px,7vw,86px) 30px}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px)}
.ftr__h{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:20px}
.ftr__l{display:grid;gap:11px}
.ftr__l a,.ftr__l span{font-size:14.5px;color:rgba(245,242,237,.78);transition:color .25s}
.ftr__l a:hover{color:var(--accent)}
.ftr__logo{max-width:210px;margin-bottom:20px;opacity:.9}
.ftr__bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin-top:clamp(38px,5vw,66px);padding-top:22px;border-top:1px solid var(--ink-line);font-size:12px;color:var(--gray)}

/* ---------- mobile action bar ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:1fr 1.25fr;gap:1px;background:var(--ink-line);
  border-top:1px solid var(--ink-line);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.mbar.on{transform:translateY(0)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:17px 10px;background:var(--ink-2);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.mbar a.pri{background:var(--accent);color:#fff}

/* ---------- page hero (interior pages) ---------- */
.phero{padding:clamp(140px,16vw,210px) 0 clamp(46px,6vw,84px);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--ink-line)}
.crumb{display:flex;flex-wrap:wrap;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);margin-bottom:26px}
.crumb a:hover{color:var(--paper)}
.crumb i{opacity:.4;font-style:normal}

.sym{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));background:var(--paper);border-top:1px solid var(--paper-line);border-left:1px solid var(--paper-line)}
.sym__i{padding:26px 24px;display:flex;gap:14px;align-items:flex-start;border-right:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line)}
.sym__d{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:10px}
.sym__t{font-size:15.5px;line-height:1.5;color:var(--ink);font-weight:500}

.prose p{font-size:16.5px;line-height:1.72;color:rgba(245,242,237,.78);max-width:66ch;margin:0 0 20px}
.paper .prose p{color:var(--gray-2)}
.prose h3{font-size:clamp(20px,2vw,27px);font-weight:700;letter-spacing:-.025em;text-transform:uppercase;margin:38px 0 15px}
.prose ul{margin:0 0 22px;padding-left:0;list-style:none;max-width:66ch}
.prose li{position:relative;padding-left:22px;margin-bottom:11px;font-size:16px;line-height:1.6;color:rgba(245,242,237,.78)}
.paper .prose li{color:var(--gray-2)}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--accent)}

.otherlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));background:var(--ink);border-top:1px solid var(--ink-line);border-left:1px solid var(--ink-line)}
.ol{padding:24px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .3s var(--ease);border-right:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line)}
.ol:hover{background:var(--ink-2)}
.ol span{font-size:15px;font-weight:600;letter-spacing:-.015em;text-transform:uppercase}
.ol i{font-style:normal;opacity:.4;transition:.3s var(--ease)}
.ol:hover i{opacity:1;transform:translateX(4px);color:var(--accent)}

/* ---------- verify flag ---------- */
.vf{display:inline-block;background:#FFE9A8;color:#5A4300;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:2px;vertical-align:middle;margin-left:7px}

/* ---------- reveal motion ---------- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv-l]>*{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-rv-l].in>*{opacity:1;transform:none}
[data-rv-l].in>*:nth-child(2){transition-delay:.08s}
[data-rv-l].in>*:nth-child(3){transition-delay:.16s}
[data-rv-l].in>*:nth-child(4){transition-delay:.24s}
[data-rv-l].in>*:nth-child(5){transition-delay:.32s}
[data-rv-l].in>*:nth-child(6){transition-delay:.40s}
.mask>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.mask.in>span{transform:none}
.mask:nth-of-type(2)>span{transition-delay:.09s}
.mask:nth-of-type(3)>span{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv-l]>*{opacity:1!important;transform:none!important;transition:none!important}
  .mask>span{transform:none!important;transition:none!important}
  .hero__media img{transform:none!important}
  .scrollcue i{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .wall{columns:2}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .proof{grid-template-columns:1fr 1fr}
  .svc{grid-template-columns:1fr}
  .svc__stage{display:none}
  .two{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav,.hdr__tel{display:none}
  .burger{display:flex}
  .hdr__cta .btn{display:none}
  .mbar{display:grid}
  body{padding-bottom:0}
  .gal{grid-template-columns:1fr;grid-auto-rows:auto}
  .g-a,.g-b,.g-c,.g-d,.gal .ph{grid-column:span 1;grid-row:span 1;aspect-ratio:4/3;height:auto}
  .fields{grid-template-columns:1fr}
  .hero{min-height:92svh}
  .scrollcue{display:none}
  .proof__i{padding:18px 16px 18px 0}
  .proof__i:not(:first-child){padding-left:16px}
}
@media (max-width:620px){
  .wall{columns:1}
  .steps{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .score{gap:14px}
  .hero__acts .btn{flex:1 1 100%}
}

/* ==========================================================================
   POSITIONING UPDATE — trust bar, vehicle cards, make-page job list
   ========================================================================== */

/* ---------- hero kicker ---------- */
.hero__kick{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);margin:0 0 20px;display:flex;align-items:center;gap:12px;
}
.hero__kick::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}

/* ---------- trust bar: question two, answered immediately ---------- */
.tbar-wrap{background:var(--ink-2);border-block:1px solid var(--ink-line)}
.tbar-wrap.paper{background:var(--paper-2);border-color:var(--paper-line)}
.tbar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--ink-line);
}
.tbar-wrap.paper .tbar{background:var(--paper-line)}
.tbar__i{background:var(--ink-2);padding:26px 24px}
.tbar-wrap.paper .tbar__i{background:var(--paper-2)}
.tbar__k{
  margin:0 0 7px;font-size:clamp(17px,1.5vw,21px);font-weight:700;letter-spacing:-.025em;
  line-height:1.2;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
}
.tbar__k b{font-weight:800}
.tbar__k .stars{font-size:14px}
.tbar__l{margin:0;font-size:13.5px;line-height:1.5;color:var(--gray)}
.tbar-wrap.paper .tbar__l{color:var(--gray-2)}

/* ---------- vehicle cards ---------- */
.vgrid{
  /* three across: with the five confirmed makes plus "everything else" that is
     two clean rows. Switching a make on or off in build.py still lays out fine. */
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--ink-line);
  border-top:1px solid var(--ink-line);border-left:1px solid var(--ink-line);
}
.paper .vgrid{background:var(--paper-line);border-color:var(--paper-line)}
.vcard{
  background:var(--ink);padding:28px 24px 26px;display:flex;flex-direction:column;gap:8px;
  position:relative;transition:background .3s var(--ease);min-height:148px;
}
.paper .vcard{background:var(--paper)}
.vcard:hover{background:var(--ink-2)}
.paper .vcard:hover{background:var(--paper-2)}
.vcard__m{
  font-size:clamp(19px,1.9vw,26px);font-weight:700;letter-spacing:-.03em;
  text-transform:uppercase;line-height:1.05;transition:color .3s var(--ease);
}
.vcard:hover .vcard__m{color:var(--accent)}
.vcard__s{font-size:13px;line-height:1.5;color:var(--gray);max-width:26ch}
.paper .vcard__s{color:var(--gray-2)}
.vcard__a{
  margin-top:auto;padding-top:14px;opacity:.35;font-size:15px;
  transition:opacity .3s,transform .3s var(--ease);
}
.vcard:hover .vcard__a{opacity:1;transform:translateX(5px);color:var(--accent)}
.vcard--more .vcard__m{color:var(--gray)}
.paper .vcard--more .vcard__m{color:var(--gray-2)}
.vcard--more:hover .vcard__m{color:var(--accent)}

/* ---------- make-page job list ---------- */
.jobs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--paper-line);
  border-top:1px solid var(--paper-line);border-left:1px solid var(--paper-line);
}
.job{background:var(--paper);padding:28px 26px 30px}
.job__h{
  font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.015em;
  text-transform:uppercase;line-height:1.2;margin:0 0 12px;color:var(--ink);
}
.job__h::before{
  content:"";display:block;width:22px;height:2px;background:var(--accent);margin-bottom:14px;
}
.job__p{margin:0;font-size:15px;line-height:1.62;color:var(--gray-2)}

/* ---------- dark variant of the symptom grid ---------- */
.sym--dark{background:var(--ink);border-top-color:var(--ink-line);border-left-color:var(--ink-line)}
.sym--dark .sym__i{border-right-color:var(--ink-line);border-bottom-color:var(--ink-line)}
.sym--dark .sym__t{color:var(--paper)}

/* ---------- confirmed credentials in the footer ---------- */
.ftr__cred{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.ftr__cred span{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,237,.8);border:1px solid var(--ink-line);padding:7px 11px;
}

/* ---------- header legibility over the hero photo ----------
   The header is transparent until it sticks, so the mark and the menu button
   sit directly on the photograph. A shadow keeps both readable over a bright
   frame without adding a bar the design doesn't want. */
.brand__logo{filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))}
.burger span,.burger span::before,.burger span::after{box-shadow:0 1px 3px rgba(0,0,0,.55)}
.hdr.is-stuck .brand__logo{filter:none}
.hdr.is-stuck .burger span,
.hdr.is-stuck .burger span::before,
.hdr.is-stuck .burger span::after{box-shadow:none}

/* ==========================================================================
   MOBILE / ANCHOR FIXES
   ========================================================================== */

/* the sticky header used to eat the top of any section jumped to by anchor */
[id]{scroll-margin-top:96px}

@media (max-width:1080px){
  .jobs{grid-template-columns:1fr 1fr}
  .vgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* the fixed action bar must not sit on top of the last of the footer */
  body{padding-bottom:62px}
  .tbar{grid-template-columns:1fr 1fr}
  .tbar__i{padding:20px 18px}
  .vgrid{grid-template-columns:1fr 1fr}
  .vcard{min-height:0;padding:22px 20px}
  .vcard__s{display:none}
  .vcard__a{padding-top:10px}
  .jobs{grid-template-columns:1fr}
  [id]{scroll-margin-top:78px}
}
@media (max-width:620px){
  .tbar{grid-template-columns:1fr}
  .vgrid{grid-template-columns:1fr}
  .vcard{flex-direction:row;align-items:center;gap:14px;min-height:0}
  .vcard__m{font-size:19px}
  .vcard__a{margin:0;padding:0}
  .hero__kick{font-size:10.5px;letter-spacing:.16em}
  .btn-row .btn{flex:1 1 100%}
}

/* ---------- quote plates ----------------------------------------------
   Used where a photograph will eventually go. These are not placeholders:
   they are a deliberate editorial device, so the page reads as finished
   until real photography replaces them.                                  */
.plate{
  display:flex;flex-direction:column;justify-content:center;
  margin:0;padding:clamp(24px,3vw,38px);
  background:var(--ink-2);border:1px solid var(--ink-line);
  color:var(--paper);
}
.plate blockquote{
  margin:0;font-family:var(--f-serif);font-weight:400;
  font-size:clamp(21px,2.1vw,31px);line-height:1.28;letter-spacing:-.01em;
  text-wrap:balance;
}
.plate blockquote b{font-weight:400;color:var(--accent-hi)}
.plate blockquote::before{
  content:"";display:block;width:34px;height:2px;
  background:var(--accent);margin-bottom:clamp(18px,2vw,26px);
}
.plate figcaption,.plate__cap{
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--f-display);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gray);
}
.plate--wide blockquote{max-width:30ch}
.plate--card{min-height:340px;justify-content:space-between}
.plate__name{
  margin:0;font-family:var(--f-display);font-weight:800;
  font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.045em;
}
.plate__facts{
  list-style:none;margin:clamp(22px,3vw,32px) 0 0;padding:0;
  border-top:1px solid var(--ink-line);
}
.plate__facts li{
  padding:13px 0;border-bottom:1px solid var(--ink-line);
  font-size:13.5px;letter-spacing:.01em;color:var(--gray);
}
/* the gallery sits on paper, so plates there keep their own dark field */
.gal .plate{border-color:transparent}
@media (max-width:860px){
  .plate--card{min-height:0}
}

/* ---------- photographic portraits ------------------------------------ */
.shot{margin:0;position:relative;background:var(--ink-2)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{
  position:absolute;left:0;bottom:0;right:0;
  padding:22px 20px 16px;
  font-family:var(--f-display);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  background:linear-gradient(to top,rgba(11,11,12,.72),rgba(11,11,12,0));
}