/* ============================================================
   MC PRESSURE WASHING FL — mcpressurewashingfl.com
   Structure: Deep Blue  ·  Action: Bright Green
   ============================================================ */
:root{
  /* sampled from the MC Pressure Washing logo */
  --cyan:#00AEEF; --cyan-l:#5FCCF5; --cyan-d:#0089BD;
  --blue:#005AED; --blue-d:#004CBD; --blue-deep:#003A91;
  --lime:#A8CF45; --lime-d:#89B02F; --lime-l:#C2E272; --lime-pale:#F0F8DC;

  --navy:#0B2A52; --navy-2:#0A2246; --navy-3:#071B39; --navy-deep:#05132A;
  --blue-light:#EAF4FD; --blue-line:#C6E4F7;

  --grad-brand:linear-gradient(100deg,#00AEEF 0%,#005AED 48%,#A8CF45 100%);
  --grad-cyan:linear-gradient(120deg,#00AEEF 0%,#004CBD 100%);
  --grad-lime:linear-gradient(120deg,#A8CF45 0%,#89B02F 100%);
  --grad-hero:linear-gradient(155deg,#0B2A52 0%,#0A2246 45%,#05132A 100%);

  --green:#A8CF45; --green-d:#6E9022; --green-l:#BFE065; --green-pale:#F0F8DC;

  --white:#FFFFFF; --gray:#F4F8FC; --gray-2:#E6EFF7; --line:#D8E4EF;
  --text:#22303F; --text-2:#4E5E70; --text-l:#657282;
  --gold:#FFB627;

  --r:12px; --r-lg:18px; --r-sm:8px;
  --sh-sm:0 1px 2px rgba(11,42,82,.06),0 3px 10px rgba(11,42,82,.07);
  --sh:0 6px 18px rgba(11,42,82,.10),0 20px 44px rgba(11,42,82,.11);
  --sh-lg:0 14px 34px rgba(11,42,82,.15),0 40px 80px rgba(11,42,82,.18);
  --sh-cyan:0 10px 30px rgba(0,174,239,.32);
  --sh-lime:0 8px 24px rgba(168,207,69,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--text);background:#fff;
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;z-index:2}
.narrow{max-width:820px}

h1,h2,h3,h4{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.14;letter-spacing:-.02em;color:var(--navy)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,
.on-deep h1,.on-deep h2,.on-deep h3,.on-deep h4,
.hero h1,.hero h2,.hero h3,.hero h4,
.band h1,.band h2,.band h3{color:#fff}
.hero p,.on-deep p{color:rgba(255,255,255,.82)}
.hero .lead,.on-deep .lead{color:rgba(255,255,255,.82)}
.hero .eyebrow,.on-deep .eyebrow{color:var(--green-l)}
.hero .quote-card h1,.hero .quote-card h2,.hero .quote-card h3{color:var(--navy)}
.hero .quote-card p,.hero .quote-card .sub{color:var(--text-2)}
.hero .quote-card label{color:var(--navy)}
.h-xl{font-size:clamp(32px,4.6vw,52px)}
.h-lg{font-size:clamp(27px,3.6vw,40px)}
.h-md{font-size:clamp(22px,2.6vw,30px)}
.h-sm{font-size:clamp(18px,2vw,22px)}
p{margin-bottom:16px}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--text-2);line-height:1.65}
.on-dark .lead{color:rgba(255,255,255,.82)}
.on-dark p{color:rgba(255,255,255,.82)}
.eyebrow{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;
  background:var(--grad-cyan);-webkit-background-clip:text;background-clip:text;color:transparent}
.on-dark .eyebrow,.hero .eyebrow,.on-deep .eyebrow{background:none;-webkit-text-fill-color:initial;color:var(--lime-l)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;
  padding:0 30px;border-radius:var(--r-sm);border:0;cursor:pointer;font-family:'Poppins',sans-serif;
  font-weight:700;font-size:16px;line-height:1.2;text-align:center;
  transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.btn-cta{background:var(--grad-lime);color:#123005;box-shadow:var(--sh-lime);position:relative;overflow:hidden}
.btn-cta::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.btn-cta:hover::after{animation:sheen .8s var(--ease)}
@keyframes sheen{to{left:130%}}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(168,207,69,.55)}
.btn-call{background:#fff;color:var(--navy);border:2px solid var(--blue-line)}
.btn-call:hover{border-color:var(--navy);transform:translateY(-2px)}
.on-dark .btn-call{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34)}
.on-dark .btn-call:hover{background:rgba(255,255,255,.15);border-color:#fff}
.btn-lg{min-height:60px;padding:0 36px;font-size:17px}
.btn-block{width:100%}

/* ---------- header ---------- */
.topbar{background:var(--navy-deep);color:rgba(255,255,255,.9);font-size:13.5px;position:relative}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-brand)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;flex-wrap:wrap}
.topbar b{color:#fff}
.topbar .stars{color:var(--gold);letter-spacing:1px}
.site-head{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 12px rgba(19,64,116,.06)}
.head-in{display:flex;align-items:center;justify-content:space-between;height:100px;gap:18px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:78px;width:auto;display:block}
.brand .btxt{display:none}
.brand .bn{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.brand .bs{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-d);font-weight:700;margin-top:3px}
.nav{display:flex;align-items:center;gap:24px}
.nav a{position:relative;font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;
  color:var(--text-2);white-space:nowrap;transition:color .22s var(--ease);padding:6px 0}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:var(--grad-cyan);transform:scaleX(0);transform-origin:center;
  transition:transform .28s var(--ease)}
.nav a:hover{color:var(--cyan)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.on{color:var(--cyan-d)}
.nav a.on::after{transform:scaleX(1)}
.head-cta{display:flex;align-items:center;gap:12px}
.head-cta .tel{font-family:'Poppins',sans-serif;font-weight:800;font-size:20px;white-space:nowrap;background:var(--grad-cyan);-webkit-background-clip:text;background-clip:text;color:transparent}
.head-cta .tel:hover{opacity:.82}
.head-cta .btn{min-height:48px;padding:0 22px;font-size:15px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:25px;height:2.5px;background:var(--navy);margin:5px 0;border-radius:2px;transition:.3s var(--ease)}
.burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-nav{display:none;background:#fff;border-top:1px solid var(--line);padding:12px 22px 24px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:14px 0;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:17px;color:var(--navy);border-bottom:1px solid var(--line);transition:color .2s var(--ease)}
.mobile-nav a:hover,.mobile-nav a:active{color:var(--cyan)}
.mobile-nav .btn{margin-top:18px;width:100%}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec-sm{padding:60px 0}
.sec-gray{background:var(--gray)}
.on-dark{background:var(--grad-hero);color:#fff}
.on-deep{background:var(--navy-deep);color:#fff}
.sec-head{max-width:760px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{margin-top:16px}

/* ---------- hero ---------- */
.hero{background:var(--grad-hero);
  color:#fff;padding:64px 0 76px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(680px 420px at 90% 0%,rgba(0,174,239,.30),transparent 62%),
             radial-gradient(560px 360px at 8% 100%,rgba(168,207,69,.20),transparent 62%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:start}
.hero h1{max-width:17ch}
.hero .lead{margin-top:18px;max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);list-style:none}
.trust li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9)}
.trust svg{flex-shrink:0}
.rating-badge{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:9px 18px 9px 12px;margin-bottom:20px}
.rating-badge .num{font-family:'Poppins',sans-serif;font-weight:800;font-size:20px;color:#fff;line-height:1}
.rating-badge .stars{color:var(--gold);letter-spacing:1.5px;font-size:14px}
.rating-badge .cnt{font-size:13px;color:rgba(255,255,255,.8);line-height:1.3}

/* ---------- quote form card ---------- */
.quote-card{background:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-lg);color:var(--text)}
.quote-card h2,.quote-card h3{color:var(--navy);margin-bottom:6px}
.quote-card .sub{font-size:14.5px;color:var(--text-2);margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;color:var(--navy)}
.field .hint{font-weight:400;color:var(--text-l);font-size:12.5px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font-family:inherit;font-size:16px;color:var(--text);background:#fff;border:2px solid var(--line);
  border-radius:var(--r-sm);padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,174,239,.18)}
textarea{min-height:96px;resize:vertical}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;padding:10px 15px;border:2px solid var(--line);border-radius:99px;font-size:14px;
  font-weight:600;cursor:pointer;transition:.18s var(--ease);user-select:none}
.opt input:checked+span{border-color:var(--lime-d);background:var(--lime-pale);color:#3F5A0E;box-shadow:0 3px 10px rgba(168,207,69,.3)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text-2);line-height:1.5;margin:4px 0 16px}
.consent input{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--green)}
.consent a{color:var(--navy);text-decoration:underline}
.form-note{font-size:12.5px;color:var(--text-l);text-align:center;margin-top:12px}
.form-alert{display:none;align-items:flex-start;gap:11px;background:#FDECEC;border:2px solid #E04B4B;
  border-radius:var(--r-sm);padding:14px 16px;margin-bottom:18px;color:#8A1F1F}
.form-alert.show{display:flex}
.form-alert strong{display:block;font-family:'Poppins',sans-serif;font-size:14px;margin-bottom:3px;color:#8A1F1F}
.form-alert ul{margin:6px 0 0;padding-left:17px;font-size:13.5px;line-height:1.55}
.field.err input,.field.err textarea{border-color:#E04B4B;background:#FFF8F8}
.field.err label{color:#B32C2C}
.field .err-msg{display:none;color:#B32C2C;font-size:12.5px;font-weight:600}
.field.err .err-msg{display:block}

/* ---------- cards / grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-brand);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--blue-line)}
.card h3{margin-bottom:10px}
.card p{color:var(--text-2);font-size:16px}
.card .more{margin-top:auto;padding-top:16px;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:15px;color:var(--blue);transition:.25s var(--ease)}
.card:hover .more{color:var(--cyan-d);transform:translateX(3px)}
.card-icon{width:52px;height:52px;border-radius:14px;background:var(--grad-cyan);box-shadow:var(--sh-cyan);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.on-dark .card{background:var(--navy-2);border-color:rgba(255,255,255,.12)}
.on-dark .card h3{color:#fff}
.on-dark .card p{color:rgba(255,255,255,.78)}
.on-dark .card-icon{background:rgba(60,179,113,.2)}

/* ---------- checklist ---------- */
.checks{list-style:none;display:grid;gap:11px;margin:20px 0}
.checks.two{grid-template-columns:1fr 1fr;gap:11px 24px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.55}
.checks li svg{flex-shrink:0;margin-top:4px}
.on-dark .checks li{color:rgba(255,255,255,.88)}

/* ---------- before/after slider ---------- */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);
  user-select:none;touch-action:pan-y;background:#000;aspect-ratio:1200/820}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after-wrap{position:absolute;inset:0;overflow:hidden;width:50%}
.ba .after-wrap img{width:auto;height:100%;max-width:none}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:4px;background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,.45);transform:translateX(-2px);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:48px;height:48px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 3px 14px rgba(0,0,0,.4);display:flex;align-items:center;
  justify-content:center;pointer-events:none}
.ba-tag{position:absolute;top:14px;padding:6px 13px;border-radius:6px;font-family:'Poppins',sans-serif;
  font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.ba-tag.b{left:14px;background:rgba(7,26,54,.9);color:#fff}
.ba-tag.a{right:14px;background:var(--grad-lime);color:#123005}
.ba-cap{margin-top:14px;font-size:14.5px;color:var(--text-l);text-align:center}
.on-dark .ba-cap{color:rgba(255,255,255,.62)}

/* ---------- reviews ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.rcard .stars{color:var(--gold);letter-spacing:2px;margin-bottom:12px}
.rcard blockquote{font-size:16px;line-height:1.62;color:var(--text);margin-bottom:18px;flex:1}
.rcard cite{font-style:normal;font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--navy);display:block}
.rcard small{color:var(--text-l);font-size:13.5px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{position:relative;padding-top:22px;border-top:3px solid transparent;
  border-image:var(--grad-brand) 1}
.step::before{counter-increment:s;content:'STEP 0' counter(s);display:block;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.1em;
  color:var(--cyan-d);margin-bottom:10px}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--text-2);font-size:16px}
.on-dark .step{border-top-color:var(--green-l)}
.on-dark .step::before{color:var(--green-l)}

/* ---------- faq ---------- */
.faq{border-top:2px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 44px 22px 0;font-family:'Poppins',sans-serif;font-weight:600;font-size:17.5px;
  color:var(--navy);cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:26px;font-weight:400;color:var(--cyan);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details .a{padding:0 40px 22px 0;color:var(--text-2);max-width:74ch}

/* ---------- areas ---------- */
.arealist{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none}
.arealist a{display:block;padding:14px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);font-weight:600;font-size:15.5px;color:var(--navy);transition:.2s var(--ease)}
.arealist a:hover{border-color:var(--cyan);background:var(--blue-light);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.on-dark .arealist a{background:var(--navy-2);border-color:rgba(255,255,255,.14);color:#fff}
.on-dark .arealist a:hover{background:var(--navy-3);border-color:var(--green-l)}

/* ---------- cta band ---------- */
.band{background:var(--grad-hero);color:#fff;
  border-radius:var(--r-lg);padding:54px 42px;text-align:center;position:relative;overflow:hidden}
.band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(560px 300px at 20% 0%,rgba(0,174,239,.30),transparent 60%),
             radial-gradient(560px 300px at 80% 120%,rgba(168,207,69,.30),transparent 60%)}
.band>*{position:relative;z-index:2}
.band p{color:rgba(255,255,255,.85);max-width:54ch;margin:14px auto 0}
.band .hero-cta{justify-content:center;margin-top:26px}

/* breadcrumb */
.crumb{font-size:13.5px;color:var(--text-l);padding:14px 0}
.crumb a{color:var(--navy)}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--cyan);text-decoration:underline}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-deep);color:rgba(255,255,255,.62);padding:60px 0 26px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:34px;margin-bottom:42px}
.foot-grid h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:15px;line-height:1.4}
.foot-grid a{display:block;padding:5px 0;transition:color .2s}
.foot-grid a:hover{color:var(--cyan)}
.foot-brand img{height:74px;width:auto;margin-bottom:14px;display:block}
.foot-brand .bn{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;color:#fff}
.foot-brand p{margin-top:12px;max-width:34ch;line-height:1.6}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;flex-wrap:wrap;
  gap:12px;justify-content:space-between;font-size:13px}
.verse{font-style:italic;color:rgba(255,255,255,.4)}

/* ---------- sticky mobile bar ---------- */
.sticky-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:95;background:#fff;
  border-top:3px solid transparent;border-image:var(--grad-brand) 1;padding:9px 11px;gap:9px;box-shadow:0 -3px 16px rgba(19,64,116,.14)}
.sticky-bar .btn{flex:1;min-height:50px;font-size:15px;padding:0 12px;white-space:nowrap}
.sticky-bar .btn-cta{flex:1.35}

.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- legal ---------- */
.legal{padding:50px 0 80px}
.legal h2{font-size:23px;margin:36px 0 12px}
.legal h3{font-size:18px;margin:24px 0 8px}
.legal p,.legal li{color:var(--text-2);margin-bottom:12px;font-size:16.5px}
.legal ul{padding-left:20px;margin-bottom:16px}
.legal a{color:var(--navy);text-decoration:underline}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .brand img{height:64px}
  .nav{display:none}
  .burger{display:block}
  .head-cta .btn{display:none}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .grid-3,.grid-4,.rgrid,.steps{grid-template-columns:1fr 1fr}
  .arealist{grid-template-columns:1fr 1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sec{padding:64px 0}
}
@media(max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 17px}
  .sec{padding:52px 0}
  .head-in{height:74px}
  .head-cta .tel{display:none}
  .brand img{height:52px}
  .brand .btxt{display:none}
  .topbar{font-size:12px}
  .topbar-in{justify-content:center;text-align:center;gap:2px 12px}
  .grid-2,.grid-3,.grid-4,.rgrid,.steps,.fgrid,.checks.two{grid-template-columns:1fr}
  .arealist{grid-template-columns:1fr 1fr}
  .card,.rcard,.quote-card{padding:22px}
  .band{padding:38px 20px}
  .hero{padding:44px 0 58px}
  .hero-cta .btn{width:100%}
  .sticky-bar{display:flex}
  .site-foot{padding-bottom:90px}
  .foot-grid{grid-template-columns:1fr}
  .ba-knob{width:42px;height:42px}
}

/* ============================================================
   V2 — motion, waves, counters, gradient accents
   ============================================================ */

/* scroll progress bar in brand gradient */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:var(--grad-brand);
  transition:width .08s linear;box-shadow:0 0 10px rgba(0,174,239,.6)}

/* gradient headline text */
.gt{background:var(--grad-cyan);-webkit-background-clip:text;background-clip:text;color:transparent}
.on-dark .gt,.hero .gt,.band .gt{background:linear-gradient(100deg,#5FCCF5 0%,#7FD8F8 40%,#BFE065 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* wave section dividers */
.wave{display:block;width:100%;height:auto;line-height:0;position:relative;z-index:3;margin-bottom:-1px}
.wave+.sec,.wave+section{margin-top:-1px}
.wave svg{display:block;width:100%;height:60px}
@media(max-width:760px){.wave svg{height:36px}}

/* animated hero bubbles */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubbles i{position:absolute;bottom:-60px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.34),rgba(0,174,239,.10) 60%,transparent 72%);
  border:1px solid rgba(255,255,255,.13);animation:rise linear infinite}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(.7);opacity:0}
  12%{opacity:.75}
  100%{transform:translateY(-115vh) translateX(30px) scale(1.15);opacity:0}
}
@media (prefers-reduced-motion:reduce){.bubbles{display:none}}

/* interactive canvas bubble field (assets/hero-bubbles.js) */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;z-index:1;opacity:0;transition:opacity .9s var(--ease)}
.hero.has-fx .hero-fx{opacity:1}
.hero.has-fx .bubbles{display:none}
@media (prefers-reduced-motion:reduce){.hero-fx{display:none}}

