/* ===== Clean Pro Direct — Design System ===== */

:root{
  --navy:#132430;
  --navy-soft:#1C3540;
  --teal:#1F5952;
  --teal-mid:#2E7D74;
  --teal-light:#7FD8C9;
  --brass:#B8892B;
  --brass-light:#D9AE5C;
  --foam:#F6F8F6;
  --foam-dim:#EAEFEC;
  --ink:#132430;
  --slate:#5B6B67;
  --white:#FFFFFF;
  --stain:#8A7355;
  --max:1140px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--foam);
  color:var(--ink);
  font-family:'Manrope',-apple-system,'Segoe UI',Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 0.5em;
  color:var(--navy);
}
p{margin:0 0 1em; color:var(--slate); max-width:62ch;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--max); margin:0 auto; padding:0 28px;}
section{padding:88px 0;}
@media (max-width:720px){ section{padding:56px 0;} }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:3px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:15px;
  border:2px solid transparent; cursor:pointer;
  transition:transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}
.btn-primary{background:var(--teal-mid); color:var(--white);}
.btn-primary:hover{background:var(--teal); transform:translateY(-2px);}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-outline:hover{border-color:var(--teal-mid); color:var(--teal-mid); transform:translateY(-2px);}
.btn-brass{background:var(--brass); color:var(--navy);}
.btn-brass:hover{background:var(--brass-light); transform:translateY(-2px);}

/* Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,248,246,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--foam-dim);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:var(--max); margin:0 auto;
}
.nav-logo{display:flex; align-items:center; gap:10px;}
.nav-logo img{height:42px; width:42px;}
.nav-logo .name{font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:var(--navy);}
.nav-links{display:flex; gap:30px; align-items:center; list-style:none; margin:0; padding:0;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--navy); position:relative; padding:4px 0;}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--teal-mid); transition:width 0.2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--teal-mid);}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle svg{width:26px; height:26px;}

@media (max-width:880px){
  .nav-links{
    position:fixed; top:70px; left:0; right:0; bottom:0;
    background:var(--foam); flex-direction:column; align-items:flex-start;
    padding:32px 28px; gap:8px; transform:translateX(100%);
    transition:transform 0.25s ease; overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .nav-links a{display:block; width:100%; padding:14px 0; font-size:16px;}
}

/* Wave divider — recurring brand motif from the logo */
.wave-divider{display:block; width:100%; height:auto; margin-bottom:-1px;}

/* Hero */
.hero{
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-soft) 100%);
  color:var(--white); position:relative; overflow:hidden;
  padding:72px 0 0;
}
.hero .container{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
@media (max-width:900px){ .hero .container{grid-template-columns:1fr; text-align:left;} }

.hero-eyebrow{
  color:var(--teal-light); font-weight:700; font-size:14px; margin-bottom:14px;
}
.hero h1{
  color:var(--white); font-size:clamp(34px,5vw,54px); max-width:14ch;
  opacity:0; transform:translateY(14px); animation:rise 0.7s ease-out 0.1s forwards;
}
.hero p.lead{
  color:#C7D3CE; font-size:18px; max-width:46ch;
  opacity:0; transform:translateY(14px); animation:rise 0.7s ease-out 0.25s forwards;
}
.hero-actions{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;
  opacity:0; transform:translateY(14px); animation:rise 0.7s ease-out 0.4s forwards;
}
@keyframes rise{ to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero p.lead,.hero-actions{animation:none; opacity:1; transform:none;}
}

.hero-trust{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:36px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.14);
}
.hero-trust div{font-size:13.5px; color:#AEC0BA; font-weight:600;}
.hero-trust strong{display:block; color:var(--white); font-size:19px; font-family:'Poppins',sans-serif;}

/* Before/after slider */
.slider-wrap{
  position:relative; border-radius:6px; overflow:hidden;
  aspect-ratio:4/3; box-shadow:0 20px 50px rgba(0,0,0,0.35);
  touch-action:none; user-select:none;
}
.slider-pane{position:absolute; inset:0;}
.pane-stained{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px),
    radial-gradient(circle at 30% 32%, rgba(66,48,28,0.6) 0%, transparent 40%),
    radial-gradient(circle at 70% 58%, rgba(58,42,25,0.5) 0%, transparent 34%),
    radial-gradient(circle at 48% 82%, rgba(70,52,30,0.45) 0%, transparent 30%),
    radial-gradient(circle at 18% 76%, rgba(60,44,26,0.4) 0%, transparent 26%),
    radial-gradient(circle at 85% 20%, rgba(60,44,26,0.35) 0%, transparent 22%),
    #AE9C7C;
}
.pane-clean{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent 6px),
    linear-gradient(135deg,var(--teal-light) 0%, var(--teal-mid) 55%, var(--teal) 100%);
  clip-path:inset(0 0 0 var(--slider-pos,50%));
}

