/* ============================================================
   Keefe's Kustoms — premium automotive system
   Black / charcoal · crimson red · chrome · white
   ============================================================ */
:root{
  --ink:#0c0c0e;
  --char:#141417;
  --panel:#1b1b20;
  --panel-2:#101014;
  --paper:#f6f5f2;
  --white:#ffffff;
  --red:#d81f26;
  --red-deep:#a3161c;
  --red-bright:#ff4d54;
  --chrome:#d8d9dd;
  --line:rgba(255,255,255,.10);
  --line-dark:rgba(12,12,14,.10);
  --muted:#9a9aa3;
  --muted-dark:#5b5b63;
  --head:'Barlow Condensed',sans-serif;
  --body:'Inter',sans-serif;
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.skip-link{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:.6rem 1rem;z-index:200}
.skip-link:focus{left:.5rem;top:.5rem}
:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
.hero :focus-visible,.section-dark :focus-visible,.band :focus-visible,.section-contact :focus-visible,.reel-sound:focus-visible{outline-color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(12,12,14,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.25rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-mark{width:44px;height:44px;border-radius:50%}
.brand-word{font-family:var(--head);font-weight:800;font-size:1.4rem;letter-spacing:.05em;color:var(--white);line-height:1}
.brand-word span{color:var(--red)}
.nav-links{display:flex;gap:1.7rem;list-style:none;align-items:center}
.nav-links a{color:#d6d6dc;font-size:.92rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--white)}
.nav-cta{background:var(--red);color:var(--white)!important;padding:.5rem 1.1rem;border-radius:4px;font-weight:600}
.nav-cta:hover{background:var(--red-deep)}
.nav-call{color:#fff!important;border:1px solid rgba(255,255,255,.32);padding:.45rem 1rem;border-radius:4px;font-weight:600}
.nav-call:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:.25s;transform-origin:center}
.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-weight:600;font-size:1rem;padding:.85rem 1.7rem;border-radius:4px;transition:transform .15s,background .2s,border-color .2s;cursor:pointer;border:0}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:var(--red-deep)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:var(--white)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.05)}
.btn-block{width:100%;text-align:center}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.hero-glow{position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 60% at 78% 25%,rgba(216,31,38,.22),transparent 60%),
  radial-gradient(ellipse 60% 50% at 10% 90%,rgba(216,31,38,.10),transparent 60%),
  linear-gradient(160deg,#141418 0%,#0c0c0e 60%);pointer-events:none}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:4.5rem 1.25rem 4rem;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.kicker{font-family:var(--head);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.82rem;color:var(--red);margin-bottom:1rem}
/* brighter red for small type on dark surfaces (AA); base .kicker stays --red on paper sections */
.hero .kicker,.section-dark .kicker,.section-reel .kicker,.band .kicker,.section-contact .kicker{color:var(--red-bright)}
.hero h1{font-family:var(--head);font-weight:800;font-size:clamp(2.5rem,5.5vw,4.3rem);line-height:1.02;letter-spacing:.01em;text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-sub{max-width:32rem;margin:1.3rem 0 1.9rem;color:#c9c9d0;font-size:1.06rem}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.trust-strip{list-style:none;display:flex;gap:1rem 1.8rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.trust-strip li{font-size:.86rem;color:#b9b9c2;position:relative;padding-left:1.05rem}
.trust-strip li::before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;background:var(--red);transform:rotate(45deg)}
.hero-frame{position:relative;border-radius:8px;overflow:hidden;border:2px solid rgba(216,31,38,.5);box-shadow:0 24px 60px rgba(0,0,0,.55);aspect-ratio:4/5;background:#000}
.hero-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hero-frame:hover img{transform:scale(1.05)}
.frame-tag{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;font-family:var(--head);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;padding:.4rem .8rem}

/* ---------- Cinematic zoom-scroll showcase ---------- */
.showcase{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden;background:#0c0c0e;color:#fff;isolation:isolate}
.showcase-media{position:absolute;inset:-10% -6%;z-index:0;transform:scale(var(--sc,1.2)) translateY(var(--py,0));will-change:transform}
.showcase-media img{width:100%;height:100%;object-fit:cover}
.showcase-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,12,14,.62),rgba(12,12,14,.3) 42%,rgba(12,12,14,.85)),radial-gradient(ellipse 60% 50% at 50% 60%,transparent,rgba(12,12,14,.4))}
.showcase-copy{position:relative;z-index:2;text-align:center;max-width:660px;padding:3rem 1.5rem}
.showcase-copy .kicker{color:var(--red-bright)}
.showcase-copy h2{color:#fff;font-size:clamp(2.4rem,6vw,4.1rem);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.showcase-copy .lede{color:#e6e6ec;margin:0 auto 1.7rem;text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* ---------- Section shells ---------- */
.section{padding:5rem 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.wrap.narrow{max-width:820px}
h2{font-family:var(--head);font-weight:800;font-size:clamp(1.9rem,4.4vw,2.9rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.06;margin-bottom:1rem}
.lede{font-size:1.08rem;color:var(--muted-dark);max-width:40rem;margin-bottom:1.4rem}
.center-k,.center-h,.center-l{text-align:center}
.center-k,.center-l{margin-left:auto;margin-right:auto}
.section-dark{background:var(--ink);color:var(--white)}
.section-dark .lede{color:#c9c9d0}

/* ---------- Before / After slider ---------- */
.ba{position:relative;max-width:640px;margin:2.5rem auto 0;border-radius:8px;overflow:hidden;border:2px solid rgba(12,12,14,.12);box-shadow:0 18px 50px rgba(12,12,14,.14);aspect-ratio:3/4;user-select:none;touch-action:pan-y}
.ba-img{position:absolute;inset:0}
.ba-img img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-before{inset:0;z-index:2;clip-path:inset(0 50% 0 0)}
.ba-before img{width:100%;height:100%;object-fit:cover}
.ba-badge{position:absolute;top:.8rem;z-index:4;font-family:var(--head);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;padding:.3rem .7rem;border-radius:3px;color:#fff}
.ba-badge-before{left:.8rem;background:rgba(12,12,14,.72)}
.ba-badge-after{right:.8rem;background:var(--red)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:3;transform:translateX(-1px);pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.4);display:grid;place-items:center}
.ba-handle span::before{content:"‹ ›";font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-1px}
.ba-sr{position:absolute;left:-999px}
#baRange{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba:has(#baRange:focus-visible){outline:3px solid var(--red);outline-offset:3px}
.ba:has(#baRange:focus-visible) .ba-handle span{box-shadow:0 0 0 3px var(--red),0 3px 12px rgba(0,0,0,.4)}

/* ---------- Service cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.25rem}
.card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--chrome);border-radius:6px;padding:1.9rem 1.6rem;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.card-red{border-top-color:var(--red)}
.card-tag{display:inline-block;font-family:var(--head);font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:.72rem;color:var(--red-bright);margin-bottom:.7rem}
.card h3{font-family:var(--head);font-weight:700;font-size:1.5rem;text-transform:uppercase;margin-bottom:.5rem;color:#fff}
.card p{color:#c2c2ca;font-size:.95rem}
.price{font-family:var(--head);font-weight:800;font-size:2.3rem;color:#fff;margin-top:1.1rem}
.price span{font-size:1rem;font-weight:600;color:var(--muted);text-transform:none}
.fine{font-size:.82rem;color:var(--muted);margin-top:.35rem}
.card-link{margin-top:auto;padding-top:1.2rem;color:var(--red-bright);font-weight:600;font-size:.9rem;align-self:flex-start}
.card-link:hover{color:#fff}

/* ---------- Split / Why ---------- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:3rem;align-items:center}
.quote{font-style:italic;color:var(--ink);border-left:3px solid var(--red);padding-left:1.1rem;font-size:1.18rem}
.checks{list-style:none;margin-top:1.4rem}
.checks li{padding:.5rem 0 .5rem 1.9rem;position:relative;color:#3a3a42;font-size:.98rem}
.checks li strong{color:var(--ink)}
.checks li::before{content:"✓";position:absolute;left:0;top:.5rem;color:var(--red);font-weight:800}
.proof-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.proof-tile{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line-dark)}
.proof-tile img{width:100%;height:340px;object-fit:cover}
.proof-tile figcaption{position:absolute;left:0;bottom:0;font-family:var(--head);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;color:#fff;background:rgba(12,12,14,.72);padding:.3rem .7rem}
.proof-tile:last-child figcaption{background:var(--red)}

/* ---------- Reel ---------- */
.section-reel{padding:5rem 0;background:linear-gradient(180deg,#0c0c0e,#141417)}
.section-reel h2{color:#fff}
.section-reel .kicker{color:var(--red-bright)}
.section-reel .lede{color:#c9c9d0}
.reel-row{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem;padding:0 1.25rem}
.reel{position:relative;width:300px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;border:2px solid rgba(216,31,38,.45);box-shadow:0 18px 50px rgba(0,0,0,.5);background:#000}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel-sound{position:absolute;bottom:.7rem;right:.7rem;width:44px;height:44px;border-radius:50%;border:0;background:rgba(12,12,14,.7);color:#fff;font-size:1.05rem;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .2s}
.reel-sound:hover{background:var(--red)}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.25rem}
.gtile{border:0;padding:0;background:none;cursor:pointer;border-radius:6px;overflow:hidden;position:relative;aspect-ratio:3/4}
.gtile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gtile::after{content:"⤢";position:absolute;top:.5rem;right:.6rem;color:#fff;font-size:1rem;opacity:0;transition:opacity .25s;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.gtile:hover img{transform:scale(1.06)}
.gtile:hover::after{opacity:1}
.gtile:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---------- Bands (garage atmosphere) ---------- */
.band{position:relative;color:#fff;padding:5.5rem 0;background:#0c0c0e;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:var(--band) center/cover no-repeat;opacity:.5;transform:scale(1.02)}
.band-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,14,.9) 0%,rgba(12,12,14,.55) 55%,rgba(12,12,14,.75) 100%)}
.band-inner{position:relative}
.band-lede{color:#d3d3da}
.band-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.6rem}
.band-price{font-family:var(--head);font-weight:800;font-size:2.6rem;color:#fff}
.band-price span{font-size:1.05rem;font-weight:600;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-list{margin-top:2rem}
.faq-list details{border-bottom:1px solid var(--line-dark);padding:1rem 0}
.faq-list summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;position:relative;padding-right:2rem;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:.25rem;top:-.15rem;color:var(--red);font-family:var(--head);font-weight:700;font-size:1.4rem;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{margin-top:.6rem;color:var(--muted-dark);font-size:.95rem;max-width:44rem}

/* ---------- Contact ---------- */
.section-contact{position:relative;color:#fff;padding:5rem 0;background:#0c0c0e;overflow:hidden}
.section-contact::before{content:"";position:absolute;inset:0;background:var(--band) center/cover no-repeat;opacity:.55}
.section-contact .band-scrim{background:linear-gradient(180deg,rgba(12,12,14,.6),rgba(12,12,14,.8))}
.contact-wrap{position:relative;align-items:start}
.contact-list{list-style:none;margin-top:1.5rem}
.contact-list li{padding:.5rem 0;font-size:1.05rem;color:#d6d6dc;display:flex;gap:.8rem;align-items:baseline}
.contact-list strong{display:inline-block;min-width:4.6rem;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--muted)}
.contact-list a{color:#fff;font-weight:600}
.contact-list a:hover{color:var(--red-bright)}
.contact-form{background:rgba(20,20,24,.82);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:8px;padding:1.8rem 1.6rem;display:grid;gap:1rem}
.contact-form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600;color:#c9c9d0}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-size:.95rem;color:#fff;background:#0d0d11;border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:.65rem .8rem;width:100%}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.form-note{font-size:.9rem;color:#8fd18f;min-height:1.2em}
.form-alt{font-size:.88rem;color:#c9c9d0;margin-top:-.2rem}
.form-alt a{color:#fff;font-weight:600;text-decoration:underline}
.form-alt a:hover{color:var(--red-bright)}
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"]{border-color:var(--red-bright);outline:1px solid var(--red-bright)}

/* ---------- Footer ---------- */
.site-footer{background:#08080a;color:#b9b9c2;padding:3rem 0 1.6rem;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;padding-bottom:2rem}
.foot-brand{margin-bottom:.8rem}
.foot-brand .brand-word{font-size:1.2rem}
.foot-brand .brand-mark{width:40px;height:40px}
.foot-contact p{padding:.15rem 0}
.site-footer a{color:#e2e2e8}
.site-footer a:hover{color:var(--red)}
.foot-fine{text-align:center;font-size:.8rem;color:#8a8a92;border-top:1px solid var(--line);padding-top:1.4rem;max-width:var(--maxw);margin:0 auto}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--red);color:#fff;text-align:center;font-weight:700;padding:.95rem;font-size:1rem;box-shadow:0 -4px 16px rgba(0,0,0,.3)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(6,6,8,.94);display:none;align-items:center;justify-content:center;padding:2rem}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,720px);max-height:88vh;border-radius:6px;border:2px solid rgba(216,31,38,.5)}
.lightbox-close{position:absolute;top:1rem;right:1.2rem;background:none;border:0;color:#fff;font-size:1.8rem;cursor:pointer;line-height:1;min-width:44px;min-height:44px;display:grid;place-items:center}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:2.2rem}
  .hero-frame{aspect-ratio:16/11;max-height:420px}
  .cards-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:2rem}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:rgba(12,12,14,.98);flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility .3s ease;border-bottom:1px solid var(--line)}
  .nav-links.open{max-height:460px;padding:.5rem 0 1rem;visibility:visible}
  .nav-links li{width:100%;text-align:center;padding:.6rem 0}
  .brand-word{font-size:1.2rem}
  .hero-inner{padding:3.5rem 1.25rem 3rem}
  .section,.band,.section-reel,.section-contact{padding:3.5rem 0}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .proof-tile img{height:220px}
  .sticky-cta{display:block}
  body{padding-bottom:3.4rem}
  .reel{width:78vw;max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-frame img,.gtile img,.card{transition:none}
  .showcase-media{transform:scale(1.04)!important}
}