/* ============================================================
   SPOKE — the alloy wheel workshop
   Scoped to body.d-spoke. 1rem = 10px.
   ============================================================ */
body.d-spoke{
  --sp-bg:#0f1114;--sp-bg2:#16191e;--sp-card:#1b1f25;--sp-ink:#f2f4f7;--sp-soft:#b9c0ca;--sp-mute:#8a929e;--sp-line:#2a3038;
  --sp-hot:#ff6a1a;--sp-hot2:#ffb347;--sp-steel:#c9d0d9;
  --sp-r:14px;
  --bg-primary:var(--sp-bg);--bg-secondary:var(--sp-bg2);--bg-card:var(--sp-card);--bg-inset:#20252c;
  --fg-primary:var(--sp-ink);--fg-soft:var(--sp-soft);--fg-muted:var(--sp-mute);--border-color:var(--sp-line);--border-strong:#3a414b;
  background:var(--sp-bg);color:var(--sp-ink);font-family:'Barlow',system-ui,sans-serif
}
body.d-spoke h1,body.d-spoke h2,body.d-spoke h3{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;letter-spacing:.005em;text-transform:uppercase}
body.d-spoke h2 span{color:var(--sp-hot)}
body.d-spoke .bx-nav{background:rgba(15,17,20,.86);border-color:var(--sp-line)}
body.d-spoke .bx-nav a,body.d-spoke .bx-brand{color:var(--sp-ink)}
body.d-spoke .bx-brand-mark{border-radius:50%;background:#fff}
body.d-spoke .bx-nav-cta{background:var(--sp-hot);color:#1a0b00;border-radius:999px}
.sp-kick{font-size:1.2rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sp-hot)}

/* hero */
.sp-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 6rem) 2.4rem 0;background:radial-gradient(1200px 600px at 78% 40%,rgba(255,106,26,.16),transparent 60%),linear-gradient(180deg,#0b0d10,var(--sp-bg))}
.sp-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 40%,#000 30%,transparent 75%)}
.sp-hero-in{position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center;padding-bottom:7rem}
.sp-over{display:flex;align-items:center;gap:1.2rem;font-size:1.3rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-soft)}
.sp-over span{width:36px;height:3px;background:var(--sp-hot);border-radius:2px}
.sp-hero h1{font-size:clamp(5.2rem,8.6vw,11rem);line-height:.9;margin:2rem 0 2rem;background:linear-gradient(180deg,#fff 30%,#9aa3ae);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-tag{font-size:clamp(1.8rem,2vw,2.2rem);line-height:1.5;color:var(--sp-soft);max-width:44ch}
.sp-actions{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:3.2rem}
.sp-btn{display:inline-flex;align-items:center;gap:1rem;padding:1.6rem 2.8rem;border-radius:999px;font-weight:700;font-size:1.55rem;letter-spacing:.02em;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.sp-btn-main{background:linear-gradient(135deg,var(--sp-hot),var(--sp-hot2));color:#1a0b00;box-shadow:0 14px 40px rgba(255,106,26,.4)}
.sp-btn-main:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(255,106,26,.5)}
.sp-btn-line{border:1.5px solid var(--sp-line);color:var(--sp-ink);background:rgba(255,255,255,.03)}
.sp-btn-line:hover{border-color:var(--sp-steel)}
.sp-facts{display:flex;flex-wrap:wrap;gap:3.2rem;margin-top:4rem;padding-top:2.6rem;border-top:1px solid var(--sp-line)}
.sp-facts dt{font-size:1.1rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-mute)}
.sp-facts dd{font-family:'Barlow Condensed',sans-serif;font-size:3rem;font-weight:700;margin-top:.2rem}

/* the wheel */
.sp-wheel{position:relative;width:min(520px,100%);aspect-ratio:1;margin-left:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.sp-wheel-svg{width:100%;height:100%;animation:sp-turn 18s linear infinite}
.sp-wheel:hover .sp-wheel-svg{animation-duration:4s}
@keyframes sp-turn{to{transform:rotate(360deg)}}
.sp-tread rect{fill:#24272c}
.sp-lip{fill:url(#spMetal)}
.sp-barrel{fill:#2b3038}
.sp-spoke{fill:url(#spMetal)}
.sp-cut{fill:#fff;opacity:.55}
.sp-hub{fill:#3a414b;stroke:url(#spMetal);stroke-width:6}
.sp-bolt{fill:#d8dde4}
.sp-glint{position:absolute;inset:12%;border-radius:50%;pointer-events:none;background:conic-gradient(from 200deg,transparent 0 40deg,rgba(255,255,255,.55) 52deg,transparent 64deg 360deg);mix-blend-mode:screen;animation:sp-glint 5.5s ease-in-out infinite}
@keyframes sp-glint{0%,100%{transform:rotate(-30deg);opacity:.2}50%{transform:rotate(60deg);opacity:.9}}
.sp-hubmark{position:absolute;left:50%;top:50%;width:17%;height:17%;transform:translate(-50%,-50%);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 0 4px #3a414b}
.sp-hubmark img{width:82%;height:82%;object-fit:contain}
.sp-hubmark span{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:2.6rem;color:#111}
.sp-ticker{position:relative;z-index:1;margin:0 -2.4rem;border-top:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line);background:var(--sp-hot);color:#1a0b00;overflow:hidden;white-space:nowrap}
.sp-ticker>div{display:inline-flex;align-items:center;gap:2.4rem;padding:1.4rem 0;animation:sp-tick 40s linear infinite;font-family:'Barlow Condensed',sans-serif;font-size:1.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sp-ticker i{font-style:normal;opacity:.6}
@keyframes sp-tick{to{transform:translateX(-50%)}}

/* sections */
.sp-sec{padding:9rem 2.4rem 0}
.sp-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.sp-head{margin-bottom:3.6rem}
.sp-head h2{font-size:clamp(3.6rem,5.2vw,6.4rem);line-height:.98;margin-top:1rem}
.sp-bays{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.4rem}
.sp-bay{position:relative;display:flex;flex-direction:column;gap:1.2rem;padding:2.8rem;border-radius:var(--sp-r);background:linear-gradient(180deg,var(--sp-card),#15181d);border:1px solid var(--sp-line);overflow:hidden;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.sp-bay::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sp-hot);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.sp-bay:hover{transform:translateY(-5px);border-color:#3a414b;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.sp-bay:hover::before{transform:scaleY(1)}
.sp-bay-no{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.18em;color:var(--sp-mute)}
.sp-bay>i{width:56px;height:56px;border-radius:50%;background:rgba(255,106,26,.12);color:var(--sp-hot);display:flex;align-items:center;justify-content:center;font-size:2.2rem}
.sp-bay-img{display:block;margin:0 -2.8rem;aspect-ratio:16/10;overflow:hidden}
.sp-bay-img img{width:100%;height:100%;object-fit:cover}
.sp-bay h3{font-size:2.3rem;line-height:1.05}
.sp-bay p{font-size:1.45rem;line-height:1.6;color:var(--sp-soft)}
.sp-bay-cta{margin-top:auto;padding-top:1rem;font-weight:700;font-size:1.35rem;color:var(--sp-hot);display:flex;gap:.6rem;align-items:center}
.sp-price{font-family:'Barlow Condensed',sans-serif;font-size:2.4rem;color:var(--sp-hot2);margin-top:auto}
.sp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--sp-line);border:1px solid var(--sp-line);border-radius:var(--sp-r);overflow:hidden}
.sp-steps li{background:var(--sp-card);padding:2.6rem;display:flex;flex-direction:column;gap:.8rem}
.sp-steps span{font-family:'Barlow Condensed',sans-serif;font-size:3.6rem;font-weight:700;color:var(--sp-hot)}
.sp-steps b{font-size:1.7rem}
.sp-steps small{font-size:1.4rem;color:var(--sp-soft);line-height:1.5}
.sp-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;padding:3.6rem;border-radius:var(--sp-r);background:linear-gradient(135deg,#1e2228,#121418);border:1px solid var(--sp-line)}
.sp-why>div{display:flex;flex-direction:column;gap:.6rem}
.sp-why i{color:var(--sp-hot);font-size:2.2rem}
.sp-why b{font-family:'Barlow Condensed',sans-serif;font-size:2.2rem;text-transform:uppercase}
.sp-why small{color:var(--sp-soft);font-size:1.4rem;line-height:1.5}
.sp-about{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:center}
.sp-photo{position:relative;margin:0;border-radius:var(--sp-r);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--sp-line)}
.sp-photo img{width:100%;height:100%;object-fit:cover}
.sp-photo figcaption{position:absolute;left:1.6rem;bottom:1.6rem;padding:.6rem 1.4rem;border-radius:999px;background:var(--sp-hot);color:#1a0b00;font-weight:700;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase}
.sp-prose p{font-size:1.65rem;line-height:1.75;color:var(--sp-soft)}
.sp-prose p+p{margin-top:1.4rem}
.sp-prose .sp-lead{font-size:2rem;line-height:1.55;color:var(--sp-ink)}
.sp-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.sp-gal-item{aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--sp-line)}
.sp-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.sp-gal-item:hover img{transform:scale(1.07)}
.sp-revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.sp-revs figure{padding:2.8rem;border-radius:var(--sp-r);background:var(--sp-card);border:1px solid var(--sp-line)}
.sp-revs blockquote{font-size:1.6rem;line-height:1.6}
.sp-revs figcaption{margin-top:1.4rem;font-size:1.35rem;color:var(--sp-mute)}
.sp-faq details{border-bottom:1px solid var(--sp-line)}
.sp-faq summary{display:flex;justify-content:space-between;gap:2rem;align-items:center;padding:2.2rem 0;cursor:pointer;list-style:none;font-size:1.8rem;font-weight:600}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary i{color:var(--sp-hot);transition:transform .3s}
.sp-faq details[open] summary i{transform:rotate(45deg)}
.sp-faq p{padding:0 0 2.2rem;font-size:1.55rem;line-height:1.7;color:var(--sp-soft);max-width:75ch}
body.d-spoke .hours-row{border-radius:10px;background:var(--sp-card);border-color:var(--sp-line)}
body.d-spoke .hours-row.is-today{border-color:var(--sp-hot)}
.sp-contact{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.sp-contact-card{padding:4.2rem;border-radius:var(--sp-r);background:linear-gradient(150deg,#ff6a1a,#c2410c);color:#1a0b00}
.sp-contact-card .sp-kick{color:#1a0b00;opacity:.75}
.sp-contact-card h2{font-size:clamp(3.2rem,4.2vw,5rem);margin:1rem 0 1.6rem;line-height:.98}
.sp-contact-card h2 span{color:#fff}
.sp-contact-card>p:not(.sp-kick){font-size:1.6rem;line-height:1.6;margin-bottom:2.4rem;color:rgba(26,11,0,.85)}
body.d-spoke .sp-contact-card .ci{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);color:#1a0b00}
body.d-spoke .sp-contact-card .ci small,body.d-spoke .sp-contact-card .ci span{color:#1a0b00}
body.d-spoke .sp-contact-card .ci-ico{background:#1a0b00;color:#ff8a3d}
body.d-spoke .contact-form{border-radius:var(--sp-r);padding:4rem;background:var(--sp-card);border-color:var(--sp-line)}
body.d-spoke .cf-field input,body.d-spoke .cf-field textarea{border-radius:10px;background:#12151a;border-color:var(--sp-line);color:var(--sp-ink)}
body.d-spoke .btn-onbiz{background:var(--sp-hot);color:#1a0b00;border-radius:999px;text-transform:none;letter-spacing:0;font-size:1.55rem}
.sp-map{margin-top:1.6rem}
body.d-spoke .biz-map{border-radius:var(--sp-r);filter:grayscale(.4) contrast(1.05)}
.sp-share{max-width:var(--max-w);margin:4rem auto 0;padding:0 2.4rem}
body.d-spoke .bx-foot{margin-top:9rem}
@media (prefers-reduced-motion:reduce){.sp-wheel-svg,.sp-glint,.sp-ticker>div{animation:none}}
@media (max-width:980px){
  .sp-hero-in,.sp-about,.sp-contact{grid-template-columns:1fr}
  .sp-wheel{margin:0 auto;width:min(420px,88%)}
  .sp-photo{aspect-ratio:16/10}
  .sp-gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .sp-hero{padding:calc(var(--nav-h) + 4rem) 1.6rem 0}
  .sp-ticker{margin:0 -1.6rem}
  .sp-sec{padding:6.4rem 1.6rem 0}
  .sp-gal{grid-template-columns:1fr 1fr}
  .sp-facts{gap:2.2rem}
  .sp-contact-card,body.d-spoke .contact-form{padding:2.6rem}
  .sp-share{padding:0 1.6rem}
}