/* ============================================================
   Nationwide Auto Repair — shared brand kit
   Storefront palette: yellow + red + black (garage signage)
   Used by index.html, diagnose.html, glossary.html
   ============================================================ */
:root{
  /* asphalt surfaces */
  --bg:#0e0e10; --bg-2:#161619; --surface:#1c1c21; --surface-2:#24242b;
  --line:#33333c; --line-soft:#26262d;
  /* text */
  --text:#f6f4ee; --muted:#a9a7a0; --faint:#74726c;
  /* brand */
  --yellow:#ffd21a; --yellow-deep:#f2b600; --ink-on-yellow:#16140a;
  --red:#e11900; --red-deep:#b21300; --red-bright:#ff3a23;
  /* danger scale */
  --green:#36c46b; --amber:#ffc11d; --orange:#ff7a18;
  /* type */
  --display:'Saira Condensed',system-ui,sans-serif;
  --cond:'Saira Condensed',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  /* scale */
  --text-hero:clamp(3.2rem,1rem + 11vw,9rem);
  --text-h2:clamp(1.9rem,1rem + 3.6vw,3.4rem);
  --space-section:clamp(3.5rem,2rem + 6vw,8rem);
  --wrap:min(1200px,92vw);
  /* effects */
  --shadow:0 22px 60px -26px rgba(0,0,0,.9);
  --glow-y:0 0 36px -8px rgba(255,210,26,.5);
  --glow-r:0 0 34px -8px rgba(225,25,0,.6);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.3s;
  /* hazard stripe */
  --hazard:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,#111 14px 28px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* faint film grain for atmosphere (sits above content, below nav) */
body::after{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:var(--ink-on-yellow)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.94;
  letter-spacing:.005em;text-transform:uppercase}

.wrap{width:var(--wrap);margin-inline:auto}
.eyebrow{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.28em;font-size:.78rem;color:var(--yellow)}
.eyebrow.red{color:var(--red-bright)}
.stripe{height:10px;background:var(--hazard);border-block:1px solid #000}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:#000;
  padding:.6rem 1rem;font-family:var(--cond);font-weight:700;z-index:200}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--cond);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.02rem;
  padding:.85rem 1.5rem;border:2px solid transparent;cursor:pointer;line-height:1;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),background var(--dur),color var(--dur)}
.btn svg{width:18px;height:18px;flex:none}
.btn-call{background:var(--red);color:#fff;border-color:#000}
.btn-call:hover{transform:translateY(-2px);box-shadow:var(--glow-r)}
.btn-yellow{background:var(--yellow);color:var(--ink-on-yellow);border-color:#000}
.btn-yellow:hover{transform:translateY(-2px);box-shadow:var(--glow-y)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:80;background:rgba(14,14,16,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .mark{flex:none;width:42px;height:42px}
.brand .lock{display:flex;flex-direction:column;line-height:.92}
.brand .lock b{font-family:var(--display);font-weight:800;font-size:1.32rem;
  letter-spacing:.01em;text-transform:uppercase}
.brand .lock b em{font-style:normal;color:var(--yellow)}
.brand .lock span{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.26em;font-size:.6rem;color:var(--muted)}
nav.main ul{display:flex;gap:1.9rem;list-style:none;font-family:var(--cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.97rem}
nav.main a{position:relative;color:var(--muted);padding:.2rem 0;transition:color .2s}
nav.main a.here,nav.main a:hover{color:var(--text)}
nav.main a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;
  background:var(--red);transition:width .3s var(--ease)}
nav.main a.here::after,nav.main a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.menu-btn{display:none;background:none;border:2px solid var(--line);color:var(--text);
  padding:.5rem .7rem;cursor:pointer;font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mobile-panel{display:none;border-bottom:1px solid var(--line);background:var(--bg-2)}
.mobile-panel ul{list-style:none;padding:.5rem 0}
.mobile-panel a{display:block;padding:.85rem 4vw;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--line-soft);color:var(--text)}
.mobile-panel.open{display:block}

/* ---------- STICKY MOBILE CALL BAR ---------- */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    border-top:2px solid #000}
  .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
    font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    padding:.95rem;font-size:1.02rem}
  .callbar a svg{width:18px;height:18px}
  .callbar .c{background:var(--red);color:#fff}
  .callbar .d{background:var(--yellow);color:var(--ink-on-yellow)}
  body{padding-bottom:3.4rem}
}

/* ---------- FOOTER ---------- */
footer.site{background:#0a0a0c;border-top:1px solid var(--line);padding:3.2rem 0 2.2rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:2.2rem;margin-bottom:2.2rem}
footer.site .brand{margin-bottom:1rem}
footer.site p{color:var(--muted);max-width:34ch;font-size:.97rem}
footer.site h4{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.76rem;color:var(--yellow);margin-bottom:.9rem}
footer.site ul.links{list-style:none;display:grid;gap:.5rem}
footer.site ul.links a{color:var(--muted);font-family:var(--cond);letter-spacing:.04em;
  font-size:1rem;transition:color .18s}
footer.site ul.links a:hover{color:var(--text)}
footer.site address{font-style:normal;color:var(--muted);display:grid;gap:.5rem;font-size:.97rem}
footer.site address a{color:var(--text);font-weight:600}
.foot-bottom{border-top:1px solid var(--line);padding-top:1.4rem;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--faint)}
.foot-bottom a{color:var(--yellow)}

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  nav.main,.nav-cta .btn{display:none}
  .menu-btn{display:block}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .foot-grid{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   PREMIUM MOBILE — iOS (Safari) + Android (Chrome)
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(255,210,26,.25)}
/* keep anchored sections clear of the sticky nav */
[id]{scroll-margin-top:72px}
/* stable mobile hero height (no jump when the URL bar hides) */
@supports(height:100svh){ .hero{min-height:clamp(540px,90svh,880px)} }
@media(max-width:760px){
  .hero{min-height:88svh}
  /* respect the iPhone home indicator under the sticky call bar */
  body{padding-bottom:calc(3.6rem + env(safe-area-inset-bottom,0px))}
  .callbar{padding-bottom:env(safe-area-inset-bottom,0px)}
  .callbar a{min-height:54px;padding:1rem .8rem;font-size:1.05rem}
  .callbar a:active{filter:brightness(.92)}
  /* generous, thumb-friendly tap targets */
  .btn{padding:1rem 1.4rem}
  .btn:active{transform:translateY(1px)}
  .mobile-panel a{min-height:50px;display:flex;align-items:center}
  /* let the hero headline breathe on narrow screens */
  .hero h1{font-size:clamp(3rem,16vw,5.2rem)}
}

/* screen-reader-only utility */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}