/* ========== Base ==========
   Put this file in the same folder as index.html
*/
:root{
  --bg:#0f1216;
  --surface:#151a21;
  --surface-2:#1a2029;
  --text:#e6e6e8;
  --muted:#9aa3ad;
  --accent:#f5d36c;       /* gold accent */
  --ring:#2b3442;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Utilities */
.container{width:min(1200px, 92%); margin-inline:auto}
.muted{color:var(--muted)}
.eyebrow{letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent); font-size:.86rem}
.center{text-align:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; border-radius:12px; font-weight:600; text-decoration:none;
  border:1px solid transparent; transition:.2s ease; cursor:pointer;
}
.btn-primary{background:var(--accent); color:#17181b}
.btn-primary:hover{filter:brightness(.95)}
.btn-light{background:#fff; color:#111; border-color:#fff}
.btn-light:hover{opacity:.95}

.card{
  background:linear-gradient(180deg,var(--surface),#12161c);
  border:1px solid #1d2430; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.card img{display:block; width:100%; height:220px; object-fit:cover}
.card .card-body{padding:1.1rem 1.2rem}

/* ========= Header / Nav ========= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,18,22,.8); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid #1c2230;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 0;
}
.brand{
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.3px; font-size:1.3rem;
}
.brand-mark{color:var(--accent)}

.nav{display:flex; gap:1.2rem}
.nav a{color:var(--muted); text-decoration:none; font-weight:500}
.nav a:hover{color:var(--text)}

.hamburger{
  display:none; border:1px solid #2b3442; background:var(--surface); color:#fff;
  width:40px; height:40px; border-radius:10px;
}
.hide-sm{display:inline-flex}

/* mobile menu */
@media (max-width: 900px){
  .hamburger{display:inline-grid; place-items:center}
  .hide-sm{display:none}
  .nav{
    position:absolute; inset:60px 4% auto 4%;
    background:var(--surface-2); border:1px solid #253042; border-radius:16px;
    display:none; flex-direction:column; padding:.8rem;
  }
  .nav.open{display:flex}
  .nav a{padding:.6rem .8rem; border-radius:10px}
  .nav a:hover{background:#202836}
}

/* ========= Hero ========= */
.hero{position:relative; min-height:78vh; display:grid; align-items:end}
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-media img{width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05)}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,15,20,.45), rgba(12,15,20,.92) 60%, var(--bg) 100%);
}
.hero-inner{position:relative; padding:9rem 0 4rem}
.hero-title{margin:.4rem 0 1rem; line-height:1.1; font-size:clamp(2.2rem, 5vw, 4rem)}
.hero-sub{max-width:720px; color:#cfd5dd; margin:0 0 1.4rem}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap}

/* ========= Brands ========= */
.brands{border-top:1px solid #1b2130; border-bottom:1px solid #1b2130; background:#0f141a}
.brands-row{display:flex; align-items:center; gap:1.2rem; padding:1rem 0; flex-wrap:wrap}
.brands-row span{color:var(--muted)}
.brands-row ul{display:flex; gap:1.6rem; list-style:none; padding:0; margin:0}
.brands-row li{color:#d7dbe2; opacity:.85}

/* ========= Sections ========= */
.section{padding:64px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:24px}
.section-head h2{margin:0; font-size:clamp(1.3rem, 2.6vw, 2rem)}
.section-head p{margin:0}

/* ========= Grid ========= */
.grid{display:grid; gap:18px}
.services-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){ .services-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .services-grid{grid-template-columns:1fr} }

/* Service card */
.service h3{margin:.2rem 0 .4rem; font-size:1.05rem}
.service p{color:var(--muted); margin:0}

/* ========= Split (About) ========= */
.split{display:grid; grid-template-columns:1.2fr .9fr; gap:28px; align-items:center}
@media (max-width: 980px){ .split{grid-template-columns:1fr; } }
.split-media{position:relative}
.split-media img{width:100%; height:460px; object-fit:cover; border-radius:var(--radius); border:1px solid #253042}
.split-media .overlay-img{
  position:absolute; right:18px; bottom:-28px; width:min(55%, 420px); height:260px;
  border:1px solid #253042; box-shadow:var(--shadow);
}
.split-text p{margin:.5rem 0 1rem}
.checks{list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:.5rem}
.checks li{display:flex; align-items:flex-start; gap:.55rem; color:#d9dee6}
.checks i{color:var(--accent); margin-top:.1rem}

/* ========= Benefits / Process ========= */
.benefits{grid-template-columns:repeat(4,1fr)}
@media (max-width: 900px){ .benefits{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .benefits{grid-template-columns:1fr} }
.benefit{
  background:linear-gradient(180deg,#141a22,#0f131a);
  border:1px solid #243042; border-radius:14px; padding:18px; min-height:130px;
}
.benefit h3{margin:.2rem 0 .4rem}
.benefit p{margin:0; color:var(--muted)}
.process-hero{margin-top:22px}
.process-hero img{
  width:100%; height:340px; object-fit:cover; border-radius:16px;
  border:1px solid #223044; box-shadow:var(--shadow);
}

/* ========= Team ========= */
.team-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width: 1000px){ .team-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 720px){ .team-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 480px){ .team-grid{grid-template-columns:1fr} }
.person img{height:280px}
.person h3{margin:.2rem 0 .2rem}
.person p{margin:0; color:var(--muted)}

/* ========= CTA strip ========= */
.cta-strip{background:#0f141a; border-top:1px solid #1b2130; border-bottom:1px solid #1b2130}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:22px 0}
@media (max-width: 700px){ .cta-inner{flex-direction:column; align-items:flex-start} }

/* ========= Contact ========= */
.contact-grid{grid-template-columns:1fr 1.1fr; gap:28px}
@media (max-width: 980px){ .contact-grid{grid-template-columns:1fr} }
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
@media (max-width: 680px){ .contact-cards{grid-template-columns:1fr} }
.mini-card{
  display:flex; gap:.9rem; align-items:center; padding:12px; border:1px solid #273246;
  background:#131821; border-radius:12px;
}
.mini-card i{font-size:22px; color:var(--accent)}

.form{padding:18px}
.form h3{margin:.2rem 0 1rem}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
@media (max-width: 640px){ .form-row{grid-template-columns:1fr} }
input, textarea{
  width:100%; background:#10151d; border:1px solid #253246; color:var(--text);
  padding:12px 13px; border-radius:10px; outline:none;
}
input:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,211,108,.15)}

/* ========= Footer ========= */
.footer{padding-top:34px; border-top:1px solid #1b2130; background:#0d1116}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:22px}
@media (max-width: 980px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .footer-grid{grid-template-columns:1fr} }
.brand--footer{display:inline-block; margin-bottom:.4rem}
.footer h4{margin:.2rem 0 .6rem}
.links{list-style:none; padding:0; margin:0; display:grid; gap:.3rem}
.links a{color:var(--muted); text-decoration:none}
.links a:hover{color:#fff}
.social{display:flex; gap:.6rem; list-style:none; padding:0; margin:.4rem 0 0}
.social a{
  display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  border:1px solid #273246; background:#121823; color:#dfe6ef; text-decoration:none;
}
.social a:hover{border-color:#334056}
.footer-bottom{
  margin-top:20px; padding:14px 0; border-top:1px solid #1b2130;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.to-top{color:#cfd7e0; text-decoration:none}
.to-top:hover{color:#fff}

/* ====== TEAM: show 1 card only & center it ====== */
#team .team-grid{
  grid-template-columns: 1fr !important;
  justify-items: center;
}
#team .team-grid .person:not(:first-child){
  display: none !important;
}
#team .team-grid .person{
  width: min(520px, 92%);
}

/* ====== SERVICES: center the LAST card (Paint Correction) under Engine Cleaning on desktop ====== */
@media (min-width: 901px){
  .services-grid > .service:last-child{
    grid-column: 2 / span 1; /* puts it in the middle column */
  }
}