/* ============================================================
   Nationwide Auto Repair — landing page (index.html)
   ============================================================ */

/* ---------- HERO (storefront photo + fire) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(540px,90vh,880px)}
.hero-media{position:absolute;inset:0;z-index:-3}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
/* dark scrim for text legibility (bottom-heavy + left bias) */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(to top,rgba(9,9,11,.97) 0%,rgba(10,9,9,.86) 24%,rgba(16,11,7,.5) 56%,rgba(16,11,7,.22) 100%),
    linear-gradient(to right,rgba(9,9,11,.8) 0%,rgba(9,9,11,.35) 42%,transparent 72%)}
/* fire glow rising from below + flicker */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(130% 90% at 32% 118%,rgba(255,90,12,.55),rgba(255,40,0,.12) 42%,transparent 64%),
    radial-gradient(80% 70% at 80% 120%,rgba(255,160,30,.35),transparent 58%);
  animation:flicker 4.5s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.85}45%{opacity:1}70%{opacity:.78}}

.hero .wrap{position:relative;z-index:1;padding-block:clamp(2.2rem,7vh,4.5rem)}
.hero-eyebrow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.hero-eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(54,196,107,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(54,196,107,.55)}70%{box-shadow:0 0 0 8px rgba(54,196,107,0)}100%{box-shadow:0 0 0 0 rgba(54,196,107,0)}}
.hero-eyebrow .open{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.74rem;color:var(--text)}
.hero h1{font-size:var(--text-hero);margin:.1rem 0;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.hero h1 .go{display:block;color:var(--yellow);transform:skewX(-6deg);
  text-shadow:0 0 28px rgba(255,150,20,.45),0 4px 18px rgba(0,0,0,.6)}
.hero h1 .time{display:block;color:#fff}
.hero h1 .time::after{content:".";color:var(--red)}
.hero .sub{font-family:var(--cond);font-weight:500;font-size:clamp(1.05rem,1rem + 1vw,1.4rem);
  color:#d9d6cf;max-width:46ch;margin:1.1rem 0 .4rem;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.hero .sub b{color:#fff;font-weight:700}
.hero .shopname{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(1.1rem,.9rem + 1vw,1.6rem);color:#fff;margin:.2rem 0 1.4rem;
  display:inline-flex;align-items:center;gap:.7rem;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.hero .shopname::before{content:"";width:34px;height:3px;background:var(--red);flex:none}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap}
.trust{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.7rem;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.16)}
.trust .t{display:flex;align-items:center;gap:.5rem;font-family:var(--cond);
  font-weight:600;font-size:.92rem;color:#cfccc5}
.trust .t svg{width:18px;height:18px;color:var(--yellow);flex:none}
.trust .t b{color:#fff}
.stars{color:var(--yellow);letter-spacing:.06em}

/* embers drifting up over the hero */
.embers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#ffd76a,#ff6a12 55%,transparent 70%);
  opacity:0;animation:ember linear infinite}
@keyframes ember{0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  12%{opacity:.9}70%{opacity:.7}100%{transform:translateY(-78vh) translateX(26px) scale(.4);opacity:0}}

/* ---------- SECTION HEADER ---------- */
.section{padding:var(--space-section) 0}
.section.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec-head{margin-bottom:2.6rem;max-width:60ch}
.sec-head h2{font-size:var(--text-h2);margin:.5rem 0 .6rem}
.sec-head h2 em{font-style:normal;color:var(--yellow)}
.sec-head p{color:var(--muted);font-family:var(--cond);font-size:1.12rem}

/* ---------- SERVICES BENTO ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.svc{position:relative;background:var(--surface);border:1px solid var(--line);
  padding:1.4rem;overflow:hidden;transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur)}
.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--red);transition:width .35s var(--ease)}
.svc:hover{transform:translateY(-5px);border-color:var(--yellow);box-shadow:var(--shadow)}
.svc:hover::before{width:100%}
.svc svg.ic{width:34px;height:34px;color:var(--yellow);margin-bottom:1rem}
.svc h3{font-family:var(--cond);font-weight:700;font-size:1.16rem;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:.35rem}
.svc p{color:var(--muted);font-size:.9rem;line-height:1.5}
.svc.wide{grid-column:span 2}
.svc.feature{grid-column:span 2;grid-row:span 2;background:linear-gradient(165deg,var(--surface-2),var(--bg-2));
  display:flex;flex-direction:column;justify-content:space-between;border-color:var(--yellow-deep)}
.svc.feature .big{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.6rem,1rem + 2vw,2.4rem);line-height:.96;margin:.4rem 0 .6rem}
.svc.feature .big em{font-style:normal;color:var(--yellow)}
.svc.feature .tag{align-self:flex-start;background:var(--red);color:#fff;font-family:var(--cond);
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;padding:.3rem .7rem}

/* ---------- WHY / VALUES ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.why .v{border-top:3px solid var(--red);padding-top:1.1rem}
.why .v .n{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--yellow);margin-bottom:.5rem}
.why .v h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:1.12rem;letter-spacing:.02em;margin-bottom:.4rem}
.why .v p{color:var(--muted);font-size:.94rem}

/* ---------- TOOLS TEASER ---------- */
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.tool-card{position:relative;display:flex;flex-direction:column;gap:1rem;padding:2rem;
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur)}
.tool-card:hover{transform:translateY(-5px);border-color:var(--yellow);box-shadow:var(--shadow)}
.tool-card .glyph{width:54px;height:54px;color:var(--yellow)}
.tool-card .kick{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--red-bright)}
.tool-card h3{font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem);margin:.2rem 0 .3rem}
.tool-card p{color:var(--muted);font-family:var(--cond);font-size:1.05rem;max-width:42ch}
.tool-card .go{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);margin-top:auto;display:inline-flex;align-items:center;gap:.4rem}
.tool-card:hover .go{color:var(--text)}

