/* ============================================================
   PPP Septic: theme (tokens + page sections)
   Green #86b454 accent, near-black text, 16px radius, Hanken Grotesk.
   Text-bearing green fills use --btn (deeper, 4.7:1 with white); the bright
   --accent is for non-text marks. Set --btn: var(--accent) and --btn-fg: #0d160a
   to get the template's brighter fill with dark text instead.
   ============================================================ */
:root {
  --accent: #86b454;
  --btn: #4d7625;
  --btn-hover: #3f6320;
  --btn-fg: #fff;
  --mint: #f4f9f4;
  --mint-2: #e6f0e1;
  --ink: #0d160a;
  --ink-2: #48523f;
  --ink-3: #6b7563;
  --line: #dfe8db;
  --field: #f6f9f5;
  --ph: #1b3419;
  --focus: #1a73e8;
  --radius: 16px;
  --font: 'Hanken Grotesk', 'Hanken Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --measure: 75rem;
  --space-section: 5.5rem;
  --h2: clamp(1.875rem, 1.1rem + 2vw, 2.75rem);
  --header-h: 76px;
}
@media (max-width: 47.99rem) {
  :root { --space-section: 3.5rem; --header-h: 64px; }
}

/* --- Header ------------------------------------------------------- */
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); flex: none; }
.brand__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--btn); color: #fff; }
.brand__mark svg { width: 1.4rem; height: 1.4rem; }
.brand__name { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.brand__name b { font-weight: 800; color: var(--btn); }
.brand--img { --ls: .62; display: flex; align-items: center; min-height: 44px; }
.brand--img img { display: block; width: calc(var(--lw) * var(--ls) * 1px); height: auto; max-width: none; }
.footer .brand--img { --ls: .7; }
.nav { --nav-gap: 1.75rem; display: flex; align-items: center; justify-content: center; gap: var(--nav-gap); margin-inline: auto; font-size: .9375rem; font-weight: 500; }
.nav a { text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav > a, .nav__dd-link { padding-block: .5rem; }
.nav a:hover { color: var(--btn); }
.nav a[aria-current="page"], .nav__dd[data-here] > .nav__dd-link { color: var(--btn); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav__sub a[aria-current="page"] { color: var(--btn); font-weight: 700; background: var(--mint); }
.nav a:focus-visible { border-radius: 6px; }
.nav__dd { position: relative; display: flex; align-items: center; gap: 0; padding-block: 0; }
.nav__dd-btn { display: grid; place-items: center; width: 18px; height: 24px; color: inherit; margin-right: -2px; }
.nav__dd-btn svg { width: 9px; height: 9px; transition: transform .2s; stroke-width: 2.4; }
.nav__sub {
  position: absolute; top: 100%; left: -1rem; min-width: 17.5rem; padding: .5rem; margin: 0; list-style: none;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(13, 22, 10, .16);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s .2s, transform .15s .2s, visibility 0s .35s;   /* short close delay so the panel does not flicker */
}
.nav__sub a { display: block; padding: .6rem .85rem; border-radius: 10px; font-weight: 500; }
.nav__sub a:hover { background: var(--mint); }
.nav__dd:hover .nav__sub, .nav__dd:focus-within .nav__sub, .nav__dd[data-open="true"] .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: .05s, .05s, 0s; }
.nav__dd[data-open="true"] .nav__dd-btn svg { transform: rotate(180deg); }
.nav-toggle { display: none; width: 48px; height: 48px; place-items: center; border-radius: var(--btn-radius); }
.burger { position: relative; display: block; width: 22px; height: 16px; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s, top .2s; }
.burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { top: 7px; } .burger span:nth-child(3) { top: 14px; }
.masthead[data-open="true"] .burger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.masthead[data-open="true"] .burger span:nth-child(2) { opacity: 0; }
.masthead[data-open="true"] .burger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media (max-width: 79.99rem) {
  .nav-toggle { display: grid; margin-left: auto; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0;
    background: #fff; padding: .5rem 1.25rem 1.25rem; box-shadow: 0 18px 30px rgba(13, 22, 10, .12);
    max-height: calc(100vh - var(--header-h) - var(--banner-h, 0px)); max-height: calc(100dvh - var(--header-h) - var(--banner-h, 0px)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); font-size: 1.0625rem;
  }
  .masthead[data-open="true"] .nav { display: flex; }
  .nav > a, .nav__dd-link { display: flex; align-items: center; min-height: 48px; padding-block: 0; border-bottom: 1px solid var(--line); }
  .nav__dd { display: flex; flex-wrap: wrap; padding: 0; gap: 0; border-bottom: 1px solid var(--line); }
  .nav__dd .nav__dd-link { flex: 1; border-bottom: 0; }
  .nav__dd-btn { display: grid; width: 56px; height: 48px; margin: 0; }
  .nav__dd-btn svg { width: 12px; height: 12px; }
  .nav__dd[data-open="true"] .nav__dd-btn svg { transform: rotate(180deg); }
  .nav__sub { display: none; position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 .5rem 1rem; min-width: 0; }
  .nav__dd[data-open="true"] .nav__sub { display: block; }
  .nav .nav__dd:hover .nav__sub { opacity: 1; }
  .nav__sub a { display: flex; align-items: center; min-height: 48px; padding: 0; font-size: 1rem; color: var(--ink-2); border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav__sub a:hover { background: none; }
}
@media (max-width: 39.99rem) {
  .masthead__inner { gap: .6rem; }
  .masthead .brand--img { --ls: .52; }
  .brand__name { font-size: 1.25rem; }
  .brand__mark { width: 36px; height: 36px; }
}

/* --- Sticky call bar (phones; appears after the hero scrolls away) --- */
.callbar { display: none; }
@media (max-width: 47.99rem) {
  body { padding-bottom: 4.5rem; }
  .callbar {
    display: grid; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 24px rgba(13, 22, 10, .12);
    transform: translateY(110%); transition: transform .25s;
  }
  .cb-show .callbar { transform: none; }
  .callbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callbar .btn { width: 100%; min-width: 0; padding-inline: .75rem; border-color: var(--line); }
}

@media (max-width: 47.99rem) {
  .form { padding: 1.25rem; }
  .field-row { grid-template-columns: 1fr; }
}

/* --- Icon circles ------------------------------------------------------ */
.ico-circle { margin-bottom: auto; }
.ico-circle { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; flex: none; }
.ico-circle svg { width: 1.45rem; height: 1.45rem; }

/* --- Services grid (photo cards with overlay) ------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.svc-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc { position: relative; display: grid; place-items: center; aspect-ratio: auto; min-height: max(11rem, calc((min(100vw - min(2.5rem, 10vw), 75rem) - 1.25rem) / 4)); border-radius: var(--radius); overflow: hidden; background: var(--ph); text-decoration: none; color: #fff; isolation: isolate; }
.svc__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(5, 12, 4, .54); transition: background-color .25s; }
.svc:hover .svc__img { transform: scale(1.04); }
.svc:hover::after { background: rgba(5, 12, 4, .6); }
.svc__txt { display: grid; gap: .35rem; text-align: center; padding: 0 1.25rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.svc h3 { font-size: clamp(1.25rem, .9rem + 1vw, 1.75rem); }
.svc__txt p { font-size: .9375rem; line-height: 1.4; color: #fff; font-weight: 500; max-width: 30rem; margin-inline: auto; }
@media (max-width: 63.99rem) { .svc-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-grid--three .svc:nth-child(3) { display: none; } }
@media (max-width: 39.99rem) {
  .svc-grid, .svc-grid--three { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .svc-grid--three .svc:nth-child(3) { display: grid; }

}

/* --- How it works (4 icon cards) ------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.step .ico-circle { margin-bottom: 1.25rem; }
.step h3 { margin-bottom: .6rem; }
.step p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 63.99rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .head--split { flex-direction: column; align-items: flex-start; } }
@media (max-width: 39.99rem) { .steps { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .head--split .btn { width: 100%; } }

.steps__note { margin-top: 1.75rem; font-size: .9375rem; color: var(--ink-2); }
.head--split .lede { margin-top: 1rem; max-width: 40rem; }

/* --- Service areas (map + white town card) ------------------------------- */
.town-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 1.5rem 0; list-style: none; padding: 0; }
.town-pills li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.town-pills--light { grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }
.town-pills--light li:last-child:nth-child(odd) { grid-column: auto; }

/* --- Blog cards ------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1.5rem; }
.posts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.post-card__img { aspect-ratio: 16 / 10; background: var(--ph); overflow: hidden; }
.post-card__img img, .post-card__img .ph-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .post-card__img img { transform: scale(1.03); }
.post-card__body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card__meta { font-size: .8125rem; font-weight: 600; color: var(--btn); }
.post-card h3 { font-size: 1.25rem; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ''; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card__body > p:last-child { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 63.99rem) { .posts--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .posts--three .post-card:nth-child(3) { display: none; } }
@media (max-width: 39.99rem) { .posts--three { grid-template-columns: minmax(0, 1fr); } .posts--three .post-card:nth-child(3) { display: flex; } .posts { grid-template-columns: minmax(0, 1fr); } }

/* --- FAQ + photo ------------------------------------------------------------- */

/* --- CTA band --------------------------------------------------------------- */
.cta { position: relative; background: #12301a; color: #fff; overflow: hidden; isolation: isolate; }
.cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 26, 8, .86) 0%, rgba(8, 26, 8, .62) 60%, rgba(8, 26, 8, .4) 100%); }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding-block: 5rem; }
.cta h2 { font-size: clamp(1.875rem, 1.1rem + 2vw, 2.75rem); max-width: 18ch; }
.cta__copy p { margin-top: 1rem; max-width: 34rem; color: rgba(255, 255, 255, .92); font-size: 1.0625rem; }
.cta__btns { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; flex: none; }
@media (max-width: 47.99rem) {
  .cta::after { background: linear-gradient(180deg, rgba(8, 26, 8, .78) 0%, rgba(8, 26, 8, .66) 55%, rgba(8, 26, 8, .5) 100%); }   /* text spans the full width on a phone, so the scrim is vertical */
  .cta__inner { flex-direction: column; align-items: stretch; padding-block: 3.5rem; gap: 1.75rem; }
  .cta__btns { align-items: stretch; }
  .cta__btns .btn { width: 100%; }
}

/* --- Footer ---------------------------------------------------------------------- */
.footer { background: #fff; padding-top: 4.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr .8fr; gap: 3rem; padding-bottom: 3.5rem; }
.footer h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.footer a { text-decoration: none; }
.footer ul a:hover { color: var(--btn); }
.footer__brand p { margin: 1.25rem 0; color: var(--ink-2); max-width: 22rem; }
.ft-contact li { display: flex; gap: .6rem; align-items: flex-start; }
.ft-ico { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; color: var(--btn); }
.social { display: flex; gap: .5rem; }
.social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--btn-radius); border: 1px solid var(--ink); font-size: .8rem; font-weight: 700; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .9375rem; }
.footer__legal a:hover { color: var(--btn); }
.ft-hours.needs { background: none; padding: 0; font-size: inherit; font-weight: inherit; }
@media (max-width: 63.99rem) { .clean .footer__grid:not(.has-hours), .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
@media (max-width: 39.99rem) { .footer { padding-top: 3rem; } .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-bottom: 2.5rem; } .footer ul a { display: inline-flex; min-height: 32px; align-items: center; } }

