/* ==========================================================================
   Expert Automotive — design tokens
   Palette: ink/panel (charcoal-blue), steel (muted blue-gray), signal orange
   (CTA/accent), caution yellow (used once, sparingly), paper (cool off-white)
   Type: Oswald (display/condensed — shop signage), Inter (body），
         IBM Plex Mono (spec/data — work-order ticket feel)
   ========================================================================== */

:root{
  --ink:#14181C;
  --panel:#1C232B;
  --steel:#4A5A68;
  --steel-light:#7C8B98;
  --paper:#F1F2EF;
  --paper-dim:#E7E8E3;
  --line:#D8D9D3;
  --orange:#E31E24;
  --orange-dark:#B71218;
  --yellow:#F2B705;
  --white:#FFFFFF;
  --font-display:'Oswald',Impact,sans-serif;
  --font-body:'Inter',-apple-system,Segoe UI,sans-serif;
  --font-mono:'IBM Plex Mono',Consolas,monospace;
  --radius:2px;
  --shadow:0 1px 0 rgba(0,0,0,0.06);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
section{padding:72px 0;}
h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.02em;line-height:1.08;color:var(--ink);}
h2{font-size:clamp(28px,4vw,40px);margin-bottom:12px;}
h3{font-size:20px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange-dark);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);display:inline-block;}
p{color:var(--steel);max-width:60ch;}
.lede{font-size:18px;color:var(--steel);}

/* Hazard rule — the one place a repeating stripe motif appears */
.hazard-rule{
  height:6px;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,var(--ink) 14px 28px);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.04em;
  font-size:15px;padding:14px 26px;border-radius:var(--radius);
  border:2px solid transparent;cursor:pointer;transition:transform .12s ease, background .15s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--orange);color:var(--white);}
.btn-primary:hover{background:var(--orange-dark);}
.btn-ghost{border-color:var(--white);color:var(--white);}
.btn-ghost:hover{background:rgba(255,255,255,0.1);}
.btn-outline{border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--white);}
.btn-block{width:100%;}

/* Sticky top bar: NAP + click-to-call, always visible */
.topbar{
  background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:13px;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;flex-wrap:wrap;gap:6px;}
.topbar a{color:var(--paper);}
.topbar .call{color:var(--yellow);font-weight:600;}

header.site-header{
  position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:38px;height:38px;background:var(--ink);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:18px;transform:skewX(-6deg);
}
.brand-name{font-family:var(--font-display);font-size:19px;letter-spacing:0.02em;text-transform:uppercase;}
.brand-name span{color:var(--orange-dark);}
.brand-logo{height:46px;width:auto;display:block;}
nav.main-nav{display:flex;gap:28px;align-items:center;}
nav.main-nav a{font-family:var(--font-display);font-size:14px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;}
nav.main-nav a:hover, nav.main-nav a.active{border-color:var(--orange);}
.header-cta{display:flex;align-items:center;gap:16px;}
.header-phone{font-family:var(--font-display);font-size:18px;color:var(--ink);}
.header-phone small{display:block;font-family:var(--font-mono);font-size:10px;color:var(--steel);text-transform:uppercase;letter-spacing:0.1em;}
.menu-toggle{display:none;background:none;border:none;font-size:26px;cursor:pointer;}

/* Hero */
.hero{
  background:var(--ink);color:var(--white);position:relative;overflow:hidden;padding:96px 0 80px;
}
.hero .wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;position:relative;z-index:2;}
.hero h1{color:var(--white);font-size:clamp(36px,5.4vw,58px);margin-bottom:18px;}
.hero h1 em{font-style:normal;color:var(--orange);}
.hero p.lede{color:#C9CDD1;margin-bottom:30px;}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
.hero-badges{display:flex;gap:22px;flex-wrap:wrap;}
.hero-badges .badge{font-family:var(--font-mono);font-size:12px;color:#C9CDD1;display:flex;align-items:center;gap:8px;}
.hero-badges .badge::before{content:"✓";color:var(--yellow);font-weight:700;}
.hero-ticket{
  background:var(--paper);color:var(--ink);border-radius:4px;padding:26px 26px 22px;
  transform:rotate(1.5deg);box-shadow:0 18px 40px rgba(0,0,0,0.35);position:relative;
}
.hero-ticket::before{
  content:"";position:absolute;top:20px;left:-9px;width:18px;height:18px;border-radius:50%;background:var(--ink);
}
.hero-ticket .tkt-head{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--steel);display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:12px;margin-bottom:14px;}
.hero-ticket h3{margin-bottom:6px;font-size:22px;}
.hero-ticket ul li{font-family:var(--font-mono);font-size:13px;color:var(--steel);padding:5px 0;border-bottom:1px dashed var(--paper-dim);display:flex;justify-content:space-between;}
.hero-ticket ul li b{color:var(--ink);font-weight:600;}

/* Trust strip */
.trust-strip{background:var(--paper-dim);padding:22px 0;border-bottom:1px solid var(--line);}
.trust-strip .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;}
.trust-item{font-family:var(--font-mono);font-size:13px;color:var(--steel);display:flex;align-items:center;gap:8px;}
.trust-item b{color:var(--ink);}

