/* ============================================================
   PRIME AUTOSTYLE SOLUTIONS — Scroll Theory Media build
   Design system: "Molten" — warm near-black + burnt orange,
   sampled from a customer's Charger Daytona 392.
   Hand-coded. No frameworks. No tracking pixels except Clarity.
   ============================================================ */

:root{
  /* color */
  --ink:#0c0c0e;          /* page base, warm near-black */
  --steel:#121218;        /* deep panel */
  --smoke:#1a1a22;        /* raised surface */
  --line:#2b2b36;         /* hairline borders */
  --bone:#f1ece4;         /* primary text, warm off-white */
  --dust:#a3a0ac;         /* secondary text */
  --molten:#ff5c1f;       /* THE accent. action + heat. one meaning. */
  --ember:#c23a0f;        /* deep end of the seam gradient */
  --molten-soft:rgba(255,92,31,.12);

  /* type */
  --display:'Archivo',sans-serif;
  --body:'Barlow',sans-serif;
  --font-mono:'Archivo',monospace; /* used by ph-frame labels */

  /* scale 1.333 */
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1.0625rem; --t-md:1.25rem;
  --t-lg:1.667rem; --t-xl:2.22rem; --t-2xl:2.96rem; --t-3xl:3.95rem; --t-4xl:5.26rem;

  /* space */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
  --max:1200px;
  --radius:3px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.55;
  color:var(--bone);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--molten);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--molten);outline-offset:3px}
::selection{background:var(--molten);color:var(--ink)}

h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:1.04;letter-spacing:-.015em}
h1{font-size:clamp(var(--t-2xl),7vw,var(--t-4xl));font-weight:900}
h2{font-size:clamp(var(--t-xl),4.5vw,var(--t-3xl));font-weight:800}
h3{font-size:var(--t-md);font-weight:700;letter-spacing:.01em}
p{max-width:62ch}
strong{color:var(--bone)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s3)}

/* ---------- the heat seam (signature) ---------- */
.seam{
  height:2px;border:0;width:100%;
  background:linear-gradient(90deg,var(--ember),var(--molten) 35%,rgba(255,92,31,0) 90%);
  transform-origin:left center;transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.seam.lit{transform:scaleX(1)}
.seam--short{max-width:140px}

/* eyebrow label */
.eyebrow{
  font-family:var(--display);font-weight:600;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.22em;color:var(--molten);
  display:block;margin-bottom:var(--s2);
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(12,12,14,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s;
}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(12,12,14,.98)}
/* browsers without backdrop-filter (a lot of Android Chrome) get a solid bar, no text bleed */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--ink)}
  .nav.scrolled{background:var(--ink)}
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:.8rem var(--s3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.wordmark{display:flex;flex-direction:column;line-height:1;color:var(--bone)}
.wordmark .wm-top{font-family:var(--display);font-weight:900;font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;font-style:italic}
.wordmark .wm-sub{font-family:var(--display);font-weight:500;font-size:.58rem;letter-spacing:.42em;text-transform:uppercase;color:var(--dust);margin-top:3px}
.wordmark .wm-seam{height:2px;width:100%;margin-top:4px;background:linear-gradient(90deg,var(--ember),var(--molten) 60%,rgba(255,92,31,0))}
.nav-links{display:flex;align-items:center;gap:var(--s3);list-style:none}
.nav-links a{
  font-family:var(--display);font-weight:600;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--bone);
  padding:.35rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--molten);border-bottom-color:var(--molten)}
