/* Auto Car Parts Store Dallas. Hand-built, deliberately not a template.
   Palette: oxide red, oil black, warm paper. Fonts: system stack plus one
   slightly dated slab for headings. */
:root{
  --ink:#1b1a18; --paper:#f4f0e8; --card:#fffdf8; --oxide:#7a2318;
  --oxide2:#a63a24; --steel:#4a5560; --line:#d8d0c2; --amber:#e0a422;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.62 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--oxide)}
a:hover{color:var(--oxide2)}
h1,h2,h3{font-family:Rockwell,"Rockwell Nova","Courier Bold",Georgia,serif;
  line-height:1.18;letter-spacing:-.01em;margin:1.5em 0 .5em}
h1{font-size:2.15rem;margin-top:.4em}
h2{font-size:1.5rem;border-bottom:3px solid var(--amber);
  display:inline-block;padding-bottom:2px}
h3{font-size:1.12rem}
p{margin:.7em 0}
main{max-width:1080px;margin:0 auto;padding:0 18px 40px}

/* trust strip */
.strip{background:var(--ink);color:#e8e2d6;font-size:12.5px;
  padding:6px 14px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.strip i{color:var(--amber);font-style:normal}

/* header */
.hdr{background:var(--card);border-bottom:4px solid var(--oxide);
  display:flex;align-items:center;gap:18px;padding:10px 18px;flex-wrap:wrap}
.brand img{display:block}
.hdrcall{margin-left:auto;background:var(--oxide);color:#fff;
  padding:9px 16px;border-radius:3px;font-weight:700;text-decoration:none}
.hdrcall:hover{background:var(--oxide2);color:#fff}
.nav ul.lvl1{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.nav ul.sub{display:none;position:absolute;background:var(--card);
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.14);
  list-style:none;margin:0;padding:8px 0;min-width:290px;z-index:40}
.nav li.has-sub{position:relative}
.nav li.has-sub>a::after{content:" \25be"}
.nav li.has-sub:hover>ul.sub{display:block}
.nav li.has-sub:focus-within>ul.sub{display:block}
.nav ul.sub li a{display:block;padding:6px 16px;font-size:14.5px}
.nav a{color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--oxide)}

/* breadcrumbs */
.crumbs{font-size:13px;color:var(--steel);padding:12px 0 0}
.crumbs i{font-style:normal;color:var(--line)}

/* hero, deliberately asymmetric rather than a centred gradient */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;
  align-items:start;padding-top:8px}
.sub{font-size:1.06rem;color:var(--steel);margin-top:-.2em}
.callrow{margin:14px 0 6px}
.promise{font-size:14px;color:var(--steel);border-left:3px solid var(--amber);
  padding-left:10px}
.heroimg img{border:1px solid var(--line);border-radius:2px}
.lede{font-size:1.06rem}

/* buttons, deliberately not matching each other exactly */
.btn{display:inline-block;text-decoration:none;font-weight:700}
.btn-lg{background:var(--oxide);color:#fff;padding:14px 22px;border:0;
  border-radius:3px;font-size:1.06rem;cursor:pointer}
.btn-lg:hover{background:var(--oxide2);color:#fff}
.btn-ghost{border:2px solid var(--steel);color:var(--steel);padding:11px 18px;
  border-radius:14px;margin-left:8px}
.btn-ghost:hover{border-color:var(--oxide);color:var(--oxide)}
.cta{background:#efe8da;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:18px;margin:28px 0}
.badges{font-size:13px;color:var(--steel);margin:8px 0 0}
.badges i{color:var(--amber);font-style:normal}
.ctasub{font-size:14px;margin:2px 0 0}

/* testimonials */
.tstgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;
  align-items:start}
.tst{margin:0;background:var(--card);border:1px solid var(--line);padding:14px}
.tst .av{border-radius:50%;float:left;margin:0 10px 4px 0}
.tst blockquote{margin:0;font-size:14.5px}
.tst figcaption{font-size:13px;color:var(--steel);clear:both;padding-top:6px}

/* pain grid */
.paingrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;
  list-style:square;padding-left:20px}
.trustgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;
  align-items:start}

/* two-up service grid. align-items:start keeps the card heights ragged. */
.svcgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;
  align-items:start}
.svcblock{background:var(--card);border:1px solid var(--line);padding:0 14px 14px}
.svcblock img{height:200px;object-fit:cover;width:100%;display:block;
  margin:0 -14px;max-width:none;width:calc(100% + 28px)}
.svcblock h3{margin-top:.8em}
.svcblock h3 a{text-decoration:none}
.svcblock .sym{font-weight:700;margin-bottom:.3em}
.svcblock .def{font-size:14px;color:var(--steel)}
.svcblock .more{font-size:14px}

/* numbers */
.nums{display:flex;gap:34px;flex-wrap:wrap;justify-content:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;margin:30px 0}
.num{text-align:center}
.num b{display:block;font-size:2rem;font-family:Rockwell,Georgia,serif;
  color:var(--oxide)}
