/* =========================================================
   SUPREME AUTO · design tokens
   ========================================================= */
:root{
  --bg:#0B0B0B; --bg-2:#111113; --bg-3:#0e0e10;
  --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.14);
  --text:#F3F2EF; --muted:#9b998f; --faint:#86847c;
  --red:#E11D2A; --red-soft:rgba(225,29,42,.5); --red-text:#FF5C6C;
  --gold:#D9A441; --gold-soft:rgba(217,164,65,.5);
  --green:#16A34A; --green-soft:rgba(22,163,74,.45);
  --cyan:#22D3EE; --cyan-soft:rgba(34,211,238,.45);
  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r:20px; --r-sm:14px; --r-lg:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 24px 70px -30px rgba(0,0,0,.85);
  --wrap:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--gold-soft);color:#0B0B0B}

/* skip-link: off-screen until keyboard-focused, then drops into view
   above everything else so Tab from the address bar doesn't force a
   sighted-only user through the entire nav before reaching content */
.skip-link{position:absolute;top:-60px;left:16px;z-index:200;
  background:var(--gold);color:#0B0B0B;font-family:var(--display);font-weight:600;
  font-size:14px;padding:12px 20px;border-radius:10px;transition:top .25s var(--ease)}
.skip-link:focus-visible{top:16px}

/* shared ambient glow layer -- fixed behind every section so depth and
   colour wash carry continuously down the page instead of resetting at
   each section boundary. Sections deliberately paint no opaque
   background of their own (see components.css) so this shows through. */
.bg-ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-orb{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform}
.bg-orb--gold{width:62vw;height:62vw;max-width:760px;max-height:760px;top:-6%;left:-12%;
  background:radial-gradient(circle,rgba(217,164,65,.16),transparent 70%)}
.bg-orb--red{width:56vw;height:56vw;max-width:700px;max-height:700px;top:62%;right:-14%;
  background:radial-gradient(circle,rgba(225,29,42,.13),transparent 70%)}
.bg-orb--cyan{width:50vw;height:50vw;max-width:620px;max-height:620px;top:128%;left:-8%;
  background:radial-gradient(circle,rgba(34,211,238,.12),transparent 70%)}

/* cursor-aware spotlight -- js/cursor-glow.js writes --mx/--my as the
   pointer moves over any of these cards; the radial highlight just
   follows those two variables, so the JS never touches style beyond
   two custom properties. Falls back to centred/invisible until hovered. */
.svc,.partner-card,.ci,.location-item,.fstep,.trust-bar-item,.stat,.testi,
.trust-card,.car,.vw-vehicle-card{position:relative;overflow:hidden}
.svc::before,.partner-card::before,.ci::before,.location-item::before,.fstep::before,
.trust-bar-item::before,.stat::before,.testi::before,.trust-card::before,.car::before,
.vw-vehicle-card::before{
  /* z-index:-1, not 0 -- paints above this card's own background but
     below every child (text, icons, glow blobs) regardless of whether
     that child happens to set position itself, so the spotlight never
     has to fight the per-component stacking each card already has */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 55%);
  transition:opacity .4s var(--ease)}
