:root{
  --blue:#0877ee;
  --blue2:#1594ff;
  --dark:#050b14;
  --ink:#061020;
  --muted:#5e697a;
  --light:#f5f8fc;
  --border:#e1e7ef;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,92vw);margin:0 auto}
.header{
  background:#fff;
  border-bottom:1px solid var(--border);
  text-align:center;
  padding:18px 0 15px;
}
.logo-waves{width:104px;margin:0 auto 4px;display:block}
.logo-title{
  font-family:Impact,"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.085em;
  font-size:clamp(2.55rem,7vw,4.25rem);
  line-height:.9;
  color:#050914;
}
.logo-sub{
  font-weight:900;
  color:#176ee2;
  letter-spacing:.46em;
  text-transform:uppercase;
  font-size:clamp(.78rem,2.2vw,1rem);
  padding-left:.46em;
  margin-top:6px;
}
.desktop-nav{
  display:flex;
  justify-content:center;
  gap:34px;
  margin-top:17px;
  padding-top:15px;
  border-top:1px solid var(--border);
}
.desktop-nav a{
  font-size:.84rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.desktop-nav .quote-link{
  color:white;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  padding:10px 18px;
  border-radius:7px;
  margin-top:-10px;
}
.hero{
  min-height:530px;
  color:#fff;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.58) 43%,rgba(0,0,0,.2) 100%),
    url("https://images.unsplash.com/photo-1564501049412-61c2a3083791?auto=format&fit=crop&w=1800&q=80");
  background-size:cover;
  background-position:center;
}
.hero-content{padding:70px 0;max-width:620px}
.kicker{
  color:#a7d0ff;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.95rem;
  margin-bottom:14px;
}
.hero h1{
  font-family:Impact,"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.035em;
  font-size:clamp(3.4rem,7vw,6.2rem);
  line-height:.92;
  margin:0 0 18px;
}
.hero h1 span{color:#1187ff}
.hero p{
  font-size:1.22rem;
  max-width:560px;
  margin:0 0 26px;
}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:52px;
  padding:14px 22px;
  border-radius:7px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.btn-white{background:#fff;color:#071020}
.section{padding:62px 0}
.section-light{background:var(--light)}
.section-head{text-align:center;max-width:760px;margin:0 auto 38px}
.mini-waves{width:58px;margin:0 auto 8px;display:block}
h2{
  font-family:Impact,"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:clamp(2rem,4.2vw,3rem);
  line-height:1;
  margin:0 0 12px;
}
.section-head p{color:var(--muted);font-size:1.1rem;margin:0}
.services{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 34px rgba(20,50,90,.06);
}
.service{
  padding:30px 18px;
  text-align:center;
  border-right:1px solid var(--border);
}
.service:last-child{border-right:0}
.service svg{width:60px;height:60px;color:var(--blue);margin:0 auto 13px;display:block}
.service h3{text-transform:uppercase;font-size:1rem;line-height:1.2;margin:0 0 8px}
.service p{font-size:.94rem;color:#4c596b;margin:0}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:stretch;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:32px;
  box-shadow:0 14px 34px rgba(20,50,90,.06);
}
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.checks li{display:flex;align-items:flex-start;gap:11px;font-weight:800}
.checks li:before{
  content:"✓";
  width:24px;height:24px;flex:0 0 24px;
  border-radius:50%;
  background:var(--blue);
  color:white;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.86rem;
}
.quote-wrap{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:28px;
}
.contact-line{font-weight:800;margin:13px 0;color:#263246;display:flex;gap:10px;align-items:center}
.contact-icon{width:20px;height:20px;color:var(--blue);flex:0 0 20px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input,.form select,.form textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #cfd7e5;
  border-radius:7px;
  font:inherit;
}
.form textarea,.form button,.full{grid-column:1/-1}
.form button{
  border:0;
  cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  border-radius:7px;
  padding:15px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.04em;
}
.footer{
  background:#061020;
  color:#cbd5e4;
  text-align:center;
  padding:24px 0;
}
.footer strong{color:white}
@media(max-width:900px){
  .header{padding:14px 0 13px}
  .desktop-nav{display:none}
  .logo-waves{width:78px}
  .logo-title{font-size:2.55rem;letter-spacing:.075em}
  .logo-sub{font-size:.72rem;letter-spacing:.36em;padding-left:.36em}
  .hero{
    min-height:570px;
    background-position:center;
  }
  .hero-content{padding:50px 0 58px;max-width:100%}
  .kicker{font-size:.78rem;letter-spacing:.14em;margin-bottom:12px}
  .hero h1{font-size:3.45rem;max-width:390px}
  .hero p{font-size:1.03rem;max-width:390px}
  .actions{display:grid;grid-template-columns:1fr;gap:12px;max-width:390px}
  .btn{width:100%}
  .services{grid-template-columns:1fr;border-radius:14px}
  .service{border-right:0;border-bottom:1px solid var(--border);padding:26px 20px}
  .service:last-child{border-bottom:0}
  .split,.quote-wrap{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media(max-width:480px){
  .container{width:92vw}
  .logo-title{font-size:2.25rem}
  .hero h1{font-size:3.05rem}
  .hero{min-height:560px}
  .section{padding:46px 0}
  .card{padding:24px}
}



/* FINAL SELF POOLS LOGO UPDATE */
.header{
  background:#fff !important;
  text-align:center !important;
  padding:26px 0 22px !important;
  border-bottom:1px solid #e1e7ef !important;
}
.logo-waves{
  width:150px !important;
  height:auto !important;
  margin:0 auto 18px !important;
  display:block !important;
}
.logo-title{
  font-family:Impact, "Arial Black", "Arial Narrow", Arial, Helvetica, sans-serif !important;
  font-size:clamp(4.2rem, 10vw, 7.4rem) !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
  line-height:.86 !important;
  color:#061020 !important;
  text-transform:uppercase !important;
}
.logo-sub{
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:clamp(1.15rem, 3vw, 1.75rem) !important;
  font-weight:900 !important;
  letter-spacing:.42em !important;
  color:#0b72e7 !important;
  margin-top:16px !important;
  text-transform:uppercase !important;
  padding-left:.42em !important;
}
.desktop-nav{
  display:flex !important;
  justify-content:center !important;
  gap:34px !important;
  margin-top:20px !important;
  padding-top:16px !important;
  border-top:1px solid #e1e7ef !important;
}
.desktop-nav a{
  font-size:.9rem !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}
.desktop-nav .quote-link{
  color:#fff !important;
  background:linear-gradient(135deg,#0877ee,#1594ff) !important;
  padding:10px 18px !important;
  border-radius:7px !important;
  margin-top:-10px !important;
}

@media(max-width:900px){
  .header{
    padding:22px 0 20px !important;
  }
  .logo-waves{
    width:124px !important;
    margin-bottom:16px !important;
  }
  .logo-title{
    font-size:clamp(3.2rem, 14vw, 4.6rem) !important;
    letter-spacing:.055em !important;
  }
  .logo-sub{
    font-size:clamp(.95rem, 4vw, 1.25rem) !important;
    letter-spacing:.34em !important;
    padding-left:.34em !important;
    margin-top:12px !important;
  }
  .desktop-nav{
    display:none !important;
  }
}


/* FINAL: HERO PHOTO ONLY UPDATE — old layout preserved */
.hero{
  background:
    linear-gradient(90deg, rgba(3,10,24,.76), rgba(3,10,24,.26)),
    url("east-texas-hero.jpg") center center/cover no-repeat !important;
}

.hero::before,
.hero::after{
  display:none !important;
  content:none !important;
}

.hero .hero-content{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:900px){
  .hero{
    background-position:center center !important;
  }
}