html{scroll-behavior:smooth}
:root{
  --brand:#0ea5e9; /* sky-500 */
  --brand-dark:#0369a1; /* sky-700 */
  --ink:#0f172a; /* slate-900 */
  --muted:#475569; /* slate-600 */
  --bg:#f8fafc; /* slate-50 */
  --card:#ffffff; /* white */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:var(--brand);color:white;border-bottom:1px solid #e2e8f0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:48px}
.brand-title{font-weight:800;letter-spacing:.2px}
.brand-sub{color:#e2e8f0}
.nav-links{display:flex;gap:12px;align-items:center}
.nav .btn{padding:10px 16px;border-radius:12px;border:1px solid #fff;background:#fff;color:var(--brand);font-weight:700}
.nav a{color:white}
.nav a:hover{opacity:.9}
.hero{padding:44px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.badge{display:inline-flex;gap:8px;align-items:center;background:#e0f2fe;color:#0c4a6e;border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px}
h1{font-size:42px;line-height:1.1;margin:14px 0}
.lead{font-size:18px;color:var(--muted)}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid #e2e8f0;font-weight:700;transition:all .2s ease-in-out;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.secondary{background:#fff}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.15)}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 6px 18px rgba(2,8,23,.06)}
.illus{min-height:280px;display:grid;place-items:center;padding:18px}
.section{padding:36px 0}
.section.alt{background:#f1f5f9}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service{padding:18px}
.service h3{margin:8px 0 6px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.kpi{padding:14px;text-align:center}
.kpi .big{font-size:28px;font-weight:800}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.gallery .shot{background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 4px 12px rgba(2,8,23,.06);overflow:hidden}
.gallery .shot img{display:block;width:100%;height:auto}
.gallery .shot figcaption{font-size:13px;padding:8px 10px;color:#475569}
.contact-grid{display:grid;grid-template-columns:1.8fr .2fr;gap:24px}
.info{padding:18px}
.disclaimer{margin-top:8px;color:#475569;font-size:13px}
.footer{padding:22px 0;background:var(--brand);color:white}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.logo-small{height:30px;margin-right:8px;vertical-align:middle}
.foot-right a{color:white;text-decoration:underline}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
}


/* Before/After slider */
.ba-wrap{margin-top:22px}
.ba-title{margin:0 0 8px}
.ba-container{position:relative;max-width:100%;overflow:hidden;border-radius:16px;border:1px solid #e2e8f0;box-shadow:0 10px 24px rgba(2,8,23,.08)}
.ba-img{display:block;width:100%;height:auto;position:absolute;top:0;left:0}
.ba-img.ba-before{filter:grayscale(10%) brightness(96%)}
.ba-img.ba-after{clip-path:inset(0 50% 0 0)}
.ba-slider{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:60%;appearance:none;height:4px;background:#e2e8f0;border-radius:999px;outline:none}
.ba-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#0ea5e9;border:2px solid white;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ba-labels{display:flex;justify-content:space-between;font-weight:700;font-size:14px;margin-top:8px;color:#475569}
@media (max-width:900px){.ba-slider{width:72%}}

/* --- Visual cleanup pass --- */
html,body{line-height:1.6}
h1,h2,h3{line-height:1.2}
h2{margin:0 0 14px}
.section{padding:48px 0}
header{box-shadow:0 2px 8px rgba(2,8,23,.12)}
.nav .btn{box-shadow:none}
.hero{padding:56px 0}
.est-badge{display:inline-block;margin-top:8px;background:#ecfeff;border:1px solid #cffafe;color:#0c4a6e;padding:6px 10px;border-radius:999px;font-weight:600;font-size:13px}
.card{border-color:#e5e7eb;box-shadow:0 8px 22px rgba(2,8,23,.06)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.gallery .shot img{aspect-ratio:4/3;object-fit:cover}
.gallery .shot{transition:transform .18s ease, box-shadow .18s ease}
.gallery .shot:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,8,23,.12)}
.contact-grid{gap:22px}
input,textarea{background:#fff}
input:focus,textarea:focus{outline:2px solid var(--brand);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.btn.primary{box-shadow:0 8px 16px rgba(14,165,233,.25)}
.footer{box-shadow:0 -2px 8px rgba(2,8,23,.08)}
/* Responsive refinements */
@media (max-width: 900px){
  .hero{padding:36px 0}
  .gallery{grid-template-columns:1fr;gap:12px}
  .nav .btn.primary{display:none}
  .cta .btn{width:100%;justify-content:center}
}

/* --- Form polish --- */
.form-card{padding:20px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form .row + .row{margin-top:12px}
form .row > div{display:flex;flex-direction:column;gap:6px}
label{font-weight:700;font-size:14px;color:#0f172a}
input, textarea{font-size:16px;padding:14px 16px;border-radius:14px;border:1px solid #d6dde7;background:#ffffff;transition:border-color .15s ease, box-shadow .15s ease}
input::placeholder, textarea::placeholder{color:#94a3b8}
input:focus, textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(14,165,233,.15)}
textarea{min-height:200px;resize:vertical}
/* Card on the right aligns visually with form */
.card.info{padding:20px}
/* Tighten disclaimer spacing */
.disclaimer{margin-top:10px; font-size:13px; color:#64748b}
/* Mobile: stack fields nicely */
@media (max-width: 900px){
  form .row{grid-template-columns:1fr}
}

/* Our Promise cards */
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.promise{padding:18px}
.promise-title{font-weight:800;margin-bottom:6px}
@media (max-width:900px){.promise-grid{grid-template-columns:1fr}}

/* Full-width project details row */
.row.full-row{grid-template-columns:1fr}
.row.full-row textarea{min-height:220px}

/* softer form card */
.form-card{background:#ffffff;border:1px solid #e5e7eb;border-radius:18px}
input, textarea{border-radius:14px}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.quote{padding:18px}
.quote blockquote{margin:10px 0;color:#0f172a;font-size:16px;line-height:1.6}
.quote figcaption{color:#64748b;font-size:14px}
.stars{color:#f59e0b;font-size:18px;letter-spacing:2px}
.add-review{margin-top:14px;color:#475569}
@media (max-width:900px){.testimonials-grid{grid-template-columns:1fr}}
