/* Supreme Detailing and Tint — Fusion Tech AI / Website Recycling
   Palette: obsidian black + chrome + golden-yellow accent */

/* ---------- Fonts (self-hosted, no CDN dependency) ---------- */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Anton-400.woff2') format('woff2');}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/BebasNeue-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Inter-700.woff2') format('woff2');}

:root{
  --black:#0a0a0c;
  --ink:#0f0f12;
  --panel:#141418;
  --panel-2:#1b1b21;
  --line:#26262e;
  --yellow:#FFC107;
  --yellow-deep:#e0a600;
  --yellow-glow:rgba(255,193,7,.35);
  --text:#f5f6f8;
  --muted:#a2a7b0;
  --muted-2:#7c828d;
  --chrome-1:#f4f6f9;
  --chrome-2:#c3c8d0;
  --chrome-3:#8b9099;
  --radius:16px;
  --maxw:1200px;
  --chrome-grad:linear-gradient(180deg,#fbfcfe 0%,#d9dde3 42%,#a8aeb8 55%,#e8ebef 100%);
  --shadow:0 20px 50px -18px rgba(0,0,0,.75);
  font-synthesis:none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:#000}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{position:relative}

/* Display type */
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.01em;line-height:.96;text-transform:uppercase}
.kicker{font-family:'Bebas Neue',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);font-size:15px;line-height:1;margin:0 0 14px}
.section-head{max-width:760px;margin-bottom:44px}
.section-title{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;text-transform:uppercase;
  font-size:clamp(38px,6vw,68px);line-height:.94;margin:0 0 12px}
.section-title em{font-style:normal;color:var(--yellow)}
.section-sub{color:var(--muted);font-size:18px;margin:0}
.pad{padding:clamp(64px,9vw,120px) 0}

/* Chrome accent text */
.chrome{background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-weight:700;font-size:16px;letter-spacing:.01em;padding:15px 26px;border-radius:12px;
  cursor:pointer;border:1px solid transparent;overflow:hidden;transition:transform .18s ease,box-shadow .25s ease,background .25s;
  white-space:nowrap}
.btn svg{width:19px;height:19px;flex:none}
.btn-yellow{background:var(--yellow);color:#141100;box-shadow:0 10px 30px -10px var(--yellow-glow)}
.btn-yellow:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px var(--yellow-glow)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--line);backdrop-filter:blur(6px)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--chrome-3);background:rgba(255,255,255,.09)}
/* chrome sweep */
.btn::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn:hover::before{left:140%}
.btn-yellow::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent)}

