:root{
  --black:#0A0A0A; --jet:#131313; --panel:#181818;
  --white:#FFFFFF; --blue:#006AD5; --blue-lt:#4C9EEE;
  --ash:#F4F5F6; --ash-dk:#5A5F63; --hair:#2A2A2A;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:var(--white);
  font-family:'Inter',system-ui,sans-serif;font-size:19px;line-height:1.68;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* iOS Safari auto-detects phone numbers, addresses and dates in plain text and
   repaints them as blue underlined links, overriding the palette. The
   format-detection meta stops most of it, this catches the rest. */
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;
  font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;
  -webkit-text-fill-color:inherit!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* type roles */
.anton{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:.005em}
.lc{text-transform:lowercase;font-size:.82em;letter-spacing:0}
/* opts a run of display type out of the uppercase in .anton, so the lockup can
   read DAVID's Auto Care rather than DAVID's AUTO CARE */
.tc{text-transform:none}
.ser{font-family:'Newsreader',Georgia,serif;font-weight:300;line-height:1.14;letter-spacing:-.012em}
.ser em{font-style:italic;font-weight:300}
.lab{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);line-height:1.6}
.blue{color:var(--blue-lt)}

.btn{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  padding:16px 34px;border:1px solid var(--white);color:var(--white);transition:.22s ease;
}
.btn:hover{background:var(--white);color:var(--black)}
.btn-fill{background:var(--blue);border-color:var(--blue)}
.btn-fill:hover{background:var(--white);border-color:var(--white);color:var(--black)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue-lt);outline-offset:4px}

/* header */
header{position:sticky;top:0;z-index:800;background:rgba(10,10,10,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
/* full width header. the 1240px wrap is kept everywhere else, the bar spans the viewport */
header .wrap{max-width:none;padding:0 40px}
/* three column grid so the nav sits centered in the bar regardless of how wide the
   logo or the phone and button block are. flex with space-between centered it only
   by accident, and moved it every time a nav item changed. */
.hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;padding:22px 0}
.hdr .r{justify-self:end}
.hdr img{width:118px;height:auto}
.hdr nav{display:flex;gap:30px}
.hdr nav a{font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding-bottom:3px;border-bottom:1px solid transparent}
.hdr nav a:hover,.hdr nav a[aria-current="page"]{border-bottom-color:var(--blue)}
.hdr .r{display:flex;align-items:center;gap:22px}
.hdr .tel{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.02em;white-space:nowrap}
.hdr .tel:hover{color:var(--blue-lt)}
.burger{display:none;background:none;border:1px solid var(--hair);color:#fff;padding:14px 16px;min-height:44px;cursor:pointer;font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* hero */
.hero{text-align:center;position:relative}
.hero-band{
  position:relative;width:100%;min-height:clamp(400px,68vh,700px);
  display:flex;align-items:center;justify-content:center;
  padding:72px 32px;background:var(--panel);border-bottom:1px solid var(--hair);overflow:hidden
}
.hero-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-band::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,10,10,.74) 0%,rgba(10,10,10,.60) 40%,rgba(10,10,10,.82) 74%,rgba(10,10,10,.99) 100%),
    radial-gradient(78% 62% at 50% 42%, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 72%)
}
.hero-band .slot{position:absolute;bottom:16px;left:0;right:0;z-index:2}
.hero-band .inner{position:relative;z-index:3;width:100%}
.hero /* Hero eyebrow. Hairline rules and a star either side of the ownership line, set in
   the existing label role so it reads as part of the system rather than a sticker. */
.hbadge{display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:'Inter',sans-serif;font-size:clamp(11px,1.35vw,15px);font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--white);margin-bottom:26px;
  text-shadow:0 2px 18px rgba(0,0,0,.8)}
.hbadge .r{display:block;width:clamp(28px,6vw,86px);height:1px;background:var(--white);opacity:.55}
.hbadge .s{color:var(--blue-lt);font-size:1.05em;letter-spacing:0}
/* second line of the headline carries the brand blue, the first keeps the chrome */
.blueline{-webkit-text-fill-color:var(--blue);background:none;color:var(--blue);
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.85))}
/* sized for "Honest auto repair." at 19 characters, which is far longer than the
   two word lockup this replaced. Checked from a 320px phone to a 1920px desktop. */
