:root{
  --navy: #10232F;
  --navy-2: #16303F;
  --white: #FFFFFF;
  --mist: #F4F8F9;
  --slate: #4A6178;
  --teal: #1B8A94;
  --teal-light: #E4F3F3;
  --cta: #C1440E;
  --cta-dark: #9C370B;
  --star: #F5B301;
  --radius: 10px;
  --max: 720px;
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:500;
  color:var(--navy);
  background:var(--white);
  line-height:1.6;
}
h1,h2,h3{
  font-family:var(--font-display);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;}
.wrap-wide{max-width:960px;margin:0 auto;padding:0 20px;}

/* ---------- rinse divider (signature element) ---------- */
.rinse{
  height:34px;
  width:100%;
  display:block;
}
.rinse path{stroke:var(--teal);stroke-width:2;fill:none;opacity:.55;}
.rinse.on-navy path{stroke:var(--white);opacity:.25;}

/* ---------- header ---------- */
.site-header{
  background:var(--navy);
  color:var(--white);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:3px solid var(--cta);
}
.site-header .wrap-wide{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  text-decoration:none;
  display:flex;
  align-items:center;
}
.brand-logo{
  height:44px;
  width:auto;
  display:block;
  flex-shrink:0;
}
.header-actions{display:flex;align-items:center;gap:14px;}
.header-phone{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  color:var(--white);
  white-space:nowrap;
}
.header-phone:before{content:"☎ ";color:var(--teal);}
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  text-decoration:none;
  border-radius:6px;
  padding:13px 22px;
  text-align:center;
  border:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-cta{
  background:var(--cta);
  color:var(--white);
  box-shadow:0 3px 0 var(--cta-dark);
}
.btn-cta:hover{background:var(--cta-dark); transform:translateY(1px); box-shadow:0 2px 0 var(--cta-dark);}
.btn-block{display:block;width:100%;font-size:1.05rem;padding:16px 20px;}
.header-actions .btn{font-size:.85rem;padding:10px 16px;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background-color:var(--navy);
  background:
    linear-gradient(180deg, rgba(16,35,47,.45) 0%, rgba(16,35,47,.65) 55%, rgba(16,35,47,.85) 100%) center / cover no-repeat,
    url('/images/site/hero-technician-spraying-banner.jpg') right center / cover no-repeat;
  color:var(--white);
  padding:52px 0 44px;
}
.hero-content{max-width:560px;}
@media (max-width:700px){
  .hero{background:linear-gradient(180deg, rgba(16,35,47,.9) 0%, rgba(16,35,47,.96) 100%);}
}
.hero h1{
  font-size:clamp(1.7rem, 4vw, 2.5rem);
  color:var(--white);
}
.hero .subhead{
  color:#DCEBED;
  font-size:1.08rem;
  font-weight:500;
  max-width:56ch;
}
.trust-strip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:8px 14px;
  border-radius:999px;
  font-size:.88rem;
  margin:10px 0 22px;
}
.trust-strip .stars{color:var(--star);letter-spacing:1px;}
.benefit-list{list-style:none;margin:0 0 26px;padding:0;}
.benefit-list li{
  padding-left:28px;
  position:relative;
  margin-bottom:10px;
  font-size:1.05rem;
  font-weight:600;
  color:#F0F5F6;
}
.benefit-list li:before{
  content:"✓";
  position:absolute;left:0;top:0;
  color:var(--teal);
  font-weight:700;
  background:rgba(27,138,148,.2);
  width:19px;height:19px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;
}
.hero-cta-note{
  font-size:.8rem;
  color:#B9CBCE;
  margin-top:8px;
  text-align:center;
}
.hero-secondary-cta{
  display:block;
  text-align:center;
  margin-top:10px;
  color:var(--teal);
  font-family:var(--font-display);
  font-weight:700;
  text-decoration:none;
  font-size:.95rem;
}

