/* =============== */
/*  Theme Tokens   */
/* =============== */
:root{
  --navy:#0b2a56;
  --navy-ink:#0a2247;
  --silver:#c4c9d2;
  --ink:#0b1220;
  --text:#1b2430;
  --bg:#f6f7fb;
  --white:#fff;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-h: 64px;
}
@supports not (padding: max(0px)){
  :root{
    --safe-top: constant(safe-area-inset-top, 0px);
    --safe-left: constant(safe-area-inset-left, 0px);
    --safe-right: constant(safe-area-inset-right, 0px);
  }
}

/* =============== */
/*  Base / Layout  */
/* =============== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{overflow-x:hidden}
html{background:var(--navy)}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
html{ scroll-padding-top: calc(var(--header-h) + var(--safe-top)); }

/* =============== */
/*     Header      */
/* =============== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--navy);color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-left:max(20px, var(--safe-left));
  padding-right:max(20px, var(--safe-right));
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;min-height:72px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.header-logo{height:70px;width:auto;display:block}
@media (max-width:900px){ .header-logo{height:60px} }

/* iPhone-safe, left-aligned header */
@media (max-width:720px){
  :root{ --header-h: 72px; }
  .site-header{
    position:fixed !important; top:0; left:0; right:0; z-index:100;
    padding-top:calc(var(--safe-top) + 6px) !important;
    background-clip:padding-box;
  }
  .site-header::before{ content:""; display:block; height:calc(var(--safe-top) + 4px); }
  .header-inner{
    min-height:var(--header-h);
    display:grid !important; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  }
  .brand{ grid-column:1; justify-self:start }
  .nav{ grid-column:2; justify-self:start }
  .header-logo{ max-height: calc(var(--header-h) - 16px); height:auto; max-width:172px }
  .site-header + .hero{ margin-top: calc(var(--header-h) + var(--safe-top) + 10px) !important; }
}

