:root{
  --teal:#1A5D7F; --teal-dk:#134a67; --aqua:#5DC7D2; --aqua-soft:#c9ecef; --orange:#E8760F; --orange-dk:#c9640a; --orange-text:#c9640a;
  --bg:#f5fafb; --tint:#e8f5f7; --white:#ffffff;
  --ink:#213540; --ink-soft:#546b76; --line:#dce9ec; --radius:14px;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --shadow:0 12px 40px rgba(26,93,127,.12); --shadow-sm:0 2px 12px rgba(26,93,127,.09); --shadow-md:0 8px 24px rgba(26,93,127,.14); --shadow-lift:0 14px 30px rgba(28,40,48,.36);
  --maxw:1560px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:125%}
@media(max-width:900px){html{font-size:118.75%}}
@media(max-width:640px){html{font-size:112.5%}}
body{margin:0;font-family:var(--sans);font-size:.9rem;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.14;margin:0 0 .5em;letter-spacing:-.01em;color:var(--teal)}
p{margin:0 0 1rem}
a{color:var(--teal);text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,1.9vw,28px)}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#1d2c34;margin-bottom:.6rem;display:inline-block}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.97rem;padding:.85rem 1.6rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn--orange{background:var(--orange);color:#402206}
.btn--orange:hover{background:var(--orange-dk);color:#fff;transform:translateY(-2px)}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-dk);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--teal);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--teal);transform:translateY(-2px)}
.btn--lg{padding:1rem 1.9rem;font-size:1.04rem}

/* top bar */
.topbar{background:var(--teal);color:#cfe6ee;font-size:.78rem}
.topbar__in{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:#fff;font-weight:600}.topbar a:hover{color:var(--aqua)}
/* The bar is a fixed 38px, so nothing inside it may wrap — a second line does not make the
   bar taller, it spills out over the header. The tagline was being flex-shrunk to 288px
   against a natural 355px and wrapping to 49px of text inside a 38px bar. nowrap on both
   sides is the actual fix; the breakpoints below are just when to start dropping things. */
.topbar__in>span,.util a{white-space:nowrap}
.util{display:flex;align-items:center;gap:1.1rem;flex:none}
.util a{color:#d3e8ef;font-weight:600}
.util a:hover{color:#fff}
.util__sep{width:1px;height:14px;background:rgba(255,255,255,.28)}
.util__phone{color:#fff!important;font-weight:700}
/* Measured, not guessed: tagline 355 + all four util links 434 + container padding ≈ 880.
   The old 760 breakpoint left the bar broken on every page from 761px to ~880px. */
@media(max-width:900px){.util .u-hide{display:none}}
/* tagline 355 + the two remaining links ≈ 625; drop it just above that. */
@media(max-width:660px){.topbar__in>span{display:none}.topbar__in{justify-content:center;gap:1rem}.util{gap:.9rem}}

/* header
   The row is logo + 6 nav links + theme toggle + CTA. At full size it needs
   ~1240px of container, so it steps down once at 1340px and only collapses to
   the hamburger at 1100px — that keeps the real nav on 1280px laptops.
   The logo is sized by HEIGHT at every step and must never be flex:none: pinning
   it stops it being squashed, but then it can't get out of the hamburger's way
   and pushes it off-screen on a 375px phone. Letting it shrink with max-width as
   a backstop keeps the aspect ratio and the row fits at every width. */
.header{position:sticky;top:0;z-index:60;background:rgba(245,250,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header__in{display:flex;align-items:center;gap:1.1rem;height:96px}
.header__in>a:first-child{flex:0 1 auto;min-width:0;display:flex;align-items:center}
.brand-logo{height:58px;width:auto;max-width:100%;flex:0 1 auto}
.nav{display:flex;gap:.95rem;margin-left:auto;white-space:nowrap}
.nav a{color:var(--ink-soft);font-weight:700;font-size:.92rem;letter-spacing:.005em;transition:color .15s}
.nav a:hover{color:var(--teal)}
.header__cta{margin-left:.4rem}
.navtoggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;flex:none}
.navtoggle span{width:24px;height:2px;background:var(--teal);border-radius:2px}

/* compact header — everything narrower than a large desktop */
@media(max-width:1340px){
  .header__in{gap:.8rem;height:84px}
  .brand-logo{height:44px}
  .nav{gap:.7rem}
  .nav a{font-size:.83rem}
  .header__cta{margin-left:.15rem;padding:.7rem 1.1rem;font-size:.85rem}
}
/* nav collapses to the hamburger. top:100% so the panel tracks the header
   height instead of a hard-coded 96px. */
@media(max-width:1100px){
  .nav,.header__cta{display:none}
  .navtoggle{display:flex}
  /* the theme toggle also carries margin-left:auto here, and two auto margins
     split the free space — which left the toggle stranded mid-header. Let the
     toggle take all of it and sit the hamburger next to it. Scoped to the
     sibling so the hamburger keeps its own auto margin if theme.js hasn't
     inserted a toggle. */
  .themetoggle~.navtoggle{margin-left:0}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow);margin:0}
  .nav.open a{padding:1rem 26px;border-top:1px solid var(--line)}
}
/* small phones — the logo has to yield so the hamburger stays on-screen */
@media(max-width:400px){
  .header__in{gap:.5rem;height:76px}
  .brand-logo{height:36px}
}

/* hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(880px 440px at 88% -8%, var(--aqua-soft), transparent 60%),
  radial-gradient(700px 380px at 6% 108%, #ffe8cf, transparent 60%),
  linear-gradient(180deg,var(--bg),var(--bg))}
.hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:3rem;align-items:center;padding-top:1.5rem;padding-bottom:2.4rem}
.hero h1{font-size:clamp(1.92rem,4.7vw,3.03rem);font-weight:400;margin-bottom:.18em;color:var(--teal)}
.hero h1 em{font-style:italic;color:var(--orange)}
.hero__lede{font-size:.9rem;line-height:1.65;font-weight:400;color:var(--ink-soft);max-width:33em;margin-bottom:1.1rem}
.hero__note{font-size:.82rem;font-weight:400;color:var(--ink-soft);margin:.1rem 0 .8rem;line-height:1.5}
@media(max-width:900px){.hero__note{font-size:.85rem}}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:.9rem}
.hours-note{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--ink-soft)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ink-soft);box-shadow:0 0 0 3px rgba(90,114,125,.2)}
.dot.open{background:#2fa36a;box-shadow:0 0 0 3px rgba(47,163,106,.22)}
.bbb{display:inline-flex;align-items:center;gap:.75rem;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:.6rem 1rem .6rem .65rem;box-shadow:var(--shadow-sm);text-decoration:none;margin-top:1.2rem;transition:.18s}
.bbb:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--aqua)}
.bbb__seal{display:grid;place-items:center;width:46px;height:46px;border-radius:9px;background:linear-gradient(160deg,var(--teal),var(--teal-dk));color:#fff;font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.bbb__t{line-height:1.25}
.bbb__t strong{display:block;color:var(--teal);font-size:.96rem}
.bbb__t small{color:var(--ink-soft);font-size:.75rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem 1.7rem}
.card--quote .stars{color:var(--orange);letter-spacing:2px;margin-bottom:.5rem}
.card--quote p{font-family:var(--serif);font-size:1.05rem;line-height:1.45;color:var(--ink);margin:0 0 .9rem}
.card--quote .who{font-weight:600;font-size:.9rem;color:var(--teal)}
.card--quote .who small{display:block;color:var(--ink-soft);font-weight:400}
.hero__aside{display:flex;flex-direction:column;gap:1rem}

/* ── HERO SHOT: organic photo shape + layered accents + floating proof ───────── */
.heroshot{position:relative;margin:0;padding:0;display:block;isolation:isolate;overflow:visible}
.hero{overflow:hidden}
/* soft aqua shape peeking behind the photo */
.heroshot__blob{position:absolute;z-index:0;inset:-4% -2% 6% 2%;
  background:linear-gradient(150deg,var(--aqua-soft),#ffe8cf 85%);
  border-radius:58% 42% 46% 54%/48% 52% 48% 52%;filter:blur(2px);opacity:.85}
/* thin outlined shape offset the other way, for depth */
.heroshot__ring{position:absolute;z-index:0;inset:6% 4% -5% -5%;
  border:2px solid var(--aqua);opacity:.5;
  border-radius:46% 54% 56% 44%/52% 46% 54% 48%}
/* small dot cluster, brand orange */
.heroshot__dots{position:absolute;z-index:3;width:104px;height:74px;right:-10px;top:-14px;
  background-image:radial-gradient(var(--orange) 2.1px,transparent 2.2px);
  background-size:15px 15px;opacity:.5;border-radius:8px}
/* the photo itself, in a soft organic mask */
.heroshot__img{position:relative;z-index:2;width:100%;height:clamp(360px,36vw,540px);
  object-fit:cover;object-position:center 30%;display:block;
  border-radius:52% 48% 44% 56%/16% 14% 86% 84%;
  box-shadow:0 24px 60px rgba(26,93,127,.22)}
@supports (border-radius: 30% 70% 70% 30%/30% 30% 70% 70%){
  .heroshot__img{border-radius:44% 56% 40% 60%/12% 12% 88% 88%}
}
/* floating rating card overlapping the photo edge */
.heroshot__rating{position:absolute;z-index:4;left:-14px;bottom:14px;right:16%;
  display:flex;align-items:center;gap:.7rem;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:.7rem .95rem;box-shadow:0 12px 30px rgba(28,40,48,.18)}
.heroshot__score{font-family:var(--serif);font-size:1.75rem;line-height:1;color:var(--teal);white-space:nowrap}
.heroshot__score span{font-size:.85rem;color:var(--orange);margin-left:2px}
.heroshot__scoretxt{font-size:.72rem;line-height:1.35;color:var(--ink-soft)}
.heroshot__scoretxt strong{color:var(--ink)}
/* "40 years" seal, top-right, overlapping */
.heroshot__since{position:absolute;z-index:4;right:-6px;top:34px;
  display:grid;place-items:center;width:92px;height:92px;border-radius:50%;
  background:linear-gradient(150deg,var(--teal),var(--teal-dk));color:#fff;
  box-shadow:0 14px 30px rgba(26,93,127,.32);
  font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;text-align:center}
.heroshot__since b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:0;text-transform:none;line-height:1}
.heroshot__since em{display:block;font-style:normal;font-size:.52rem;color:var(--aqua);margin-top:.15rem;letter-spacing:.06em}
@media(max-width:900px){
  .heroshot__since{width:78px;height:78px;top:16px;right:0}
  .heroshot__since b{font-size:1.35rem}
  .heroshot__rating{left:0;right:12%}
  .heroshot__dots{display:none}
}
@media(max-width:560px){
  .heroshot__rating{position:static;margin-top:.9rem;right:auto}
  .heroshot__img{border-radius:36% 64% 40% 60%/10% 10% 90% 90%}
}
[data-theme="dark"] .heroshot__rating{background:#212a30;border-color:#33414a}
[data-theme="dark"] .heroshot__blob{opacity:.32}

@media(max-width:900px){.hero__in{grid-template-columns:1fr;gap:2.4rem;padding-top:3rem;padding-bottom:3rem}.hero__lede{max-width:none}}

/* trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--tint)}
.trust__in{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 3.4rem;padding:1.4rem 26px}
.trust__item{display:flex;align-items:baseline;gap:.55rem;font-size:.9rem;color:var(--ink-soft)}
.trust__item b{font-family:var(--serif);font-size:1.15rem;color:var(--teal);font-weight:600}

/* sections */
.section{padding:5.2rem 0}
.section--sm{padding:3.6rem 0}
.section--tint{background:var(--tint)}
.section__head{max-width:680px;margin:0 auto 3rem;text-align:center}
.section__head h2{font-size:clamp(1.52rem,3.4vw,2.16rem);font-weight:400}
.section__head p{color:var(--ink-soft);font-size:.9rem}

/* promise */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem;max-width:100%;margin-inline:auto}
.promise__item{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}
.promise__item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--aqua)}
.promise__item h3{font-size:1rem;display:flex;align-items:center;gap:.55rem}
.promise__item .ic{color:var(--orange);font-size:1.1rem}
.promise__item p{color:var(--ink-soft);margin:0;font-size:.9rem}
@media(max-width:800px){.promise{grid-template-columns:1fr}}

/* before after */
.ba-slider{position:relative;max-width:760px;margin:0 auto 1rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/2;user-select:none;touch-action:none;background:var(--white)}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-slider .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-slider .lbl{position:absolute;bottom:14px;padding:.3rem .8rem;border-radius:999px;font-size:.76rem;font-weight:600;letter-spacing:.04em;color:#fff;backdrop-filter:blur(4px)}
.ba-slider .lbl.b{left:14px;background:rgba(33,53,64,.8)}.ba-slider .lbl.a{right:14px;background:var(--orange);color:#402206}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);cursor:ew-resize}
.ba-handle::after{content:'⇄';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#fff;color:var(--teal);border-radius:50%;display:grid;place-items:center;font-size:1rem;box-shadow:var(--shadow-sm)}
.ba-cap{text-align:center;color:var(--ink-soft);font-size:.9rem;font-style:italic;margin-bottom:2.4rem}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem;max-width:100%;margin-inline:auto}
.ba-pair{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--white)}
.ba-pair .imgs{display:grid;grid-template-columns:1fr 1fr}
.ba-pair figure{margin:0;position:relative;aspect-ratio:4/5}
.ba-pair figure img{width:100%;height:100%;object-fit:cover}
.ba-pair figcaption{position:absolute;top:8px;left:8px;font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:rgba(33,53,64,.8);color:#fff;padding:.15rem .5rem;border-radius:999px}
.ba-pair figure+figure figcaption{background:var(--orange);color:#402206}
.ba-pair .t{padding:.7rem 1rem;font-size:.9rem;color:var(--ink-soft)}
@media(max-width:820px){.ba-grid{grid-template-columns:1fr}}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem;max-width:100%;margin-inline:auto}
.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}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--aqua)}
.svc:hover h3{color:var(--orange)}
.svc .ic{font-size:1.7rem;margin-bottom:.7rem}
.svc h3{font-size:.96rem}
.svc p{color:var(--ink-soft);font-size:.9rem;margin:0}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* detail split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.split h2{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:400}
.checks{display:flex;flex-direction:column;gap:.85rem;margin:1.4rem 0}
.checks li{position:relative;padding-left:2rem;color:var(--ink-soft)}
.checks li::before{content:'✓';position:absolute;left:0;top:0;width:1.4rem;height:1.4rem;background:var(--teal);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.8rem}
.checks b{color:var(--ink)}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:2rem}}

