
:root{
  --navy:#071b31;
  --deep:#03101f;
  --blue:#0a85d8;
  --blue2:#16b8ef;
  --green:#6cad2d;
  --gold:#d5a73a;
  --cream:#f7f6f2;
  --white:#fff;
  --text:#172437;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}
.site-header{position:sticky;top:0;z-index:30;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid #e6e8eb}
.brand{display:flex;align-items:center;gap:14px;font-weight:800;color:var(--navy)}
.brand img{width:88px;height:50px;object-fit:contain;border-radius:4px}
.nav{display:flex;gap:26px;align-items:center;font-size:.9rem;font-weight:700}
.nav a:hover{color:var(--blue)}
.nav-cta{background:var(--navy);color:#fff!important;padding:13px 18px;border-radius:999px}
.menu-toggle{display:none;background:none;border:0;font-size:1.7rem}
.hero{min-height:680px;position:relative;background:url('assets/hero-pool.jpg') center/cover no-repeat;display:flex;align-items:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,16,31,.96) 0%,rgba(3,16,31,.88) 42%,rgba(3,16,31,.2) 78%)}
.hero-content{position:relative;max-width:750px;padding:90px 7vw;color:white}
.eyebrow,.section-kicker{font-size:.78rem;letter-spacing:.18em;font-weight:800;color:var(--green)}
.hero h1{font-size:clamp(2.7rem,5vw,5.5rem);line-height:.98;margin:18px 0 24px}
.hero h1 span{font-family:"Playfair Display",serif;font-style:italic;color:#fff}
.hero-copy{font-size:1.12rem;line-height:1.75;max-width:650px;color:#dce5ee}
.hero-actions{display:flex;gap:14px;margin:32px 0}
.button{display:inline-flex;justify-content:center;align-items:center;padding:15px 23px;border-radius:7px;font-weight:800;border:0;cursor:pointer}
.primary{background:linear-gradient(90deg,var(--green),#83c23c);color:#071b31}
.secondary{border:1px solid rgba(255,255,255,.65);color:#fff}
.trust-row{display:flex;gap:24px;flex-wrap:wrap;font-size:.85rem;font-weight:700;color:#e9f3fa}
.section{padding:90px 7vw}
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.section h2{font-size:clamp(2rem,3.8vw,3.8rem);line-height:1.08;margin:12px 0}
.intro>p{font-size:1.08rem;line-height:1.9;color:#556171}
.services-section{background:var(--cream)}
.section-heading{max-width:850px;margin-bottom:42px}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.services-grid article{background:#fff;padding:32px;border-radius:12px;border:1px solid #e5e7e9;transition:.25s}
.services-grid article:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(7,27,49,.10)}
.services-grid span{font-weight:800;color:var(--blue);font-size:.8rem}
.services-grid h3{font-size:1.12rem;margin:14px 0 8px;color:var(--navy)}
.services-grid p{line-height:1.7;color:#687382;font-size:.92rem}
.feature-band{display:grid;grid-template-columns:repeat(3,1fr);background:linear-gradient(100deg,var(--green),var(--blue),var(--navy));color:#fff;padding:34px 7vw;gap:28px}
.feature-band div{display:flex;flex-direction:column;gap:5px;border-left:1px solid rgba(255,255,255,.45);padding-left:22px}
.feature-band strong{font-size:1.12rem}
.feature-band span{font-size:.86rem;color:#e7edf4}
.process{background:white}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.process-grid div{padding:26px;border-top:4px solid var(--blue);background:#f8fafc}
.process-grid b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:white}
.process-grid h3{color:var(--navy)}
.process-grid p{line-height:1.65;color:#647080}
.contact-section{padding:90px 7vw;background:var(--navy);color:white;display:grid;grid-template-columns:1fr 1.2fr;gap:55px;align-items:start}
.contact-card h2{font-size:clamp(2.2rem,4vw,4rem);margin:12px 0}
.contact-card p{line-height:1.75;color:#cdd8e3}
.contact-links{display:flex;flex-direction:column;gap:12px;margin-top:28px;font-weight:800;color:#fff}
.quote-form{background:white;color:var(--text);padding:34px;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.quote-form label{display:flex;flex-direction:column;gap:8px;font-size:.83rem;font-weight:800}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;padding:13px;border:1px solid #cfd5db;border-radius:7px;font:inherit}
.full{grid-column:1/-1}
.quote-form small{color:#7b8794}
footer{padding:35px 7vw;background:var(--deep);color:#cdd8e3;display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:center;font-size:.85rem}
footer div{display:flex;flex-direction:column;gap:6px}
footer strong{color:#fff}
@media(max-width:900px){
  .menu-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:82px;background:white;display:none;flex-direction:column;padding:24px;border-bottom:1px solid #ddd}
  .nav.open{display:flex}
  .hero-overlay{background:rgba(3,16,31,.78)}
  .intro,.contact-section{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  footer{grid-template-columns:1fr}
}
@media(max-width:600px){
  .brand span{display:none}
  .hero{min-height:620px}
  .hero-content{padding:70px 6vw}
  .hero-actions{flex-direction:column;align-items:stretch}
  .services-grid,.process-grid,.feature-band{grid-template-columns:1fr}
  .quote-form{grid-template-columns:1fr}
  .section,.contact-section{padding:70px 6vw}
}