/* ---------- INSPECTION CALLOUT ---------- */
.inspect{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:center;
  background:linear-gradient(110deg,var(--surface-2),var(--bg-2));border:2px solid #000;
  border-left:8px solid var(--yellow);padding:1.8rem 2rem;box-shadow:var(--shadow)}
.inspect .badge{flex:none;width:74px;height:74px;color:var(--yellow)}
.inspect h3{font-size:clamp(1.4rem,1rem + 1.4vw,2rem);margin-bottom:.3rem}
.inspect p{color:var(--muted);font-family:var(--cond);font-size:1.05rem;max-width:52ch}

/* ---------- REVIEWS ---------- */
.rev-top{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:2.4rem}
.rev-score{font-family:var(--display);font-weight:800;font-size:clamp(3rem,2rem + 5vw,5.5rem);
  color:var(--yellow);line-height:.85}
.rev-meta .stars{font-size:1.4rem}
.rev-meta p{color:var(--muted);font-family:var(--cond);font-size:1.02rem;margin-top:.3rem}
.rev-meta a{color:var(--yellow);border-bottom:1px solid var(--yellow)}
.rev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.rev{background:var(--surface);border:1px solid var(--line);padding:1.5rem;border-top:3px solid var(--red)}
.rev .q{width:30px;height:30px;color:var(--red);margin-bottom:.6rem}
.rev h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:1.1rem;letter-spacing:.02em;margin-bottom:.4rem;color:var(--yellow)}
.rev p{color:var(--muted);font-size:.96rem}

/* ---------- LOCATION ---------- */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:stretch}
.loc .info{display:flex;flex-direction:column;gap:1.3rem}
.loc .block h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:var(--yellow);margin-bottom:.5rem}
.loc .block p,.loc .block a{font-family:var(--cond);font-size:1.1rem;color:var(--text)}
.hours-tbl{width:100%;border-collapse:collapse;font-family:var(--cond)}
.hours-tbl td{padding:.5rem 0;border-bottom:1px solid var(--line-soft);font-size:1.02rem}
.hours-tbl td:last-child{text-align:right;color:var(--muted)}
.hours-tbl tr.today td{color:var(--yellow);font-weight:700}
.hours-tbl tr.today td:last-child{color:var(--yellow)}
.map-frame{border:2px solid #000;min-height:340px;background:var(--surface);overflow:hidden}
.map-frame iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.3) contrast(1.05)}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .rev-cards{grid-template-columns:1fr}
  .loc{grid-template-columns:1fr}
  .inspect{grid-template-columns:1fr;text-align:left}
  .svc.feature{grid-row:span 1}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr}
  .svc.wide,.svc.feature{grid-column:span 1}
  .hero-actions .btn{flex:1;justify-content:center}
}


