:root{--navy:#133f57;--blue:#187b9d;--aqua:#dff5f3;--aqua2:#bde8e5;--coral:#f27462;--yellow:#ffd75b;--cream:#fff9ee;--white:#fff;--ink:#21343d;--muted:#617780;--line:#dae8e9;--serif:"Fraunces",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--shadow:0 18px 50px rgba(19,63,87,.12);--orange:var(--coral);--shadow-sm:0 6px 18px rgba(19,63,87,.08);}
*{box-sizing:border-box}html{scroll-behavior:smooth}/* 18px floor starts at the root — index.html and house-cleaning.html carry no .cl/.town
   scope, so they inherited the old 16px base and no override could reach them. */
body{margin:0;color:var(--ink);background:#fff;font:400 18px/1.6 var(--sans)}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.wrap{width:min(1600px,calc(100% - 2in));margin:auto}.utility{background:var(--navy);color:#d9eaef;font-size:18px}.utility .wrap{min-height:39px;display:flex;align-items:center;justify-content:space-between}.utility nav{display:flex;gap:20px;align-items:center}.utility a:hover{color:#fff}.utility-phone{color:#fff;font-weight:800}.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.header .wrap{height:78px;display:flex;align-items:center;gap:30px}.logo{width:183px}.mainnav{display:flex;gap:25px;margin-left:auto;font-weight:700;font-size:18px}.mainnav a:hover{color:var(--coral)}.header-actions{display:flex;align-items:center;gap:15px}.header-phone{font-size:18px;font-weight:800;color:var(--navy)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:12px;background:var(--coral);color:#fff;font-size:19px;font-weight:800;box-shadow:0 10px 25px rgba(242,116,98,.22);transition:.2s}.button:hover{transform:translateY(-2px);filter:saturate(1.08)}.button-large{min-height:57px;padding:0 29px}.button-outline{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}.text-link{font-weight:800;color:var(--blue)}.text-link span{transition:.2s}.text-link:hover span{margin-left:5px}.hero{overflow:hidden;background:linear-gradient(112deg,var(--cream) 0 56%,var(--aqua) 56%)}.hero-grid{min-height:640px;padding:58px 0;display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}.eyebrow,.kicker{margin:0 0 15px;color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.13em;font-size:18px}.hero h1{margin:0 0 22px;color:var(--navy);font:700 clamp(3.3rem,5.3vw,5.2rem)/.98 var(--serif);letter-spacing:-.045em}.hero h1 span{color:var(--coral)}.lede{max-width:610px;margin:0 0 27px;color:var(--muted);font-size:1.16rem}.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.microcopy{margin:13px 0 0;color:var(--muted);font-size:18px}.rating{margin-top:27px;display:flex;align-items:center;gap:10px;font-size:18px}.stars{color:#e89b13;letter-spacing:1px}.hero-image{position:relative}.sunburst{position:absolute;inset:-22px -20px 20px 35px;border-radius:45% 18px 45% 18px;background:var(--yellow);transform:rotate(2deg)}.hero-image>img{position:relative;width:100%;height:510px;object-fit:cover;object-position:center 25%;border-radius:45% 18px 45% 18px;box-shadow:0 26px 60px rgba(19,63,87,.2)}.review-float{position:absolute;left:-42px;bottom:26px;width:302px;padding:16px 18px;background:#fff;border-radius:14px;box-shadow:var(--shadow)}.review-float blockquote{margin:4px 0 6px;color:var(--navy);font:600 1rem/1.4 var(--serif)}.review-float cite{font-style:normal;color:var(--muted);font-size:18px}.since{position:absolute;right:-22px;top:35px;display:grid;place-items:center;width:108px;height:108px;padding:17px;border-radius:50%;background:var(--navy);color:#fff;text-align:center;box-shadow:0 14px 30px rgba(19,63,87,.25)}.since b{font:700 1.8rem/1 var(--serif)}.since span{font-size:.63rem;line-height:1.15}.trust{background:var(--navy);color:#fff}.trust-grid{padding:28px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.trust-grid div{padding-left:20px;border-left:1px solid rgba(255,255,255,.22)}.trust-grid div:first-child{border-left:0;padding-left:0}.trust b{display:block}.trust span{color:#c9e0e7;font-size:18px}.section{padding:92px 0}.section-head{margin-bottom:46px}.section-head h2,.relief h2,.areas h2,.faq h2,.final-cta h2{margin:0;color:var(--navy);font:700 clamp(2.25rem,4vw,3.7rem)/1.08 var(--serif);letter-spacing:-.03em}.section-head>p,.split-head>p{color:var(--muted)}.split-head{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}.split-head>p{margin:0 0 9px;font-size:18px}.center{text-align:center;max-width:780px;margin-left:auto;margin-right:auto}.center>p{margin:0;color:var(--muted)}.services{background:#fff}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.service-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 11px 30px rgba(19,63,87,.07);transition:.2s}.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.service-card img{width:100%;height:205px;object-fit:cover}.service-card div{padding:23px}.service-card span{display:inline-block;margin-bottom:7px;padding:4px 9px;border-radius:99px;background:var(--yellow);color:var(--navy);font-size:.67rem;font-weight:800;text-transform:uppercase}.service-card h3{margin:0 0 7px;color:var(--navy);font:700 1.4rem var(--serif)}.service-card p{margin:0 0 15px;color:var(--muted);font-size:18px}.service-card b{font-size:18px;color:var(--blue)}.service-feature{grid-row:span 2;display:grid}.service-feature img{height:100%;min-height:330px}.all-services{margin-top:35px;text-align:center}.all-services p{margin:10px 0 0;color:var(--muted);font-size:18px}.relief{background:var(--cream)}.relief-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.relief-visual{position:relative;padding:0 55px 70px 0}.relief-visual .large{width:100%;height:560px;object-fit:cover;border-radius:45% 20px 45% 20px}.relief-visual .small{position:absolute;right:0;bottom:0;width:43%;height:225px;object-fit:cover;border:10px solid var(--cream);border-radius:20px}.relief-label{position:absolute;left:-18px;bottom:38px;padding:14px 18px;background:var(--yellow);border-radius:12px;color:var(--navy)}.relief-label b,.relief-label span{display:block}.relief-label span{font-size:18px}.relief-copy>.intro{color:var(--muted);font-size:18px}.benefits{list-style:none;padding:0;margin:27px 0}.benefits li{display:grid;grid-template-columns:42px 1fr;gap:15px;padding:17px 0;border-top:1px solid #eadfc8}.benefits li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--aqua);color:var(--navy);font-weight:800;font-size:18px}.benefits h3{margin:0 0 4px;color:var(--navy);font:700 1.15rem var(--serif)}.benefits p{margin:0;color:var(--muted);font-size:18px}.results{background:var(--aqua)}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.result-grid figure{margin:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:20px;background:#fff;box-shadow:var(--shadow)}.ba{position:relative}.ba img{width:100%;height:300px;object-fit:cover}.ba span{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:99px;background:rgba(19,63,87,.88);color:#fff;font-size:18px;font-weight:800}.result-grid figcaption{grid-column:1/-1;padding:14px 18px;color:var(--navy);font-weight:700}.video-card{position:relative}.video-card video{width:100%;border-radius:22px;box-shadow:var(--shadow)}.video-note{position:absolute;left:18px;bottom:18px;padding:9px 13px;background:rgba(19,63,87,.9);color:#fff;border-radius:9px;font-size:18px;font-weight:700}.process{background:var(--navy);color:#fff}.process .section-head h2{color:#fff}.process .kicker{color:var(--yellow);font-size:18px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.steps article{padding:28px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.07)}.steps article>span{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--yellow);color:var(--navy);font-weight:800}.steps h3{margin:16px 0 7px;font:700 1.35rem var(--serif)}.steps p{margin:0;color:#cce0e7;font-size:18px}.reviews{background:#fff}.review-score{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center}.review-score strong{grid-row:1/3;font:700 3.5rem/1 var(--serif);color:var(--navy)}.review-score span:last-child{color:var(--muted);font-size:18px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.review-grid article{padding:27px;border:1px solid var(--line);border-radius:18px;background:var(--cream)}.review-grid blockquote{margin:8px 0 18px;color:var(--navy);font:600 1.15rem/1.45 var(--serif)}.review-grid cite{font-style:normal;font-weight:800}.review-grid small{display:block;color:var(--muted);font-weight:400}.areas{background:linear-gradient(120deg,var(--cream),#fff)}.areas-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;align-items:center}.areas p:not(.kicker){color:var(--muted);font-size:18px}.area-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}.area-list a{padding:14px 17px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-weight:700}.area-list a:hover{border-color:var(--coral);color:var(--coral)}.faq{background:var(--aqua)}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq-grid>div>p:not(.kicker){color:var(--muted)}details{border-bottom:1px solid #bcdedc}summary{padding:17px 5px;cursor:pointer;color:var(--navy);font-weight:800;list-style:none}summary:after{content:"+";float:right;font-size:1.3rem}details[open] summary:after{content:"–"}details p{padding:0 30px 17px 5px;margin:0;color:var(--muted)}.final-cta{padding:66px 0;background:var(--aqua2)}.final-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:50px}.final-cta .kicker{color:var(--navy);font-size:18px}.final-cta p{margin:6px 0 0;color:#4d5a5f;font-size:18px}.final-cta .wrap>div:last-child{display:flex;flex-direction:row;align-items:center;gap:18px;flex:none;justify-content:flex-end}.final-phone{margin-top:0;color:var(--navy);font-size:1.5rem;font-weight:800;white-space:nowrap}.footer{padding:55px 0 20px;background:#0d2d3f;color:#c8dce3}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:50px}.footer img{width:175px;filter:brightness(0) invert(1)}.footer p{max-width:300px;font-size:18px}.footer nav{display:flex;flex-direction:column;gap:7px;font-size:18px}.footer nav b{margin-bottom:6px;color:#fff}.footer a:hover{color:#fff}.copyright{display:flex;justify-content:space-between;margin-top:38px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:18px}.mobile-quote{display:none}
@media(max-width:980px){.wrap{width:min(100% - 40px,1600px)}.mainnav{display:none}.header-phone{display:none}.header-actions{margin-left:auto}.trust-grid{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr 1fr}.service-feature{grid-row:auto}.service-feature img{height:250px;min-height:0}.split-head{grid-template-columns:1fr;gap:15px}.steps,.review-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.hero-image{max-width:620px;margin:auto}.result-grid{grid-template-columns:1fr}.utility nav a:not(.utility-phone){display:none}.faq-grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:600px){body{padding-bottom:66px}.wrap{width:min(100% - 28px,1180px)}.utility .wrap>span{display:none}.utility .wrap{justify-content:center}.header .wrap{height:67px}.logo{width:150px}.header .button{min-height:41px;padding:0 13px;font-size:18px}.hero{background:linear-gradient(var(--cream) 0 58%,var(--aqua) 58%)}.hero-grid{padding:44px 0;gap:42px;min-height:auto}.hero h1{font-size:2.8rem}.lede{font-size:18px}.hero-actions .button{width:100%}.hero-image>img{height:390px}.review-float{left:10px;right:10px;bottom:14px;width:auto}.since{width:88px;height:88px;right:-7px;top:14px}.trust-grid,.service-grid,.footer-grid{grid-template-columns:1fr}.trust-grid div,.trust-grid div:first-child{padding:14px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.2)}.trust-grid div:first-child{border-top:0}.section{padding:65px 0}.section-head h2,.relief h2,.areas h2,.faq h2,.final-cta h2{font-size:2.3rem}.relief-grid{gap:45px}.relief-visual{padding:0 25px 55px 0}.relief-visual .large{height:430px}.relief-visual .small{height:165px}.relief-label{left:5px}.result-grid figure{grid-template-columns:1fr 1fr}.ba img{height:190px}.area-list{grid-template-columns:1fr}.final-cta .wrap{flex-direction:column;align-items:flex-start}.final-cta .wrap>div:last-child{width:100%;flex-direction:column;align-items:flex-start;gap:12px}.final-cta .button{width:100%}.copyright{flex-direction:column;gap:5px}.mobile-quote{position:fixed;z-index:40;display:flex;left:0;right:0;bottom:0;padding:8px 12px;background:#fff;border-top:1px solid var(--line)}.mobile-quote .button{width:100%;min-height:50px}}

/* Keep the homepage video supportive rather than visually dominant. */

.video-card{width:86%;max-width:620px;margin-inline:auto}
@media(max-width:980px){.video-card{width:min(82%,620px)}}
@media(max-width:600px){.video-card{width:100%}}
.footer-live{display:block;margin-top:5px;color:#9fc3cf;font-size:18px}

/* ---- BBB accreditation badge (hero, under the star rating) ---------------- */
.bbb-badge{display:inline-flex;align-items:center;gap:11px;margin-top:14px;padding:9px 15px 9px 10px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;text-decoration:none;
  box-shadow:0 6px 18px rgba(19,63,87,.08);transition:transform .18s,box-shadow .18s,border-color .18s}
.bbb-badge:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(19,63,87,.14);border-color:var(--blue)}
.bbb-badge:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.bbb-badge__seal{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:10px;
  background:linear-gradient(160deg,var(--blue),var(--navy));color:#fff;font-family:var(--serif);
  font-weight:700;font-size:18px;line-height:1;box-shadow:inset 0 0 0 2px rgba(255,255,255,.16)}
.bbb-badge__t{line-height:1.28}
.bbb-badge__t strong{display:block;color:var(--navy);font-size:18px;font-weight:700}
.bbb-badge__t small{display:block;color:var(--muted);font-size:18px}
@media(max-width:520px){.bbb-badge{width:100%}}

/* ---- MOBILE HERO ORDER --------------------------------------------------
   On phones the photo moves up directly under the headline, so the visitor
   sees a person and a home before reading any body copy.
   `display:contents` promotes .hero-copy's children into the same flex flow as
   .hero-image, which lets the photo be ordered between them — no markup change,
   so the desktop two-column layout is untouched. */
@media(max-width:980px){
  .hero-grid{display:flex;flex-direction:column;gap:26px}
  .hero-copy{display:contents}
  .hero-copy .eyebrow{order:1}
  .hero-copy h1{order:2;margin-bottom:0}
  .hero-image{order:3;width:100%}
  .hero-copy .lede{order:4;margin-bottom:0}
  .hero-copy .hero-actions{order:5}
  .hero-copy .microcopy{order:6;margin-top:0}
  .hero-copy .rating{order:7;margin-top:0}
  /* .heroclaim had no order, so it defaulted to 0 and leapt above the headline
     on every phone. Give it the last slot. (Cesar spotted it, 8/15) */
  .hero-copy .heroclaim{order:8;margin-top:12px}
}

/* ---- TRUST BAND (ported from the live homepage, restyled to this palette) ----
   Sits between the blue trust strip and "How can we make life easier?" */
.tband{background:var(--aqua);padding:52px 0;border-top:1px solid var(--line)}
.tband__top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.tband__rating{margin:0;display:flex;align-items:center;gap:10px;font-size:18px;color:var(--ink)}
.tband__rating b{color:var(--navy)}
.tband__stars{color:var(--yellow);letter-spacing:2px;font-size:18px;
  -webkit-text-stroke:.6px #e0a900}
.tband__all{color:var(--blue);font-weight:600;font-size:18px;text-decoration:none}
.tband__all:hover{color:var(--coral);text-decoration:underline}

.tband__rail{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tband .rev{background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px;box-shadow:0 8px 24px rgba(19,63,87,.07)}
.tband .rev .stars{color:var(--yellow);letter-spacing:2px;margin-bottom:10px;
  -webkit-text-stroke:.6px #e0a900}
.tband .rev p{font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--ink);margin:0 0 16px}
.tband .rev .who{font-weight:700;font-size:18px;color:var(--navy)}
.tband .rev .who small{display:block;font-weight:400;color:var(--muted);font-size:18px}

.tband__grid{list-style:none;margin:30px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tband__grid li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;row-gap:4px;align-items:start}
.tband__ic{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);color:var(--blue)}
.tband__ic svg{width:18px;height:18px}
.tband__grid b{color:var(--navy);font-size:18px}
.tband__grid .t{margin:0;color:var(--muted);font-size:18px;line-height:1.5}
.tband__grid a{color:var(--blue);text-decoration:underline}

/* .tband__cred removed 2026-08-15 (Cesar) — the guarantee line lives in the blue
   trust strip above, so repeating it here was redundant. */

@media(max-width:980px){
  .tband__rail{grid-template-columns:1fr;gap:14px}
  .tband__grid{grid-template-columns:1fr 1fr;gap:20px}
}
@media(max-width:600px){
  .tband{padding:38px 0}
  .tband__grid{grid-template-columns:1fr}
  .tband__top{gap:8px}
}

/* ---- PROMISE ("cleaned vs cared for") — ported from the live homepage ------
   Sits between the trust band and the services grid. */
/* Light blue, matching the trust band / results / FAQ sections (--aqua #dff5f3). */
#promise{background:var(--aqua);padding:34px 0 40px}
/* margin-bottom was spacing for the three cards; they are gone, so it was
   just dead air under the last line. */
#promise .section__head{max-width:720px;margin:0 auto;text-align:center}
#promise .eyebrow{display:block;margin-bottom:12px;color:var(--blue);font-size:18px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase}
#promise .section__head h2{margin:0 0 14px;color:var(--navy);
  font:700 clamp(1.9rem,3.6vw,2.7rem)/1.15 var(--serif)}
#promise .section__head p{margin:0;color:var(--muted);font-size:18px;line-height:1.6}

#promise .promise{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#promise .promise__item{background:var(--cream);border:1px solid var(--line);border-radius:20px;
  padding:28px 26px;transition:transform .2s,box-shadow .2s}
#promise .promise__item:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(19,63,87,.1)}
#promise .promise__item h3{margin:0 0 10px;color:var(--navy);font:700 1.18rem var(--serif);
  display:flex;align-items:center;gap:9px}
#promise .promise__item .ic{color:var(--coral);font-size:18px}
#promise .promise__item p{margin:0;color:var(--muted);font-size:18px;line-height:1.6}
#promise .promise__item b{color:var(--navy)}
@media(max-width:980px){#promise{padding:0 0 38px}}

/* ================= PORTED FOOTER (live site markup, redesign colour) =========
   Cesar: keep the current darker blue. That is #0d2d3f from this design, not the
   lighter teal the live site uses. */
.footer{background:#0d2d3f;color:#c8dce3;padding:58px 0 22px;font-size:18px;line-height:1.7}
.footer__in{display:grid;grid-template-columns:1.55fr .85fr .9fr 1fr 1.1fr;gap:34px;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer h2,.footer h3,.footer h4{color:#fff;font-family:var(--sans);font-size:18px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.footer a,.footer span{display:block;color:#c8dce3;margin-bottom:7px;text-decoration:none}
.footer a{transition:color .15s}
.footer a:hover{color:var(--coral)}
.footer p{margin:0;color:#a7c3cd}
.footer .fbrand{display:flex;align-items:center;gap:10px;color:#fff;
  font:700 1.24rem var(--serif);margin-bottom:11px}
.footer .fbrand .m{display:grid;place-items:center;width:34px;height:34px;flex:none;
  background:var(--coral);color:#fff;border-radius:50%;font-size:18px}
.footer .social{display:flex;gap:9px;margin-top:17px}
.footer .social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;margin:0;transition:.18s}
.footer .social a:hover{background:var(--coral);color:#fff;transform:translateY(-2px)}
.footer .social svg{width:18px;height:18px;fill:currentColor;display:block}
.footer__find{display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px;
  padding:20px 0 2px;font-size:18px}
.footer__find a,.footer__find span{display:inline-block;margin:0}
.footer__find-label{color:#8fb6c5;font-weight:700}
.footer__find a{color:#cfe3ec}
.footer__find .star{color:var(--yellow);margin-right:2px}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:20px;color:#8fb6c5;font-size:18px}
.footer__bottom span{display:inline-block;margin:0}
@media(max-width:1100px){.footer__in{grid-template-columns:1.4fr 1fr 1fr;gap:30px}}
@media(max-width:820px){.footer__in{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.footer__in{grid-template-columns:1fr}.footer{padding:42px 0 20px}}

/* The gap above "There's a difference between cleaned and cared for." was not the
   heading's own padding (now 0) — it was the services section's 92px bottom padding
   stacking on top of it. Trimmed here only, so every other section keeps its rhythm. */
#services{padding-bottom:32px}
@media(max-width:980px){#services{padding-bottom:24px}}

/* The CTA phone number was a real tel: link but styled like plain text — no underline,
   no hover — so nobody could tell it was tappable. */
.final-phone{text-decoration:underline;text-decoration-color:rgba(19,63,87,.35);
  text-underline-offset:4px;text-decoration-thickness:2px;transition:color .15s}
.final-phone:hover{color:var(--coral);text-decoration-color:var(--coral)}
.final-phone:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:4px}

/* FAQ block header sized to match the final CTA (Cesar, 8/15):
   kicker like "Ready for a lighter week?", body + link like "Tell us about your home…". */
.faq .kicker{font-size:18px}
.faq-grid > div > p{font-size:18px}
.faq-grid > div > .text-link{font-size:18px}

/* Service-areas block sized like the FAQ and final CTA, plus the town names (Cesar, 8/15). */
.areas .kicker{font-size:18px}
/* :not(.kicker) rule above is more specific, so match it rather than fight it */
.areas p:not(.kicker){font-size:18px}
.area-list a{font-size:18px}
/* FAQ questions and answers, also 18px (Cesar, 8/15) */
.faq summary{font-size:18px}
.faq details p{font-size:18px}

/* Reviews section kicker "Loved by local homeowners" — 18px like the others (Cesar, 8/15). */
.reviews .kicker{font-size:18px}

/* Reassurance line under the quote button in the dark process band — bright yellow so it
   actually reads against the navy (was muted grey at 12.8px). Cesar, 8/15. */
.process .reassure{font-size:18px;font-weight:800;color:var(--yellow);margin-top:12px;
  letter-spacing:.01em}

/* Results ("before and after") block — kicker, intro line and the closing link at 18px
   to match the rest of the page (Cesar, 8/15). */
.results .kicker{font-size:18px}
.results .section-head p,.results > .wrap > div > p{font-size:18px}
.results .text-link{font-size:18px}

/* "Cleaning you don't have to manage." block — everything to 18px EXCEPT the h2 headline
   and the "Care you can feel / in every room" label by the photo (Cesar, 8/15). */
.relief .kicker{font-size:18px}
.relief-copy .intro{font-size:18px}
.benefits h3{font-size:19px}
.benefits p{font-size:18px}
.relief-copy .text-link{font-size:19px}

/* Services block "How can we make life easier?" — kicker, intro, card copy and the
   card links ("Learn about recurring cleaning", "Explore custom plans") to 18px.
   Card TITLES left at 22.4px — see note to Cesar. (8/15) */
.services .kicker{font-size:18px}
.services .split-head > p{font-size:18px}
.service-card p{font-size:18px}
.service-card b{font-size:18px}

/* Reviews block to 18px — everything EXCEPT the quotes themselves and the big 4.8 score
   (Cesar: "eighteen except for the reviews itself"). 8/15 */
.review-score span:not(.stars){font-size:18px}
.review-grid cite{font-size:18px}
.review-grid cite small{font-size:18px}

/* Trust band below the blue strip (Cesar, 8/15):
   rating line 19px; the four proof items 18px. Buttons/links untouched. */
.tband__rating{font-size:19px}
.tband__grid b{font-size:18px}
.tband__grid .t{font-size:18px}

/* Blue trust strip — all four items, headings and sublines, to 18px (Cesar, 8/15). */
.trust-grid b{font-size:18px}
.trust-grid span{font-size:18px}

/* Hero reassurance line and rating line to 18px (Cesar, 8/15). */
.hero .microcopy{font-size:18px}
.hero .rating{font-size:18px}

/* Hero lede "Reliable, detailed house cleaning…" to 19px (Cesar, 8/15). */
.hero .lede{font-size:19px}

/* Hero eyebrow "Trusted local house cleaning since 1985" to 18px (Cesar, 8/15). */
.hero .eyebrow{font-size:18px}

/* Outlined "Call" button, matching the ghost button on the current site:
   pill shape, no fill, teal text and a light hairline border. (Cesar, 8/15) */
.button-ghost{background:transparent;color:var(--blue);border:1px solid var(--line);
  border-radius:999px;box-shadow:none;font-weight:800}
.button-ghost:hover{border-color:var(--blue);background:rgba(24,123,157,.05);color:var(--navy)}
.button-ghost:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

/* BBB badge now sits under the hero photo, centred (Cesar, 8/15).
   The review card floats absolutely over the bottom of the photo, so the badge needs
   clearance or the two collide. */
.hero-image{display:flex;flex-direction:column;align-items:center}
/* .hero-shot is the positioning context for the photo and the two floating cards, so the
   badge below can no longer push them around. */
.hero-shot{position:relative;width:100%}
.hero-image .bbb-badge{display:inline-flex;margin:26px auto 0}
@media(max-width:980px){.hero-image .bbb-badge{margin-top:22px}}

/* The photo moved one level deeper into .hero-shot, so the original `.hero-image>img`
   direct-child rules stopped matching — the image lost its shape and the yellow sunburst
   painted over it. Same rules, new parent. */
.hero-shot>img{position:relative;width:100%;height:510px;object-fit:cover;
  object-position:center 25%;border-radius:45% 18px 45% 18px;
  box-shadow:0 26px 60px rgba(19,63,87,.2)}
@media(max-width:600px){.hero-shot>img{height:390px}}

/* Less space between the hero and the blue trust bar (Cesar, 8/15). */
.hero-grid{padding-bottom:32px}
@media(max-width:600px){.hero-grid{padding-bottom:26px}}

/* "A real person answers" — sits under the hero rating line, in the slot the BBB badge
   vacated when it moved under the photo. (Cesar, 8/15) */
.heroclaim{display:flex;align-items:flex-start;gap:10px;margin-top:16px}
.heroclaim__ic{color:var(--coral);font-size:18px;line-height:1.55;flex:none}
/* Two lines: title on its own, description on a single line beneath (Cesar, 8/15). */
.heroclaim__t strong{display:block;color:var(--navy);font-size:18px;font-weight:800;line-height:1.35}
.heroclaim__t small{display:block;color:var(--muted);font-size:18px;line-height:1.45;
  margin-top:2px;white-space:nowrap}
@media(max-width:900px){.heroclaim__t small{white-space:normal}}



/* ---- DARK MODE ----------------------------------------------------------
   The redesign shipped light-only. These are the same tokens redefined for
   data-theme="dark", which assets/theme.js sets on <html> (and remembers).
   Only the palette changes — no layout, no sizes. (Cesar, 8/15) */
:root[data-theme="dark"]{
  --navy:#e8f2f6;          /* was the dark ink — becomes the light ink */
  --blue:#6fc3dd;
  --aqua:#1d2a31;          /* section tint */
  --aqua2:#22333c;         /* deeper tint, e.g. final CTA */
  --cream:#1b2329;         /* warm band -> warm dark */
  --white:#212b31;         /* card surfaces */
  --ink:#e8f2f6;
  --muted:#a8bcc5;
  --line:#33434c;
  --coral:#f27462;         /* brand accent unchanged */
  --yellow:#ffd75b;
}
:root[data-theme="dark"] body{background:#161d22;color:var(--ink)}
:root[data-theme="dark"] .header{background:rgba(22,29,34,.92);border-bottom:1px solid var(--line)}
:root[data-theme="dark"] .hero{background:linear-gradient(112deg,var(--cream) 0 56%,var(--aqua) 56%)}
:root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .tband .rev,
:root[data-theme="dark"] .review-float,
:root[data-theme="dark"] .bbb-badge{background:var(--white);border-color:var(--line)}
:root[data-theme="dark"] .review-grid article{background:var(--white);border-color:var(--line)}
:root[data-theme="dark"] .button-outline,
:root[data-theme="dark"] .button-ghost{background:transparent;color:var(--blue);border-color:var(--line)}
:root[data-theme="dark"] .logo{filter:brightness(1.12) saturate(1.03)}
:root[data-theme="dark"] .notlist li::before{background:#4a2b26;color:#ffb4a4}
/* the toggle button itself */
.themetoggle{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  flex:none;margin-left:4px;transition:.18s}
.themetoggle:hover{color:var(--blue);border-color:var(--blue)}
.themetoggle:focus-visible{outline:3px solid var(--coral);outline-offset:3px}



/* --navy does double duty: dark ink AND dark background. Inverting it for dark mode turned
   the top bar, trust strip, process band and the "40+" badge light. Those four are surfaces,
   so pin them to a real dark colour. */
:root[data-theme="dark"] .utility{background:#0f161b;color:#cfe0e7}
:root[data-theme="dark"] .utility a{color:#cfe0e7}
:root[data-theme="dark"] .utility a:hover{color:var(--coral)}
:root[data-theme="dark"] .trust{background:#12202a;color:#fff}
:root[data-theme="dark"] .trust-grid b,
:root[data-theme="dark"] .trust-grid span{color:#e8f2f6}
:root[data-theme="dark"] .process{background:#12202a;color:#fff}
:root[data-theme="dark"] .since{background:#12202a;color:#fff}
:root[data-theme="dark"] .process .section-head h2,
:root[data-theme="dark"] .steps h3{color:#fff}


/* ---- HEADER: the live site's exact responsive system ---------------------
   The live header is NOT one fixed size — it steps at 1340px and 400px, and its
   logo is sized by HEIGHT (width auto), which is why matching it at one width
   looked wrong at another. Values lifted straight from assets/site.css, converted
   to px because this page runs a 16px base rather than the site's 20px.
     >=1341px : logo 58px tall, header 96px, nav 18.4px
     <=1340px : logo 44px tall, header 84px, nav 16.6px
     <=400px  : logo 36px tall
   Top bar is 15.6px at every width. (Cesar, 8/15) */
.header .wrap>a:first-child{flex:none;display:inline-flex;align-items:center}
.header .logo{height:58px;width:auto;max-width:100%;flex:0 1 auto}
.header .wrap{height:96px}
.mainnav a{font-size:19px}
.utility,.utility a{font-size:18px}
.utility a{font-weight:600}
@media(max-width:1340px){
  .header .logo{height:44px}
  .header .wrap{height:84px}
  .mainnav a{font-size:18px}
}
@media(max-width:400px){.header .logo{height:36px}}

/* Swap the two section backgrounds (Cesar, 8/15):
   "Proudly cleaning Chicago's northwest suburbs" takes the light blue,
   "Feel confident before your first clean" takes the off-white gradient. */
.areas{background:var(--aqua)}
.faq{background:linear-gradient(120deg,var(--cream),#fff)}
:root[data-theme="dark"] .areas{background:var(--aqua)}
:root[data-theme="dark"] .faq{background:linear-gradient(120deg,var(--cream),#1e262c)}

/* Footer brand blurb was still at .82rem from the redesign's own rule (Cesar: footer 18px). */
.footer p{font-size:18px;max-width:34ch}

/* Hours line under the final-CTA subline (Cesar, 8/15). */
.final-cta .cta-hours{margin-top:8px;font-size:18px}
.final-cta .cta-hours a{color:var(--navy);font-weight:800;text-decoration:underline;
  text-decoration-color:rgba(19,63,87,.35);text-underline-offset:3px}
.final-cta .cta-hours a:hover{color:var(--coral);text-decoration-color:var(--coral)}

/* ---- IMAGE PLACEHOLDER --------------------------------------------------
   Marks a slot where a real Happy Maids photo should go and states exactly
   what to shoot. Deliberately obvious so it can never be mistaken for final
   artwork, and easy to grep for before launch: search "imgslot". */
.imgslot{position:relative;display:grid;place-items:center;text-align:center;
  border:2px dashed var(--blue);border-radius:18px;background:
  repeating-linear-gradient(135deg,rgba(24,123,157,.05) 0 12px,rgba(24,123,157,.11) 12px 24px);
  color:var(--navy);padding:26px 22px;min-height:220px}
.imgslot__tag{position:absolute;top:12px;left:12px;background:var(--yellow);color:var(--navy);
  font-size:18px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px}
.imgslot__icon{font-size:1.7rem;line-height:1;margin-bottom:8px;opacity:.7}
.imgslot__what{font:700 1.02rem/1.3 var(--serif);margin:0 0 6px;max-width:34ch}
.imgslot__desc{font-size:18px;color:var(--muted);margin:0;max-width:46ch;line-height:1.5}
.imgslot__size{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:6px;
  background:var(--navy);color:#fff;font:700 13px/1.3 var(--sans);letter-spacing:.02em}
:root[data-theme="dark"] .imgslot__size{background:var(--blue);color:#0f161b}
.imgslot--wide{min-height:340px}
.imgslot--card{min-height:150px;border-radius:0;border-width:0 0 2px 0;border-style:dashed}
:root[data-theme="dark"] .imgslot{background:
  repeating-linear-gradient(135deg,rgba(111,195,221,.06) 0 12px,rgba(111,195,221,.12) 12px 24px);
  color:var(--ink)}

/* Room photography inside cards and full-width bands. */
.roomshot{width:100%;height:auto;display:block;object-fit:cover}
.service-card .roomshot{height:205px}
#photoband .roomshot{border-radius:20px;box-shadow:0 18px 46px rgba(19,63,87,.14)}

/* Customer Login removed from the top bar (it lives in the footer). The nav is
   right-anchored, so dropping a link would pull the remaining ones rightward —
   this reserved space keeps them exactly where they were and leaves the phone
   sitting in the slot Customer Login used to occupy. (Cesar, 8/15) */
.utility nav{padding-right:150px}
@media(max-width:900px){.utility nav{padding-right:0}}

/* Before/after pairs — used on service pages to show real results side by side. */
.ba-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
@media(max-width:1000px){.ba-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ba-grid{grid-template-columns:1fr 1fr;gap:12px}}
.bapair{margin:0}
.bapair__imgs{display:grid;grid-template-columns:1fr 1fr;border-radius:16px;overflow:hidden;
  box-shadow:0 12px 30px rgba(19,63,87,.12);background:var(--line)}
.bapair__imgs img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.bapair figcaption{font-size:18px;color:var(--muted);margin-top:11px;line-height:1.45}
.proof__more{text-align:center;margin-top:26px}

/* Hero headline only: Georgia reads lighter at large sizes than Fraunces, which felt
   heavy — especially on phones. Every other heading stays Fraunces. (Cesar, 8/15) */
.hero h1{font-family:Georgia,"Times New Roman",serif}

/* The team-photo band sat between two 92px paddings, leaving 184px of dead space before the
   next heading. Pull the band's bottom padding and tighten the section that follows it.
   Scoped to the band's own sibling, so no other section spacing changes. (Cesar, 8/15) */
#teamband{padding-top:48px;padding-bottom:0}
#teamband + .section{padding-top:56px}
@media(max-width:600px){#teamband{padding-top:32px}#teamband + .section{padding-top:40px}}

/* ---------- Deep-cleaning page: the template layout Cesar supplied (2026-08-16).
   Every selector below is a NEW class used only by that page, so nothing already
   built moves. Do not fold these into the shared grouped rules. ---------- */
.numcards{display:flex;flex-wrap:wrap;justify-content:center;gap:21px}
.numcards article{flex:1 1 calc(25% - 16px);min-width:240px}
.numcards article{padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:0 11px 30px rgba(19,63,87,.07)}
.numcards article>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--yellow);color:var(--navy);font-weight:800;font-size:18px}
.numcards h3{margin:15px 0 7px;color:var(--navy);font:700 1.25rem var(--serif)}
.numcards p{margin:0;color:var(--muted);font-size:18px}

.splitgrid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.splitgrid--flip .splitgrid__media{order:2}
.splitgrid__copy h2{margin:0;color:var(--navy);
  font:700 clamp(2.25rem,4vw,3.7rem)/1.08 var(--serif);letter-spacing:-.03em}
.splitgrid__copy .kicker{font-size:18px}
.splitgrid__copy .intro{margin:16px 0 0;color:var(--muted);font-size:18px}
.splitgrid__copy .text-link{display:inline-block;margin-top:22px;font-size:19px}
.splitgrid__media{position:relative}
.splitgrid__media img{width:100%;height:520px;object-fit:cover;border-radius:24px;
  box-shadow:var(--shadow)}
.splitgrid__media .bapair{margin:0}
.splitgrid__media .bapair__imgs{border-radius:24px;box-shadow:var(--shadow)}
.splitgrid__media .bapair__imgs img{height:auto;border-radius:0;box-shadow:none}

.minicards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.minicards div{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff}
.minicards h3{margin:0 0 5px;color:var(--navy);font:700 1.05rem var(--serif)}
.minicards p{margin:0;color:var(--muted);font-size:18px}

@media(max-width:980px){
  .numcards article{flex:1 1 240px;max-width:none}
  .splitgrid{grid-template-columns:1fr;gap:44px}
  .splitgrid--flip .splitgrid__media{order:0}
  .splitgrid__media img{height:400px}
}
@media(max-width:600px){
  .numcards article{flex:1 1 100%;max-width:none}
  .minicards{grid-template-columns:1fr}
  .splitgrid__media img{height:320px}
}
#need .section-head p:not(.kicker){font-size:18px}
/* Plain .section blocks have no 18px rules of their own — the kicker and the intro
   paragraph fall back to 12px/16px. Cesar's standard is 18px. Scoped by id so no
   finished page moves. (2026-08-16) */
#who .kicker,#vs .kicker{font-size:18px}
#who .section-head p:not(.kicker),#vs .section-head p:not(.kicker){font-size:18px}
#vs .wrap > p{font-size:18px}
/* House cleaning: the baseline list beside this photo runs to five items, so the photo
   stretches the full height of the text column rather than sitting short of it.
   (Cesar, 2026-08-16) */
#included .splitgrid{align-items:stretch}
#included .splitgrid__media{height:100%}
#included .splitgrid__media img{height:100%;min-height:520px}
@media(max-width:980px){
  #included .splitgrid{align-items:center}
  #included .splitgrid__media img{height:420px;min-height:0}
}
/* "See what is included, room by room" sits in a plain .section on some pages, where it fell
   back to 16px while every other text-link around it is 19px. (Cesar, 2026-08-16) */
.proof__more .text-link{font-size:19px}
/* The pricing section is a plain .section, so its kicker and closing note fell back to
   12px/12.8px while everything around them is 18px. (Cesar, 2026-08-16) */
#cost .kicker{font-size:18px}
#cost .all-services p,#cost .section-head p:not(.kicker),#cost .reassure{font-size:18px}
/* Long list, short photo: rather than stretch the image or hunt for a very tall one, the photo
   sticks and travels with you while the list scrolls past. Header is 97px and sticky, so it
   parks just below that. Off on mobile, where the layout is stacked. (Cesar, 2026-08-16) */
.splitgrid--sticky{align-items:start}
.splitgrid--sticky .splitgrid__media{position:sticky;top:117px}
@media(max-width:980px){
  .splitgrid--sticky{align-items:center}
  .splitgrid--sticky .splitgrid__media{position:static}
}
/* The shared .center cap is 780px, which is 49% of the 1600px wrap — the pricing copy read
   as a narrow column down the middle. 72% gives it room without losing readability.
   (Cesar, 2026-08-16) */
.section-head.center{max-width:72%}
@media(max-width:980px){.section-head.center{max-width:100%}}
/* Booking page: the GoHighLevel form sits where the hero photo normally goes, so it needs a
   card around it rather than floating on the gradient. (2026-08-16) */
/* minmax(0,1fr) not 1fr: plain fr keeps a min-content floor, and something in the hero copy
   was holding the left column at 1051px of a 1600px row. (2026-08-16) */
#form .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
#form .hero-image{display:block}
.bookingform{flex:1 1 auto;width:100%;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:18px;box-shadow:var(--shadow)}
/* GoHighLevel's form_embed.js hides the original iframe and rebuilds it inside its own
   .ep-iFrameContainer, so both have to be told to fill the card. (2026-08-16) */
.bookingform .ep-iFrameContainer{width:100%}
.bookingform iframe{width:100%!important;min-width:100%;border:0;display:block;border-radius:14px}
@media(max-width:980px){#form .hero-grid{grid-template-columns:1fr}}
/* .heroclaim is a flex row; without min-width:0 its text child refuses to wrap and overflows
   the hero column — on the booking page it ran 283px underneath the form card.
   (Cesar spotted the collision, 2026-08-16) */
.heroclaim__t{min-width:0}
/* Booking page: centre the BBB badge under the form rather than hanging off its left edge. */
/* the badge is inline-flex by default, so auto margins do nothing — it has to be block-level
   to centre under the form. (2026-08-16) */
#form .bbb-badge{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
/* The homepage keeps its hero claim on one line, but this page's claim is a full sentence and
   was running across into the form. Let it wrap here. (Cesar, 2026-08-16) */
#form .heroclaim__t small{white-space:normal}

/* ---------- Checklist page: content styles carried over from site.css so the room-by-room
   lists and the standard-vs-deep table keep working inside the new design. Namespaced under
   .cl so they cannot leak. Old palette variables are resolved to literals because the new
   stylesheet does not define them. Prose widened to ~72% of the page per Cesar, 2026-08-16.
   ---------- */
.cl .prose{max-width:min(1360px,100%);margin:0 auto}
.cl .prose p{color:var(--muted);font-size:18px}
.cl .prose h2{margin-top:1.6rem}
.cl .glance{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:1.6rem 1.7rem}
.cl .glance h2, .cl .glance h3{font-size:18px;margin-bottom:1rem}
.cl .glance ul{display:flex;flex-direction:column;gap:.75rem}
.cl .glance li{display:flex;gap:.6rem;align-items:flex-start;font-size:18px;color:#546b76}
.cl .glance li .gi{color:#E8760F;flex:none;font-weight:700}
.cl .glance li b{color:var(--ink)}
/* Cesar: the comparison table reads better at its original width — wide rows are hard
   to track across. Prose stays wide. (2026-08-16) */
.cl .ctable-wrap{max-width:min(900px,100%);margin:0 auto;overflow-x:auto}
.cl .ctable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(26,93,127,.09)}
.cl .ctable th, .cl .ctable td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:18px;color:var(--ink)}
.cl .ctable thead th{background:#e8f5f7;color:#1a5d7f;font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:.03em;text-transform:uppercase}
.cl .ctable th.col, .cl .ctable td.col{text-align:center;width:112px}
.cl .ctable tbody tr:last-child td{border-bottom:0}
.cl .ctable .grp td{background:#e8f5f7;color:#1a5d7f;font-weight:600;font-family:var(--serif);font-size:18px}
.cl .ctable .task{color:#546b76}
.cl .yes{color:#2f9e63;font-weight:700}
.cl .addon-c{color:#a9560b;font-weight:700;font-size:18px}
.cl .ctable thead th:nth-child(2), .cl .ctable tbody tr:not(.grp) td:nth-child(2){background:rgba(26,93,127,.055)}
.cl .col-tag{display:block;font-size:.6rem;color:#a9560b;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:.4rem;line-height:1.2}
.cl .na{color:#546b76;opacity:.5}
.cl .lvl{color:#546b76;font-size:18px}
.cl .lvl-up{color:#1a5d7f;font-weight:600;font-size:18px}
.cl .ctable{box-shadow:none;border-color:#ccc}
.cl .ctable th, .cl .ctable td{padding:.28rem .45rem;font-size:8.3pt}
.cl .ctable thead th, .cl .ctable .grp td{background:#eee!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cl .ctable thead th:nth-child(2), .cl .ctable tbody tr:not(.grp) td:nth-child(2){background:#f4f4f4!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cl .ctable .grp{break-inside:avoid}
.cl .lvl-up{color:#000!important;font-weight:600}
.cl p a:not(.btn), .cl ul.checks li a:not(.btn), .cl .faq li a:not(.btn), .cl .post>ul li a:not(.btn), .cl .post>ol li a:not(.btn), .cl .prose ul li a:not(.btn), .cl .prose ol li a:not(.btn){text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.06em}
/* The ported checklist content is wrapped in .container, which only ever existed in site.css.
   Without it the sections ran the full width of the window with no side margin at all.
   Give it the same behaviour as .wrap. (2026-08-16) */
.cl .container{width:min(1600px,calc(100% - 2in));margin-left:auto;margin-right:auto}
@media(max-width:980px){.cl .container{width:min(100% - 40px,1600px)}}
@media(max-width:600px){.cl .container{width:min(100% - 28px,1180px)}}
/* Checklist page-head: the original's simple, straight-to-the-point block, recoloured in the
   template palette. No hero, no photo — Cesar, 2026-08-16. */
.cl .pagehead{background:linear-gradient(112deg,var(--cream) 0 56%,var(--aqua) 56%);
  border-bottom:1px solid var(--line);padding:44px 0 52px}
.cl .pagehead__in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.cl .pagehead h1{margin:0 0 18px;color:var(--navy);
  font:700 clamp(2.2rem,3.6vw,3.4rem)/1.06 var(--serif);letter-spacing:-.03em;max-width:22ch}
.cl .pagehead h1 em{font-style:normal;color:var(--coral)}
.cl .pagehead .eyebrow{display:block}
.cl .pagehead__lede{max-width:64ch;color:var(--muted);font-size:18px;line-height:1.6}
.cl .pagehead__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.cl .breadcrumb{font-size:18px;color:var(--muted);margin-bottom:14px}
.cl .breadcrumb b{color:var(--navy);font-weight:800}
.cl .breadcrumb .sep{margin:0 .45rem;opacity:.5}
.cl .glance{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 11px 30px rgba(19,63,87,.07);padding:26px 28px}
.cl .glance h2{margin:0 0 14px;color:var(--navy);font:700 1.25rem var(--serif)}
.cl .glance ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.cl .glance li{display:flex;gap:11px;font-size:18px;color:var(--muted);line-height:1.5}
.cl .glance li b{color:var(--navy)}
.cl .glance .gi{color:var(--coral);font-weight:800;flex:none}
/* Cesar: everything on this page reads at 18px, same as the rest of the site */
.cl p,.cl li,.cl .prose p,.cl .prose li{font-size:18px}
/* Match the old page's table exactly. Its rem values resolve differently there — that page runs
   a 125% root, so its .9rem/.8rem render as 18px/16px. Stated in pixels here so the rows land at
   the same 63px height instead of 50px. (Cesar, 2026-08-16) */
.cl .ctable th,.cl .ctable td{padding:16px 20px;font-size:18px}
.cl .ctable thead th{font-size:18px}
.cl .ctable .grp td{font-size:18px}
@media(max-width:980px){.cl .pagehead__in{grid-template-columns:1fr;gap:32px}}
/* the checklist's print logo is for the PDF, not the screen */
.cl .print-logo{display:none}
@media print{.cl .print-logo{display:block;width:170px;margin-bottom:12px}}
/* The "One-time, or recurring?" callout — carried over from the old page because Cesar likes it,
   recoloured to the template: aqua tint, coral rule down the left. (2026-08-16) */
.cl .callout{max-width:min(900px,100%);margin:0 auto 2.4rem;background:var(--aqua);
  border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:14px;
  padding:24px 28px}
.cl .callout h2,.cl .callout h3{margin:0 0 8px;color:var(--navy);font:700 1.3rem var(--serif)}
.cl .callout p{margin:0;color:var(--muted);font-size:18px;line-height:1.6}
.cl .callout b{color:var(--navy)}
@media print{.cl .callout{display:none!important}}
/* Table legend, carried over from the old page. Same shape, template palette, 18px like the
   rest of the page. Sits under the comparison table at its width. (Cesar, 2026-08-16) */
.cl .legend{max-width:min(900px,100%);margin:18px auto 0;display:flex;flex-wrap:wrap;
  gap:12px 32px;font-size:18px;color:var(--muted);line-height:1.5}
.cl .legend span{display:inline-flex;align-items:center;flex-wrap:wrap;min-width:0;gap:.45rem}
.cl .legend b{color:var(--navy)}
.cl .yes{color:#2f9e63;font-weight:800}
.cl .addon-c{color:var(--coral);font-weight:800;font-size:18px}
.cl .na{color:var(--muted);opacity:.55}
.cl .lvl{color:var(--muted);font-size:18px}
@media print{.cl .legend{font-size:8pt;margin-top:.6rem}}
/* Content accordions keep the heading they replaced — Cesar: "Don't change the look of it,
   just make it an accordion." Matches "The full room-by-room checklist" at 24px.
   (2026-08-16) */
.cl .cl-acc>details>summary{font-size:24px;font-weight:700;line-height:1.6;color:var(--ink);
  padding:18px 5px}
.cl .cl-acc>details>summary:after{font-size:1.5rem;color:var(--muted)}
.cl .cl-acc>details{border-bottom:1px solid var(--line)}
/* Cesar: the body inside the accordions was reading small. Bump it, and let the sub-headings
   inside ("Height, weight and safety", etc.) look like the headings they were. (2026-08-16) */
.cl .cl-acc>details p,.cl .cl-acc>details li{font-size:19px;line-height:1.62}
.cl .cl-acc>details h3{font-size:21px;font-weight:700;color:var(--navy);margin:22px 0 8px}
.cl .cl-acc>details h4{font-size:19px;font-weight:700;color:var(--navy)}
/* The closing note under "Beyond this list" sat at 18px while the copy around it is 19px.
   (Cesar, 2026-08-16) */
.cl .areas__note{font-size:19px;line-height:1.62;color:var(--muted)}
.cl .areas__note a{color:var(--blue);font-weight:800}
/* One body size for the whole checklist page — prose, accordion bodies, FAQ answers and the
   closing note were landing on 18px/19px depending on which selector won. 19px everywhere.
   (Cesar, 2026-08-16) */
.cl .prose p,.cl .prose li,.cl .areas__note,
.cl .accordions details p,.cl .accordions details li,
.cl #faq details p,.cl #faq details li{font-size:19px;line-height:1.62}
.cl #faq summary{font-size:20px}
/* Cesar: the checklist body sits on a light blue band, the way the FAQ section does. */
.cl .cl-tint{background:var(--aqua)}
/* Cesar: split the checklist FAQ down the middle rather than the site's .8/1.2. */
.cl #faq .faq-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:980px){.cl #faq .faq-grid{grid-template-columns:1fr}}
/* Cesar: the FAQ intro column travels with you while the questions scroll, the same way the
   photo does on the post-remodel page. (2026-08-16) */
.cl #faq .faq-grid{align-items:start}
.cl #faq .faq-intro{position:sticky;top:117px}
@media(max-width:980px){
  .cl #faq .faq-intro{position:static}
}
/* Its own frame, so only these two intro paragraphs take the blue — the .prose block around
   them holds the entire room-by-room checklist. (Cesar, 2026-08-16) */
.cl .cl-intro-frame{background:var(--aqua);border:1px solid var(--line);
  border-left:4px solid var(--coral);border-radius:14px;padding:24px 28px;margin:0 0 2.4rem}
.cl .cl-intro-frame p{margin:0 0 12px;font-size:19px;line-height:1.62;color:var(--muted)}
.cl .cl-intro-frame p:last-child{margin-bottom:0}
.cl .cl-intro-frame b{color:var(--navy)}
/* A few content accordions ended up outside .cl-acc after the rebuild and were still at 16px.
   Size every content accordion the same, wherever it sits — the FAQ keeps its own 20px.
   (Cesar, 2026-08-16) */
.cl main details>summary,.cl .prose details>summary{font-size:24px;font-weight:700;
  line-height:1.6;color:var(--ink);padding:18px 5px}
.cl #faq details>summary{font-size:20px;padding:17px 5px}
.cl .prose details{border-bottom:1px solid var(--line)}
/* "Beyond this list" lives in its own .prose wrapper whose 2.8rem top margin opened a 45px gap,
   making it read as a separate block from the accordions above. Close it up.
   (Cesar, 2026-08-16) */
.cl .prose:has(>details){margin-top:0!important}
.cl .prose>details:first-child{border-top:0}

/* ---- reviews.html --------------------------------------------------------------------
   Ported from the old site.css shell (Cesar, 2026-08-16: "make it look more like the
   site we're building now... Information there is good. Just a look of it."). The copy
   is unchanged; only the furniture moved onto the new design system. */
.cl .section__head{max-width:820px;margin:0 auto 3rem;text-align:center}
.cl .section__head h2{margin:0;color:var(--navy);
  font:700 clamp(2.25rem,4vw,3.7rem)/1.08 var(--serif);letter-spacing:-.03em}
.cl .section__head .eyebrow{display:block;margin-bottom:12px}
.cl .section__head p{color:var(--muted);font-size:18px}
.cl .rpoints{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  max-width:900px;margin:0 auto 2.4rem}
.cl .rpoints span{display:inline-flex;gap:8px;align-items:center;padding:10px 20px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:18px;font-weight:600;color:var(--navy)}
.cl .rpoints span::before{content:'✦';color:var(--coral)}
.cl .rlive-full{position:relative;max-width:1320px;margin:0 auto;height:760px;overflow:hidden;
  padding:10px 10px 4px;background:#fff;border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow)}
.cl .rlive-full iframe{width:100%;height:100%;border:0;border-radius:12px;
  background:#fff;display:block}
.cl .rlive-more{text-align:center;margin-top:1.4rem}
@media(max-width:600px){.cl .rlive-full{height:560px}}

/* ---- service-areas.html --------------------------------------------------------------
   Ported from site.css when the page moved to the new shell. Cesar, 2026-08-16:
   "Don't change everything in the middle" — so this is the same layout in the new
   tokens, not a redesign. Sizes are absolute px because the old sheet ran a 125% root
   and this one does not. */
.cl .section--tint{background:var(--aqua)}
.cl .sa-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:start}
.cl .sa-list h3{margin:0 0 .7rem;color:var(--navy);font:700 1.25rem var(--serif)}
.cl .sa-towns{columns:3;column-gap:1.4rem;margin:0;padding:0;list-style:none}
.cl .sa-towns li{break-inside:avoid;position:relative;padding:.3rem 0 .3rem 1.1rem;
  font-size:18px;color:var(--ink)}
.cl .sa-towns li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;
  border-radius:50%;background:var(--blue)}
.cl .sa-towns li a{color:var(--navy);font-weight:700;border-bottom:1px solid var(--aqua2)}
.cl .sa-towns li a:hover{color:var(--coral);border-color:var(--coral)}
.cl .sa-zips{margin:.2rem 0 0;color:var(--muted);font-size:18px;line-height:1.95}
.cl .sa-map{position:sticky;top:117px}
.cl .sa-map img{width:100%;max-width:580px;margin:0 auto;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow)}
.cl .area-cap{max-width:82ch;margin:.9rem auto 0;text-align:center;color:var(--muted);
  font-size:18px}
@media(max-width:980px){.cl .sa-layout{grid-template-columns:1fr;gap:1.8rem}
  .cl .sa-map{position:static}.cl .sa-towns{columns:2}}
@media(max-width:600px){.cl .sa-towns{columns:1}}

/* ---- gift-cards.html -----------------------------------------------------------------
   Ported from site.css on the shell move. Cesar, 2026-08-16: top bar, header and hero get
   the new design, "everything else stays the same" — so this is a token translation, not a
   redesign. Absolute px because the old sheet ran a 125% root and this one does not. */
.cl .section--sm{padding:3.6rem 0}
.cl .pagehead__meta{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;
  font-size:18px;color:var(--muted)}
.cl .pagehead__meta span{display:inline-flex;align-items:center;gap:.4rem}
.cl .pagehead__meta b{color:var(--navy);font-weight:700}
.cl .tags{display:flex;flex-wrap:wrap;gap:.55rem}
.cl .tags span{padding:.45rem 1rem;border-radius:999px;background:var(--aqua);
  color:var(--navy);font-size:18px;font-weight:600}
.cl .iframe-wrap{max-width:800px;margin:0 auto;padding:8px;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.cl .iframe-wrap iframe{display:block;width:100%;height:2000px;border:0;border-radius:12px;
  background:#fff}
.cl .iframe-fallback{margin-top:1rem;text-align:center;font-size:18px;color:var(--muted)}
/* the gift card itself — the one piece of art in the hero */
.cl .gcard{position:relative;overflow:hidden;max-width:370px;aspect-ratio:16/10;padding:1.5rem 1.6rem;
  display:flex;flex-direction:column;justify-content:space-between;border-radius:20px;
  background:linear-gradient(140deg,var(--blue),var(--navy));color:#fff;box-shadow:var(--shadow)}
.cl .gcard::after{content:"\2740";position:absolute;right:-6px;bottom:-30px;font-size:8rem;
  line-height:1;color:rgba(255,255,255,.1)}
.cl .gcard__top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start}
.cl .gcard__brand{display:flex;align-items:center;gap:.4rem;font:600 1.35rem var(--serif)}
.cl .gcard__brand .m{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--coral);color:#fff;font-size:18px}
.cl .gcard__chip{width:36px;height:26px;border-radius:5px;background:linear-gradient(135deg,#ffe6b0,var(--yellow))}
.cl .gcard__mid{position:relative;z-index:1;font:600 1.55rem/1.2 var(--serif)}
.cl .gcard__foot{position:relative;z-index:1;display:flex;justify-content:space-between;
  font-size:18px;letter-spacing:.03em;text-transform:uppercase;opacity:.9}
/* three numbered steps */
.cl .steps3{display:flex;flex-wrap:wrap;justify-content:center;gap:21px;max-width:1120px;margin:0 auto}
.cl .steps3 .step{flex:1 1 250px;max-width:calc((100% - 42px)/3);padding:1.7rem;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 11px 30px rgba(19,63,87,.07)}
.cl .steps3 .step .n{display:grid;place-items:center;width:40px;height:40px;margin-bottom:.9rem;
  border-radius:50%;background:var(--coral);color:#fff;font:700 1.05rem var(--serif)}
.cl .steps3 .step h3{margin:0 0 .5rem;color:var(--navy);font:700 1.3rem var(--serif)}
.cl .steps3 .step p{margin:0;color:var(--muted);font-size:18px}
@media(max-width:900px){.cl .steps3 .step{max-width:100%}}

/* ---- book-a-call.html ----------------------------------------------------------------
   The nine "questions worth asking" are accordions (Cesar, 2026-08-16: "so we don't have a
   lot of scrolling"). The <ol> is kept so the 1..9 counter still numbers them; only the
   answer collapses. Ported from site.css otherwise. */
.cl .ghl{padding:.35rem}
.cl .ghl iframe{display:block;width:100%;border:0;border-radius:12px;background:#fff}
.cl .ghl-note{margin:.9rem 0 0;color:var(--muted);font-size:18px;line-height:1.6}
.cl .ghl-note a{font-weight:700;color:var(--blue)}
.cl .qa{max-width:900px;margin:0 auto;padding:0;counter-reset:qa;list-style:none}
.cl .qa>li{counter-increment:qa;position:relative;padding-left:3.3rem;
  border-top:1px solid var(--line)}
.cl .qa>li:first-child{border-top:0}
.cl .qa>li::before{content:counter(qa);position:absolute;left:0;top:1.15rem;
  width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:50%;
  background:var(--aqua);border:1px solid var(--line);color:var(--navy);
  font:700 1rem var(--serif)}
.cl .qa--acc details{border-bottom:0}
.cl .qa--acc summary{display:block;padding:1.15rem 2rem 1.15rem 0;cursor:pointer;list-style:none}
.cl .qa--acc summary::-webkit-details-marker{display:none}
.cl .qa--acc summary h3{margin:0;color:var(--navy);font:700 1.2rem/1.45 var(--sans)}
.cl .qa--acc summary::after{content:"+";position:absolute;right:.2rem;top:1.05rem;
  color:var(--blue);font-size:1.5rem;line-height:1}
.cl .qa--acc details[open] summary::after{content:"–"}
.cl .qa--acc summary:hover h3{color:var(--blue)}
.cl .qa-body{padding:0 2rem .3rem 0}
.cl .qa-body p{margin:0 0 .7rem;color:var(--muted);font-size:18px}
.cl .qa-body p:last-child{margin-bottom:0}
.cl .qa-ours{padding-top:.2rem}
.cl .qa-ours b{color:var(--navy);font-weight:700}
@media(max-width:600px){.cl .qa>li{padding-left:2.9rem}}
/* Section eyebrows ran 12px against 19px body copy, so every section label read as fine
   print rather than a lead-in. Cesar flagged it on the chambers block, on "Before you
   hire anyone", and again on "The guarantee"/"The one condition" — so it is fixed here
   for every inner page rather than patched per page. The HERO eyebrow is deliberately
   left at the homepage size; this is only the in-page section labels. (2026-08-16) */
.cl .section__head .eyebrow,.cl .faq-intro .kicker{font-size:18px;letter-spacing:.09em}

/* ---- contact-us.html -----------------------------------------------------------------
   Ported from site.css on the shell move; content unchanged. */
/* 60% OF THE PAGE, not of .container — container is already inset 2in, so width:60%
   there measured only 51% of the viewport. (Cesar, 2026-08-16) */
.cl .contact-intro{width:60vw;max-width:60vw;margin-left:auto;margin-right:auto}
.cl .contact-intro p{font-size:19px;line-height:1.7}
.cl .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:start}
.cl .contact-card{position:sticky;top:117px;align-self:start;padding:1.7rem 1.8rem;
  background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.cl .contact-card h2{margin:0 0 .9rem;color:var(--navy);font:700 1.35rem var(--serif)}
.cl .contact-card h2+p{margin-top:-.5rem}
.cl .cline{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem 0;
  border-top:1px solid var(--line);font-size:18px}
.cl .cline:first-of-type{border-top:0}
.cl .cline .ci{flex:none;color:var(--coral);font-size:18px;line-height:1.5}
.cl .cline b{display:block;color:var(--navy);font-weight:700}
.cl .cline span,.cl .cline a{color:var(--muted)}
.cl .cline a:hover{color:var(--coral)}
.cl .hours{margin:.5rem 0 0;font-size:18px}
.cl .hours div{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;color:var(--muted)}
.cl .hours b{color:var(--navy);font-weight:700}
.cl .hours-note{display:flex;align-items:center;gap:.6rem;font-size:18px;color:var(--muted)}
@media(max-width:980px){.cl .contact-grid{grid-template-columns:1fr;gap:1.8rem}
  .cl .contact-card{position:static}}
@media(max-width:900px){.cl .contact-intro{width:80vw;max-width:80vw}}
@media(max-width:600px){.cl .contact-intro{width:100%;max-width:100%}}
/* The 40 town links are inline anchors, so their tap target was only the ~27px line box —
   under Google's 44px minimum and fiddly on a phone. On small screens make them block with
   padding so the whole row is tappable. Mobile is the primary device here. (2026-08-16) */
@media(max-width:600px){
  .cl .sa-towns li{padding-top:0;padding-bottom:0}
  .cl .sa-towns li a{display:block;padding:.62rem 0}
  .cl .sa-towns li::before{top:1.05em}
}

/* ---- satisfaction-guarantee.html -------------------------------------------------------
   Cesar, 2026-08-16: the hero had the H1 on the left and nothing on the right, so the aqua
   half of the gradient read as a stray colour block; the first section repeated that aqua
   instead of alternating; and the FAQ had no left column. */
.cl .glance-note{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:18px}
.cl .glance-note a{color:var(--blue);font-weight:700}
.cl .glance ul{margin:0;padding:0;list-style:none}
.cl .glance li .gi{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--aqua);color:var(--navy);font-size:18px;font-weight:800}
.cl .glance li span:last-child{font-size:18px;color:var(--ink)}
.cl .glance li b{color:var(--navy)}
/* the two-column FAQ, same shape the checklist uses */
.cl .faq .faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;
  align-items:start}
.cl .faq .faq-intro{position:sticky;top:117px}
.cl .faq .faq-intro h2{margin:.2rem 0 1rem}
.cl .faq .faq-intro p{color:var(--muted);font-size:18px}
.cl .faq details{border-bottom:1px solid var(--line)}
.cl .faq details>summary{font-size:20px;font-weight:700;line-height:1.5;color:var(--ink);
  padding:17px 5px}
@media(max-width:980px){.cl .faq .faq-grid{grid-template-columns:1fr;gap:32px}
  .cl .faq .faq-intro{position:static}}
/* The FAQ band was aqua here while the homepage and checklist run theirs on white — Cesar:
   "do it like everywhere else... it's not blue. It's like you have in a hero section on the
   left." That is the cream half of the hero gradient, and it separates cleanly from the white
   section above and the deeper aqua CTA below. (2026-08-16) */
.cl .faq--cream{background:var(--cream)}

/* "Contact us today" was a bare paragraph. Four ways to reach the office as whole-card links,
   same hover behaviour as the chamber cards. (Cesar, 2026-08-16: "needs to be a little bit
   nicer") */
.cl .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
  max-width:1120px;margin:0 auto}
.cl .way{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem;
  padding:1.7rem 1.3rem;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 11px 30px rgba(19,63,87,.07);color:inherit;text-decoration:none;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.cl .way:hover,.cl .way:focus-visible{transform:translateY(-3px);border-color:var(--blue);
  box-shadow:0 14px 32px rgba(19,63,87,.16)}
.cl .way:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cl .way__mark{display:grid;place-items:center;width:52px;height:52px;margin-bottom:.5rem;
  border-radius:14px;background:var(--aqua);color:var(--navy);font-size:1.4rem}
.cl .way b{color:var(--navy);font-size:1.2rem}
.cl .way:hover b{text-decoration:underline}
.cl .way__line{color:var(--blue);font-weight:700;font-size:18px}
.cl .way__note{color:var(--muted);font-size:18px}
.cl .ways__foot{margin:1.8rem 0 0;text-align:center;color:var(--muted);font-size:18px}
.cl .ways__foot a{color:var(--blue);font-weight:700}
/* A single review inside a prose section — same card as the homepage review grid, just one up.
   Cesar, 2026-08-16: a bare pull-quote "didn't mark it as a review". */
.cl .review-grid--one{grid-template-columns:1fr;max-width:760px;margin:1.8rem auto}
.cl .review-grid .stars{color:#e89b13;letter-spacing:2px;font-size:18px}
.cl .review-grid blockquote{margin:10px 0 16px;color:var(--navy);font:600 1.2rem/1.5 var(--serif)}
.cl .review-grid cite{font-style:normal;font-weight:800;color:var(--navy)}
.cl .review-grid small{display:block;color:var(--muted);font-weight:400;font-size:18px}
/* contact-careers.html — the AvaHR jobs embed. Ported from site.css on the shell move; the
   embed markup and its scripts are untouched (a wrong id fails silently). (2026-08-16) */
.cl .avahr{max-width:900px;margin:0 auto;min-height:120px}
.cl .avahr #profileEmbed{font-family:var(--sans)}
.cl .avahr img{max-width:100%;height:auto}

/* ---- room pages (kitchen / bathroom / bedroom / living room / laundry) ------------------
   Ported from site.css on the shell move. The copy column is the one pinned, not the
   calculator: the calculator runs taller, and sticking it left dead space beside the text
   as you scrolled. That was Cesar's call originally and it still holds. */
.cl .pricing-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:2.4rem;align-items:start}
.cl .pricing-wrap>div:first-child{max-width:none;margin-bottom:0;position:sticky;top:117px;
  align-self:start}
.cl .pricing-calc{width:100%}
.cl .pricing-calc__frame{width:100%;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.cl .pricing-calc__frame iframe{display:block;width:100%;border:0}
.cl .video-cap{margin:.7rem 0 0;text-align:center;color:var(--muted);font-size:18px}
.cl .yourway-inline{font-size:18px}
/* Blue circled check marks. These existed only under .town, so the same markup on the
   calculator page rendered as plain bullets. Cesar asked for "blue checks" beside How often /
   Size & condition / Your priorities. (2026-08-16) */
.cl ul.checks{display:flex;flex-direction:column;gap:.85rem;margin:1.4rem 0;
  list-style:none;padding-left:0}
.cl ul.checks li{position:relative;padding-left:2.2rem;color:var(--muted);
  font-size:18px;line-height:1.7}
.cl ul.checks li::before{content:'\2713';position:absolute;left:0;top:.15em;
  width:26px;height:26px;background:var(--blue);color:#fff;border-radius:50%;
  display:grid;place-items:center;font-size:18px;font-weight:700}
.cl ul.checks b{color:var(--navy)}

.cl .yourway-inline b{color:var(--navy)}
/* Blog index cards. The listing is built from .svc-grid/.svc, which existed only under the
   .town scope — so once the blog moved onto the new shell (scope .cl) every post rendered as
   a full-width stacked block. Written with real media queries rather than the flattened
   single-column rules the .town copies ended up with. (2026-08-16) */
.cl .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem;align-items:start}
@media(max-width:1000px){.cl .svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cl .svc-grid{grid-template-columns:1fr}}
.cl .svc{display:block;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:1.6rem;height:100%;
  box-shadow:0 11px 30px rgba(19,63,87,.07);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.cl .svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--aqua2)}
.cl .svc h3{margin:0 0 .5rem;color:var(--navy);font:700 20px/1.3 var(--serif)}
.cl .svc:hover h3{color:var(--coral)}
.cl .svc p{margin:0;color:var(--muted);font-size:18px;line-height:1.6}

/* ---- blog post: hero air + the reading rail ----------------------------------------
   Cesar, 2026-08-16: the post photo sat flush against the page head ("the picture is sitting
   on top of it") — he wants about an inch between them. */
.cl .post-hero{margin-top:96px}
@media(max-width:900px){.cl .post-hero{margin-top:56px}}
@media(max-width:980px){.cl .pricing-wrap{grid-template-columns:1fr;gap:1.8rem}
  .cl .pricing-wrap>div:first-child{max-width:78ch;margin-bottom:.4rem;position:static}}
/* Service pages: exclusion chips and the three-up review grid, ported from site.css. */
.cl .excl{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.cl .excl span{padding:.45rem 1rem;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--muted);font-size:18px}
.cl .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px;margin-inline:auto}
@media(max-width:900px){.cl .rev-grid{grid-template-columns:1fr}}

/* ---- town pages: readable type ---------------------------------------------------------
   Cesar, 2026-08-16: "fonts on those pages... it's smaller now". Real sentences were running
   at 10-14px — the section labels at 12px are the same fine-print problem already fixed on the
   inner pages. Scoped to .town so the homepage, which shares .kicker and .since, is untouched. */
.town .kicker{font-size:18px;letter-spacing:.09em}
.town .town-chips li{font-size:18px}
.town .review-float cite{font-size:18px}
.town .since span{font-size:11px;line-height:1.2}
.town .town-image figcaption{font-size:18px}
.town .service-card span{font-size:12px}
.town .prose p,.town .prose li{font-size:18px}
.town .town-note{font-size:18px}
.town .section-head>p:not(.kicker){font-size:18px}


/* ---- town pages: original body content -------------------------------------------
   Cesar reverted the town bodies to the original copy to protect the keywords those
   pages rank on. That markup was written against site.css, which these pages no longer
   load, so the rules it needs are ported here under a .town scope. rem sizes become px:
   site.css ran a 125% root, so .9rem meant 18px there and would render 14.4px here.
   Comments are stripped from the source before extracting — a stray fragment left an
   unterminated comment last time and silently truncated the whole stylesheet. */
.town .area-map{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/9;max-width:1000px;margin:0 auto}
.town .area-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.town .btn--ghost{background:transparent;color:var(--teal-ink);border-color:var(--line)}
.town .btn--ghost:hover{border-color:var(--teal);transform:translateY(-2px)}
.town .btn--ghost{color:#cfe2e6;border-color:var(--line)}
.town .btn--ghost:hover{border-color:#8fd3dd;color:#8fd3dd}
.town .btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.town .btn--ghost:hover{background:rgba(255,255,255,.12)}
.town .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.town .btn--lg{padding:1rem 1.9rem;font-size:21px}
.town .btn--lg{padding:.9rem 1.2rem;font-size:19px}
.town .btn--lg{font-size:18px;padding:.82rem 1.55rem}
.town .btn--orange{background:var(--coral);color:#fff}
.town .btn--orange:hover{background:var(--orange-dk);color:#fff;transform:translateY(-2px)}
.town .btn--teal{background:var(--teal);color:#fff}
.town .btn--teal:hover{background:var(--teal-dk);color:#fff;transform:translateY(-2px)}
.town .btn--teal{background:#2c7fa2;color:#fff}
.town .btn--teal:hover{background:#3893ba}
.town .btn--teal{background:#fff;color:var(--teal)}
.town .btn--teal:hover{background:#eef6f8;color:var(--teal-dk)}
.town .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem 1.7rem}
.town .card){display:block;align-self:start;position:sticky;top:112px}
.town .card{width:100%;aspect-ratio:3/4;height:auto;min-height:340px;max-height:min(78vh,820px);display:flex;flex-direction:column;overflow:hidden}
.town .card>div{flex:0 0 auto}
.town .card img{flex:1 1 0;height:0;width:100%;object-fit:cover;display:block}
.town .card){display:block;position:static}
.town .card{height:auto;aspect-ratio:auto;max-height:none;min-height:0}
.town .card img{flex:none;height:clamp(260px,58vw,420px)}
.town .card--quote .stars{color:#e89b13;letter-spacing:2px;margin-bottom:.5rem}
.town .card--quote p{font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--ink);margin:0 0 .9rem}
.town .card--quote .who{font-weight:600;font-size:18px;color:var(--teal-ink)}
.town .card--quote .who small{display:block;color:var(--ink-soft);font-weight:400}
.town .card--quote .who,.town [data-theme="dark"] .rev .who,.town [data-theme="dark"] .faq summary,.town [data-theme="dark"] .commun li b,.town [data-theme="dark"] .pagehead__meta b,.town [data-theme="dark"] .breadcrumb b,.town [data-theme="dark"] .glance h2,.town [data-theme="dark"] .glance h3,.town [data-theme="dark"] .areas li{color:#8fd3dd}
.town .cta__actions{display:flex;flex-direction:column;gap:.8rem;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.8rem;box-shadow:var(--shadow)}
.town .cta__actions .btn{width:100%;justify-content:center}
.town .cta__actions{padding:1.2rem}
.town .cta__form-link{text-align:center;font-size:18px;color:var(--ink-soft)}
.town .cta__form-link a{color:var(--teal-ink);text-decoration:underline}
.town .cta__hours{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:18px;color:var(--ink-soft);margin-top:.3rem}
.town .cta__in{display:grid;grid-template-columns:1.05fr .95fr;gap:3.4rem;align-items:center}
.town .cta__in{grid-template-columns:1fr;gap:2rem}
.town .cta__or{display:flex;align-items:center;gap:.7rem;color:var(--ink-soft);font-size:18px;margin:.2rem 0}
.town .cta__or::before,.town .cta__or::after{content:'';flex:1;height:1px;background:var(--line)}
.town .cta__primary-label{font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin-bottom:.2rem}
.town .dot{width:9px;height:9px;border-radius:50%;background:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.2)}
.town .dot.open{background:#2fa36a;box-shadow:0 0 0 3px rgba(47,163,106,.22)}
.town .h1-since{display:block;font-size:.6em;color:var(--ink-soft);font-style:italic;font-weight:400;margin-top:.55em}
.town .media-cap{padding:.9rem 1.2rem;font-size:18px;color:var(--ink-soft)}
.town .pagehead__gtag{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:18px;color:var(--ink-soft)}
.town .pagehead__main{order:1}
.town .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:52px;background:rgba(26,93,127,.92);border-radius:14px;display:grid;place-items:center;transition:.18s}
.town .play::after{content:'';border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-left:4px}
.town .play{background:var(--orange);transform:translate(-50%,-50%) scale(1.08)}
.town .sa-layout--even{grid-template-columns:minmax(0,34rem) minmax(0,1fr);align-items:center;max-width:1240px;margin-inline:auto}
.town .sa-towns--2{columns:2}
.town .split--media{align-items:stretch}
.town .split--media>div:has(>.card){display:block;align-self:start;position:sticky;top:112px}
.town .split--media>div>.btn{align-self:flex-start}
.town .split--media .card{width:100%;aspect-ratio:3/4;height:auto;min-height:340px;max-height:min(78vh,820px);display:flex;flex-direction:column;overflow:hidden}
.town .split--media .card>div{flex:0 0 auto}
.town .split--media .card img{flex:1 1 0;height:0;width:100%;object-fit:cover;display:block}
.town .split--media>div:has(>.card){display:block;position:static}
.town .split--media .card{height:auto;aspect-ratio:auto;max-height:none;min-height:0}
.town .split--media .card img{flex:none;height:clamp(260px,58vw,420px)}
.town .svc{display:block;text-decoration:none;color:inherit;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-md);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.town .svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--aqua)}
.town .svc:hover h3{color:var(--coral)}
.town .svc .ic{font-size:34px;margin-bottom:.7rem}
.town .svc h3{font-size:19px}
.town .svc p{color:var(--ink-soft);font-size:18px;margin:0}
.town .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem;max-width:100%;margin-inline:auto}
.town .svc-grid{grid-template-columns:1fr 1fr}
.town .svc-grid{grid-template-columns:1fr}
.town .video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#0c0c0c}
.town .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.town .video-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0c0c0c}
.town .video-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.town .video-facade .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:52px;background:rgba(26,93,127,.92);border-radius:14px;display:grid;place-items:center;transition:.18s}
.town .video-facade .play::after{content:'';border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-left:4px}
.town .video-facade:hover .play{background:var(--orange);transform:translate(-50%,-50%) scale(1.08)}
.town .yourway-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem}
.town .yourway-note{max-width:74ch;margin:2rem auto 0;text-align:center;font-size:18px;color:var(--ink-soft);line-height:1.65}
.town .yourway-note b{color:var(--teal-ink)}
/* the restored body labels sections with .eyebrow, not .kicker */
.town .section__head .eyebrow,.town .section-head .eyebrow{font-size:18px;letter-spacing:.09em}
.town cite{font-size:18px}
.town .media-cap,.town figcaption{font-size:18px}
/* remaining fine print in the restored bodies: labels outside .section__head, and the
   review attributions */
.town .eyebrow:not(.town-hero .eyebrow):not(.hero .eyebrow){font-size:18px;letter-spacing:.09em}
.town .card cite,.town blockquote cite,.town .rev cite{font-size:18px}
.town .area-note,.town .sa-zips,.town .town-note{font-size:18px}

/* ---- town pages: the ORIGINAL body, wearing the NEW design ------------------------------
   Cesar, 2026-08-16: "the information we have, what we had original on all those pages, just
   the styling is in there... apply the new styling to Barrington."
   So: not one word of markup changes. The original sections keep their own classes and this
   dresses them in the redesign — Fraunces headings, the alternating cream/aqua bands, the
   same measure as the rest of the site. Written once here, it lands on all 40 towns. */

/* measure: the old .container ran the full 1425px; the new shell uses .wrap */
/* Cesar, 2026-08-16: "frame wider". The 2in inset left the town pages narrower than the
   content needed — the longest checklist line wrapped at that measure. */
.town .container{width:min(1600px,calc(100% - 1.1in));margin-left:auto;margin-right:auto}
/* Cesar, 2026-08-16: the space under "Who cleans large estate homes" ran ~2 inches into the
   next block — 92px of bottom padding plus 64px of the next section's top. Halved, so the
   content-to-content gap goes 156px -> 80px across the town pages. */
.town .section{padding:34px 0}
.town .section--sm{padding:24px 0}

/* the band colours. site.css defined --tint, which does not exist here, so every section
   rendered white and the page lost the alternation the copy was written for. */
.town .section--tint{background:var(--aqua)}
.town .section--cream{background:var(--cream)}

/* headings: 24px DM Sans -> the serif display face the rest of the site uses */
.town .section__head{max-width:820px;margin:0 auto 46px;text-align:center}
.town .section__head h2,.town .section-head h2{margin:0;color:var(--navy);
  font:700 clamp(2.1rem,3.4vw,3.1rem)/1.1 var(--serif);letter-spacing:-.03em}
.town .section__head>p{margin:.9rem 0 0;color:var(--muted);font-size:18px}
.town h3{color:var(--navy);font-family:var(--serif);font-weight:700}

/* body copy at the site's reading size */
.town .prose{max-width:none}
.town .prose p,.town .prose li{font-size:19px;line-height:1.7;color:var(--ink)}
.town .prose h3{margin:2rem 0 .6rem;font-size:1.45rem}
.town .prose a{color:var(--blue);font-weight:600}
.town blockquote{margin:1.6rem 0;padding:1.4rem 1.6rem;background:var(--cream);
  border:1px solid var(--line);border-radius:18px}
.town blockquote p{margin:0 0 .5rem;color:var(--navy);font:600 1.2rem/1.5 var(--serif)}

/* cards and grids inherit the new card treatment */
.town .card,.town .svc{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 11px 30px rgba(19,63,87,.07);padding:1.7rem}
.town .card h3,.town .svc h3{margin:0 0 .5rem;font-size:1.3rem}
.town .card p,.town .svc p{margin:0;color:var(--muted);font-size:18px}
.town ul.checks li,.town .town-list li{font-size:18px;line-height:1.7}
/* headings that sit in a split/media block rather than a .section__head */
.town .split h2,.town .split--media h2,.town .prose h2{margin:0 0 .8rem;color:var(--navy);
  font:700 clamp(2rem,3vw,2.8rem)/1.12 var(--serif);letter-spacing:-.03em}

/* ---- town pages: the sticky split ------------------------------------------------------
   Cesar, 2026-08-16: "picture on the left, that's a floating picture that moves along the
   text because the text is longer... split the page in half, wording on the right, big image
   on the left, and the image is floating."
   The earlier port flattened site.css's media queries into one list, so the MOBILE overrides
   (position:static, a short fixed-height image) were applying at every width and the picture
   stopped floating. These restate the desktop behaviour and re-fence the mobile one. */
.town .split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.town .split--media{align-items:stretch}
.town .split--media>div:has(>.card){display:block;align-self:start;position:sticky;top:117px}
.town .split--media .card{width:100%;aspect-ratio:3/4;height:auto;min-height:340px;
  max-height:min(78vh,820px);display:flex;flex-direction:column;overflow:hidden}
.town .split--media .card>div{flex:0 0 auto}
.town .split--media .card img{flex:1 1 0;height:0;width:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .town .split{grid-template-columns:1fr;gap:2rem}
  .town .split--media>div:has(>.card){position:static}
  .town .split--media .card{height:auto;aspect-ratio:auto;max-height:none;min-height:0}
  .town .split--media .card img{flex:none;height:clamp(260px,58vw,420px)}
}

/* ---- tokens the ported town rules expect ------------------------------------------------
   The original body markup was styled by site.css, which defined its own variables. Porting
   the rules without them left seven var() references resolving to nothing — which is why the
   video lost its rounded corners (border-radius:var(--radius) computed to 0) and several
   shadows and link colours quietly flattened. Mapped onto the new design's tokens. */
:root{
  --radius:18px;
  --ink-soft:#617780;
  --teal-ink:#133f57;
  --teal:#187b9d;                 /* the calculator's result panel gradient needs BOTH
                                     --teal and --teal-dk; only the second was defined,
                                     so the panel rendered transparent (2026-08-16) */
  --teal-dk:#0d2d3f;
  --orange-dk:#d85643;
  --shadow-md:0 11px 30px rgba(19,63,87,.10);
  --shadow-lift:0 18px 40px rgba(19,63,87,.18);
}
/* the SEBO section's bullets ran 16px against 18px body copy */
.town .prose ul li,.town .checks li,.town ul.checks li{font-size:18px;line-height:1.7}
.town .video-embed{border-radius:18px}
/* Body copy that is NOT inside .prose — the split columns carry plain <p> children and were
   falling back to the 16px base while the prose beside them ran 19px. */
.town .split>div>p,.town .split>div>ul li,
.town .container>p,.town .wrap>p{font-size:19px;line-height:1.7}
.town .kicker,.town .eyebrow,.town .media-cap,.town .video-cap,.town figcaption{line-height:1.5}
.town .media-cap,.town .video-cap,.town figcaption{font-size:18px}
/* SEBO video credit — we are showing a video we do not own, so the notice has to be legible,
   not buried. Ported from the pre-launch markup; --tint did not exist here. (2026-08-16) */
.town .video-credit{display:block;margin-top:.7rem;padding:.7rem .9rem;font-size:18px;
  line-height:1.55;background:var(--aqua);border-left:3px solid var(--blue);
  border-radius:8px;color:var(--ink)}
.town .video-credit a{color:var(--blue);font-weight:700}
/* Cesar, 2026-08-16: "the text on the left, move a little bit higher." The split was centring
   its columns, and the first paragraph carried a 19px top margin on top of that — so the copy
   started below the video it sits beside. Top-align the columns and drop the leading margin. */
.town .split{align-items:start}
.town .split>div>:first-child{margin-top:0}
.town .split>div>p:first-child,.town .split>div>.prose>p:first-child{margin-top:0}
/* the caption sits directly under the video and matches its width — centre it on the video,
   the credit box with it (Cesar, 2026-08-16) */
.town .video-cap{text-align:center}
.town .video-credit{text-align:center}

/* ---- town pages: the "Peace of mind" cards ---------------------------------------------
   These three were rendering as bare text — no grid, no card, no padding. The rules exist in
   this stylesheet but are scoped to #promise, an id the town pages do not carry, so nothing
   reached them. Restated here to match the homepage treatment. (Cesar, 2026-08-16) */
/* full container width — Cesar: "you keep going narrow and narrow, you have to spread them."
   The 1120px cap left the cards inset from the copy above them. */
.town .promise{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.town .promise__item{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:1.8rem 1.7rem;box-shadow:0 11px 30px rgba(19,63,87,.07);
  transition:transform .18s,box-shadow .18s}
.town .promise__item:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(19,63,87,.1)}
.town .promise__item h3{margin:0 0 .7rem;color:var(--navy);
  font:700 1.3rem/1.3 var(--serif);display:flex;align-items:baseline;gap:.5rem}
.town .promise__item .ic{color:var(--coral);font-size:18px;flex:none}
.town .promise__item p{margin:0;color:var(--muted);font-size:18px;line-height:1.65}
/* Centred with a real measure, but wide enough that the longest line ("Green by default —
   kid- & pet-safe products every visit…") fits on ONE line: it needs ~1110px at 19px, so a
   980px cap wrapped it and full-bleed looked loose. (Cesar, 2026-08-16) */
/* Centred block, not full-bleed — Cesar: "they are all sitting on the left, out of
   balance." Wide enough that the longest line still fits on one line (~1110px at 19px),
   narrow enough to sit centred under the cards above. (2026-08-16) */
/* nudged right of centre — Cesar wanted it further from the left edge, so the block keeps
   its 1150px measure but sits with more space on the left than the right (2026-08-16) */
.town ul.checks{max-width:1150px}
.town .split ul.checks{max-width:none}
@media(max-width:900px){.town .promise{grid-template-columns:1fr}}

/* ---- town pages: the blue check marks --------------------------------------------------
   "checks" was never in the port list, so these lists lost their ✓ badges and fell back to
   plain disc bullets. Restated from site.css with the new tokens; the old rem sizes are
   converted to px because that sheet ran a 125% root. (Cesar, 2026-08-16) */
.town ul.checks{display:flex;flex-direction:column;gap:.85rem;
  margin:1.4rem 0 1.4rem auto;
  list-style:none;padding-left:0}
.town ul.checks li{position:relative;padding-left:2.2rem;color:var(--muted);
  font-size:18px;line-height:1.7}
.town ul.checks li::before{content:'✓';position:absolute;left:0;top:.15em;
  width:26px;height:26px;background:var(--blue);color:#fff;border-radius:50%;
  display:grid;place-items:center;font-size:18px;font-weight:700}
.town ul.checks b{color:var(--navy)}
/* town review grid — the homepage treatment, carrying each town's OWN reviews */
.town .reviews .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}
.town .reviews article{padding:27px;border:1px solid var(--line);border-radius:18px;
  background:var(--cream)}
.town .reviews .stars{color:#e89b13;letter-spacing:2px}
.town .reviews blockquote{margin:10px 0 18px;color:var(--navy);font:600 1.15rem/1.45 var(--serif)}
.town .reviews cite{font-style:normal;font-weight:800;color:var(--navy)}
.town .reviews small{display:block;color:var(--muted);font-weight:400;font-size:18px}
.town .reviews .review-score{display:grid;grid-template-columns:auto auto;column-gap:10px;
  align-items:center}
.town .reviews .review-score strong{grid-row:1/3;font:700 3.5rem/1 var(--serif);color:var(--navy)}
.town .reviews .review-score span:last-child{color:var(--muted);font-size:18px}
.town .reviews-lede{max-width:820px;margin:0 auto 2rem;text-align:center;color:var(--muted);font-size:18px}
.town .reviews .all-services{margin-top:2rem;text-align:center}
@media(max-width:900px){.town .reviews .review-grid{grid-template-columns:1fr}}

/* ---- town pages: the "which one do you need" cards -------------------------------------
   .yourway never made the port list, so these four rendered as bare text in a grid — no
   frame, no padding, no shadow. Restated from site.css in the new tokens. Same root cause as
   the .promise cards and the ✓ badges. (Cesar, 2026-08-16) */
.town .yourway-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:21px}
.town .yourway{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.7rem;
  box-shadow:0 11px 30px rgba(19,63,87,.07);transition:transform .18s,box-shadow .18s,border-color .18s}
.town .yourway:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(19,63,87,.14);
  border-color:var(--aqua2)}
.town .yourway h3{margin:0 0 .6rem;color:var(--navy);font:700 1.25rem/1.3 var(--serif)}
.town .yourway p{margin:0;color:var(--muted);font-size:18px;line-height:1.65}
.town .yourway a{color:var(--blue);font-weight:600}
.town .yourway-note{max-width:74ch;margin:2rem auto 0;text-align:center;color:var(--muted);
  font-size:18px;line-height:1.65}
.town .yourway-note b{color:var(--navy)}
/* the pull-out inside the pricing section */
.town .yourway-inline{margin:1.4rem 0 0;padding:1.1rem 1.3rem;border-left:3px solid var(--coral);
  background:var(--aqua);border-radius:0 12px 12px 0;font-size:18px}
.town .yourway-inline b{color:var(--navy)}

/* ---- town pages: two-column blocks, with their breakpoints intact ----------------------
   The port flattened site.css's media queries, so the MOBILE single-column overrides were
   applying at every width — the pricer went full-bleed and the areas list lost its map
   column. Restated with the breakpoints where they belong. (Cesar, 2026-08-16) */
.town .pricing-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:2.4rem;align-items:start}
.town .pricing-wrap>div:first-child{position:sticky;top:117px;align-self:start}
.town .pricing-calc{width:100%}
.town .pricing-calc__frame{border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow)}
.town .sa-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:start}
/* the list is the WIDER column, the map the narrower one. site.css said 34rem, which meant
   680px under its 125% root and rendered 544px here — so the two columns swapped weight and
   the map ended up dominating. Pinned in px. (Cesar, 2026-08-16) */
.town .sa-layout--even{grid-template-columns:minmax(0,680px) minmax(0,1fr);align-items:start;
  max-width:none}
.town .sa-towns{columns:2;column-gap:1.6rem;margin:0;padding:0;list-style:none}
.town .sa-towns li{break-inside:avoid;position:relative;padding:.35rem 0 .35rem 1.1rem;font-size:18px}
.town .sa-towns li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;
  border-radius:50%;background:var(--blue)}
.town .sa-towns li a{color:var(--navy);font-weight:700;border-bottom:1px solid var(--aqua2)}
.town .sa-towns li a:hover{color:var(--coral);border-color:var(--coral)}
.town .area-map{aspect-ratio:4/3;max-width:none}
@media(max-width:980px){
  .town .pricing-wrap{grid-template-columns:1fr;gap:1.8rem}
  .town .pricing-wrap>div:first-child{position:static}
  .town .sa-layout,.town .sa-layout--even{grid-template-columns:1fr;gap:1.8rem}
  .town .sa-towns{columns:2}
}
@media(max-width:600px){.town .sa-towns{columns:1}}
/* areas block: heading, ZIP line and the closing "also cleaning nearby" caption */
.town .sa-list h3{margin:0 0 1rem;color:var(--navy);font:700 1.35rem var(--serif)}
.town .sa-map{align-self:start}
.town .area-map{aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.town .area-cap{max-width:82ch;margin:1.6rem auto 0;text-align:center;color:var(--muted);font-size:18px}

/* ---- town pages: ONE type scale --------------------------------------------------------
   The page had drifted to six body sizes (16 / 16.64 / 17 / 18 / 18.4 / 19), four h3 sizes
   and an h2 at 24px next to h2s at 49px, because the restored markup mixes site.css classes,
   the redesign's classes and inline leftovers. This pins the scale in one place.
   (Cesar, 2026-08-16: "you are not paying attention to the font size") */
.town p,.town li,.town blockquote,.town .prose p,.town .prose li{font-size:19px;line-height:1.7}
.town .promise__item p,.town .yourway p,.town .card p,.town .svc p{font-size:18px;line-height:1.65}
.town h2{font:700 clamp(2.1rem,3.4vw,3.1rem)/1.1 var(--serif);letter-spacing:-.03em;color:var(--navy)}
.town .faq h2,.town .final-cta h2{font-size:clamp(2.25rem,4vw,3.7rem)}
.town h3,.town .promise__item h3,.town .yourway h3,.town .sa-list h3,.town .card h3,.town .svc h3
  {font:700 1.35rem/1.35 var(--serif);color:var(--navy)}
/* review quotes read as voice, one size wherever they appear */
.town .tband .rev p,.town .reviews blockquote,.town .review-float blockquote
  {font:600 1.15rem/1.5 var(--serif);color:var(--navy)}
/* meta / attribution / captions — one small size, never below 15px */
.town small,.town cite,.town .who,.town .who small,.town .media-cap,.town .video-cap,
.town figcaption,.town .tband__all,.town .area-cap small{font-size:18px}
.town .who{font-size:18px}
.town .eyebrow,.town .kicker{font-size:18px;letter-spacing:.09em}
.town .town-chips li{font-size:18px}
/* one section-heading size across the body; the FAQ and closing CTA stay a step larger */
.town .split h2,.town .split--media h2,.town .prose h2{font-size:clamp(2.1rem,3.4vw,3.1rem)}
/* the review rail carried its own smaller meta sizes (12.64 / 14.4) */
.town .tband .rev .who{font-size:18px}
.town .tband .rev .who small{font-size:18px;display:block;color:var(--muted);font-weight:400}
.town .tband__all{font-size:18px}
.town .tband .rev p{font-size:1.15rem}
/* areas block, matched to the screenshot: the list is the wider column and the map sits
   beside it at roughly the same height instead of overhanging by 90px (Cesar, 2026-08-16) */
.town .sa-layout--even{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:2.6rem}
.town .area-map{aspect-ratio:3/2}
.town .sa-towns li{padding-top:.42rem;padding-bottom:.42rem}
.town .sa-list h3{font-size:1.45rem}

/* ================= 18px FLOOR =========================================================
   Cesar, 2026-08-16: "check the font size everywhere. 18 minimum."
   The audit found readable text running as low as 11.68px across every page type — section
   labels at 12px, review attributions at 14.4px, list items at 16px, captions at 15px. This
   raises anything a person actually reads to 18px. Purely decorative glyphs and the two
   circular badges are listed at the bottom as the deliberate exceptions. */
.cl .eyebrow,.cl .kicker,.town .eyebrow,.town .kicker{font-size:18px;letter-spacing:.09em}
.cl li,.cl .prose li,.cl ul li,.cl ol li{font-size:18px}
.cl a.text-link,.town a.text-link{font-size:18px}
.cl small,.cl cite,.cl figcaption,.cl .glance-note,.cl .iframe-fallback,
.town small,.town cite,.town figcaption,.town .who,.town .who small,
.town .media-cap,.town .video-cap,.town .video-credit,.town .tband__all,
.cl .way__note,.cl .way__line,.cl .chamber-card__note,.cl .qa-ours,
.cl .glance li span:last-child,.town .glance li span:last-child{font-size:18px}
.town .tband .rev p,.town .tband .rev .who,.town .tband .rev .who small{font-size:18px}
.cl .ctable th,.cl .ctable td,.cl th,.cl td{font-size:18px}
.cl .stars,.town .stars,.cl .tband__stars,.town .tband__stars{font-size:18px}
.town .town-chips li,.town .sa-towns li,.town .checks li,.town ul.checks li{font-size:18px}
.cl .promise__item p,.cl .yourway p,.cl .card p,.cl .svc p,
.town .promise__item p,.town .yourway p,.town .card p,.town .svc p{font-size:18px}
/* Deliberate exceptions — these are icons and badges, not reading text. Sizing them to 18px
   breaks the circle they sit in:
     .since span      "years of local care" inside the 106px round badge
     .col-tag         the checklist table's column tag
     .service-card span  the "Most popular" pill  */

/* .areas-grid had no mobile rule — it stayed two columns with an 80px gap at 375px. It only
   just fitted while the town names were 16px; at the new 18px floor their min-content width
   pushed the page to 418px. minmax(0,…) also lets the columns actually shrink. (2026-08-16) */
.areas-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
@media(max-width:900px){
  .areas-grid{grid-template-columns:1fr;gap:32px}
  .area-list{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.area-list{grid-template-columns:1fr}}

/* Mobile hero order on town pages. The three chips carried no order, so they defaulted to 0
   and sat above the eyebrow — pushing the headline and the photo down the screen. Cesar,
   2026-08-16: "those 3 buttons need to go down below picture, this way the picture will go
   up." Order now: eyebrow, headline, photo, chips, lede, buttons. */
@media(max-width:900px){
  /* headline dialled back so it no longer eats the screen — five lines at 45px became three.
     With it smaller, the eyebrow goes back above it where it reads as a label. */
  .town .hero h1{font-size:clamp(2rem,8.6vw,2.4rem);line-height:1.06}
  .town .hero-copy .eyebrow{order:1;margin:0 0 10px}
  .town .hero-copy h1{order:2}
  .town .hero-copy .hero-image,.town .hero-image{order:3}
  .town .hero-copy .town-chips{order:4;margin:14px 0 0}
  .town .hero-copy .lede{order:5}
  .town .hero-copy .hero-actions{order:6}
  .town .hero-copy .microcopy{order:7}
  .town .hero-copy .rating{order:8}
  .town .hero-copy .heroclaim{order:9}
}

/* The hero review card was covering 69% of the photo on a phone — including the cleaner's
   face. Keep the type at the 18px floor and shrink the CARD instead: clamp the quote to two
   lines, tighten the padding, and sit it at the bottom edge. (Cesar, 2026-08-16) */
@media(max-width:600px){
  .review-float{left:12px;right:12px;bottom:10px;width:auto;padding:11px 13px;border-radius:12px}
  .review-float blockquote{margin:2px 0 4px;font-size:18px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .review-float cite{font-size:18px;line-height:1.3}
  .review-float .stars{font-size:18px;line-height:1}
}
/* halve the gap between the header and the hero label on phones — 44px was a desktop-sized
   breathing space on a 375px screen (Cesar, 2026-08-16) */
@media(max-width:900px){.town .hero-grid{padding-top:22px}}
/* The "Peace of mind" block carries three cards and a checklist, so it needs more air than
   the text sections around it. Cesar, 2026-08-16: "this section needs more buffer, maybe
   fifty pixels." Targeted by content so it does not need an id on 40 pages. */
.town .section:has(.promise){padding:50px 0}

/* ---- inline links have to look like links ----------------------------------------------
   Several links in the town copy were rendering in the body colour with no underline — "the
   Catlow", "Barrington Park District", "the Village pumps its own supply" were invisible as
   links. The rules that coloured them only reached .prose, and much of the restored markup
   puts paragraphs straight inside .split columns. (Cesar, 2026-08-16) */
.town p a:not(.button):not(.text-link):not(.final-phone),
.town li a:not(.button):not(.text-link),
.town .prose a:not(.button):not(.text-link),
.cl p a:not(.button):not(.text-link):not(.final-phone),
.cl li a:not(.button):not(.text-link),
.cl .prose a:not(.button):not(.text-link){
  color:var(--blue);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;font-weight:600}
.town p a:hover,.town li a:hover,.cl p a:hover,.cl li a:hover{color:var(--coral)}
/* keep card and grid links on their own treatment */
.town .service-card a,.town .yourway a,.town .promise__item a,
.town .sa-towns a,.cl .service-card a{text-decoration:none}
.town .sa-towns li a{border-bottom:1px solid var(--aqua2)}
/* the A+ BBB badge sits centred under the hero photo (Cesar, 2026-08-16) */
.town .hero-bbb{display:inline-flex;align-items:center;gap:12px;margin:18px auto 0;
  padding:10px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 22px rgba(19,63,87,.08);text-decoration:none;width:fit-content}
/* pulled up out of the second grid row so it sits ~80px under the photo rather than 200 */
.town .hero-grid>.hero-bbb{grid-column:2;justify-self:center;margin:-120px auto 0}
.town .hero-bbb .bbb-badge__seal{display:grid;place-items:center;width:44px;height:44px;
  border-radius:10px;background:var(--navy);color:#fff;font:800 18px var(--sans);flex:none}
.town .hero-bbb .bbb-badge__t{display:flex;flex-direction:column;line-height:1.25}
.town .hero-bbb strong{color:var(--navy);font-size:18px}
.town .hero-bbb small{color:var(--muted);font-size:18px}
.town .hero-bbb:hover{border-color:var(--blue)}
@media(max-width:900px){.town .hero-bbb{grid-column:1;order:4;margin:14px auto 0}}
/* Cesar, 2026-08-16: "the hero is a little bit too big — get rid of some of the white, make
   the buffer smaller on the top and on the bottom." Padding off both ends, the min-height
   dropped so the section is sized by its content, and the stack inside the copy column
   tightened rather than shrinking anything. */
/* top spacing left ALONE at the sheet's 58px — Cesar has flagged twice that the cut does
   not belong there. The saving comes from the bottom and from the internal stack. */
.town .hero-grid{padding-bottom:0;min-height:0}
.town .hero-copy .lede{margin-bottom:18px}
.town .hero-copy .hero-actions{margin-top:4px}
.town .hero-copy .microcopy{margin-top:8px}
.town .hero-copy .rating{margin-top:14px}
.town .hero-copy .town-chips{margin-bottom:6px}
/* the review card sitting on the hero photo — shrunk on desktop too. Type stays at the 18px
   floor; the CARD gets narrower with tighter padding and leading. (Cesar, 2026-08-16) */
/* card a touch wider, with EVEN padding all round rather than different top/bottom and
   left/right values (Cesar, 2026-08-16) */
.town .review-float{width:284px;padding:14px;border-radius:12px;left:-28px;bottom:22px}
.town .review-float blockquote{margin:3px 0 5px;font-size:18px;line-height:1.35}
.town .review-float cite{font-size:18px;line-height:1.25}
.town .review-float .stars{font-size:18px;line-height:1}

/* button labels were the last readable text under the floor */
.town a.button,.cl a.button{font-size:18px}
/* booking page intro above the form */
.cl .booking-intro,.booking-intro{max-width:820px;margin:0 auto 1.8rem;text-align:center}
.booking-intro h2{margin:.3rem 0 .8rem;color:var(--navy);
  font:700 clamp(2rem,3.2vw,2.8rem)/1.12 var(--serif);letter-spacing:-.03em}
.booking-intro p{color:var(--muted);font-size:18px;line-height:1.7}
.booking-intro .kicker{margin:0;font-size:18px}


/* ---- calculator.html ------------------------------------------------------------------
   The estimate tool's own styling, ported from site.css when the page moved to the new
   shell. rem sizes become px (that sheet ran a 125% root) and nothing readable is left
   below the 18px floor. Comments are stripped from the source before extracting — a
   stray fragment truncated the whole stylesheet once already. (2026-08-16) */
.cl .calc{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start;max-width:1040px;margin:0 auto}
.cl .calc__form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.8rem}
.cl .calc__q{margin-bottom:1.5rem}
.cl .calc__q:last-child{margin-bottom:0}
.cl .calc__q>span.q{display:block;font-family:var(--sans);font-weight:600;color:var(--ink);margin-bottom:.6rem;font-size:18px}
.cl .calc__q>span.q b{color:var(--teal-ink);font-weight:600}
.cl .calc__q:first-child{margin-top:0}
.cl .calc__scale{display:flex;justify-content:space-between;font-size:18px;color:var(--ink-soft)}
.cl .calc__morein{padding-top:.7rem}
.cl .calc__morein .calc__q:first-child{margin-top:0}
.cl .calc__more{border-top:1px solid var(--line);margin-top:1.1rem;padding-top:.9rem}
.cl .calc__more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;
  font-size:18px;font-weight:600;color:#fff;background:var(--orange);
  padding:.55rem .8rem;border-radius:10px}
.cl .calc__more>summary::-webkit-details-marker{display:none}
.cl .calc__more>summary::after{content:'+';margin-left:auto;color:#402206;font-size:26px;line-height:1}
.cl .calc__more[open]>summary::after{content:'–'}
.cl .calc__more>summary:hover{background:var(--orange-dk,#c9640a)}
.cl .calc__addons{font-size:18px;line-height:1.5;color:rgba(255,255,255,.92);
  border-top:1px solid rgba(255,255,255,.25);padding-top:.75rem;margin:.8rem 0 0}
.cl .calc__addons b{color:#fff}
.cl .calc__result{background:linear-gradient(160deg,var(--teal),var(--teal-dk));color:#fff;border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow);position:static}
.cl .calc__result .lbl{font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:#bcd8e2}
.cl .calc__result .amt{font-family:var(--serif);font-size:54px;line-height:1.1;margin:.25rem 0}
.cl .calc__result .sub{color:#d3e6ea;font-size:19px}
.cl .calc__result .note{font-size:18px;color:#c3dae1;margin-top:1.1rem;border-top:1px solid rgba(255,255,255,.16);padding-top:1rem}
.cl .calc__result .btn{width:100%;justify-content:center;margin-top:1.2rem}
.cl .calc__result .btn--teal{background:#fff;color:var(--teal)}
.cl .calc__result .btn--teal:hover{background:#eef6f8;color:var(--teal-dk)}
.cl .calc__result .amt{color:#fff}
.cl .calc__result{position:static}
.cl .calc__result .calc__ballpark{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.cl .calc__result .calc__ballpark p{color:#dce9ee}
.cl .calc__result .calc__ballpark-lead{color:#fff!important}
.cl .calc__result .calc__promise{border-top-color:rgba(255,255,255,.24);color:#eaf4f7!important}
.cl .calc__result .calc__promise b{color:var(--orange)}
.cl .calc__result .calc__hours{color:#bcd8e2}
.cl .calc__result .calc__thanks p{color:#dce9ee}
.cl .calc__result .calc__thanks-h{color:#fff!important}
.cl .calc__result .btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.cl .calc__result .btn--ghost:hover{background:rgba(255,255,255,.12)}
.cl .calc__ballpark{margin:1rem 0 .2rem;padding:.95rem 1.05rem;border-radius:12px;
  background:rgba(26,93,127,.06);border:1px solid rgba(26,93,127,.16)}
.cl .calc__ballpark p{font-size:18px;line-height:1.55;color:var(--ink-soft);margin:0 0 .55rem}
.cl .calc__ballpark p:last-child{margin-bottom:0}
.cl .calc__ballpark{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.cl .calc__ballpark p{color:#dce9ee}
.cl .calc__ballpark-lead{font-size:18px!important;color:var(--ink)!important}
.cl .calc__ballpark-lead{color:#fff!important}
.cl .calc__hours{font-size:18px;color:var(--ink-soft);margin:.5rem 0 1rem}
.cl .calc__hours{display:none}
.cl .calc__hours{display:block}
.cl .calc__hours{color:#bcd8e2}
.cl .calc__hint{font-size:18px;color:var(--ink-soft);margin:.5rem 0 0;line-height:1.5}
.cl .calc__range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--aqua));outline:none;margin:.9rem 0 .4rem}
.cl .calc__range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--orange);border:3px solid #fff;box-shadow:0 2px 8px rgba(28,40,48,.35);cursor:pointer}
.cl .calc__range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--orange);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(28,40,48,.35);cursor:pointer;border-color:#fff}
.cl .calc__range:focus-visible{box-shadow:0 0 0 3px rgba(26,93,127,.35)}
.cl .calc__promise{border-top:1px solid rgba(26,93,127,.18);padding-top:.55rem;color:var(--teal-ink)!important}
.cl .calc__promise b{color:var(--navy)}
.cl .calc__promise{border-top-color:rgba(255,255,255,.24);color:#eaf4f7!important}
.cl .calc__cta{width:100%;margin-top:1rem}
.cl .pills{display:flex;flex-wrap:wrap;gap:.5rem}
.cl .lbl.a,.cl .lbl.b{position:absolute;bottom:14px;padding:.3rem .8rem;border-radius:999px;font-size:18px;font-weight:600;letter-spacing:.04em;color:#fff;backdrop-filter:blur(4px)}
.cl .lbl.b{left:14px;background:rgba(33,53,64,.8)}
.cl .lbl.a{right:14px;background:var(--orange);color:#fff}
.cl .lbl{font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:#bcd8e2}
.cl .amt{font-family:var(--serif);font-size:54px;line-height:1.1;margin:.25rem 0}
.cl .amt{color:#fff}
.cl .sub{color:#d3e6ea;font-size:19px}
.cl .deep-only{display:none}
.cl .deep-only{display:block}

/* calculator: the pill buttons, slider and question blocks. '.pill' was missing from the
   port list (only '.pills', the container, was there) so every option rendered as a raw
   grey browser button. The two-column layout is restated because the flattened media
   query had collapsed it to one. (2026-08-16) */
.cl .pill{border:1.5px solid var(--line);background:var(--white);color:var(--ink-soft);border-radius:999px;padding:.5rem 1.05rem;font:inherit;font-size:18px;font-weight:600;cursor:pointer;transition:.15s;position:relative}
.cl .pill:hover{border-color:var(--teal);color:var(--teal-ink)}
.cl .pill.sel{background:var(--teal);color:#fff;border-color:var(--teal)}
.cl .pill .tag{background:var(--orange);color:#fff;font-size:18px;font-weight:800;padding:.05rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;line-height:1.4;white-space:nowrap}
.cl .pill.sel .tag{background:#fff;color:var(--teal-dk)}
.cl .pill{text-align:left;display:inline-flex;align-items:center;gap:.5rem;justify-content:center}
.cl .calc__q{margin-bottom:1.5rem}
.cl .calc__q:last-child{margin-bottom:0}
.cl .calc__q>span.q{display:block;font-family:var(--sans);font-weight:600;color:var(--ink);margin-bottom:.6rem;font-size:18px}
.cl .calc__q>span.q b{color:var(--teal-ink);font-weight:600}
.cl .calc__q:first-child{margin-top:0}
.cl .calc__range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--aqua));outline:none;margin:.9rem 0 .4rem}
.cl .calc__range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--orange);border:3px solid #fff;box-shadow:0 2px 8px rgba(28,40,48,.35);cursor:pointer}
.cl .calc__range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--orange);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(28,40,48,.35);cursor:pointer;border-color:#fff}
.cl .calc__range:focus-visible{box-shadow:0 0 0 3px rgba(26,93,127,.35)}
.cl .calc__scale{display:flex;justify-content:space-between;font-size:18px;color:var(--ink-soft)}
.cl .calc__hint{font-size:18px;color:var(--ink-soft);margin:.5rem 0 0;line-height:1.5}
.cl .calc__hours{font-size:18px;color:var(--ink-soft);margin:.5rem 0 1rem}
.cl .calc__hours{display:none}
.cl .calc__hours{display:block}
.cl .calc__hours{color:#bcd8e2}
.cl .calc__thanks p{color:#dce9ee}
.cl .calc__thanks-h{color:#fff!important}
.cl .calc__more{border-top:1px solid var(--line);margin-top:1.1rem;padding-top:.9rem}
.cl .calc__more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;
  font-size:18px;font-weight:600;color:#fff;background:var(--orange);
  padding:.55rem .8rem;border-radius:10px}
.cl .calc__more>summary::-webkit-details-marker{display:none}
.cl .calc__more>summary::after{content:'+';margin-left:auto;color:#402206;font-size:26px;line-height:1}
.cl .calc__more[open]>summary::after{content:'–'}
.cl .calc__more>summary:hover{background:var(--orange-dk,#c9640a)}
.cl .calc__addons{font-size:18px;line-height:1.5;color:rgba(255,255,255,.92);
  border-top:1px solid rgba(255,255,255,.25);padding-top:.75rem;margin:.8rem 0 0}
.cl .calc__addons b{color:#fff}
.cl .calc__ballpark-lead{font-size:18px!important;color:var(--ink)!important}
.cl .calc__ballpark-lead{color:#fff!important}
.cl .calc__morein{padding-top:.7rem}
.cl .calc__morein .calc__q:first-child{margin-top:0}
.cl .calc__promise{border-top:1px solid rgba(26,93,127,.18);padding-top:.55rem;color:var(--teal-ink)!important}
.cl .calc__promise b{color:var(--navy)}
.cl .calc__promise{border-top-color:rgba(255,255,255,.24);color:#eaf4f7!important}
.cl .calc__ballpark{margin:1rem 0 .2rem;padding:.95rem 1.05rem;border-radius:12px;
  background:rgba(26,93,127,.06);border:1px solid rgba(26,93,127,.16)}
.cl .calc__ballpark p{font-size:18px;line-height:1.55;color:var(--ink-soft);margin:0 0 .55rem}
.cl .calc__ballpark p:last-child{margin-bottom:0}
.cl .calc__ballpark{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.cl .calc__ballpark p{color:#dce9ee}
.cl .calc{grid-template-columns:1fr;gap:1.6rem}
@media(max-width:900px){.cl .calc{grid-template-columns:1fr}
  .cl .calc__result{position:static}}

/* ==================================================================================
   MOBILE CORRECTIONS — 2026-08-16
   Three layout bugs found in the pre-deploy audit. All three are the same root cause:
   a media query does NOT add specificity, so an unconditional rule that appears later
   (or with more classes) silently beats the mobile override meant to replace it. This
   block sits at the end of the file on purpose, so it wins on order.
   ================================================================================== */

/* 1. Homepage "relief" section stayed two columns at 375px — 141px and 161px, with the
      main photo crushed to 116px wide. The @media(max-width:600px) block set only `gap`;
      the column collapse was lost when the media queries were flattened. */
@media(max-width:860px){
  .relief-grid{grid-template-columns:1fr}
  .relief-visual{padding:0 25px 55px 0}
}

/* 2. Town "areas we serve" split: the mobile override at line ~1293 is overridden by an
      identical-specificity unconditional rule ~40 lines later, so 40 town pages rendered
      a 185px column beside a 130px column holding a map. */
@media(max-width:980px){
  .town .sa-layout,.town .sa-layout--even{grid-template-columns:1fr;gap:1.8rem}
}

/* 3. Town hero BBB badge: `.town .hero-grid>.hero-bbb{margin:-120px auto 0}` is (0,3,0)
      and beat the (0,2,0) mobile rule, so on phones the badge was yanked 120px upward on
      top of the lede it was supposed to sit under. Matching specificity fixes it. */
@media(max-width:900px){
  .town .hero-grid>.hero-bbb{grid-column:1;order:4;margin:14px auto 0}
}

/* ----------------------------------------------------------------------------------
   MOBILE NAVIGATION — Cesar, 2026-08-16: "Now we have to have hamburger menu. We have
   to have also access to our services and service area from the upper top menu bar."
   Until now the site had NO menu below 980px: .mainnav was display:none and no toggle
   existed, so a phone visitor could only reach another page via the footer.
   The drawer IS .mainnav — it carries id="nav", which the shell script already binds.
   ---------------------------------------------------------------------------------- */
.navtoggle{display:none}
.nav-mob{display:none}
@media(max-width:980px){
  /* flex:none — the header wrap is display:flex and was shrinking the button from 48px
     to 24px, below the 44px tap target. */
  /* Cesar, 2026-08-16: "just a white square with round corners. There is no lines on it."
     iOS Safari keeps -webkit-appearance:push-button on <button>, which imposes the control's
     own internal layout and swallowed the three grid children. appearance:none resets that,
     and the bars are absolutely positioned so the icon never depends on grid or flex
     resolving inside a button element at all. */
  .navtoggle{position:relative;display:block;flex:0 0 48px;
    width:48px;height:48px;min-width:48px;
    margin-left:auto;padding:0;background:#fff;border:1px solid var(--line);
    border-radius:12px;cursor:pointer;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    font-size:0;line-height:0}

  /* The header CTA squeezed to 80px wide and wrapped onto THREE lines, blowing the header to
     86px tall and shoving the hamburger off the right edge. It is redundant on phones anyway:
     the sticky .mobile-quote bar carries "Get My Free Quote" at the bottom of every page. */
  .header .header__cta{display:none}
  .header-actions{gap:10px}

  /* Cesar, 2026-08-16: "the hamburger menu is blank... like behind thick glass."
     .header carries backdrop-filter:blur(14px) with a semi-transparent background. The drawer
     is a CHILD of .header and hangs below it via top:100%, and Safari/iOS renders descendants
     that escape the element's own box through that same filter — so the menu came out frosted
     and unreadable. backdrop-filter also creates a containing block, so it cannot simply be
     ignored. Drop the blur below 980px and paint both surfaces opaque. */
  .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  :root[data-theme="dark"] .header{background:#161d22}
  .mainnav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-theme="dark"] .mainnav{background:#161d22}
  :root[data-theme="dark"] .mainnav a{color:#eaf4f7}
  .navtoggle span{position:absolute;left:12px;width:22px;height:2px;display:block;
    background:var(--navy);border-radius:2px}
  .navtoggle span:nth-child(1){top:15px}
  .navtoggle span:nth-child(2){top:22px}
  .navtoggle span:nth-child(3){top:29px}
  :root[data-theme="dark"] .navtoggle{background:#161d22;border-color:#33424a}
  :root[data-theme="dark"] .navtoggle span{background:#eaf4f7}
  .header .wrap{gap:12px}
  .header-actions{margin-left:0}

  /* the drawer drops out of the header, full width */
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;
    flex-direction:column;gap:0;margin-left:0;padding:6px 0;
    background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(19,63,87,.16)}
  .mainnav.open{display:flex}
  .mainnav a{padding:15px 22px;font-size:18px;font-weight:700;color:var(--navy);
    border-bottom:1px solid var(--line)}
  .mainnav a:last-child{border-bottom:0}

  /* Cesar, 2026-08-16: the drawer's in-page anchors "just speed up the page, there is no
     added value" — the menu now carries the real destinations that used to sit in the top
     bar, the phone moves to the sticky bar, and with nothing left the top bar collapses so
     "everything's gonna move up". Reclaims ~71px above the fold. */
  .mainnav>a:not(.nav-mob){display:none}
  .nav-mob{display:block}
  .utility{display:none}

  /* the quote button closes the drawer — an action, not a fifth destination */
  .mainnav a.nav-mob-cta{margin:12px 22px 14px;padding:15px 20px;border-bottom:0;
    background:var(--coral);color:#fff;text-align:center;border-radius:12px;
    font-size:19px;font-weight:800;box-shadow:0 10px 25px rgba(242,116,98,.22)}
  :root[data-theme="dark"] .mainnav a.nav-mob-cta{color:#fff}
}
@media(max-width:600px){
  /* the top bar is tight at 375px: keep the two key links + phone, drop the tagline */
  .utility .wrap>span{display:none}
  .utility .wrap{justify-content:center}
  .utility nav{gap:13px;flex-wrap:wrap;justify-content:center}
  .utility nav a{font-size:18px}
}

/* ----------------------------------------------------------------------------------
   MOBILE HERO ORDER — Cesar, 2026-08-16: "move down the 'trusted local house cleaning'
   below the hero, under the A+ BBB badge, before 'reliable, detailed house cleaning from
   people who care'. This way everything's gonna go up, and you have the picture in the
   center of the mobile."

   The eyebrow is two lines at 375px, so carrying it above the headline pushed the photo
   ~100px down the page. New stack: headline, photo (BBB badge sits inside it), eyebrow,
   lede, buttons. Desktop is untouched — .hero-copy is display:contents and these orders
   only apply once the grid has collapsed to one column.
   ---------------------------------------------------------------------------------- */
@media(max-width:980px){
  .hero-copy h1{order:2}
  .hero-copy .hero-image,.town .hero-image{order:3}
  .hero-copy .eyebrow{order:4;margin:20px 0 10px}
  .hero-copy .lede{order:5}
  .hero-copy .hero-actions{order:6}
  .hero-copy .microcopy{order:7}
  .hero-copy .rating{order:8}
  .hero-copy .heroclaim{order:9}
}

/* Cesar, 2026-08-16: "move [the headline] a tiny bit up because there is still room, and make
   a little bit more room between this and the picture... but leave the picture where it is."
   Measured at 375px: 44px above the headline, only 26px below it before the photo.
   Taking 20px off the hero's top padding and giving it back as margin under the headline
   moves the headline up without shifting the photo at all. The margin is on the h1 rather
   than the grid gap, so it does not also inflate every other gap in the hero stack. */
@media(max-width:980px){
  .hero .hero-grid,.town .hero-grid{padding-top:24px}
  .hero-copy h1{margin-bottom:20px}
}