:root{
  --bg:#0b0f17;
  --card:rgba(255,255,255,.07);
  --text:#eaf0ff;
  --muted:#a8b3cf;
  --line:rgba(255,255,255,.12);
  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1000px 700px at 70% -20%, rgba(102,227,255,.12), transparent 60%),
             radial-gradient(900px 600px at 10% 0%, rgba(124,255,124,.10), transparent 55%),
             var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
.container{width:92%;max-width:1100px;margin:auto}

.header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,23,.55);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.header__inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.2px}
.brand__logo{width:34px;height:34px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 25px rgba(0,0,0,.35)}
.brand__name{font-size:1.05rem}

.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);font-weight:800;white-space:nowrap}
.nav a:hover{color:var(--text)}

.btn{
  background:linear-gradient(135deg,#66e3ff,#7cff7c);
  color:#07101a;
  padding:12px 16px;
  border-radius:14px;
  font-weight:950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
}
.btn--ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn--sm{padding:8px 12px}
.btn--block{width:100%}
.btnRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.burger{
  display:none;
  width:48px;height:44px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:0;
}
.burger span{
  display:block;
  width:22px;height:2px;
  background:rgba(255,255,255,.92);
  margin:6px auto;
  border-radius:2px;
}
.mobileMenu{border-top:1px solid var(--line);background:rgba(11,15,23,.92)}
.mobileMenu a{display:block;padding:14px 4%;color:var(--muted);font-weight:900}
.mobileMenu a:active{opacity:.85}

/* Hero */
.hero{position:relative;padding:52px 0 36px}
.hero__bg{
  position:absolute;inset:-1px 0 auto 0;height:320px;
  background:radial-gradient(700px 280px at 35% 25%, rgba(102,227,255,.20), transparent 60%),
             radial-gradient(700px 280px at 70% 40%, rgba(124,255,124,.16), transparent 62%);
  pointer-events:none;
}
.hero__grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:999px;
  color:var(--muted);
  font-weight:900;
}
h1{margin:14px 0 8px;line-height:1.03;font-size:clamp(34px, 4.4vw, 58px);letter-spacing:-.6px}
.accent{background:linear-gradient(135deg,#66e3ff,#7cff7c);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);line-height:1.7;margin:0;max-width:52ch}
.lead{color:var(--muted);margin:8px 0 0;line-height:1.7}

.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 12px}
.quickActions{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  color:var(--muted);
}
.chip:hover{color:var(--text)}

.hero__card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  padding:18px;
  border-radius:22px;
  box-shadow:var(--shadow);
}
.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10);padding:12px;border-radius:16px}
.stat__top{color:var(--muted);font-weight:900;font-size:.9rem}
.stat__big{font-weight:1000;font-size:1.15rem;margin-top:6px}
.cardLine{height:1px;background:rgba(255,255,255,.10);margin:14px 0}
.miniGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini strong{display:block}
.mini span{display:block;color:var(--muted);margin-top:4px}