/* animated count-up stat strip */
.statstrip{background:var(--grad-brand);position:relative;z-index:4}
.statstrip-in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stat{padding:30px 16px;border-right:1px solid rgba(255,255,255,.28)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:'Poppins',sans-serif;font-weight:800;
  font-size:clamp(28px,3.4vw,42px);color:#fff;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.16)}
.stat span{display:block;margin-top:7px;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.94)}

/* interactive service picker */
.picker{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--sh)}
.picker h3{margin-bottom:6px}
.picker .psub{font-size:15px;color:var(--text-2);margin-bottom:20px}
.ptiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ptile{position:relative}
.ptile input{position:absolute;opacity:0;width:0;height:0}
.ptile span{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:18px 12px;border:2px solid var(--line);border-radius:var(--r);cursor:pointer;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--text);
  transition:.22s var(--ease);user-select:none;background:#fff;line-height:1.25}
.ptile span svg{transition:.22s var(--ease)}
.ptile span:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.ptile input:checked+span{border-color:var(--lime-d);background:var(--lime-pale);color:#3F5A0E;
  box-shadow:0 5px 16px rgba(168,207,69,.32)}
.ptile input:checked+span svg path,.ptile input:checked+span svg circle,.ptile input:checked+span svg rect{stroke:#6E9022}
.ptile input:focus-visible+span{box-shadow:0 0 0 3px rgba(0,174,239,.25)}
.picker-out{margin-top:22px;padding:18px;border-radius:var(--r);background:var(--blue-light);
  border:1px dashed var(--blue-line);font-size:15px;color:var(--text-2)}
.picker-out b{color:var(--navy);font-family:'Poppins',sans-serif}
.picker .btn{margin-top:18px;width:100%}
@media(max-width:760px){.ptiles{grid-template-columns:1fr 1fr}}

/* gradient rule */
.grule{width:72px;height:5px;border-radius:3px;background:var(--grad-brand);margin:18px 0}
.sec-head.center .grule{margin-left:auto;margin-right:auto}

/* trust chip row */
.chiprow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  font-size:13.5px;font-weight:600;color:#fff}
.chip svg{flex-shrink:0}

/* pulse on the rating badge */
.rating-badge{position:relative;overflow:hidden}
.rating-badge::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg);animation:sheen2 5.5s ease-in-out infinite}
@keyframes sheen2{0%,72%{left:-120%}100%{left:150%}}
@media (prefers-reduced-motion:reduce){.rating-badge::after{display:none}}