/* Nav & buttons */
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:#fff;text-decoration:none;font-weight:600;opacity:.9}
.nav a:hover{opacity:1}
@media (max-width:380px){
  .nav{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}
.btn{
  display:inline-block;border-radius:10px;padding:12px 18px;
  text-decoration:none;font-weight:700;border:2px solid transparent;
}
.btn-primary{background:#fff;color:var(--navy)}
.btn-outline{border-color:#fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--navy)}
.site-header .btn-primary{background:transparent;color:#fff;border:2px solid #fff;border-radius:10px}
.site-header .btn-primary:hover{background:#fff;color:var(--navy)}
@media (max-width:600px){ .nav a{font-size:15px} .site-header .btn-primary{padding:8px 14px} }
@media (max-width:480px){
  .site-header{
    padding-right: calc(max(12px, env(safe-area-inset-right, 0px)) + 12px) !important;
    padding-left:  max(12px, env(safe-area-inset-left, 0px)) !important;
  }
  .header-inner{ gap: 10px; }
  .nav{ gap: 10px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .site-header .btn-primary{ padding: 7px 10px; font-size:14px; line-height:1; border-radius:9px; }
  .nav a{ font-size:15px; line-height:1; }
}

/* =============== */
/*      Hero       */
/* =============== */
.hero{ background:var(--navy); color:#fff; padding:56px 0; overflow:clip; }
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr} }
@media (max-width:768px){
  .hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero-art{order:-1;margin-bottom:20px}
  .hero-text{order:1}
}
.hero-text h1{font-family:Montserrat,Inter,Arial,Helvetica,sans-serif;font-size:40px;line-height:1.1;margin:0 0 10px}
@media (max-width:600px){ .hero-text h1{font-size:32px} }
.hero-text p,.hero .hours,.hero .hours a{color:#eaf1ff}
.cta-row{display:flex;gap:12px;margin:18px 0 8px}
.hours{font-size:14px;opacity:.95}
.hero-logo{width:100%;max-width:760px;display:block;margin:0 auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.35))}
@media (max-width:900px){ .hero-logo{max-width:520px} }

/* =============== */
/*   Car effects   */
/* =============== */
.hero-art{position:relative}
.car-drive{ position:relative; display:inline-block; z-index:1; transform:translateX(-120vw); will-change:transform,filter; }
.page-loaded .car-drive{ animation:car-drive-in 1.4s cubic-bezier(.22,.9,.26,1) .15s both; filter:drop-shadow(0 8px 30px rgba(0,0,0,.35)); }
.car-drive .hero-logo{position:relative;z-index:2}
@keyframes car-drive-in{
  0%{transform:translateX(-120vw) rotate(.6deg)}
  70%{transform:translateX(8px) rotate(0)}
  85%{transform:translateX(-4px) rotate(-.2deg)}
  100%{transform:translateX(0) rotate(0)}
}

/* Tire smoke / exhaust / skid (unchanged essentials) */
.car-drive .tire-smoke{position:absolute;pointer-events:none;z-index:3;left:clamp(10px,1.2vw,22px);bottom:clamp(78px,8.2vw,120px);display:flex;gap:clamp(8px,1.2vw,16px);will-change:transform,opacity}
.car-drive .tire-smoke i{display:block;width:clamp(72px,11vw,150px);height:clamp(52px,9vw,110px);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);opacity:0;filter:blur(2.4px);animation:tire-smoke-puff 2.6s ease-out both}
.page-loaded .tire-smoke i:nth-child(1){animation-delay:.12s}
.page-loaded .tire-smoke i:nth-child(2){animation-delay:.52s}
.page-loaded .tire-smoke i:nth-child(3){animation-delay:.92s}
@keyframes tire-smoke-puff{0%{opacity:.9;transform:translate(-10px,8px) scale(.95)}35%{opacity:.75;transform:translate(-32px,-4px) scale(1.2)}70%{opacity:.45;transform:translate(-78px,-26px) scale(1.65)}100%{opacity:0;transform:translate(-112px,-46px) scale(2.05)}}
.exhaust{position:absolute;z-index:0;left:clamp(-14px,-1.2vw,-6px);bottom:clamp(36px,4.6vw,54px);width:clamp(18px,2.6vw,28px);height:clamp(18px,2.6vw,28px);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);opacity:0;filter:blur(.7px)}
.page-loaded .exhaust{animation:exhaust1 1.3s ease-out .22s both}
.exhaust::before,.exhaust::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0;filter:blur(.7px)}
.page-loaded .exhaust::before{animation:exhaust2 1.4s ease-out .34s both}
.page-loaded .exhaust::after{animation:exhaust3 1.5s ease-out .46s both}
@keyframes exhaust1{0%{transform:translate(-6px,8px) scale(.6);opacity:0}25%{opacity:.55}100%{transform:translate(-48px,-6px) scale(1.5);opacity:0}}
@keyframes exhaust2{0%{transform:translate(-4px,10px) scale(.5);opacity:0}30%{opacity:.5}100%{transform:translate(-58px,-10px) scale(1.7);opacity:0}}
@keyframes exhaust3{0%{transform:translate(-2px,12px) scale(.45);opacity:0}35%{opacity:.45}100%{transform:translate(-68px,-14px) scale(1.9);opacity:0}}
.skid{position:absolute;z-index:0;left:clamp(28px,2.4vw,40px);bottom:clamp(28px,3.6vw,42px);height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,rgba(20,26,38,.35),rgba(20,26,38,0));opacity:0;filter:blur(.6px);pointer-events:none}
.page-loaded .skid{animation:skid-line .75s cubic-bezier(.22,.9,.26,1) .55s both}
@keyframes skid-line{0%{width:0;opacity:0;transform:translateX(0)}45%{width:clamp(110px,14vw,190px);opacity:.65;transform:translateX(6px)}100%{width:clamp(130px,16vw,220px);opacity:0;transform:translateX(12px)}}
.page-loaded .hero-text>*{animation:hero-fade-up .6s ease both}
@keyframes hero-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* =============== */
/*     Sections    */
/* =============== */
.section{padding:56px 0;background:#fff}
.section.alt{background:#f3f6fb}
.section h2{font-family:Montserrat,Inter,Arial,Helvetica,sans-serif;font-size:28px;margin:0 0 8px}
.section .sub{color:#525f75;margin:0 0 22px}

/* Services grid */
#services .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
@media (max-width:360px){ #services .grid{ grid-template-columns:1fr } }
.card{background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:18px;box-shadow:0 2px 6px rgba(10,20,40,.04)}
.card h3{margin:0 0 6px;font-size:18px}

/* =============== */
/*     Reviews     */
/* =============== */
.reviews-wrapper{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}
@media (max-width:768px){ .reviews-wrapper{flex-direction:column;text-align:center;align-items:center} }
.reviews-rotator{position:relative;min-height:150px;padding-bottom:56px;flex:1 1 auto;min-width:320px}
.review-card{opacity:0;position:absolute;inset:0;transition:opacity .5s ease}
.review-card.active{opacity:1}
.review-dots{display:flex;gap:8px;justify-content:center;position:absolute;left:0;right:0;bottom:10px}
.review-dot{width:10px;height:10px;border-radius:50%;background:#c8d2e6;border:none;cursor:pointer}
.review-dot[aria-selected="true"]{background:#0b2a56;transform:scale(1.1)}
.review-dot:focus-visible{outline:3px solid #0b2a56;outline-offset:2px;border-radius:999px}
.review-cta{flex:0 0 auto;align-self:flex-start}

/* Mobile: natural height; dots flow below */
@media (max-width:540px){
  .reviews-rotator{ height:auto !important; padding-bottom:16px !important; }
  .review-card{ position:static !important; opacity:1; display:none; }
  .review-card.active{ display:block; }
  .review-dots{ position:static !important; margin-top:10px; }
  .reviews-wrapper{ gap:20px; }
  .review-cta{ align-self:center; }
}

/* =============== */
/*     Gallery     */
/* =============== */
.gallery-wrap{ position:relative; margin-top:10px; }
.gallery-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(85vw, 360px);
  gap:12px; overflow-x:auto; padding:4px 2px 8px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gallery-rail::-webkit-scrollbar{ display:none; }
.gallery-rail .slide{
  position:relative; border-radius:12px; overflow:hidden; background:#e9edf5;
  aspect-ratio:4/3; scroll-snap-align:center; cursor:pointer;
}
.gallery-rail .slide img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.gallery-rail .slide:hover img{ transform:scale(1.03); }
@media (min-width:900px){ .gallery-rail{ grid-auto-columns:min(28%, 340px); } }

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.85);z-index:9999;padding:20px}
.lightbox.open{display:grid}
.lightbox img{max-width:min(100%,1100px);max-height:calc(100vh - 140px);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox button{
  position:absolute;background:rgba(255,255,255,.12);color:#fff;border:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;font-size:22px;backdrop-filter:blur(6px)
}
.lightbox-close{top:18px;right:18px;font-size:30px}
.lightbox-prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:18px;top:50%;transform:translateY(-50%)}

/* =============== */
/*     Contact     */
/* =============== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card,.map-card{background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form textarea{width:100%;padding:12px 14px;border:1px solid #d5dbe6;border-radius:10px;font:inherit}
.form button{margin-top:10px}
.form-note{display:block;margin-top:8px;color:#69758c;font-size:12px}
img,iframe{max-width:100%}
.contact-card,.map-card{overflow:hidden}
@media (max-width:900px){ .contact{grid-template-columns:1fr} .map-card{height:380px} }
@media (max-width:600px){ .form .row{grid-template-columns:1fr} .container{padding:0 16px} .map-card{height:320px} }
@media (min-width:901px){ .map-card{height:420px} }

/* =============== */
/*     Footer      */
/* =============== */
.site-footer{background:#0b1220;color:#c9d1e2;padding:20px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.tagline{opacity:.85}

/* =============== */
/*  Meet the Owner */
/* =============== */
#owner.section { background:#fff; }
.owner-wrap{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap:20px; align-items:center; }
.owner-photo{ background:#e9edf5; border:1px solid #e6ecf5; border-radius:14px; overflow:hidden; aspect-ratio: 4 / 5; max-height: 520px; box-shadow:0 2px 6px rgba(10,20,40,.04); }
.owner-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
@media (max-width:900px){ .owner-wrap{ grid-template-columns:1fr; } .owner-photo{ aspect-ratio: 3 / 4; max-height:none; } }

/* =============== */
/*  Reduced Motion */
/* =============== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .car-drive{transform:none !important}
  .exhaust,.tire-smoke i,.skid{opacity:1}
}
/* Safeguard: ensure Google review button never blows up on mobile */
.google-review-btn{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border:2px solid #4285F4;
  border-radius:8px;
  background:#fff;
  color:#4285F4;
  text-decoration:none;
  white-space:nowrap;
}
.google-review-btn:hover{ background:#4285F4; color:#fff; }
.google-review-btn:hover .google-icon{ filter:brightness(0) invert(1); }

.google-review-btn .google-icon,
.google-review-btn img{
  width:20px !important;
  height:20px !important;
  display:inline-block;
  flex:0 0 auto;