/* Peak MOT - Flat site (MSD-ish glow vibe) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Rajdhani:wght@400;600;700&display=swap');

:root{
  --bg:#05060c;
  --bg2:#070a14;
  --card:#0b1022cc;
  --card2:#0b1022f2;
  --text:#e9efff;
  --muted:#b7c0d8;
  --line:#1a2446;
  --glow:#1eea74;
  --glow2:#ff2d2d;
  --ok:#4dffb5;
  --warn:#ffd05f;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 700px at 50% -10%, rgba(30,234,116,.10), transparent 55%),
              radial-gradient(900px 600px at 90% 10%, rgba(255,45,45,.08), transparent 60%),
              linear-gradient(180deg, #05060c 0%, #05060c 40%, #070a14 100%);
  font-family: Rajdhani, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
  overflow-x:hidden;
}

.bg-grid{display:none;}

.container{width:min(1120px, calc(100% - 44px)); margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(8,10,18,.88), rgba(8,10,18,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.brand__logo{width:42px; height:42px; filter: drop-shadow(0 0 14px rgba(95,184,255,.25))}
.brand__name{
  font-family: Orbitron, Rajdhani, sans-serif;
  letter-spacing:1.2px;
  font-weight:800;
  font-size:16px;
  line-height:1.05;
}
.brand__tag{font-size:12px; color:var(--muted); margin-top:2px}

.nav{display:flex; gap:14px; align-items:center}
.nav__link{
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
  padding:12px 12px;
  border-radius:12px;
  transition:all .2s ease;
}
.nav__link:hover{
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.nav__link.is-active{
  color:var(--text);
  background:rgba(95,184,255,.08);
  box-shadow: 0 0 0 1px rgba(95,184,255,.18) inset;
}

.nav-toggle{
  display:none;
  width:46px; height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
}
.nav-toggle span{
  display:block; height:2px; width:22px; margin:5px auto;
  background:var(--text); border-radius:2px;
  box-shadow: 0 0 12px rgba(95,184,255,.22);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.35px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  border:1px solid rgba(255,255,255,.12);
  user-select:none;
}
.btn--small{padding:10px 12px; border-radius:12px; font-size:14px}
.btn--glow{
  background: linear-gradient(135deg, rgba(255,45,45,.22), rgba(45,125,255,.18));
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(255,45,45,.14) inset,
    0 0 0 1px rgba(45,125,255,.10),
    0 14px 60px rgba(255,45,45,.14),
    0 14px 60px rgba(45,125,255,.12);
  color:var(--text);
  position:relative;
  overflow:hidden;
}
.btn--glow::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,45,45,.18), transparent 45%),
              radial-gradient(circle at 70% 60%, rgba(45,125,255,.16), transparent 50%);
  filter: blur(10px);
  opacity:.9;
  animation: glowmove 4.8s ease-in-out infinite;
}
.btn--glow > *{ position:relative; z-index:1; }
@keyframes glowmove{
  0%,100%{ transform: translate(0,0) }
  50%{ transform: translate(6%, -4%) }
}
.btn--glow:hover{transform:translateY(-1px); box-shadow: 0 0 0 1px rgba(95,184,255,.18) inset, 0 16px 60px rgba(95,184,255,.20)}
.btn--ghost{
  background: rgba(255,255,255,.03);
  color:var(--text);
}
.btn--ghost:hover{transform:translateY(-1px); background: rgba(255,255,255,.06)}

.badge{
  display:inline-flex; align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  color:var(--text);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(95,184,255,.06) inset;
}

.hero{
  position:relative;
  padding:72px 0 46px;
  overflow:hidden;
}
.hero__content{position:relative; z-index:2}
.hero__title{
  margin:16px 0 10px;
  font-family: Orbitron, sans-serif;
  font-size: clamp(30px, 4.2vw, 56px);
  letter-spacing:1.2px;
  line-height:1.05;
}
.hero__titleGlow{
  display:block;
  color:transparent;
  background: linear-gradient(90deg, var(--glow), var(--glow2));
  -webkit-background-clip:text; background-clip:text;
  text-shadow: 0 0 40px rgba(95,184,255,.20);
}
.hero__sub{max-width:680px; color:var(--muted); font-size:18px; line-height:1.5}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.hero__quick{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  text-decoration:none;
  color:var(--text);
}
.chip:hover{background: rgba(255,255,255,.05)}
.chip__k{color:var(--muted); font-weight:800; font-size:13px}
.chip__v{font-weight:900}

.hero__stats{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.stat{
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  padding:12px 12px;
  box-shadow: 0 0 0 1px rgba(95,184,255,.06) inset;
}
.stat__n{
  font-family: Orbitron, sans-serif;
  letter-spacing:1px;
  font-weight:800;
  font-size:14px;
}
.stat__t{color:var(--muted); font-weight:700; margin-top:6px}

.hero__visual{
  position:absolute; right:-80px; top:40px;
  width:min(520px, 62vw);
  height:520px;
  z-index:1;
  pointer-events:none;
}
.ring{
  position:absolute; inset:0;
  border-radius:999px;
  border:1px solid rgba(95,184,255,.14);
  box-shadow: 0 0 60px rgba(95,184,255,.12);
  filter: blur(.0px);
  animation: spin 18s linear infinite;
}
.ring--b{
  inset:60px;
  border-color: rgba(139,92,255,.12);
  box-shadow: 0 0 70px rgba(139,92,255,.10);
  animation-duration: 26s;
  animation-direction: reverse;
}
@keyframes spin { to { transform: rotate(360deg);} }

.cardy{
  position:absolute; left:80px; top:130px;
  width: 320px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(11,16,34,.85), rgba(11,16,34,.55));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow), 0 0 0 1px rgba(95,184,255,.08) inset;
  padding:14px;
}
.cardy__top{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.pulse-dot{
  width:10px; height:10px; border-radius:99px;
  background: var(--ok);
  box-shadow: 0 0 18px rgba(77,255,181,.55);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform:scale(1); opacity:1 }
  50% { transform:scale(1.35); opacity:.65 }
}
.cardy__title{font-weight:900; letter-spacing:.6px}
.cardy__rows{display:grid; gap:8px}
.row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-weight:800;
}
.row .ok{color:var(--ok)}
.row .warn{color:var(--warn)}
.cardy__foot{margin-top:10px; color:var(--muted); font-weight:700; font-size:14px}

.section{padding:32px 0}
.section--soft{
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  padding:28px 22px;
  box-shadow: 0 0 0 1px rgba(95,184,255,.05) inset;
}
.section__head h2{margin:0 0 6px; font-family: Orbitron, sans-serif; letter-spacing:1px}
.section__head p{margin:0; color:var(--muted); font-size:16px}

.cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
}
.card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  padding:16px 16px;
  box-shadow: 0 0 0 1px rgba(95,184,255,.06) inset;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.04);
  border-color: rgba(95,184,255,.22);
}
.card--static:hover{transform:none}
.card__icon{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(95,184,255,.18), rgba(139,92,255,.12));
  border:1px solid rgba(95,184,255,.22);
  box-shadow: 0 0 30px rgba(95,184,255,.10);
  margin-bottom:10px;
  font-weight:900;
}
.card h3{margin:0 0 6px; font-family: Orbitron, sans-serif; letter-spacing:.8px; font-size:16px}
.card p{margin:0; color:var(--muted); font-weight:700; line-height:1.4}
.card__more{margin-top:12px; font-weight:900; color:var(--text)}

.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.split--tight{grid-template-columns: 1fr 1fr}

.lead{color:var(--muted); font-size:18px; line-height:1.5}
.ticks{margin:14px 0 0; padding-left:18px; color:var(--muted); font-weight:700}
.ticks li{margin:8px 0}

.panel{
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  padding:16px;
  box-shadow: 0 0 0 1px rgba(95,184,255,.06) inset;
}
.panel__k{font-weight:900; font-family: Orbitron, sans-serif; letter-spacing:.8px; margin-bottom:8px}
.panel__v{color:var(--muted); font-weight:700; line-height:1.45}
.panel__mini{margin-top:12px}
.mini{
  border-radius:12px;
  background: rgba(95,184,255,.06);
  border:1px solid rgba(95,184,255,.16);
  padding:12px 12px;
}
.mini__t{font-weight:900}
.mini__b{color:var(--muted); font-weight:700; margin-top:4px}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .92em; color:#cfe6ff}

.page{padding:34px 0 40px}
.page__head{padding:10px 0 18px}
.page__head h1{margin:12px 0 8px; font-family: Orbitron, sans-serif; letter-spacing:1px}
.page__head p{margin:0}

.list-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
.list-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  padding:14px;
  color:var(--muted);
  font-weight:700;
}
.list-card h3{margin:0 0 6px; color:var(--text); font-family: Orbitron, sans-serif; letter-spacing:.7px; font-size:16px}
.list-card p{margin:0; line-height:1.45}

.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}

.contact-cards{display:grid; grid-template-columns: 1fr; gap:10px; margin-top:12px}
.contact-card{
  display:block; text-decoration:none; color:inherit;
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  padding:14px;
  box-shadow: 0 0 0 1px rgba(95,184,255,.06) inset;
}
.contact-card:hover{border-color: rgba(95,184,255,.22); background: rgba(255,255,255,.04)}
.contact-card__k{color:var(--muted); font-weight:900; letter-spacing:.5px}
.contact-card__v{font-weight:900; font-size:18px; margin-top:6px}

.address{margin-top:16px}
.address h3{margin:0 0 6px; font-family: Orbitron, sans-serif; letter-spacing:.7px}
.address p{margin:0; color:var(--muted); font-weight:700; line-height:1.5}

.copybox{
  margin-top:10px;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.copybox pre{
  margin:0;
  padding:14px;
  background: rgba(0,0,0,.25);
  color: #cfe6ff;
  font-weight:700;
  white-space:pre-wrap;
}
.copybtn{
  width:100%;
  padding:12px 14px;
  background: rgba(95,184,255,.10);
  border:0;
  color: var(--text);
  font-weight:900;
  cursor:pointer;
}
.copybtn:hover{background: rgba(95,184,255,.16)}

.footer{
  margin-top:30px;
  padding:26px 0 22px;
  border-top:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(8,10,18,.15), rgba(8,10,18,.45));
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .6fr .8fr;
  gap:14px;
  align-items:start;
}
.footer__brand{font-family: Orbitron, sans-serif; letter-spacing:.9px; font-weight:800}
.footer__small{color:var(--muted); font-weight:700; margin-top:6px; line-height:1.4}
.footer__links{display:grid; gap:8px}
.footer__links a{color:var(--muted); text-decoration:none; font-weight:800}
.footer__links a:hover{color:var(--text)}
.footer__cta{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.footer__bottom{
  margin-top:14px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  color:var(--muted); font-weight:700;
}
.sep{opacity:.6}
.muted{color:var(--muted)}

@media (max-width: 980px){
  .hero__visual{display:none}
  .cards{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .list-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .hero__stats{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .split{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr; gap:10px}
  .footer__cta{justify-content:flex-start}
}

@media (max-width: 760px){
  .nav-toggle{display:inline-block}
  .nav{
    position:fixed; left:16px; right:16px; top:74px;
    flex-direction:column;
    align-items:stretch;
    padding:14px;
    border-radius: 18px;
    background: rgba(10,12,22,.92);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    transform: translateY(-14px);
    opacity:0;
    pointer-events:none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .nav.is-open{
    opacity:1;
    pointer-events:auto;
    transform: translateY(0px);
  }
  .nav__link{padding:12px 12px}
  .cards{grid-template-columns: 1fr}
  .list-grid{grid-template-columns: 1fr}
}


/* ---- Tuning-style pills ---- */
.site-header{
  padding:12px 16px;
}
.nav{
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav__link{
  text-transform:uppercase;
  font-family: Orbitron, Rajdhani, sans-serif;
  letter-spacing:1px;
  font-size:13px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(30,234,116,.22);
  background: rgba(0,0,0,.35);
  box-shadow:
    0 0 0 1px rgba(30,234,116,.08) inset,
    0 10px 30px rgba(0,0,0,.35);
}
.nav__link:hover{
  background: rgba(30,234,116,.06);
  border-color: rgba(30,234,116,.35);
}
.nav__link.is-active{
  background: rgba(30,234,116,.08);
  border-color: rgba(30,234,116,.45);
  color: var(--text);
}

.btn--small{
  border-radius:999px;
  text-transform:uppercase;
  font-family: Orbitron, Rajdhani, sans-serif;
  letter-spacing:1px;
  font-size:12px;
  padding:12px 16px;
}

/* Two-button hero style: red + green */
.btn--glow{
  border-radius:999px;
  text-transform:uppercase;
  font-family: Orbitron, Rajdhani, sans-serif;
  letter-spacing:1px;
}
.btn--ghost{
  border-radius:999px;
  text-transform:uppercase;
  font-family: Orbitron, Rajdhani, sans-serif;
  letter-spacing:1px;
  border-color: rgba(255,45,45,.25);
  box-shadow: 0 0 0 1px rgba(255,45,45,.10) inset;
}
.btn--ghost:hover{
  background: rgba(255,45,45,.08);
  border-color: rgba(255,45,45,.35);
}

/* Make the primary CTA green like tuning WhatsApp */
.btn--glow{
  background: linear-gradient(180deg, rgba(30,234,116,.30), rgba(30,234,116,.16));
  border-color: rgba(30,234,116,.35);
  box-shadow:
    0 0 0 1px rgba(30,234,116,.16) inset,
    0 16px 70px rgba(30,234,116,.16),
    0 16px 70px rgba(0,0,0,.35);
}
.btn--glow:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(30,234,116,.22) inset,
    0 22px 90px rgba(30,234,116,.22);
}