.pane-label{
  position:absolute; bottom:14px; font-family:'Poppins',sans-serif; font-weight:700;
  font-size:12.5px; letter-spacing:1px; color:var(--white);
  background:rgba(19,36,48,0.55); padding:6px 12px; border-radius:3px;
}
.pane-stained .pane-label{left:14px;}
.pane-clean .pane-label{right:14px;}
.slider-handle{
  position:absolute; top:0; bottom:0; left:var(--slider-pos,50%);
  width:3px; background:var(--white); cursor:ew-resize;
  transform:translateX(-1.5px);
}
.slider-handle::after{
  content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; background:var(--white); color:var(--navy);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:0 4px 14px rgba(0,0,0,0.25);
}

/* Section headers */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(26px,3.4vw,36px);}

/* Service cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:880px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:780px){ .grid-2{grid-template-columns:1fr;} }
@media (max-width:620px){ .grid-3{grid-template-columns:1fr;} }

.svc-card{
  background:var(--white); border:1px solid var(--foam-dim); border-radius:4px;
  padding:28px 26px; transition:border-color 0.2s ease, transform 0.2s ease;
}
.svc-card:hover{border-color:var(--teal-mid); transform:translateY(-4px);}
.svc-card .icon{
  width:44px; height:44px; border-radius:4px; background:var(--foam-dim);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.svc-card .icon svg{width:22px; height:22px; stroke:var(--teal); fill:none; stroke-width:1.8;}
.svc-card h3{font-size:17px; margin-bottom:8px;}
.svc-card p{font-size:14.5px; margin-bottom:0;}

/* Process steps (real sequence — numbered legitimately) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:step;}
@media (max-width:780px){ .steps{grid-template-columns:1fr;} }
.step{position:relative; padding:0 26px 0 0;}
.step:not(:last-child)::after{
  content:''; position:absolute; top:26px; right:-11px; width:22px; height:1px;
  background:var(--foam-dim);
}
@media (max-width:780px){ .step:not(:last-child)::after{display:none;} }
.step .num{
  counter-increment:step; font-family:'Poppins',sans-serif; font-weight:700;
  font-size:14px; color:var(--teal-mid); margin-bottom:10px;
}
.step .num::before{content:"0" counter(step);}
.step h3{font-size:17px; margin-bottom:8px;}
.step p{font-size:14.5px;}

/* Testimonial */
.quote-card{
  background:var(--white); border:1px solid var(--foam-dim); border-radius:4px;
  padding:26px 24px;
}
.quote-card p.quote{color:var(--navy); font-size:15.5px; margin-bottom:16px;}
.quote-card .who{font-size:13.5px; color:var(--slate); font-weight:600;}

/* Placeholder badge for content the user should replace */
.placeholder-note{
  display:inline-block; font-size:11.5px; letter-spacing:0.5px; font-weight:700;
  color:var(--brass); background:rgba(184,137,43,0.1); padding:3px 9px; border-radius:3px;
  margin-bottom:10px;
}