/* Sections */
.section{padding:54px 0}
.section--alt{
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
h2{margin:0 0 10px;font-size:clamp(22px, 3vw, 32px);letter-spacing:-.3px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card,.quote{
  background:var(--card);
  border:1px solid rgba(255,255,255,.12);
  padding:18px;
  border-radius:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted);line-height:1.6}
.quote{color:var(--text);font-weight:800;line-height:1.6}

.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.step{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid rgba(255,255,255,.12);padding:16px;border-radius:22px}
.step__n{
  width:32px;height:32px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-weight:1000;
  color:var(--text);
}
.step p{margin:6px 0 0;color:var(--muted);line-height:1.6}

.badge{
  display:inline-flex;gap:10px;align-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  padding:10px 12px;
  border-radius:999px;
  color:var(--muted);
  font-weight:950;
}
.note{color:var(--muted);line-height:1.6;margin:10px 0 0}

.trustGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.desktopOnly{display:block}
.link{color:#66e3ff;font-weight:900}

.cleanList{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.8}
.quoteWrap{display:grid;grid-template-columns:1fr;align-items:center}
.quoteCard{max-width:720px;margin:auto}

/* Footer & floating */
.footer{padding:30px 0;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:var(--muted)}
.floatingMessenger{
  position:fixed;right:16px;bottom:16px;width:58px;height:58px;border-radius:50%;
  background:#0084ff;color:white;display:grid;place-items:center;font-size:26px;
  box-shadow:0 18px 40px rgba(0,0,0,.50);
  z-index:99;
}

/* Mobile */
@media(max-width:900px){
  .nav{display:none}
  .burger{display:inline-block}
  .hero{padding:42px 0 24px}
  .hero__grid,.grid,.grid--3,.steps,.trustGrid{grid-template-columns:1fr}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .btnRow{grid-template-columns:1fr}
  .desktopOnly{display:none} /* hides the ugly FB iframe on mobile */
  .chip{flex:1 1 auto;text-align:center}
}



/* Subtle animations */
.brand__logo{
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.brand:hover .brand__logo{
  transform: translateY(-1px) scale(1.03);
  filter: saturate(1.08);
}

.btn, .chip, .nav a, .stickyBtn{
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover, .chip:hover, .stickyBtn:hover{
  transform: translateY(-1px);
}
.btn:active, .chip:active, .stickyBtn:active{
  transform: translateY(0px) scale(.98);
  opacity:.92;
}

.btn{
  position: relative;
  overflow: hidden;
}
.btn::after{
  content:"";
  position:absolute; inset:-60% -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 45%);
  transform: translateX(-35%) rotate(8deg);
  opacity: .0;
  transition: opacity .22s ease;
}
.btn:hover::after{opacity:.9}

/* Sticky Get Quote bar (mobile) */
.stickyBar{
  display:none;
  position:fixed;
  left:12px; right:12px; bottom:12px;
  z-index:120;
  gap:10px;
  padding:10px;
  border-radius:18px;
  background:rgba(11,15,23,.72);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.stickyBtn{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 14px;
  border-radius:16px;
  font-weight:1000;
  letter-spacing:.2px;
  background:linear-gradient(135deg,#66e3ff,#7cff7c);
  color:#07101a;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.stickyBtn--ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}

/* Make room for sticky bar on mobile */
@media(max-width:900px){
  .stickyBar{display:flex}
  body{padding-bottom:96px}
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .brand__logo, .btn, .chip, .nav a, .stickyBtn{transition:none}
  .btn::after{display:none}
}



/* Hero background image */
.hero__bg{
  position:absolute; inset:-1px 0 auto 0; height:360px;
  background:
    linear-gradient(180deg, rgba(11,15,23,.78) 0%, rgba(11,15,23,.55) 55%, rgba(11,15,23,.10) 100%),
    url('https://images.unsplash.com/photo-1570356528233-b442cf2de345?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
}
@media(max-width:900px){
  .hero__bg{height:420px; background-position: 62% 50%;}
}



/* Sticky bar: 3-button fit */
.stickyBar{gap:10px}
.stickyBtn{padding:12px 12px;font-size:0.98rem}
@media(max-width:360px){
  .stickyBtn{font-size:0.92rem;padding:11px 10px}
}



/* === V2 Mobile polish fixes === */

/* 1) Sticky bar: keep "Get Quote" on ONE line */
.stickyBtn{white-space:nowrap}

/* 2) Improve BMW crop to show headlights/grille on phone + add stronger fades */
.hero__bg{
  /* Dark top + stronger bottom fade */
  background:
    linear-gradient(180deg,
      rgba(11,15,23,.82) 0%,
      rgba(11,15,23,.56) 45%,
      rgba(11,15,23,.18) 70%,
      rgba(11,15,23,.92) 100%
    ),
    url('https://images.unsplash.com/photo-1570356528233-b442cf2de345?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
}

/* 3) Blur behind hero text (so the image never "covers" the buttons/text) */
@media(max-width:900px){
  /* Slightly taller hero area so nothing feels cramped */
  .hero{padding:40px 0 110px}
  .hero__bg{
    height:520px;
    /* crop: push focus lower so grille/headlights show */
    background-position: 58% 72%;
  }

  /* Add a subtle glass panel behind the whole left column (text + buttons) */
  .hero__grid > div:first-child{
    position:relative;
    padding:14px 14px 16px;
    border-radius:24px;
    background:rgba(11,15,23,.32);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }

  /* Give CTA a touch more spacing */
  .hero__cta{margin-top:18px}
}

/* Extra-small phones: tighten sticky buttons slightly */
@media(max-width:380px){
  .stickyBtn{font-size:.92rem;padding:11px 10px}
}


/* === V3: Reduce blur & dark overlay (clearer image) === */

/* Reduce glass blur strength */
@media(max-width:900px){
  .hero__grid > div:first-child{
    background:rgba(11,15,23,.18);   /* lighter */
    backdrop-filter: blur(4px);      /* was 10px */
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
  }
}

/* Lighten hero gradient so image is visible */
.hero__bg{
  background:
    linear-gradient(180deg,
      rgba(11,15,23,.55) 0%,
      rgba(11,15,23,.35) 45%,
      rgba(11,15,23,.18) 70%,
      rgba(11,15,23,.70) 100%
    ),
    url('https://images.unsplash.com/photo-1570356528233-b442cf2de345?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
}


/* === V4: Minimal blur, clear image priority === */

/* Remove blur entirely, keep only subtle dark backing */
@media(max-width:900px){
  .hero__grid > div:first-child{
    background:rgba(11,15,23,.22);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow: 0 12px 26px rgba(0,0,0,.25);
  }
}

/* Further lighten hero overlay so car is clearly visible */
.hero__bg{
  background:
    linear-gradient(180deg,
      rgba(11,15,23,.45) 0%,
      rgba(11,15,23,.28) 45%,
      rgba(11,15,23,.16) 70%,
      rgba(11,15,23,.65) 100%
    ),
    url('https://images.unsplash.com/photo-1570356528233-b442cf2de345?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
}


/* === V7: Show headlights (move crop up) + truly blur/hide plate + keep Get Quote one-line === */

/* Keep sticky button label on one line */
.stickyBtn{white-space:nowrap}

/* Clean hero with lighter overlay */
.hero__bg{
  background:
    linear-gradient(180deg,
      rgba(11,15,23,.38) 0%,
      rgba(11,15,23,.20) 60%,
      rgba(11,15,23,.18) 100%
    ),
    url('https://images.unsplash.com/photo-1570356528233-b442cf2de345?auto=format&fit=crop&w=2400&q=80')
      center/cover no-repeat;
  filter: contrast(1.07) saturate(1.12);
  position:absolute;
}

/* Headlight boost */
.hero__bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(260px 150px at 45% 68%, rgba(255,255,255,.30), rgba(255,255,255,0) 62%),
    radial-gradient(260px 150px at 58% 68%, rgba(255,255,255,.30), rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  opacity:.55;
  pointer-events:none;
}

/* Plate blur mask (uses backdrop-filter to actually blur letters) */
.hero__bg::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:320px;
  height:96px;
  bottom:46px;
  border-radius:18px;
  background: rgba(11,15,23,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.55);
  pointer-events:none;
}

/* Mobile: move BMW UP so headlights/grille sit ABOVE the CTA area */
@media(max-width:900px){
  .hero__bg{
    height:520px;
    /* lower value = crop higher = car moves up */
    background-position: 52% 66%;
  }
  /* Match spotlight position to new crop */
  .hero__bg::before{
    background:
      radial-gradient(260px 150px at 45% 64%, rgba(255,255,255,.32), rgba(255,255,255,0) 62%),
      radial-gradient(260px 150px at 58% 64%, rgba(255,255,255,.32), rgba(255,255,255,0) 62%);
    opacity:.60;
  }
  /* Move plate mask slightly up (since car moved up) */
  .hero__bg::after{
    width:340px;
    height:100px;
    bottom:40px;
  }
  /* Keep hero content readable without blurring the whole image */
  .hero__grid > div:first-child{
    background:rgba(11,15,23,.16);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* Extra-small phones */
@media(max-width:380px){
  .hero__bg::after{width:300px}
}


/* === Parallax (super subtle, iPhone-safe) === */
.hero__bg{
  will-change: transform;
  transform: translate3d(0,0,0);
}


/* === Why Choose Us + Review screenshots === */
.whyGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:16px;
}
.whyCard{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.whyIcon{
  width:40px;height:40px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:20px;
  flex:0 0 40px;
}
.whyCard h3{margin:0 0 6px;font-size:1.05rem}
.whyCard p{margin:0;color:var(--muted);line-height:1.6}

.reviewGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}
.reviewCard{
  margin:0;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}
.reviewCard img{
  width:100%;
  height:auto;
  display:block;
}
.reviewCta{
  margin-top:16px;
  display:flex;
  justify-content:center;
}

/* Mobile */
@media(max-width:900px){
  .whyGrid{grid-template-columns:1fr}
  .reviewGrid{grid-template-columns:1fr}
}


/* === Reviews polish: badge + stars + interactions === */
.trustedLine{
  margin:10px 0 6px;
  color:rgba(255,255,255,.86);
  font-weight:800;
  letter-spacing:.2px;
}
.trustedLine strong{color:var(--text)}

.reviewCard{
  position:relative;
  transform: translate3d(0,0,0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.reviewCard:active{transform: translateY(0px) scale(.99)}
@media (hover:hover){
  .reviewCard:hover{
    transform: translateY(-2px);
    box-shadow:0 18px 46px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.18);
  }
}

.reviewOverlay{
  position:absolute;
  left:12px; right:12px; top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:2;
  pointer-events:none;
}
.reviewBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(11,15,23,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:rgba(255,255,255,.92);
  font-weight:900;
  font-size:.92rem;
}
.reviewStars{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(11,15,23,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:rgba(255,255,255,.95);
  font-weight:1000;
  letter-spacing:1px;
  font-size:.95rem;
}

/* Ensure overlay doesn't clash on tiny screens */
@media(max-width:380px){
  .reviewBadge{font-size:.86rem;padding:7px 10px}
  .reviewStars{font-size:.90rem;padding:7px 10px}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reviewCard{transition:none}
}


.reviewGrid{ align-items: start; }

/* Make each review card a consistent "preview" height */
.reviewCard{
  height: 260px;
}
.reviewCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: slightly taller for readability but still not huge */
@media(max-width:900px){
  .reviewCard{ height: 220px; }
}

/* Very small phones */
@media(max-width:380px){
  .reviewCard{ height: 200px; }
}


/* Keep overlays readable on top of cropped images */
.reviewOverlay{
  left:10px; right:10px; top:10px;
}
.reviewBadge, .reviewStars{
  background: rgba(11,15,23,.70);
  border-color: rgba(255,255,255,.18);
}

/* === FINAL Reviews fix (no cropping, consistent size) === */
.reviewGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:start;
}

.reviewCard{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:rgba(16,18,22,.88);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}

/* IMPORTANT:
   We use "contain" so the screenshot is NEVER cropped (fixes cut-off text).
   The card height limits size so they don't become massive. */
.reviewCard{
  height: 260px;               /* desktop/tablet */
}
.reviewCard img{
  width:100%;
  height:100%;
  object-fit:contain;          /* <-- key */
  object-position:center;
  display:block;
  background:rgba(0,0,0,.25);  /* fills side gaps from contain */
}

/* Overlay chips stay at the top, but smaller so they don't cover content */
.reviewOverlay{
  left:10px; right:10px; top:10px;
}
.reviewBadge{font-size:.86rem;padding:7px 10px}
.reviewStars{font-size:.90rem;padding:7px 10px}

/* Mobile */
@media(max-width:900px){
  .reviewGrid{grid-template-columns:1fr; gap:16px;}
  .reviewCard{height: 210px;}  /* iPhone-safe: compact but readable */
}

/* Very small phones */
@media(max-width:380px){
  .reviewCard{height: 195px;}
}

/* Prevent sticky bar overlap */
@media(max-width:900px){
  body{padding-bottom:92px;}
}

/* === WhatsApp Button – Premium Green (full styles) === */

/* Sticky bar WhatsApp button */
.stickyBar a[href*="wa.me"],
.sticky-bar a[href*="wa.me"],
a.whatsappBtn {
  background: linear-gradient(135deg, #25D366, #1EBE5D) !important;
  color: #0b0f14 !important;
  font-weight: 800;
  border: none !important;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}

/* Hover / tap */
.stickyBar a[href*="wa.me"]:hover,
.stickyBar a[href*="wa.me"]:active,
.sticky-bar a[href*="wa.me"]:hover,
.sticky-bar a[href*="wa.me"]:active {
  transform: scale(0.97);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

/* Keep inner text clean */
.stickyBar a[href*="wa.me"] span,
.sticky-bar a[href*="wa.me"] span {
  color: inherit !important;
}

/* --- WhatsApp brand (override) --- */
/* Ensures WhatsApp CTAs are green everywhere (hero, chips, sticky) */
a[href*="wa.me"].chip,
a[href*="wa.me"].btn,
a[href*="wa.me"].stickyBtn,
.stickyBar a[href*="wa.me"]{
  background: #25D366 !important;
  color: #06110a !important;
  border-color: rgba(0,0,0,.15) !important;
  box-shadow: 0 10px 30px rgba(37,211,102,.18) !important;
}

a[href*="wa.me"].chip:hover,
a[href*="wa.me"].btn:hover,
a[href*="wa.me"].stickyBtn:hover,
.stickyBar a[href*="wa.me"]:hover{
  filter: brightness(.95) saturate(1.05);
}

a[href*="wa.me"].chip:active,
a[href*="wa.me"].btn:active,
a[href*="wa.me"].stickyBtn:active,
.stickyBar a[href*="wa.me"]:active{
  transform: translateY(1px) scale(.99);
}



/* ===== Coverage 3D map section (Andover radius) ===== */
.coverageWrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:start;
  margin-top:16px;
}

.coverageMap3d{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
}

.coverageMap3d svg{
  width:100%;
  height:auto;
  display:block;
}

.mapExtrude{
  transform: translate(10px, 16px);
  opacity:.95;
}

.ukBase{
  fill: rgba(0,0,0,.35);
  stroke: rgba(255,255,255,.08);
  stroke-width: 2;
}

.ieBase{
  fill: rgba(0,0,0,.25);
  stroke: rgba(255,255,255,.06);
  stroke-width: 2;
}

.mapTop .ukTop{
  fill: url(#ukMetal);
  stroke: rgba(255,255,255,.20);
  stroke-width: 2.2;
}

.mapTop .ieTop{
  fill: rgba(255,255,255,.06);
  stroke: rgba(255,255,255,.12);
  stroke-width: 2;
  opacity:.85;
}

/* Radius ring */
.coverageOverlay .radiusGlow{
  fill: url(#radiusGlow);
  opacity: .95;
}

.coverageOverlay .radiusRing{
  fill: none;
  stroke: rgba(45,255,138,.95);
  stroke-width: 5;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.coverageOverlay .radiusDot{
  fill: rgba(45,255,138,1);
  stroke: rgba(0,0,0,.35);
  stroke-width: 2;
}

.coverageOverlay .calloutLine{
  fill:none;
  stroke: rgba(45,255,138,.9);
  stroke-width: 3;
  stroke-linecap: round;
  opacity:.95;
}

.coverageOverlay .calloutPill{
  fill: rgba(11,15,23,.75);
  stroke: rgba(255,255,255,.16);
  stroke-width: 1.5;
}

.coverageOverlay .calloutText{
  fill: rgba(233,237,242,.96);
  font-weight: 900;
  font-size: 14px;
}

.coverageOverlay .calloutSub{
  fill: rgba(167,176,188,.98);
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .2px;
}

.coverageLegend{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  margin-top:10px;
  font-weight:900;
  color: rgba(233,237,242,.85);
  font-size: 13px;
}

.coverageNote{
  margin-top:10px;
  text-align:center;
  color: rgba(167,176,188,.95);
  font-size: 13px;
  line-height: 1.5;
}

.dot{
  width:10px;height:10px;border-radius:999px;
  display:inline-block;
  transform: translateY(1px);
  margin-right:6px;
}
.dot--on{ background:#2dff8a; box-shadow:0 0 0 4px rgba(45,255,138,.14); }
.dot--off{ background:rgba(255,255,255,.18); box-shadow:0 0 0 4px rgba(255,255,255,.06); }

.coverageCopy .coverageCard{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

.coverageCard h3{ margin:0 0 8px; }

/* Mobile */
@media(max-width:900px){
  .coverageWrap{ grid-template-columns:1fr; }
}

/* === V2.2 iPhone hero polish (auto-added) === */
.trustLineMini{
  margin:10px 0 0;
  color:rgba(233,237,242,.82);
  font-weight:900;
  letter-spacing:.15px;
  line-height:1.35;
}
@media (max-width: 900px){
  /* Reduce blur/darkness behind hero text */
  .hero__grid > div:first-child{
    background: rgba(11,15,23,.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Tighten hero */
  .hero{ padding:32px 0 18px !important; }
  h1{ margin-top:16px !important; }
  .hero__cta{ margin:14px 0 10px !important; gap:10px !important; }
  .quickActions{ gap:8px !important; }
  /* Pull car image up slightly */
  .hero__bg{
    height:460px !important;
    background-position: 52% 60% !important;
  }
  /* Make secondary CTA less dominant */
  .hero__cta .btn--ghost{ opacity:.88 !important; }
  /* Ensure sticky bar doesn't cover content */
  body{ padding-bottom:96px !important; }
}

/* === V2.3 iPhone polish (calmer hero + tighter trust band) === */
@media (max-width: 900px){
  /* tighten top trust band so hero starts sooner */
  .trustSection{ padding: 18px 0 14px !important; }
  .trustBadges{ gap: 8px !important; }
  .trustMeta{ margin-top: 10px !important; font-size: 13.5px !important; }

  /* hero: reduce "glass" thickness + improve readability */
  .hero__grid > div:first-child{
    padding: 12px 12px 14px !important;
    background: rgba(11,15,23,.12) !important;
    border-color: rgba(255,255,255,.10) !important;
  }

  /* move image slightly up for cleaner composition */
  .hero__bg{ background-position: 52% 58% !important; }

  /* trust line under pill: smaller + clearer */
  .trustLineMini{
    font-size: 0.96rem !important;
    line-height: 1.25 !important;
    color: rgba(233,237,242,.86) !important;
    text-shadow: 0 10px 28px rgba(0,0,0,.55);
  }

  /* make the pill less tall */
  .pill{ padding: 9px 12px !important; }

  /* give CTA a little space from sticky bar */
  .hero{ padding-bottom: 34px !important; }
  .hero__cta{ margin-bottom: 12px !important; }
}

/* === V2.4 iPhone final polish (less empty space + better CTA/sticky separation) === */
@media (max-width: 900px){
  /* make the top trust band tighter */
  .trustSection{ padding: 14px 0 10px !important; }
  .trustMeta{ margin-top: 8px !important; }

  /* hero glass panel: slightly smaller radius + less "fog" */
  .hero__grid > div:first-child{
    border-radius: 20px !important;
    background: rgba(11,15,23,.10) !important;
  }

  /* pull image up a touch more */
  .hero__bg{ background-position: 52% 56% !important; }

  /* reduce the size of the pill container so it doesn't feel huge */
  .pill{
    padding: 8px 12px !important;
    background: rgba(255,255,255,.05) !important;
  }

  /* keep the primary CTA comfortably above the sticky bar */
  .hero{ padding-bottom: 44px !important; }

  /* iPhone safe-area: sticky bar sits above the home indicator */
  .stickyBar{
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  body{
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
}

/* === V2.5 Mobile conversion polish (simpler hero actions) === */
@media (max-width: 900px){
  /* Keep hero focused: 1 primary CTA only */
  .hero__cta .btn--ghost{ display:none !important; }

  /* Remove the extra chip row on mobile (sticky bar already covers Call/WhatsApp) */
  .quickActions{ display:none !important; }

  /* Slightly reduce hero panel height feel */
  .hero__grid > div:first-child{ padding: 12px 12px 12px !important; }

  /* Bring CTA up a touch */
  .hero__cta{ margin-top: 12px !important; }
}


/* === V2.7 "POP" – premium clarity on mobile hero (no extra clutter) === */

/* Crisper hero typography */
.hero h1, .hero .sub, .hero .trustLineMini, .hero .pill{
  text-rendering: geometricPrecision;
}

.hero h1{
  text-shadow: 0 16px 36px rgba(0,0,0,.55);
}
.hero .sub{
  text-shadow: 0 14px 30px rgba(0,0,0,.50);
}
.hero .trustLineMini{
  text-shadow: 0 14px 30px rgba(0,0,0,.55);
}

/* Reduce "fog" and make glass feel premium */
.hero__grid > div:first-child{
  background: rgba(11,15,23,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Slightly stronger hero fade so text always reads */
.hero__bg{
  background:
    linear-gradient(180deg,
      rgba(11,15,20,.26) 0%,
      rgba(11,15,20,.44) 55%,
      rgba(11,15,20,.78) 100%
    ),
    url('https://images.unsplash.com/photo-1570356528233-b442cf2de345?auto=format&fit=crop&w=2400&q=80')
      center/cover no-repeat !important;
  filter: contrast(1.08) saturate(1.10);
}

/* Mobile-specific: lift the car a touch + tighten spacing */
@media (max-width: 900px){
  .hero__bg{ background-position: 52% 54% !important; }
  .hero__grid > div:first-child{
    padding: 12px 12px 12px !important;
  }
  .pill{
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.12) !important;
  }
  .trustLineMini{ color: rgba(233,237,242,.90) !important; }
  .sub{ color: rgba(233,237,242,.74) !important; }
}


/* === FLAT MOBILE HERO (OEM style) === */
@media (max-width: 900px){

  /* Remove glass panel completely */
  .hero__grid > div:first-child{
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 0 8px !important;
  }

  /* Stronger image fade for readability */
  .hero__bg{
    background:
      linear-gradient(180deg,
        rgba(11,15,20,.35) 0%,
        rgba(11,15,20,.55) 45%,
        rgba(11,15,20,.90) 100%
      ),
      url('https://images.unsplash.com/photo-1570356528233-b442cf2de345?auto=format&fit=crop&w=2400&q=80')
      center/cover no-repeat !important;
    background-position: 52% 54% !important;
    filter: contrast(1.08) saturate(1.1);
  }

  /* Pills + trust text float cleanly */
  .pill{
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  .trustLineMini{
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 12px 28px rgba(0,0,0,.6);
  }

  /* Hero spacing feels lighter */
  .hero{
    padding-top: 28px !important;
    padding-bottom: 48px !important;
  }

  h1{
    text-shadow: 0 18px 40px rgba(0,0,0,.6);
  }

  .sub{
    color: rgba(233,237,242,.78) !important;
    text-shadow: 0 14px 30px rgba(0,0,0,.55);
  }
}


/* === V3.1 FIX: remove ghost rounded corners under hero (mobile) === */
@media (max-width: 900px){

  /* Ensure no leftover radius or overlay from previous cards */
  .hero,
  .hero *{
    border-radius: 0 !important;
  }

  /* Explicitly kill any pseudo overlays */
  .hero::before,
  .hero::after,
  .hero__grid::before,
  .hero__grid::after{
    content: none !important;
    display: none !important;
  }

  /* Make sure nothing creates a translucent panel edge */
  .hero__grid > div:first-child{
    outline: none !important;
    box-shadow: none !important;
  }
}


/* === V3.2 FIX: remove the "ghost boxes" under hero on mobile ===
   Those boxes are the hero stats card peeking into view.
   For OEM-flat mobile, we hide the hero stats card entirely. */
@media (max-width: 900px){
  .hero__card,
  .statGrid,
  .miniGrid,
  .cardLine{
    display:none !important;
  }

  /* Ensure hero ends cleanly (no next-section bleed) */
  .hero{ padding-bottom: 64px !important; }
}


/* === V3.3 FINAL FIX: flat transition from hero to next section (mobile) === */
@media (max-width: 900px){

  /* Kill rounded top on the section after hero */
  section + section,
  .section,
  .card,
  .cardGroup,
  .statCard,
  .serviceCard{
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  /* Remove any shadow bleeding upward */
  section + section{
    box-shadow: none !important;
  }

  /* Ensure hero fully overlays below */
  .hero{
    margin-bottom: 0 !important;
  }
}


/* === V3.4: Hard-remove hero card (HTML), tighten hero grid === */
@media (min-width: 901px){
  /* keep layout nice on desktop even without hero card */
  .hero__grid{ grid-template-columns: 1fr; }
}


/* === V3.5 FIX: remove the blurred "plate" box (hero__bg::after) on mobile === */
@media (max-width: 900px){
  .hero__bg::after{ display:none !important; }
}


/* === Hide/show animation for CTA bar === */
.cta-bar, .stickyBar, .sticky-bar {
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform;
}

.cta-bar.hide, .stickyBar.hide, .sticky-bar.hide {
  transform: translateY(120%);
  opacity: 0;
}

/* === FORCE HIDE/SHOW (wins against other rules) === */
[data-cta-bar]{
  transition: transform .25s ease, opacity .25s ease !important;
  will-change: transform !important;
}
[data-cta-bar].hide{
  transform: translateY(130%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}