/* Simple, modern, responsive stylesheet for Sparkle Car Wash */

:root{
  --accent: #0b84ff; /* water blue */
  --accent-2: #0a6ed7;
  --muted: #6b7280;
  --bg: #ffffff;
  --card: #f7f9fb;
  --radius: 12px;
  --maxw: 1100px;
  --gap: 1.25rem;
  --container-pad: 1rem;
  --shadow: 0 6px 18px rgba(10, 20, 40, 0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
nav a:hover {
  color: #1e90ff;
  text-decoration: underline;
}
nav a.active {
  border-bottom: 2px solid #1e90ff;
}


/* container */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--container-pad);
}

/* header */
.site-header{
  border-bottom:1px solid #eef2f6;
  background:#fff;
  position:sticky;
  top:0;
  z-index:40;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
  padding:0.8rem 0;
}
.logo{
  font-weight:700;
  color:var(--accent-2);
  text-decoration:none;
  font-size:1.15rem;
}
.logo .dot{ color:var(--accent);}

/* nav */
.main-nav{
  display:flex;
  gap:0.9rem;
  align-items:center;
}
.main-nav a{
  text-decoration:none;
  color:var(--muted);
  padding:0.45rem 0.6rem;
  border-radius:8px;
  font-weight:600;
  font-size:0.95rem;
}
.main-nav a.button{ background:var(--accent); color:#fff; padding:0.45rem 0.75rem; }
.main-nav a:hover{ color:var(--accent-2); }
.main-nav a.active{ color:var(--accent-2); }

/* nav toggle for mobile */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  font-size:1.3rem;
  cursor:pointer;
}

/* hero */
.hero{
  background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
  padding:2.25rem 0;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:var(--gap);
  align-items:center;
}
.hero-text h1{
  margin:0 0 0.6rem;
  font-size:1.9rem;
  line-height:1.05;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  display: block;
}

.lead{ color:var(--muted); margin:0 0 1rem; font-size:1rem; }
.hero-image img{ width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); }

/* cta buttons */
.button{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:0.6rem 0.9rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
}
.button.outline{ background:transparent; color:var(--accent); border:2px solid rgba(11,132,255,0.12); }
.button.small{ padding:0.45rem 0.6rem; font-size:0.9rem; }

/* grid helpers */
.grid{ display:grid; gap:var(--gap); }
.cols-2{ grid-template-columns: repeat(2, 1fr); }
.cols-3{ grid-template-columns: repeat(3, 1fr); }

/* cards */
.card, .package, .service-card, .price-card{
  background:var(--card);
  padding:1rem;
  border-radius:12px;
  box-shadow:none;
}
.package .price, .price-card .price{ font-size:1.4rem; margin:0.25rem 0; font-weight:800; color:var(--accent-2); }
.package.highlight{ border:2px solid rgba(11,132,255,0.08); transform:translateY(-4px); }

/* features */
.features{ padding:1.25rem 0; }
.section-title{ margin:0 0 0.75rem; font-size:1.25rem; }
.quick-services{ padding:1.25rem 0; }
.cta{ background:linear-gradient(90deg, rgba(11,132,255,0.08), rgba(10,110,215,0.04)); padding:1.25rem; border-radius:12px; margin:1.5rem 0; text-align:center; }

/* pricing table */
.pricing-table{ display:flex; gap:1rem; flex-wrap:wrap; }
.price-card{ flex:1 1 220px; padding:1rem; position:relative; }
.price-card.recommended{ border:2px solid rgba(11,132,255,0.12); box-shadow:var(--shadow); transform:scale(1.02); }
.badge{ position:absolute; top:-10px; right:10px; background:var(--accent); color:#fff; padding:0.25rem 0.5rem; border-radius:6px; font-weight:700; font-size:0.8rem; }

/* gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:0.8rem; }
.gallery-grid figure{ margin:0; overflow:hidden; border-radius:10px; background:#fff; }
.gallery-grid img{ width:100%; height:220px; object-fit:cover; display:block; transition:transform .35s ease; }
.gallery-grid figure:hover img{ transform:scale(1.06); }
figcaption{ padding:0.6rem; font-size:0.9rem; color:var(--muted); }

/* form */
.contact-form label{ display:block; margin-bottom:0.8rem; font-weight:600; color:var(--muted); }
.contact-form input, .contact-form textarea, .contact-form select{
  display:block; width:100%; padding:0.6rem; margin-top:0.25rem; border-radius:8px; border:1px solid #e6eef6; background:#fff;
}

/* footer */
.site-footer{ border-top:1px solid #eef2f6; padding:1rem 0 2rem; margin-top:2rem; background:#fff; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.footer-nav a{ color:var(--muted); text-decoration:none; margin-left:0.75rem; }

/* utilities */
.section{ padding:2rem 0; }

/* responsive */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-image{ order:-1; }
  .grid.cols-3{ grid-template-columns:1fr; }
  .grid.cols-2{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .pricing-table{ flex-direction:column; }
}

@media (max-width: 600px){
  .nav-toggle{ display:inline-block; }
  .main-nav{ position:absolute; top:64px; right:0; background:#fff; padding:0.75rem; border-radius:12px; box-shadow:var(--shadow); display:none; flex-direction:column; width:200px; }
  .main-nav.open{ display:flex; }
  .header-inner{ align-items:center; }
  .hero-text h1{ font-size:1.4rem; }
  .gallery-grid img{ height:160px; }
}
footer {
  position: relative;
  bottom: 0;
  width: 100%;
  margin-top: auto;
}
.video-wrapper {
  position: relative;
  max-width: 640px;
  margin: 1.5rem auto;      /* centers under gallery */
  padding-bottom: 56.25%;   /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}