.svc:hover::before,.partner-card:hover::before,.ci:hover::before,.location-item:hover::before,
.fstep:hover::before,.trust-bar-item:hover::before,.stat:hover::before,.testi:hover::before,
.trust-card:hover::before,.car:hover::before,.vw-vehicle-card:hover::before{opacity:1}
h1,h2,h3,h4,.eyebrow,.data{font-family:var(--display)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  font-weight:500;display:inline-flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.section{padding:108px 0;position:relative;z-index:1}
.section-head{max-width:640px;margin-bottom:54px}
.section-head h2{font-size:clamp(28px,4.2vw,46px);font-weight:600;line-height:1.08;
  letter-spacing:-.02em;margin-top:18px}
.section-head p{color:var(--muted);font-size:16.5px;margin-top:16px}

/* heading text-reveal: a left-to-right wipe (clip-path), not just the
   fade+rise the rest of .reveal gets -- runs on every section heading
   wrapped in .reveal with no extra markup, since the selector keys off
   .reveal itself rather than a named container per section. */
.reveal h2,.reveal h3{clip-path:inset(-8% 100% -12% 0);transition:clip-path 1s var(--ease) .12s}
.reveal.in h2,.reveal.in h3{clip-path:inset(-8% 0% -12% 0)}

/* media with graceful fallback */
.media{position:relative;overflow:hidden;background:
  radial-gradient(120% 120% at 30% 10%,#1c1c1f,#0d0d0f 70%);}
.media .ph{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  font-family:var(--display);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);text-align:center;padding:20px}
.media .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(217,164,65,.05))}
.media img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
/* image zoom-on-scroll: starts slightly oversized and settles to scale(1)
   as its .reveal ancestor enters the viewport -- the surrounding .media
   always has overflow:hidden, so the oversize never leaks past the
   rounded corners. Specificity-safe to combine with hover-zoom rules
   elsewhere (e.g. .car:hover .car-media img), which stay more specific. */
.reveal img{transform:scale(1.1);transition:transform 1.15s var(--ease)}
.reveal.in img{transform:scale(1)}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:500;
  font-size:14.5px;padding:14px 26px;border-radius:99px;cursor:pointer;border:1px solid transparent;
  transition:.3s var(--ease);letter-spacing:.01em;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--red);color:#fff;
  box-shadow:0 0 0 0 var(--red-soft),0 14px 30px -14px var(--red-soft)}
.btn-primary:hover{box-shadow:0 0 26px -2px var(--red-soft),0 16px 34px -12px var(--red-soft);
  transform:translateY(-2px) scale(1.015)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border-2);
  backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#0B0B0B}
.btn-gold:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 14px 30px -12px var(--gold-soft)}
.btn-wa{background:#13803a;color:#fff}.btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(31,175,84,.6)}

/* shine sweep -- a soft diagonal highlight crossing the button on hover,
   skewed and clipped by the pill's own overflow:hidden so it never
   shows square corners poking past the radius */
.btn-primary::after,.btn-gold::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;
  pointer-events:none;transform:skewX(-18deg);transition:left .7s var(--ease);
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent)}
.btn-primary:hover::after,.btn-gold:hover::after{left:130%}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:.4s var(--ease);
  opacity:0;transform:translateY(-14px);animation:navFadeDown .7s var(--ease) forwards;animation-delay:.05s}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:20px 28px;display:flex;align-items:center;gap:30px;
  transition:.4s var(--ease)}
.nav.scrolled{background:rgba(11,11,11,.78);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border)}
.nav.scrolled .nav-inner{padding:13px 28px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  font-size:19px;letter-spacing:.01em}
.logo-mark{width:34px;height:34px;border-radius:9px;position:relative;flex:0 0 auto;
  background:linear-gradient(135deg,#1a1a1c,#000);border:1px solid var(--gold-soft);
  display:grid;place-items:center;box-shadow:inset 0 0 14px rgba(217,164,65,.18)}
.logo-mark span{font-size:15px;font-weight:700;color:var(--gold)}
.logo b{font-weight:700}.logo i{color:var(--gold);font-style:normal}
.nav-links{display:flex;gap:5px;margin-left:14px}
.nav-links a{font-size:14px;color:var(--muted);padding:9px 14px;border-radius:9px;
  transition:.25s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--border-2);border-radius:11px;
  background:var(--surface);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{width:18px;height:1.6px;background:var(--text);transition:.3s}
.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);z-index:70;
  background:var(--bg-2);border-left:1px solid var(--border);transform:translateX(101%);
  transition:.4s var(--ease);padding:90px 26px 30px;display:flex;flex-direction:column;gap:6px}
