/*
Theme Name: Dave's Mobile Garage
Theme URI: https://davesgarageshop.com
Author: Dave's Mobile Garage
Description: One-page business theme for Dave's Mobile Garage - mobile auto repair in Grayslake, IL.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: daves-mobile-garage
*/

:root{
  --red:#C1121F; --red-dark:#8B0000; --black:#111114; --ink:#1C1C1F;
  --gray:#6E6E73; --light:#F4F4F5; --pale:#FBEAEA; --white:#fff;
  --stripe:repeating-linear-gradient(-45deg,var(--red) 0 18px,var(--white) 18px 26px,var(--black) 26px 34px,var(--white) 34px 42px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.6}
h1,h2,h3,.disp{font-family:'Big Shoulders Display',Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
img{max-width:100%;height:auto}
a{color:var(--red)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:var(--black);color:#fff}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.nav-brand{font-family:'Big Shoulders Display';font-weight:800;font-size:1.35rem;text-transform:uppercase;color:#fff;text-decoration:none;letter-spacing:.03em}
.nav-brand span{color:var(--red)}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{color:#e8e8ea;text-decoration:none;font-size:.9rem;font-weight:600}
.nav-links a:hover,.nav-links a:focus{color:#fff;border-bottom:2px solid var(--red)}
.nav-call{background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:9px 16px;border-radius:6px;font-size:.9rem;white-space:nowrap}
.nav-call:hover{background:var(--red-dark)}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{background:var(--white);position:relative;overflow:hidden}
.hero-stripe{position:absolute;top:-80px;right:-140px;width:420px;height:620px;background:var(--stripe);transform:rotate(0deg);opacity:.95;clip-path:polygon(45% 0,100% 0,100% 100%,0 100%)}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:64px 0 56px;position:relative}
.kicker{display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:.85rem;padding:6px 16px;transform:skewX(-12deg);margin-bottom:18px}
.kicker>span{display:inline-block;transform:skewX(12deg)}
.hero h1{font-size:clamp(2.6rem,6vw,4.3rem);font-weight:800;color:var(--black)}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{margin:18px 0 26px;font-size:1.08rem;color:var(--gray);max-width:46ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:8px;font-size:1rem;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-dark{background:var(--black);color:#fff}
.btn-ghost{border:2px solid var(--black);color:var(--black)}
.hero-logo{text-align:center}
.hero-logo img{width:min(380px,90%);filter:drop-shadow(0 8px 24px rgba(0,0,0,.12))}

/* stripe divider */
.divider{height:14px;background:var(--stripe)}

/* ---------- sections ---------- */
section{padding:64px 0}
.sec-head{display:inline-block;background:var(--red);color:#fff;transform:skewX(-12deg);padding:8px 22px;margin-bottom:28px}
.sec-head h2{transform:skewX(12deg);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800}
.sec-sub{color:var(--gray);margin:-14px 0 30px;max-width:60ch}

/* services */
#services{background:var(--light)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.svc{background:#fff;border:1.5px solid #e4e4e7;border-left:5px solid var(--red);border-radius:8px;padding:20px 18px;transition:transform .15s ease, box-shadow .15s ease}
.svc:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(17,17,20,.10)}
.svc h3{font-size:1.15rem;color:var(--black);margin-bottom:6px}
.svc p{font-size:.9rem;color:var(--gray)}
.svc.feature{grid-column:1/-1;background:var(--black);color:#fff;border-left-color:var(--red);display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.svc.feature h3{color:#fff;font-size:1.5rem}
.svc.feature p{color:#c9c9ce;max-width:60ch}
.svc.feature .btn{flex-shrink:0}

/* trust */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.check{display:flex;gap:12px;align-items:flex-start}
.check .tick{color:var(--red);font-weight:800;font-size:1.3rem;line-height:1.2}
.check b{display:block;color:var(--black)}
.check span{font-size:.92rem;color:var(--gray)}

/* rates */
#rates{background:var(--black);color:#fff}
#rates .sec-sub{color:#c9c9ce}
.rate-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:30px}
.rate{background:#1c1c22;border:1px solid #2c2c33;border-radius:8px;padding:20px;text-align:center}
.rate .num{font-family:'Big Shoulders Display';font-weight:800;font-size:2.2rem;color:var(--red)}
.rate .lbl{font-size:.9rem;color:#c9c9ce}

/* area */
.area-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{background:var(--pale);color:var(--red-dark);font-weight:600;font-size:.9rem;padding:8px 16px;border-radius:999px}

/* contact */
#contact{background:var(--light)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:start}
.c-info h3{font-size:1.3rem;margin-bottom:8px}
.c-info .big{font-family:'Big Shoulders Display';font-weight:800;font-size:2.3rem;color:var(--red);text-decoration:none;display:inline-block;margin:4px 0 10px}
.c-info p{color:var(--gray);margin-bottom:12px}
form{background:#fff;border-radius:10px;padding:26px;border:1.5px solid #e4e4e7}
label{display:block;font-weight:600;font-size:.88rem;margin:14px 0 5px;color:var(--black)}
input,textarea,select{width:100%;padding:11px 12px;border:1.5px solid #d4d4d8;border-radius:6px;font:inherit;font-size:.95rem;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid var(--red);border-color:var(--red)}
.form-btn{margin-top:18px;width:100%;border:0;cursor:pointer;font-size:1.05rem}
.form-msg{margin-top:14px;padding:12px;border-radius:6px;display:none;font-size:.95rem}
.form-msg.ok{display:block;background:#e8f6ec;color:#1d6b34;border:1px solid #bfe3cb}
.form-msg.err{display:block;background:var(--pale);color:var(--red-dark);border:1px solid #efc4c8}

/* footer */
footer{background:var(--black);color:#a9a9b0;padding:30px 0;font-size:.9rem}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:#fff;text-decoration:none;font-weight:600}

/* mobile call bar */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--red);text-align:center;padding:13px;font-weight:800;font-size:1.05rem}
.callbar a{color:#fff;text-decoration:none}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.svc:hover{transform:none}
}

@media (max-width:820px){
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--black);flex-direction:column;gap:0;padding:8px 0}
  .nav-links.open{display:flex}
  .nav-links li{border-top:1px solid #2c2c33}
  .nav-links a{display:block;padding:14px 20px}
  .burger{display:block}
  .hero-in{grid-template-columns:1fr;padding:44px 0 40px;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .hero-stripe{display:none}
  .hero-logo{order:-1}
  .contact-grid{grid-template-columns:1fr}
  .callbar{display:block}
  body{padding-bottom:52px}
}