/* Hero typography closer to tuning */
.hero__title{
  text-transform:uppercase;
}
.hero__titleGlow{
  background: linear-gradient(90deg, rgba(30,234,116,1), rgba(30,234,116,.75));
  -webkit-background-clip:text; background-clip:text;
}
.hero__sub{
  font-size:17px;
}

/* Tone down the extra widgets for cleaner nav/hero like tuning */
.hero__stats{opacity:.92}
.cardy{display:none}
.hero__visual{opacity:.7}

/* Mobile: pill nav already, keep */
@media (max-width: 760px){
  .nav{
    border-radius: 22px;
  }
  .nav__link, .btn--small{
    font-size:12px;
    padding:12px 14px;
  }
}


/* ---- HERO IMAGE (tuning style) ---- */
.hero{
  padding: 0;
}
.hero--image{
  position:relative;
  min-height: 88vh;
  display:flex;
  align-items:flex-end;
  padding: 120px 0 54px;
  background:
    radial-gradient(900px 500px at 50% 10%, rgba(0,0,0,.15), rgba(0,0,0,.70) 70%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.84)),
    url("hero_1400.jpg") center center / cover no-repeat;
}
@media (min-width: 980px){
  .hero--image{
    background:
      radial-gradient(1100px 600px at 50% 10%, rgba(0,0,0,.10), rgba(0,0,0,.72) 70%),
      linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.86)),
      url("hero.jpg") center center / cover no-repeat;
  }
}

