/* UrbanClean OnePage Styles */
:root{
  --brand:#1A3D7C;
  --brand-600:#244C99;
  --brand-700:#143066;
  --bg:#0b1220;
  --surface:#0f1a2e;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#ffffff;
  --soft:#f5f6fa;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

/* Utilities */
.container{width:min(1120px, 92%); margin-inline:auto}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; border-radius:.75rem; border:1px solid transparent;
  font-weight:600; text-decoration:none; cursor:pointer; transition:.2s ease;
}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 6px 14px rgba(26,61,124,.25)}
.btn-primary:hover{background:var(--brand-600); transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--brand); border-color:#d1d5db}
.btn-ghost:hover{background:#f8fafc}
.btn-light{background:#fff; color:#111827}
.muted{color:var(--muted); font-size:.95rem}

.card-elevated{
  background:#fff; border-radius:1rem; padding:2rem;
  box-shadow:0 20px 50px rgba(2, 8, 23, .08);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #eef2f7;
  box-shadow:0 2px 10px rgba(2,8,23,.04);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding: .75rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.brand-badge{
  background:var(--brand); color:#fff; font-weight:800; border-radius:.6rem; padding:.35rem .5rem; display:inline-block
}
.brand-text{color:var(--brand); font-weight:700; letter-spacing:.2px}

.site-nav{display:flex; gap:1.25rem}
.site-nav a{color:#111827; text-decoration:none; font-weight:500; padding:.5rem .25rem; border-radius:.4rem}
.site-nav a:hover{background:#f3f4f6}

/* Mobile Nav */
.nav-toggle{display:none; width:42px; height:42px; border:1px solid #e5e7eb; border-radius:.6rem; background:#fff}
.nav-toggle .line{display:block; height:2px; background:#111827; margin:6px 8px}
@media (max-width: 900px){
  .nav-toggle{display:inline-block}
  .site-nav{position:absolute; right:1rem; top:64px; background:#fff; padding:1rem; border:1px solid #e5e7eb; border-radius:.75rem; box-shadow:0 10px 30px rgba(2,8,23,.08); display:none; flex-direction:column}
  .site-nav.open{display:flex}
}

/* Hero */
.hero{
  background:#000;
  color:#fff;
  padding: clamp(4rem, 12vw, 10rem) 0 6rem;
  text-align:center;
}
.hero h1{font-size:clamp(2.2rem, 6vw, 4.2rem); margin:0 0 .25rem; font-weight:800}
.hero .subtitle{font-size:clamp(1.1rem, 2.5vw, 1.5rem); color:#d1d5db; margin:.25rem 0 .75rem}
.hero .lead{max-width:800px; margin:0 auto 1.6rem; color:#e5e7eb}
.hero-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.scroll-cue{width:28px;height:48px;border:2px solid #fff;border-radius:20px;margin:2.2rem auto 0; position:relative; opacity:.7}
.scroll-cue::after{content:""; width:6px;height:10px;background:#fff;border-radius:3px; position:absolute; top:8px; left:50%; transform:translateX(-50%); animation:scroll 1.6s infinite}
@keyframes scroll{0%{opacity:0; transform:translate(-50%,0)} 50%{opacity:1} 100%{opacity:0; transform:translate(-50%,12px)}}

/* Sections */
.section{padding: clamp(3rem, 8vw, 5rem) 0}
.section-header{text-align:center; margin-bottom:2rem}
.section-header h2{font-size:clamp(1.8rem, 3.8vw, 2.4rem); margin:.2rem 0; color:#0b1b3a}
.section-header p{color:var(--muted)}

/* About 50/50 */
.about .about-grid{display:grid; grid-template-columns: 1fr 1fr; gap:2.2rem; align-items:center; background:#fff}
.about-media img{width:100%; height:100%; object-fit:cover; border-radius:.9rem; background:var(--brand);}
.about h2{margin-top:0}
.about h3{margin:1.3rem 0 .35rem; color:#0b1b3a}
.kpis{display:flex; gap:1.5rem; margin-top:1.2rem; flex-wrap:wrap}
.kpi{display:flex; flex-direction:column; align-items:flex-start}
.kpi-number{font-weight:800; font-size:1.5rem; color:var(--brand)}
.kpi-label{color:var(--muted)}

@media (max-width: 900px){
  .about .about-grid{grid-template-columns:1fr}
}

/* Services */
.services{background:#f6f7fb; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7}
.service-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem}
.service-card{
  background:#fff; border:1px solid #eef2f7; border-radius:1rem; padding:1.3rem 1.2rem;
  box-shadow:0 12px 30px rgba(2,8,23,.06);
}
.icon-circle{width:50px;height:50px;border-radius:999px;background:#eef3ff;color:var(--brand);display:grid;place-items:center;font-size:1.4rem;margin-bottom:.6rem}
.service-card h3{margin:.2rem 0 .35rem}
.service-card p{color:var(--muted); margin:0}

@media (max-width: 900px){
  .service-grid{grid-template-columns:1fr; gap:1rem}
}

/* Contracts card */
.contracts{background:#f6f7fb}
.contracts-card{border-radius:1rem; padding:2rem; background:#fff}
.contracts-card h2{margin:0 0 .4rem; color:#0b1b3a}
.contracts-card p{color:var(--muted); margin-bottom:1.2rem}
.contract-stats{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:1rem}
.stat{display:flex; flex-direction:column; align-items:center}
.stat-title{font-weight:800; font-size:1.3rem; color:#0b1b3a}
.stat-sub{color:var(--muted); font-size:.95rem}
.divider{height:24px; width:1px; background:#e5e7eb}
@media (max-width: 700px){
  .contract-stats{grid-template-columns:1fr; gap:.25rem}
  .divider{display:none}
  .stat{align-items:flex-start}
}

/* Gallery */
.gallery .gallery-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem}
.gallery-item{position:relative; overflow:hidden; border-radius:1rem; box-shadow:0 14px 36px rgba(2,8,23,.10); background:#e5e7eb}
.gallery-item img{width:100%; height:240px; object-fit:cover; display:block; transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.05)}
.badge{
  position:absolute; top:.65rem; left:.65rem; background:#eaf1ff; color:var(--brand);
  padding:.35rem .6rem; border-radius:.6rem; font-weight:700; font-size:.85rem;
}
@media (max-width: 1000px){ .gallery .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .gallery .gallery-grid{grid-template-columns:1fr} .gallery-item img{height:200px} }

/* CTA */
.cta .cta-card{
  background:linear-gradient(135deg, #244C99, #1A3D7C);
  color:#fff; text-align:center; border-radius:1rem; padding:2rem; box-shadow:0 16px 40px rgba(26,61,124,.35)
}
.cta .btn{margin-top: .5rem}

/* Footer */
.site-footer{background:#0c1428; color:#dbe2f1; padding-top:3rem}
.footer-grid{display:grid; grid-template-columns: 1.2fr 1fr 1.2fr 1.2fr; gap:2rem}
.footer-brand h4{margin:.3rem 0}
.footer-links h5,.footer-contact h5,.footer-social h5{margin:.3rem 0 1rem}
.footer-links ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.footer-links a{color:#dbe2f1; text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.contact-list{list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.45rem}
.map-card{display:flex; align-items:center; gap:.8rem; background:#111b33; padding:1rem; border-radius:.8rem; border:1px solid #223357}
.map-pin{width:44px;height:44px;border-radius:.6rem;background:#0e2a5e;display:grid;place-items:center}
.social-icons{display:flex; gap:.6rem; margin:.35rem 0 1rem}
.social-icons a{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:#102041;color:#bcd0ff;text-decoration:none}
.quote-form{display:grid; gap:.6rem; margin-top:.6rem}
.quote-form input,.quote-form textarea{
  width:100%; padding:.8rem .9rem; border-radius:.6rem; border:1px solid #223357; background:#0e1a33; color:#e7eefc
}
.form-status{min-height:1.2rem; font-size:.9rem; color:#a7f3d0}
.footer-bottom{border-top:1px solid #12264c; margin-top:2rem; padding:1rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#9fb3d9}
.legal-links{display:flex; gap:1rem}
.legal-links a{color:#9fb3d9; text-decoration:none}
.legal-links a:hover{text-decoration:underline}

@media (max-width: 1000px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .footer-grid{grid-template-columns:1fr}
}

/* A11y helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}