/* Work-order style service cards */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;}
.job-card{
  background:var(--white);border:1px solid var(--line);border-radius:3px;padding:24px;position:relative;
  transition:border-color .15s ease, transform .15s ease;
}
.job-card:hover{border-color:var(--orange);transform:translateY(-3px);}
.job-card .tkt-no{font-family:var(--font-mono);font-size:11px;color:var(--orange-dark);letter-spacing:0.1em;margin-bottom:10px;display:block;}
.job-card h3{margin-bottom:8px;}
.job-card p{font-size:14px;margin-bottom:16px;}
.job-card a.job-link{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;}
.job-card a.job-link:hover{color:var(--orange-dark);border-color:var(--orange-dark);}

/* Why us / stats */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;}
.stat{border-left:3px solid var(--orange);padding-left:16px;}
.stat .num{font-family:var(--font-display);font-size:38px;color:var(--ink);}
.stat .label{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--steel);}

/* Panel / dark sections */
.panel{background:var(--panel);color:var(--paper);}
.panel h2{color:var(--white);}
.panel p{color:#B7BEC4;}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;}
.testi{background:var(--white);border:1px solid var(--line);padding:22px;border-radius:3px;}
.testi .stars{color:var(--yellow);letter-spacing:2px;margin-bottom:10px;}
.testi p{color:var(--ink);font-size:15px;font-style:italic;}
.testi .who{margin-top:14px;font-family:var(--font-mono);font-size:12px;color:var(--steel);text-transform:uppercase;}

/* CTA band */
.cta-band{background:var(--orange);color:var(--white);padding:52px 0;}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.cta-band h2{color:var(--white);margin-bottom:4px;font-size:clamp(24px,3vw,32px);}
.cta-band p{color:rgba(255,255,255,0.85);}
.cta-band .btn-ghost{border-color:var(--white);color:var(--white);}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,0.15);}

/* Map / hours / contact block */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:30px;}
.hours-table{width:100%;font-family:var(--font-mono);font-size:14px;border-collapse:collapse;}
.hours-table td{padding:9px 0;border-bottom:1px dashed var(--line);color:var(--steel);}
.hours-table td:last-child{text-align:right;color:var(--ink);}
.map-embed{width:100%;height:280px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#dfe1dc;}
.map-embed iframe{width:100%;height:100%;border:0;}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:30px;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--steel);margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-body);font-size:15px;background:var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--orange);outline-offset:1px;background:var(--white);}
.field textarea{min-height:110px;resize:vertical;}

/* Footer */
footer{background:var(--ink);color:#9aa2a9;padding:56px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
footer h4{color:var(--paper);font-size:14px;margin-bottom:14px;}
footer a{color:#9aa2a9;display:block;padding:4px 0;font-size:14px;}
footer a:hover{color:var(--yellow);}
.footer-bottom{border-top:1px solid #2A323B;padding-top:20px;font-family:var(--font-mono);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#6b747c;}

/* Sticky mobile call bar */
.sticky-call{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--orange);
  color:var(--white);text-align:center;padding:14px;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:0.04em;font-size:15px;box-shadow:0 -4px 14px rgba(0,0,0,0.2);
}

/* Page hero (interior pages) */
.page-hero{background:var(--ink);color:var(--white);padding:56px 0 46px;}
.page-hero h1{color:var(--white);font-size:clamp(30px,4.4vw,44px);}
.breadcrumb{font-family:var(--font-mono);font-size:12px;color:var(--steel-light);margin-bottom:14px;}
.breadcrumb a{color:var(--yellow);}

/* Placeholder flags */
.todo{background:#fff3cd;color:#7a5b00;border:1px dashed #d1a300;padding:2px 6px;font-family:var(--font-mono);font-size:12px;border-radius:2px;}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  nav.main-nav{display:none;}
  .menu-toggle{display:block;}
  .sticky-call{display:block;}
  body{padding-bottom:54px;}
}
@media(max-width:600px){
  .services-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .header-phone{display:none;}
}