.hero__topbar{
  position:absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 44px));
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding: 14px 14px;
  border-radius: 22px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}

.hero__logo{
  width: min(560px, 78vw);
  height: auto;
  display:block;
  margin: 0 auto 16px;
  filter: drop-shadow(0 22px 70px rgba(0,0,0,.70));
}
.hero__center{
  text-align:center;
  margin: 0 auto;
}
.hero__title, .hero__sub { text-align:center; max-width: 820px; margin-inline:auto; }
.hero__sub{ margin-top: 10px; }

.hero__bigBtns{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 18px;
}
.btn--whatsapp{
  background: linear-gradient(180deg, rgba(30,234,116,.34), rgba(30,234,116,.16));
  border-color: rgba(30,234,116,.42);
  box-shadow:
    0 0 0 1px rgba(30,234,116,.18) inset,
    0 22px 90px rgba(30,234,116,.20);
}
.btn--call{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn--call:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }

.hero__insta{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  color: var(--muted);
}
.hero__insta a{ color: var(--muted); text-decoration:none; }
.hero__insta a:hover{ color: var(--text); }
.insta-ico{ width:18px; height:18px; opacity:.9; }

.book-mot-attn{
  animation: bookpulse 1.6s ease-in-out infinite;
}
@keyframes bookpulse{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}
.book-mot-shake{
  animation: shake 2.8s ease-in-out infinite;
}
@keyframes shake{
  0%,88%,100%{ transform: translateX(0); }
  90%{ transform: translateX(-2px); }
  92%{ transform: translateX(2px); }
  94%{ transform: translateX(-2px); }
  96%{ transform: translateX(2px); }
  98%{ transform: translateX(0px); }
}