.nav-cta{margin-left:var(--s1)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:.55rem .7rem;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--bone);margin:5px 0;transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;
  font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.1em;
  padding:.95rem 1.7rem;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:transform .15s,background .2s,color .2s,border-color .2s;
}
.btn:active{transform:translateY(1px)}
.btn-molten{background:var(--molten);color:var(--ink)}
.btn-molten:hover{background:var(--bone);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--molten);color:var(--molten)}
.btn-sm{padding:.6rem 1.1rem;font-size:var(--t-xs)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transform:scale(1.06);transition:transform .2s linear}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(78deg,rgba(12,12,14,.94) 18%,rgba(12,12,14,.55) 52%,rgba(12,12,14,.18) 100%),
             linear-gradient(0deg,var(--ink) 2%,rgba(12,12,14,0) 36%);
}
.hero-inner{padding-top:9rem;padding-bottom:var(--s5)}
.hero h1{margin:var(--s2) 0 var(--s3)}
.hero h1 .h1-sub{
  display:block;font-size:clamp(var(--t-md),2.4vw,var(--t-lg));
  font-weight:600;letter-spacing:.02em;color:var(--dust);margin-top:var(--s2);text-transform:none;font-family:var(--body);
}
.hero-lede{font-size:var(--t-md);color:var(--bone);max-width:54ch;margin-bottom:var(--s4)}
.hero-ctas{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.hero-proof{margin-top:var(--s4);display:flex;gap:var(--s4);flex-wrap:wrap}
.proof-item{display:flex;flex-direction:column;gap:.15rem}
.proof-item .pn{font-family:var(--display);font-weight:900;font-size:var(--t-lg);font-style:italic;color:var(--bone)}
.proof-item .pl{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--dust)}
.proof-item .pn .star{color:var(--molten)}

/* page hero (inner pages) */
.page-hero{position:relative;padding:10rem 0 var(--s5);background:var(--steel);overflow:hidden}
.page-hero.with-img{min-height:62vh;display:flex;align-items:flex-end}
.page-hero .hero-bg{z-index:0}
.page-hero.with-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(78deg,rgba(12,12,14,.94) 22%,rgba(12,12,14,.45) 65%,rgba(12,12,14,.15));}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(var(--t-xl),5.5vw,var(--t-3xl))}
.page-hero .hero-lede{margin-top:var(--s3);margin-bottom:0}

/* ---------- sections ---------- */
.section{padding:var(--s6) 0}
.section--tight{padding:var(--s5) 0}
.section--panel{background:var(--steel)}
.section-head{margin-bottom:var(--s5);max-width:760px}
.section-head p{color:var(--dust);margin-top:var(--s2);font-size:var(--t-md)}

/* trust strip */
.strip{background:var(--steel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-inner{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s3);max-width:var(--max);margin:0 auto;flex-wrap:wrap}
.strip-item{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:600;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.08em}
.strip-item svg{flex:none}

/* service rows (asymmetric, alternating) */
.svc-row{
  display:grid;grid-template-columns:7fr 5fr;gap:var(--s5);align-items:center;
  padding:var(--s5) 0;border-bottom:1px solid var(--line);
}
.svc-row:last-child{border-bottom:0}
.svc-row.flip .svc-media{order:2}
.svc-row.flip .svc-copy{order:1}
.svc-media{position:relative}
.svc-media img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.svc-tag{
  position:absolute;top:14px;left:14px;background:var(--ink);color:var(--molten);
  font-family:var(--display);font-weight:700;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.14em;padding:.4rem .7rem;border-radius:var(--radius);
}
.svc-copy h3{font-size:var(--t-xl);font-weight:800;margin-bottom:var(--s2)}
.svc-copy p{color:var(--dust);margin-bottom:var(--s2)}
.svc-points{list-style:none;margin:var(--s2) 0 var(--s3)}
.svc-points li{display:flex;gap:.65rem;align-items:flex-start;padding:.3rem 0;color:var(--bone)}
.svc-points svg{flex:none;margin-top:.3rem}

/* feature grid (varied, not three identical cards) */
.feat-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s2)}
.feat{
  background:var(--smoke);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4) var(--s3);grid-column:span 4;
}
.feat--wide{grid-column:span 8}
.feat h3{margin:.9rem 0 .5rem;text-transform:none;letter-spacing:0;font-size:var(--t-md)}
.feat p{color:var(--dust);font-size:var(--t-sm)}
.feat svg{color:var(--molten)}

