/* JTG Roadside — Austin TX 24hr roadside assistance */
:root{
  --ink:#0b0b0c; --surface:#151517; --surface-2:#1c1d20; --line:rgba(255,255,255,.09);
  --red:#e6262c; --red-deep:#a4141a; --red-glow:rgba(230,38,44,.45);
  --white:#f6f5f3; --mute:#a2a2a6; --mute-2:#6f6f74;
  --radius:14px; --wrap:1180px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:'Barlow',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.mk{font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.02em; margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-999px; top:0; background:var(--red); color:#fff; padding:10px 16px; z-index:999}
.skip:focus{left:12px; top:12px}

.star6{display:inline-block; width:6px; height:6px; background:var(--red); border-radius:1px; transform:rotate(45deg); margin-right:8px}
.kick{display:flex; align-items:center; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 14px}
.kick.white{color:var(--white)}
.sub{color:var(--mute); font-size:17px; line-height:1.6; max-width:56ch}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; justify-content:center; font-weight:700;
  font-size:15px; letter-spacing:.02em; padding:14px 26px; border-radius:999px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap;}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red); color:#fff; box-shadow:0 10px 30px -8px var(--red-glow)}
.btn-red:hover{background:#ff2f36}
.btn-out{border-color:rgba(255,255,255,.28); color:#fff}
.btn-out:hover{border-color:#fff}
.btn-lg{padding:17px 30px; font-size:16px}
.btn-xl{padding:20px 40px; font-size:19px}

/* header */
header.bar{position:sticky; top:0; z-index:50; background:rgba(11,11,12,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 24px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:46px; width:auto}
.brand-txt{display:flex; flex-direction:column; line-height:1.1}
.brand-txt .mk{font-size:19px; letter-spacing:.03em}
.brand-txt .mk-sub{font-size:10px; letter-spacing:.24em; color:var(--red)}
.nav{display:flex; align-items:center; gap:26px; font-size:14px; font-weight:600}
.nav a{color:var(--mute); transition:color .15s}
.nav a:hover{color:#fff}
.open24-chip{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.08em;
  color:#7CFF9E; padding:7px 12px; border:1px solid rgba(124,255,158,.3); border-radius:999px; background:rgba(124,255,158,.06)}
.odot{width:8px; height:8px; border-radius:50%; background:#7CFF9E; box-shadow:0 0 0 0 rgba(124,255,158,.6); animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(124,255,158,.55)}70%{box-shadow:0 0 0 9px rgba(124,255,158,0)}100%{box-shadow:0 0 0 0 rgba(124,255,158,0)}}
@media (max-width:900px){.nav{display:none}}

/* hero */
.hero{position:relative; padding:74px 0 60px; overflow:hidden}
.hero::before{content:"";position:absolute; inset:-20% -10% auto -10%; height:600px;
  background:radial-gradient(60% 60% at 30% 20%, rgba(230,38,44,.18), transparent 70%); pointer-events:none}
.road-grid{position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px; mask-image:linear-gradient(180deg, black, transparent 85%)}
.hero-in{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
@media (max-width:960px){.hero-in{grid-template-columns:1fr}}
.hero h1{font-size:clamp(40px,6.4vw,74px); line-height:.98; margin:14px 0 20px}
.hero h1 .accent{color:var(--red)}
.hero .cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.hero-badges{display:flex; gap:22px; margin-top:34px; flex-wrap:wrap}
.hb{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--mute)}
.hb b{color:#fff; font-family:'Anton',sans-serif; font-size:20px}
.hero-art{position:relative; display:flex; justify-content:center}
.hero-art .badge-frame{width:100%; max-width:420px; border-radius:20px; padding:14px; background:#000;
  border:1px solid var(--line); box-shadow:0 30px 70px -20px rgba(230,38,44,.35), var(--shadow)}
.hero-art img{width:100%; height:auto; display:block; border-radius:10px}
.sign24{position:absolute; top:-14px; right:6px; transform:rotate(6deg)}

/* neon 24hr sign */
.neon24{display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:10px;
  border:2px solid var(--red); color:var(--red); font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.06em;
  background:rgba(230,38,44,.06); animation:neon-flicker 3.2s infinite}
@keyframes neon-flicker{
  0%,19%,21%,23%,54%,56%,100%{ text-shadow:0 0 6px var(--red-glow), 0 0 22px var(--red-glow); box-shadow:0 0 12px var(--red-glow), inset 0 0 12px rgba(230,38,44,.15);}
  20%,22%,55%{ text-shadow:none; box-shadow:none; opacity:.55 }
}

/* strip marquee */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); overflow:hidden; padding:16px 0}
.strip-track{display:flex; width:max-content; gap:40px; animation:scroll-x 28s linear infinite; will-change:transform}
.strip-track b{font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.05em; color:var(--mute); white-space:nowrap}
.strip-track i{width:6px; height:6px; background:var(--red); display:inline-block; border-radius:50%; margin:0 8px; vertical-align:middle}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* sections generic */
section{padding:88px 0}
.sec-head{max-width:640px; margin-bottom:48px}
.sec-head h2{font-size:clamp(28px,4vw,44px); line-height:1.04}

/* services */
.sgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sgrid{grid-template-columns:1fr}}
.scard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .2s, transform .2s; position:relative; overflow:hidden}
.scard:hover{border-color:rgba(230,38,44,.5); transform:translateY(-4px)}
.scard-art{position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2)}
.scard-art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; filter:saturate(1.05) contrast(1.03)}
.scard:hover .scard-art img{transform:scale(1.06)}
.scard-art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,0) 40%, rgba(11,11,12,.85) 100%)}
.sic{position:absolute; left:16px; bottom:-22px; z-index:2; width:52px; height:52px; border-radius:12px;
  background:var(--red); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -6px var(--red-glow); border:2px solid var(--ink)}