/* ---- "What we do" cards with faded images ---- */
.card{
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity: .22;
  filter: saturate(1.05) contrast(1.05);
}
.card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.72));
}
.card > *{ position:relative; z-index:1; }

.card.bg-mot::before{ background-image: url("assets/card_mot.jpg"); }
.card.bg-diag::before{ background-image: url("assets/card_diagnostics.jpg"); }
.card.bg-serv::before{ background-image: url("assets/card_servicing.jpg"); }
.card.bg-rep::before{ background-image: url("assets/card_repairs.jpg"); }


/* Remove top-left brand block (mobile + desktop) */
.brand{display:none !important;}
.site-header{justify-content:flex-end;}

/* Hero tweaks: use image as hero, don't overlay big logo blocking buttons */
.hero__logo{display:none !important;}
.hero__topbar{
  z-index:5;
}
.hero__content{
  position:relative;
  z-index:3;
}
.hero--image{
  align-items:flex-end;
  padding: 130px 0 60px;
}


/* =========================
   NAV + HERO (match tuning)
   ========================= */

.nav-toggle{display:none !important;}
.brand{display:none !important;}
.nav{display:flex !important;}

.site-header{
  position: static !important;
  padding: 14px 14px 0 !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.nav{
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.nav__link{
  text-transform: uppercase;
  font-family: Orbitron, Rajdhani, system-ui, sans-serif;
  letter-spacing: 1px;
  font-size: 12.5px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(30,234,116,.22);
  background: rgba(0,0,0,.35);
  box-shadow:
    0 0 0 1px rgba(30,234,116,.08) inset,
    0 10px 30px rgba(0,0,0,.35);
  color: var(--text);
  text-decoration: none;
}

.nav__link:hover{ background: rgba(30,234,116,.06); border-color: rgba(30,234,116,.35); }
.nav__link.is-active{ background: rgba(30,234,116,.08); border-color: rgba(30,234,116,.45); }

.nav__link.book-mot-attn{
  background: linear-gradient(180deg, rgba(30,234,116,.34), rgba(30,234,116,.16));
  border-color: rgba(30,234,116,.50);
  box-shadow:
    0 0 0 1px rgba(30,234,116,.22) inset,
    0 22px 90px rgba(30,234,116,.22);
}

body{ padding-top: 0 !important; }

.hero--media{
  position: relative;
  width: calc(100% - 28px);
  max-width: 980px;
  margin: 14px auto 0;
  height: 340px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
}
@media (min-width: 430px){ .hero--media{ height: 380px; } }
@media (min-width: 760px){ .hero--media{ height: 430px; } }

.hero__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.05) contrast(1.05);
}