/* --- Inner pages ----------------------------------------------------------------- */
.pagehero { position: relative; color: #fff; background: linear-gradient(135deg, #10301a, #1f4d24); overflow: hidden; isolation: isolate; }
.pagehero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pagehero--photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 12, 4, .82), rgba(5, 12, 4, .5)); }
.pagehero__inner { padding-block: 4.25rem 4.5rem; }
.pagehero h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); max-width: 22ch; }
.pagehero__lede { margin-top: 1rem; max-width: 38rem; font-size: 1.125rem; color: rgba(255, 255, 255, .9); }
.pagehero .btn-row { margin-top: 1.75rem; }
@media (max-width: 47.99rem) {
  .pagehero__inner { padding-block: 2.5rem 2.75rem; }
  .pagehero .btn-row { flex-direction: column; align-items: stretch; }
  .pagehero .btn-row .btn { width: 100%; }
}
.two-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.prose-block h2 { font-size: 1.75rem; margin: 0 0 .75rem; }
.prose-block h2:not(:first-of-type) { margin-top: 2.25rem; }
.prose-block p { margin-top: .75rem; color: var(--ink-2); }
.bullets { padding-left: 1.2rem; margin: .5rem 0 0; color: var(--ink-2); }
.bullets li { margin-top: .4rem; }
.side-form { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.side-form .form { border: 1px solid var(--line); box-shadow: 0 14px 44px rgba(13, 22, 10, .1); }
.svc-list { display: grid; gap: .6rem; margin-top: 1rem; }
.svc-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .5rem 1.1rem; border-radius: var(--btn-radius); background: var(--mint); text-decoration: none; font-weight: 600; }
.svc-list a:hover { background: var(--mint-2); }
.svc-list svg { width: 1.1rem; height: 1.1rem; color: var(--btn); }
.county { margin-bottom: 2.5rem; }
.county h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.also { margin-top: 1rem; color: var(--ink-2); }
.post-meta-bar { background: #fff; padding-top: 1.5rem; }
.post-meta { color: var(--ink-3); font-size: .9375rem; }
.post-figure { padding-block: 1.5rem 0; }
.post-figure figure { border-radius: var(--radius); overflow: hidden; background: var(--ph); }
.post-figure img { width: 100%; }
.post-figure .ph-img { aspect-ratio: 16 / 9; }
.post-body { padding-block: 1rem 4rem; }
@media (max-width: 63.99rem) { .two-col { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .side-form { position: static; } }

/* --- Town facts (area pages) ---------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-top: 2rem; padding: 0; }
.facts div { background: rgba(255,255,255,.12); border-radius: 12px; padding: .9rem 1.1rem; }
.facts dt { font-size: .8125rem; color: rgba(255,255,255,.75); }
.facts dd { font-weight: 700; font-size: 1.0625rem; }

/* --- Tap targets for stand-alone text links (SOP: 40px or taller on touch) ----------- */
.faq__src, .fcard__src { display: inline; }

/* --- Checkup Plan banner (permanent, slim, under the menu) --------------------------------------- */
.plan-banner { display: block; background: #12301a; color: #fff; text-decoration: none; font-size: .9375rem; line-height: 1.3; transition: opacity .15s; }
.plan-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .875rem; }
.pb-short { display: none; }

/* --- Trust strip under the hero ---------------------------------------------------------------------- */
.trust { background: #fff; border-bottom: 1px solid var(--line); }

/* --- Checkup Plan page ----------------------------------------------------------------------------------- */
.incs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.inc { display: flex; gap: 1rem; align-items: flex-start; background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.inc h3 { font-size: 1.125rem; margin-bottom: .35rem; }
.inc p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.inc .ico-circle { width: 40px; height: 40px; }
.inc .ico-circle svg { width: 1.2rem; height: 1.2rem; }
.clean .inc.needs { display: none !important; }
.inc.needs { background: #fffbe0; font-size: inherit; padding: 1.4rem; font-weight: 400; color: inherit; border: 1px dashed #d9c75a; }
.plan-note { margin-top: 2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.plan-h2 { font-size: var(--h2); margin-bottom: 1.5rem; }
.faq details.needs { background: #fffbe0; }
@media (max-width: 63.99rem) { .incs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .incs { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

.footer__op { color: var(--ink-3); font-size: .875rem; padding-bottom: 1rem; }
.faq details.needs { font-size: inherit; font-weight: inherit; padding: 0; color: inherit; line-height: inherit; }

/* ======= Round 2 ======================================================================== */
/* Emergency link: red accent in the header on desktop; first, prominent item in the phone menu */
:root { --red: #b3261e; --red-bg: #fdecea; }
.masthead__emerg { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9375rem; color: var(--red); text-decoration: none; padding: .5rem .85rem; border-radius: var(--btn-radius); border: 1.5px solid var(--red); white-space: nowrap; flex: none; }
.masthead__emerg svg { width: 1rem; height: 1rem; }
.masthead__emerg:hover, .masthead__emerg[aria-current="page"] { background: var(--red); color: #fff; }
.nav__emerg { display: none; }
@media (max-width: 79.99rem) {
  .masthead__emerg { display: none; }
  .nav .nav__emerg { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; margin: .75rem 0 .25rem; border-radius: var(--btn-radius); background: var(--red); color: #fff; font-weight: 700; border-bottom: 0; }
  .nav .nav__emerg:hover { color: #fff; }
  .nav__emerg svg { width: 1.2rem; height: 1.2rem; }
}

/* Banner variants: same strip, one message per page */
.plan-banner--offer { background: #0f2a17; }

/* Hero extras */
.trustline { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .9375rem; color: rgba(255, 255, 255, .92); }
.trustline svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--accent); }
.section--flush-top { padding-top: 0; }

/* Commercial strip */
.comm-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; }
.comm-strip h2 { margin-bottom: .75rem; max-width: 22ch; }
.comm-strip .lede { max-width: 38rem; }
@media (max-width: 63.99rem) { .comm-strip__inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .comm-strip .btn-row .btn { width: 100%; } .comm-strip .btn-row { width: 100%; } }

/* Logo slider: calm grayscale marquee. Pauses on hover/focus; static wrapped grid under reduced motion. */
.logos-h { font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); }
.logos { position: relative; overflow: hidden; display: flex; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos__track { display: flex; flex: none; align-items: center; gap: 3.5rem; padding: .75rem 1.75rem; margin: 0; list-style: none; min-width: 100%; justify-content: space-around; animation: logos-scroll 55s linear infinite; }
@media (hover: hover) { .logos:hover .logos__track { animation-play-state: paused; } }
.logos:focus-visible .logos__track { animation-play-state: paused; }
@keyframes logos-scroll { to { transform: translateX(-100%); } }
.logos__item:hover img { opacity: 1; }
.logos__line { text-align: center; margin-top: 1rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .logos { display: block; -webkit-mask-image: none; mask-image: none; }
  .logos__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; min-width: 0; }
  .logos__dup { display: none; }
}

/* Shared small bits */
.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps__note--center { text-align: center; max-width: 46rem; margin-inline: auto; }
.btn-row--center { justify-content: center; margin-top: 2rem; }
@media (max-width: 63.99rem) { .steps--three { grid-template-columns: minmax(0, 1fr); } }
.side-form--flat { position: static; }
.chk--red { background: var(--red) !important; }
p.needs.held { display: block; background: #fffbe0; padding: .75rem 1rem; font-weight: 400; font-size: .9375rem; border-radius: 8px; }

/* Inspection offer */
.offer-table { max-width: 38rem; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.offer-table table { width: 100%; border-collapse: collapse; }
.offer-table th, .offer-table td { padding: 1rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
.offer-table thead th { background: var(--mint-2); font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; }
.offer-table td { text-align: right; font-weight: 800; font-size: 1.5rem; color: var(--btn); white-space: nowrap; }
.offer-table tbody th { font-weight: 600; }
.offer-table tbody tr:last-child th, .offer-table tbody tr:last-child td { border-bottom: 0; }
.offer-table__under { padding: 1rem 1.4rem; background: var(--mint); font-size: .9375rem; color: var(--ink-2); }
.offer-h3 { text-align: center; margin: 3rem 0 1.5rem; font-size: 1.5rem; }
.stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.stack__row { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; }
.stack__row .ico-circle { width: 36px; height: 36px; }
.stack__row .ico-circle svg { width: 1.1rem; height: 1.1rem; }
.stack__row h3 { font-size: 1.0625rem; margin-bottom: .2rem; }
.stack__row p { font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.extras { display: grid; gap: .75rem; list-style: none; margin: 1.75rem auto 0; padding: 0; max-width: 46rem; }
.extras li { display: grid; gap: .15rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.extras span { color: var(--ink-2); font-size: .9375rem; }
.quiet:empty { display: none; }
@media (max-width: 63.99rem) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .stack { grid-template-columns: minmax(0, 1fr); } .offer-table td { font-size: 1.25rem; } }
.offer-box { background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.offer-box h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.offer-box p { color: var(--ink-2); margin-top: .6rem; }
.go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--btn); text-decoration: none; min-height: 40px; }
.go svg { width: 1rem; height: 1rem; }

/* Emergency "when to call" cards */
.when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.when__card { background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.when__card--call { background: var(--red-bg); border-color: #f1c4bf; }
.when__card h3 { font-size: 1.375rem; margin-bottom: 1rem; }
.when__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.when__card li { display: flex; gap: .75rem; align-items: flex-start; }
.when__card .chk { width: 1.6rem; height: 1.6rem; padding: .35rem; border-radius: 50%; background: var(--accent); color: #fff; flex: none; margin-top: .05rem; }
@media (max-width: 47.99rem) { .when { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.99rem) {
  .callbar .btn { white-space: nowrap; font-size: .9375rem; padding-inline: .5rem; gap: .4rem; }
  .callbar .btn svg { width: 1rem; height: 1rem; }
}

/* ======= Service areas: copy left, map card right (no overlap). Leaflet loads lazily; the poster stays until tiles are in ======= */
.areas__mapcard { border-radius: var(--radius); overflow: hidden; background: var(--ph); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(13, 22, 10, .1); position: relative; isolation: isolate; aspect-ratio: auto; min-height: 26rem; height: 100%; }
.areas__mapcard--wide { aspect-ratio: auto; height: clamp(24rem, 46vw, 36rem); }
.areas__map { position: absolute; inset: 0; background: var(--ph); }
.areas__map > img, .areas__map > .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.areas__map.is-live > img, .areas__map.is-live > .ph-img { opacity: 0; }
.map-live { position: absolute; inset: 0; z-index: 1; font: inherit; background: #e9efe5; opacity: 0; transition: opacity .4s; }
.areas__map.is-live .map-live { opacity: 1; }
@media (max-width: 63.99rem) {
  .areas__mapcard, .areas__mapcard--wide { aspect-ratio: auto; height: 22rem; }
}
@media (max-width: 47.99rem) { .areas__mapcard, .areas__mapcard--wide { height: 21.5rem; height: min(21.5rem, 80dvh); } }

/* Leaflet, dressed to match the site */
.leaflet-tile-pane { filter: saturate(.62) contrast(.94) brightness(1.03) sepia(.12) hue-rotate(50deg); }
.leaflet-container { font: inherit; background: #e9efe5; }
.leaflet-container a { color: var(--btn); }
.leaflet-bar { border: 0 !important; box-shadow: 0 2px 10px rgba(13, 22, 10, .2) !important; border-radius: var(--btn-radius) !important; overflow: hidden; }
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; color: var(--ink); font-weight: 600; border-color: var(--line); }
.leaflet-bar a:hover { background: var(--mint); color: var(--btn); }
.leaflet-control-zoom { margin: 12px 12px 0 0 !important; }
.leaflet-control-attribution { font-size: .6875rem; background: rgba(255, 255, 255, .78) !important; border-radius: 8px 0 0 0; padding: 1px 8px; color: var(--ink-2); }
.leaflet-control-attribution a { color: var(--ink-2); }
.pin-wrap { background: none; border: 0; }
.pinsvg { display: block; filter: drop-shadow(0 1.5px 1.5px rgba(13, 22, 10, .4)); transition: transform .15s; transform-origin: 50% 100%; }
.pin-wrap:hover .pinsvg { transform: scale(1.12); }
.pin-wrap:focus-visible { outline: none; }
.pin-wrap:focus-visible .pinsvg { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px var(--focus)) drop-shadow(0 0 3px var(--focus)); transform: scale(1.18); }
.pin-tip.leaflet-tooltip { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: .8125rem; padding: .3rem .8rem; box-shadow: 0 4px 14px rgba(13, 22, 10, .2); }
.pin-tip.leaflet-tooltip-top:before { display: none; }
.map-hint { position: absolute; left: 50%; bottom: 2rem; translate: -50% 0; z-index: 1000; background: rgba(13, 22, 10, .82); color: #fff; padding: .5rem 1rem; border-radius: 999px; font-size: .875rem; opacity: 0; pointer-events: none; transition: opacity .25s; white-space: nowrap; max-width: calc(100% - 2rem); overflow: hidden; text-overflow: ellipsis; }
.map-hint.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pinsvg, .map-live, .areas__map > img { transition: none; } }

/* ======= Round 3 ======= */
.footer h3 a:hover { color: var(--btn); }
.footer__brand .ft-contact { margin-bottom: 1.25rem; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.duo__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: grid; gap: .6rem; align-content: start; }
.duo__card h3 { font-size: 1.375rem; }
.duo__card p { color: var(--ink-2); }
.duo__card--red { background: var(--red-bg); border-color: #f1c4bf; }
.duo__card--red .go { color: var(--red); }
@media (max-width: 47.99rem) { .duo { grid-template-columns: minmax(0, 1fr); } }
.audience { margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--mint); border-radius: var(--radius); }
.audience h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.audience p { margin: 0; }
.offer-table--hero { margin: 1.75rem 0 0; max-width: 28rem; color: var(--ink); }
.offer-table--hero + .btn-row { margin-top: 1.5rem; }

/* $499 popup: calm modal on desktop, bottom sheet on phones; no scroll lock */
.popup { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.popup[hidden] { display: none; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(13, 22, 10, .55); animation: pp-fade .25s ease both; }
.popup__box { position: relative; width: min(100%, 31rem); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; background: #fff; border-radius: 20px; padding: 2rem 1.75rem 1.5rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); animation: pp-rise .3s ease both; outline: none; }
.popup__box h2 { font-size: 2rem; margin-bottom: .6rem; }
.popup__lede { color: var(--ink-2); font-size: 1.0625rem; }
.popup__checks { margin-top: .75rem; color: var(--ink-2); font-size: .9375rem; }
.popup__price { margin-top: .85rem; padding: .75rem 1rem; background: var(--mint); border-radius: 12px; font-size: .9375rem; }
.popup__price b { font-size: 1.125rem; color: var(--btn); }
.popup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; }
.popup__no { min-height: 48px; padding: 0 .5rem; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.popup__x { position: absolute; top: .6rem; right: .6rem; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--btn-radius); color: var(--ink); }
.popup__x svg { width: 1.4rem; height: 1.4rem; rotate: 45deg; }
.popup__x:hover { background: var(--mint); }
@keyframes pp-fade { from { opacity: 0; } }
@keyframes pp-rise { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 47.99rem) {
  .popup { align-items: flex-end; padding: 0; }
  .popup__box { width: 100%; border-radius: 20px 20px 0 0; max-height: 82vh; max-height: 82dvh; padding: 1.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .popup__box h2 { font-size: 1.625rem; padding-right: 2.5rem; }
  .popup__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .popup__backdrop, .popup__box { animation: none; } }

/* ======= Round 4: the standard page template ======= */

.ico-circle--sm { width: 36px; height: 36px; }
.ico-circle--sm svg { width: 1.1rem; height: 1.1rem; }

.inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.inc2 { display: flex; gap: 1rem; align-items: flex-start; background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.inc2 h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.inc2 p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.inc2 .ico-circle { width: 40px; height: 40px; }
.inc2 .ico-circle svg { width: 1.2rem; height: 1.2rem; }
.clean .inc2.needs { display: none !important; }
.inc2.needs { background: #fffbe0; border: 1px dashed #d9c75a; font-size: inherit; font-weight: 400; color: inherit; padding: 1.4rem; }
@media (max-width: 63.99rem) { .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .inc-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

.when-list { display: grid; gap: .75rem; list-style: none; margin: 0 auto; padding: 0; max-width: 44rem; }
.when-list li { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.25rem; min-height: 64px; font-weight: 600; }

.nsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; counter-reset: ns; }
.nstep { counter-increment: ns; background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.nstep__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--btn); color: #fff; font-weight: 800; font-size: 1.125rem; margin-bottom: 1.1rem; }
.nstep__n::before { content: counter(ns); }
.nstep h3 { margin-bottom: .5rem; }
.nstep p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 63.99rem) { .nsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .nsteps { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.75rem; display: grid; align-content: start; gap: .5rem; }
.stat b { font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--btn); }
.stat span { color: var(--ink-2); line-height: 1.5; }
@media (max-width: 47.99rem) { .stats { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .stat b { font-size: 2.5rem; } }

.callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.callout { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.callout h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.callout p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 63.99rem) { .callouts { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

.hb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.hb { display: flex; align-items: center; gap: 1.1rem; background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; text-decoration: none; transition: border-color .15s, background-color .15s; }
.hb:hover { border-color: var(--accent); background: #fff; }
.hb > div { flex: 1; min-width: 0; }
.hb h3 { font-size: 1.25rem; margin-bottom: .25rem; }
.hb p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 47.99rem) { .hb-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* Areas section: the two buttons use the same 2-column grid, gap and widths as the town chips above them */
.btn-row--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.btn-row--grid .btn { width: 100%; height: 48px; padding-block: 0; justify-content: center; white-space: nowrap; }

/* ======= Round 5: banner proportions, shared button pairs, bullets, cards, chips ======= */
.plan-banner { font-size: 1.0625rem; line-height: 1.3; }
.plan-banner__inner { padding-block: .875rem; }
.plan-banner__text { display: flex; align-items: center; min-height: 38px; min-width: 0; }
.plan-banner__text b { font-weight: 600; letter-spacing: -.005em; }
.plan-banner .pb-price { font-style: normal; font-weight: 800; color: var(--accent); font-size: 1.125em; }
.plan-banner__btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; flex: none; height: 40px; padding: 0 1.4rem; border-radius: var(--btn-radius); background: #fff; color: #12301a; font-weight: 700; font-size: .9375rem; line-height: 1; white-space: nowrap; }
.plan-banner__btn svg { width: .9rem; height: .9rem; }
.plan-banner:hover .plan-banner__btn { background: var(--mint); }
.pb-short { display: none; }
@media (max-width: 47.99rem) { .plan-banner { font-size: 1rem; } .pb-long { display: none; } .pb-short { display: inline; } .plan-banner__inner { padding-block: .75rem; gap: .75rem; } .plan-banner__text { overflow-wrap: anywhere; } }

/* one rule for every pair of buttons: equal columns when there is room, equal widths when stacked, same height and radius */
.btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 17.5rem)); gap: .85rem; justify-content: start; align-items: stretch; }
.btn-row--center { justify-content: center; }
.btn-row .btn, .cta__btns .btn, .popup__actions .btn { width: 100%; height: 48px; min-height: 48px; padding-block: 0; justify-content: center; white-space: nowrap; }
.btn-row--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
.btn-row--grid .btn { padding-inline: .75rem; }
.btn--plain { padding: 0 1.5rem; }
.btn--sm { height: 44px; min-height: 44px; padding: 0 1.5rem; width: auto; }
.cta__btns { display: grid; grid-template-columns: minmax(15.5rem, 17.5rem); gap: .85rem; align-items: stretch; }
@media (max-width: 47.99rem) { .cta__btns { grid-template-columns: minmax(0, 1fr); } .btn-row--center { justify-content: stretch; } }

/* icon bullets (no floating paragraphs) */
.bul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .65rem; }
.bul li { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.45; }
.bul svg { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .05rem; color: var(--btn); }
.bul--light { color: #fff; }
.bul--light svg { color: var(--accent); }
.bul--center { max-width: 40rem; margin-inline: auto; margin-top: 1.5rem; }
.bul--box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; max-width: 44rem; margin: 1.25rem auto 0; }
.cta .bul { font-size: 1.0625rem; }
.callout-box { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem auto 0; max-width: 46rem; }
.callout-box svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--btn); margin-top: .1rem; }
.callout-box p { color: var(--ink-2); }
.lede--center { text-align: center; max-width: 40rem; margin: 0 auto 1.5rem; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 3rem 0 2rem; }
.hero-link { margin-top: 1rem; }
.hero-link a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-underline-offset: 3px; min-height: 44px; }
.hero-link svg { width: 1.2rem; height: 1.2rem; color: var(--accent); flex: none; }

/* cards */
.cards3, .cards4 { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card2 { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; align-content: start; gap: .5rem; }
.section--mint .card2 { background: #fff; }
.card2 .ico-circle { margin-bottom: .5rem; }
.card2 h3 { font-size: 1.125rem; }
.card2 p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.card2 p small { display: block; margin-top: .25rem; color: var(--ink-3); font-size: .8125rem; }
.card2--link { padding: 0; }
.card2--link a { display: grid; gap: .5rem; padding: 1.5rem; height: 100%; text-decoration: none; position: relative; }
.card2--link:hover { border-color: var(--accent); }
@media (max-width: 63.99rem) { .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .cards4, .cards3 { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.svcrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.svcrow { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; text-decoration: none; min-height: 88px; transition: border-color .15s; }
.svcrow:hover { border-color: var(--accent); }
.svcrow > div { flex: 1; }
.svcrow h3 { font-size: 1.0625rem; margin-bottom: .2rem; }
.svcrow p { color: var(--ink-2); font-size: .9375rem; line-height: 1.4; }
@media (max-width: 47.99rem) { .svcrows { grid-template-columns: minmax(0, 1fr); } }
.rows3 { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.rows3 li { display: flex; gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1.1rem; }
.rows3 b { display: block; }
.rows3 span:not(.ico-circle) { color: var(--ink-2); font-size: .9375rem; }
.rows3 div { display: grid; }
.insp-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; align-items: start; margin-bottom: 1.75rem; }
@media (max-width: 47.99rem) { .insp-sum { grid-template-columns: minmax(0, 1fr); } }
.insp-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.pricecard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; margin: .5rem 0 1rem; }
.pricecard b { display: block; padding: .8rem 1.1rem; background: var(--mint-2); font-size: 1rem; }
.pricecard table { width: 100%; border-collapse: collapse; }
.pricecard th, .pricecard td { padding: .65rem 1.1rem; text-align: left; border-top: 1px solid var(--line); font-size: .9375rem; }
.pricecard td { text-align: right; font-weight: 800; color: var(--btn); white-space: nowrap; }
.pricecard--hero { max-width: 28rem; color: var(--ink); margin: 1.5rem 0 0; }
.pricecard:has(b:empty) b { display: none; }
.faq-list { margin: .5rem 0; padding-left: 1.2rem; }
.faq-list li { margin-top: .3rem; }
.faq details > div p { margin-top: .5rem; }

/* chips */
.chips { display: grid; gap: .75rem; list-style: none; margin: 0 auto; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; }
.chips li, .chips li a { display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .6rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-weight: 600; text-decoration: none; }
.chips li a { border: 0; padding: 0; min-height: 0; background: none; width: 100%; }
.chips li:has(a) { padding: 0; }
.chips li:has(a) a { padding: .6rem 1rem; min-height: 56px; }
.chips svg { width: 1.4rem; height: 1.4rem; color: var(--btn); flex: none; }
.chips--sm { max-width: none; }
.chips--sm li { min-height: 48px; font-size: .9375rem; font-weight: 500; }
.section--mint .chips li { background: #fff; }
@media (max-width: 39.99rem) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chips li, .chips li:has(a) a { padding-inline: .75rem; } }
.county h3 { font-size: 1.25rem; margin-bottom: .85rem; }
.county h3 small { color: var(--ink-3); font-weight: 600; font-size: 1em; margin-left: .2rem; }
.chips-muted { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips-muted a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--btn-radius); background: #fff; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .9375rem; }
.chips-muted a:hover { border-color: var(--accent); color: var(--btn); }

/* emergency do / do not */
.dd-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.dd { background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: .6rem; align-content: start; }
.dd h3 { font-size: 1rem; }
.dd p { color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.dd--dont { background: var(--red-bg); border-color: #f1c4bf; }
.dd--dont .ico-circle { background: var(--red); }
.ready { max-width: 40rem; margin: 2rem auto 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.ready h3 { margin-bottom: .5rem; }
.req-list { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.req-list h3 { font-size: 1.125rem; }
@media (max-width: 79.99rem) { .dd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .dd-grid { grid-template-columns: minmax(0, 1fr); } }

/* CTA band, plain version for every page except home */
.cta--plain::after { display: none; }
.cta .bul--light li { font-weight: 500; }
.cta__copy h2 { margin-bottom: 1rem; }

/* footer */
.footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
.ft-h { font-size: 1.25rem; font-weight: 700; margin: 0 0 1.1rem; letter-spacing: -.02em; }
.footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.ft-contact a { min-height: 32px; }
.footer__op { display: grid; gap: .25rem; padding-block: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .875rem; }
.footer__legal { border-top: 0; padding-top: 0; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 63.99rem) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 39.99rem) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* form: emergency callout; section head spacing */
.form__emerg { display: flex; gap: .6rem; align-items: center; background: var(--red-bg); border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; font-weight: 600; font-size: .9375rem; }
.form__emerg[hidden] { display: none; }
.form__emerg svg { width: 1.2rem; height: 1.2rem; color: var(--red); flex: none; }
.head--center { margin-bottom: 2.5rem; }
.logos-h { text-align: center; margin-bottom: 1.5rem; }

/* std template: single-line included items, phone text size */
.inc2 p { color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.4; align-self: center; }
.inc2 { align-items: center; }
@media (max-width: 39.99rem) { .nstep p, .callout p, .card2 p, .stat span, .rows3 span:not(.ico-circle), .dd p, .svcrow p { font-size: 1rem; } }

.town-pills li:last-child:nth-child(odd) { grid-column: auto; }
.popup__box .rows3 { margin: 1rem 0; }
.popup__box .pricecard { margin: 0 0 1rem; }
.popup__actions { display: grid; gap: .75rem; margin-top: 1rem; }
.popup__no { justify-self: start; }
.btn--white { border-color: var(--line); }
.btn--white:hover { border-color: var(--accent); }

/* blog index */
.topic-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.topic-chips[hidden] { display: none; }
.topic-chips button { min-height: 44px; padding: 0 1.1rem; border-radius: var(--btn-radius); background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .3); font-weight: 600; font-size: .9375rem; }
.topic-chips button.on, .topic-chips button:hover { background: #fff; color: var(--btn); }
.posts--blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-card--featured { grid-column: 1 / -1; flex-direction: row; }
.post-card--featured .post-card__img { flex: 0 0 52%; aspect-ratio: auto; min-height: 20rem; }
.post-card--featured h3 { font-size: 1.75rem; -webkit-line-clamp: 4; }
.post-card--featured .post-card__body { justify-content: center; padding: 2rem; }
.post-card[hidden] { display: none; }
@media (max-width: 63.99rem) { .posts--blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-card--featured { flex-direction: column; } .post-card--featured .post-card__img { flex: none; aspect-ratio: 16 / 10; min-height: 0; } }
@media (max-width: 39.99rem) { .posts--blog { grid-template-columns: minmax(0, 1fr); } }

.svcrows--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 63.99rem) { .svcrows--three { grid-template-columns: minmax(0, 1fr); } }


/* ======= Round 6: glass header and glass footer ======= */
:root { --red: #961f18; }
/* header: docked, full-width frosted glass; the hero (or the gradient behind a plain hero) sits under it so the glass has something to blur */
.masthead {
  position: sticky; top: 0; z-index: 50; margin-bottom: calc(var(--header-h) * -1);
  background: #fff;                                   /* top of the page, and with no JS: solid clean white */
  border-bottom: 1px solid rgba(13, 22, 10, .09);
  box-shadow: 0 1px 0 rgba(13, 22, 10, .04), 0 6px 18px rgba(13, 22, 10, .06);
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, -webkit-backdrop-filter .15s ease, backdrop-filter .15s ease;
}
/* scrolled: bright frosted white (slight green-white tint, not grey) */
.masthead[data-stuck="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .70) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.6) brightness(1.1); backdrop-filter: blur(22px) saturate(1.6) brightness(1.1);
  border-bottom-color: rgba(255, 255, 255, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(13, 22, 10, .05), 0 1px 0 rgba(13, 22, 10, .06), 0 12px 32px rgba(13, 22, 10, .12);
}
.masthead[data-open="true"] { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .masthead[data-stuck="true"] { background: rgba(255, 255, 255, .97); } }
@media (prefers-reduced-transparency: reduce) { .masthead[data-stuck="true"] { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(13, 22, 10, .1); } }
@media (prefers-reduced-motion: reduce) { .masthead { transition: none; } }
/* nav states keep AA over any photo: ink text, green underline (green text on glass over a dark photo would fail) */
.nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--btn); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav a[aria-current="page"], .nav__dd[data-here] > .nav__dd-link { color: var(--ink); font-weight: 700; text-decoration-color: var(--btn); }
.nav__sub a[aria-current="page"] { color: var(--ink); background: var(--mint); text-decoration: none; }
.nav__sub a:hover { text-decoration: none; }
@media (max-width: 79.99rem) { .nav { background: #fff; } .nav a:hover { text-decoration: none; } }
/* hero offsets: content starts below the glass bar */
.pagehero__inner { padding-top: calc(4.25rem + var(--header-h)); }
@media (max-width: 47.99rem) { .pagehero__inner { padding-top: calc(2.5rem + var(--header-h)); } }
/* plain heroes get soft green shapes so the glass reads as glass */
.pagehero:not(.pagehero--photo) { background: radial-gradient(38rem 20rem at 88% -10%, rgba(134, 180, 84, .38), transparent 62%), radial-gradient(30rem 18rem at 6% 110%, rgba(134, 180, 84, .2), transparent 60%), linear-gradient(135deg, #10301a, #1f4d24); }

/* footer: deep green backdrop with soft shapes, content on a frosted panel */
.footer { --footer-base: #0e2415; position: relative; overflow: hidden; isolation: isolate; color: rgba(255, 255, 255, .88); padding: 4.5rem 0 1.5rem; border: 0; box-shadow: none;
  background: var(--footer-base); }
.footer__panel { background: rgba(255, 255, 255, .055); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 20px; padding: 2.5rem; box-shadow: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .footer__panel { background: #15301e; } }
@media (prefers-reduced-transparency: reduce) { .footer__panel { background: #15301e; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.footer__grid { padding-bottom: 0; }
.footer a { color: rgba(255, 255, 255, .9); }
.footer ul a:hover, .footer__legal a:hover { color: #fff; text-decoration: underline; }
.footer .ft-h { color: #fff; }
.footer p, .footer .ft-contact span { color: rgba(255, 255, 255, .85); }
.footer__brand p { color: rgba(255, 255, 255, .85); }
.ft-ico { color: var(--accent); }
.footer .brand--img img { filter: invert(1); }
.footer__op { border-top: 0; color: rgba(255, 255, 255, .72); padding-top: 1.5rem; }
.footer__op p, .footer__legal { color: rgba(255, 255, 255, .72); }
.footer__legal { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: .75rem; }
.footer .needs { background: rgba(255, 240, 168, .9); color: #4a3b00; }
@media (max-width: 47.99rem) { .footer__panel { padding: 1.5rem; border-radius: 16px; } .footer { padding-top: 3rem; } }
.footer ul a, .ft-contact a { gap: .3em; }

/* seam: dark section above the footer continues into it; light section above meets it with a clean hard edge */
:root { --footer-base: #0e2415; }
.cta:not(.cta--plain)::after { background: linear-gradient(180deg, rgba(14, 36, 21, 0) calc(100% - 190px), rgba(14, 36, 21, .45) calc(100% - 110px), rgba(14, 36, 21, .85) calc(100% - 50px), #0e2415 100%), linear-gradient(90deg, rgba(8, 26, 8, .86) 0%, rgba(8, 26, 8, .62) 60%, rgba(8, 26, 8, .4) 100%); }
.cta--plain { background: linear-gradient(180deg, #16401f 0%, #134020 8%, #123019 55%, #0f2817 85%, #0e2415 100%); }
.cta--plain::after { display: none; }
.cta + .footer, .cta ~ .footer { border-top: 0; }
.footer { margin-top: -1px; }                                /* closes any sub-pixel gap, so no light hairline shows at the seam */
.cta { margin-bottom: 0; }
.cta__inner { padding-bottom: 6rem; }
@media (max-width: 47.99rem) { .cta__inner { padding-bottom: 4.5rem; } }

/* --- How a job works: one split card -------------------------------- */
.howcard { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.howcard__side { display: flex; flex-direction: column; padding: 2.5rem; color: #fff; background: linear-gradient(160deg, #1f3a24 0%, #0e2415 100%); }
.howcard__eyebrow { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #a9d27a; }
.howcard__side h2 { color: #fff; font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.05; letter-spacing: -.03em; margin: .85rem 0 1.1rem; }
.howcard__side h2 span { display: block; }
.howcard__sub { color: rgba(255,255,255,.72); font-size: 1.0625rem; line-height: 1.5; }
.howcard__sub span { display: block; }
.howcard__note { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18); display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .85rem; row-gap: .15rem; align-items: center; }
.howcard__note { margin-top: auto; }
.howcard__note svg { grid-row: 1 / 3; width: 2rem; height: 2rem; color: #a9d27a; }
.howcard__note b { font-size: 1.0625rem; }
.howcard__note span { color: rgba(255,255,255,.72); font-size: .9375rem; }
.howcard__sub + .howcard__note { margin-top: 2rem; }
.howcard__side { gap: 0; }
.howcard__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; background: var(--mint); }
.howrow { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) 2rem; column-gap: 1.25rem; align-items: center; padding: 1.35rem 2rem; border-top: 1px solid var(--line); }
.howrow:first-child { border-top: 0; }
.howrow__n { font-size: 2.75rem; font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--btn); font-variant-numeric: tabular-nums; }
.howrow h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.howrow p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; max-width: 21.5rem; }
.howrow__i svg { width: 1.75rem; height: 1.75rem; color: var(--btn); opacity: .8; display: block; margin-left: auto; }
@media (max-width: 63.99rem) { .howcard { grid-template-columns: minmax(0, 1fr); } .howcard__note { margin-top: 2rem; } }
@media (max-width: 39.99rem) {
  .howcard__side { padding: 1.75rem 1.25rem; }
  .howrow { grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; column-gap: .85rem; padding: 1.1rem 1.1rem; }
  .howrow__n { font-size: 1.875rem; }
  .howrow__i svg { width: 1.4rem; height: 1.4rem; }
  .howrow p { font-size: .9375rem; max-width: none; }
}

/* FAQ: single centered column; long questions wrap, indicator stays at the right */
.faq--center { max-width: 52rem; margin: 0 auto; }
.faq summary { min-width: 0; }
.faq summary > span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; text-align: left; }
.faq summary .faq__ico { margin-left: auto; }

/* ======= Round 3: shared blocks (audience, logos, call block, popup, trust) ======= */
.blk { display: grid; gap: 0; }
.blk__sub { text-align: center; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 2.25rem 0 1rem; }
.blk > .head + .blk__sub { margin-top: 1.5rem; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.tile { display: flex; align-items: center; gap: 1rem; min-height: 5.25rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.tile b { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; text-wrap: balance; }
.tile .ico-circle { margin-bottom: 0; width: 44px; height: 44px; }
.tiles--wide .tile { min-height: 6rem; }
.btn-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; width: calc((100% - 2.5rem) / 3 * 2 + 1.25rem); margin: 2rem auto 0; gap: 1.25rem; }
@media (max-width: 47.99rem) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .btn-row--pair { grid-template-columns: minmax(0, 1fr); width: 100%; gap: .85rem; }
}
.logos-sec { padding-block: 3.5rem; }
.logos-sec .head { margin-bottom: 1.5rem; }
.logos__item { flex: none; display: flex; align-items: center; justify-content: center; width: 150px; height: 56px; }
.logos__item img { max-height: 40px; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; mix-blend-mode: multiply; transition: opacity .2s; }
.logos__item:hover img { opacity: 1; }
.logos__name { display: flex; align-items: center; justify-content: center; width: 150px; height: 56px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.15; text-align: center; color: var(--ink-3); opacity: .72; }
.logos-sec .logos { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.logo-cta { display: flex; align-items: center; gap: 1rem; width: 100%; margin: 1.25rem 0 0; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.logo-cta > svg { width: 24px; height: 24px; flex: none; color: var(--btn); }
.logo-cta p { flex: 1 1 auto; color: var(--ink-2); line-height: 1.4; }
.logo-cta .btn { flex: none; width: auto; min-width: 14rem; }
@media (max-width: 47.99rem) {
  .logo-cta { flex-direction: column; align-items: stretch; text-align: center; gap: .75rem; }
  .logo-cta > svg { margin: 0 auto; }
  .logo-cta .btn { width: 100%; min-width: 0; }
}
.section--tight { padding-block: 2.25rem; }
.callblock__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding: 1.5rem 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.callblock h2 { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); }
.callblock .btn-row--pair { margin: 0; width: min(100%, 34rem); flex: none; }
.trustline--dark { color: var(--ink-2); }
.trustline--dark svg { color: var(--btn); }
@media (max-width: 47.99rem) { .callblock__inner { flex-direction: column; align-items: stretch; } .callblock .btn-row--pair { width: 100%; } }
.req-h { font-size: 1.375rem; margin-bottom: .5rem; }
.chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 47.99rem) { .chips--3 { grid-template-columns: minmax(0, 1fr); } }
.dd--do .ico-circle { background: var(--btn); }
.bul--ready { margin-top: .5rem; }
.county--muted h3 { font-size: 1.125rem; margin-bottom: .75rem; color: var(--ink-2); }
.popup__line { display: none; color: var(--ink-2); font-size: 1rem; margin-top: .25rem; }
@media (max-width: 47.99rem) {
  .popup { align-items: flex-end; padding: 0; }
  .popup__box { width: 100%; max-height: 62vh; max-height: 62dvh; border-radius: 20px 20px 0 0; padding: 1.25rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
  .popup__box h2 { font-size: 1.5rem; padding-right: 2.5rem; }
  .popup__full { display: none; }
  .popup__line { display: block; }
  .popup__actions { margin-top: .9rem; gap: .5rem 1rem; }
  .popup__actions .btn-row { width: 100%; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}
.src { display: inline-flex; align-items: center; min-height: 44px; }
.tile:has(> a) { padding: 0; }
.tile > a { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: inherit; padding: 1rem 1.25rem; color: inherit; text-decoration: none; border-radius: var(--radius); }
.tile > a:hover b { color: var(--btn); text-decoration: underline; text-underline-offset: 3px; }
.tile:has(> a:hover) { border-color: var(--accent); }

/* About hero: tonal green band, no photo */
.pagehero--tonal:not(.pagehero--photo) { background: linear-gradient(135deg, var(--mint-2) 0%, #d6e8cc 100%); color: var(--ink); border-bottom: 1px solid var(--line); }
.pagehero--tonal h1 { color: var(--ink); }
.pagehero--tonal .bul--light { color: var(--ink-2); }
.pagehero--tonal .bul--light svg { color: var(--btn); }
.pagehero--tonal .btn--white { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.pagehero--tonal .btn-row--pair { margin-left: 0; width: min(100%, 36rem); }
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.hero-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: var(--btn-radius); background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.hero-chips a:hover { border-color: var(--btn); color: var(--btn); }

/* residential: equal heights, grid-width callouts */
.insp-sum { align-items: stretch; }
.insp-sum .rows3 { grid-auto-rows: 1fr; }
.insp-sum > .price-card, .insp-sum > :first-child { display: flex; flex-direction: column; justify-content: center; }
.callout-box { max-width: none; margin-top: 1.25rem; border-radius: var(--radius); }
.insp-sum .pricecard { margin: 0; justify-content: flex-start; }
.insp-sum .pricecard table { flex: 1 1 auto; height: 100%; }

@media (max-width: 21.24rem) { .callbar .btn { font-size: .875rem; padding-inline: .25rem; gap: .25rem; } .callbar .btn svg { display: none; } }

/* desktop: no chevron on the dropdown items; the toggle button stays in the DOM (keyboard, aria) but is visually hidden */
@media (min-width: 80rem) {
  .nav__dd-btn { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav__dd:has(.nav__dd-btn:focus-visible) > .nav__dd-link { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
  .nav > a:hover, .nav__dd:hover > .nav__dd-link, .nav__dd[data-open="true"] > .nav__dd-link { color: var(--btn); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
}
a.hb, a.svc, a.hb:hover, a.svc:hover { text-decoration: none; }

/* areas: equal 50/50 columns; the map card runs the full height of the text column */


/* hero-intro split: copy left, one card of icon rows right (eyebrow style lives only here) */
.eyebrow { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #3f6320; margin-bottom: .85rem; }
.intro { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 3rem; align-items: stretch; }
.intro__copy h2 { font-size: var(--h2); max-width: 19ch; text-wrap: balance; }
.intro__label { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin: 1.75rem 0 .85rem; }
.intro__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.intro__rows li { display: flex; align-items: center; gap: .8rem; font-size: 1.0625rem; }
.intro__chk { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--btn); color: #fff; flex: none; }
.intro__chk svg { width: .9rem; height: .9rem; }
.intro__btn { margin-top: 1.75rem; }
.intro__btn .btn { min-width: 15rem; }
.intro__call { margin-top: 1rem; }
.intro__call a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.intro__call b { margin-left: .3em; }
.intro__call a:hover { color: var(--btn); }
.intro__card { display: flex; flex-direction: column; background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; }
.intro__card .intro__label { margin-top: 0; }
.intro__aside { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; flex: 1; }
.intro__aside li { display: flex; align-items: center; gap: 1rem; padding-block: .85rem; border-top: 1px solid var(--line); min-height: 3.5rem; }
.intro__aside li:first-child { border-top: 0; }
.intro__aside svg { width: 1.6rem; height: 1.6rem; color: var(--btn); flex: none; }
.intro__aside b { font-size: 1.0625rem; }
.intro__aside a { color: inherit; text-decoration: none; }
.intro__aside a:hover { color: var(--btn); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 63.99rem) { .intro { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .intro__copy h2 { max-width: 22ch; } }
@media (max-width: 39.99rem) { .intro__btn .btn { width: 100%; min-width: 0; } .intro__card { padding: 1.25rem; } }

.pb-xs { display: none; }
@media (max-width: 22.5rem) {
  .pb-short { display: none !important; } .pb-xs { display: inline; }
  .plan-banner { font-size: .9375rem; }
  .plan-banner__inner { gap: .5rem; }
  .plan-banner__btn { padding: 0 1.1rem; }
  .plan-banner__text { overflow: visible; text-overflow: clip; }
}

.pagehero__call { margin-top: 1rem; }
.pagehero__call a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.5); }
.pagehero__call a:hover { border-bottom-color: #fff; }
.pagehero__call b { margin-left: .3em; }
.pagehero--tonal .pagehero__call a { color: var(--ink); border-bottom-color: var(--btn); }

/* readable sizes and tap targets */
.form__fine, .post-card__meta, .eyebrow, .howcard__eyebrow, .intro__label, .blk__sub, .cta-inline__label, small { font-size: .875rem; }
.form__fine a { display: inline-block; padding-block: .6rem; }
.footer a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
.hp input { width: 1px; height: 1px; }
.card2 p, .card2 h3, .tile b, .intro__aside b, .howrow p, .lede--center, .stat span, .svcrow p, .dd p { text-wrap: balance; }
/* footer: one rhythm for every list row */
.footer ul { gap: .25rem; }
.footer .ft-contact { gap: 0; }
.footer .ft-contact li { display: flex; align-items: center; min-height: 44px; }
.footer .ft-contact li a { min-height: 44px; }
@media (max-width: 39.99rem) { .footer ul a { min-height: 44px; } }
/* phones: every button pair stacks at full width, primary first */
@media (max-width: 47.99rem) {
  .btn-row:not(.btn-row--grid) { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
}
.howcard__note a { color: #fff; text-underline-offset: 3px; display: inline-block; padding-block: .6rem; }

/* town pages: data card row adapts to 2 to 4 cards, same height, same line count */
.cards3--fit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards3--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; margin-inline: auto; }
.cards3--fit .card2 p, .cards3--duo .card2 p, .cards4 .card2 p { min-height: 3em; }
@media (max-width: 63.99rem) { .cards3--fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .cards3--fit, .cards3--duo { grid-template-columns: minmax(0, 1fr); } .cards3--fit .card2 p, .cards3--duo .card2 p, .cards4 .card2 p { min-height: 0; } }
.textcard__src { display: block; margin-top: .6rem; font-size: .875rem; line-height: 1.4; color: var(--ink-3); }
.textcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.textcard { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: .75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.textcard h3 { font-size: 1.25rem; margin: 0; }
.textcard p { color: var(--ink-2); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.textcard__src { align-self: end; }
@media (max-width: 63.99rem) { .textcards { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* ======= Mobile audit pass ============================================================== */
:root { --field-border: #85947c; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); scroll-padding-bottom: 6rem; -webkit-tap-highlight-color: rgba(77, 118, 37, .2); }
main:focus { outline: none; }
body { overflow-wrap: break-word; }

/* sticky call bar: not tabbable while hidden, hidden while the phone menu is open, gone on very short screens */
.callbar { visibility: hidden; transition: transform .25s, visibility 0s .25s; }
.cb-show .callbar { visibility: visible; transition-delay: 0s; }
.menu-open .callbar { visibility: hidden; transform: translateY(110%); transition-delay: 0s; }
@media (max-width: 47.99rem) {
  body { padding-bottom: 4.5rem; padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .callbar .btn { min-height: 44px; height: 48px; }
}
@media (max-height: 26rem) { .callbar { display: none; } body { padding-bottom: 0; } }

/* focus: nothing clipped, nothing hidden under the sticky header */
.faq summary:focus-visible { outline-offset: -3px; }
.pin-hit { display: flex; align-items: flex-end; justify-content: center; width: 44px; height: 44px; padding-bottom: 4px; }
.pin-wrap:focus-visible .pinsvg { filter: drop-shadow(0 1.5px 1.5px rgba(13, 22, 10, .4)); transform: none; }
.pin-wrap:focus-visible .pin-hit { outline: 3px solid var(--focus); outline-offset: -2px; border-radius: 10px; background: rgba(255, 255, 255, .75); }
.pin-pop .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 6px 20px rgba(13, 22, 10, .25); font-weight: 600; }
.pin-pop .leaflet-popup-content { margin: .75rem 1rem; line-height: 1.35; }
.pin-pop a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* popup: header close button pinned outside the scroller, pinned layout, scroll lock, short screens */
.popup__box { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.popup__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 2rem 1.75rem 1.5rem; }
.popup__x { z-index: 2; background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px var(--line); }
html.popup-open { overflow: hidden; overscroll-behavior: none; scrollbar-gutter: stable; }
@media (max-width: 47.99rem) { .popup__scroll { padding: 1.25rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); } .popup__box h2 { padding-right: 3rem; } }
@media (max-height: 30rem) {
  .popup { align-items: center; padding: .5rem; }
  .popup__box { width: min(100%, 36rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); border-radius: 16px; }
  .popup__scroll { padding: 1rem 1.25rem; }
  .popup__box h2 { font-size: 1.25rem; padding-right: 3rem; margin-bottom: .25rem; }
  .popup__full { display: none; }
  .popup__line { display: block; }
  .popup__actions { margin-top: .6rem; }
  }
@media (max-height: 30rem) and (min-width: 36rem) { .popup__actions .btn-row { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }

/* 200% text and long words: nothing is cut, nothing forces sideways scroll */
.card2, .tile, .textcard, .svcrow > div, .howrow > div, .intro__aside li, .post-card, .dd, .callout-box > p, .stack__row > div { min-width: 0; overflow-wrap: break-word; }
.svc__txt { padding-block: 1.1rem; min-width: 0; overflow-wrap: break-word; }
.footer .nw, .plan-banner .nw, .pb-price { white-space: normal; overflow-wrap: break-word; }
.pb-xs { overflow-wrap: break-word; }
@media (max-width: 39.99rem) {
  .townfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .townfacts .card2 { padding: 1rem; }
  .townfacts .card2:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .townfacts .ico-circle { width: 36px; height: 36px; }
  .townfacts .ico-circle svg { width: 1.1rem; height: 1.1rem; }
  .townfacts .card2 h3 { font-size: 1rem; }
  .townfacts .card2 p { min-height: 0; font-size: .9375rem; }
}
@media (max-width: 19.99rem) { .townfacts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 21.99rem) { .post-card h3, .post-card__body > p:last-child { -webkit-line-clamp: unset; line-clamp: unset; display: block; min-height: 0; } }
html.big-text .post-card h3, html.big-text .post-card__body > p:last-child { -webkit-line-clamp: unset; line-clamp: unset; display: block; min-height: 0; }

/* touch */
.btn:active { transform: translateY(1px) scale(.985); filter: brightness(.95); }
.nav a:active, .nav__dd-btn:active, .svc-list a:active, .svcrow:active, .card2--link a:active, .faq summary:active, .chips a:active { background-color: var(--mint-2); }
.logos-sec .blk { display: flex; flex-direction: column; }
.logos[data-paused] .logos__track { animation-play-state: paused; }
.logos__name { opacity: 1; color: var(--ink-2); }
@media (min-width: 80rem) and (hover: none) {
  .nav__dd-btn { position: static; width: 44px; height: 44px; margin: 0 -12px 0 -6px; padding: 0; overflow: visible; clip-path: none; white-space: normal; }
  .nav__dd-btn svg { width: 12px; height: 12px; }
  .nav__dd { gap: 0; }
}
.intro__aside b { flex: 1; min-width: 0; }
.intro__aside b a { display: block; padding-block: .6rem; }
.footer a:not(.btn) { min-width: 44px; }

/* readable lines: balance headings, pretty paragraphs, last so nothing above overrides them */
h1, h2, h3, h4, .tile b, .dd h3, .card2 h3, .post-card h3, .intro__aside b, .faq summary > span, .svc h3, .howrow h3, .fcard__big { text-wrap: balance; }
p, li { text-wrap: pretty; }
.post-card__body > p:last-child, .card2 p, .tile b, .howrow p { text-wrap: balance; }

/* Windows high contrast / forced colors */
@media (forced-colors: active) {
  .burger span { background: CanvasText; }
  .btn, .field input, .field select, .field textarea, .card2, .tile, .textcard, .faq details, .howcard, .intro__card, .callout-box, .post-card, .popup__box { border: 1px solid CanvasText; }
  .masthead { border-bottom: 1px solid CanvasText; }
  .nav__sub { border: 1px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
  .ico-circle, .btn__dot, .faq__ico { forced-color-adjust: auto; border: 1px solid CanvasText; }
}

/* big text on small screens: buttons wrap instead of overflowing, tables tighten and may scroll, long words break */
@media (max-width: 30rem) {
  .btn, .btn-row .btn, .cta__btns .btn, .popup__actions .btn, .form__actions .btn { white-space: normal; text-align: center; height: auto; min-height: 48px; padding-block: .5rem; overflow-wrap: break-word; }
  .offer-table th, .offer-table td, .pricecard th, .pricecard td { padding: .7rem .8rem; }
  .offer-table th, .pricecard th { overflow-wrap: break-word; }
}
.duo__card, .duo__card *, .step, .step *, .nstep, .nstep *, .cards3 > li, .cards3 > li *, .cards4 > li, .cards4 > li *, .hb, .hb *, .stack__row, .stack__row * { overflow-wrap: break-word; min-width: 0; }
.howcard__note a { min-height: 44px; padding-block: .65rem; }
li, li > div, li > span { min-width: 0; }
.footer .ft-contact a { display: inline-block; min-height: 44px; padding-block: .6rem; }
.ft-contact li > span { min-width: 0; overflow-wrap: break-word; }
.howcard__note .nw, .intro__call .nw, .pagehero__call .nw { white-space: normal; overflow-wrap: break-word; }
.howcard__note a { overflow-wrap: break-word; }
.callout, .callout *, .when-list li, .when-list li *, .rows3 li *, .stat, .stat *, .trust li *, .callout-box * { overflow-wrap: break-word; min-width: 0; }
@media (max-width: 22rem) { .clean .footer__grid:not(.has-hours), .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.inc2, .inc2 *, .inc, .inc * { overflow-wrap: break-word; min-width: 0; }
.btn { max-width: 100%; }
.cta__btns, .cta__copy, .cta__inner > * { min-width: 0; }
.cta__btns { flex: 0 1 auto; }
.pagehero__tel { color: #fff; font-weight: 700; text-underline-offset: 3px; display: inline-block; padding-block: .6rem; }

/* ======= Round 2 ======================================================================== */
/* sticky call bar: one row while both buttons fit, wraps (never spills) when text is enlarged */
@media (max-width: 47.99rem) {
  .callbar { display: flex; flex-wrap: wrap; }
  .callbar .btn { flex: 1 1 8.5rem; width: auto; min-width: fit-content; white-space: normal; text-align: center; height: auto; min-height: 48px; padding-block: .4rem; }
}
/* short landscape screens: banner folds away so the hero buttons stay on screen; blog cards show their full titles */
@media (max-height: 26rem) { .plan-banner { display: none; } }
@media (max-height: 30rem) {
  .post-card h3, .post-card__body > p:last-child { -webkit-line-clamp: unset; line-clamp: unset; display: block; min-height: 0; }
}
@media (max-width: 24rem) { .post-card__body > p:last-child { font-size: .875rem; } }
/* blog index: one type scale for every card; the lead card spans two of three columns so the last row is full (2+1, then 3,3,3) */
.post-card--featured h3 { font-size: 1.25rem; -webkit-line-clamp: 2; line-clamp: 2; }
.post-card--featured .post-card__body { padding: 1.25rem 1.4rem 1.5rem; }
@media (min-width: 64rem) { .post-card--featured { grid-column: span 2; } }
/* card links: no arrow circles anywhere; the title underlines on hover and focus */
.card2--link a:hover h3, .svcrow:hover h3, .hb:hover h3, .card2--link a:focus-visible h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
/* targets that were a few pixels short */
.form__fine a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 0; }
.go { display: inline-flex; align-items: center; min-height: 44px; }
.nav__sub a { min-height: 44px; display: flex; align-items: center; }
.table-wrap th, .table-wrap td { white-space: nowrap; padding-inline: 1rem; }
.form__fine { line-height: 1.5; }
.footer .ft-contact li, .footer ul li { min-height: 44px; display: flex; align-items: center; }
/* big text: the footer panel and fields give back space instead of clipping */
.footer__panel { padding-inline: min(2rem, 5vw); }
.field input, .field select, .field textarea { padding-inline: min(1rem, 3.5vw); text-overflow: ellipsis; }
.select select { padding-right: 2.5rem; }
/* forced colors: the black logo keeps a white backing, the open menu and map pins stay visible */
@media (forced-colors: active) {
  .brand--img img { background: #fff; forced-color-adjust: none; border-radius: 4px; }
  .pinsvg { forced-color-adjust: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff); }
}
@media (forced-colors: active) and (max-width: 79.99rem) { .nav { border: 1px solid CanvasText; } }
/* popup on short phones: the pair never squeezes, buttons tighten, the box scrolls inside with the close button pinned */
@media (max-height: 36rem) {
  .popup__actions .btn { height: 44px; min-height: 44px; }
  .popup__box h2 { font-size: 1.25rem; margin-bottom: .25rem; }
  .popup__scroll { padding: 1rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
}
.logos:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }

/* Round 2, continued */
.ft-contact a, .ft-contact li > span { overflow-wrap: anywhere; }
.svc { grid-template-columns: minmax(0, 1fr); }
.svc__txt { padding-inline: min(1.25rem, 5vw); }
@media (max-width: 47.99rem) { body { padding-bottom: calc(var(--callbar-h, 4.5rem) + env(safe-area-inset-bottom)); } }

/* Home areas block. DOM order = reading order = phone order: heading, map, chips, buttons.
   From 64rem the grid areas put heading + lines + chips + buttons in the left column and the map in the right column across all four rows. */
.areas { --areas-gap: .65rem; }
.areas__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.areas__h { text-align: center; text-wrap: balance; margin-bottom: 1.5rem; }
.areas__lines { display: none; }
.areas .areas__mapcard { aspect-ratio: auto; min-height: 0; height: 22.5rem; height: min(22.5rem, 80dvh); margin-bottom: 1.5rem; }
.areas__pills { margin: 0; gap: var(--areas-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.areas__btns { display: grid; margin: var(--areas-gap) 0 0; gap: var(--areas-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) {
  .areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; grid-template-areas: "h map" "lines map" "pills map" "btns map" "note map"; grid-template-rows: auto auto auto auto 1fr; }
  .areas__h { grid-area: h; text-align: left; margin-bottom: 1rem; }
  .areas__lines { display: grid; grid-area: lines; margin: 0 0 1.5rem; }
  .areas .areas__mapcard { grid-area: map; height: auto; min-height: 26rem; margin-bottom: 0; }
  .areas__pills { grid-area: pills; }
  .areas__btns { grid-area: btns; }
  .areas__grid > .needs { grid-area: note; }
}
.post-card h3 a { display: block; }
/* home service photo cards: about 2:1 in two columns (a floor, so big text grows the card), about 16:10 in one column */
@media (max-width: 39.99rem) { .svc { min-height: max(11rem, calc((100vw - min(2.5rem, 10vw)) * .625)); } }
.areas__mapcard, .areas__map, .pin-wrap { scroll-margin-top: calc(var(--header-h) + 1rem); }
.form__status.is-error { color: #a42a1d; font-weight: 600; }

/* ONE component for the town chips and the two area buttons: same box, border, radius, type and padding; only the fill differs */
.chip { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: var(--btn-radius); background: #fff; color: var(--ink); font: 600 .9375rem/1.2 var(--font); letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.chip:hover { border-color: var(--accent); background: var(--mint); }
.chip--primary { background: var(--btn); border-color: var(--btn-hover); color: #fff; }
.chip--primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.chip--light { background: var(--mint); }
.chip--light:hover { background: #fff; }
.chip:active { filter: brightness(.96); }
@media (max-width: 24rem) { .chip { padding-inline: .4rem; font-size: .875rem; } }

.svc__img { object-position: var(--focal, 50% 40%); transform: translateX(var(--shift, 0)) scale(var(--zoom, 1)); }
.svc:hover .svc__img { transform: translateX(var(--shift, 0)) scale(calc(var(--zoom, 1) * 1.04)); }
.pagehero__bg { object-position: var(--focal, 50% 50%); }
@media (max-width: 47.99rem) { .pagehero__bg { object-position: 50% 50%; } }


/* ======= Home hero: flat light panel, everything centred (2026-10-05) ======= */
.hero { background: #f6f7f2; color: var(--ink); }
.hero__eyebrow { margin: 0 0 1.1rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; color: #4f6246; text-wrap: balance; }
.hero h1 { margin: 0; max-width: none; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; color: var(--ink); }
.hero h1 span { display: block; }
.hero h1 .h1__l2 { color: var(--btn); }
.hero__lede { margin: 1.15rem 0 0; max-width: 38.75rem; font-size: clamp(.9375rem, .85rem + .35vw, 1.0625rem); line-height: 1.55; color: #4b5446; text-wrap: balance; }
.hero .hero__btns { display: grid; grid-template-columns: repeat(2, 9.5rem); gap: .75rem; justify-content: center; margin-top: 1.9rem; }
.hero .hero__btns .btn { width: 100%; padding-inline: .5rem; }
.hero .hero__btns .btn--white { border-color: #c9cdc4; }
@media (max-width: 47.99rem) {
  .hero .hero__btns { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; justify-content: stretch; margin-top: 1.6rem; }
}

/* home quote section: the CTA band carries the form (copy left, form card right); on phones and tablets the photo is a band at the top that fades into solid green */
.cta--form .cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: 4rem; align-items: center; }
.cta--form .cta__form .form { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
@media (max-width: 63.99rem) {
  .cta--form .cta__inner { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .cta--form .cta__form { max-width: 38rem; }
  .cta--form .cta__bg { bottom: auto; height: 30rem; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); }
  .cta--form::after { background: linear-gradient(180deg, rgba(8, 26, 8, .66) 0, rgba(8, 26, 8, .8) 22rem, #12301a 30rem); }
}

/* home trust strip: five chips (same component as the town chips). Desktop: one row of five. Tablet and phones: two columns, the odd fifth chip spans both.
   The first four are plain anchors with hover and focus colour; "Licensed and insured" is a label. */
.trust ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; padding: 1.25rem 0; }
.trust li { display: flex; min-width: 0; }
.trust li > .chip { width: 100%; white-space: nowrap; min-width: 0; padding-inline: .5rem; }
.trust .chip--label { cursor: default; }
.trust .chip--label:hover { border-color: var(--line); background: #fff; }
.trust a.chip:hover, .trust a.chip:focus-visible { color: var(--btn); }
.trust br.m { display: none; }
@media (max-width: 63.99rem) {
  .trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 25rem) { .trust br.m { display: inline; } .trust li > .chip { white-space: normal; } }



/* ======= Owner notes 2026-10-05 ======= */
/* icon cards, centred: icon above, title and text centred (rows and lists such as svcrow, tile, rows3, when-list, chips and the how-it-works card keep their own layout) */
.card2, .card2--link a, .dd, .duo__card, .textcard, .stat { justify-items: center; text-align: center; }
.inc, .inc2, .callout, .hb { flex-direction: column; align-items: center; text-align: center; }
.inc .ico-circle, .inc2 .ico-circle, .callout .ico-circle, .hb .ico-circle { margin: 0; }
.callout { padding: 1.5rem; }   /* plain card: same border, radius and padding as .card2; no accent bar anywhere */
.hb > div { flex: none; width: 100%; }
.nstep, .step { text-align: center; }
.nstep__n, .step .ico-circle { margin-inline: auto; }
.when__card { text-align: center; }
.when__card li { justify-content: center; text-align: center; }
.card2--link a:hover h3 { color: var(--btn); }

/* popup: the buttons are as wide as the rows above, spaced like the rows, "No thanks" centred under them */
.popup__actions { gap: .75rem; justify-items: stretch; }
.popup__actions .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: .75rem; }
.popup__actions .btn { width: 100%; }
.popup__no { justify-self: center; }
.popup__box .rows3 { margin: 1rem 0 .75rem; }
.popup__box .pricecard { margin: 0 0 .75rem; }
.popup__full + .popup__actions { margin-top: 0; }

/* how it works card: the heading and the sub line sit on one line on desktop, the panel is a little wider; the questions line is icon + text + link */
@media (min-width: 64rem) {
  .howcard--one { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .howcard--one .howcard__side h2 { font-size: clamp(1.875rem, .9rem + 1.5vw, 2.5rem); white-space: nowrap; }
  .howcard--one .howcard__side h2 span { display: inline; }
  .howcard--one .howcard__sub { white-space: nowrap; }
}
.howcard__sub { font-size: 1.0625rem; }
.howcard__note { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; margin-bottom: 0; font-size: 1.1875rem; line-height: 1.3; }
.howcard__note svg { grid-row: auto; flex: none; width: 1.75rem; height: 1.75rem; }
.howcard__note b { font-size: 1.1875rem; }
.howcard__note a { color: #a9d27a; font-weight: 700; font-size: 1.1875rem; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; padding-block: .25rem; }
.howcard__note a:hover { color: #fff; }

/* builders strip, 25% bigger: tiles 188 x 70 (was 150 x 56), logos 50 px high (was 40), more headroom above and below */
.logos__item { width: 188px; height: 70px; }
.logos__item img { max-height: 50px; max-width: 188px; }
.logos__name { width: 188px; height: 70px; font-size: 1.3rem; }
.logos__track { gap: 4.4rem; padding: 1.75rem 2.2rem; }
.logo-cta .btn { min-width: 10.5rem; }
@media (max-width: 47.99rem) { .logos__track { gap: 3.5rem; padding-block: 1.5rem; } }

/* ======= Vertical rhythm (one scale for every page, 2026-10-05) =======
   --space-section : top and bottom padding of every section (72 px desktop, 64 tablet, 56 phone)
   --head-gap      : section heading to the content under it when there is no intro line (40 px, 32 px on phones)
   --intro-gap     : heading -> intro line AND intro line -> content, always equal (24 px, 20 px on phones)
   --block-gap     : between stacked blocks inside a section (32 px)
   --hero-y        : hero padding under the header and above the bottom edge (72 px, 44 px on phones)
   Boxes that follow a card grid (Have this ready, Not an emergency?) take the grid's full width. */
:root { --space-section: 4.5rem; --head-gap: 2.5rem; --intro-gap: 1.5rem; --block-gap: 2rem; --hero-y: 4.5rem; }
@media (max-width: 63.99rem) { :root { --space-section: 4rem; } }
@media (max-width: 47.99rem) { :root { --space-section: 3.5rem; --head-gap: 2rem; --intro-gap: 1.25rem; --hero-y: 2.75rem; } }
.logos-sec { padding-block: var(--space-section); }
.head, .head--center { margin-bottom: var(--head-gap); }
.head:has(+ .lede--center) { margin-bottom: var(--intro-gap); }
.head:has(.lede) { margin-bottom: calc(var(--intro-gap) - 4.5px); }   /* 4.5 px: the intro line's own half-leading, so the text boxes are equidistant */
.logos-h { margin-bottom: 0; }
.head .lede, .head--center .lede, .head--split .lede { margin-top: var(--intro-gap); margin-bottom: 0; }
.head + .lede--center { margin-top: 0; }
.logos-sec .head { margin-bottom: var(--head-gap); }
.section > .wrap:has(> .head:first-child) > * + * { margin-top: var(--block-gap); }
.section > .wrap:has(> .head:first-child) > :not(.head) { margin-bottom: 0; }
.section > .wrap:has(> .head:first-child) > .head + * { margin-top: 0; }
.section > .wrap:has(> .head:first-child) > .head + .lede--center { margin-bottom: calc(var(--intro-gap) - 4.5px); }
.section > .wrap:has(> .head:first-child) > .head + .lede--center + * { margin-top: 0; }
.section > .wrap:has(> .head:first-child) > .head + .blk__sub { margin-top: 0; }
.faq details { margin-bottom: 0; }
.faq details + details { margin-top: .85rem; }
.county > :last-child, .county .town-pills:last-child { margin-bottom: 0; }
.county { margin-bottom: 0; }
.ready, .req-list { max-width: none; margin-inline: 0; }
.req-list { margin-bottom: 0; }
.ready h3, .req-h, .req-list h3 { text-align: center; }
.ready .bul, .req-list .bul { max-width: 40rem; margin-inline: auto; }
.bul--center li { justify-content: center; text-align: center; }
.pagehero__inner { padding-block: calc(var(--hero-y) + var(--header-h)) var(--hero-y); }
.pagehero .btn-row { margin-top: 2rem; }
.pagehero .btn-row + .hero-chips, .pagehero .btn-row + .trustline { margin-top: 1.5rem; }
[id], .areas__mapcard, .areas__map, .pin-wrap { scroll-margin-top: 0; }   /* html scroll-padding-top (header + 1rem) is the one offset */
/* same-colour sections that follow each other share one padding instead of doubling it (no 144 px dead band); the anchor offset keeps the heading clear of the header */
.section:not(.section--mint):not(.section--tight):not(.needs-slot) + .section:not(.section--mint):not(.section--tight):not(.needs-slot),
.section--mint + .section--mint { padding-top: 0; scroll-margin-top: var(--space-section); }
.cta__inner { padding-block: var(--space-section); }

/* home trust chips are desktop only: the five fit in one row from 64rem (1024 px); below that the strip is display:none (out of the accessibility tree and the tab order) */
@media (max-width: 63.99rem) { .trust { display: none; } }
/* About hero: no photo, no intro line, so it is centred like the sections under it (heading, button pair, town chips on one axis) */
.pagehero--tonal .pagehero__inner { text-align: center; }
.pagehero--tonal .btn-row--pair { margin-inline: auto; }
.pagehero--tonal .hero-chips { justify-content: center; }
.ready .bul, .req-list .bul { width: fit-content; max-width: 100%; }
.pagehero--tonal h1, .pagehero--tonal .pagehero__lede { margin-inline: auto; }


/* ======= Home hero: fills the screen under the offer banner and the header, with owner pipe line art (2026-10-05) =======
   --banner0-h  : height of the offer banner at load (site.js; 56 px without JS)
   --u          : length of one pipe-art unit (the owner art is 1983 x 793 units); pipes scale with the screen, strokes stay 2 px
   --pipe-d     : phones/tablets: depth of the two corner elbows; the hero's top and bottom padding reserve it, so the text block is centred
                  between the elbows by layout (equal free space above and below, whatever the screen height) */
:root { --banner0-h: 56px; --u: clamp(.5px, .058vw, 1.1px); --pipe-d: 0px; --pipe-gap: 2rem; }
@media (max-width: 63.99rem) { :root { --banner0-h: 68px; --u: clamp(.32px, min(.105vw, calc(.12 * var(--svh0, 1svh))), .62px); --pipe-d: calc(300 * var(--u)); --pipe-gap: 1.5rem; } }
.hero { position: relative; overflow: hidden; display: flex; min-height: calc(100vh - var(--banner0-h)); min-height: calc(100svh - var(--banner0-h)); min-height: calc(100dvh - var(--banner0-h)); }
.hero__inner { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-block: calc(var(--header-h) + var(--pipe-d) + var(--pipe-gap)) calc(var(--pipe-d) + var(--pipe-gap)); }
.hero__pipes { position: absolute; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pipe { position: absolute; display: none; fill: none; stroke: #9fb08a; stroke-width: 2px; opacity: .85; pointer-events: none; }
.pipe path, .pipe rect { vector-effect: non-scaling-stroke; }
@media (min-width: 64rem) {
  .pipe--wide { display: block; width: calc(414 * var(--u)); }
  .pipe--a { left: 0; top: calc(29% - 14 * var(--u)); height: calc(71% + 14 * var(--u)); }
  .pipe--b { right: 0; top: 0; height: calc(65% + 14 * var(--u)); transform: rotate(180deg); }
}
@media (max-width: 63.99rem) {
  .pipe--narrow { display: block; width: calc(326 * var(--u)); height: var(--pipe-d); }
  .pipe--a { right: 0; bottom: 0; transform: scaleX(-1); }
  .pipe--b { left: 0; top: 0; transform: scaleY(-1); }
}

/* ======= Desktop breathing room (>= 1024 px, sitewide; phones and tablets keep the tokens above) =======
   section padding 140 px (clamped 112 to 160), heading -> content 70, heading -> intro and intro -> content 34 (equal), blocks 56, card gaps 34,
   card and box padding about 37% more, body text line-height 1.65, intro lines at most 41rem, taller FAQ rows, trust strip, footer.
   Text sizes are unchanged: only space. */
@media (min-width: 64rem) {
  :root { --space-section: clamp(7rem, 9.7vw, 10rem); --head-gap: 4.375rem; --intro-gap: 2.25rem; --block-gap: 3.5rem; --card-gap: 2.125rem; }
  .svc-grid, .svc-grid--three, .cards3, .cards4, .textcards, .stats, .callouts, .dd-grid, .nsteps, .hb-grid, .inc-grid, .incs, .tiles, .duo, .when, .svcrows, .steps, .posts, .townfacts { gap: var(--card-gap); }
  .head .lede, .head--center .lede, .lede--center { max-width: 41rem; margin-inline: auto; }
  .section p:not(.lede):not(.eyebrow):not(.needs) { line-height: 1.65; }
  .section .svc__txt p { line-height: 1.4; }
  .card2, .card2--link a, .textcard, .hb, .callout, .ready { padding: 2.05rem; }
  .stat { padding: 2.75rem 2.4rem; }
  .inc, .inc2 { padding: 1.9rem; }
  .nstep, .step { padding: 2.4rem 2.05rem; }
  .dd { padding: 1.7rem; }
  .duo__card, .when__card { padding: 2.4rem; }
  .req-list { padding: 1.9rem 2.05rem; }
  .intro__card { padding: 2.05rem 2.4rem; }
  .svcrow { padding: 1.5rem 1.7rem; min-height: 6.5rem; }
  .tile { padding: 1.4rem 1.7rem; }
  .callblock__inner { padding: 2rem 2.4rem; }
  .section--tight { padding-block: 3.5rem; }
  .logo-cta { padding: 1.4rem 1.7rem; }
  .howrow { padding: 1.85rem 2.75rem; }
  .howcard__side { padding: 3.4rem; }
  .card2--link { padding: 0; }
  .card2--link a { height: 100%; }
  .faq details + details { margin-top: 1.1rem; }
  .faq summary { padding: 1.45rem 1.75rem; min-height: 72px; }
  .faq details > div { padding: 0 1.75rem 1.75rem; }
  .trust ul { padding-block: 2.25rem; }
  .footer { padding-top: 6rem; }
  .footer__panel { padding: 3.25rem; }
  .cta__inner { padding-block: var(--space-section); }
}

/* phones and tablets: the hero never changes height while the browser toolbar slides in and out. --svh0 is one hundredth of the screen height frozen at load
   (head script; updated only on a width change, a rotation or a height change of 150 px or more), with the small-viewport unit as the no-JS fallback. Never dvh.
   Desktop rules above are untouched. */
@media (max-width: 63.99rem) {
  .hero { min-height: calc(100vh - var(--banner0-h)); min-height: calc(100 * var(--svh0, 1svh) - var(--banner0-h)); }
}
@media (max-width: 63.99rem) { .plan-banner__inner { box-sizing: border-box; height: 68px; } }   /* fixed banner height on phones and tablets: the hero's height never depends on text wrapping or font loading */
@media (max-width: 47.99rem) { :root { --banner0-h: 64px; } .plan-banner__inner { height: 64px; } }

/* phones and tablets only: the services section is white, so the hero tint ends the pipes cleanly (the hero clips them at its edge; a 1px hairline in the border token marks the seam).
   Sections below alternate white / mint with no two neighbours alike. Desktop keeps its own order (services mint, certified white, how mint, commercial white, logos mint, areas white, guides mint, FAQ white). */
@media (max-width: 63.99rem) {
  .hero { border-bottom: 1px solid var(--line); }
  #services, #how, .logos-sec, [aria-labelledby="guides-h"] { background: #fff; }
  #certified-reports, #commercial, #areas, #faq { background: var(--mint); }
  #commercial .intro__card, #commercial .tile { background: #fff; }
}
/* the owner's tank photo has bright concrete behind the text: this card's overlay is a little stronger (same look, 0.54 -> 0.6) */
.svc[href*="septic-tank-repair"]::after { background: rgba(5, 12, 4, .6); }
.svc[href*="septic-tank-repair"]:hover::after { background: rgba(5, 12, 4, .66); }