.mobile-menu.open{transform:none}
.mobile-menu a{font-family:var(--display);font-size:17px;padding:13px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.mobile-menu a:hover{color:var(--text)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:65;opacity:0;pointer-events:none;transition:.3s}
.scrim.show{opacity:1;pointer-events:auto}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  --h-bg:#080808; --h-surface:#141414; --h-text:#FFFFFF; --h-text-2:#B5B5B5;
  --h-red:#C1121F; --h-gold:#D4AF37; --h-r:20px; --h-ease:cubic-bezier(.22,.61,.36,1);
  position:relative;min-height:100vh;display:grid;align-content:center;overflow:hidden;
  background:var(--h-bg);isolation:isolate}

/* background image layer — inset:0 fills the parent box regardless of how its
   height was derived (min-height vs height); a percentage height here would
   resolve against "auto" and collapse, since .hero only sets min-height. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:center center;
  transform:scale(1.05);filter:saturate(1.05) contrast(1.02);
  animation:heroZoom 5s var(--h-ease) forwards;will-change:transform}

/* dark gradient + vignette, in one layer: vertical/horizontal falloff + edge vignette */
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 45%,transparent 50%,rgba(8,8,8,.82) 100%),
    linear-gradient(100deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.62) 32%,rgba(8,8,8,.28) 55%,rgba(8,8,8,.55) 78%,rgba(8,8,8,.95) 100%),
    linear-gradient(180deg,rgba(8,8,8,.15) 0%,transparent 30%,rgba(8,8,8,.55) 100%)}

/* seamless hand-off into the next section: fades to the site's flat --bg
   colour (not just darker) so there's no visible seam at the hero boundary */
.hero-fade{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  height:min(220px,26vh);background:linear-gradient(180deg,transparent,var(--bg) 92%)}

/* soft frosted blur localised behind the text column, fading out toward the vehicle */
.hero-blur{position:absolute;inset:0;z-index:1;pointer-events:none;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 38%,transparent 62%);
  mask-image:linear-gradient(100deg,#000 0%,#000 38%,transparent 62%)}

.hero-glow{position:absolute;z-index:2;border-radius:50%;pointer-events:none;filter:blur(40px)}
.hero-glow--red{width:46vw;height:46vw;max-width:620px;max-height:620px;right:-8%;top:30%;
  background:radial-gradient(circle,rgba(193,18,31,.30),transparent 70%);
  animation:heroDriftA 26s ease-in-out infinite alternate}
.hero-glow--gold{width:30vw;height:30vw;max-width:420px;max-height:420px;left:-6%;top:8%;
  background:radial-gradient(circle,rgba(212,175,55,.16),transparent 70%);
  animation:heroDriftB 32s ease-in-out infinite alternate}

.hero-particles{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.hero-particle{position:absolute;width:3px;height:3px;border-radius:50%;bottom:0;
  background:rgba(212,175,55,.55);box-shadow:0 0 6px rgba(212,175,55,.5);
  animation:heroParticle linear infinite}
.hero-particle:nth-child(1){left:8%;animation-duration:9s;animation-delay:.2s}
.hero-particle:nth-child(2){left:22%;animation-duration:12s;animation-delay:1.5s}
.hero-particle:nth-child(3){left:38%;animation-duration:10s;animation-delay:3s}
.hero-particle:nth-child(4){left:55%;animation-duration:14s;animation-delay:.8s}
.hero-particle:nth-child(5){left:68%;animation-duration:11s;animation-delay:2.2s}
.hero-particle:nth-child(6){left:80%;animation-duration:13s;animation-delay:4s}
.hero-particle:nth-child(7){left:92%;animation-duration:9.5s;animation-delay:1s}

.hero .wrap.hero-content{position:relative;z-index:4;width:100%;
  /* top padding reserves space for the fixed nav: once stacked content on
     narrow screens exceeds 100vh, align-content:center has no spare room
     left to push content below the header, so this floor is load-bearing,
     not cosmetic. Generous on purpose -- too much top-gap is invisible,
     too little re-creates the overlap bug. */
  padding:max(140px,20vh) clamp(24px,6vw,72px) max(72px,10vh)}
.hero-tag{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--h-text);
  background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.35);padding:8px 15px;border-radius:99px;
  backdrop-filter:blur(8px);margin-bottom:26px;letter-spacing:.02em;
  opacity:0;transform:translateY(-10px);animation:heroFadeDown .7s var(--h-ease) forwards;animation-delay:.25s}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--h-gold);box-shadow:0 0 9px var(--h-gold)}