/* ---------- lead form ---------- */
.lead-form{
  background:var(--white);
  color:var(--navy);
  border-radius:var(--radius);
  padding:22px;
  margin-top:28px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.lead-form label{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.82rem;
  margin:12px 0 5px;
  color:var(--navy);
}
.lead-form label:first-child{margin-top:0;}
.lead-form input,
.lead-form select{
  width:100%;
  padding:12px 12px;
  border:1.5px solid #D6E2E4;
  border-radius:6px;
  font-size:1rem;
  font-family:var(--font-body);
  background:var(--mist);
}
.lead-form input:focus,
.lead-form select:focus{
  outline:2px solid var(--teal);
  outline-offset:1px;
  background:var(--white);
}
.lead-form .btn{margin-top:18px;}

/* ---------- generic section ---------- */
.section{padding:44px 0;}
.section-alt{background:var(--mist);}
.section h2{
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  text-align:center;
  margin-bottom:8px;
}
.section-intro{
  text-align:center;
  color:var(--slate);
  max-width:56ch;
  margin:0 auto 30px;
}

/* why us grid */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media (max-width:700px){.grid-3{grid-template-columns:1fr;}}
.feature{
  background:var(--white);
  border:1px solid #E4ECEE;
  border-radius:var(--radius);
  padding:26px 22px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(16,35,47,.08);
  border-color:var(--teal-light);
}
.feature-icon{
  width:46px;height:46px;
  border-radius:10px;
  background:var(--teal-light);
  color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.feature-icon svg{width:24px;height:24px;}
.feature h3{font-size:1.05rem;color:var(--navy);}
.feature p{color:var(--slate);font-size:.98rem;font-weight:500;margin:0;}

/* offer breakdown */
.offer-box{
  background:var(--navy);
  color:var(--white);
  border-radius:14px;
  padding:30px 26px;
}
.offer-box h2{color:var(--white);}
.offer-box .section-intro{color:#C9D9DC;}
.offer-sub{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--teal);
  text-transform:uppercase;
  font-size:.82rem;
  letter-spacing:.06em;
  margin:22px 0 10px;
}
.check-list{list-style:none;margin:0;padding:0;}
.check-list li{
  padding-left:26px;
  position:relative;
  margin-bottom:11px;
  color:#F0F5F6;
  font-size:1.02rem;
  font-weight:600;
}
.benefit-list li strong,
.check-list li strong{
  color:#6FE0E6;
  font-weight:700;
}
.check-list li:before{
  content:"✓";
  position:absolute;left:0;top:1px;
  color:var(--teal);
  font-weight:700;
}
.bonus-list li:before{content:"★";color:var(--star);}
.price-box{
  background:rgba(232,107,44,.12);
  border:1px solid rgba(232,107,44,.4);
  border-radius:8px;
  padding:16px 18px;
  margin-top:22px;
  font-size:.97rem;
}
.price-box strong{color:var(--cta);}
.maint-note{
  font-size:.82rem;
  color:#A9BEC2;
  margin-top:14px;
}
.offer-box .btn{margin-top:22px;}

/* how it works - photo backdrop */
.steps-section{
  position:relative;
  background:
    linear-gradient(180deg, rgba(16,35,47,.85) 0%, rgba(16,35,47,.9) 100%),
    url('/images/site/intro-house-wash.webp') center 30% / cover no-repeat;
  color:var(--white);
}
.steps-section h2{color:var(--white);}
.steps-section .step h3{color:var(--white);}
.steps-section .step p{color:#CFE3E6;}

/* before/after gallery - paired */
.gallery-pairs{
  display:grid;
  gap:22px;
}
.gallery-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid #E4ECEE;
  box-shadow:0 8px 20px rgba(16,35,47,.06);
}
.gallery-pair-item{
  position:relative;
  overflow:hidden;
}
.gallery-pair-item img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .35s ease;
}
.gallery-pair-item:hover img{transform:scale(1.05);}
.gallery-pair-item span{
  position:absolute;
  bottom:10px;left:10px;
  padding:4px 12px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:rgba(16,35,47,.75);
  color:var(--white);
}
.gallery-pair-item:last-child span{background:rgba(27,138,148,.85);}
.gallery-pair-item .img-placeholder{
  aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg, #E4ECEE, #E4ECEE 10px, #EFF4F5 10px, #EFF4F5 20px);
  display:flex;align-items:center;justify-content:center;
  color:var(--slate);
  font-size:.8rem;
  font-family:var(--font-display);
}
.gallery-caption{text-align:center;color:var(--slate);margin-top:20px;font-size:.92rem;}

/* review */
.review-section{padding-top:36px;padding-bottom:44px;}
.review-card{
  background:var(--white);
  border:1px solid #E4ECEE;
  border-radius:var(--radius);
  padding:28px 30px;
  text-align:center;
  max-width:600px;
  margin:0 auto;
  box-shadow:0 8px 20px rgba(16,35,47,.05);
}
.review-stars{color:var(--star);letter-spacing:2px;font-size:1.1rem;margin-bottom:12px;}
.review-text{
  font-size:1.05rem;
  color:var(--navy);
  font-style:italic;
  max-width:52ch;
  margin:0 auto 14px;
}
.review-attribution{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  color:var(--slate);
  margin:0;
}

/* how it works - numbered steps (legitimate: real 3-step process) */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  counter-reset:step;
}
@media (max-width:700px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-left:0;text-align:center;}
.step-num{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--teal);
  color:var(--white);
  font-family:var(--font-display);
  font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  font-size:1.1rem;
}
.step h3{font-size:1.02rem;}
.step p{color:var(--slate);font-size:.97rem;font-weight:500;}