/* CTA band */
.cta-band{
  background:var(--teal); color:var(--white); text-align:center; padding:64px 0;
}
.cta-band h2{color:var(--white); max-width:20ch; margin:0 auto 14px;}
.cta-band p{color:#D6E7E2; max-width:48ch; margin:0 auto 26px;}
.cta-band .btn-primary{background:var(--white); color:var(--teal);}
.cta-band .btn-primary:hover{background:var(--foam);}
.cta-band .btn-outline{border-color:rgba(255,255,255,0.6); color:var(--white);}
.cta-band .btn-outline:hover{border-color:var(--white);}

/* Footer */
.site-footer{background:var(--navy); color:#AEC0BA; padding:56px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:780px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.site-footer h4{color:var(--white); font-size:14px; margin-bottom:14px;}
.site-footer ul{list-style:none; margin:0; padding:0;}
.site-footer li{margin-bottom:10px; font-size:14px;}
.site-footer a:hover{color:var(--white);}
.footer-logo{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-logo img{height:38px; width:38px;}
.footer-logo span{font-family:'Poppins',sans-serif; font-weight:700; color:var(--white);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1); margin-top:40px; padding-top:22px;
  font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* Form */
.quote-form{background:var(--white); border:1px solid var(--foam-dim); border-radius:6px; padding:34px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media (max-width:620px){ .form-row{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:13px; font-weight:700; color:var(--navy);}
.field input, .field select, .field textarea{
  padding:12px 14px; border:1px solid var(--foam-dim); border-radius:3px;
  font-family:'Manrope',sans-serif; font-size:14.5px; background:var(--foam);
  transition:border-color 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal-mid); background:var(--white);
}

/* Contact channel cards */
.channel-card{
  display:flex; align-items:flex-start; gap:14px; padding:20px;
  border:1px solid var(--foam-dim); border-radius:4px; background:var(--white);
}
.channel-card .icon{
  width:38px; height:38px; border-radius:50%; background:var(--foam-dim);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.channel-card .icon svg{width:18px; height:18px; stroke:var(--teal); fill:none; stroke-width:1.8;}
.channel-card h4{font-size:15px; margin-bottom:4px; color:var(--navy);}
.channel-card p{font-size:13.5px; margin-bottom:0;}

/* Gallery */
.gallery-item{border-radius:4px; overflow:hidden; border:1px solid var(--foam-dim);}
.gallery-item .slider-wrap{aspect-ratio:5/4; box-shadow:none; border-radius:0;}
.gallery-caption{padding:16px 18px; background:var(--white);}
.gallery-caption h4{font-size:14.5px; margin-bottom:4px; color:var(--navy);}
.gallery-caption p{font-size:13px; margin-bottom:0;}

:root{--navy:#132430;--navy-soft:#1C3540;--teal:#1F5952;--teal-mid:#2E7D74;--teal-light:#7FD8C9;--brass:#B8892B;--foam:#F6F8F6;--foam-dim:#EAEFEC;--ink:#132430;--slate:#5B6B67;--white:#FFFFFF;--max:1140px;}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0; background:var(--foam); color:var(--ink); font-family:'Manrope',-apple-system,'Segoe UI',Arial,sans-serif; line-height:1.6;}
h1,h2,h3,h4{font-family:'Poppins',sans-serif; font-weight:700; line-height:1.2; margin:0 0 0.5em; color:var(--navy);}
p{margin:0 0 1.1em; color:var(--slate); max-width:68ch;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--max); margin:0 auto; padding:0 28px;}
.article{max-width:720px; margin:0 auto; padding:0 28px;}
section{padding:56px 0;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:3px; font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; border:2px solid transparent; cursor:pointer;}
.btn-primary{background:var(--teal-mid); color:var(--white);}
.btn-outline{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.6);}
.site-header{position:sticky; top:0; z-index:50; background:rgba(246,248,246,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--foam-dim);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--max); margin:0 auto;}
.nav-logo{display:flex; align-items:center; gap:10px;}
.nav-logo img{height:42px; width:42px;}
.nav-logo .name{font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:var(--navy);}
.nav-links{display:flex; gap:26px; align-items:center; list-style:none; margin:0; padding:0;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--navy);}
.nav-links a.active{color:var(--teal-mid);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle svg{width:26px; height:26px;}
@media (max-width:880px){
  .nav-links{position:fixed; top:70px; left:0; right:0; bottom:0; background:var(--foam); flex-direction:column; align-items:flex-start; padding:32px 28px; gap:8px; transform:translateX(100%); transition:transform 0.25s ease; overflow-y:auto;}
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .nav-links a{display:block; width:100%; padding:14px 0; font-size:16px;}
}
.article-hero{background:linear-gradient(180deg,var(--navy) 0%, var(--navy-soft) 100%); color:var(--white); padding:56px 0 48px;}
.article-hero .tag{color:var(--teal-light); font-weight:700; font-size:13px; letter-spacing:0.5px; margin-bottom:12px;}
.article-hero h1{color:var(--white); max-width:20ch; font-size:clamp(28px,4vw,40px);}
.article-hero .meta{color:#AEC0BA; font-size:14px; margin-top:10px;}
.lead{font-size:18px; color:var(--navy); font-weight:600;}
.callout{background:var(--white); border-left:4px solid var(--teal-mid); border-radius:3px; padding:18px 22px; margin:24px 0;}
.callout p{margin-bottom:0; color:var(--navy); font-size:14.5px;}
ol,ul{color:var(--slate); padding-left:22px;}
li{margin-bottom:8px;}
.cta-band{background:var(--teal); color:var(--white); text-align:center; padding:56px 0; margin-top:20px;}
.cta-band h2{color:var(--white); max-width:20ch; margin:0 auto 14px;}
.cta-band p{color:#D6E7E2; max-width:48ch; margin:0 auto 26px;}
.cta-band .btn-primary{background:var(--white); color:var(--teal);}
.actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.site-footer{background:var(--navy); color:#AEC0BA; padding:40px 0 24px; font-size:13px;}
.site-footer a{color:#AEC0BA;}
.site-footer a:hover{color:var(--white);}
.back-link{display:inline-block; margin-top:20px; color:var(--teal-mid); font-weight:700; font-size:14px;}

/* Table styles (used by blog-how-often-clean) */
table{width:100%; border-collapse:collapse; margin:24px 0; background:var(--white); border:1px solid var(--foam-dim); border-radius:4px; overflow:hidden;}
th,td{text-align:left; padding:12px 16px; font-size:14.5px; border-bottom:1px solid var(--foam-dim);}
th{background:var(--foam); color:var(--navy); font-family:'Poppins',sans-serif; font-size:13px;}
td{color:var(--slate);}
tr:last-child td{border-bottom:none;}
@media (max-width:480px){
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  th,td{white-space:nowrap;}
}