/* testimonials */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.quote{
  background:var(--smoke);border-left:3px solid var(--molten);border-radius:var(--radius);
  padding:var(--s3) var(--s3);
}
.quote p{font-size:var(--t-md);font-weight:500;color:var(--bone)}
.quote footer{margin-top:var(--s2);font-family:var(--display);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--dust)}
.quote .stars{color:var(--molten);letter-spacing:.2em;font-size:var(--t-sm);margin-bottom:.6rem}

/* gallery */
.filter-bar{display:flex;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s4)}
.filter-btn{
  background:transparent;border:1px solid var(--line);color:var(--dust);
  font-family:var(--display);font-weight:600;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.12em;padding:.55rem 1rem;border-radius:var(--radius);cursor:pointer;
  transition:color .2s,border-color .2s;
}
.filter-btn:hover{color:var(--bone)}
.filter-btn.active{border-color:var(--molten);color:var(--molten)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.gal-item{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:var(--smoke)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.gal-item:hover img{transform:scale(1.05)}
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .7rem;
  background:linear-gradient(0deg,rgba(12,12,14,.92),rgba(12,12,14,0));
  font-family:var(--display);font-weight:600;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.12em;
}
.gal-item.hidden{display:none}

/* before/after slider */
.ba{position:relative;overflow:hidden;border-radius:var(--radius);user-select:none;touch-action:none;aspect-ratio:16/10;background:var(--smoke)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-after{clip-path:inset(0 0 0 50%)}
.ba .ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);
  background:var(--molten);cursor:ew-resize;
}
.ba .ba-handle::after{
  content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--molten);color:var(--ink);font-size:.7rem;letter-spacing:.1em;
  padding:.5rem .55rem;border-radius:999px;white-space:nowrap;font-family:var(--display);font-weight:700;
}
.ba-label{
  position:absolute;top:12px;font-family:var(--display);font-weight:700;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.14em;background:rgba(12,12,14,.8);padding:.35rem .6rem;border-radius:var(--radius);
}
.ba-label--before{left:12px}.ba-label--after{right:12px;color:var(--molten)}

/* split proof (the half-coated hood) */
.split-proof{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.split-proof img{border-radius:var(--radius)}

/* placeholder frame — SOP standard, loud on purpose */
.ph-frame{
  display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--molten);border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,.03) 12px,rgba(255,255,255,.03) 24px);
  color:var(--molten);font:600 .8rem/1.4 var(--font-mono,monospace);
  text-align:center;padding:1rem;letter-spacing:.05em;text-transform:uppercase;
}

/* areas */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.area-card{
  background:var(--smoke);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3);display:flex;flex-direction:column;gap:.4rem;color:var(--bone);
  transition:border-color .2s,transform .2s;
}
.area-card:hover{border-color:var(--molten);transform:translateY(-3px)}
.area-card .ac-city{font-family:var(--display);font-weight:800;font-size:var(--t-md);text-transform:uppercase}
.area-card .ac-note{color:var(--dust);font-size:var(--t-sm)}
.area-card .ac-go{color:var(--molten);font-family:var(--display);font-weight:700;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;margin-top:.4rem}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);padding:var(--s3) 0}
.faq-item h3{font-size:var(--t-md);text-transform:none;letter-spacing:0;margin-bottom:.6rem}
.faq-item p{color:var(--dust)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);counter-reset:step}
.step{background:var(--smoke);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--display);font-weight:900;font-style:italic;font-size:var(--t-lg);color:var(--molten);display:block;margin-bottom:.6rem;
}
.step h3{text-transform:none;letter-spacing:0;font-size:var(--t-md);margin-bottom:.4rem}
.step p{color:var(--dust);font-size:var(--t-sm)}

/* CTA band */
.cta-band{position:relative;background:var(--steel);border-top:1px solid var(--line);overflow:hidden}
.cta-band .wrap{padding-top:var(--s5);padding-bottom:var(--s5);position:relative;z-index:1}
.cta-band h2{max-width:16ch}
.cta-band .hero-ctas{margin-top:var(--s3)}
.cta-band::before{
  content:"";position:absolute;right:-8%;top:-40%;width:55%;height:180%;
  background:radial-gradient(closest-side,var(--molten-soft),transparent 70%);
}