/* ---------- Header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,backdrop-filter .3s,border-color .3s,padding .3s;
  border-bottom:1px solid transparent;padding:16px 0}
.header.scrolled{background:rgba(10,10,12,.82);backdrop-filter:blur(14px);border-color:var(--line);padding:10px 0}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .mark{width:40px;height:40px;border-radius:10px;background:var(--ink);border:1px solid var(--line);
  display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.brand .mark b{font-family:'Anton',sans-serif;color:var(--yellow);font-size:26px;line-height:1;margin-top:2px}
.brand .txt{line-height:1;min-width:0}
.brand .txt .n{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.06em;display:block}
.brand .txt .s{font-size:10.5px;letter-spacing:.28em;color:var(--muted-2);text-transform:uppercase}
.header nav{display:flex;align-items:center;gap:28px}
.header nav a.lnk{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.header nav a.lnk:hover{color:var(--text)}
.header .call{padding:11px 20px;font-size:15px}
@media(max-width:900px){.header nav a.lnk{display:none}}
@media(max-width:430px){.header .call{padding:11px 16px}.header .call .callnum{display:none}.header .call::after{content:"Call"}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero .poster{background:#000 center/cover no-repeat}
.hero .scrim{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 70% 20%,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.8) 100%),
    linear-gradient(180deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,.15) 30%,rgba(10,10,12,.65) 78%,var(--black) 100%)}
.hero .glow{position:absolute;left:-10%;bottom:-20%;width:60%;height:60%;
  background:radial-gradient(closest-side,var(--yellow-glow),transparent 70%);filter:blur(30px);opacity:.5;pointer-events:none}
.hero-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(44px,7vw,90px);padding-top:120px}
.hero .rate{display:inline-flex;align-items:center;gap:10px;padding:8px 15px 8px 12px;border-radius:999px;
  background:rgba(0,0,0,.5);border:1px solid var(--line);backdrop-filter:blur(6px);margin-bottom:22px;font-size:14px}
.hero .rate .stars{display:inline-flex;gap:2px;color:var(--yellow)}
.hero .rate .stars svg{width:16px;height:16px}
.hero .rate b{font-weight:700}
.hero .rate span{color:var(--muted)}
.hero h1{margin:0;font-size:clamp(46px,10.5vw,132px);letter-spacing:.005em;
  text-shadow:0 8px 40px rgba(0,0,0,.6)}
.hero h1 .l2{display:block;color:var(--yellow)}
.hero .inev{font-family:'Bebas Neue',sans-serif;letter-spacing:.32em;text-transform:uppercase;
  font-size:clamp(15px,2.6vw,22px);color:var(--chrome-2);margin:20px 0 8px;display:flex;align-items:center;gap:16px}
.hero .inev::before{content:"";width:44px;height:2px;background:var(--yellow);flex:none}
.hero .lede{max-width:560px;color:#d7dae0;font-size:clamp(16px,2.2vw,19px);margin:14px 0 30px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px}
.hero .cta .btn{padding:17px 30px;font-size:17px}
.mute{position:absolute;z-index:4;right:22px;bottom:26px;display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid var(--line);
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);transition:.2s}
.mute:hover{border-color:var(--chrome-3);background:rgba(0,0,0,.7)}
.mute svg{width:16px;height:16px;color:var(--yellow)}
.mute .on{display:none}
.mute.playing .off{display:none}.mute.playing .on{display:inline}
@media(max-width:640px){.mute{display:none}}
.hero-sound{display:inline-flex;align-items:center;gap:9px;margin:2px 0 6px;padding:12px 22px 12px 17px;border-radius:999px;border:0;background:var(--yellow,#FFC107);color:#0b0b0d;font-family:inherit;font-weight:800;font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.5);animation:heroPlayPulse 2.2s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.hero-sound:active{transform:scale(.96)}
.hero-sound svg{width:20px;height:20px}
.hero-sound .i-on,.hero-sound .on{display:none}
.hero-sound.playing .i-play,.hero-sound.playing .off{display:none}
.hero-sound.playing .i-on,.hero-sound.playing .on{display:inline}
.hero-sound.playing{animation:none}
@keyframes heroPlayPulse{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 0 rgba(255,193,7,.6)}50%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 13px rgba(255,193,7,0)}}

/* Trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;padding:18px 22px}
.trust .item{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:14.5px;font-weight:500}
.trust .item b{color:var(--text);font-weight:700}
.trust .dot{width:5px;height:5px;border-radius:50%;background:var(--yellow)}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.card{position:relative;background:linear-gradient(180deg,var(--panel),var(--ink));border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px 24px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:#3a3a45;box-shadow:var(--shadow)}
.card::after{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,193,7,.35),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s}
.card:hover::after{opacity:1}
.svc-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:radial-gradient(120% 120% at 30% 20%,#26262e,#141418);border:1px solid var(--line)}
.svc-ico svg{width:26px;height:26px;color:var(--yellow)}
.card.feat .svc-ico{background:linear-gradient(160deg,var(--yellow),var(--yellow-deep));border-color:transparent}
.card.feat .svc-ico svg{color:#1a1400}
.card h3{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.03em;font-size:24px;margin:0 0 8px;text-transform:uppercase}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.card .tag{display:inline-block;margin-bottom:14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.25);padding:4px 10px;border-radius:999px}

/* ---------- Vehicles ---------- */
.vehicles{background:
  linear-gradient(180deg,var(--black),var(--ink) 40%,var(--black));border-top:1px solid var(--line)}
.veh-flex{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.veh-flex{grid-template-columns:1fr;gap:30px}}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;font-size:18px;text-transform:uppercase;
  padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:#dfe2e7;transition:.2s}