.mark{font-size:clamp(30px,7.4vw,120px);line-height:.96;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,.75));
  background:linear-gradient(176deg,#FFFFFF 0%,#E4E9EE 34%,#9AA4AE 52%,#FFFFFF 68%,#CBD3DA 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .stack{margin:66px auto 0;max-width:840px}
.hero .stack li{list-style:none;font-family:'Newsreader',serif;font-weight:300;font-size:clamp(26px,3.9vw,46px);line-height:1.24;color:var(--ash-dk);transition:color .5s ease}
.hero .stack li.on{color:var(--white)}
.hero .sub{max-width:640px;margin:34px auto 0;color:var(--ash);font-size:19px}
.hero .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero .strip{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin:56px 0 0;padding:24px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.hero .strip b{font-family:'Anton',sans-serif;font-weight:400;font-size:22px;display:block;letter-spacing:.02em}

/* marquee */
.mq{overflow:hidden;white-space:nowrap;padding:34px 0;border-bottom:1px solid var(--hair)}
.mq span{display:inline-block;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(38px,7vw,96px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--white);padding-right:.4em;animation:sl 26s linear infinite}
.mq.solid span{color:var(--blue);-webkit-text-stroke:0}
@keyframes sl{from{transform:translateX(0)}to{transform:translateX(-50%)}}

section{padding:110px 0}
.sec-lab{display:flex;align-items:center;gap:18px;margin-bottom:34px}
.sec-lab::after{content:"";flex:1;height:1px;background:var(--hair)}
h2.anton{font-size:clamp(34px,5.4vw,74px)}
h2.ser{font-size:clamp(28px,4vw,52px)}

/* quick links */
.ql{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:stretch}
/* No fixed ratio. The plate stretches to the height of the copy beside it, so the
   photo and the service list finish level. The image is absolutely positioned so
   the plate has no height of its own, which is why the ratio returns at the
   single column breakpoint below. */
.ql .plate{background:var(--panel);border:1px solid var(--hair);display:flex;align-items:flex-end;padding:18px;overflow:hidden;position:relative}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qrow{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;padding:26px 0;border-bottom:1px solid var(--hair)}
.qrow:first-child{border-top:1px solid var(--hair)}
.qrow h3{font-family:'Newsreader',serif;font-weight:300;font-size:clamp(24px,2.9vw,36px);line-height:1.15}
.qrow p{color:var(--ash);font-size:16.5px;margin-top:9px;max-width:40em}
.qrow .arw{font-size:22px;color:var(--blue-lt);transition:transform .2s ease;flex:none;line-height:1}
.qrow:hover h3{color:var(--blue-lt)}
.qrow:hover .arw{transform:translate(5px,-5px)}

/* four tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:70px}
.tile .plate{aspect-ratio:1/1;background:var(--panel);border:1px solid var(--hair);display:flex;align-items:flex-end;padding:14px;transition:border-color .2s ease;overflow:hidden;position:relative}
.tile:hover .plate{border-color:var(--blue)}
.tile h4{margin-top:14px;font-size:15px;font-weight:400;line-height:1.35}
.tile span{display:block;margin-top:5px}

/* tabs */
.tabs{display:flex;justify-content:center;gap:0;border:1px solid var(--hair);border-radius:999px;padding:5px;margin:0 auto 64px;width:max-content;max-width:100%;overflow:auto}
.tabs button{
  background:none;border:0;color:var(--ash);cursor:pointer;padding:12px 26px;border-radius:999px;white-space:nowrap;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:.2s ease
}
.tabs button.on{background:var(--white);color:var(--black)}
.pane{display:none}
.pane.on{display:block}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:stretch}
/* No aspect-ratio here. The plate stretches to the height of the copy column
   instead, so the photo and the text finish level. The image is absolutely
   positioned so the plate has no intrinsic height of its own, which is why the
   ratio has to come back at the single column breakpoint below. */
.about .plate{background:var(--panel);border:1px solid var(--hair);display:flex;align-items:flex-end;padding:18px;position:relative}
.badge{position:absolute;right:-42px;bottom:34px;width:118px;height:118px;animation:spin 22s linear infinite}
.badge text{font-family:'Inter',sans-serif;font-size:9.4px;letter-spacing:.24em;text-transform:uppercase;fill:var(--white)}
@keyframes spin{to{transform:rotate(360deg)}}
.about p{color:var(--ash);margin-top:22px}
.about .lede{color:var(--white);font-family:'Newsreader',serif;font-weight:300;font-size:clamp(23px,2.7vw,34px);line-height:1.26;margin-top:0}

/* steps */
.steps{counter-reset:s;margin-top:20px}
.steps li{counter-increment:s;list-style:none;display:grid;grid-template-columns:78px 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--hair)}
.steps li::before{content:"0" counter(s);font-family:'Anton',sans-serif;font-size:30px;color:var(--blue);line-height:1}
.steps h3{font-family:'Newsreader',serif;font-weight:300;font-size:clamp(22px,2.5vw,30px);line-height:1.2}
.steps p{color:var(--ash);font-size:17px;margin-top:8px;max-width:52em}