.hero-heading{display:flex;flex-direction:column;gap:2px;max-width:640px}
.hero-heading .line{display:block;font-size:clamp(34px,6.4vw,72px);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--h-text);opacity:0;transform:translateY(28px);
  animation:heroLineReveal .9s var(--h-ease) forwards}
.hero-heading .line:nth-child(1){animation-delay:.45s}
.hero-heading .line:nth-child(2){animation-delay:.62s}
.hero-heading .line.line-accent{animation-delay:.79s;color:var(--h-gold)}

.hero-sub{margin-top:26px;max-width:54ch;font-size:clamp(16px,1.6vw,18.5px);line-height:1.75;
  color:var(--h-text-2);opacity:0;transform:translateY(16px);
  animation:heroFadeUp .8s var(--h-ease) forwards;animation-delay:.95s}

.hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;
  opacity:0;transform:scale(.95);animation:heroBtnIn .7s var(--h-ease) forwards;animation-delay:1.1s}
.btn-hero{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;
  font-size:15px;padding:16px 30px;border-radius:14px;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--h-ease),box-shadow .35s var(--h-ease),border-color .35s var(--h-ease);
  letter-spacing:.01em;white-space:nowrap}
.btn-hero svg{display:block;width:18px;height:18px;flex:0 0 auto;transition:transform .35s var(--h-ease)}
.btn-hero-primary{background:var(--h-red);color:#fff;box-shadow:0 18px 40px -18px rgba(193,18,31,.65)}
.btn-hero-primary:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 22px 48px -16px rgba(193,18,31,.85)}
.btn-hero-primary:hover svg{transform:translateX(3px)}
.btn-hero-primary::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;
  pointer-events:none;transform:skewX(-18deg);transition:left .7s var(--h-ease);
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent)}
.btn-hero-primary:hover::after{left:130%}
.btn-hero-ghost{background:rgba(255,255,255,.05);color:var(--h-text);
  border-color:rgba(212,175,55,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-hero-ghost:hover{border-color:var(--h-gold);transform:translateY(-3px);
  box-shadow:0 16px 36px -18px rgba(212,175,55,.4)}

.hero-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:56px;max-width:680px}
.trust-card{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--h-r);min-width:0;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.8);
  transition:transform .4s var(--h-ease),border-color .4s var(--h-ease),box-shadow .4s var(--h-ease);
  opacity:0;transform:translateY(18px);animation:heroCardIn .7s var(--h-ease) forwards}
.trust-card:nth-child(1){animation-delay:1.3s}
.trust-card:nth-child(2){animation-delay:1.42s}
.trust-card:nth-child(3){animation-delay:1.54s}
.trust-card:nth-child(4){animation-delay:1.66s}
.trust-card:hover{transform:translateY(-5px);border-color:rgba(212,175,55,.45);
  box-shadow:0 22px 46px -24px rgba(212,175,55,.3)}
.trust-card .ic{width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  overflow:hidden;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.35);
  transition:transform .4s var(--h-ease)}
.trust-card:hover .ic{transform:scale(1.08) rotate(-4deg)}
.trust-card .ic svg{display:block;width:17px;height:17px;flex:0 0 auto;color:var(--h-gold)}
.trust-card span:last-child{min-width:0;font-size:13px;font-weight:500;color:var(--h-text);line-height:1.3}

.hero-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--h-text-2);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;transition:opacity .5s var(--h-ease)}
.hero-scroll.is-hidden{opacity:0;pointer-events:none}
.hero-scroll .track{width:1px;height:34px;background:linear-gradient(180deg,var(--h-gold),transparent);
  animation:scrolldown 2.2s infinite}
.hero-scroll svg{display:block;width:14px;height:14px;color:var(--h-gold);animation:heroArrowBounce 2.4s ease-in-out infinite}