/* NW Pro Wash: component styles.
   The classes used by the Bricks templates. Tokens come from variables.css. */


*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--ff-body);font-size:18px;line-height:1.6;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue-ink)}
p{margin:0 0 1em;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--ff-head);font-weight:800;color:var(--ink);line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
h4{font-size:1.05rem;font-weight:700}
ul,ol{margin:0 0 1em;padding-left:1.2rem}
li{margin-bottom:.4rem}

/* Bricks resets. Bricks' defaults live in a "bricks" cascade layer: a 10px
   root font size, no underline on links, Georgia quotes with a border,
   centred captions, restyled form fields. This design is written against the
   browser's own defaults, so these put them back. Being outside any layer,
   they win no matter which file loads first. */
html{font-size:100%}
a{text-decoration:underline}
blockquote{border:0;padding:0;margin:0;font-family:inherit;position:static}
figcaption{margin:0;text-align:inherit;font-size:inherit;color:inherit}
select{-webkit-appearance:auto;appearance:auto;background-image:none}
input:not([type=submit]),select{line-height:normal}
.bricks-button{letter-spacing:normal}
/* :where() keeps this at zero specificity: it beats Bricks' layered defaults
   but never the design's own rules. */
:where(a.bricks-button:not(.btn):not(.hdr__call):not(.callbar__btn)){display:inline;padding:0;gap:0;text-align:inherit;justify-content:normal;align-items:normal}
/* Bricks' Image element puts the class on a <figure> or <a> wrapper when the
   image has a caption or link, so size the <img> inside these too. */