/* warranty/safety */
.split-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
@media (max-width:700px){.split-2{grid-template-columns:1fr;}}
.split-2 .card{
  background:var(--white);
  border:1px solid #E4ECEE;
  border-left:4px solid var(--teal);
  border-radius:var(--radius);
  padding:26px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.split-2 .card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,35,47,.08);}
.split-2 .card .feature-icon{margin-bottom:14px;}
.split-2 .card h3{color:var(--navy);font-size:1.05rem;}
.split-2 .card p{color:var(--slate);margin:0;font-size:.98rem;font-weight:500;}

/* faq */
.faq-list{display:grid;gap:12px;}
.faq-item{
  border:1px solid #E4ECEE;
  border-radius:10px;
  padding:16px 20px;
  background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.faq-item:hover{border-color:var(--teal-light);}
.faq-item[open]{border-color:var(--teal); box-shadow:0 8px 20px rgba(16,35,47,.06);}
.faq-item summary{
  font-family:var(--font-display);
  font-weight:700;
  cursor:pointer;
  font-size:1rem;
  list-style:none;
  position:relative;
  padding-right:30px;
  color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:after{
  content:"+";
  position:absolute;right:0;top:-3px;
  color:var(--teal);
  font-size:1.4rem;
  font-weight:400;
  transition:transform .15s ease;
}
.faq-item[open] summary:after{content:"+"; transform:rotate(45deg);}
.faq-item p{color:var(--slate);margin:10px 0 0;font-size:.98rem;font-weight:500;}

/* final CTA */
.final-cta{
  position:relative;
  background:linear-gradient(180deg, rgba(16,35,47,.93) 0%, rgba(16,35,47,.97) 100%), url('/images/site/hero-truck.webp') center 30% / cover no-repeat;
  color:var(--white);
  text-align:center;
  padding:56px 0;
}
.final-cta h2{color:var(--white);}
.final-cta p{color:#CFE3E6;max-width:50ch;margin:0 auto 24px;}
.final-cta .btn{margin:0 auto;max-width:340px;}
.final-cta .header-phone{display:block;margin-top:14px;color:var(--teal);}

/* thank-you confirmation */
.confirm-check{
  width:72px;height:72px;
  border-radius:50%;
  background:rgba(27,138,148,.18);
  border:2px solid var(--teal);
  color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;
}
.confirm-check svg{width:36px;height:36px;}

/* footer */
.site-footer{
  background:var(--navy);
  color:#9FB4B8;
  font-size:.85rem;
  padding:26px 0;
  text-align:center;
}
.site-footer a{color:#C9D9DC;text-decoration:underline;text-underline-offset:2px;}
.site-footer a:hover{color:var(--white);}
.footer-links a{text-decoration:none;}
.footer-links a:hover{text-decoration:underline;}
.footer-links{margin-top:10px;}
.footer-links a{margin:0 8px;}

/* mobile sticky call bar */
.mobile-call-bar{
  display:none;
}
@media (max-width:700px){
  .mobile-call-bar{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:60;
    background:var(--cta);
  }
  .mobile-call-bar a{
    flex:1;
    text-align:center;
    padding:14px;
    color:var(--white);
    font-family:var(--font-display);
    font-weight:700;
    text-decoration:none;
  }
  body{padding-bottom:52px;}
}