/* phone highlight (light) */
.phone-hl{text-align:center;max-width:760px;margin:0 auto}
.phone-hl h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:400}
.phone-hl h2 em{font-style:italic;color:var(--orange)}
.phone-hl p{color:var(--ink-soft);font-size:.9rem}

/* areas */
.areas{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:1120px;margin:0 auto}
.areas li{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-weight:600;font-size:.92rem;color:var(--teal);transition:.15s}
.areas li.star{background:var(--teal);color:#fff;border-color:var(--teal)}
.areas li a{display:block;margin:-.5rem -1.1rem;padding:.5rem 1.1rem;color:inherit;text-decoration:none;border-radius:999px}
.areas li:has(a):hover{border-color:var(--orange);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.areas li:has(a){cursor:pointer}
.areas__note{text-align:center;margin-top:1.8rem;color:var(--ink-soft)}

/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem;max-width:100%;margin-inline:auto}
.rev{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}
.rev:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--aqua)}
.rev .stars{color:var(--orange);letter-spacing:2px;margin-bottom:.6rem}
.rev p{font-family:var(--serif);font-size:1.22rem;line-height:1.45;color:var(--ink)}
.rev .who{font-weight:600;font-size:.9rem;margin-top:1rem;color:var(--teal)}
.rev .who small{color:var(--ink-soft);font-weight:400}
@media(max-width:860px){.rev-grid{grid-template-columns:1fr}}

/* faq */
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq summary{font-family:var(--serif);font-size:.93rem;color:var(--teal);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--orange);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq p{color:var(--ink-soft);margin:.8rem 0 0}