/* shop sheet */
.sheet{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.sheet div{padding:22px 0;border-bottom:1px solid var(--hair)}
.sheet .v{font-family:'Newsreader',serif;font-weight:300;font-size:clamp(21px,2.3vw,28px);line-height:1.2;margin-top:7px}

/* rules */
.rules{columns:2;column-gap:64px;margin-top:14px}
.rules li{list-style:none;break-inside:avoid;display:grid;grid-template-columns:52px 1fr;gap:16px;padding:17px 0;border-bottom:1px solid var(--hair)}
.rules li b{font-family:'Anton',sans-serif;font-weight:400;color:var(--blue);font-size:15px;letter-spacing:.08em}
.rules li span{font-size:17px;line-height:1.45}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.rev{padding:44px 38px;border:1px solid var(--hair);margin-left:-1px}
.rev q{font-family:'Newsreader',serif;font-weight:300;font-style:normal;font-size:clamp(21px,2.2vw,28px);line-height:1.28;display:block;quotes:none}
.rev q em{font-style:italic;color:var(--blue-lt)}
.rev .who{margin-top:26px}
.stars{color:var(--blue);letter-spacing:.2em;font-size:13px;margin-bottom:20px;display:block}

/* offer band */
.offer{position:relative;padding:150px 0;text-align:center;overflow:hidden;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:#0A0A0A}
.offer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 62%;z-index:0}
.offer::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(66% 76% at 40% 48%, rgba(10,10,10,.92) 0%, rgba(10,10,10,.50) 72%),
    linear-gradient(180deg, rgba(10,10,10,.80) 0%, rgba(10,10,10,.42) 42%, rgba(10,10,10,.90) 100%)}
.offer .wrap{position:relative;z-index:2}
.offer h2{font-size:clamp(40px,8vw,116px);margin-top:30px}
.offer p{max-width:620px;margin:26px auto 0;color:var(--ash)}
.offer p.one-line{max-width:none;white-space:nowrap}
/* the audience line, set as a badge so veterans, military and first responders
   see themselves immediately. Outlined rather than filled so it does not compete
   with the solid blue call button in the same band. */
.offer .lab{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.3em;
  color:var(--white);border:1px solid var(--blue);padding:13px 26px 12px;line-height:1.5}
.offer .fine{font-size:13px;color:var(--ash);margin-top:18px}

/* alternating features */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:70px 0}
.feat .plate{aspect-ratio:4/3;background:var(--panel);border:1px solid var(--hair);display:flex;align-items:flex-end;padding:18px;overflow:hidden;position:relative}
.feat.rev-order .txt{order:2}
.feat h3{font-family:'Newsreader',serif;font-weight:300;font-size:clamp(26px,3.3vw,42px);line-height:1.16;margin-top:12px}
.feat p{color:var(--ash);margin-top:18px}
.feat .btn{margin-top:26px}

/* common repairs list */
.cr{columns:2;column-gap:70px;margin-top:20px}
.cr a{display:block;break-inside:avoid;padding:20px 0;border-bottom:1px solid var(--hair)}
.cr a:hover h4{color:var(--blue-lt)}
.cr h4{font-family:'Newsreader',serif;font-weight:300;font-size:22px;line-height:1.25;transition:color .2s ease}
.cr span{display:block;margin-top:6px}