/* forms */
.form{display:grid;gap:var(--s2);max-width:560px}
.form label{font-family:var(--display);font-weight:600;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--dust);display:block;margin-bottom:.4rem}
.form input,.form select,.form textarea{
  width:100%;background:var(--smoke);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--bone);font-family:var(--body);font-size:var(--t-base);padding:.85rem .9rem;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--molten)}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-success{
  display:none;border:1px solid var(--molten);border-radius:var(--radius);
  padding:var(--s4);text-align:center;
}
.form-success.show{display:block}
.form-success .check{font-size:2rem;color:var(--molten)}
.form-error{display:none;color:var(--molten);font-size:var(--t-sm);margin-top:.4rem}
.form-error.show{display:block}

/* contact layout */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.info-list{list-style:none;display:grid;gap:var(--s3)}
.info-list li{display:flex;gap:var(--s2);align-items:flex-start}
.info-list svg{flex:none;color:var(--molten);margin-top:.2rem}
.info-list .il-label{font-family:var(--display);font-weight:700;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--dust);display:block;margin-bottom:.2rem}
.map-embed{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:var(--s4)}
.map-embed iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.4) contrast(1.05)}

/* hours table */
.hours{width:100%;border-collapse:collapse;max-width:380px}
.hours td{padding:.45rem 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.hours td:last-child{text-align:right;color:var(--dust)}
.hours tr.today td{color:var(--molten)}

/* footer */
.footer{background:var(--steel);border-top:1px solid var(--line);padding:var(--s5) 0 var(--s4);margin-top:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s4)}
.footer h4{font-family:var(--display);font-weight:700;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.18em;color:var(--dust);margin-bottom:var(--s2)}
.footer ul{list-style:none;display:grid;gap:.45rem}
.footer a{color:var(--bone);font-size:var(--t-sm)}
.footer a:hover{color:var(--molten)}
.footer .f-nap{color:var(--dust);font-size:var(--t-sm);font-style:normal;line-height:1.7}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);color:var(--dust);font-size:var(--t-xs)}
.footer-bottom a{color:var(--dust)}
.footer-bottom a:hover{color:var(--molten)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* sticky mobile call bar */
.callbar{display:none}

/* breadcrumbs */
.crumbs{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;font-family:var(--display);font-weight:600;color:var(--dust);margin-bottom:var(--s2)}
.crumbs a{color:var(--dust)}
.crumbs a:hover{color:var(--molten)}
.crumbs span{color:var(--molten)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .feat,.feat--wide{grid-column:span 6}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .area-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .svc-row{grid-template-columns:1fr;gap:var(--s3)}
  .svc-row.flip .svc-media{order:0}
  .split-proof,.contact-grid{grid-template-columns:1fr;gap:var(--s4)}
}
@media(max-width:760px){
  .nav-links{
    position:fixed;left:0;right:0;top:100%;
    height:100vh;height:100dvh;
    background:var(--ink);
    flex-direction:column;align-items:flex-start;padding:var(--s4) var(--s3);
    gap:var(--s3);display:none;overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:var(--t-md)}
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .feat,.feat--wide{grid-column:span 12}
  .quote-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr}
  .area-grid,.steps{grid-template-columns:1fr}
  .hero{min-height:86vh}
  .hero-inner{padding-top:7.5rem}
  .callbar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:99;
    background:var(--ink);border-top:1px solid var(--line);
  }
  .callbar a{
    flex:1;text-align:center;padding:1rem .5rem;font-family:var(--display);
    font-weight:700;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--bone);
  }
  .callbar a.cb-quote{background:var(--molten);color:var(--ink)}
  body{padding-bottom:54px}
  .footer-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .seam{transform:scaleX(1)}
  html{scroll-behavior:auto}
}