/* CTA (light) */
.cta{background:var(--tint)}
.cta__in{display:grid;grid-template-columns:1.05fr .95fr;gap:3.4rem;align-items:center}
.cta h2{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:400}
.cta h2 em{font-style:italic;color:var(--orange)}
.cta p{color:var(--ink-soft);font-size:.9rem}
.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)}
.cta__actions .btn{width:100%;justify-content:center}
.cta__primary-label{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin-bottom:.2rem}
.cta__or{display:flex;align-items:center;gap:.7rem;color:var(--ink-soft);font-size:.85rem;margin:.2rem 0}
.cta__or::before,.cta__or::after{content:'';flex:1;height:1px;background:var(--line)}
.cta__form-link{text-align:center;font-size:.88rem;color:var(--ink-soft)}
.cta__form-link a{color:var(--teal);text-decoration:underline}
.cta__hours{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.85rem;color:var(--ink-soft);margin-top:.3rem}
@media(max-width:860px){.cta__in{grid-template-columns:1fr;gap:2rem}}
/* Very small phones: .btn is white-space:nowrap and .btn--lg is generously
   padded, so a full-width button inside the padded .cta__actions card has a
   min-content wider than a 320px viewport. That min-content sets the width of
   the 1fr grid track, which stretches the copy column with it and scrolls the
   whole page sideways — so both the card and the buttons step down here. */
@media(max-width:400px){
  /* white-space:normal is a safety net, not a layout change: the buttons above
     are sized to fit, so a label only wraps when it genuinely cannot — which
     beats a long one (e.g. checklist.html's "Download / Print this checklist
     (PDF)") scrolling the whole page sideways. */
  .btn{padding:.8rem 1.2rem;font-size:.92rem;white-space:normal;text-align:center}
  .btn--lg{padding:.9rem 1.2rem;font-size:.95rem}
  .cta__actions{padding:1.2rem}
}