.chip:hover{border-color:var(--yellow);color:#fff}
.chip.mopar{background:linear-gradient(160deg,var(--yellow),var(--yellow-deep));color:#1a1400;border-color:transparent}
.veh-copy p{color:var(--muted);font-size:17px}
.veh-copy .mopar-line{font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;color:var(--chrome-2);font-size:20px;margin-top:18px}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}}
@media(max-width:520px){.gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px}}
.tile{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}
.tile:hover img{transform:scale(1.08)}
.tile:hover::after{transform:translateX(120%)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:12.5px;font-weight:600;color:#e9ebef;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));opacity:0;transform:translateY(8px);transition:.3s}
.tile:hover .cap{opacity:1;transform:none}
.tile.big{grid-column:span 2;grid-row:span 2}
@media(max-width:520px){.tile.big{grid-column:span 2;grid-row:span 2}}

/* ---------- Reviews ---------- */
.reviews{background:linear-gradient(180deg,var(--ink),var(--black));border-top:1px solid var(--line)}
.rev-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.badge{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 22px}
.badge .num{font-family:'Anton',sans-serif;font-size:44px;line-height:.9;color:var(--yellow)}
.badge .meta{line-height:1.2}
.badge .stars{display:flex;gap:2px;color:var(--yellow);margin-bottom:4px}
.badge .stars svg{width:17px;height:17px}
.badge .meta span{font-size:13.5px;color:var(--muted)}
.badge .meta a{color:var(--chrome-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.rev-grid{columns:3;column-gap:18px}
@media(max-width:900px){.rev-grid{columns:2}}
@media(max-width:600px){.rev-grid{columns:1}}
.review{break-inside:avoid;margin:0 0 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px}
.review .stars{display:flex;gap:2px;color:var(--yellow);margin-bottom:12px}
.review .stars svg{width:15px;height:15px}
.review q{quotes:none;display:block;font-size:15.5px;color:#e5e7eb;line-height:1.6}
.review q::before,.review q::after{content:""}
.review .who{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:13.5px}
.review .who .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(160deg,var(--yellow),var(--yellow-deep));
  color:#1a1400;font-weight:800;display:grid;place-items:center;font-size:14px;flex:none}
.review .who b{font-weight:700}
.review .who .d{color:var(--muted-2)}

/* ---------- Service area ---------- */
.area{background:var(--ink);border-top:1px solid var(--line)}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:820px){.area-grid{grid-template-columns:1fr;gap:26px}}
.area .pins{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.pin{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line);font-weight:600;font-size:15.5px}
.pin svg{width:18px;height:18px;color:var(--yellow)}
.area .note{margin-top:20px;color:var(--muted);font-size:15px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq-list{max-width:860px;margin:0 auto}
.qa{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:12px;overflow:hidden}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;
  background:none;border:0;color:var(--text);font-family:'Inter',sans-serif;font-size:17px;font-weight:600;
  padding:20px 22px;cursor:pointer}
.qa button svg{width:20px;height:20px;color:var(--yellow);flex:none;transition:transform .25s}
.qa.open button svg{transform:rotate(180deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.qa .a p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:15.5px}

/* ---------- Visit ---------- */
.visit{background:linear-gradient(180deg,var(--black),var(--ink));border-top:1px solid var(--line)}
.visit-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:stretch}
@media(max-width:860px){.visit-grid{grid-template-columns:1fr}}
.info-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px}
.info-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.info-row:last-of-type{border-bottom:0}
.info-row .ico{width:40px;height:40px;border-radius:10px;background:var(--ink);border:1px solid var(--line);
  display:grid;place-items:center;flex:none}
.info-row .ico svg{width:20px;height:20px;color:var(--yellow)}
.info-row h4{margin:0 0 3px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.info-row .v{font-size:16px;font-weight:600}
.info-row .v a:hover{color:var(--yellow)}
.info-row .hrs{font-size:15px;color:var(--muted);margin-top:2px}
.hrs b{color:var(--text)}
.info-card .btn{width:100%;margin-top:22px}
.map-frame{border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:380px;background:var(--panel)}
.map-frame iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:grayscale(.25) contrast(1.05)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);border-top:1px solid var(--line);padding:56px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:26px}}
.footer .brand .mark{width:44px;height:44px}
.footer .brand .mark b{font-size:28px}
.footer .about{color:var(--muted);font-size:15px;margin:16px 0 0;max-width:340px}
.foot-col h5{font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:16px;color:var(--muted-2);text-transform:uppercase;margin:0 0 14px}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:15px;margin:0 0 10px}
.foot-col a:hover{color:var(--yellow)}
.socials{display:flex;gap:12px;margin-top:6px}
.socials a{width:44px;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);
  display:grid;place-items:center;transition:.2s}
.socials a:hover{transform:translateY(-3px);border-color:var(--chrome-3)}
.socials a img{width:24px;height:24px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted-2);font-size:13.5px}
.foot-bottom a{color:var(--chrome-3);font-weight:600}
.foot-bottom a:hover{color:var(--yellow)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn::before,.tile::after{display:none}
}

/* Sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,12,.9);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.callbar .btn{width:100%}
@media(max-width:640px){.callbar{display:block}body{padding-bottom:74px}}