/* gallery strip */
.gal{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.gal div{aspect-ratio:1/1;background:var(--panel);border:1px solid var(--hair);position:relative;overflow:hidden}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* form */
.inq{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}

/* The form sits on a white card so it reads as a thing to fill in rather than more
   page. Everything inside it flips to dark type, since the site's form styling is
   built for the dark background and would be invisible here. */
.formcard{background:#FFFFFF;padding:44px 42px 48px;border:1px solid var(--hair)}
.formcard .lab{color:#5A5F63}
.formcard form input,.formcard form select,.formcard form textarea{
  color:var(--ink,#101010);border-bottom-color:#C9CDD1}
.formcard form input::placeholder,.formcard form textarea::placeholder{color:#8C9196}
.formcard form input:focus,.formcard form select:focus,.formcard form textarea:focus{
  border-bottom-color:var(--blue)}
.formcard form select option{background:#FFFFFF;color:#101010}
.formcard .msg{color:#101010}
/* the confirmation banner uses a dark panel by default, which would swallow the
   dark text inside the white card */
.formcard .msg.on{background:#F2F3F4}
.formcard .msg#msgErr{color:#B3261E}
.formcard .btn-fill{background:var(--blue);color:#fff;border-color:var(--blue)}
.formcard .btn-fill:hover{background:#0057B0;border-color:#0057B0}
@media (max-width:680px){ .formcard{padding:30px 24px 34px} }
form .f{margin-bottom:22px}
form label{display:block;margin-bottom:9px}
form input,form select,form textarea{
  width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--white);
  font-family:'Inter',sans-serif;font-size:17px;font-weight:300;border-radius:0
}
form select{padding-right:10px}
form select option{background:var(--jet);color:#fff}
form textarea{min-height:96px;resize:vertical}
form input:focus,form select:focus,form textarea:focus{border-bottom-color:var(--blue)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.msg{display:none;padding:16px 18px;margin-bottom:22px;font-size:16px;border-left:2px solid var(--blue)}
.msg.on{display:block;background:var(--panel)}
.visit dt{margin-top:26px}
.visit dd{font-family:'Newsreader',serif;font-weight:300;font-size:21px;line-height:1.3;margin-top:6px}
.visit dd a:hover{color:var(--blue-lt)}
.hrs{width:100%;border-collapse:collapse;margin-top:6px}
.hrs td{padding:9px 0;border-bottom:1px solid var(--hair);font-family:'Newsreader',serif;font-weight:300;font-size:19px}
.hrs td:last-child{text-align:right}

/* faq */
details{border-bottom:1px solid var(--hair)}
summary{list-style:none;cursor:pointer;padding:26px 50px 26px 0;position:relative;font-family:'Newsreader',serif;font-weight:300;font-size:clamp(21px,2.4vw,28px);line-height:1.25}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:24px;color:var(--blue);font-family:'Inter',sans-serif;font-size:26px;font-weight:300;line-height:1}
details[open] summary::after{content:"\2013"}
details p{color:var(--ash);padding:0 60px 28px 0;font-size:17px}

/* footer */
footer{border-top:1px solid var(--hair);padding:80px 0 0}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.f-grid img{width:170px;height:auto;margin-bottom:22px}
.f-grid p{color:var(--ash);font-size:15px;max-width:30em}
.f-grid h4{margin-bottom:16px}
.f-grid li{list-style:none;padding:5px 0}
.f-grid li a{color:var(--ash);font-size:15px}
.f-grid li a:hover{color:var(--white)}
.f-mark{overflow:hidden;white-space:nowrap;margin-top:70px;border-top:1px solid var(--hair);padding-top:34px}
.f-mark span{display:inline-block;font-family:'Anton',sans-serif;font-size:clamp(42px,9.4vw,132px);line-height:.9;color:transparent;-webkit-text-stroke:1px var(--white);padding-right:.35em;animation:sl 34s linear infinite}
.f-bot{border-top:1px solid var(--hair);margin-top:30px;padding:24px 0 34px}
.f-bot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.f-bot a:hover{color:var(--blue-lt)}

@media (max-width:1000px){
  .hdr nav{display:none}
  /* nav is hidden here, so drop the middle track. Left at 1fr auto 1fr the empty
     center column plus two 28px gaps pushed the logo and the actions apart. */
  .hdr{grid-template-columns:1fr auto;gap:18px}
  .burger{display:block}
  .hdr nav.open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--black);border-bottom:1px solid var(--hair);padding:6px 32px 22px}
  .hdr nav.open a{padding:15px 0;border-bottom:1px solid var(--hair);font-size:13px}
  header .wrap{position:relative}
  .ql,.about,.feat,.inq{grid-template-columns:1fr;gap:44px}
  .about .plate{aspect-ratio:4/5}
  .ql .plate{aspect-ratio:4/3}
  .feat.rev-order .txt{order:0}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:1fr}
  .rev{margin-left:0;margin-top:-1px}
  .badge{right:14px}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .offer p.one-line{white-space:normal;max-width:620px}
}
@media (max-width:680px){
  body{font-size:18px}
  .hbadge .r{display:none}
  .hbadge{gap:12px;letter-spacing:.22em}
  /* the 78px numeral track plus a 26px gap eats 29% of a 360px screen */
  .steps li{grid-template-columns:54px 1fr;gap:18px}
  section{padding:74px 0}
  .rules,.cr{columns:1}
  .sheet{grid-template-columns:1fr}
  .two{grid-template-columns:1fr;gap:0}
  .gal{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr}
  .hero .strip{gap:28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}