:root{
  --navy:#0A1122; --navy-700:#0e152b; --ink:#EDEFF3; --muted:#b5bfd3;
  --stroke:#1a2345; --panel:#101835; --panel2:#0c1327; --accent1:#7b8cff; --accent2:#5a6ee6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink); background:linear-gradient(180deg,var(--navy),var(--navy-700))}
a{color:inherit; text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.header{position:sticky; top:0; z-index:30; background:rgba(10,17,34,.82); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid #111a33}
.header .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:32px; height:32px}
.brand .name{font-weight:700; letter-spacing:.4px}
.nav a{font-size:14px; margin:0 10px; color:#cfd6e6}
.nav a:hover{color:#fff}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; font-weight:600; cursor:pointer;
  background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; border:none}
.btn.secondary{background:#16213d; border:1px solid #2a3961}
.hero{padding:96px 0 42px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-20%;
  background:radial-gradient(60% 60% at 12% 10%, #101a36 0, transparent 60%), radial-gradient(70% 70% at 90% 20%, #0f1730 0, transparent 60%);
  opacity:.55; pointer-events:none}
.hero .grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; position:relative; z-index:1}
.hero h1{font-size:48px; line-height:1.06; margin:0}
.hero p{color:#c1c9d8; font-size:18px}
.card{background:radial-gradient(120% 140% at 10% 10%, #121a36 0%, #0a1224 65%); border:1px solid var(--stroke); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden}
.section{padding:70px 0}
.kicker{color:#94a0b8; font-size:12px; letter-spacing:1.6px; text-transform:uppercase}
.title{font-size:34px; margin:8px 0 12px}
.subtitle{color:#b9c2d5; max-width:680px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.service,.fleet,.why,.review{padding:18px}
.service h3,.fleet h3{margin:12px 0 6px}
.service p,.fleet p{color:#b7c0d4}
.icon{width:44px; height:44px; display:grid; place-items:center; background:#111a33; border-radius:12px; border:1px solid #1e2a4a}
.fleet .frame{width:100%; height:200px; background:#0d1428; border-radius:12px; border:1px solid var(--stroke); overflow:hidden; display:grid; place-items:center}
.fleet .frame img{width:100%; height:100%; object-fit:cover; display:block}
.badges{display:flex; gap:20px; margin-top:18px; color:#c7cfde; flex-wrap:wrap}
.badge{display:flex; align-items:center; gap:8px}
.reviews .review p{color:#cbd3e3}
.booking{display:grid; grid-template-columns:1.1fr .9fr; gap:20px}
.form-shell{background:linear-gradient(180deg,#0d1630,#0a1226); border:1px solid #1c2749; border-radius:18px; padding:18px}
.stepper{display:flex; gap:8px; margin:4px 0 14px}
.chip{padding:8px 12px; border-radius:999px; border:1px solid #233155; background:#0c1327; font-size:12px; color:#cfd6e6}
.chip.active{border-color:#5464c9; box-shadow:0 0 0 2px rgba(124,140,255,.25) inset}
.fieldset{display:grid; gap:12px; margin:10px 0}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.input, select, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid #233155; background:var(--panel2); color:#e7ecf6; font-size:15px}
.radio-row{display:flex; gap:14px; flex-wrap:wrap}
label{font-size:13px; color:#c3ccde; display:block; margin-bottom:6px}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
.estimate-card{background:radial-gradient(120% 140% at 10% 10%, #121a36 0%, #0a1224 65%); border:1px solid var(--stroke); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px; justify-content:center}
.estimate{font-size:40px; font-weight:800}
.faq details{background:var(--panel2); border:1px solid #1e2a4a; border-radius:14px; padding:14px}
.faq summary{cursor:pointer; font-weight:600}
footer{border-top:1px solid var(--stroke); color:#aeb8cc; padding:26px 0; font-size:14px}
.small{font-size:12px; color:#9aa6bf}
hr{border:none; border-top:1px solid var(--stroke); margin:20px 0}
@media (max-width:980px){
  .hero .grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .booking{grid-template-columns:1fr}
}
.hero .cta-links{position:relative; z-index:2}
/* Fix centering for all card images */
.card img, 
.fleet .frame img {
  display: block;
  margin: 0 auto;           /* centers horizontally */
  max-width: 100%;          /* prevents overflow */
  height: auto;             /* keeps proportions */
  object-fit: contain;      /* ensures full image shows */
}

/* Reviews reel */
.reel-ctrls{display:flex; justify-content:flex-end; gap:8px; margin-bottom:8px}
.reel-btn{
  background:#16213d; color:#e6ebf6; border:1px solid #2a3961;
  width:36px; height:36px; border-radius:999px; cursor:pointer;
}
.reel{
  display:flex; gap:16px; overflow-x:auto; padding:4px 2px 10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.reel::-webkit-scrollbar{height:8px}
.reel::-webkit-scrollbar-thumb{background:#1e2a4a; border-radius:8px}
.review-card{min-width:320px; scroll-snap-align:start; padding:18px}
.review-card p{color:#cfd6e6; margin:0 0 8px}
.rev-meta{display:block; font-size:13px; color:#9aa6bf}
@media (max-width:480px){ .review-card{min-width:86%} }

/* --- Reviews reel: exactly 3 tiles on desktop --- */
.reel{
  display:flex;
  gap:16px;                  /* space between tiles */
  overflow-x:auto;
  padding:4px 2px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

/* DESKTOP ≥ 992px: 3 tiles per view */
.review-card{
  flex:0 0 calc((100% - 32px) / 3);  /* 3 tiles, subtract 2 gaps */
  max-width:calc((100% - 32px) / 3);
  scroll-snap-align:start;
  border-radius:14px;
  padding:18px;
}
.review-card p{ margin:0 0 8px; color:#cfd6e6; }
.rev-meta{ display:block; font-size:13px; color:#9aa6bf; }

/* arrows */
.reel-ctrls{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:8px; }
.reel-btn{
  background:#16213d; color:#e6ebf6; border:1px solid #2a3961;
  width:36px; height:36px; border-radius:999px; cursor:pointer;
}

/* TABLET 600–991px: 2 tiles per view */
@media (max-width: 991px){
  .review-card{
    flex:0 0 calc((100% - 16px) / 2); /* 2 tiles, subtract 1 gap */
    max-width:calc((100% - 16px) / 2);
  }
}

/* MOBILE ≤ 599px: 1 tile per view */
@media (max-width: 599px){
  .review-card{
    flex:0 0 100%;
    max-width:100%;
  }
}
/* Fleet image framing */
.fleet .frame{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:220px; /* adjust if you want taller */
  background:#0d1428; border:1px solid var(--stroke); border-radius:12px; overflow:hidden;
}
.fleet .frame img{
  width:100%; height:100%;
  object-fit:cover;           /* fills the frame */
  object-position:center;     /* default focus */
  display:block;
}

/* Focus helpers to re-center subjects per photo */
.obj-center  { object-position: 50% 50% !important; }
.obj-left    { object-position: 20% 50% !important; }   /* pull view to left */
.obj-right   { object-position: 80% 50% !important; }   /* pull view to right */
.obj-top     { object-position: 50% 25% !important; }
.obj-bottom  { object-position: 50% 75% !important; }
/* Fine-tuned focus for sedan shot */
.obj-right-strong { object-position: 88% 55% !important; } /* more right, slightly lower */
/* --- Mobile header fixes --- */
.header{
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(10,17,34,.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid #111a33;
  padding-top: env(safe-area-inset-top); /* iOS notch */
}

/* Toggle button (hidden on desktop) */
.nav-toggle{
  display:none;
  background:#16213d;
  color:#e6ebf6;
  border:1px solid #2a3961;
  border-radius:10px;
  padding:8px 12px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

/* Base nav layout on desktop (unchanged) */
.nav{ display:flex; align-items:center; gap:10px; }

/* --- Mobile layout --- */
@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .nav{
    position: absolute;
    right: 16px; left: 16px;
    top: calc(100% + 8px);
    display: grid;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(180deg,#101835,#0a1224);
    border: 1px solid #1c2749;
    border-radius: 14px;
    box-shadow: 0 16px 50px rgba(0,0,0,.45);
    max-height: 0;           /* collapsed */
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .nav a{ padding: 10px 12px; border-radius: 10px; background: #0d1630; }
  .nav a.btn{ text-align:center; }

  /* opened state */
  .nav.open{
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
  }

  /* Keep brand & toggle spaced */
  .header .inner{ gap:12px }
}

/* Prevent body scroll when menu open (class added by JS) */
.body-lock{ overflow: hidden; }