.ba__img img,.incl__photo img,.owner__photo img,.hdr__logo img,.footer__logo img{display:block;width:100%;height:100%;object-fit:cover}
.hdr__logo img,.footer__logo img{height:100%;width:auto;object-fit:contain}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.section{padding:clamp(3.2rem,6.5vw,5rem) 0}
.section--alt{background:var(--alt)}
.section--dark{background:var(--ink);color:#C9D3DB}
.section--dark h2,.section--dark h3{color:#fff}
.intro{max-width:720px;margin-bottom:2.2rem}
.intro p{font-size:1.14rem}
.hl{color:var(--green)}
.hl-dk{color:var(--green-dk)}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:1rem 1.7rem;border-radius:6px;border:2px solid transparent;font-family:var(--ff-head);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;text-decoration:none;line-height:1.15;text-align:center;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn--green{background:var(--grad-green);color:var(--ink);box-shadow:0 10px 22px rgba(120,190,40,.32)}
.btn--green:hover{background:linear-gradient(180deg,#C6F471 0%,#7FC625 100%);transform:translateY(-1px);box-shadow:0 14px 28px rgba(120,190,40,.4)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#1E2B35;transform:translateY(-1px)}
.btn--light{border-color:rgba(255,255,255,.65);color:#fff}
.btn--light:hover{background:rgba(255,255,255,.12)}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}

/* ---------- header ----------
   Two Bricks elements: the logo (Image, linked) and the phone number
   (Button). No menu: on a landing page every click should go to the form or
   the phone. */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hdr{max-width:var(--maxw);margin:0 auto;padding:.7rem var(--gut);display:flex;align-items:center;gap:1rem}
.hdr__logo{display:block;flex:none;margin-right:auto;line-height:0;height:44px}
.hdr__logo img,img.hdr__logo{display:block;height:44px;width:auto}
.hdr__call{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem;border-radius:6px;background:var(--grad-green);color:var(--ink);font-family:var(--ff-head);font-weight:700;font-size:1.12rem;text-decoration:none;white-space:nowrap;box-shadow:0 6px 16px rgba(120,190,40,.28)}
.hdr__call:hover{background:linear-gradient(180deg,#C6F471 0%,#7FC625 100%);color:var(--ink)}
.hdr__call::before{content:"";flex:none;width:17px;height:17px;background:currentColor;-webkit-mask:var(--ico-phone) center/contain no-repeat;mask:var(--ico-phone) center/contain no-repeat}
@media (max-width:560px){
  .hdr__logo,.hdr__logo img,img.hdr__logo{height:36px}
  .hdr__call{font-size:1rem;padding:.55rem .9rem}
}

/* A phone handset, drawn once and used as a mask so it takes the colour of
   the text around it. */


/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
/* The photo behind each hero, set here rather than inline on the element so
   it can be swapped in one place. */
.hero__bg--gutter{background-image:url(../img/hero-gutter.jpg)}
.hero__bg--roof{background-image:url(../img/hero-roof.jpg)}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,14,18,.95) 0%,rgba(9,14,18,.82) 42%,rgba(9,14,18,.45) 100%)}
.hero__in{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(2.6rem,5vw,4.4rem) var(--gut) clamp(2.6rem,5vw,4rem);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.hero h1{color:#fff;margin-bottom:.35em}
.hero__sub{font-size:clamp(1.1rem,1.6vw,1.25rem);color:#D8E0E6;max-width:34em;margin-bottom:0}
.hero__note{margin:1.1rem 0 0;font-size:.98rem;color:#9EAAB4}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;margin:1.9rem 0 0;padding:0;list-style:none;font-size:1rem;color:#D8E0E6}
.hero__trust li{margin:0;display:flex;align-items:center;gap:.45rem}
.hero__trust li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.hero__trust .stars{color:var(--green);letter-spacing:.06em}
.hero__trust a{color:inherit}

/* ---------- before / after ----------
   Two Image elements stacked in a frame. The "after" photo is the base
   layer; the "before" sits on top inside a box that the slider narrows.
   assets/js/site.js adds the range input and the drag handle, so nothing
   here depends on markup that WordPress might rewrite. */
.ba{position:relative;--pos:50%;border-radius:var(--r);overflow:hidden;background:#0B1114;box-shadow:var(--shadow-lg);touch-action:pan-y}
.ba__img{display:block;width:100%;height:auto}
.ba__clip{position:absolute;inset:0;width:var(--pos);overflow:hidden}
.ba__clip .ba__img,.ba__clip img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.ba__tag{position:absolute;top:.7rem;z-index:3;padding:.3rem .7rem;border-radius:4px;background:rgba(9,14,18,.72);color:#fff;font-family:var(--ff-head);font-weight:700;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase;pointer-events:none}
.ba__tag--before{left:.7rem}
.ba__tag--after{right:.7rem;background:rgba(141,209,53,.92);color:var(--ink)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(9,14,18,.18);pointer-events:none}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(9,14,18,.35)}
.ba__handle::before{content:"";position:absolute;top:50%;left:50%;z-index:1;width:18px;height:10px;margin:-5px 0 0 -9px;background:var(--ink);-webkit-mask:var(--ico-arrows) center/contain no-repeat;mask:var(--ico-arrows) center/contain no-repeat}
.ba__handle::before{transform:none}

.ba__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.ba__range:focus-visible{outline:3px solid var(--green);outline-offset:3px;opacity:1;background:none}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
.ba__range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent;cursor:ew-resize}
.ba__cap{display:block;margin-top:.7rem;font-size:.97rem;color:var(--muted)}
.section--dark .ba__cap{color:#9EAAB4}
/* Without the script the slider still shows both halves, split down the middle. */
.hero .ba{max-width:460px;margin-left:auto}
/* The roof page's photos are landscape, so its hero card fills the column. */
.hero--wide .ba{max-width:none}

/* ---------- proof strip ---------- */
.proof{background:#fff;border-bottom:1px solid var(--line)}
.proof__in{max-width:var(--maxw);margin:0 auto;padding:1.15rem var(--gut);display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:.6rem 1.8rem;list-style:none}
.proof__in li{margin:0;display:flex;align-items:center;gap:.55rem;font-size:1.02rem;font-weight:600;color:var(--ink)}
.proof__in li::before{content:"";flex:none;width:20px;height:20px;background:var(--green-dk);-webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat}
.proof__in .stars{color:#F0A500;letter-spacing:.06em}
.proof__in .stars::before{display:none}

.proof__in a{color:inherit}
@media (max-width:860px){.proof__in{grid-template-columns:1fr 1fr;justify-content:start}}

/* ---------- three reasons ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
.why__item{background:#fff;border-radius:var(--r);padding:1.7rem 1.6rem;box-shadow:var(--shadow)}
.why__item h3{margin-bottom:.45em;padding-top:.95rem;position:relative}
.why__item h3::before{content:"";position:absolute;top:0;left:0;width:46px;height:5px;border-radius:3px;background:var(--grad-green)}
.why__item p:last-child{margin-bottom:0}
.why__kicker{margin:2.2rem 0 0;font-family:var(--ff-head);font-size:clamp(1.25rem,2.2vw,1.55rem);font-weight:700;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}

/* ---------- what's included ---------- */
.incl{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.incl__list{list-style:none;margin:0;padding:0;font-size:1.08rem}
.incl__list li{position:relative;margin:0 0 .95rem;padding-left:2.1rem;color:var(--ink)}
.incl__list li::before{content:"";position:absolute;left:0;top:.28rem;width:21px;height:21px;background:var(--green-dk);-webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat}
.incl__list strong{font-weight:700}
.incl__photo{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.incl__photo img{width:100%;height:100%;object-fit:cover}
.incl__note{margin:1.6rem 0 0;padding:1.1rem 1.3rem;border-left:5px solid var(--green);background:var(--alt);border-radius:0 var(--r) var(--r) 0;font-size:1.02rem}
.incl__note p:last-child{margin-bottom:0}

/* ---------- work gallery ---------- */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.work--wide{grid-template-columns:repeat(2,1fr)}
.work .ba{box-shadow:var(--shadow)}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.review{background:#16212A;border-radius:var(--r);padding:1.6rem 1.5rem;border:1px solid #243240}
.review .stars{display:block;color:var(--green);font-size:1.05rem;letter-spacing:.08em;margin-bottom:.7rem}
.review blockquote{margin:0 0 1rem;color:#E4EAEF;font-size:1.04rem}
.review blockquote p{margin:0 0 .7em}
.review blockquote p:last-child{margin:0}
.review__by{font-weight:700;color:#fff;font-family:var(--ff-head);font-size:1.05rem}
.review__where{display:block;font-size:.93rem;font-family:var(--ff-body);font-weight:400;color:#8E9BA6;margin-top:.15rem}
.rating-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin:0 0 2.2rem;font-size:1.1rem;color:#C9D3DB}
.rating-line b{font-family:var(--ff-head);font-size:1.6rem;color:#fff;font-weight:800}
.rating-line .stars{color:var(--green);letter-spacing:.08em}
.rating-line a{color:#fff}

/* ---------- offer ---------- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,2rem)}
.offer__card{position:relative;background:#fff;border-radius:var(--r);padding:1.9rem 1.8rem 1.8rem;box-shadow:var(--shadow);border-top:6px solid var(--green)}
.offer__card h3{font-size:1.5rem;margin-bottom:.4em}
.offer__card p:last-child{margin-bottom:0}
.offer__tag{display:inline-block;margin-bottom:.9rem;padding:.25rem .7rem;border-radius:4px;background:var(--ink);color:var(--green);font-family:var(--ff-head);font-weight:700;font-size:.88rem;letter-spacing:.04em;text-transform:uppercase}

/* ---------- soft wash band (roof page) ---------- */
.soft{background:var(--grad-dark);color:#C9D3DB}
.soft h2{color:#fff}
.soft__lead{font-family:var(--ff-head);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0 0 1.8rem;text-wrap:balance}
.soft__lead em{font-style:normal;color:var(--green)}
.soft__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.2rem)}
.soft__item{padding-top:1.1rem;border-top:4px solid rgba(167,228,73,.55)}
.soft__item h3{font-size:1.18rem;margin-bottom:.4em}
.soft__item p:last-child{margin-bottom:0}

/* ---------- owner ---------- */
.owner{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.owner__photo{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:3/2}
.owner__photo img{width:100%;height:100%;object-fit:cover}
.owner h2{margin-bottom:.45em}
.owner__lic{margin:1.3rem 0 0;font-size:.98rem;color:var(--muted)}

/* ---------- quote / form ---------- */
.quote{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:start}
.quote h2{color:#fff}
.quote__lead{font-size:1.14rem;color:#C9D3DB}
.quote__call{display:block;margin:1.4rem 0 .3rem;font-family:var(--ff-head);font-weight:800;font-size:clamp(1.9rem,3.5vw,2.4rem);letter-spacing:-.02em;color:#fff;text-decoration:none}
.quote__call:hover{color:var(--green)}
.quote__hours{margin:0 0 1.6rem;font-size:1rem;color:#9EAAB4}
.areas{margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid #2A3944}
.areas h3{font-size:1.02rem;margin-bottom:.5em;color:#fff}
.areas p{margin:0;font-size:1rem;color:#9EAAB4;line-height:1.7}

/* Bricks Form element, class nw-form. Styled by element type rather than
   Bricks' own class names, so it survives a Bricks update. */
.nw-form{display:flex;flex-wrap:wrap;gap:1rem 1.1rem;background:#fff;color:var(--text);border-radius:var(--r);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-lg)}
.nw-form .form-group{flex:1 1 100%;margin:0;padding:0}
.nw-form .form-group[style*="50%"]{flex:1 1 calc(50% - .55rem);width:auto !important}
.nw-form label{display:block;margin-bottom:.3rem;font-weight:600;font-size:.97rem;color:var(--ink)}
.nw-form input[type="text"],.nw-form input[type="email"],.nw-form input[type="tel"],.nw-form select,.nw-form textarea{width:100%;padding:.75rem .85rem;border:1px solid #C4CDD5;border-radius:5px;background-color:#fff;font:inherit;font-size:1rem;line-height:1.4;color:var(--ink);box-shadow:none}
.nw-form input:focus,.nw-form select:focus,.nw-form textarea:focus{outline:2px solid var(--green-dk);outline-offset:1px;border-color:var(--green-dk)}
.nw-form textarea{min-height:104px}
.nw-form .submit-button-wrapper{flex:1 1 100%}
.nw-form button[type="submit"]{display:inline-flex;justify-content:center;width:100%;padding:1rem 1.5rem;border:0;border-radius:6px;background:var(--grad-green);color:var(--ink);font-family:var(--ff-head);font-weight:700;font-size:1.15rem;cursor:pointer;box-shadow:0 10px 22px rgba(120,190,40,.3)}
.nw-form button[type="submit"]:hover{background:linear-gradient(180deg,#C6F471 0%,#7FC625 100%)}
.nw-form .message{flex:1 1 100%}
.nw-form__small{flex:1 1 100%;margin:0;font-size:.93rem;color:var(--muted);text-align:center}

/* The box that marks where the Bricks Form goes. Delete it once the form
   is in place. */
.nw-form-ph{background:#fff;border:2px dashed var(--green-dk);border-radius:var(--r);padding:1.5rem 1.7rem;color:var(--ink);font-size:1rem}
.nw-form-ph__title{margin:0 0 .6rem;font-family:var(--ff-head);font-weight:800;font-size:1.25rem;color:var(--ink)}
.nw-form-ph ol{margin:.4rem 0 .9rem;padding-left:1.3rem}
.nw-form-ph li{margin-bottom:.25rem}
.nw-form-ph code{background:var(--alt-2);padding:.05rem .35rem;border-radius:3px}

/* ---------- footer ---------- */
.footer{background:#080D11;color:#8E9BA6;padding:2.6rem 0 6rem;font-size:.98rem}
.footer__in{display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;align-items:center}
.footer__logo{display:block;height:40px;flex:none}
.footer__logo img,img.footer__logo{height:40px;width:auto}
.footer p{margin:0}
.footer a{color:#C9D3DB}
.footer__legal{margin-left:auto;text-align:right}
@media (max-width:700px){.footer__legal{margin-left:0;text-align:left}}

/* ---------- sticky call bar, phones only ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.6rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(9,14,18,.96);border-top:1px solid #22313C}
.callbar__btn{flex:1 1 50%;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.85rem .6rem;border-radius:6px;font-family:var(--ff-head);font-weight:700;font-size:1.06rem;text-decoration:none;text-align:center}
.callbar__btn--call{background:var(--grad-green);color:var(--ink)}
.callbar__btn--call::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ico-phone) center/contain no-repeat;mask:var(--ico-phone) center/contain no-repeat}
.callbar__btn--quote{background:#22313C;color:#fff}
@media (max-width:860px){
  .callbar{display:flex}
  body{padding-bottom:0}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:2.2rem}
  .hero .ba{max-width:520px;margin:0 auto}
  .why,.soft__grid,.reviews{grid-template-columns:1fr 1fr}
  .incl,.owner,.quote{grid-template-columns:1fr}
  .incl__photo{max-width:420px;aspect-ratio:3/2}
  .owner__photo{max-width:560px}
  .work{grid-template-columns:1fr 1fr}
  .offer{grid-template-columns:1fr}
}
@media (max-width:680px){
  /* The theme scopes the base type to body.nwpw and prints that rule after
     this one, so this has to name it too, and outrank it, or phones would
     stay at 18px. */
  body,html body.nwpw{font-size:17px}
  .why,.soft__grid,.reviews,.work,.work--wide{grid-template-columns:1fr}
  .btns .btn{flex:1 1 100%}
  .hero__trust{gap:.45rem 1.1rem;font-size:.97rem}
  .proof__in{grid-template-columns:1fr;gap:.5rem;padding:1rem var(--gut)}
  .footer{padding-bottom:7rem}
}

/* ============================================================
   Bricks integration
   What only applies on WordPress. The resets for Bricks' own default styles
   are in the main rules above, since the local preview loads Bricks'
   defaults too and has to hold up against them.
   ============================================================ */

/* Rich Text elements hold a fragment of the page's markup. display:contents
   takes Bricks' wrapper div out of the layout, so the fragment sits in its
   grid, row or card exactly as if it were written there. */
.nw-raw{display:contents}

/* Base typography, scoped to the body class so a Bricks theme style cannot
   quietly swap the fonts or colours. */
body.nwpw{margin:0;font-family:var(--ff-body);font-size:18px;line-height:1.6;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}

/* Sticky header. Bricks wraps the header template in #brx-header, so that
   wrapper sticks rather than the section inside it. */
#brx-header{position:sticky;top:0;z-index:50}
.admin-bar #brx-header{top:32px}
@media (max-width:782px){.admin-bar #brx-header{top:46px}}
@media (max-width:600px){.admin-bar #brx-header{top:0}}
.site-header{position:relative;top:auto}