.sic svg{width:26px; height:26px; stroke:#fff}
.scard-body{padding:34px 24px 26px}
.scard h3{font-size:19px; margin-bottom:10px; letter-spacing:.01em}
.scard p{color:var(--mute); font-size:14.5px; line-height:1.6; margin:0 0 18px}
.scard .go{font-size:13px; font-weight:700; color:var(--red); display:inline-flex; align-items:center; gap:6px}

/* 24hr banner */
.band{background:linear-gradient(180deg, var(--surface), var(--ink)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band-in{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center}
@media (max-width:820px){.band-in{grid-template-columns:1fr; text-align:center}.band-in .neon24{margin:0 auto}}
.band h2{font-size:clamp(30px,4.4vw,50px); line-height:1.05}
.band .sub{max-width:52ch}
@media (max-width:820px){.band .sub{margin:0 auto}}

/* reviews */
.rev-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:40px}
.bigrate{display:flex; align-items:center; gap:12px}
.rstars{display:flex; gap:3px; color:#FFC53D}
.rstars svg{width:20px; height:20px; fill:currentColor}
.bigrate b{font-family:'Anton',sans-serif; font-size:30px}
.rev-note{font-size:12px; color:var(--mute-2)}
.rev-rail{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent)}
.rev-track{display:flex; gap:20px; width:max-content; animation:scroll-x 46s linear infinite}
.rev-track:hover{animation-play-state:paused}
.rcard{width:340px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.rcard .rstars{margin-bottom:14px}
.rcard p{color:#e7e7e6; font-size:14.5px; line-height:1.6; margin:0 0 16px}
.rcard .who{display:flex; align-items:center; gap:10px}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:13px; color:var(--red); border:1px solid var(--line)}
.who b{font-size:13.5px; display:block}
.who span{font-size:12px; color:var(--mute-2)}

/* areas */
.areas-in{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media (max-width:900px){.areas-in{grid-template-columns:1fr}}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.chip{padding:9px 16px; border:1px solid var(--line); border-radius:999px; font-size:13.5px; color:var(--mute); background:var(--surface)}
.chip.hub{border-color:var(--red); color:#fff; background:rgba(230,38,44,.1)}
.mapwrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); position:relative; aspect-ratio:4/3}
.mapwrap iframe{width:100%; height:100%; border:0; filter:grayscale(.3) invert(.92) contrast(.9)}
.mapwrap::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none}

/* final CTA */
.final{text-align:center; padding:100px 0}
.final .mk-xl{font-size:clamp(38px,8vw,88px); line-height:.95}
.final .tag{color:var(--red); letter-spacing:.2em; font-size:13px; margin:14px 0 34px; text-transform:uppercase}

footer{border-top:1px solid var(--line); padding:26px 0}
.foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; font-size:13px; color:var(--mute-2)}
.fnav{display:flex; gap:18px}
.fnav a:hover{color:#fff}

.thumbbar{position:fixed; left:0; right:0; bottom:0; z-index:60; padding:12px 16px; background:rgba(11,11,12,.92);
  backdrop-filter:blur(10px); border-top:1px solid var(--line); display:none}
.thumbbar .btn{width:100%}
@media (max-width:760px){.thumbbar{display:block} body{padding-bottom:66px}}
@media (min-width:761px){.topcall{display:inline-flex}}
@media (max-width:760px){.topcall{display:none}}

/* ── mobile optimization pass ─────────────────────────────────────── */
@media (max-width:600px){
  .wrap{padding:0 18px}
  section{padding:56px 0}
  .hero{padding:44px 0 40px}
  .bar-in{padding:10px 18px; gap:10px}
  .brand img{height:36px}
  .brand-txt .mk{font-size:16px}
  .brand-txt .mk-sub{font-size:9px}
  .open24-chip{font-size:10px; padding:6px 9px; gap:5px}
  .hero h1{margin:10px 0 16px}
  .hero .sub{font-size:15.5px}
  .hero-badges{gap:16px 22px; margin-top:26px}
  .hero-art{margin-top:36px}
  .hero-art img{max-width:320px}
  .sign24{position:static; display:block; text-align:center; transform:none; margin-bottom:14px}
  .neon24{font-size:13px; padding:9px 15px}
  .sec-head{margin-bottom:32px}
  .band-in{gap:28px}
  .band .neon24{font-size:16px !important; padding:14px 18px !important; text-align:center; white-space:normal}
  .rcard{width:280px}
  .final{padding:64px 0}
  .foot{flex-direction:column; align-items:flex-start}
}
@media (max-width:380px){
  .nav, .open24-chip .lbl{display:none}
  .brand-txt{display:none}
}