/* ---------- VLT shade strip (window tinting page) ---------- */
.vlt-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.vlt{position:relative;min-height:200px;padding:var(--s3) var(--s2);display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;
  background:linear-gradient(180deg, rgba(241,236,228,calc(.55 - var(--shade)*.5)) 0%, rgba(12,12,14,var(--shade)) 100%), var(--smoke);}
.vlt-pct{font-family:var(--display);font-weight:900;font-size:var(--t-xl);line-height:1;color:var(--bone)}
.vlt-note{font-size:var(--t-sm);color:var(--dust);max-width:20ch}
@media (max-width:760px){.vlt-strip{grid-template-columns:repeat(2,1fr)}.vlt{min-height:150px}}

/* ---------- PPF coverage diagrams ---------- */
.cov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.cov{background:var(--smoke);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4) var(--s3)}
.cov svg{width:140px;height:70px;margin-bottom:var(--s2);display:block}
.cov .cov-body{fill:none;stroke:var(--line);stroke-width:2}
.cov .cov-hot{fill:var(--molten-soft);stroke:var(--molten);stroke-width:2}
.cov h3{margin-bottom:.6rem}
.cov p{color:var(--dust);font-size:var(--t-sm)}
@media (max-width:760px){.cov-grid{grid-template-columns:1fr}}

/* ---------- FAQ as <details> ---------- */
details.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:"+";font-family:var(--display);font-weight:600;font-size:var(--t-lg);color:var(--molten);line-height:1;flex:none;transition:transform .25s ease}
details.faq-item[open] summary::after{transform:rotate(45deg)}
details.faq-item summary h3{margin-bottom:0}
details.faq-item[open] p{margin-top:.8rem}
details.faq-item summary:focus-visible{outline:2px solid var(--molten);outline-offset:3px}

/* ============================================================
   v2 — plotter texture, squeegee + buffer reveals, ST credit
   ============================================================ */

/* ---------- plotter cut-pattern (the shop's terminal grid) ----------
   Every tint job starts as cut lines on film. So do our panels. */
.section--panel,.page-hero{
  position:relative;
  background-color:var(--steel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='rgba(241,236,228,0.05)' stroke-width='1'%3E%3Cpath d='M22 46 L214 30 Q256 30 262 66 L268 132 Q268 156 244 158 L44 162 Q24 160 22 138 Z'/%3E%3Cpath d='M288 38 L344 38 Q352 38 350 48 L340 112 Q338 122 328 118 L292 100 Q284 96 286 86 Z'/%3E%3Cpath d='M30 216 H330' stroke-dasharray='7 11'/%3E%3Cpath d='M48 252 L180 244 Q210 243 214 266 L218 308 Q218 324 202 326 L66 330 Q50 330 48 314 Z' stroke-dasharray='3 6'/%3E%3C/g%3E%3Cg stroke='rgba(255,92,31,0.11)' stroke-width='1' fill='none'%3E%3Cpath d='M306 250 v22 M295 261 h22'/%3E%3Ccircle cx='306' cy='261' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:360px 360px;
  overflow:hidden;
}
.section--panel > .wrap,.page-hero > .wrap{position:relative;z-index:2}

/* slow film sheen drifting across the panel */
.section--panel::before{
  content:"";position:absolute;inset:-20% -60%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(241,236,228,.025) 50%,transparent 58%);
  animation:sheen 14s linear infinite;
}
@keyframes sheen{from{transform:translateX(-30%)}to{transform:translateX(30%)}}
@media (prefers-reduced-motion:reduce){.section--panel::before{animation:none}}

/* ---------- fx scaffolding (built by JS, headings stay clean in DOM) ---------- */
.fx{position:relative;display:inline-block}
.fx-clone{position:absolute;inset:0;pointer-events:none;user-select:none}