.hero--media::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 10%, rgba(0,0,0,.05), rgba(0,0,0,.74) 70%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.80));
}

.hero-copy{ padding-top: 26px; padding-bottom: 10px; }
.hero-copy .hero__title, .hero-copy .hero__sub{ text-align:center; }
.hero-copy .hero__sub{ max-width: 780px; margin: 10px auto 0; }
.hero-copy .hero__bigBtns{ margin-top: 18px; }


/* =========================
   PORTRAIT FIX: NAV ALWAYS VISIBLE
   ========================= */
.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  padding: 14px 12px 10px !important;
  background: rgba(0,0,0,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) !important;
}

.nav{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* Space for the fixed nav (portrait vs landscape) */
body{ padding-top: 132px !important; }
@media (min-width: 520px){ body{ padding-top: 96px !important; } }

/* Ensure no old styles hide links on small screens */
.nav__link{ display:inline-flex !important; align-items:center; justify-content:center; }

/* =========================
   HERO SHOULD FILL PAGE BETTER
   ========================= */
.hero--media{
  width: calc(100% - 20px) !important;
  margin: 12px auto 0 !important;
  max-width: 980px !important;
  height: min(56vh, 560px) !important;
}
@media (max-width: 520px){
  .hero--media{ height: min(48vh, 460px) !important; }
}

/* Keep logo/cars visible while filling */
.hero__media{
  object-fit: cover !important;
  object-position: center 34% !important;
}


/* =========================
   NAV LAYOUT = LIKE TUNING (two-row pills, not vertical list)
   ========================= */
.site-header{
  background: transparent !important;           /* remove big dark slab */
  border-bottom: none !important;
  backdrop-filter: none !important;
  padding: 14px 12px 0 !important;
}

.nav{
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.nav__link{
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  white-space: nowrap !important;
  padding: 14px 18px !important;
}

/* Make pills look closer to tuning */
.nav__link{
  background: rgba(0,0,0,.55) !important;
  border-color: rgba(30,234,116,.28) !important;
  box-shadow:
    0 0 0 1px rgba(30,234,116,.10) inset,
    0 18px 60px rgba(0,0,0,.55) !important;
}

/* Keep BOOK MOT slightly larger */
.nav__link.book-mot-attn{
  padding: 14px 22px !important;
}

/* Adjust top padding for fixed header now that it's slimmer */
body{ padding-top: 108px !important; }
@media (min-width: 520px){ body{ padding-top: 86px !important; } }

/* =========================
   HERO CARD SHOULD START UNDER NAV AND FEEL LARGE
   ========================= */
.hero--media{
  margin-top: 10px !important;
  height: min(46vh, 460px) !important;
}
@media (max-width: 520px){
  .hero--media{ height: min(40vh, 380px) !important; }
}


/* =========================
   NAV BEHAVIOUR: SCROLLS AWAY (like tuning)
   ========================= */
.site-header{
  position: static !important;   /* NOT fixed */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}

/* Remove any forced body padding from previous fixed-header fixes */
body{ padding-top: 0 !important; }

/* Give hero breathing room below the pills so they never block the image */
.hero--media{
  margin-top: 18px !important;
}

/* If any old fixed nav created an invisible overlay, kill it */
.site-header, .nav{
  pointer-events: auto !important;
}


/* =========================
   FINAL SPACING TWEAK (match tuning)
   ========================= */
.site-header{
  padding-top: 4px !important;
}

.hero--media{
  margin-top: 28px !important;
}


/* =========================
   CLEAR BOOK MOT OVERLAP
   ========================= */
/* Add real space below nav so BOOK MOT row never touches hero */
.site-header{
  padding-bottom: 18px !important;
  margin-bottom: 10px !important;
}

/* Let hero start lower (extra breathing room) */
.hero--media{
  margin-top: 0 !important;
}

/* If BOOK MOT had any transform/shake offset, neutralise vertical drift */
.book-mot-shake{
  transform: translateY(0) !important;
}

/* =========================
   FORCE GAP BETWEEN NAV + HERO
   ========================= */
.site-header{
  position: static !important;
  margin: 0 !important;
  padding: 10px 12px 18px !important; /* more bottom padding */
}

.nav{
  margin-bottom: 14px !important; /* pushes hero down */
}

.hero--media{
  margin-top: 0 !important; /* rely on nav margin-bottom */
}

@media (max-width: 520px){
  .nav{ margin-bottom: 18px !important; }
}

/* Safety: if hero has any negative translate/margin from old rules */
.hero, .hero--media{
  transform: none !important;
}


/* =========================
   NAV: REMOVE PRICING PILL (2 ROWS CLEAN)
   ========================= */
.nav{
  margin-bottom: 18px !important; /* comfortable gap */
}

/* With fewer pills, hero can sit slightly higher without touch */
.hero--media{
  margin-top: 6px !important;
}

/* force gap (backup) */
.nav{margin-bottom: 18px !important;}