/* H2O Crew — rebuilt from the Elementor site. Tokens mirror the live kit. */
:root{
  --navy:#0B183D; --navy60:rgba(11,24,61,.59); --blue:#0078E7; --yellow:#FFDC41; --ink:#000C1F; --ice:#EFFAFF; --white:#fff;
  --grey:#F6F6F6; --blue-text:#0066CC; /* slightly darker brand blue where white/ice text sits on it (AA contrast) */
  --f-head:"Montserrat",sans-serif; --f-body:"Roboto",sans-serif; --f-ui:"Barlow",sans-serif; --f-alt:"Heebo",sans-serif; --f-card:"Helvetica Neue",Helvetica,Arial,sans-serif; --f-label:"Poppins",sans-serif;
  --wrap:1300px; --wrap-n:1140px;
  --shadow-card:0 0 10px rgba(0,52,86,.19); --shadow-deep:0 10px 50px rgba(0,0,0,.57);
}
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top: whatever is scrolled into view (Tab / Shift+Tab, skip link, anchors) stops clear of the fixed
   bars: the 80px desktop sticky quote bar, the 89px tablet / 62px phone call bar (WCAG 2.4.11). Smooth scrolling
   only for visitors who have not asked for reduced motion. */
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:96px}
@media (max-width:1024px){html{scroll-padding-top:104px}}
@media (max-width:767px){html{scroll-padding-top:76px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* overflow-x: hidden first for browsers without clip (iOS 15 and older), so a 1-3px bleed never scrolls sideways */
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.5;color:var(--ink);background:#fff;overflow-x:hidden;overflow-x:clip}
/* page scroll lock while the menu drawer is open: the root scrolls the page (html has overflow-x:clip, so body
   overflow never reaches the viewport); main.js also sets it inline for browsers without :has() */
html:has(.mmenu.open:not(.closing)){overflow:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.wrap-n{width:min(var(--wrap-n),100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hidden-m{display:block}.only-m{display:none}
@media (max-width:1024px){.hidden-m{display:none!important}.only-m{display:block}}

/* ---------- buttons ----------
   The old site's Elementor global button widgets: Roboto 700 uppercase pill, the arrow in a 55px translucent circle
   whose offset shadow (the dark "cap") fills the right end; on hover the circle slides right over the cap.
   Widths are the live widget widths (--w), capped at the container. */
.btn{--w:auto;--cap:15px;display:inline-flex;align-items:center;width:var(--w);max-width:100%;font-family:var(--f-body);font-weight:700;font-size:18px;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;border:2px solid transparent;border-radius:35px;overflow:hidden;cursor:pointer;padding:0 15px 0 33px;transition:background-color .3s,color .3s,border-color .3s}
.btn>span:first-child:not(:only-child){min-width:0;overflow:hidden;text-overflow:ellipsis;padding-block:3px}
.btn .arr{flex:none;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;margin-left:20px;background:rgba(255,255,255,.5);box-shadow:var(--cap) 0 0 5px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.69,-.94,.3,1.92)}
.btn .arr svg{width:1em;height:1em;display:block;fill:currentColor}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(var(--cap))}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn,.btn .arr{transition:none}}
/* yellow 'Click For Instant Quote': intro size (global 1948), lg = steps / truck panel (7679, 2885), xl = guarantee / closing CTA (2049) */
.btn-y{--w:380px;background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-y.btn-lg{--w:431px;font-size:22px}
.mapcta .btn-y.btn-lg{--w:426px}
.btn-y.btn-xl{--w:auto;--cap:20px;font-size:25px;padding:0 25px 0 50px}
.btn-xl .arr{margin-left:30px}
/* outline 'See More Results' (global 5520): yellow circle, navy cap */
.btn-o{background:transparent;border-color:var(--navy);color:var(--ink);font-size:16px;padding:0 15px 0 25px}
.btn-o .arr{width:50px;height:50px;margin-left:12px;background:var(--yellow);color:var(--navy);box-shadow:var(--cap) 0 0 5px var(--navy)}
/* service-card links (old .btn-link): Helvetica 14px, navy outline */
.btn-o.btn-card{font-family:var(--f-card);font-size:14px;color:var(--navy);padding:0 15px 0 20px}
.btn-card .arr{margin-left:5px}
.btn-card .arr svg{width:15px;height:15px}
/* 'Learn More' on /services: solid navy, grey circle, white arrow */
.btn-navy{--w:292px;background:var(--navy);border-color:var(--navy);color:#fff;font-size:21px;padding:0 10px 0 40px}
.btn-navy .arr{margin-left:40px}
/* plain buttons (no circle): Get Pricing / Click To Call (globals 2096 / 2099) */
.btn-plain,.btn-solid{justify-content:center;padding:18px 0;font-size:19px}
.btn-solid{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--navy);border-color:#fff;color:#fff}
.btn-w{background:transparent;border-color:#fff;color:#fff}
.btn-w.btn-plain:hover,.btn-w.btn-plain:focus-visible{background:var(--navy)}
.btn-y.btn-plain{--w:auto;padding:20px 50px;font-size:15px;letter-spacing:.3px}
@media (max-width:1024px){
  .btn-y{--w:354px;font-size:16px}
  .btn-y.btn-lg{--w:391px;font-size:19px}.mapcta .btn-y.btn-lg{--w:393px}
  .btn-y.btn-xl{--w:auto;font-size:25px}
  .btn-navy{--w:300px;font-size:19px;padding:0 10px 0 60px}
}
@media (max-width:767px){
  .btn-y{--w:292px;font-size:12px;padding:0 10px 0 25px}
  .btn-y.btn-lg,.mapcta .btn-y.btn-lg{--w:285px;font-size:12px}
  .btn-y.btn-xl{--w:auto;font-size:12px;padding:0 15px 0 26px}
  .btn-o:not(.btn-card){--w:285px;font-size:17px;padding:0 15px 0 37px}
  .btn-navy{--w:285px;font-size:18px;padding:0 10px 0 55px}
  .btn-plain,.btn-solid{padding:12px 0;font-size:15px}
}
.center{text-align:center}

/* ---------- header (desktop transparent, over hero) ---------- */
.hdr{position:absolute;inset:0 0 auto 0;z-index:30;padding:17px 10px 7px}
.hdr .in{width:min(var(--wrap),100% - 20px);margin-inline:auto;display:grid;grid-template-columns:15% 1fr 20%;align-items:center}
.hdr .logo{display:block}
.hdr .logo img{width:100%;max-width:195px} /* live d6a8de8: the full 15% logo column (195px at 1300px), so the nav sits at y 113 as live */
.nav{display:flex;justify-content:center;gap:20px;list-style:none;margin:0;padding:0}
.nav>li{position:relative}
.nav a{font-family:var(--f-body);font-weight:500;font-size:15px;text-transform:uppercase;color:#fff;text-decoration:none;padding:10px 0;display:inline-flex;align-items:center;gap:6px}
.nav a:hover,.nav li.on>a{color:var(--yellow)}
.nav .chev{width:8px;height:12px;fill:currentColor;margin:0 3.5px 0 0} /* Font Awesome angle-down at 12px (premium-dropdown-icon); live 20px between items, 23-24px after a chevron */
.nav .sub{position:absolute;top:100%;left:-16px;min-width:260px;background:var(--navy);border-radius:10px;padding:10px 0;list-style:none;margin:6px 0 0;display:none;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.nav li:hover .sub,.nav li:focus-within .sub{display:block}
.nav li.esc .sub{display:none} /* Esc closes a dropdown opened by keyboard or hover (main.js) until focus / the pointer leaves */
.nav .sub a{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:14px;text-transform:none;font-weight:500}
/* the service icons are navy-outline artwork: an ice chip keeps them visible on the navy dropdown */
.nav .sub img{width:30px;height:30px;padding:3px;border-radius:6px;background:var(--ice);object-fit:contain}
.nav a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
.nav .sub a:focus-visible{outline-offset:-3px;border-radius:6px}
.nav .sub a:hover{color:#fff;background:rgba(255,255,255,.08)}
/* the pill never wraps its number: from 1025 to 1340px it is wider than its 20% column and runs left into the nav
   column's free space */
.hdr .call{justify-self:end;min-width:max-content}
.hdr .pill{display:inline-flex;align-items:center;border:2px solid var(--ice);border-radius:35px;overflow:hidden;color:#fff;text-decoration:none;font-family:var(--f-body);font-weight:700;font-size:17px;letter-spacing:.5px;line-height:1;white-space:nowrap;padding:0 10px 0 43px}
.hdr .pill .ic{width:50px;height:50px;margin-left:20px;border-radius:50%;background:rgba(255,255,255,.5);display:grid;place-items:center;box-shadow:15px 0 0 5px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.69,-.94,.3,1.92)}
.hdr .pill:hover .ic,.hdr .pill:focus-visible .ic{transform:translateX(15px)}
@media (prefers-reduced-motion:reduce){.hdr .pill .ic{transition:none}}
.hdr .pill .ic svg{width:20px;height:20px;fill:#fff}
/* full-width desktop: the live 260px pill at 1106-1366 (1440), 4px in from the column edge and 4px wider than the
   column, with 24px before and 14px after the icon circle */
@media (min-width:1340px){.hdr .call{margin-right:4px}.hdr .pill{padding-right:12px}.hdr .pill .ic{margin-left:24px}}
/* small laptops: a slimmer pill (22px before the number, 12px to the circle) keeps it 30px clear of CONTACT at 1025 */
@media (min-width:1025px) and (max-width:1199px){.hdr .pill{padding-left:22px}.hdr .pill .ic{margin-left:12px}}
/* mobile header bar (old container 497e2466): logo (tablet 150px, phone 45% of 70% = ~116px) and a 38px 'bars' icon */
.hdr-m{display:none;background:var(--navy);padding:5px 25px;align-items:center;justify-content:space-between;position:relative;z-index:30;box-shadow:0 0 7px rgba(0,0,0,.16)}
.hdr-m img{width:150px}
.hdr-m .burger{background:none;border:0;color:#fff;width:44px;height:48px;margin-right:-5px;display:grid;place-items:center;cursor:pointer;padding:0}
.hdr-m .burger svg{width:33px;height:38px;fill:#fff}
.hdr-m .burger:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
/* Get Pricing / Click To Call bar (old section 6acd55d, Elementor sticky top): fixed at the top UNDER the logo bar,
   so at the top of the page the logo bar hides it and it is uncovered as the logo bar scrolls away. main.js adds
   .stuck once any of it can show; until then it stays out of the tab order. */
.hdr-m2{display:none;background:var(--navy);padding:15px 25px;gap:16px;position:fixed;left:0;right:0;top:0;z-index:29;box-shadow:0 0 7px rgba(0,0,0,.16);visibility:hidden}
.hdr-m2.stuck{visibility:visible}
.hdr-m2 .btn{flex:1 1 0;min-width:0;justify-content:center;font-size:19px;padding:18px 0}
@media (max-width:767px){
  .hdr-m{padding:10px}
  .hdr-m img{width:116px}
  .hdr-m2{padding:10px;gap:10px}
  .hdr-m2 .btn{font-size:14px;padding:12px 0}
}
@media (max-width:1024px){.hdr{display:none}.hdr-m{display:flex}.hdr-m2{display:flex}}
/* entrance fades of the old site: the phone header bars fade in on load (Elementor animation_mobile fadeIn, 1.25s);
   lazy images fade in over 500ms as they arrive (main.js adds .fadein; the old perfmatters pmFadeIn) */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){.hdr-m{animation:h2o-fade-in 1.25s}}
@media (prefers-reduced-motion:no-preference){img.fadein{animation:h2o-fade-in .5s}}
/* menu drawer (old Elementor popup 2079): a navy panel from the right over an 80% black backdrop, 320px wide (370px
   on tablets, 90vw on phones), full height, the Frame-6 sweep over it; content left-aligned: logo 65% (max 200px;
   35% on tablets and phones), Heebo 600 18px (17px phones) uppercase ice items 13px (10px) apart, About and Services
   collapsed behind caret toggles, the 262px Instant Quote and 333px phone buttons. slideInRight 1.2s in and out
   (phones: fadeInLeft in, fadeInRight reversed out); no animation with reduced motion. */
.mmenu{position:fixed;inset:0;z-index:1000;display:none;justify-content:flex-end;background:rgba(0,0,0,.8);overscroll-behavior:contain}
.mmenu.open{display:flex}
.mmenu .panel{position:relative;width:320px;max-width:100%;height:100%;overflow:auto;overscroll-behavior:contain;background:var(--navy) var(--img-frame6) 0 0/auto no-repeat;box-shadow:2px 8px 23px 3px rgba(0,0,0,.2);padding:40px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.mmenu .close{position:absolute;top:20px;right:20px;width:40px;height:40px;display:grid;place-items:center;padding:0;background:none;border:0;color:var(--ice);font-size:30px;line-height:1;cursor:pointer}
.mmenu .close:focus-visible,.mmenu .st:focus-visible{outline:3px solid var(--yellow);outline-offset:0}
.mmenu .lgl{display:block;width:65%;max-width:200px}
.mmenu img.lg{width:100%}
.mmenu nav{width:100%;margin-top:-10px}
.mmenu ul{list-style:none;padding:0;margin:0}
.mmenu nav>ul{margin-bottom:20px}
.mmenu .it{display:flex;align-items:center}
.mmenu li a{display:block;color:var(--ice);text-decoration:none;font-family:var(--f-alt);font-weight:600;font-size:18px;line-height:20px;text-transform:uppercase;padding:13px 1px}
.mmenu li a:hover,.mmenu li a:focus-visible,.mmenu li a[aria-current="page"]{color:var(--yellow)}
.mmenu li a:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.mmenu .st{flex:none;width:34px;height:40px;display:grid;place-items:center;padding:0;background:none;border:0;color:var(--ice);cursor:pointer}
.mmenu .st svg{width:10px;height:16px;fill:currentColor;transition:transform .2s}
.mmenu .st[aria-expanded="true"] svg{transform:rotate(180deg)}
.mmenu .st:hover{color:var(--yellow)}
.mmenu .sub{padding-left:20px}
.mmenu .sub[hidden]{display:none}
.mmenu .btn{flex:none;margin:0 0 20px;font-size:18px}
.mmenu .btn .arr{width:45px;height:45px}
.mmenu .btn-mq{--w:262px;padding:0 15px 0 29px}
.mmenu .mp{--w:333px;letter-spacing:.7px;padding:1px 10px 1px 51px}
.mmenu .mp .arr{margin-left:25px}
.mmenu .mp .arr svg{fill:#fff}
@media (max-width:1024px){
  .mmenu .panel{width:370px;padding:30px 20px 20px}
  .mmenu .close{top:21px;right:32px;font-size:34px}
  .mmenu .lgl{width:35%;max-width:46%}
  .mmenu .btn{font-size:19px}
  .mmenu .btn-mq{--w:273px;padding:0 5px 0 28px}
  .mmenu .mp{--w:290px;padding:1px 10px 1px 50px}
}
@media (max-width:767px){
  .mmenu .panel{width:90vw;padding:45px 10px 0}
  .mmenu .close{top:4.1%;right:7.4%;font-size:30px}
  .mmenu .lgl{max-width:48%}
  .mmenu li a{font-size:17px;padding:10px 4px}
  .mmenu .btn{font-size:18px}
  .mmenu .btn-mq{--w:264px;padding:0 10px 0 30px}
  .mmenu .mp{--w:280px}
}
@media (prefers-reduced-motion:no-preference){
  .mmenu.open .panel{animation:h2o-slide-in-right 1.2s both}
  .mmenu.closing .panel{animation:h2o-slide-out-right 1.2s both}
  @media (max-width:767px){
    .mmenu.open .panel{animation:h2o-fade-in-left 1.2s both}
    .mmenu.closing .panel{animation:h2o-fade-out-right 1.2s both}
  }
}
@media (prefers-reduced-motion:reduce){.mmenu .st svg{transition:none}}
@keyframes h2o-slide-in-right{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}
/* exits: the entrance keyframes played backwards (Elementor runs the exit animation in reverse) */
@keyframes h2o-slide-out-right{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}
@keyframes h2o-fade-out-right{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(100%,0,0)}}
@keyframes h2o-fade-in{from{opacity:0}}

/* ---------- sticky quote bar (desktop; old header section d6a3490) ----------
   Hidden (opacity 0, 100px up) until the page has scrolled 200px, then it slides down in 300ms (back up above 200px);
   1400px row, min-height 80px, columns 21.9% (title, 20px in) | 70.9% (form, 10px padding) | 6.5% (the 38px menu
   burger); Barlow 700 26px ice title over a 16px line; four equal 5px-gapped columns: white 20px-round inputs with an
   ice border (Heebo 15px, 47px tall) and the yellow Roboto 700 14px uppercase submit with its arrow-circle icon. */
.sticky{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--navy);box-shadow:0 4px 15px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:translateY(-100px);transition:transform .3s ease-in-out,opacity .3s ease-in-out,visibility 0s linear .3s}
.sticky.show{opacity:1;visibility:visible;transform:none;transition:transform .3s ease-in-out,opacity .3s ease-in-out}
.sticky .in{width:min(1400px,100%);margin-inline:auto;min-height:80px;display:grid;grid-template-columns:minmax(max-content,21.898fr) minmax(0,70.936fr) minmax(44px,6.499fr);align-items:center}
.sticky .tt{padding:10px 10px 10px 20px}
.sticky .t{font-family:var(--f-ui);font-weight:700;font-size:26px;letter-spacing:.7px;color:var(--ice);line-height:1;white-space:nowrap}
.sticky .s{font-family:var(--f-alt);font-size:16px;color:var(--ice);line-height:1;margin-top:7px}
.sticky form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(max-content,1fr);gap:0 5px;padding:10px}
.sticky .fg{min-width:0}
.sticky input{display:block;min-height:47px;min-width:0;width:100%;margin:0;border-radius:20px;border:1px solid var(--ice);background:#fff;padding:6px 16px;font-family:var(--f-alt);font-size:15px;line-height:1.3;color:var(--ink)}
.sticky input::placeholder{color:#757575;opacity:1}
.sticky input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,120,231,.45)}
.sticky input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.sticky button[type="submit"]{min-height:47px;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;border-radius:20px;background:var(--yellow);color:var(--navy);border:0;font-family:var(--f-body);font-weight:700;font-size:14px;line-height:1;text-transform:uppercase;padding:12px 5px;cursor:pointer;transition:background-color .3s,color .3s}
.sticky button[type="submit"] svg{width:14px;height:14px;fill:currentColor;flex:none}
.sticky button[type="submit"]:hover,.sticky button[type="submit"]:focus-visible{background:var(--blue-text);color:#fff}
.sticky button[type="submit"]:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.sticky .mb{justify-self:center;width:44px;height:48px;margin-bottom:-7px;display:grid;place-items:center;padding:0;background:none;border:0;color:#fff;cursor:pointer}
.sticky .mb svg{width:33px;height:38px;fill:#fff}
.sticky .mb:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sticky,.sticky.show,.sticky button[type="submit"]{transition:none}}
@media (max-width:1024px){.sticky{display:none}}

/* ---------- hero ----------
   The old Elementor hero sections: padding 120/10/200 around a 1300px row whose min-height is 90vh (home, /services,
   service pages) or 30vh (title-only heroes), content centred vertically; navy-to-translucent gradient; the Frame-4
   wave stretched (100% x 100%) over the bottom 50% (home) or 40% (every other page) of the section.
   Tablet: padding 0/60/150, row 100vh (home) or 105vh, column padding 200/250. Phone: padding 0/15/100, row 101vh
   (home) or 102vh, column padding 150/200. Title-only heroes: row 0, column padding 150/100 (tablet), 125/75 (phone).
   The mobile header sits above the hero (in flow); the desktop header overlays it. */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--navy) center/cover no-repeat;background-image:var(--hero-bg,none);background-position:var(--hero-bgp,center center);padding:120px 10px 200px}
.hero .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .ov{position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,var(--navy60) 90%);z-index:1}
.hero .wave{position:absolute;left:0;bottom:-1px;width:100%;height:var(--wave-h,40%);background:var(--img-frame4) center/100% 100% no-repeat;z-index:2;pointer-events:none}
.pg-home .hero{--wave-h:50%}
.hero .in{position:relative;z-index:3;width:min(var(--wrap),100%);margin-inline:auto;min-height:var(--hero-mh,90vh);display:grid;grid-template-columns:var(--hero-col,65%) minmax(0,1fr);align-items:center}
.hero .col{min-width:0;padding:var(--hero-pad,0 0 75px)}
.pg-home .hero{--hero-pad:0 0 50px}
.pg-services .hero{--hero-col:72.769%;--hero-pad:25px 0 50px}
.hero h1,.hero .h{font-family:var(--f-head);font-weight:800;font-size:var(--hero-fs);line-height:1.2;letter-spacing:-.5px;color:#fff;text-shadow:2px 3px 10px rgba(0,0,0,.3)}
.hero .sub{font-family:var(--f-head);font-weight:500;font-style:italic;font-size:23px;line-height:1.5;letter-spacing:.5px;margin:15px 0 0}
/* checklist: two icon lists side by side, filled column by column; bold yellow ticks (icon 20px in a 25px box) */
.hero .checks{list-style:none;margin:25px 0 0;padding:0;display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:auto;justify-content:start;gap:15px 20px}
.hero .sub+.checks{margin-top:10px}
.hero .checks li{display:flex;align-items:center;font-family:var(--f-head);font-weight:600;font-size:var(--chk-fs,22px);line-height:1.5;letter-spacing:-.2px;color:#fff}
.hero .checks svg{flex:none;width:var(--chk-ic,20px);height:var(--chk-ic,20px);margin:0 8px 0 2px;color:var(--yellow)}
.hero .hbtn{padding-top:25px}
.hero .mbtns{display:none}
.hero.simple{text-align:center;--hero-mh:30vh}
.hero.simple .in{grid-template-columns:minmax(0,1fr)}
.hero.simple .col{padding:0}
/* Desktop overlay header: the old header section cc1453a (17 + logo + 7px tall, margin-bottom -230px) and the hidden
   sticky bar d6a3490 (80px, margin-bottom -95px) left the first section starting about 24px above the window top
   (measured 22-25px on home, about, /services and the service pages), so the hero, its content and every section
   below sit 24px higher than a hero starting at 0. Not on tablets/phones (in-flow mobile header) or the 404. */
@media (min-width:1025px){main>.hero:first-child{margin-top:-24px}}
/* per-page photo crops and checklist sizes (desktop / tablet / phone) from the old hero sections */
.pg-services_house-washing{--hero-bgp:center left;--hero-bgp-t:20% 0%;--hero-bgp-m:25% 5%}
.pg-services_pressure-washing{--hero-bgp-t:35% 0%;--hero-bgp-m:35% 5%}
.pg-services_roof-cleaning{--hero-bgp:center left;--hero-bgp-t:60% 0%;--hero-bgp-m:64% 5%;--chk-fs-t:18px}
.pg-services_window-cleaning{--hero-bgp-t:50% 0%;--hero-bgp-m:48% 5%;--chk-fs-t:17px}
.pg-services_commercial-power-washing{--hero-bgp:center right;--hero-bgp-t:65% 0%;--hero-bgp-m:68% 5%;--chk-fs:20px;--chk-fs-t:14px;--chk-fs-m:13px}
.pg-services{--chk-fs-m:18px}
/* quote card (old container 4bd684b + global form 2665 + privacy text 7776): ice card, Frame-6 sweep at the lower
   left, white 10px-radius inputs with a thin grey border and placeholders, text-only yellow button, bold navy link */
.qcard{position:relative;background:var(--ice) var(--img-frame6) left bottom/cover no-repeat;border-radius:15px;box-shadow:0 10px 50px rgba(0,0,0,.57);padding:40px;color:var(--ink);margin-left:80px;min-width:0}
.qcard .t{font-family:var(--f-head);font-weight:900;font-size:32px;line-height:1;color:var(--navy);text-align:center;margin-bottom:20px}
.qf{display:grid;gap:10px}
.qf input{display:block;width:100%;min-height:47px;margin:0;border-radius:10px;border:1px solid #E0E0E0;background:#fff;padding:6px 16px;font-family:var(--f-head);font-weight:400;font-size:16px;line-height:2.6;color:#000;box-shadow:none}
.qf input::placeholder{color:#757575;opacity:1}
.qf input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,120,231,.35)}
.qf input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.qf button{width:100%;border-radius:50px;background:var(--yellow);color:var(--navy);border:0;font-family:var(--f-body);font-weight:700;font-size:17px;line-height:1;text-transform:uppercase;cursor:pointer;padding:20px 15px;display:flex;align-items:center;justify-content:center}
.qf button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.qf .priv{margin-top:10px;font-family:var(--f-alt);font-weight:400;font-size:17px;line-height:1.5;text-align:center;color:var(--ink)}
.qf .priv a{color:#041562;font-weight:700;text-decoration:none}
.qf .priv a:hover,.qf .priv a:focus-visible{text-decoration:underline}
/* skip link (the old theme had one): hidden until focused */
.skip{position:fixed;left:10px;top:10px;z-index:3000;background:var(--yellow);color:var(--navy);font:700 15px/1 var(--f-body);text-decoration:none;padding:14px 20px;border-radius:30px;box-shadow:0 5px 15px rgba(0,0,0,.3)}
.skip:not(:focus){width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;box-shadow:none}
.skip:focus{outline:3px solid var(--navy);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.note{display:none;background:var(--blue-text);color:#fff;padding:10px 14px;border-radius:12px;font-size:14px;margin-top:10px}
.sticky .note{grid-column:1/-1;margin:0}
.note.show{display:block}
.note a{color:#fff;text-decoration:underline}
.cf .note{grid-column:1/-1}
.note.err{background:#8a1c1c}
@media (max-width:1024px){
  .hero{padding:0 60px 150px;background-position:var(--hero-bgp-t,center center);--hero-mh:105vh;--hero-pad:200px 0 250px}
  .pg-home .hero{--hero-mh:100vh;--hero-pad:200px 0 250px}
  .pg-services .hero{--hero-pad:150px 0 300px}
  .hero .in{grid-template-columns:minmax(0,1fr)}
  .hero .wave{width:120%}
  .hero h1,.hero .h{font-size:var(--hero-fs-t);line-height:var(--hero-lh-t)}
  .hero .sub{font-size:21px;letter-spacing:0;margin-top:20px}
  .hero .checks{margin:30px 0 0;padding:0 0 20px;gap:15px}
  .hero .sub+.checks{margin-top:15px}
  .hero .checks li{font-size:var(--chk-fs-t,19px);line-height:1.3}
  .hero .checks{--chk-ic:18px}
  .hero .qcard{display:none}
  .hero .mbtns{display:flex;gap:20px;margin-top:20px}
  .hero .mbtns .btn{flex:1 1 0;min-width:0}
  .hero.simple{--hero-mh:0px}
  .hero.simple .col{padding:150px 0 100px}
}
@media (max-width:767px){
  .hero{padding:0 15px 100px;background-image:var(--hero-bg-m,var(--hero-bg,none));background-position:var(--hero-bgp-m,center center);--hero-mh:102vh;--hero-pad:150px 0 200px}
  .pg-home .hero{--hero-mh:101vh;--hero-pad:150px 0 200px}
  .pg-services .hero{--hero-pad:150px 0 200px}
  .hero .wave{width:130%;height:35%}
  .hero h1,.hero .h{font-size:var(--hero-fs-m);line-height:var(--hero-lh-m)}
  .pg-home .hero .h{letter-spacing:-.2px}
  .hero .sub{font-size:20px;line-height:1.4;margin-top:15px}
  .hero .checks{margin:20px 0 0;padding:0;grid-template-rows:none;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:10px;--chk-ic:17px}
  .hero .sub+.checks{margin-top:5px}
  .hero .checks li{font-size:var(--chk-fs-m,15px)}
  .hero .checks svg{margin-right:8px}
  .hero .mbtns{justify-content:space-between;gap:0;margin-top:25px}
  .hero .mbtns .btn{flex:0 0 48%}
  .hero.simple .col{padding:125px 0 75px}
}
/* hero Get Pricing / Click To Call (old globals 2096 / 2099): Elementor 'grow' hover */
.hero .mbtns .btn{transition:background-color .3s,color .3s,border-color .3s,transform .3s}
.hero .mbtns .btn:hover,.hero .mbtns .btn:focus-visible{transform:scale(1.1)}
@media (prefers-reduced-motion:reduce){.hero .mbtns .btn{transition:none}.hero .mbtns .btn:hover,.hero .mbtns .btn:focus-visible{transform:none}}
/* Per-page hero title sizes from the live Elementor heading widgets: desktop / tablet (<=1024) / phone (<=767) */
body{--hero-fs:58px;--hero-fs-t:44px;--hero-lh-t:1.2;--hero-fs-m:28px;--hero-lh-m:1.3}
.pg-home{--hero-fs-m:32px}
.pg-services_pressure-washing{--hero-fs:55px;--hero-fs-t:41px;--hero-lh-t:1.4;--hero-lh-m:1.4}
.pg-services_house-washing{--hero-lh-t:1.4;--hero-lh-m:1.4}
.pg-services_roof-cleaning{--hero-fs-t:60px;--hero-lh-t:1.4;--hero-lh-m:1.4}
.pg-services_window-cleaning{--hero-fs:56px;--hero-fs-t:42px;--hero-lh-t:1.4;--hero-lh-m:1.4}
.pg-services_commercial-power-washing{--hero-fs:59px;--hero-fs-m:24px;--hero-lh-m:1.2}
.pg-about,.pg-privacy-policy{--hero-fs:83px;--hero-fs-t:50px;--hero-fs-m:34px;--hero-lh-m:1.2}
.pg-services{--hero-fs:69px;--hero-fs-t:58px;--hero-fs-m:29px;--hero-lh-m:1.2}
.pg-service-area,.pg-faq,.pg-404{--hero-fs:75px;--hero-fs-t:50px;--hero-fs-m:26px;--hero-lh-m:1.2}
.pg-gallery{--hero-fs:98px;--hero-fs-t:77px;--hero-fs-m:39px;--hero-lh-m:1.2}

/* ---------- section basics ---------- */
.sec{position:relative;padding:90px 0}
.sec.ice{background:var(--ice)}
.sec.navy{background:var(--navy);color:#fff}
.sec.grad{background:linear-gradient(180deg,#fff 0%,var(--ice) 100%)}
.sec.grad-r{background:linear-gradient(180deg,var(--ice) 0%,#fff 100%)}
.kicker{display:inline-block;font-family:var(--f-head);font-weight:600;font-size:18px;color:var(--ink);border-left:4px solid var(--yellow);padding-left:12px;line-height:1.5}
.h2{font-family:var(--f-head);font-weight:800;line-height:1.2;color:var(--navy)}
.h2.xl{font-size:59px;text-transform:capitalize}
.h2.lg{font-size:50px;line-height:1.3}
.h2.md{font-size:40px;text-transform:capitalize}
.h2.sm{font-size:38px;text-transform:capitalize}
.h2.w{color:#fff}
.prose{font-family:var(--f-body);font-size:18px;line-height:1.4;letter-spacing:.5px;color:var(--ink)}
.prose p{margin:0 0 14px}
.prose a{color:var(--blue-text)}
.lead{font-family:var(--f-body);font-weight:800;font-size:20px;line-height:1.4;letter-spacing:.5px;margin:14px 0 10px}
@media (max-width:1024px){.sec{padding:60px 0}.h2.xl{font-size:34px}.h2.lg{font-size:42px}.h2.md{font-size:34px}.h2.sm{font-size:39px}.prose{font-size:16px}}
@media (max-width:767px){.h2.xl{font-size:31px}.h2.lg{font-size:23px}.h2.md{font-size:21px}.h2.sm{font-size:24px}.prose{font-size:15px}.kicker{font-size:15px;line-height:1.4}.lead{font-size:16px}}
/* Section headings whose live size differs from the shared scale (desktop / <=1024 / <=767) */
.sintro .kicker{letter-spacing:-.4px}
.sintro .h2{font-size:var(--sintro-fs,38px)}
/* intro and /services row text (live a047d17 / 0972942, /services a047d17 / 2cf8c57 / b17304f / 4452113 / 9c24819):
   Roboto 17px / 1.5em, no letter-spacing, 16px on phones; 18px / 1.4 / .5px is only the detail pages' Why Choose text */
.sintro .prose,.rows .prose{font-size:17px;line-height:1.5;letter-spacing:0}
.whyc .h2{font-size:var(--whyc-fs,38px)}
.area .h2{font-size:38px}
.pg-services_pressure-washing{--sintro-fs:35px;--res-fs:51px;--res-fs-t:48px}
.pg-services_house-washing{--res-fs:43px;--res-fs-t:44px}
.pg-services_roof-cleaning{--res-fs:49px;--res-fs-t:44px}
.pg-services_window-cleaning{--sintro-fs:36px;--res-fs:46px;--res-fs-t:44px}
.pg-services_commercial-power-washing{--sintro-fs:29px;--sintro-fs-t:29px;--sintro-fs-m:20px;--whyc-fs:35px;--whyc-fs-t:30px;--whyc-fs-m:19px;--map-fs:36px;--map-fs-t:39px;--map-fs-m:19px;--faq-fs:42px;--faq-fs-t:36px}
[class*="pg-services_"]{--res-fs-m:27px}
.pg-services_house-washing,.pg-services_roof-cleaning{--res-fs-m:23px} /* live b37bd3e on phones: 23px (window 26px) */
.pg-services_window-cleaning{--res-fs-m:26px}
/* near-black headings as live (Elementor 'text' colour #000C1F): Why Choose on every service page, the intro on roof
   and commercial, the 1-2-3 heading on house, roof and commercial, the FAQ on all but pressure washing (the window
   intro and steps, the pressure washing intro, steps and FAQ and the house intro stay navy, as live) */
.whyc .h2,
:is(.pg-services_roof-cleaning,.pg-services_commercial-power-washing) .sintro .h2,
:is(.pg-services_house-washing,.pg-services_roof-cleaning,.pg-services_commercial-power-washing) .steps .h2,
:is(.pg-services_house-washing,.pg-services_roof-cleaning,.pg-services_window-cleaning,.pg-services_commercial-power-washing) .faq1 .h2{color:var(--ink)}
@media (max-width:1024px){
  .sintro .kicker{font-size:23px;letter-spacing:-.2px}
  .sintro .h2{font-size:var(--sintro-fs-t,35px)}
  .whyc .h2{font-size:var(--whyc-fs-t,39px)}
  .abt .h2{font-size:42px}
  .area .h2{font-size:36px}
  .pg-home .steps .h2{font-size:53px}
}
@media (max-width:767px){
  .intro .kicker{font-size:12px}
  .sintro .kicker{font-size:14px;line-height:1.2;letter-spacing:-.4px}
  .sintro .h2{font-size:var(--sintro-fs-m,18px)}
  .sintro .prose,.rows .prose{font-size:16px}
  .whyc .h2{font-size:var(--whyc-fs-m,20px)}
  .abt .h2{font-size:26px}
  .area .h2{font-size:30px}
  .pg-home .steps .h2{font-size:31px}
}

/* ---------- home intro (live f45047d) ----------
   Text: a 600px column ending 10px short of the page centre (2facd77), padding 10, 100px under it. Photos (462b1de,
   padding-left 50): the portrait technician (ad66a81: 6px white frame, 50px above the row, 50.4% of the half) and the
   smiling technician (bc2b1aa: 75px lower, from 52.5% of the half to the window edge, square right corners) hanging
   50px into the navy section. Tablet: 40/75/75 padding, two equal portrait photos; phone: 60/20, both 230px tall. */
.intro{position:relative;z-index:3;padding:75px 0 25px;background:linear-gradient(180deg,#fff 0%,var(--ice) 100%)}
.intro .in{display:flex;width:min(1800px,100%);margin-inline:auto}
.intro .txt{flex:0 0 50%;min-width:0;padding:0 10px 106px}
.intro .tx{width:min(600px,100%);margin-left:auto;padding-top:10px}
.intro .h2{margin-top:20px}
.intro .lead{margin-top:20px}
.intro .ctaw{margin-top:30px}
.intro .pics{flex:0 0 50%;min-width:0;position:relative}
.intro .pics .a,.intro .pics .b{position:absolute;z-index:1;border:6px solid #fff;background:var(--navy)}
/* as measured live at 1440 (relative to the kicker): the portrait photo 363px wide (770-1133), the navy band's brush
   edge 706px down and the smiling technician's frame ending 26px into the band */
.intro .pics .a{left:50px;top:-49px;bottom:50px;width:50.4%;border-radius:15px;box-shadow:0 0 35px rgba(0,0,0,.3)}
.intro .pics .b{left:52.5%;right:0;top:76px;bottom:-73px;border-radius:15px 0 0 15px;box-shadow:10px 10px 45px rgba(0,0,0,.2)}
.intro .pics img{width:100%;height:100%;max-width:none;object-fit:cover;opacity:.8}
.intro .pics .a img{object-position:top center;border-radius:10px;filter:contrast(.95) saturate(.94)}
.intro .pics .b img{object-position:center left;border-radius:9px 0 0 9px}
@media (max-width:1024px){
  .intro{margin-top:-10px;padding:40px 75px 75px}
  .intro .in{flex-direction:column}
  .intro .txt{flex:none;padding:0}
  .intro .tx{width:100%;margin:0;padding:0}
  .intro .pics{flex:none;display:flex;gap:20px;padding-top:50px}
  .intro .pics .a,.intro .pics .b{position:static;flex:1 1 0;min-width:0;width:auto;aspect-ratio:3/4;border-radius:15px}
  .intro .pics .b img{border-radius:9px}
}
@media (max-width:767px){
  .intro{padding:60px 20px}
  .intro .pics{gap:5px;padding-top:40px;margin-inline:-5px}
  .intro .pics .a,.intro .pics .b{aspect-ratio:auto;height:236px;border-width:3px}
  .intro .pics .a img{object-position:center center}
  .intro .pics .b img{border-radius:12px}
}

/* ---------- services cards (live e072a36 heading band + 9d568cc grid) ----------
   1400px column: heading left-aligned over 73.7% (50 / 42 / 23px, centred on tablets and phones); 4 cards with 20px
   gaps (1 column on tablets and phones); each white card has 10px padding, so the 180px photo on bright blue (50%,
   35% on hover with a 1.12 zoom) sits inset; the icon circle (30% wide) is centred on the photo's bottom edge.
   The navy runs 250px under the cards (125 / 80 on tablets / phones) into the Frame-4-1-1 wave. */
.sw{width:min(1400px,100%);margin-inline:auto}
.svc-band{background:var(--navy);padding:100px 10px 50px;position:relative}
.svc-band .h2{width:73.719%;padding:10px;text-align:left}
.svc{background:var(--navy);padding:0 10px 250px;position:relative}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:260px;background:transparent var(--img-frame41) center bottom/100% auto no-repeat;z-index:0;pointer-events:none}
.svc .grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* photo bottom to title cap 88px (91 on phones) and 31px (30) under the button, as live */
.card{background:#fff;border-radius:12px;box-shadow:var(--shadow-card);padding:10px 10px 17px;text-align:center;transition:box-shadow .3s}
.card:hover{box-shadow:0 10px 35px rgba(0,52,86,.19)}
.card .ph{height:180px;border-radius:12px;background:var(--blue);overflow:hidden;position:relative}
.card .ph img{width:100%;height:250px;max-width:none;object-fit:cover;opacity:.5;border-radius:12px;transition:transform .4s,opacity .4s} /* live: a 250px image showing its top 180px */
.card:hover .ph img{transform:scale(1.12);opacity:.35}
.card .ic{width:30%;aspect-ratio:1;border-radius:50%;background:var(--ice);border:4px solid #fff;box-shadow:0 5px 15px rgba(0,52,86,.19);display:flex;align-items:center;justify-content:center;padding:15px 18px;margin:-15% auto 20px;position:relative}
.card .ic img{width:100%;height:auto;object-fit:contain}
.card h3{font-family:var(--f-card);font-weight:800;font-size:22px;line-height:1.2;text-transform:uppercase;letter-spacing:-.4px;color:var(--navy);margin:28px 0 14px} /* (collapses with the icon circle's 20px margin) */
.card p{font-family:var(--f-card);font-size:15px;line-height:1.4;letter-spacing:-.1px;color:#000;padding:0 10px;margin-bottom:20px}
.card .btn{margin-bottom:14px}
@media (prefers-reduced-motion:reduce){.card .ph img{transition:none}.card:hover .ph img{transform:none}}
@media (max-width:1024px){
  .svc-band{padding:75px 75px 25px}
  .svc-band .h2{width:100%;padding:0;text-align:center}
  .svc{padding:0 75px 125px}
  /* live grid 5ba6ea2 keeps its tablet rows repeat(3, 1fr) on phones too: the first three cards share the tallest
     one's height (the button stays under its text, the extra space below it), the fourth sizes to its content */
  .svc .grid{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,1fr)}
}
@media (max-width:767px){
  .svc-band{padding:70px 20px 30px}
  .svc{margin-top:-7px;padding:0 20px 80px}
  .card{padding-bottom:16px}
  .card h3{font-size:18px;letter-spacing:0;margin-top:30px}
  .card p{font-size:14px}
}

/* ---------- why trust (live 76eca60) ----------
   Desktop: row-reverse; the list column (45.45%: a 550px block, heading 35px, 20px Montserrat items on navy, bold
   white ticks) and the photo column (54.55%, padding-left 50) whose house photo is 310px wider than the column,
   starting 260px left of it (so it bleeds off the window edge) and 135px above it; the couple (350px) sits at 55%
   down, its right edge at 64% of the column, fading to white at the bottom. Faint mirrored Frame-4 wave behind.
   Tablets/phones: heading and list first (centred, list as wide as its longest item), then the photo. */
.why{position:relative;overflow:hidden;margin-top:-2px;padding:50px 0 125px;background:linear-gradient(180deg,var(--ice) 0%,#fff 100%)}
.why::before{content:"";position:absolute;left:0;top:0;width:100%;height:30vw;background:var(--img-frame4-blue) center/100% 100% no-repeat;opacity:.1;transform:scaleX(-1);pointer-events:none}
.why .in{position:relative;display:flex;flex-direction:row-reverse;width:min(1800px,100%);margin-inline:auto}
.why .txt{flex:0 0 45.45%;min-width:0;display:flex;flex-direction:column;justify-content:center}
.why .tx{width:min(550px,100%)}
.why .pic{flex:0 0 54.55%;min-width:0;position:relative;z-index:2;padding-left:50px}
.why .pic .house{display:block;width:calc(100% + 310px);max-width:none;margin:-135px -50px 0 -260px;border-radius:15px 0 0 15px;filter:brightness(.8)}
.why .couple{position:absolute;top:55%;right:36%;width:350px;max-width:100%;z-index:1;transform:translate3d(0,var(--py,0px),0)} /* --py: scroll drift (main.js) */
.why .couple::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:60%;background:linear-gradient(to top,#fff,rgba(255,255,255,0))}
.why .couple img{width:100%}
.why .h2{font-size:35px;line-height:1.2;letter-spacing:-.2px;text-transform:capitalize;padding-bottom:10px;margin-bottom:20px;color:var(--ink)}
.why ul{list-style:none;padding:0 0 20px;margin:0;display:grid;gap:10px}
.why li{display:flex;align-items:center;gap:0;background:var(--navy);color:#fff;border-radius:10px;padding:15px;font-family:var(--f-head);font-weight:600;font-size:20px;line-height:1.5}
.why li svg{width:25px;height:25px;flex:none;color:#fff;margin-right:12px}
@media (max-width:1024px){
  .why{margin-top:-10px;padding:75px}
  .why .in{flex-direction:column}
  .why .txt{flex:none;align-items:center}
  .why .tx{width:min(800px,100%);display:flex;flex-direction:column;align-items:center}
  .why .h2{text-align:center}
  .why ul{width:max-content;max-width:100%}
  .why .pic{flex:none;padding:0;z-index:0}
  .why .pic .house{width:calc(100% + 217px);margin:-48px -113px 150px -104px}
  .why .couple{top:51%;right:8%;width:81%;max-width:81%}
}
@media (max-width:767px){
  .why{padding:60px 10px 0}
  .why .h2{font-size:26px}
  .why li{font-size:14px;letter-spacing:-.4px}
  .why li svg{width:15px;height:15px;margin-right:10px}
  .why .pic .house{width:calc(100% + 94px);margin:0 -54px 75px -40px}
  .why .couple{top:49%;right:-3%;width:100%;max-width:100%}
  .why .couple img{width:146px;margin-inline:auto}
}

/* guarantee band (live 922673c / 95900d3): photo under a navy 80% overlay, 900px content, padding 100 (tablet 75,
   phone 80/20), global heading 6983 (59 / 41 / 19px, capitalised), 20px gaps; torn-brush edges from the markup */
.guar{position:relative;background:var(--navy) var(--bg) center/cover no-repeat;color:#fff;text-align:center;padding:100px 20px}
.guar::before{content:"";position:absolute;inset:0;background:var(--navy);opacity:.8}
.guar .in{position:relative;z-index:1;max-width:900px;margin-inline:auto}
.guar .k{font-family:var(--f-head);font-weight:600;font-size:18px;color:var(--ice)}
.guar .h{font-family:var(--f-head);font-weight:800;font-size:59px;line-height:1.2;text-transform:capitalize;margin:16px auto 20px;max-width:900px}
@media (max-width:1024px){.guar{padding:75px}.guar .h{font-size:41px}}
@media (max-width:767px){.guar{padding:80px 20px;background-image:var(--bg-m,var(--bg))}.guar .k{font-size:16px;line-height:1.4}.guar .h{font-size:19px;margin:12px auto 20px}}
@media (max-width:767px){.pg-services_window-cleaning .guar .h{font-size:28px;line-height:1.2}.pg-services_commercial-power-washing .faq .h2{font-size:26px}.faq summary{padding-right:31px}}

/* steps 'Working With Us Is Easy As 1-2-3' (live b4b0207 + 93e8fed; the same widgets on every page): kicker and the
   59px heading (40px under it), then three steps in a 1200px row with 10px gaps: the Lottie icon in a 105px pale-blue
   tile (shadow, raised 16px), 24px Montserrat title, 16px Roboto text, joined on desktop by 5px dotted navy connectors
   50px down, running from 70% to 130% of each step. Home and the service pages have no cards; the ice pages (about,
   FAQ, gallery, service area, services) put each step on a white 20px-radius card with the tile straddling its top. */
.steps{padding:100px 0 110px;text-align:center}
.steps .wrap-n{width:min(1200px,100% - 20px)}
.steps .h2{margin:20px auto 80px}
/* margin-bottom: the 20px container gap + the button container's default 10px padding (also under the button) */
.steps .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;padding-bottom:25px;margin-bottom:30px}
.step{position:relative;display:flex;flex-direction:column;align-items:center;border-radius:10px;padding:10px}
/* tile: 105 x 98px with the 70px Lottie 16px from its top, as measured on the live pages (93px on tablets/phones) */
.step .ic{position:relative;z-index:1;flex:none;width:105px;height:98px;margin:-16px 0 36px;padding:16px 17px 12px;border-radius:10px;background:var(--ice);box-shadow:0 5px 15px rgba(4,21,98,.25);display:grid;place-items:center;color:var(--navy)}
.step .ic svg{width:70px;height:70px;stroke:var(--navy);fill:none;stroke-width:1.6}
.step h3{font-family:var(--f-head);font-weight:700;font-size:24px;line-height:1.5;color:var(--ink);margin:0 0 5px;padding:0 20px}
.step p{font-family:var(--f-body);font-size:16px;line-height:1.4;color:#000;padding:0 20px}
.step:not(:last-child)::after{content:"";position:absolute;z-index:0;top:50px;right:-30%;width:60%;border-top:5px dotted var(--navy);transform:translateY(-50%)}
.steps-ice .step{background:#fff;border-radius:20px;box-shadow:0 0 20px rgba(0,0,0,.12);margin:10px;padding:0 5px 35px}
@media (max-width:1024px){
  .steps{padding:75px 75px 85px}
  .steps .wrap-n{width:100%}
  .steps .h2{margin:20px auto 40px}
  .steps .row{grid-template-columns:minmax(0,1fr);padding-bottom:25px}
  .step{padding:20px}
  .step:not(:last-child)::after{display:none}
  .step .ic{height:93px;margin:0 0 21px;padding:12px 14px 11px 17px}
  .step h3{padding:10px 20px 0}
  .step p{font-size:17px;padding:0 20px 20px}
  .steps-ice .step{padding:35px 20px 20px}
}
@media (max-width:767px){
  .steps{padding:60px 10px 70px}
  .step{padding:0 0 20px}
  .step .ic{padding:12px 17px 11px}
  .step h3{padding:0 15px}
  .step p{font-size:16px;line-height:1.3;padding:0 15px 20px}
  .steps:not(.steps-ice) .step:last-child{padding-bottom:0}
  .steps-ice .step{margin:5px;padding:30px 0 20px}
}
/* commercial: no before/after section follows its steps; live leaves 174px (164px on phones) from the button to the
   map block's edge */
@media (min-width:1025px){.pg-services_commercial-power-washing .steps{padding-bottom:142px}}
/* (and its phone step text wraps in a 320px column, as live) */
@media (max-width:767px){.pg-services_commercial-power-washing .steps{padding-bottom:129px}.pg-services_commercial-power-washing .step p{padding-inline:25px}}
/* About / FAQ / Gallery / Service Area / Services (live 0b427b3 + 9e8501f + b8733fe and twins): ice section under a
   20px white torn-brush edge, near-black heading, the cards in a further 10px-padded 1200px box (75px on tablets),
   the dotted connectors drawn over the next card up to its tile (z-index 1, as live); the section ends 40px under
   the button container on desktop, 75 + 25px on tablets, 60 + 20px on phones. */
.steps.steps-ice{position:relative;background:var(--ice);padding:100px 0 50px}
.steps-ice .h2{color:var(--ink)}
.steps-ice .row{padding-inline:10px}
.steps-ice .step:not(:last-child)::after{z-index:1}
@media (max-width:1024px){.steps.steps-ice{padding:100px 75px 110px}.steps-ice .row{padding-inline:75px}}
@media (max-width:767px){.steps.steps-ice{padding:70px 10px 90px}.steps-ice .row{padding-inline:10px}}

/* before/after */
.ba{position:relative;border:5px solid #fff;border-radius:20px;box-shadow:0 10px 35px rgba(0,52,86,.15);overflow:hidden;aspect-ratio:3/2;user-select:none;background:#dde}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--p,50%))}
.ba .lbl{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--f-label);font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:var(--navy);border:2px solid #fff;border-radius:10px;padding:5px 10px;z-index:3;pointer-events:none}
.ba .lbl.b{left:20px}.ba .lbl.a{right:20px}
.ba .hd{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;background:var(--ice);transform:translateX(-50%);z-index:3;pointer-events:none}
.ba .hd::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:var(--navy);border:2px solid var(--ice);transform:translate(-50%,-50%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EFFAFF'%3E%3Cpath d='M8 7l-5 5 5 5V7zm8 0v10l5-5-5-5z'/%3E%3C/svg%3E");background-size:24px;background-repeat:no-repeat;background-position:center}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none;touch-action:pan-y}
/* keyboard focus on the (invisible) range input: a dark-blue ring round the comparison (5.6:1 on white, 5.3:1 on ice;
   drawn inside the white frame where a carousel would clip it) and a yellow halo on the handle (WCAG 2.4.7) */
.ba:has(input:focus-visible){outline:3px solid var(--blue-text);outline-offset:3px}
.carwrap .ba:has(input:focus-visible){outline-offset:-4px}
.ba:has(input:focus-visible) .hd::after{box-shadow:0 0 0 3px var(--yellow),0 0 0 5px var(--navy)}
.results .car .sl:has(input:focus-visible){opacity:1}
.results{padding:90px 0}
.results.ice{background:var(--ice)} /* live 631b1c8 / 871e7d2 are ice; the map block's top brush edge is drawn in this colour */
.results .h2{text-align:center;font-size:var(--res-fs,52px);margin-bottom:40px;color:var(--ink)}
.results .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-bottom:40px;max-width:1200px;margin-inline:auto}
.results .c{text-align:center}
@media (max-width:1024px){.results .h2{font-size:var(--res-fs-t,52px)}.results .grid3{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
@media (max-width:767px){.results .h2{font-size:var(--res-fs-m,29px)}}
/* Service-page before/after section (live 871e7d2 > a338451 > e24e918 heading box / c918558 grid / button, the same on
   pressure, house, roof and window): 100px padding (house washing 40px on top), the heading in a 10px-padded box with
   20px under it and 20px gaps between heading box, grid and button; the grid is 1300px with three 20px-apart cards
   (window: two in 1000px) whose photo keeps 3:2 inside the 5px frame (420 x 283 at 1440). Tablets: 75px / 50px
   padding (house 30px on top), one card per row in a further 50px each side (window two per row, no inset). Phones:
   50px on top (roof and window 60px), 60px under, 10px sides, no heading box padding. Tags and handle as /gallery. */
[class*="pg-services_"] .results{padding:100px 0}
.pg-services_house-washing .results{padding-top:40px}
[class*="pg-services_"] .results .h2{margin:10px 0 50px}
[class*="pg-services_"] .results .grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1300px;margin-bottom:20px}
.pg-services_window-cleaning .results .grid3{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px}
/* the 3:2 is the photo inside the 5px frame (live 560 x 377 tiles on /gallery, 420 x 283 on the service pages) */
.results .grid3 .ba,.gal .ba{box-sizing:content-box}
@media (max-width:1024px){
  [class*="pg-services_"] .results{padding:75px 0}
  .pg-services_house-washing .results{padding-top:30px}
  [class*="pg-services_"] .results .wrap{width:calc(100% - 100px)}
  [class*="pg-services_"] .results .grid3{grid-template-columns:minmax(0,1fr);max-width:none;padding-inline:50px}
  .pg-services_window-cleaning .results .grid3{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:0}
}
@media (max-width:767px){
  [class*="pg-services_"] .results{padding:50px 0 60px}
  :is(.pg-services_roof-cleaning,.pg-services_window-cleaning) .results{padding-top:60px}
  [class*="pg-services_"] .results .wrap{width:calc(100% - 20px)}
  [class*="pg-services_"] .results .h2{margin:0 0 40px}
  [class*="pg-services_"] .results .grid3,.pg-services_window-cleaning .results .grid3{grid-template-columns:minmax(0,1fr);padding-inline:0}
}
/* /gallery (live grid container 1cc2f50 + Premium image comparisons): a 1140px two-column grid (two columns on
   tablets too, one on phones) with 20px gaps, 45px under the hero (padding 50 / margin -5; tablet 30/-4, phone
   25/-5) and 100 / 75 / 55px above the steps; bold 15px (13px phones) uppercase tags in navy pills with a 2px white
   border, 10px in from the edges; 1px divider with a 42px handle. The live capture renders the tags in Arial bold
   (its Poppins file never loaded), so that is the face used here. */
.sec.gal{padding:0}
.gal .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:min(1140px,100%);margin:-5px auto 100px;padding-top:50px}
/* (the service-page grids use the same Premium label and handle settings: b03096b / 899801f / 2e5895b) */
.gal .ba .lbl,.results .grid3 .ba .lbl{font:700 15px/1.15 Arial,Helvetica,sans-serif;letter-spacing:.5px;padding:5px 20px;border-width:2px;border-radius:10px;box-shadow:0 5px 10px rgba(0,52,86,.2);text-shadow:0 0 10px rgba(0,0,0,.3)}
.gal .ba .lbl.a,.results .grid3 .ba .lbl.a{box-shadow:0 0 10px rgba(0,52,86,.2)}
.gal .ba .lbl.b,.results .grid3 .ba .lbl.b{left:10px}.gal .ba .lbl.a,.results .grid3 .ba .lbl.a{right:10px}
.gal .ba .hd,.results .grid3 .ba .hd{width:1px}
.gal .ba .hd::after,.results .grid3 .ba .hd::after{width:42px;height:42px}
.results .grid3 .ba .lbl{top:calc(50% - 6.5px)} /* live the tags sit 6-7px above the card centre (the handle is centred) */
@media (max-width:767px){.results .grid3 .ba .lbl{font-size:13px;padding:5px}}
@media (max-width:1024px){.gal .grid{margin:-4px auto 75px;padding:30px 50px 0}}
@media (max-width:767px){.gal .grid{grid-template-columns:minmax(0,1fr);margin:-5px auto 35px;padding:25px 20px 20px}.gal .ba .lbl{font-size:13px;padding:5px}}

/* map cta (live a01991b / 3eb26eb): map 52% | navy panel (padding 70/50/50, 600px heading column, 20px gaps) with the
   yellow swoosh (Group-9042, bottom right, 250% wide); the truck (global 2446: margin 40 0 -55 -130, so 130px wider
   than the column) overlaps into the map. Tablet/phone: panel above a 500 / 300px map. */
.mapcta{position:relative;display:flex;align-items:stretch;background:var(--navy)}
.mapcta .map{order:-1;flex:0 0 52%;min-height:50px;background:var(--map) center/cover no-repeat}
.mapcta .txt{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;padding:70px 50px 50px;background:var(--navy) var(--img-group) right bottom/250% auto no-repeat;color:#fff;text-align:center}
.mapcta .tw{display:flex;flex-direction:column;align-items:center;gap:20px;width:min(600px,100%);margin-inline:auto}
.mapcta .h{font-family:var(--f-head);font-weight:800;font-size:var(--map-fs,41px);line-height:1.2;color:#fff}
.pg-services_pressure-washing{--map-fs-m:20px}.pg-services_house-washing,.pg-services_roof-cleaning{--map-fs-m:23px}
.mapcta .truck{position:relative;z-index:3;align-self:flex-start;width:calc(100% + 130px);max-width:900px;margin:40px 0 -55px -130px}
/* the van slides in from the right as it comes into view (main.js adds .pre / .slide; skipped with reduced motion);
   the section clips it sideways so it never widens the page, while it still hangs over the edge below */
.mapcta{overflow-x:clip}
.mapcta .truck.pre{visibility:hidden}
.mapcta .truck.slide{animation:h2o-slide-in-right 1.25s both}
@media (prefers-reduced-motion:reduce){.mapcta .truck.slide{animation:none}}
@media (max-width:1024px){
  .mapcta{flex-direction:column}
  .mapcta .map{order:0;flex:none;height:500px}
  .mapcta .txt{padding:80px 50px 50px}
  .mapcta .tw{width:min(800px,100%)}
  .mapcta .h{font-size:var(--map-fs-t,44px)}
  .mapcta .truck{width:calc(100% + 40px);margin:55px -20px -64px}
}
@media (max-width:767px){
  .mapcta .map{height:300px;background-image:var(--map-m,var(--map))}
  .mapcta .txt{padding:60px 20px 0}
  .mapcta .tw{width:min(300px,100%)}
  .mapcta .h{font-size:var(--map-fs-m,21px);line-height:1.4}
  .mapcta .truck{width:calc(100% + 20px);margin:35px -10px -7px}
}

/* faq */
.faq{padding:90px 0;background:linear-gradient(180deg,#fff 0%,var(--ice) 100%);position:relative}
.faq .h2{text-align:center;font-size:var(--faq-fs,45px);text-transform:capitalize;margin-bottom:30px}
.faq .list{max-width:760px;margin-inline:auto;display:grid;gap:15px}
.faq details{border-radius:5px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;background:var(--blue-text);color:var(--ice);font-family:var(--f-head);font-weight:600;font-size:18px;line-height:1.4;text-transform:capitalize;padding:16px 50px 16px 30px;border-radius:5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{display:block;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;border-right:3px solid var(--ice);border-bottom:3px solid var(--ice);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{background:#fff;border-radius:5px;margin-top:12px;padding:26px 25px 18px;font-family:var(--f-body);font-size:16px;line-height:1.5;color:#000}
.faq .grp{font-family:var(--f-head);font-weight:800;font-size:30px;line-height:1.2;text-transform:capitalize;color:var(--navy);text-align:left;max-width:760px;margin:40px auto 24px}
@media (max-width:1024px){.faq .h2{font-size:var(--faq-fs-t,40px)}.faq summary{font-size:16px;padding:14px 44px 14px 15px}.faq .ans{font-size:15px;padding:15px}}
@media (max-width:767px){.faq .h2{font-size:21px}.faq .grp{font-size:21px}}
/* /faq groups (live container 8eac545, toggles dd200f4 / d9647ee): white, pulled 10px up under the hero, padding
   60/10/100 (25/75/75 tablets, 40/20/60 phones) around a 900px column; 30px (21px phones) navy group headings on its
   left edge, 20px above and below; brand-blue bars (live #0078E8, here the darker #0066CC for AA contrast: white text 5.6:1, not 4.3:1) 66px tall (14/30/20 padding round the old h3's 28px
   strut) 16px apart, white 18px Montserrat text, a bold chevron 28px down the bar 30px from its right edge (angle-up
   when open); the answer on a white card 20px under its bar. */
.faq.faqg{background:#fff;margin-top:-10px;padding:60px 10px 100px}
.faqg .wrap{width:min(900px,100%)}
.faqg .grp{font-size:30px;line-height:1.2;max-width:none;margin:20px 0}
.faqg .grp:first-child{margin-top:0}
.faqg .list{max-width:none;gap:16px}
.faqg summary{background:var(--blue-text);color:#fff;font-size:18px;line-height:32px;padding:17px 64px 17px 30px}
.faqg summary::after{right:29px;top:21px;width:20px;height:13px;border:0;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M2.4 2.6 9 9.2l6.6-6.6' fill='none' stroke='%23fff' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.faqg details[open] summary::after{transform:rotate(180deg)}
.faq summary:focus-visible,.faqg summary:focus-visible,.faq1 summary:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.faqg .ans{margin-top:20px;padding:30px 25px 15px;font-size:16px;line-height:1.5;letter-spacing:-.1px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
@media (max-width:1024px){
  .faq.faqg{padding:25px 75px 75px}
  .faqg .grp{font-size:30px}
  .faqg summary{font-size:18px;line-height:31px;padding:15px 50px 15px 15px}
  .faqg summary::after{right:15px;top:23px}
  .faqg details[open] summary::after{transform:rotate(180deg)}
  .faqg .ans{padding:30px 25px 15px;font-size:16px}
}
@media (max-width:767px){
  .faq.faqg{padding:40px 20px 60px}
  .faqg .grp{font-size:21px}
  /* live 15px side padding and a 1em (16px) chevron floated right: a 304px text box ('What About Insurance And
     Safety?' on one line) */
  .faqg summary{font-size:16px;line-height:28px;padding:10px 31px 8px 15px}
  .faqg summary::after{top:14px;right:15px;width:16px;height:10.4px}
  .faqg .ans{padding:15px;font-size:15px}
}
/* single FAQ block (home + service pages): 700px column, 150px above the heading (100 + 50), 15px between items,
   bars padded 14/30/20 (15 on tablets, 5/15/15 on phones), answers on white cards 20px under their bar; the yellow
   Frame-4 wave at 10% (mirrored, 150% x 50%) behind the upper part. Bars keep the darker brand blue (AA contrast). */
.faq1{overflow:hidden;padding:150px 0 100px}
.faq1::before{content:"";position:absolute;left:0;top:0;width:100%;height:50vw;background:var(--img-frame4) center/150% 50% no-repeat;opacity:.1;transform:scaleX(-1);pointer-events:none}
.faq1 .wrap{position:relative;width:min(700px,100% - 40px)}
.faq1 .h2{padding-bottom:20px;margin-bottom:20px}
/* bars 66px tall 16px apart (the text on the toggle's 32px line, 16px down); the live Font Awesome solid angle-down
   (angle-up when open), 18 x 12px, 30px from the right edge and level with the top of the first line of text */
.faq1 .list{max-width:none;gap:16px}
.faq1 summary{min-height:66px;line-height:32px;padding:16px 50px 18px 30px}
.faq1 summary::after{right:30px;top:21px;width:18px;height:12px;border:0;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 152 320 208'%3E%3Cpath fill='%23EFFAFF' d='M143 352.3 7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.faq1 details[open] summary::after{transform:rotate(180deg)}
.faq1 .ans{margin-top:20px;padding:30px 25px 15px;letter-spacing:-.1px}
@media (max-width:1024px){.faq1{padding:75px}.faq1 .wrap{width:100%}.faq1 summary{min-height:0;line-height:1.4;padding:15px 45px 15px 15px}.faq1 summary::after{right:20px;top:50%;transform:translateY(-50%)}.faq1 details[open] summary::after{transform:translateY(-50%) rotate(180deg)}}
/* phones: 10px above and below the 28px lines (single 48px, double 76px bars), the 19 x 12px chevron 14px from the
   right and 13px down */
@media (max-width:767px){.faq1{padding:60px 20px}.faq1 summary{font-size:16px;line-height:28px;padding:10px 45px 10px 15px}.faq1 summary::after{right:14px;top:13px;width:19px;transform:none}.faq1 details[open] summary::after{transform:rotate(180deg)}.faq1 .ans{font-size:15px;padding:15px}}

/* cta band (live ac39858 / 00f007a and twins): a 1000px row 100vh tall under 75px of top padding (75px sides on
   tablets; phones no padding, pulled 10px up), the heading and button centred in it */
.cta{position:relative;overflow:hidden;min-height:calc(100vh + 75px);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:var(--navy) var(--bg) center/cover no-repeat;padding:75px 10px 0}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--navy60) 20%,var(--navy) 100%)}
/* the yellow + navy wave (old custom CSS: the overlay::before, 100% x 20% at the top; 120% wide on tablets, cut at the right) */
.cta .wave{position:absolute;left:0;top:-1px;width:100%;height:20%;background:var(--img-divider) center/100% 100% no-repeat;pointer-events:none}
.cta .in{position:relative}
.cta .h{font-family:var(--f-head);font-weight:800;font-size:74px;line-height:1.2;text-transform:capitalize;max-width:1000px;margin:0 auto 20px} /* the live container's 20px gap to the button */
@media (max-width:1024px){.cta{padding:75px 75px 0}.cta .wave{width:120%}.cta .h{font-size:47px}}
@media (max-width:767px){.cta{min-height:100vh;margin-top:-10px;padding:0 10px;background-image:var(--bg-m,var(--bg))}.cta .wave{width:100%}.cta .h{font-size:25px;line-height:1.3}}
/* /service-area only (its own custom CSS, live): the phone wave drawn 150% wide, so only its left two-thirds show (one
   broad hump sloping off to the right); every other page keeps the 100% wave on phones, as live */
@media (max-width:767px){.pg-service-area .cta .wave{width:150%}}

/* service page: intro + video */
/* text column 603px | 650px blob frame at 1300px: the live 60% (padding-right 70px) and 55% flex columns shrunk
   into the 1300px row with a 20px gap give a 603px text box (window heading on two lines, 'life's hectic' on line
   1); the frame box starts 27px above the section (its artwork 57px lower), bottom padding to the Benefits brush
   edge as live: the kicker 601-611px and the frame's lower arc about 97px above it (the roof row, whose longer text
   sets its height live, ends 11px lower) */
.sintro{padding:0 0 101px}
@media (min-width:1025px){.pg-services_roof-cleaning .sintro{padding-bottom:112px}}
.sintro .in{display:grid;grid-template-columns:minmax(0,603fr) minmax(0,650fr);column-gap:3.6154%;align-items:center}
.sintro .blob{margin:-27px 0 -66px auto} /* negative bottom margin: the text sits ~20px above the frame centre, as live */
.sintro .h2{margin:15px 0 21px} /* kicker, heading and text 20px-gap widgets live: 41px / 91px glyph to glyph at 1440 */
.sintro .ctaw{margin-top:24px}
@media (max-width:1024px){.sintro{padding-bottom:40px}.sintro .in{grid-template-columns:minmax(0,1fr)}.sintro .blob{margin:45px auto 0}}
/* phones: the frame 59px under the button, the Benefits edge 47px under the frame (26px under a masked photo's frame:
   live the photo widget, not the taller frame icon, sets the column height), measured on the five pages */
@media (max-width:767px){.sintro{padding-bottom:15px}.sintro .blob{margin:31px -15px 0}.sintro .blob-img{margin-bottom:-21px}}

/* ---------- blob-framed photos (old Elementor mask Vector-1.svg + 650x650 brush-stroke frame icon) ----------
   The frame is drawn at up to 650px (its own size); the photo/video box sits on the inner blob, as measured on the
   live pages (desktop: 11.6% / 8% / 76.2% x 74.8% of the frame; phones fill the inner blob exactly). */
.blob{position:relative;width:min(650px,100%);aspect-ratio:1;margin-inline:auto;background:var(--frame) center/100% 100% no-repeat;--bx:11.6%;--by:8%;--bw:76.2%;--bh:74.8%}
.blob-a{--frame:url(/assets/img/blob-frame-a.svg)}
.blob-a2{--frame:url(/assets/img/blob-frame-a2.svg)}
.blob-b{--frame:url(/assets/img/blob-frame-b.svg)}
.blob .bm{position:absolute;left:var(--bx);top:var(--by);width:var(--bw);height:var(--bh);background:var(--navy);-webkit-mask:url(/assets/img/blob-mask.svg) center/100% 100% no-repeat;mask:url(/assets/img/blob-mask.svg) center/100% 100% no-repeat}
.pic .blob .bm img,.blob .bm img,.blob .bm video{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none}
@media (max-width:767px){.blob{width:calc(100% + 30px);margin-inline:-15px;--bx:10.3%;--by:6.6%;--bw:79.1%;--bh:77.7%}}
/* phones, masked photos (window / commercial intro, every Why Choose): live the photo sits inside the frame's inner
   ring (measured on window and roof: about 282 x 276 of the 380px frame, 50px in and 28px down), not on it */
@media (max-width:767px){:is(.sintro,.whyc) .blob-img{--bx:13.2%;--by:7.4%;--bw:74.1%;--bh:72.6%}}
/* pause / play for the control-less intro video (WCAG 2.2.2; live had no control): a small 30px see-through button
   in the lower right of the video, shown on hover or focus, and kept faintly visible on touch screens */
.blob .vtog{position:absolute;z-index:2;left:calc(var(--bx) + var(--bw) * .78 - 15px);top:calc(var(--by) + var(--bh) * .74 - 15px);width:30px;height:30px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(11,24,61,.5);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s}
.blob:hover .vtog,.blob .vtog:focus-visible,.blob .vtog.paused{opacity:1}
.blob .vtog:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.vtog svg{width:14px;height:14px;fill:currentColor}
.vtog .i-play,.vtog.paused .i-pause{display:none}
.vtog.paused .i-play{display:block}
@media (hover:none){.blob .vtog{opacity:.75}}
@media (prefers-reduced-motion:reduce){.blob .vtog{transition:none}}

/* ---------- section edges: the old Elementor shape dividers (wave-brush, waves) ----------
   A mask of the live SVG path stretched to --mw of the width (200%, phones 300% where live sets it) and centred, as
   Elementor's calc(200% + 1.3px) svg; the colour is the neighbouring section's. Bottom brush and top waves are
   rotated 180deg (Elementor data-negative rules); f = mirrored (rotateY). */
.shp{position:absolute;left:0;width:100%;height:var(--h,20px);z-index:2;pointer-events:none;background:var(--c,#fff);-webkit-mask:var(--m) center/var(--mw,200%) 100% no-repeat;mask:var(--m) center/var(--mw,200%) 100% no-repeat}
.shp.brush{--m:url(/assets/img/shape-brush.svg)}
.shp.waves{--m:url(/assets/img/shape-waves.svg);--h:40px}
.shp.t{top:-1px}
.shp.b{bottom:-1px}
.shp.brush.b,.shp.waves.t{transform:rotate(180deg)}
.shp.brush.t.f{transform:scaleX(-1)}
.ben>.shp.t{--h:30px}
.svc-band>.shp.t{--h:30px;--c:var(--ice)}
.guar>.shp.t{--c:var(--ice)}
.mapcta>.shp.t{--h:10px;--c:var(--ice)}
.mapcta>.shp.t.on-w{--c:#fff}
@media (max-width:767px){.svc-band>.shp,.guar>.shp,.mapcta>.shp{--mw:300%}}

/* benefits (live 5eb5a80 and its twins): navy band, padding 110/250, the Frame-4-1-1 navy + yellow wave (ice below
   it) along the bottom at full width. Desktop: Elementor vertical tabs 9f3c5b6 - a white 10px-radius panel starting
   155px into the 1300px column (widget margin 80 + padding 75), the white tab list (30% of the panel, 50px from its
   top and bottom, shadow) hanging 75px over its left edge; 18px Montserrat tabs, 20/25px padding, 2.2 line height,
   active and hover brand blue (live #0078E7; here #0066CC so the white text reaches 5.6:1) with no marker; the pane text from 28% of
   the widget + 20px, 46px down, ending 95px short of the panel's right edge, a 25px (28px on house/roof/commercial)
   #041562 sub-heading over 17px Roboto. Tablets/phones: the accordion 80cde61 - white 5px-radius bars 13px apart
   (60px tall on phones), caret icons in a 40px column (blue down, white up on the open bar), the open bar bright
   blue, its text in a white box below; no sub-heading, as live. */
.ben{background:var(--navy);color:#fff;padding:110px 0 250px;margin-bottom:-1px;position:relative;overflow:hidden}
.ben::before{content:"";position:absolute;inset:0;background:var(--img-frame41) center bottom/100% auto no-repeat;pointer-events:none}
.ben .in{position:relative;width:min(1300px,100% - 20px)}
.ben .h2{text-align:center;font-size:50px;line-height:1.3;text-transform:capitalize;color:#fff;max-width:70%;margin:0 auto;padding-bottom:40px}
.tabs{position:relative;display:flex;align-items:flex-start;margin:20px 0 20px 155px;background:#fff;border-radius:10px;color:var(--ink)}
.tabs .tl{position:relative;z-index:1;flex:none;width:30%;margin:50px 0 50px -75px;background:#fff;border-radius:10px;box-shadow:0 20px 47.43px 3.57px rgba(1,1,1,.21);overflow:hidden}
.tabs .tl button{display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #dfdfdf;font-family:var(--f-head);font-weight:600;font-size:18px;line-height:2.2;padding:20px 25px;color:var(--navy);cursor:pointer;transition:background-color .3s ease-in-out,color .3s ease-in-out}
.tabs .tl button:hover,.tabs .tl button.on{background:var(--blue-text);color:#fff}
.tabs .tl button:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.tabs .tc{flex:1 1 0;min-width:0;margin-left:calc(116px - 2%);padding:46px 95px 40px 0}
.tabs .ah{display:none}
.tabs .pane{display:none;font-family:var(--f-body);font-size:17px;line-height:1.5;color:var(--ink)}
.tabs .pane.on{display:block}
.tabs .pane:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
.tabs .pane h3{font-family:var(--f-head);font-weight:600;font-size:var(--ben-h3,25px);line-height:1.5;letter-spacing:-1px;text-transform:capitalize;color:#041562;margin-bottom:10px}
.pg-services_house-washing,.pg-services_roof-cleaning,.pg-services_commercial-power-washing{--ben-h3:28px}
.tabs .pane .prose,.tabs .pane>p{font-size:inherit;line-height:inherit;letter-spacing:0;color:inherit}
@media (prefers-reduced-motion:reduce){.tabs .tl button{transition:none}}
@media (max-width:1024px){
  .ben{padding:75px 75px 120px}
  .ben .in{width:100%}
  .ben .h2{font-size:38px;max-width:none;padding-bottom:40px}
  .tabs{display:block;margin:0;background:none;border-radius:0;color:inherit}
  .tabs .tl{display:none}
  .tabs .tc{margin:0;padding:0}
  .tabs .ah{display:block;margin:0 0 13px}
  .tabs .ah button{display:flex;align-items:center;gap:15px;width:100%;min-height:68px;padding:20px;border:0;border-radius:5px;background:#fff;box-shadow:0 3px 15px -10px #112750;color:var(--navy);font-family:var(--f-head);font-weight:600;font-size:20px;line-height:1.4;text-align:left;text-transform:capitalize;cursor:pointer}
  .tabs .ah button[aria-expanded="true"]{background:var(--blue-text);color:#fff}
  .tabs .ah button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
  .tabs .ah .car{flex:none;width:40px;display:grid;place-items:center}
  .tabs .ah .car::before{content:"";border-top:9px solid var(--blue);border-left:7px solid transparent;border-right:7px solid transparent}
  .tabs .ah button[aria-expanded="true"] .car::before{border-top:0;border-bottom:9px solid #fff}
  .tabs .pane{display:block;background:#fff;margin:0 0 15px;padding:20px 30px 24px;font-size:17px}
  .tabs.js .pane:not(.open){display:none}
  .tabs .pane h3{display:none}
}
@media (max-width:767px){
  .ben{padding:80px 20px}
  .ben .h2{font-size:20px;padding-bottom:30px}
  .tabs .ah button{gap:10px;min-height:60px;padding:0 10px;font-size:16px;line-height:1.2}
  .tabs .pane{padding:25px 20px 24px;font-size:15px;line-height:1.4}
}

/* why choose / about / area / rows */
.split{padding:90px 0}
.split .in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split .pic img{border-radius:15px;box-shadow:10px 10px 45px rgba(0,0,0,.2);width:100%}
.split .h2{margin-bottom:18px}
.split.rev .pic{order:2}
.split .ctaw{margin-top:24px}
@media (max-width:1024px){.split .in{grid-template-columns:1fr}.split.rev .pic{order:0}}
/* Why Choose (live 78ed985 on the service pages): blob frame on the left reaching 35px past the 1300px column,
   text from 758px; tablets and phones put the text first (column-reverse live) */
.split.whyc{padding:35px 0 94px}
.whyc .in{grid-template-columns:minmax(0,47fr) minmax(0,47fr);column-gap:6%}
.whyc .pic{order:-1}
/* the frame reaches 5.73% of the column left of the 1300px row, but never past the window edge: between about
   1025 and 1370px the 20px gutter is narrower than that, and the frame would be cut off (as it was live) */
.whyc .blob{width:min(650px,105.73%);margin:0 0 -50px max(-5.73%,(min(var(--wrap),100vw - 40px) - 100vw) / 2)}
/* desktop: the live heading and frame sit 42px higher in the band (heading 159-203px under the Benefits wave line on
   the five pages) and the band ends 736px under that line, so the row is pulled 42px up (its top 51px is the frame's
   transparent margin) and the band closes 90px under it */
@media (min-width:1025px){.split.whyc{padding-bottom:90px}.whyc .in{margin-top:-42px}}
@media (max-width:1024px){.split.whyc{padding:60px 0 30px}.whyc .in{grid-template-columns:minmax(0,1fr);gap:0}.whyc .pic{order:0}.whyc .blob{margin:40px auto 0}}
/* phones: heading 86px under the wave line and the frame 25px under the text, as live */
@media (max-width:767px){.split.whyc{padding:56px 0 12px}.whyc .blob{width:calc(100% + 30px);margin:25px -15px 0}}
/* /services rows (live 1d1388f, 78ed985, ab6665f, e36c9e4, e0599a4): text | framed photo, even rows reversed on ice
   bands between 40px white wave edges; per-row spacing measured on the live page */
.rband{position:relative}
.rband.ice{background:var(--ice)}
/* white rows: a 612px text column (live 60% with 60px right padding, shrunk into the 1300px row: text to x 682 at
   1440) beside the 650px frame; ice rows: two 611px columns 78px apart (the text box live is 612px too) */
.rows .row{display:grid;grid-template-columns:minmax(0,612fr) minmax(0,650fr);column-gap:2.923%;align-items:center}
.rband.ice .row{grid-template-columns:minmax(0,47fr) minmax(0,47fr);column-gap:6%}
.rband.ice .pic{order:-1}
.rows .blob{margin-right:0;--bx:6.3%;--by:8.3%;--bw:88%;--bh:85%}
.rband.ice .blob{width:min(650px,105.73%);margin:0 0 0 max(-5.73%,(min(var(--wrap),100vw - 40px) - 100vw) / 2)}
.rband:nth-child(1){padding:0 0 113px}.rband:nth-child(1) .blob{margin-top:-36px}
.rband:nth-child(2){padding:76px 0 118px}
.rband:nth-child(3){padding:39px 0 71px}
.rband:nth-child(4){padding:86px 0 124px}
.rband:nth-child(5){padding:51px 0 0}.rband:nth-child(5) .blob{margin-bottom:-13px}
/* Commercial row (build: imageBox 3:2): the photo's own 3:2 box with the mask contained, so the blob sits on the
   inner blob of the frame (the .blob defaults, about 495 x 486 at 650px; 300 x 295 on phones) as on live */
.rows .blob.blob-32{--bx:11.6%;--by:8%;--bw:76.2%;--bh:74.8%}
@media (max-width:767px){.rows .blob.blob-32{--bx:10.3%;--by:6.6%;--bw:79.1%;--bh:77.7%}}
/* live column gap 20px between heading, text and button; the text widget's last paragraph keeps .9rem of margin
   less its -10px widget margin, so the button sits 24-25px under the last line box */
.rows .row .h2{margin-bottom:20px}
.rows .row .ctaw{margin-top:25px}
@media (max-width:1024px){
  .rband.ice .row,.rows .row{grid-template-columns:minmax(0,1fr);column-gap:0}
  .rband.ice .pic{order:0}
  .rband:nth-child(n){padding:50px 0 40px}
  .rband.ice:nth-child(n){padding:90px 0 70px}
  .rband:nth-child(1){padding-top:0}
  .rows .blob,.rband.ice .blob,.rband:nth-child(n) .blob{margin:40px auto 0}
}
@media (max-width:767px){.rows .blob,.rband.ice .blob,.rband:nth-child(n) .blob{width:calc(100% + 30px);margin:30px -15px 0}}
/* /about block (live ffa04f5): white, pulled 10px up under the hero, padding 60/10 (50/75/75 tablets, 40/20/60
   phones); the text in a 600px box centred in the left half, 40px down, 100px of space under it; the photo from 20px
   into the right half, top-aligned, in a 5px white frame with 10px corners and a light shadow; near-black heading. */
.split.abt{position:relative;margin-top:-10px;padding:60px 10px}
.abt .wrap{width:min(1280px,100%)}
.abt .in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:start}
/* as measured live at 1440: the heading from x 110, the framed photo 752-1359 (404px tall) */
.abt .in>div:first-child{width:min(600px,100%);justify-self:center;margin-left:20px;padding:40px 0 100px}
.abt .h2{color:var(--ink)}
.abt .pic{padding-left:32px}
.abt .pic img{border:5px solid #fff;border-radius:10px;box-shadow:0 5px 10px rgba(0,52,86,.2)}
@media (max-width:1024px){
  .split.abt{padding:50px 75px 75px}
  .abt .in{grid-template-columns:minmax(0,1fr)}
  .abt .in>div:first-child{width:100%;margin-left:0;padding:0}
  .abt .pic{padding:30px 0 25px}
}
/* phones: text 46px under the heading's top and the photo 23px under the button, as live */
@media (max-width:767px){.split.abt{padding:40px 20px 60px}.abt .h2{margin-bottom:21px}.abt .pic{padding:20px 0 0}}
/* /service-area (live 94692c8): white, pulled 10px up under the hero, padding 60/10/100 (25/75/75, 40/20/60), 20px
   gaps; near-black 38 / 36 / 30px heading; the city line Roboto 20 / 17 / 16px in a 90% column with 40 / 20 / -10px
   under it; the map cropped to 500px (335px on phones) with 20px corners and no shadow. */
.area{position:relative;margin-top:-10px;padding:60px 10px 100px;background:#fff;text-align:center}
.area .wrap{width:min(1300px,100%)}
.area .h2{color:var(--ink);margin-bottom:20px}
.area .cities{font-family:var(--f-body);font-weight:400;font-size:20px;line-height:1.4;letter-spacing:.5px;color:var(--ink);max-width:90%;margin:0 auto 60px}
.area .cities p{margin:0}
.area img{width:100%;height:500px;object-fit:cover;object-position:center;border-radius:20px;box-shadow:none;margin-inline:auto}
@media (max-width:1024px){.area{padding:25px 75px 75px}.area .cities{font-size:17px;margin-bottom:40px}}
@media (max-width:767px){.area{padding:40px 20px 60px}.area .h2{margin-bottom:15px}.area .cities{font-size:16px;margin-bottom:24px}.area img{height:335px}}
/* privacy page (live container 226b87b4): padding 100 (75 tablets, 60/10 phones) round the 1140px text column */
.rich{padding:100px 0}
.rich .prose{max-width:var(--wrap-n);margin-inline:auto;font-size:16px;letter-spacing:0;line-height:1.5}
@media (max-width:1024px){.rich{padding:75px 0}.rich .wrap{width:calc(100% - 150px)}}
@media (max-width:767px){.rich{padding:60px 0}.rich .wrap{width:calc(100% - 20px)}}
.rich h2,.rich h3{font-family:var(--f-body);font-weight:500;line-height:1.2;color:var(--ink);margin:8px 0 16px}
.rich h2{font-size:32px}.rich h3{font-size:28px}

/* contact (canvas page; live section 981a4e8 + column 5a82e6b + form ce53191): bright blue to navy, the Frame-6
   sweep over it on desktop; an ice 820px card (20px corners, dark 20px glow, padding 50 / 40-30 / 28-17); the video
   in a 5px white frame with a 10px shadow, 20px margins. The form fields render in Arial on the live capture (its
   Barlow file never loaded): white 15px-corner inputs with grey placeholders, two columns on every screen; the
   services heading centred, each service name above a 150px tile with a 2px navy border; a 61px yellow Submit;
   the phone number and privacy link bold #041562. */
.contact{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 10px;background:linear-gradient(180deg,var(--blue) 0%,var(--navy) 100%);position:relative}
.contact::before{content:"";position:absolute;inset:0;background:var(--img-frame6) center/cover no-repeat;pointer-events:none}
.ccard{position:relative;z-index:1;width:min(820px,100%);background:var(--ice);border-radius:20px;box-shadow:0 0 20px rgba(0,0,0,.54);padding:50px;text-align:center}
.ccard .h{font-family:var(--f-head);font-weight:900;font-size:53px;line-height:1;color:var(--navy)}
.ccard .h em{font-style:normal;color:var(--blue)}
.ccard .vid{margin:40px 20px;border:5px solid #fff;border-radius:15px;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.5);background:#000}
.ccard .vid video{width:100%;aspect-ratio:16/9;object-fit:cover}
.cf{--f-form:Arial,Helvetica,sans-serif;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
.cf .full{grid-column:1/-1}
.cf input:not([type="checkbox"]){display:block;width:100%;min-height:47px;margin:0;border-radius:15px;border:1.5px solid rgba(91,102,108,.33);background:#fff;padding:6px 16px;font-family:var(--f-form);font-size:18px;font-weight:500;line-height:2;color:#000;box-shadow:none}
.cf input::placeholder{color:#757575;opacity:1}
.cf input:not([type="checkbox"]):focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,120,231,.35)}
.cf input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.cf fieldset{margin-top:0}
.cf .svcs{display:block;width:100%;text-align:center;font-family:var(--f-form);font-weight:600;font-size:22px;line-height:1.4;color:#000;margin:0 0 10px}
.cf .opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.cf .opt{position:relative;text-align:center}
.cf .opt input{position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}
.cf .opt label{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:center;font-family:var(--f-form);font-size:18px;font-weight:500;line-height:2;color:#000;text-align:center;cursor:pointer;margin:0}
.cf .opt img{width:150px;max-width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:20px;border-radius:20px;background:transparent;border:2px solid #041562;margin-bottom:11px;transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out}
.cf .opt input:checked+label img{border-color:#041562;background:linear-gradient(170deg,#3399FF 0%,#1a90d5 100%)}
.cf .opt input:focus-visible+label img{box-shadow:0 0 0 3px var(--ice),0 0 0 6px var(--blue)}
.cf button{grid-column:1/-1;margin-top:4px;border-radius:20px;background:var(--yellow);color:var(--navy);border:0;font-family:var(--f-form);font-weight:700;font-size:26px;line-height:1.5;letter-spacing:.5px;text-transform:capitalize;padding:11px 0;cursor:pointer;transition:background-color .3s,color .3s}
.cf button:hover,.cf button:focus-visible{background:var(--navy);color:#fff}
.cf button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.ccard .call{font-family:var(--f-alt);font-size:23px;line-height:1.5;color:var(--ink);margin-top:23px}
.ccard .call a,.ccard .priv a{color:#041562;font-weight:700;text-decoration:none}
.ccard .call a:hover,.ccard .call a:focus-visible,.ccard .priv a:hover,.ccard .priv a:focus-visible{text-decoration:underline}
.ccard .priv{font-family:var(--f-alt);font-size:16px;line-height:1.5;margin:9px 0 14px}
@media (prefers-reduced-motion:reduce){.cf .opt img,.cf button{transition:none}}
@media (max-width:1024px){
  .contact{padding:0 40px}
  .contact::before{content:none}
  .ccard{padding:40px 30px}
  .ccard .h{font-size:45px}
  .cf input:not([type="checkbox"]){font-size:15px;line-height:2.4;letter-spacing:-.5px}
  .cf .opt label{font-size:15px;line-height:2.4;letter-spacing:-.5px}
  .cf .opt img{margin-bottom:12px}
  .cf button{margin-top:10px}
  .ccard .call{font-size:24px}
}
@media (max-width:767px){
  .contact{padding:30px 15px}
  .ccard{padding:28px 17px}
  .ccard .h{font-size:5.9vw;line-height:1.4;letter-spacing:-.5px}
  .cf input:not([type="checkbox"]){font-size:16px;line-height:1.5;letter-spacing:0}
  .cf .svcs{font-size:18px}
  .cf .opts{grid-template-columns:repeat(2,minmax(0,150px));grid-auto-rows:auto;justify-content:center} /* live tiles 39-189 / 201-351: two 150px columns 12px apart, centred */
  .cf .opt label{font-size:15px;line-height:1.5;letter-spacing:0;padding-top:5px}
  .cf .opt img{margin-bottom:6px}
  .cf button{margin-top:10px}
  .ccard .call{font-size:5.2vw}
  .ccard .priv{font-size:14px}
}

/* footer (old template 1826): 1300px row, padding 100 (75 tablets, 60/20 phones). Columns 23.4% (logo 50%, the
   18px "All Glory" line, the contact list with 20px Font Awesome icons and 14px Montserrat text 35px apart, "Check Us
   Out" and 20px social icons 16px apart) | Quicklinks 17% from 55px in | Services 21.8% 20 + 35px further | Service
   Area 30% from 66.9% (the 3:2 map, 390 x 260 at 1440). 18px headings 15px above 15px links 27px apart. The bar
   (17px) 100px under the columns, 40px above the bottom. Tablets: one column with Quicklinks | Services side by
   side and the map 265px tall; phones: everything stacked, links 14px, map 204px, bar centred 15px. */
.ftr{background:var(--navy);color:var(--ice);padding:100px 0 40px}
.ftr .cols{display:flex;align-items:flex-start}
.ftr .cols>div{min-width:0}
.ftr .cols>div:nth-child(1){flex:0 0 23.399%}
.ftr .cols>div:nth-child(2){flex:0 0 16.982%;padding-left:55px}
.ftr .cols>div:nth-child(3){flex:0 0 21.771%;margin-left:20px;padding-left:35px}
.ftr .cols>div:nth-child(4){flex:0 0 30%;margin-left:calc(4.788% - 20px)}
.ftr .lg{width:50%;max-width:none}
.ftr .glory{font-family:var(--f-head);font-weight:600;font-size:18px;line-height:1;margin:6px 0 15px}
.ftr .ct{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ftr .ct li{display:flex;align-items:center;font-family:var(--f-head);font-size:14px;line-height:1.8}
.ftr .ct svg{width:25px;height:20px;fill:var(--ice);flex:none;margin-right:10px}
.ftr .ct a{color:var(--ice);text-decoration:none}
.ftr .ct a:hover{color:var(--yellow)}
.ftr .h4{font-family:var(--f-head);font-weight:600;font-size:18px;line-height:1;margin:0 0 15px;color:var(--ice)}
.ftr .h4 a{color:inherit;text-decoration:none}
.ftr .cols>div:nth-child(1) .h4{margin:30px 0 15px}
.ftr .cols>div:nth-child(4) .h4{margin-bottom:10px}
.ftr .ln{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.ftr .ln li{font-family:var(--f-head);font-size:15px;line-height:1.5}
.ftr .ln a{color:var(--ice);text-decoration:none}
.ftr .ln a:hover,.ftr .ln a:focus-visible{color:var(--yellow)}
.ftr .soc{display:flex;gap:16px}
.ftr .soc a{display:grid;place-items:center;width:20px;height:20px;color:var(--ice)}
.ftr .soc svg{width:20px;height:20px;fill:var(--ice)}
.ftr .soc a:hover svg{opacity:.9}
.ftr a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
.ftr .map{display:block;border-radius:15px;width:100%;height:auto}
.ftr .bar{display:flex;justify-content:space-between;align-items:center;margin-top:100px;font-family:var(--f-head);font-weight:500;font-size:17px;line-height:1.2;color:var(--ice);flex-wrap:wrap;gap:10px}
.ftr .poc{font-size:13px;opacity:.6}
/* the privacy link sits where the old 'Pressure Washing Website Design By' credit was (live 46fabe0 / 89377f0): the
   right end of the bar on desktop, centred under the copyright (16px) on tablets and phones; the credit's look,
   Montserrat 500 in the bar's ice, no underline until hovered or focused */
.ftr .bar a.pp{color:var(--ice);text-decoration:none;white-space:nowrap}
/* 2. footer map link: an inline <a> around a block image never painted its outline; make it wrap the image */
.ftr a:has(> img.map){display:block;width:fit-content;border-radius:15px}
.ftr a:focus-visible > img.map{outline:3px solid var(--yellow);outline-offset:3px}
/* 3. truck-section map link: inset ring that shows on the pale map tiles */
.mapcta a.map:focus-visible{outline:4px solid var(--navy);outline-offset:-8px;box-shadow:inset 0 0 0 8px #fff;position:relative;z-index:4}
/* 4. home hero background video: pause/play control, bottom-right of the hero, above the wave */
.hero .vtog-hero{position:absolute;z-index:4;right:24px;bottom:calc(var(--wave-h,40%) + 12px);width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(11,24,61,.55);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.75}
.hero .vtog-hero:hover,.hero .vtog-hero.paused,.hero .vtog-hero:focus-visible{opacity:1}
.hero .vtog-hero:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (max-width:767px){.hero .vtog-hero{right:12px;top:14px;bottom:auto;width:30px;height:30px}}
.ftr .bar a.pp:hover,.ftr .bar a.pp:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1024px){
  .ftr{padding:65px 0 40px}
  .ftr .wrap{width:calc(100% - 150px)}
  .ftr .cols{flex-wrap:wrap}
  .ftr .cols>div:nth-child(1){flex:0 0 100%;padding-bottom:35px}
  .ftr .lg{width:30%}
  .ftr .cols>div:nth-child(2),.ftr .cols>div:nth-child(3){flex:0 0 50%;margin:0;padding:0 0 24px}
  .ftr .cols>div:nth-child(4){flex:0 0 100%;margin:0}
  .ftr .map{height:265px;object-fit:cover}
  .ftr .bar{margin-top:75px;font-size:16px;flex-direction:column;justify-content:center;text-align:center;gap:0}
}
@media (max-width:767px){
  .ftr{padding:60px 0 40px}
  .ftr .wrap{width:calc(100% - 40px)}
  .ftr .lg{width:50%}
  .ftr .glory{font-size:16px}
  .ftr .ct svg{width:19px;height:15px}
  .ftr .cols>div:nth-child(2),.ftr .cols>div:nth-child(3){flex:0 0 100%;padding:0 0 20px}
  .ftr .ln li{font-size:14px}
  .ftr .map{height:204px}
  .ftr .bar{margin-top:60px;font-size:15px;gap:11px}
  .ftr .bar a.pp{font-size:15px}
}

/* ---------- looping carousels (home services strip + results; main.js) ----------
   All slides share one grid cell; each is moved to its slot (--s) with a transform, slots 0 .. --v - 1 are on
   screen. .nt = jump without animating (a slide wrapping round off-screen). */
.trk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.trk>.sl{grid-area:1/1;width:calc((100% - (var(--v) - 1) * var(--gap)) / var(--v));transform:translateX(calc(var(--s) * (100% + var(--gap))));transition:transform var(--spd,1s) ease-in-out}
.trk>.sl.nt{transition:none!important}
.cpause{position:absolute;z-index:5;top:8px;left:8px;padding:6px 12px;border:2px solid var(--navy);border-radius:20px;background:#fff;color:var(--navy);font:700 13px/1.2 var(--f-body);cursor:pointer}
.cpause:not(:focus){width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cpause:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.trk>.sl{transition:none}.cpause{display:none}}

/* services strip (home, under the hero; live 038e5ae / a765f3c / f7b75fa / d4b8a4e): pulled 200px up over the
   hero (240 tablets, 80 phones); white card, 5px ice border, Frame-6-1 grey sweep; a 95%-wide slider of 5 / 4 / 3
   slides (gaps 15 / 10 / 10) whose 3rd visible slide is pale blue with dark-blue text (live .swiper-slide-next + .swiper-slide);
   navy bar (Montserrat 700 30 / 18 / 14px) with white arrows 40px (6px on phones) from the card edges. */
.strip{position:relative;z-index:9;margin-top:-200px;padding:0 10px 100px}
.strip .sin{width:min(1300px,100%);margin-inline:auto}
.sbox{position:relative;border:5px solid var(--ice);border-radius:15px;background:#fff url(/assets/img/frame-6-1.png) center/cover no-repeat;box-shadow:0 15px 40px rgba(4,21,98,.25);padding-top:10px}
/* touch: sideways drags on the card belong to the strip (main.js swipes it either way), never to the browser's
   back / forward gesture; vertical drags still scroll the page */
.sbox,.sbox .scar,.sbox .trk{touch-action:pan-y;overscroll-behavior-x:contain}
.scar{width:95%;margin-inline:auto;overflow:hidden;padding:5px 0 16px}
.strip .trk{--v:5;--gap:15px;--spd:1s}
.strip .sl{border-radius:15px;transition:transform var(--spd) ease-in-out,background-color .2s}
.strip .sl.on{background:var(--ice)}
.strip .trk .sl:hover{background:#fff}
.strip .sl a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:25px 10px 16px;text-decoration:none;border-radius:15px}
.strip .sl a:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.strip .sl img{width:45px;height:45px;object-fit:contain}
.strip .sl span{font-family:var(--f-head);font-weight:700;font-size:13px;line-height:1.4;letter-spacing:-.2px;text-transform:uppercase;color:#5c6770;text-align:center}
.strip .sl.on span{color:#041562}
.strip .trk .sl:hover span{color:#5c6770}
.sbar{position:relative;background:var(--navy);border-radius:0 0 15px 15px;padding:10px 70px;text-align:center}
.sbar .st{font-family:var(--f-head);font-weight:700;font-size:30px;line-height:1.2;color:var(--ice)}
.sarr{position:absolute;top:50%;left:30px;margin-top:-22px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.sarr:last-child{left:auto;right:30px}
.sarr svg{width:34px;height:34px;transition:transform .1s ease-in-out}
.sarr svg path{stroke-width:2.4}
.sarr:first-child:hover svg{transform:scale(1.25) translateX(-10px)}
.sarr:last-child:hover svg{transform:scale(1.25) translateX(10px)}
.sarr:focus-visible{outline:3px solid var(--yellow);outline-offset:-2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.sarr svg{transition:none}}
@media (max-width:1024px){
  .strip{margin-top:-240px;padding:0 60px 60px}
  .sbox{padding-top:0;background-size:contain}
  .strip .trk{--v:4;--gap:10px}
  .strip .sl span{font-size:14px}
  .sbar{padding:20px 60px}
  .sbar .st{font-size:18px}
}
@media (max-width:767px){
  .strip{margin-top:-80px;padding:0 10px}
  .sbox{width:106.449%;margin-left:-3.2245%;background-size:100% auto}
  .strip .trk{--v:3}
  .strip .sl span{font-size:11px;letter-spacing:-.3px}
  .sbar{padding:10px 40px}
  .sbar .st{font-size:14px;line-height:2.6}
  .sarr{left:-4px}.sarr:last-child{right:-2px}
  .sarr svg path{stroke-width:2.2} /* live thin 25px arrows, 8px and 10px in from the card edges */
  .scar{padding:2px 0 18px} /* live: the slides 7px under the card top, 18px above the bar */
}

/* home results (live 631b1c8 + nested carousel 5ad3c7b): ice band, padding 100 (75/50 tablets, 60/5 phones), 52px
   heading; desktop carousel pulled 50px up: 3 slides with 10px gaps in a 450px-high track (+50px above and below),
   the middle one scaled 1.5x, the sides at 35%; black arrows outside; autoplay 2s + 2s slide. Tablets and phones show
   the three comparisons as a static column (live b119b9e). Tags: Poppins 15px on navy, thin ice border. */
.pg-home .results{padding:100px 0}
.pg-home .results .h2{padding-bottom:10px;margin:10px 0 0}
.carwrap{position:relative;display:grid;grid-template-columns:63px minmax(0,1fr) 63px;align-items:center;width:min(1400px,100%);margin:-20px auto 20px}
.cvp{overflow:hidden}
.results .car{--v:3;--gap:10px;--spd:2s;grid-template-rows:450px;align-items:center;padding:50px 0}
.results .car .sl{opacity:.35;transform:translateX(calc(var(--s) * (100% + var(--gap)))) scale(var(--sc,1));transition:transform var(--spd) ease-in-out,opacity .5s}
.results .car .sl.on{--sc:1.5;opacity:1;z-index:1}
.cnav{align-self:center;justify-self:start;width:50px;height:50px;padding:10px;border:0;background:none;color:#00060F;display:grid;place-items:center;cursor:pointer}
.cnav:last-child{justify-self:end}
.cnav svg{width:34px;height:34px}
.cnav svg path{stroke-width:2.6}
.pg-home .results .wrap{width:min(1400px,100%)}
.cnav:hover{color:var(--blue)}
.cnav:focus-visible{outline:3px solid var(--blue);outline-offset:-2px;border-radius:8px}
.carwrap .ba,.pg-home .results .ba{border-radius:10px;box-shadow:0 10px 35px rgba(0,52,86,.15)}
/* tags: live declares Poppins at the primary (bold) weight, but the capture renders them in Arial bold (the Poppins
   file never loaded), 15px (13px phones) as /gallery; 161 x 44px for the 1.5x centre slide, as live */
.carwrap .ba .lbl,.pg-home .results .ba .lbl{font:700 15px/1.15 Arial,Helvetica,sans-serif;letter-spacing:.5px;color:var(--ice);border:1px solid var(--ice);border-radius:4px;padding:5px 20px;box-shadow:0 5px 10px rgba(0,52,86,.2);text-shadow:0 0 10px rgba(0,0,0,.3)}
.carwrap .ba .lbl.b{left:10px}.carwrap .ba .lbl.a{right:10px}
.carwrap .ba .hd{width:1px}
.carwrap .ba .hd::after{width:38px;height:38px;border-width:1px;background-size:20px}
@media (max-width:1024px){
  .pg-home .results{padding:75px 50px}
  .carwrap{display:block;width:auto;margin:20px 0 40px}
  .cnav,.carwrap .cpause{display:none}
  .cvp{overflow:visible}
  .results .car{grid-template-rows:none;justify-items:stretch;gap:20px;padding:0 50px}
  .results .car .sl{grid-area:auto;width:auto;transform:none;opacity:1;transition:none}
  .results .car .sl[data-clone]{display:none}
}
@media (max-width:767px){
  .pg-home .results{padding:60px 5px}
  .results .car{gap:10px;padding:0 10px}
  .carwrap .ba .lbl,.pg-home .results .ba .lbl{font-size:13px;padding:5px}
  .pg-home .results .h2{margin-top:0}
}
/* reduced motion: arrow clicks / swipes switch the carousels' slides without sliding them (as specific as, and
   later than, the .strip .sl / .results .car .sl transitions above) */
@media (prefers-reduced-motion:reduce){.strip .trk>.sl,.results .car .sl,.trk>.sl{transition:none}}
/* form notice + fieldset reset */
.qf .note,.cf .note{grid-column:1/-1}
.cf fieldset{border:0;padding:0;margin:0;min-width:0}
.cf legend{padding:0}
/* lottie step icons */
.step .ic.lot svg{width:100%;height:100%;stroke:none}
/* thank-you page (live 327fbfc8): a full-screen primary section under a 170deg #041562 -> #0021B9 overlay (padding
   0 / 0-25 / 0-10), centred; 'Thank You!' Montserrat 800 125px (70 / 54px) at 0.8 line height with -2px tracking and
   a 1px black shadow, the 28px (30 / 16px) line under it, both sliding in from the left (Elementor fadeInLeft,
   1.25s; skipped with reduced motion); the yellow button 13px below, 366px (330 / 302px) wide, 22px (19 / 18px). */
.thanks{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0;background:var(--navy) linear-gradient(170deg,#041562 0%,#0021B9 100%);color:#fff;text-align:center;overflow:hidden}
.thanks .in{width:min(1300px,100%);display:flex;flex-direction:column;align-items:center}
.thanks .t{font-family:var(--f-head);font-weight:800;font-size:125px;line-height:.8;letter-spacing:-2px;text-transform:capitalize;color:#fff;text-shadow:0 1px 2px #000;margin:0;padding:0}
.thanks .s{font-family:var(--f-head);font-weight:400;font-size:28px;line-height:.8;letter-spacing:-.5px;color:#fff;text-shadow:0 1px 2px #000;margin:20px 0 0}
.btn-y.btn-ty{--w:366px;font-size:22px;margin-top:33px;padding:0 15px 0 33px}
@media (prefers-reduced-motion:no-preference){
  .thanks .t,.thanks .s{animation:h2o-fade-in-left 1.25s both}
  @keyframes h2o-fade-in-left{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
}
@media (max-width:1024px){
  .thanks{padding:0 25px}
  .thanks .t{font-size:70.4px;line-height:.9;letter-spacing:-1.5px;margin-top:15px}
  .thanks .s{font-size:30.4px;line-height:1;letter-spacing:-1.1px;margin-top:35px}
  .btn-y.btn-ty{--w:330px;font-size:19px}
}
@media (max-width:767px){
  .thanks{padding:0 10px}
  .thanks .t{font-size:54.4px;line-height:1.1;letter-spacing:-1px;margin-top:0}
  .thanks .s{font-size:16px;line-height:1.2;letter-spacing:-.2px;margin-top:20px}
  .btn-y.btn-ty{--w:302px;font-size:18px;padding:0 10px 0 25px}
}
/* 404 (live template 2122): the '404' illustration 65% (80% on phones) of a 1140px column, 'Seems you are lost!'
   Heebo 900 60px (32px) navy, the line Heebo 900 25px (20px), a 30px (16px) yellow button with a 60px circle. Here it
   sits between the site header (on a navy band, since nothing dark sits under it) and the footer. */
.pg-404 .hdr{position:relative;background:var(--navy)}
.nf{padding:80px 20px 100px;text-align:center;background:#fff}
.nf .in{width:min(1140px,100%);margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.nf .art{width:65%;height:auto;margin-bottom:20px}
.nf .t{font-family:var(--f-alt);font-weight:900;font-size:60px;line-height:1;letter-spacing:.5px;color:var(--navy);padding-bottom:10px;margin-bottom:20px}
.nf .s{font-family:var(--f-alt);font-weight:900;font-size:25px;line-height:1;letter-spacing:.5px;color:var(--ink);padding-bottom:10px;margin-bottom:20px}
.btn-y.btn-nf{--w:auto;--cap:20px;font-size:30px;padding:0 25px 0 30px}
.btn-nf .arr{width:60px;height:60px;margin-left:15px}
@media (max-width:767px){
  .nf{padding:60px 10px 80px}
  .nf .art{width:80%}
  .nf .t{font-size:32px}
  .nf .s{font-size:20px;line-height:1.4;margin-top:-20px}
  .btn-y.btn-nf{--w:auto;font-size:16px;padding:0 20px}
}
/* booking button from the live services page */

/* POC ribbon */
.poc-rib{position:fixed;right:-60px;top:28px;transform:rotate(45deg);background:var(--blue-text);color:#fff;font:700 11px/1 var(--f-body);letter-spacing:1px;padding:8px 70px;z-index:35;pointer-events:none;opacity:.9}
@media (max-width:1024px){.poc-rib{display:none}}