/* ba slider knob in brand gradient */
.ba-knob{background:var(--grad-brand);box-shadow:0 4px 18px rgba(0,0,0,.45)}
.ba-knob svg path{stroke:#fff}
.ba-handle{background:linear-gradient(180deg,#00AEEF,#A8CF45)}

/* stat strip: two-up on tablet, two-up compact on phone */
@media(max-width:1080px){
  .statstrip-in{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid rgba(255,255,255,.28)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:400px){
  .stat{padding:22px 8px}
  .stat b{font-size:26px}
  .stat span{font-size:10.5px;letter-spacing:.05em;word-break:break-word}
}

/* ================================================================
   SERVICE CLARITY COMPONENTS
   Used on services.html and the homepage services grid. Built so a
   visitor can tell in one scan what each service is, what is actually
   included, and which one their problem belongs to.
   ================================================================ */

/* ---------- symptom matcher: "what does my property look like?" ---------- */
.matcher{display:grid;gap:12px}
.match{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;
  box-shadow:var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.match:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--blue-line)}
.match .sym{font-size:16.5px;color:var(--text);font-weight:500;line-height:1.45}
.match .sym b{display:block;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px;color:var(--text-l)}
.match .go{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--blue)}
.match .go svg{flex:none;transition:transform .25s var(--ease)}
.match:hover .go svg{transform:translateX(4px)}
@media(max-width:680px){
  .match{grid-template-columns:1fr;gap:10px;padding:18px}
  .match .go{font-size:15.5px}
}

/* ---------- service block: icon + plain-English lede + what's included ---------- */
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow .3s var(--ease),border-color .3s}
.svc:hover{box-shadow:var(--sh);border-color:var(--blue-line)}
.svc + .svc{margin-top:22px}
.svc-top{display:flex;gap:18px;align-items:flex-start;padding:30px 30px 0}
.svc-top .card-icon{flex:none;margin-bottom:0}
.svc-name{margin-bottom:6px}
.svc-lede{color:var(--text-2);font-size:17px;line-height:1.55;margin:0}
.svc-body{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;padding:24px 30px 30px}
.svc-body h4{font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-l);margin-bottom:14px}
.svc-body .checks{margin:0}
.svc-aside{border-left:1px solid var(--line);padding-left:34px}
.svc-aside p{font-size:15.5px;color:var(--text-2);line-height:1.6}
.svc .more{margin-top:18px;display:inline-block}
/* the two money services carry a marker so they read as the lead offers */
.svc-lead{border-color:var(--blue-line);box-shadow:var(--sh)}
.svc-lead .svc-top{padding-top:34px}
.flag{display:inline-block;font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#123005;background:var(--grad-lime);
  padding:5px 12px;border-radius:99px;margin-bottom:12px}