/* ---------- STEP INSIDE / FRONT DESK ---------- */
.inside{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.inside .frame{position:relative;border:2px solid #000;box-shadow:var(--shadow);background:#000;isolation:isolate}
.inside .frame img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.inside .frame::after{content:"";position:absolute;right:-9px;bottom:-9px;width:62%;height:9px;background:var(--red);z-index:-1}
.inside .frame .tag{position:absolute;top:-15px;left:-11px;background:var(--yellow);color:var(--ink-on-yellow);
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;
  padding:.42rem .85rem;border:2px solid #000;transform:rotate(-3deg);box-shadow:3px 3px 0 #000}
.inside .copy h2{font-size:var(--text-h2);margin:.5rem 0 .7rem}
.inside .copy h2 em{font-style:normal;color:var(--yellow)}
.inside .copy .lead{color:var(--muted);font-family:var(--cond);font-size:1.14rem;max-width:46ch}
.inside .points{list-style:none;display:grid;gap:1rem;margin-top:1.5rem}
.inside .points li{display:flex;gap:.8rem;align-items:flex-start}
.inside .points li svg{flex:none;width:24px;height:24px;color:var(--yellow);margin-top:2px}
.inside .points li .pt{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.06rem;color:var(--text)}
.inside .points li .pt small{display:block;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);font-size:.92rem}
@media(max-width:880px){.inside{grid-template-columns:1fr}.inside .frame{order:-1;max-width:460px;margin-inline:auto;width:100%}}


/* ---------- REVIEW CTA / MAP LINKS / AREAS SERVED ---------- */
.rev-cta{display:flex;align-items:center;justify-content:center;gap:1.3rem;flex-wrap:wrap;
  margin-top:2.2rem;padding-top:1.9rem;border-top:1px solid var(--line);text-align:center}
.rev-cta span{font-family:var(--cond);font-size:1.06rem;color:var(--muted)}
.map-links{display:flex;gap:1.3rem}
.map-links a{font-family:var(--cond);font-weight:600;color:var(--yellow);font-size:.96rem;letter-spacing:.02em;transition:color .18s}
.map-links a:hover{color:var(--text)}
.serves{color:var(--faint);font-family:var(--cond);font-size:.92rem;margin-top:.6rem;max-width:34ch}


/* ============================================================
   SEASON: AMERICA 250 — "Night-Sky Sparks" (OFF by default).
   Enable by adding class "season-250" to <body>; remove to disable.
   Distant gold sky-sparks high in the dark sky + a small typographic
   datestamp. Compositor-only motion; reduced-motion freezes it.
   ============================================================ */
.sky-sparks{display:none}
.est-250{display:none}

body.season-250 .hero::after{
  background:
    radial-gradient(130% 90% at 32% 118%,rgba(255,90,12,.55),rgba(255,40,0,.12) 42%,transparent 64%),
    radial-gradient(80% 70% at 80% 120%,rgba(255,160,30,.35),transparent 58%),
    linear-gradient(to bottom,rgba(58,86,168,.13) 0%,rgba(58,86,168,.05) 22%,transparent 46%);
}
body.season-250 .embers i{filter:saturate(.82)}
body.season-250 .embers i:nth-child(3),
body.season-250 .embers i:nth-child(5),
body.season-250 .embers i:nth-child(7),
body.season-250 .embers i:nth-child(9){display:none}

body.season-250 .sky-sparks{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body.season-250 .sky-sparks span{position:absolute;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe9a8 38%,rgba(255,196,80,.4) 70%,transparent 78%);
  box-shadow:0 0 6px 1px rgba(255,224,150,.5);opacity:0;will-change:transform,opacity;
  animation:spark-rise linear infinite, spark-twinkle ease-in-out infinite}
body.season-250 .sky-sparks span.lead{width:4px;height:4px;box-shadow:0 0 9px 2px rgba(255,231,170,.6)}
@keyframes spark-rise{0%{transform:translate3d(0,0,0) scale(.6)}100%{transform:translate3d(8px,-90px,0) scale(.95)}}
@keyframes spark-twinkle{0%,100%{opacity:0}18%{opacity:.95}46%{opacity:.35}72%{opacity:.8}}

body.season-250 .hero .shopname{flex-wrap:wrap}
body.season-250 .est-250{display:inline-flex;align-items:center;gap:.5rem;margin-left:.3rem;padding-left:.85rem;
  border-left:1px solid rgba(255,255,255,.22);font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.62rem;line-height:1;color:rgba(246,244,238,.72);white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
body.season-250 .est-250 b{color:var(--yellow);font-weight:800;letter-spacing:.08em;text-shadow:0 0 14px rgba(255,210,26,.4)}
body.season-250 .est-250 .sep{opacity:.4}

@media (prefers-reduced-motion:reduce){
  body.season-250 .sky-sparks span{animation:none;opacity:.7;transform:none}
  body.season-250 .sky-sparks span.lead{opacity:.9}
}
@media (max-width:600px){
  body.season-250 .sky-sparks span:nth-child(n+5){display:none}
  body.season-250 .est-250{margin-left:0;padding-left:0;border-left:0}
}