.num span{font-size:13px;color:var(--steel)}

/* before and after */
.bagrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.bagrid img{border:1px solid var(--line)}
.bagrid ul{padding-left:18px;font-size:14.5px}

/* tables */
.tw{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;background:var(--card);
  font-size:14.5px}
caption{text-align:left;font-size:13px;color:var(--steel);padding:0 0 8px}
th,td{border:1px solid var(--line);padding:7px 9px;text-align:left}
thead th{background:var(--steel);color:#fff;font-weight:700}
tbody tr:nth-child(even){background:#f7f3ea}
.tnote{font-size:14px;color:var(--steel)}

/* lists */
.cols{columns:2;column-gap:30px;padding-left:20px}
.dets{padding-left:20px}
.dets li{margin:.45em 0}
.hublist,.loclist,.availlist,.glist{list-style:none;padding:0}
.hublist li{border-bottom:1px dotted var(--line);padding:9px 0}
.hublist span{display:block;font-size:14px;color:var(--steel)}
.loclist li{border-left:4px solid var(--amber);padding:2px 0 2px 14px;
  margin:18px 0}
.availlist{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 18px}
.availlist li{font-size:14.5px}
.glist li{padding:7px 0;border-bottom:1px dotted var(--line);font-size:15px}

/* how it works */
.hiwlist{list-style:none;padding:0;counter-reset:s}
.hiwlist li{background:var(--card);border:1px solid var(--line);
  padding:12px 16px;margin:12px 0}
.hiwlist b{color:var(--oxide);font-size:1.6rem;font-family:Rockwell,Georgia,serif}
.hiwlist h3{margin:.1em 0 .3em}

/* faq */
.fq{background:var(--card);border:1px solid var(--line);padding:10px 14px;
  margin:8px 0}
.fq summary{font-weight:700;cursor:pointer}

/* forms */
.quote{background:#efe8da;border:2px dashed var(--steel);padding:18px;
  margin:30px 0}
.fld{margin:10px 0}
.fld label{display:block;font-weight:600;font-size:14px}
.fld input,.fld textarea{width:100%;max-width:420px;padding:9px;
  border:1px solid var(--steel);border-radius:2px;font:inherit;background:#fff}
.fnote{font-size:13.5px;color:var(--steel)}
.fsok{color:#1d6b34;font-weight:700}
.fserr{color:var(--oxide);font-weight:700}

/* owner note, deliberately plain */
.owner{border-left:5px solid var(--oxide);margin:20px 0;padding:2px 0 2px 16px;
  font-size:15.5px}
.owner footer{font-size:14px;color:var(--steel)}
.revs p{margin:.4em 0}
.mission{background:var(--amber);padding:12px 14px}
.map iframe{border:1px solid var(--line);max-width:100%}
figure.lead{margin:16px 0}
figure.lead figcaption{font-size:13px;color:var(--steel)}
.areas{font-size:14.5px}
.fsmall{font-size:12.5px}

/* footer */
.foot{background:var(--ink);color:#ddd6c9;margin-top:36px;padding:26px 18px 10px}
.foot a{color:#e8c98a}
.fwrap{max-width:1080px;margin:0 auto;display:grid;
  grid-template-columns:1.2fr 1fr 1fr;gap:26px}
.fcol h3{color:#fff;font-size:1rem;margin:.4em 0}
.fcol ul{list-style:none;padding:0;margin:0}
.fcol li{display:list-item;padding:3px 0;font-size:14px}
.fnap{font-size:14.5px;line-height:1.5}
.fsab{font-size:13.5px}
.fhrs{font-size:13.5px}
.fbar{max-width:1080px;margin:18px auto 0;border-top:1px solid #3a3833;
  padding-top:10px;font-size:13px}
.fbar i{color:var(--amber);font-style:normal}

/* sticky mobile call bar */
.sticky{display:none}

@media (max-width:760px){
  h1{font-size:1.7rem}
  .hero{grid-template-columns:1fr}
  .svcgrid{grid-template-columns:1fr;gap:18px}
  .svcblock img{height:170px}
  .tstgrid{grid-template-columns:1fr}
  .trustgrid{grid-template-columns:1fr}
  .paingrid{grid-template-columns:1fr}
  .bagrid{grid-template-columns:1fr}
  .availlist{grid-template-columns:1fr}
  .cols{columns:1}
  .fwrap{grid-template-columns:1fr}
  .nav ul.lvl1{flex-wrap:wrap;gap:10px}
  .nav ul.sub{position:static;box-shadow:none;min-width:0}
  body{padding-bottom:58px}
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60}
  .sticky a{flex:1;text-align:center;padding:15px 6px;font-weight:700;
    text-decoration:none;background:var(--oxide);color:#fff}
  .sticky a+a{background:var(--steel)}
}