@media(max-width:860px){
  .svc-body{grid-template-columns:1fr;gap:26px;padding:22px 22px 26px}
  .svc-top{padding:24px 22px 0;gap:14px}
  .svc-aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:24px}
  .svc-lede{font-size:16px}
}

/* ---------- pricing posture panel ---------- */
.priceblock{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.pricecard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--sh-sm)}
.pricecard b{display:block;font-family:'Poppins',sans-serif;font-size:17px;color:var(--navy);margin-bottom:8px}
.pricecard p{font-size:15.5px;color:var(--text-2);line-height:1.6;margin:0}
@media(max-width:860px){.priceblock{grid-template-columns:1fr;gap:14px;margin-top:26px}}

/* anchored service blocks must clear the sticky header when linked directly */
.svc{scroll-margin-top:96px}

/* ---------- work gallery: real job photos as proof ---------- */
.gallery{display:grid;gap:18px}
.gallery figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--gray-2);
  border:1px solid var(--line);box-shadow:var(--sh-sm)}
/* height must stay auto - a percentage height here resolves against the figure
   and pushes the caption outside it, where overflow:hidden clips it away */
.gallery img{display:block;width:100%;height:auto}
.gallery figcaption{padding:14px 18px;font-size:14.5px;color:var(--text-2);background:#fff;
  border-top:1px solid var(--line)}
.gallery figcaption b{color:var(--navy);font-family:'Poppins',sans-serif;font-weight:700}
.gallery-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:760px){.gallery-pair{grid-template-columns:1fr}}

/* ---------- service cards carrying a photo instead of an icon ---------- */
.card-photo{padding:0}
.card-photo .card-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  background:var(--gray-2);transition:transform .5s var(--ease)}
.card-photo:hover .card-img{transform:scale(1.04)}
.card-photo .card-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.card-photo .card-body .more{margin-top:auto;padding-top:14px}
@media(max-width:560px){.card-photo .card-body{padding:22px 22px 24px}}

/* service-hub blocks lead with a photo thumbnail rather than an icon */
.svc-thumb{flex:none;width:200px;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--r);background:var(--gray-2)}
@media(max-width:1000px){.svc-thumb{width:150px}}
@media(max-width:860px){.svc-thumb{width:120px}}
@media(max-width:480px){
  .svc-top{flex-direction:column}
  .svc-thumb{width:100%}
}