:root{
  --blue:#2f6eb2;
  --orange:#e47828;
  --white:#ffffff;
  --text:#1f2a37;
  --muted:#5e6b7a;
  --light:#f4f8fc;
  --shadow:0 12px 30px rgba(13, 39, 80, 0.12);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Montserrat',sans-serif;color:var(--text);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none}
.wrap{width:min(1180px,92%);margin:0 auto}
.topbar{background:var(--blue);color:#fff;font-size:14px;font-weight:700}
.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding:10px 0;flex-wrap:wrap}
.site-header{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand img{height:64px;width:auto}
nav{display:flex;gap:24px;flex-wrap:wrap}
nav a{color:var(--blue);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;font-weight:800;transition:.25s ease}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{border:2px solid rgba(255,255,255,.7);color:#fff;background:transparent}
.hero{position:relative;min-height:640px;background:url('../img/drainage-hero.jpg') center/cover no-repeat;color:#fff}
.overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(14,38,66,.84) 0%, rgba(14,38,66,.55) 48%, rgba(14,38,66,.25) 100%)}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .8fr;gap:36px;align-items:center;padding:90px 0}
.eyebrow,.section-tag{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--orange);margin:0 0 12px}
.hero h1{font-size:clamp(38px,4.4vw,64px);line-height:1.05;margin:0 0 18px;max-width:900px}
.subcopy{font-size:18px;max-width:780px;margin:0 0 26px;color:#f0f4fa}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-card{background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);padding:28px;border-radius:22px;box-shadow:var(--shadow)}
.hero-card h3{margin:0 0 16px;font-size:24px}
.hero-card ul{margin:0;padding-left:18px}
.hero-card li{margin:10px 0}
.quick-stats{margin-top:-38px;position:relative;z-index:2}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{background:#fff;border-radius:20px;padding:22px 24px;box-shadow:var(--shadow);text-align:center}
.stat strong{display:block;font-size:30px;color:var(--blue)}
.stat span{font-weight:700;color:var(--muted)}
.section{padding:78px 0}
.alt-bg{background:var(--light)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.intro h2,.section-head h2{font-size:clamp(30px,3.2vw,46px);line-height:1.1;margin:0 0 16px}
.intro p,.section-head p{color:var(--muted)}
.image-card{border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.image-card img{width:100%;height:100%;object-fit:cover;min-height:380px}
.section-head.center{text-align:center;max-width:820px;margin:0 auto 34px}
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.solution-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.solution-card img{height:230px;width:100%;object-fit:cover}
.solution-copy{padding:24px}
.solution-copy h3{margin:0 0 10px;font-size:22px;color:var(--blue)}
.why-box{background:#fff;border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.why-item{background:var(--light);padding:18px 20px;border-radius:16px;font-weight:800;color:var(--blue);text-align:center}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.process-card{background:#fff;border-radius:20px;padding:28px;box-shadow:var(--shadow);position:relative;min-height:220px}
.step{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;margin-bottom:18px}
.process-card h3{margin:0 0 10px;font-size:22px;color:var(--blue)}
.quote-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:30px;align-items:center}
.quote-copy img{margin-top:22px;border-radius:22px;box-shadow:var(--shadow);height:300px;width:100%;object-fit:cover}
.quote-form-card{background:#fff;border-radius:24px;padding:28px;box-shadow:var(--shadow)}
label{display:block;font-size:14px;font-weight:700;color:var(--blue);margin-bottom:14px}
input,textarea{width:100%;margin-top:8px;padding:14px 16px;border:1px solid #d6dfeb;border-radius:14px;font:inherit}
textarea{resize:vertical}
.site-footer{background:#11335c;color:#fff;padding:44px 0}
.footer-grid{display:grid;grid-template-columns:1.1fr .8fr .8fr;gap:30px}
.footer-logo{height:60px;width:auto;margin-bottom:12px}
.site-footer h4{margin:0 0 14px;color:#fff}
.site-footer a,.site-footer p{display:block;color:#dfe8f5;margin:0 0 10px}
@media (max-width: 960px){
  .hero-inner,.two-col,.quote-grid,.footer-grid{grid-template-columns:1fr}
  .stats-grid,.solution-grid,.process-grid,.why-grid{grid-template-columns:1fr 1fr}
  .brand img{height:56px}
  .hero{min-height:auto}
}
@media (max-width: 680px){
  .nav{flex-direction:column}
  nav{justify-content:center}
  .topbar .wrap{justify-content:center;text-align:center}
  .stats-grid,.solution-grid,.process-grid,.why-grid{grid-template-columns:1fr}
  .hero-inner{padding:70px 0}
  .hero h1{font-size:36px}
  .btn{width:100%}
  .hero-actions{flex-direction:column}
}