/* ---------- squeegee reveal (tint) ---------- */
.fx--squeegee .fx-base{clip-path:inset(0 100% 0 0)}
.fx--squeegee .fx-wet{
  filter:blur(2.5px);opacity:.5;
  text-shadow:0 3px 7px rgba(241,236,228,.28);
  clip-path:inset(0 0 0 0);
}
.fx--squeegee .fx-drop{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,rgba(241,236,228,.5),rgba(241,236,228,.12) 60%,transparent 70%);
}
.fx--squeegee .fx-bar{
  position:absolute;top:-18%;bottom:-18%;left:0;width:9px;border-radius:5px;
  transform:translateX(-160%) rotate(5deg);opacity:0;
  background:linear-gradient(180deg,#e8e3da,#9b968d);
  border-left:3px solid var(--molten);
  box-shadow:0 0 14px rgba(255,92,31,.35);
}
.fx--squeegee.go .fx-base{animation:sqDry 1.25s cubic-bezier(.5,.05,.3,1) .15s forwards}
.fx--squeegee.go .fx-wet{animation:sqWet 1.25s cubic-bezier(.5,.05,.3,1) .15s forwards}
.fx--squeegee.go .fx-bar{animation:sqBar 1.25s cubic-bezier(.5,.05,.3,1) .15s forwards}
.fx--squeegee.go .fx-drop{animation:dropGone .5s ease forwards;animation-delay:var(--dd,.5s)}
@keyframes sqDry{to{clip-path:inset(0 -3% 0 0)}}
@keyframes sqWet{to{clip-path:inset(0 0 0 103%)}}
@keyframes sqBar{0%{transform:translateX(-160%) rotate(5deg);opacity:0}8%{opacity:1}
  90%{opacity:1}
  100%{left:100%;transform:translateX(-110%) rotate(5deg);opacity:0}}
@keyframes dropGone{to{opacity:0;transform:translateY(4px) scale(.6)}}

/* ---------- buffer polish reveal (ceramic) ---------- */
.fx--buffer .fx-dull{
  filter:blur(4px) saturate(.35) brightness(.7);
  clip-path:inset(0 0 0 0);
}
.fx--buffer .fx-pad{
  position:absolute;top:50%;left:0;width:1.5em;height:1.5em;margin-top:-.75em;
  border-radius:50%;transform:translateX(-160%);opacity:0;
  background:
    radial-gradient(circle at 50% 50%,#3a3a44 0 18%,transparent 19%),
    conic-gradient(#efece4 0 25%,#b9b4aa 0 50%,#efece4 0 75%,#b9b4aa 0 100%);
  border:2px solid #55505a;
  box-shadow:0 0 16px rgba(255,92,31,.28), inset 0 0 6px rgba(0,0,0,.5);
}
.fx--buffer.go .fx-dull{animation:bfClear 1.5s cubic-bezier(.45,.05,.35,1) .15s forwards}
.fx--buffer.go .fx-pad{animation:bfPad 1.5s cubic-bezier(.45,.05,.35,1) .15s forwards}
.fx--buffer.go::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(64deg,transparent 40%,rgba(241,236,228,.30) 50%,transparent 60%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:-200% 0;
  animation:bfShine .8s ease-out 1.6s forwards;
}
@keyframes bfClear{to{clip-path:inset(0 0 0 103%)}}
@keyframes bfPad{0%{left:0;transform:translateX(-160%) translateY(0);opacity:0}
  8%{opacity:1}
  30%{transform:translateX(-50%) translateY(-12%)}
  60%{transform:translateX(-50%) translateY(12%)}
  92%{opacity:1}
  100%{left:100%;transform:translateX(-105%) translateY(0);opacity:0}}
@keyframes bfShine{to{background-position:200% 0}}

/* the spinning face of the buffer pad */
.fx--buffer .fx-pad i{
  position:absolute;inset:3px;border-radius:50%;display:block;
  background:conic-gradient(rgba(241,236,228,.9) 0 12%,transparent 0 50%,rgba(241,236,228,.55) 0 62%,transparent 0);
}
.fx--buffer.go .fx-pad i{animation:padSpin .4s linear infinite}
@keyframes padSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .fx .fx-clone,.fx .fx-bar,.fx .fx-pad{display:none!important}
  .fx .fx-base{clip-path:none!important;animation:none!important}
  .fx--buffer.go::after{display:none}
}

/* ---------- "Crafted by scroll_theory" footer credit ---------- */
.st-credit{
  color:inherit;opacity:.6;text-decoration:none;
  transition:opacity .2s ease,color .2s ease;
}
.st-wm{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:lowercase}
.st-credit u{color:#BFFF00;text-decoration:none;font-style:normal;font-weight:700}
.st-credit:hover{opacity:1;color:#BFFF00}

/* ============================================================
   v3 — fixes + PPF film effect + audit upgrades
   ============================================================ */

/* FIX: clip-path on inline boxes mangles wrapped lines (the vanishing
   city name). Block-level + fit-content clips the whole heading box. */
.fx{display:block;width:fit-content}
.fx-base{display:block}

/* FIX: .nav-links a was overriding the quote button's padding */
.nav-links .nav-cta a{padding:.6rem 1.15rem;border-bottom:none}
.nav-links .nav-cta a:hover{border-bottom:none}

/* ---------- PPF film-lay reveal ---------- */
.fx--ppf .fx-film{
  position:absolute;inset:-8% 0;border-radius:4px;pointer-events:none;
  background:linear-gradient(115deg,rgba(241,236,228,.15),rgba(241,236,228,.04) 38%,rgba(241,236,228,.17) 58%,rgba(241,236,228,.05));
  border:1px solid rgba(241,236,228,.25);
  opacity:0;transform:translateY(-130%);
}
.fx--ppf .fx-bub{
  position:absolute;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 35% 30%,rgba(241,236,228,.55),rgba(241,236,228,.15) 60%,transparent 72%);
}
.fx--ppf .fx-hbar{
  position:absolute;left:0;right:0;height:7px;border-radius:4px;pointer-events:none;
  top:-16%;opacity:0;transform:rotate(-1.5deg);
  background:linear-gradient(90deg,#e8e3da,#9b968d);
  box-shadow:0 0 12px rgba(255,92,31,.35), 0 2px 0 var(--molten);
}
.fx--ppf.go .fx-film{animation:ppfFilm 2.9s cubic-bezier(.45,.05,.35,1) forwards}
.fx--ppf.go .fx-bub{animation:ppfBub .45s ease forwards;animation-delay:var(--bd,1s)}
.fx--ppf.go .fx-hbar{animation:ppfBar 2.1s cubic-bezier(.45,.05,.35,1) .65s forwards}
@keyframes ppfFilm{
  0%{opacity:0;transform:translateY(-130%)}
  14%{opacity:1;transform:translateY(0)}
  82%{opacity:1}
  100%{opacity:.28;transform:translateY(0)}
}
@keyframes ppfBub{0%{opacity:.9}100%{opacity:0;transform:scale(.5)}}
@keyframes ppfBar{
  0%{top:-16%;opacity:0}
  6%{opacity:1}
  34%{top:102%}
  62%{top:-10%}
  94%{top:102%;opacity:1}
  100%{top:102%;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .fx--ppf .fx-film,.fx--ppf .fx-hbar,.fx--ppf .fx-bub{display:none!important}
}

/* ---------- skip link (a11y) ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--molten);color:var(--ink);font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:var(--t-xs);
  padding:.8rem 1.2rem;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0}

/* audit: service row titles deserve more presence (and the fx land better) */
.svc-copy h3{font-size:var(--t-lg);margin-bottom:.9rem}

/* ============================================================
   v4 — mobile hardening
   ============================================================ */

/* catch-all: the layout viewport can never expand past the screen */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:clip}

/* mobile hero: content-driven height, breathing room up top, no soft parallax upscale */
@media(max-width:760px){
  .hero{min-height:auto}
  .hero-bg img{transform:none}
  .hero-inner{padding-top:8.5rem;padding-bottom:var(--s4)}
  .hero-lede{margin-top:var(--s3)}
  .hero-proof{gap:var(--s3) var(--s4);margin-top:var(--s4)}
  .hero-proof .pn{font-size:var(--t-lg)}
  .page-hero{padding-top:8.5rem}
}