/* footer */
.footer{background:var(--teal);color:#bcd8e2;padding:3.4rem 0 1.6rem;font-size:.84rem;line-height:1.7}
.footer__in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:2.6rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.14);max-width:100%;margin-inline:auto}
.footer__find,.footer__bottom{max-width:100%;margin-inline:auto}
.footer h4{color:#fff;font-family:var(--sans);font-size:.9rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.footer a,.footer span{display:block;color:#bcd8e2;margin-bottom:.5rem}
.footer a:hover{color:var(--orange)}
.footer .fbrand{display:flex;align-items:center;gap:.55rem;color:#fff;font-family:var(--serif);font-size:1.15rem;margin-bottom:.7rem}
.footer .fbrand .m{display:grid;place-items:center;width:34px;height:34px;background:var(--orange);color:#fff;border-radius:50%;font-size:1rem}
.social{display:flex;gap:.55rem;margin-top:1.1rem}
.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}
.social a:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}
.social svg{width:18px;height:18px;fill:currentColor;display:block}
/* media+copy split: photo column stretches to match the text column height */
/* media+copy split: the photo tracks the copy height and sits JUST UNDER it (~88%),
   centered — the same relationship the 16:9 video block has to its text. */
.split--media{align-items:stretch}
.split--media>div:has(>.card){display:block;align-self:start;position:sticky;top:112px}
.split--media>div>.btn{align-self:flex-start}
.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}
.split--media .card>div{flex:0 0 auto}
.split--media .card img{flex:1 1 0;height:0;width:100%;object-fit:cover;display:block}
@media(max-width:820px){
  .split--media>div:has(>.card){display:block;position:static}
  .split--media .card{height:auto;aspect-ratio:auto;max-height:none;min-height:0}
  .split--media .card img{flex:none;height:clamp(260px,58vw,420px)}
}
.local-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1.6rem}
.local-card{display:flex;flex-direction:column;gap:.28rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;text-decoration:none;color:inherit;box-shadow:var(--shadow-md);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.local-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--aqua)}
.local-card__ic{font-size:1.7rem;line-height:1;margin-bottom:.25rem}
.local-card b{color:var(--teal);font-size:1.02rem}
.local-card:hover b{color:var(--orange)}
.local-card__d{color:var(--ink-soft);font-size:.9rem;line-height:1.42}
.video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#0c0c0c}
.video-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0c0c0c}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.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}
.video-facade .play::after{content:'';border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-left:4px}
.video-facade:hover .play{background:var(--orange);transform:translate(-50%,-50%) scale(1.08)}
/* mobile sticky action bar */
.mobilebar{display:none}
@media(max-width:940px){
  .mobilebar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .mobilebar a{display:grid;place-items:center;padding:.95rem .3rem;font-weight:700;font-size:.92rem;background:var(--white);color:var(--teal);white-space:nowrap}
  .mobilebar .mb-call{background:var(--orange);color:#402206}
  body.has-mobilebar{padding-bottom:58px}
}
@media print{.mobilebar{display:none!important}}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sa-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:start}
.sa-layout--even{grid-template-columns:minmax(0,34rem) minmax(0,1fr);align-items:center;max-width:1240px;margin-inline:auto}
@media(max-width:900px){.sa-layout--even{grid-template-columns:1fr}}
.sa-list h3{font-size:1.05rem;color:var(--teal);margin:0 0 .7rem}
.sa-towns{columns:3;column-gap:1.4rem;margin:0}
.sa-towns--2{columns:2}
.sa-towns li{break-inside:avoid;position:relative;padding:.18rem 0 .18rem 1.1rem;font-size:.9rem;color:var(--ink)}
.sa-towns li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--aqua)}
.sa-towns li a{color:var(--teal);font-weight:700;text-decoration:none;border-bottom:1px solid var(--aqua)}
.sa-towns li a:hover{color:var(--orange);border-color:var(--orange)}
.sa-zips{color:var(--ink-soft);font-size:.9rem;line-height:1.95;margin:.2rem 0 0}
.sa-layout:not(.sa-layout--even) .sa-map{position:sticky;top:114px}
.sa-map img{width:100%;max-width:580px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);margin:0 auto}
.sa-map .area-cap{margin-top:.9rem}
@media(max-width:900px){.sa-layout{grid-template-columns:1fr;gap:1.8rem}.sa-map{position:static}.sa-towns{columns:2}}
@media(max-width:520px){.sa-towns,.sa-towns--2{columns:1}}
.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}
.area-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.area-cap{text-align:center;color:var(--ink-soft);font-size:.9rem;margin:.8rem auto 0;max-width:82ch}
.area-group{margin-top:2rem}
.area-group h3{font-size:1.05rem;letter-spacing:.02em;color:var(--teal);margin-bottom:.2rem}
.area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.7rem;margin-top:.9rem}
.area-card{display:flex;align-items:center;gap:.5rem;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;text-decoration:none;color:var(--ink);font-weight:500;font-size:.95rem;box-shadow:var(--shadow-sm);transition:.15s}
.area-card:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.area-card .pin{width:15px;height:15px;fill:var(--teal);flex:none;transition:.15s}
.area-card:hover .pin{fill:var(--orange)}
.area-card.has-page{border-color:var(--aqua)}
.area-card .tag{margin-left:auto;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);background:rgba(26,93,127,.08);padding:.1rem .4rem;border-radius:999px}
.area-map--tall{aspect-ratio:16/11;max-width:none}
@media(max-width:640px){.area-map,.area-map--tall{aspect-ratio:4/3}}
.footer__find{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;padding:1.3rem 0 .1rem;font-size:.78rem}
.footer__find a,.footer__find span{display:inline-block;margin:0}
.footer__find .star{margin-right:.15rem}
.footer__find-label{color:#8fb6c5;font-weight:600}
.footer__find a{color:#cfe3ec;text-decoration:none;transition:.15s}
.footer__find a:hover{color:var(--orange)}
.footer__find .star{color:var(--orange)}
.footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;color:#8fb6c5;font-size:.74rem}
@media(max-width:820px){.footer__in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__in{grid-template-columns:1fr}}

.preview-flag{background:var(--aqua);color:#0c3a4d;text-align:center;font-size:.72rem;font-weight:600;padding:.2rem;letter-spacing:.03em}
.reveal{opacity:0;transform:translateY(16px);transition:.6s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ===== interior pages (compact header, no big hero) ===== */
.pagehead{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:1.6rem 0 2.4rem;background:
  radial-gradient(680px 300px at 92% -30%, var(--aqua-soft), transparent 62%), var(--tint)}
.breadcrumb{font-size:.82rem;color:var(--ink-soft);margin-bottom:1rem}
.breadcrumb a{color:var(--ink-soft)}.breadcrumb a:hover{color:var(--teal)}
.breadcrumb .sep{margin:0 .45rem;opacity:.5}
.breadcrumb b{color:var(--teal);font-weight:600}
.pagehead h1{font-size:clamp(2rem,4vw,3rem);font-weight:400;margin-bottom:.3em;max-width:20ch}
.pagehead h1.h1--town{max-width:none;font-size:clamp(1.52rem,2.6vw,2.16rem)}
.h1-since{display:block;font-size:.6em;color:var(--ink-soft);font-style:italic;font-weight:400;margin-top:.55em}
.pagehead h1 em{font-style:italic;color:var(--orange)}
.pagehead__lede{font-size:.9rem;line-height:1.65;color:var(--ink-soft);max-width:60ch;margin-bottom:1.3rem}
.pagehead__cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.pagehead__meta{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.9rem;color:var(--ink-soft)}
.pagehead__meta span{display:inline-flex;align-items:center;gap:.4rem}
.pagehead__meta b{color:var(--teal);font-weight:600}
.pagehead__in{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.pagehead__gtag{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-soft)}
@media(max-width:900px){.pagehead__in{grid-template-columns:1fr;gap:1.8rem}}
.prose{max-width:730px;margin:0 auto}
.prose p{color:var(--ink-soft);font-size:.9rem}
.prose h2{margin-top:1.6rem;font-size:1.5rem}
.commun{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;max-width:840px;margin:0 auto}
.commun li{border-radius:12px}
.commun li a{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:.75rem 1rem;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;text-decoration:none;box-shadow:var(--shadow-md);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.commun li a:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--aqua)}
.commun li b{color:var(--teal);font-weight:600}
.commun li small{color:var(--ink-soft);font-size:.78rem}
@media(max-width:640px){.commun{grid-template-columns:1fr 1fr}}
.localproof{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;max-width:1240px;margin:0 auto}
.localproof h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:400}
.localproof p{color:var(--ink-soft)}
@media(max-width:820px){.localproof{grid-template-columns:1fr;gap:1.8rem}}

/* service page helpers */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem;max-width:100%;margin-inline:auto}
@media(max-width:820px){.cols3{grid-template-columns:1fr}}
.incl-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm)}
.incl-card h3{font-size:.9rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
.incl-card .ic{font-size:1.3rem}
.incl-card .checks{margin:0;gap:.6rem}
.incl-card .checks li{font-size:.9rem;padding-left:1.7rem}
.incl-card .checks li::before{width:1.2rem;height:1.2rem;font-size:.7rem}
.glance{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem 1.7rem}
.glance h3{font-size:1.05rem;margin-bottom:1rem}
.glance ul{display:flex;flex-direction:column;gap:.75rem}
.glance li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft)}
.glance li .gi{color:var(--orange);flex:none;font-weight:700}
.glance li b{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:.55rem}
.tags span{background:var(--tint);color:var(--teal);border-radius:999px;padding:.4rem .9rem;font-size:.88rem;font-weight:600}
.excl{max-width:820px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.excl span{color:var(--ink-soft);font-size:.9rem;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem}

/* ===== dark-mode toggle button ===== */
.themetoggle{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;transition:.18s;flex:none;margin-left:.2rem}
.themetoggle:hover{color:var(--teal);border-color:var(--teal)}
/* these track the header breakpoints above — kept here so they win over the
   base rule, which is declared after the header block */
@media(max-width:1340px){.themetoggle{width:34px;height:34px}}
/* once the nav collapses the toggle is the item that takes up the slack, so the
   hamburger stays pinned to the right edge */
@media(max-width:1100px){.themetoggle{margin-left:auto;margin-right:.3rem}}

/* ===== dark theme ===== */
:root[data-theme="dark"]{
  --bg:#1c2329; --tint:#232b31; --white:#2a333a;
  --ink:#eef2f4; --ink-soft:#b2bcc2; --line:#3a454c; --aqua-soft:#243038;
  --shadow:0 14px 44px rgba(0,0,0,.42); --shadow-sm:0 2px 14px rgba(0,0,0,.3); --shadow-md:0 8px 26px rgba(0,0,0,.4); --shadow-lift:0 22px 52px rgba(0,0,0,.6);
}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4,
[data-theme="dark"] .hero h1,[data-theme="dark"] .pagehead h1{color:#eef6f7}
[data-theme="dark"] a{color:#8fd3dd}
[data-theme="dark"] .eyebrow{color:#d3e3e7}
[data-theme="dark"] .nav a{color:#b9cdd3}
[data-theme="dark"] .nav a:hover{color:#8fd3dd}
[data-theme="dark"] .header{background:rgba(28,35,41,.9)}
[data-theme="dark"] .topbar{background:#171d22}
[data-theme="dark"] .footer{background:#161c21}
[data-theme="dark"] .trust__item b,[data-theme="dark"] .card--quote .who,[data-theme="dark"] .rev .who,
[data-theme="dark"] .faq summary,[data-theme="dark"] .commun li b,[data-theme="dark"] .pagehead__meta b,
[data-theme="dark"] .breadcrumb b,[data-theme="dark"] .glance h3,[data-theme="dark"] .areas li{color:#8fd3dd}
[data-theme="dark"] .btn--teal{background:#2c7fa2;color:#fff}
[data-theme="dark"] .btn--teal:hover{background:#3893ba}
[data-theme="dark"] .btn--ghost{color:#cfe2e6;border-color:var(--line)}
[data-theme="dark"] .btn--ghost:hover{border-color:#8fd3dd;color:#8fd3dd}
[data-theme="dark"] .areas li.star{background:#2c7fa2;color:#fff;border-color:#2c7fa2}
[data-theme="dark"] .checks li::before{background:#2c7fa2}
[data-theme="dark"] .hero{background:radial-gradient(880px 440px at 88% -8%, #2b353d, transparent 60%),var(--bg)}
[data-theme="dark"] .pagehead{background:radial-gradient(680px 300px at 92% -30%, #2b353d, transparent 62%),var(--tint)}
[data-theme="dark"] .tags span{background:#2a333a;color:#8fd3dd}
[data-theme="dark"] .bbb__seal{background:linear-gradient(160deg,#2c7fa2,#1a5d7f)}
[data-theme="dark"] .brand-logo{filter:brightness(1.13) saturate(1.03)}
[data-theme="dark"] .themetoggle:hover{color:#8fd3dd;border-color:#8fd3dd}

/* ===== checklist comparison table ===== */
.ctable-wrap{max-width:900px;margin:0 auto;overflow-x:auto}
.ctable{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.ctable th,.ctable td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink)}
.ctable thead th{background:var(--tint);color:var(--teal);font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase}
.ctable th.col,.ctable td.col{text-align:center;width:112px}
.ctable tbody tr:last-child td{border-bottom:0}
.ctable .grp td{background:var(--tint);color:var(--teal);font-weight:600;font-family:var(--serif);font-size:.9rem}
.ctable .task{color:var(--ink-soft)}
.yes{color:#2f9e63;font-weight:700}
.dust{color:var(--ink-soft);font-size:.82rem}
.addon-c{color:var(--orange-text);font-weight:700;font-size:.8rem}
.legend{max-width:900px;margin:1.3rem auto 0;display:flex;flex-wrap:wrap;gap:1rem 1.8rem;font-size:.98rem;color:var(--ink-soft)}
/* inline-flex is here to sit the ✓/— chip on the text baseline, but it also
   turns each text run into a flex item, and flex items do not wrap by default —
   so the longest legend entry got a ~410px min-content and scrolled narrow
   phones sideways. flex-wrap + min-width:0 let the sentence break normally. */
.legend span{display:inline-flex;align-items:center;flex-wrap:wrap;min-width:0;gap:.45rem}
.print-logo{display:none}
/* dark-mode: keep table headers readable (use the light footer blue, not the dark logo blue) */
[data-theme="dark"] .ctable thead th,[data-theme="dark"] .ctable .grp td{color:#bcd8e2}
/* highlight the Recurring column (the conversion nudge) */
.ctable thead th:nth-child(2),.ctable tbody tr:not(.grp) td:nth-child(2){background:rgba(26,93,127,.055)}
[data-theme="dark"] .ctable thead th:nth-child(2),[data-theme="dark"] .ctable tbody tr:not(.grp) td:nth-child(2){background:rgba(93,199,210,.08)}
.col-tag{display:block;font-size:.6rem;color:var(--orange-text);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:.4rem;line-height:1.2}
.na{color:var(--ink-soft);opacity:.5}
.lvl{color:var(--ink-soft);font-size:.86rem}
.lvl-up{color:var(--teal);font-weight:600;font-size:.86rem}
[data-theme="dark"] .lvl-up{color:#8fd3dd}
/* vertical before/after video clip */
.vclip{position:relative;width:100%;max-width:300px;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#0c0c0c;aspect-ratio:478/850}
.vclip video{width:100%;height:100%;object-fit:cover;display:block}
.vclip__badge{position:absolute;top:14px;left:14px;background:rgba(33,53,64,.82);color:#fff;font-family:var(--sans);font-weight:700;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;padding:.35rem .85rem;border-radius:999px;backdrop-filter:blur(4px);transition:background .3s}
.vclip__badge.after{background:var(--orange);color:#231a08}
.callout{max-width:900px;margin:0 auto 2.4rem;background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:1.3rem 1.5rem}
.callout h3{font-size:1.16rem;margin-bottom:.35rem}
.callout p{color:var(--ink-soft);margin:0;font-size:.9rem}

/* ===== gift card page ===== */
.iframe-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.5rem;max-width:800px;margin:0 auto;overflow:hidden}
.iframe-wrap iframe{display:block;width:100%;border:0;border-radius:9px;background:#fff;height:1640px}
@media(max-width:680px){.iframe-wrap iframe{height:1820px}}
@media(max-width:460px){.iframe-wrap iframe{height:2000px}}
.iframe-fallback{text-align:center;font-size:.9rem;color:var(--ink-soft);margin-top:1rem}
.gcard{max-width:370px;aspect-ratio:16/10;border-radius:18px;background:linear-gradient(140deg,#237199,var(--teal-dk));color:#fff;padding:1.5rem 1.6rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow);position:relative;overflow:hidden}
.gcard::after{content:"\2740";position:absolute;right:-6px;bottom:-30px;font-size:8rem;color:rgba(255,255,255,.09);line-height:1}
.gcard__top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.gcard__brand{font-family:var(--serif);font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:.4rem}
.gcard__brand .m{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font-size:.8rem}
.gcard__chip{width:36px;height:26px;border-radius:5px;background:linear-gradient(135deg,#ffe0a0,#e0a03c)}
.gcard__mid{font-family:var(--serif);font-size:1.5rem;position:relative;z-index:1;line-height:1.2}
.gcard__foot{display:flex;justify-content:space-between;font-size:.76rem;opacity:.9;letter-spacing:.03em;text-transform:uppercase;position:relative;z-index:1}
/* Cesar, 2026-08-08, on the recurring maid service page: "out of balance, 1 row 4 cards,
   2nd only 3". CSS Grid left-aligns an incomplete final row, so a hole opened on the right.
   It was not one page — FIVE of the six pages using this grid have a ragged last row:
   5 cards fall as 4+1, 6 as 4+2, 7 as 4+3.
   Flex wrap + justify-content:center centres whatever the final row holds, at any count, so
   this stays correct if a card is ever added or removed. The per-breakpoint max-width is what
   fixes the cards-per-row: grid's auto-fit cannot be told to centre an orphan row. */
.steps3{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem;max-width:1120px;margin:0 auto;counter-reset:st}
.steps3 .step{flex:1 1 250px}
/* 🔴 max-width alone does NOT change how many cards land on a line — flex breaks lines on
   FLEX-BASIS and only then applies max-width. Setting just the max-width left four 250px-basis
   cards on the line and squeezed them, instead of moving one down. Basis and max-width have to
   move together. */
@media(min-width:1000px){
  .steps3 .step{flex-basis:calc((100% - 3*1.3rem)/4);max-width:calc((100% - 3*1.3rem)/4)}
  /* 5 reads as 3+2 and 6 as 3+3; only 7 genuinely wants 4+3. Derived from the card count so
     adding or removing one re-lays it out with no class to remember. */
  .steps3:has(.step:nth-child(5)):not(:has(.step:nth-child(7))) .step{
    flex-basis:calc((100% - 2*1.3rem)/3);max-width:calc((100% - 2*1.3rem)/3)}
}
@media(min-width:761px) and (max-width:999px){
  .steps3 .step{flex-basis:calc((100% - 2*1.3rem)/3);max-width:calc((100% - 2*1.3rem)/3)}
}
@media(min-width:761px) and (max-width:999px){.steps3 .step{max-width:calc((100% - 2*1.3rem)/3)}}
.steps3 .step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);position:relative}
.steps3 .step .n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--serif);font-weight:600;margin-bottom:.8rem}
.steps3 .step h3{font-size:1.12rem}
.steps3 .step p{color:var(--ink-soft);font-size:.9rem;margin:0}
@media(max-width:760px){.steps3 .step{flex-basis:100%;max-width:100%}}

/* ===== live reviews feed ===== */
.rlive{display:grid;grid-template-columns:.82fr 1.18fr;gap:2.6rem;align-items:start;max-width:1060px;margin:0 auto}
.rlive__aside .big{font-family:var(--serif);font-size:3.2rem;color:var(--teal);line-height:1}
.rlive__aside .big span{color:var(--orange);font-size:1.4rem}
.rlive__aside h3{font-size:1.3rem;margin:.4rem 0 .6rem}
.rlive__aside p{color:var(--ink-soft);font-size:.97rem}
.rlive__aside .pts{display:flex;flex-direction:column;gap:.7rem;margin-top:1.2rem}
.rlive__aside .pts li{position:relative;padding-left:1.7rem;color:var(--ink-soft);font-size:.95rem}
.rlive__aside .pts li::before{content:'✦';position:absolute;left:0;color:var(--orange)}
.rlive__panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.55rem;height:640px;overflow:hidden}
.rlive__panel iframe{width:100%;height:100%;border:0;background:#fff;border-radius:9px;display:block}
.rlive__tag{text-align:center;font-size:.82rem;color:var(--ink-soft);margin-top:.7rem}
[data-theme="dark"] .rlive__aside .big{color:#bcd8e2}
@media(max-width:860px){.rlive{grid-template-columns:1fr;gap:1.8rem}.rlive__panel{height:560px}}
.rlive-full{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.6rem .6rem .2rem;max-width:1320px;margin:0 auto;height:760px;overflow:hidden}
.rlive-full iframe{width:100%;height:100%;border:0;background:#fff;border-radius:9px;display:block;overflow:auto}
.rlive-full::after{content:'';position:absolute;left:.6rem;right:.6rem;bottom:.2rem;height:46px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;border-radius:0 0 9px 9px}
.rpoints{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:820px;margin:0 auto 2.2rem}
.rpoints span{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-size:.9rem;color:var(--ink-soft);display:inline-flex;gap:.45rem;align-items:center}
.rpoints span::before{content:'✦';color:var(--orange)}
.rlive-more{display:none;text-align:center;margin-top:1.3rem}

/* ===== cost calculator ===== */
.calc{display:grid;grid-template-columns:1fr .92fr;gap:2.4rem;align-items:start;max-width:1040px;margin:0 auto}
.calc__form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.8rem}
.calc__q{margin-bottom:1.5rem}
.calc__q:last-child{margin-bottom:0}
.calc__q>span.q{display:block;font-family:var(--sans);font-weight:600;color:var(--ink);margin-bottom:.6rem;font-size:.9rem}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.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:.92rem;font-weight:600;cursor:pointer;transition:.15s;position:relative}
.pill:hover{border-color:var(--teal);color:var(--teal)}
.pill.sel{background:var(--teal);color:#fff;border-color:var(--teal)}
.pill .tag{position:absolute;top:-8px;right:-6px;background:var(--orange);color:#fff;font-size:.58rem;font-weight:700;padding:.12rem .4rem;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.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:sticky;top:114px}
.calc__result .lbl{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#bcd8e2}
.calc__result .amt{font-family:var(--serif);font-size:2.7rem;line-height:1.1;margin:.25rem 0}
.calc__result .sub{color:#d3e6ea;font-size:.96rem}
.calc__result .note{font-size:.85rem;color:#c3dae1;margin-top:1.1rem;border-top:1px solid rgba(255,255,255,.16);padding-top:1rem}
.calc__result .btn{width:100%;justify-content:center;margin-top:1.2rem}
.calc__result .btn--teal{background:#fff;color:var(--teal)}
.calc__result .btn--teal:hover{background:#eef6f8;color:var(--teal-dk)}
[data-theme="dark"] .calc__result .amt{color:#fff}
@media(max-width:820px){.calc{grid-template-columns:1fr}.calc__result{position:static}}
/* Mobile: no scroll-trap — the feed becomes a non-interactive preview so page-scroll always wins, with a button to see all */
@media(max-width:860px){
  .rlive-full{height:880px}
  .rlive-full iframe{pointer-events:none}
  .rlive-more{display:block}
}

@media print{
  .topbar,.header,.footer,.preview-flag,.pagehead__cta,.themetoggle,.no-print,.breadcrumb,.callout,.pagehead__in aside,.section__head p,.cta{display:none!important}
  body{background:#fff;color:#000}
  .pagehead{background:#fff!important;border:0;padding:.2rem 0 .5rem}
  .pagehead__in{grid-template-columns:1fr}
  .pagehead h1{font-size:1.5rem}
  .pagehead__lede{font-size:.85rem;max-width:none}
  .section{padding:.35rem 0}
  .section__head{margin-bottom:.6rem}
  .ctable{box-shadow:none;border-color:#ccc}
  .ctable th,.ctable td{padding:.28rem .45rem;font-size:8.3pt}
  .ctable thead th,.ctable .grp td{background:#eee!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ctable thead th:nth-child(2),.ctable tbody tr:not(.grp) td:nth-child(2){background:#f4f4f4!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ctable .grp{break-inside:avoid}
  .lvl-up{color:#000!important;font-weight:600}
  .print-logo{display:block!important;height:30px;margin-bottom:.5rem}
  .legend{font-size:8pt;margin-top:.6rem}
  a[href]:after{content:""}
}

/* Interior/town pages (anything with a .pagehead) use a smaller UI scale than the
   homepage — Cesar: "we'll use bigger fonts only in the home page". */
body:has(.pagehead) .btn{font-size:.8rem;padding:.72rem 1.35rem}
body:has(.pagehead) .btn--lg{font-size:.85rem;padding:.82rem 1.55rem}
body:has(.pagehead) .faq summary{font-size:.85rem}
.video-cap{text-align:center;font-size:.82rem;color:var(--ink-soft);margin:.6rem 0 0}

/* media figure: photo card with caption (replaces the borrowed-video embed) */
.card--flush{padding:0;overflow:hidden;margin:0}
.card--flush img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;object-position:center 20%}
.card--flush figcaption{padding:.9rem 1.2rem;font-size:.9rem;color:var(--ink-soft)}
.media-credit{text-align:center;font-size:.82rem;color:var(--ink-soft);margin:.7rem 0 0;line-height:1.5}
.media-cap{padding:.9rem 1.2rem;font-size:.9rem;color:var(--ink-soft)}

/* ---- pricer: square-footage slider + deep-clean-only questions ---- */
.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}
.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}
.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}
.calc__range:focus-visible{box-shadow:0 0 0 3px rgba(26,93,127,.35)}
.calc__scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-soft)}
.calc__q>span.q b{color:var(--teal);font-weight:600}
.calc__hint{font-size:.78rem;color:var(--ink-soft);margin:.5rem 0 0;line-height:1.5}
.calc__hours{font-size:.78rem;color:var(--ink-soft);margin:.5rem 0 1rem}
.pills--stack{flex-direction:column;align-items:stretch}
.pills--stack .pill{text-align:left}
/* deep-clean-only questions hide unless the deep service is selected */
.deep-only{display:none}
body.is-deep .deep-only{display:block}
body.is-deep #qFreqWrap{display:none}
.calc__debug{margin-top:2.4rem;padding:1.4rem 1.6rem;border:1px dashed var(--line);border-radius:var(--radius);background:var(--white)}
.calc__debug h3{margin:0 0 .9rem;font-size:1rem;color:var(--teal)}
.calc__debug h3 small{font-weight:400;color:var(--ink-soft);font-size:.72rem;margin-left:.6rem}
.calc__debugtable{width:100%;border-collapse:collapse;font-size:.82rem}
.calc__debugtable td{padding:.42rem .6rem;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.calc__debugtable td:nth-child(2){text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.calc__debugtable td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums;color:var(--teal);white-space:nowrap}
/* hours are internal only — customers see price, never the clock */
.calc__hours{display:none}
body.is-debug .calc__hours{display:block}

/* ---- pricer: progressive disclosure so an embed never overwhelms the page ---- */
.calc__more{border-top:1px solid var(--line);margin-top:1.1rem;padding-top:.9rem}
/* Cesar, 2026-08-09 (screenshot, dark mode): "at bathrooms, pets and deep clean options,
   it's not standing out. I would just reverse the colors." Was teal/orange TEXT on the card
   background — invisible on the dark theme. Reversed: filled orange bar, white text, both
   themes, so the row reads as the button it actually is. */
.calc__more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;
  font-size:.84rem;font-weight:600;color:#fff;background:var(--orange);
  padding:.55rem .8rem;border-radius:10px}
.calc__more>summary::-webkit-details-marker{display:none}
.calc__more>summary::after{content:'+';margin-left:auto;color:#fff;font-size:1.3rem;line-height:1}
.calc__more[open]>summary::after{content:'–'}
.calc__more>summary:hover{background:var(--orange-dk,#c9640a)}
.calc__morein{padding-top:.7rem}
.calc__morein .calc__q:first-child{margin-top:0}

/* ---- pricer: ballpark explainer + inline lead capture ---- */
.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)}
.calc__ballpark p{font-size:.84rem;line-height:1.55;color:var(--ink-soft);margin:0 0 .55rem}
.calc__ballpark p:last-child{margin-bottom:0}
.calc__ballpark-lead{font-size:.92rem!important;color:var(--ink)!important}
.calc__promise{border-top:1px solid rgba(26,93,127,.18);padding-top:.55rem;color:var(--teal)!important}
.calc__promise b{color:var(--orange)}
.calc__cta{width:100%;margin-top:1rem}
/* the in-pricer lead form's styles were removed 2026-08-10 with the form itself —
   the pricer informs; contact happens by phone or on the contact page */

/* ---- pricer: the ballpark block sits on the DARK result panel — light text required ---- */
.calc__result .calc__ballpark{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.calc__result .calc__ballpark p{color:#dce9ee}
.calc__result .calc__ballpark-lead{color:#fff!important}
.calc__result .calc__promise{border-top-color:rgba(255,255,255,.24);color:#eaf4f7!important}
.calc__result .calc__promise b{color:var(--orange)}
.calc__result .calc__hours{color:#bcd8e2}
.calc__result .calc__thanks p{color:#dce9ee}
.calc__result .calc__thanks-h{color:#fff!important}
.calc__result .btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}  /* background is explicit on purpose: without it, a button also carrying btn--teal took
     its white background from .calc__result .btn--teal and its white text from here. */
.calc__result .btn--ghost:hover{background:rgba(255,255,255,.12)}

/* ---- town-page pricing section: copy on top, pricer full width beneath ---- */
/* Text LEFT, estimate tool RIGHT. It used to be display:block, which capped the copy at 78ch and
   ran the pricer full width underneath — leaving ~390px of dead space beside the text on a 1276px
   container. Cesar spotted it: "the Pricer is for the whole width of the page, and the text above
   it takes only half… there's something missing on the right side."
   The right column uses the pricer's narrow mode, so it stacks its own form and result. */
.pricing-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:2.4rem;align-items:start}
/* Pin the SHORTER column and let the taller one scroll past it — the same rule as .split--media,
   where the photo is pinned because the copy is taller. Here it is the other way round: the
   calculator runs ~155px taller than the copy, so the COPY is what gets pinned. Sticking the
   calculator instead (the first attempt) left dead space beside the text as you scrolled.
   Cesar: "have the text on the left follow scrolling similar to what you did in other places…
   the calculator takes more place and looks out of balance." */
.pricing-wrap>div:first-child{max-width:none;margin-bottom:0;position:sticky;top:112px;align-self:start}
.pricing-calc{width:100%}
@media(max-width:980px){
  .pricing-wrap{grid-template-columns:1fr;gap:1.8rem}
  .pricing-wrap>div:first-child{max-width:78ch;margin-bottom:.4rem;position:static}
}
.pricing-calc__frame{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}

/* ---- "cleaned your way": scope is the customer's to set ---- */
.yourway-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem}
.yourway{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-md);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.yourway:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--aqua)}
.yourway h3{font-family:var(--serif);font-size:1.02rem;font-weight:500;color:var(--teal);margin:0 0 .55rem}
.yourway p{font-size:.9rem;color:var(--ink-soft);margin:0}
.yourway-note{max-width:74ch;margin:2rem auto 0;text-align:center;font-size:.9rem;color:var(--ink-soft);line-height:1.65}
.yourway-note b{color:var(--teal)}
.yourway-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;margin-top:1.6rem}
/* #detail sits in a left-aligned split column, so its button row stays left (not centred
   like .yourway-cta) — estimate + the room-by-room checklist */
.detail-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.yourway-cta__note{font-size:.86rem;color:var(--ink-soft)}
.yourway-cta__note{text-align:center;font-size:.86rem;color:var(--ink-soft);margin:1rem auto 0;max-width:62ch;line-height:1.6}
.yourway-inline{margin:1.4rem 0 0;padding:1rem 1.2rem;border-left:3px solid var(--orange);
  background:var(--tint);border-radius:0 10px 10px 0;font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.yourway-inline b{color:var(--teal)}

/* ── PRICE FACADE ──────────────────────────────────────────────────────────
   A styled placeholder that looks like the estimate tool and loads it only on
   click — the same trick as the Vimeo facade, for the same reason: no iframe
   cost on pages that carry one. Cesar (2026-08-07): "any links or pictures of
   like a placeholder, so when they click they get transferred to the pricer…
   like you do with videos. To make the page faster to load."
   Zero network cost until the visitor asks for it. */
.pricefac{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  box-shadow:var(--shadow-md);overflow:hidden;margin:2.2rem 0;text-align:left;width:100%;
  display:block;padding:0;cursor:pointer;font:inherit;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pricefac:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--aqua)}
.pricefac:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.pricefac__in{display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center;padding:1.5rem 1.6rem}
@media(max-width:620px){.pricefac__in{grid-template-columns:1fr;gap:1.1rem}}
.pricefac__eyebrow{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);font-weight:600;margin:0 0 .35rem}
.pricefac__h{font-family:var(--serif);font-size:1.28rem;font-weight:400;line-height:1.25;margin:0 0 .45rem;color:var(--ink)}
.pricefac__p{font-size:.85rem;color:var(--ink-soft);margin:0;line-height:1.5}
/* the sample controls — decorative, they signal "this is a thing you can touch" */
.pricefac__demo{display:flex;flex-wrap:wrap;gap:.35rem;margin:.85rem 0 0}
.pricefac__demo span{font-size:.74rem;padding:.34rem .7rem;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);background:var(--tint);white-space:nowrap}
.pricefac__demo span.on{background:var(--teal);border-color:var(--teal);color:#fff}
.pricefac__go{display:grid;place-items:center;gap:.5rem;text-align:center;min-width:130px}
.pricefac__btn{display:inline-block;background:var(--orange);color:#fff;font-weight:600;
  font-size:.85rem;padding:.75rem 1.3rem;border-radius:999px;white-space:nowrap}
.pricefac:hover .pricefac__btn{background:var(--orange-dark,#e2761a)}
.pricefac__time{font-size:.72rem;color:var(--ink-soft)}
/* once loaded, the iframe takes the card's place */
.pricefac--live{cursor:default;box-shadow:var(--shadow-md);transform:none}
.pricefac--live:hover{transform:none;border-color:var(--line)}

/* ── functional pages: contact, booking, careers ───────────────────────────
   The GHL iframes resize themselves via link.msgsndr.com/js/form_embed.js,
   which messages the parent and sets an inline height. So DO NOT put a fixed
   height here — style the frame only, and let data-height carry the initial
   value so the box doesn't collapse before the script lands. */
.ghl{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:.5rem;overflow:hidden}
.ghl iframe{display:block;width:100%;border:0;border-radius:10px;background:#fff}
.ghl-note{font-size:.8rem;color:var(--ink-soft);margin:.9rem 0 0;line-height:1.5}
.ghl-note a{font-weight:600}

/* contact: details beside the form. The card is the shorter column, so it's
   the one that pins — same rule as .split--media and .pricing-wrap. */
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:2.6rem;align-items:start}
.contact-grid>.contact-card{position:sticky;top:112px;align-self:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:1.8rem}
  .contact-grid>.contact-card{position:static}}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.7rem}
.contact-card h2{font-size:1.12rem;margin-bottom:.9rem}
.contact-card h2+p{margin-top:-.5rem}
.cline{display:flex;gap:.7rem;align-items:flex-start;padding:.62rem 0;border-top:1px solid var(--line);font-size:.88rem}
.cline:first-of-type{border-top:0}
.cline .ci{color:var(--orange);flex:none;font-size:1rem;line-height:1.5}
.cline b{display:block;color:var(--ink);font-weight:600}
.cline span,.cline a{color:var(--ink-soft)}
.cline a:hover{color:var(--orange)}
.hours{margin:.5rem 0 0;font-size:.86rem}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding:.24rem 0;color:var(--ink-soft)}
.hours div.closed{color:var(--ink-soft);opacity:.75}
.hours dt{font-weight:500}
.hours b{color:var(--ink);font-weight:600}

/* the 9 questions — a numbered reference list, not a wall of prose */
.qa{max-width:820px;margin:0 auto;padding:0;counter-reset:qa;list-style:none}  /* list-style:none is load-bearing — the base reset covers ul but not ol, so without
     it the native marker prints beside the counter circle and every item reads "1. 1". */
.qa>li{counter-increment:qa;position:relative;padding:1.3rem 0 1.3rem 3.3rem;border-top:1px solid var(--line)}
.qa>li:first-child{border-top:0}
.qa>li::before{content:counter(qa);position:absolute;left:0;top:1.35rem;width:2.2rem;height:2.2rem;
  border-radius:50%;background:var(--tint);border:1px solid var(--line);color:var(--teal);
  font-family:var(--serif);font-size:1rem;display:grid;place-items:center}
.qa h3{font-size:1.04rem;margin-bottom:.4rem}
.qa p{color:var(--ink-soft);font-size:.88rem;margin:0 0 .6rem}
.qa p:last-child{margin-bottom:0}
@media(max-width:560px){.qa>li{padding-left:2.9rem}}

/* ── question flags ────────────────────────────────────────────────────────
   Cesar, 2026-08-07: "if you have a question, mark it somehow so I can see it
   ... put a different color, like violet." These are MY open questions, parked
   in place on the page they belong to, so the page-by-page review can't skip one.

   Violet deliberately — nothing in the brand palette is near it, so a flag left
   in by accident is impossible to mistake for design. check-copy.py BLOCKS on any
   .qflag surviving to launch; that is the safety net, don't remove it. */
.qflag{--q:#7C3AED;
  position:relative;display:block;margin:1.2rem auto;max-width:820px;
  background:#f6f2ff;border:1px solid #ddd0fb;border-left:4px solid var(--q);
  border-radius:10px;padding:.9rem 1.1rem .9rem 3rem;
  font-family:var(--sans);font-size:.85rem;line-height:1.55;color:#3b2d5c}
.qflag::before{content:'?';position:absolute;left:.95rem;top:.85rem;
  width:1.5rem;height:1.5rem;border-radius:50%;background:var(--q);color:#fff;
  font-weight:700;font-size:.85rem;display:grid;place-items:center}
/* the LABEL only — direct child. Scoped, because a <b> inside the body text is just bold
   text, and an unscoped rule turned a mid-sentence phrase into a block heading. */
.qflag>b{display:block;color:var(--q);font-weight:700;font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:.25rem}
.qflag p b{font-weight:700;color:#2c1f4a}
.qflag p{margin:0 0 .5rem}
.qflag p:last-child{margin-bottom:0}
.qflag code{background:#ece3ff;padding:.1rem .35rem;border-radius:4px;font-size:.92em}
@media(prefers-color-scheme:dark){
  .qflag{background:#241c39;border-color:#4a3a75;color:#e2d9f7}
}
/* Happy Maids' own answer, under each vetting question. Tinted so a reader scanning the
   page can see at a glance that every question has one — that is the persuasive part. */
.qa-ours{background:var(--tint);border-left:3px solid var(--aqua);border-radius:0 8px 8px 0;
  padding:.65rem .9rem;margin:.7rem 0 0!important;color:var(--ink)!important;font-size:.88rem}
.qa-ours b{color:var(--teal);font-weight:600}

/* AvaHR jobs embed (/contact-careers/). Their embed.js injects its own stylesheet plus Font
   Awesome and intl-tel-input into <head>, so this is a containment box, not a design: give the
   widget a defined column and stop its typography inheriting our .prose rules. */
.avahr{max-width:820px;margin:0 auto;min-height:120px}
.avahr #profileEmbed{font-family:var(--sans)}
.avahr img{max-width:100%;height:auto}


/* ── blog hero ─────────────────────────────────────────────────────────────
   99 posts shipped as pure text, which reads as unfinished however good the writing is.
   The image is the post's own og:image, pulled from its live twin — already chosen and
   topically right. aspect-ratio + object-fit means a portrait or landscape source both
   land in the same band, so the page never jumps between posts. */
.post-hero{margin:0 0 2.2rem}
.post-hero img{width:100%;max-width:900px;margin:0 auto;display:block;
  height:auto;aspect-ratio:16/7;object-fit:cover;object-position:center 42%;
  border-radius:var(--radius);box-shadow:var(--shadow-md)}
/* height:auto is load-bearing. The width/height ATTRIBUTES on the <img> (needed so the browser
   reserves the box and the text does not jump) become presentational CSS hints — so height="512"
   sets a used height of 512px and aspect-ratio never gets a say. Same family as the inline-style
   trap: a presentational attribute quietly beating the stylesheet. */
@media(max-width:680px){.post-hero img{aspect-ratio:3/2;border-radius:10px}}

/* The after-hours callback offer, injected by cta.js next to the "Closed now" line.
   Underlined and in the brand orange so it reads as the actionable thing on a line that is
   otherwise just status text. */
.cta-callback{margin-left:.55rem;font-weight:600;color:var(--orange-text);
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cta-callback:hover{color:var(--orange-dk)}
.cta-callback::before{content:'· ';color:var(--ink-soft);text-decoration:none;font-weight:400}

/* ── booking fast-track form ───────────────────────────────────────────────
   A branded first step in front of the MaidCentral tool. Collects the five fields
   MaidCentral's quoting URL accepts as prefill (FirstName, LastName, Email, Phone,
   PostalCode) so the customer types them once, in our design, and the tool opens
   already filled in.
   Deliberately NOT a gate — the skip link goes straight to the tool. A working
   booking flow should never be hidden behind a form. */
.bookform{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:1.9rem;max-width:640px;margin:0 auto}
.bookform h2{font-size:1.32rem;margin-bottom:.35rem}
.bookform>p{color:var(--ink-soft);font-size:.88rem;margin-bottom:1.3rem}
.bookform__row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
@media(max-width:560px){.bookform__row{grid-template-columns:1fr}}
.bookform label{display:block;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:.3rem}
.bookform input{width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:10px;
  font-family:var(--sans);font-size:.92rem;color:var(--ink);background:var(--white)}
.bookform input:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:var(--aqua)}
.bookform .btn{width:100%;justify-content:center;margin-top:.4rem}
.bookform__skip{text-align:center;font-size:.85rem;color:var(--ink-soft);margin:.9rem 0 0}
.bookform__note{font-size:.78rem;color:var(--ink-soft);margin:.9rem 0 0;line-height:1.5}
.bookform__consent{margin:1.1rem 0 .3rem;display:flex;flex-direction:column;gap:.7rem}
.bookform__consent label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;
  font-size:.82rem;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.bookform__consent input{width:auto;flex:none;margin-top:.15rem;accent-color:var(--teal)}

/* The MaidCentral booking tool is a two-column app (question flow + Summary sidebar), not a
   simple form. Cesar, 2026-08-07: *"form is to narrow."* At 900px both columns were squeezed —
   "What Is the square footage of your home?" broke across two lines and the Summary clipped his
   email to "Emailcesar@happymaids.c". Their tool has no horizontal scroll of its own, so
   whatever width we hand it is the width the customer gets.
   1240px is measured, not guessed: the widest label row plus the sidebar at their own font
   sizes. `.ghl` padding is trimmed here so the frame keeps that full 1240 rather than losing a
   centimetre to our card. */
#booktool{max-width:1240px;margin:2rem auto 0;scroll-margin-top:110px}
#booktool .ghl{padding:.35rem}
@media(max-width:1300px){#booktool{max-width:100%}}

/* ── iOS zoom-on-focus guard ───────────────────────────────────────────────
   Cesar, 2026-08-08: *"most people … use actually mobile telephone … even the older
   people."* Safari on iOS ZOOMS THE WHOLE PAGE when a focused text control has a
   font-size below 16px, and it does not zoom back out. The visitor then pinches to
   escape, mid-form. It is invisible on desktop and invisible in a desktop browser's
   responsive mode — it only reproduces on a real iPhone, which is exactly why it
   survived this long.

   Measured before this rule: the pricer's contact fields were 15.84px and the old
   index.html form 15.52px. Under the threshold by a fraction of a pixel, with the
   full penalty.

   16px is a floor, not a look — it applies only at phone widths, so the desktop
   typography is untouched. `type="range"` is deliberately excluded: a slider takes
   no text, never triggers the zoom, and forcing a size on it would resize the track. */
@media (max-width: 768px) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
  select, textarea { font-size: 16px !important; }
}

/* ── blog CTAs ─────────────────────────────────────────────────────────────
   Cesar, 2026-08-09: "there is no CTA from the blog … anything that will follow them to give
   them opportunity to get a quote, send us a message or give us a call, scrolling bar on the
   side that follows when they read."
   Two pieces, chosen by width:
   * .siderail — fixed card that follows the reader. ≥1240px ONLY: the post column is ~800px
     centered, so below that the rail would sit on top of the prose.
   * .postcta — inline block at the end of every post, ALL widths. ≤940px the mobilebar already
     follows the reader, so between 941–1239px the end-of-post block is the CTA. */
.postcta{background:linear-gradient(160deg,var(--teal),var(--teal-dk));color:#fff;
  border-radius:var(--radius);padding:1.6rem 1.8rem;margin:2.6rem auto 0;max-width:820px}
.postcta h2{color:#fff;font-size:1.35rem;margin:0 0 .4rem}
.postcta p{color:rgba(255,255,255,.88);margin:0 0 1.1rem;font-size:.95rem}
.postcta__row{display:flex;flex-wrap:wrap;gap:.7rem}
.postcta .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.postcta .btn--ghost:hover{background:rgba(255,255,255,.12)}
.siderail{display:none}
@media(min-width:1240px){
  .siderail{display:block;position:fixed;right:18px;top:50%;transform:translateY(-50%);
    width:218px;z-index:55;background:var(--white);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow-md);padding:1.1rem 1.15rem}
  .siderail b{display:block;font-size:.95rem;margin-bottom:.15rem}
  .siderail p{font-size:.78rem;color:var(--ink-soft);margin:0 0 .75rem;line-height:1.45}
  .siderail .btn{width:100%;justify-content:center;margin-bottom:.55rem;font-size:.85rem;
    padding:.6rem .5rem}
  .siderail__alt{font-size:.78rem;text-align:center;margin:0;color:var(--ink-soft)}
}
@media print{.siderail,.postcta{display:none}}
.calc__addons{font-size:.8rem;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}
.calc__addons b{color:#fff}


}