keeps display:list-item and a `disc`
marker wherever it sits, so the moment a menu
is not inside a reset
it
grows a bullet that overlaps the nav text. Reported 2026-09-29; this rule means it
cannot come back even if the markup around the items changes again. */
.site-header ul{list-style:none}
.site-header li{list-style:none}
.nav-menu{display:flex;align-items:center;gap:2px;margin:0;padding:0}
.nav-menu>li{position:relative;display:flex;align-items:center}
.nav-pill a{padding:7px 15px;border-radius:999px;font-size:.875rem;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap}
.nav-pill a:hover{background:rgba(22,163,74,.14)}
.nav-menu>li.menu-item-has-children>a{padding-right:6px}
/* -------------------------------------------------------- dropdown (desktop) */
.submenu-toggle{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px 7px 2px;background:none;border:0;color:inherit;cursor:pointer;line-height:0;border-radius:999px}
.submenu-toggle svg{transition:transform .18s ease}
.submenu-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.nav-menu>li:hover>.submenu-toggle svg,
.nav-menu>li:focus-within>.submenu-toggle svg,
.nav-menu>li.is-open>.submenu-toggle svg{transform:rotate(180deg)}
/* Bridges the gap between the pill and the panel so the panel does not close
while the pointer travels to it. */
.nav-menu>li.menu-item-has-children::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px}
.nav-menu .sub-menu{position:absolute;top:calc(100% + 16px);left:50%;z-index:60;min-width:236px;max-height:calc(100vh - 150px);overflow-y:auto;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 38px rgba(16,24,40,.16);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav-menu>li:hover>.sub-menu,
.nav-menu>li:focus-within>.sub-menu,
.nav-menu>li.is-open>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-pill .sub-menu a{display:block;padding:9px 14px;border-radius:10px;font-size:.85rem;font-weight:600;white-space:nowrap}
.nav-pill .sub-menu a:hover{background:rgba(22,163,74,.14)}
.header-actions{display:none;align-items:center;gap:14px}
.header-phone{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.95rem;text-decoration:none;color:#fff;white-space:nowrap}
.site-header.scrolled .header-phone{color:var(--ink)}
.header-phone:hover{color:var(--green)}
.header-phone-compact{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:42px;height:42px;border-radius:999px;background:var(--green);color:#fff;text-decoration:none}
.header-phone-compact:hover{background:var(--green-dark)}
.nav-toggle{display:inline-flex;background:none;border:0;color:#fff;padding:6px;cursor:pointer}
.site-header.scrolled .nav-toggle{color:var(--ink)}
/* The panel lives inside a position:fixed header, so anything past the bottom of
the screen is simply gone — it cannot be scrolled to. With a 13-item Locations
submenu open the panel is 1032px on a 390x844 phone, which put both Lake Park
links, the phone number and the Free Quote button out of reach. Measured
2026-09-29; this makes the panel itself the scroll container. */
.mobile-nav{background:#fff;border-top:1px solid var(--line);padding:16px 20px 22px;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mobile-menu{list-style:none;margin:0 0 14px;padding:0}
.mobile-menu li{position:relative}
.mobile-menu a{display:block;padding:11px 0;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
/* --------------------------------------------------------- dropdown (mobile) */
.mobile-menu .submenu-toggle{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:48px;height:46px;padding:0;color:var(--ink)}
.mobile-menu .submenu-toggle svg{width:18px;height:18px}
.mobile-menu .sub-menu{display:none;margin:0;padding:2px 0 8px 16px}
.mobile-menu li.is-open>.sub-menu{display:block}
.mobile-menu .sub-menu a{padding:9px 0;font-size:.92rem;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line)}
.mobile-menu .sub-menu li:last-child a{border-bottom:0}
.mobile-phone{display:block;padding:12px 0;font-weight:700;color:var(--green);text-decoration:none}
@media(min-width:1024px){
.header-inner{height:104px}
.brand img{width:86px;height:86px}
.nav-pill,.header-actions{display:flex}
.nav-menu .submenu-toggle{position:static;width:auto;height:auto}
.nav-toggle,.header-phone-compact{display:none}
.mobile-nav{display:none!important}
}
/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.28)}
.btn-lg{padding:14px 30px;font-size:1rem}
.btn-block{display:flex;width:100%}
/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;background-image:var(--hero-image);background-size:cover;background-position:center;color:#fff}
.hero-town{min-height:62vh;background-color:#14532d}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.18) 38%,rgba(0,0,0,.62) 100%)}
.hero-inner{position:relative;padding-bottom:72px;padding-top:140px}
.hero-badge{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:12px;opacity:.95}
.hero-title{font-size:clamp(2.35rem,6.2vw,4.25rem);font-weight:800;max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-sub{font-size:clamp(1rem,2vw,1.2rem);max-width:46ch;margin-bottom:26px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
/* Mitch, 2026-09-29: "when you're holding the phone ... it covers up our faces".
On a narrow viewport `cover` scales the 2000x1531 truck photo to fill the hero's
HEIGHT and crops it to the horizontal centre — which is exactly where the family
is standing — so bottom-aligned copy lands straight on their faces. Measured: the
headline covered the two adults at 390px and the girl at every width below 1024px.
Below 1024px the copy therefore moves to the TOP of the hero, the hero gets enough
height that the family clears it, the focal point shifts right so nobody is cropped
out of frame at the narrow end, and the scrim is re-graded dark-at-top / light over
the faces. 1024px and up is untouched and verified pixel-identical.
⛔ Home hero only — `.hero-town` keeps its own 62vh treatment. */
@media (max-width:1023px){
.hero:not(.hero-town){align-items:flex-start;min-height:max(88vh,885px);background-position:59% 50%}
.hero:not(.hero-town) .hero-inner{padding-top:80px;padding-bottom:40px}
.hero:not(.hero-town) .hero-badge{margin-bottom:8px}
.hero:not(.hero-town) .hero-sub{margin-bottom:16px}
.hero:not(.hero-town) .hero-actions{gap:10px}
.hero:not(.hero-town) .hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.60) 0%,rgba(0,0,0,.52) 40%,rgba(0,0,0,.18) 56%,rgba(0,0,0,.14) 80%,rgba(0,0,0,.42) 100%)}
}
/* Mitch, 2026-09-29 (part two): the SAME complaint, on the 13 town pages.
`page-town.php` renders `class="hero hero-town"` with the SAME hero.jpg, so the
copy landed on the family there too — measured on /valdosta-ga/ before this change:
girl 44.9% / woman 38.3% / man 13.6% covered at 320px, and the man 10% out of frame.
The block above is scoped `:not(.hero-town)` deliberately, so it never reached them.
🔴 THE HOME PAGE'S NUMBERS CANNOT BE COPIED ACROSS, AND NOT BECAUSE OF THE 62vh.
The town copy block is ~140px TALLER than the home one at 320px: the ` ` in the
town H1 forces an extra line, and the two CTAs wrap to a second row. Feeding that
into the home page's mechanism (plain `cover`, copy to the top) needs
`min-height` ≈ 1130px — the town hero would end up TALLER than the home hero, which
inverts the hierarchy. That is why this block is built differently.
⭐ THE MOVE THAT MAKES IT WORK IS `background-size:auto 880px`.
Under `cover` on a narrow viewport the image is HEIGHT-constrained, which locks the
family at 48.7%–68.9% *of the hero's own height* — so the only way to open a gap for
the copy is to make the hero taller, which is the trap above. Sizing the background
explicitly breaks that link: the family now sits at 429–606px from the top whatever
the hero's height, so the hero only has to be tall enough to CONTAIN them (636px)
rather than tall enough to CLEAR them. The town hero therefore stays 636px against
the home hero's 885px and remains the visibly shorter, secondary treatment.
🔴 880px IS BOUNDED ON BOTH SIDES AND BOTH BOUNDS ARE TIGHT — re-measure if you touch it:
· below ~870px the copy stops clearing the faces at 320–375px;
· above ~970px the 505px-wide family band no longer fits the visible window at
320px and somebody gets cropped out. The window is `W × 1531/880` source px —
557px at 320px wide, so 26px of margin each side, the same margin the accepted
home hero has.
The `62vh` term is only a guard so the photo still covers on a very tall viewport.
⚠️ The title cap and the ≤389px button rule are LOAD-BEARING, not cosmetic. At 320px
the two CTAs otherwise wrap to a second row, which pushes the copy down 68px — 4px
past the faces. Shrinking them slightly is what keeps them on one row.
The scrim is re-graded dark-at-top / light over the faces, as on the home hero.
Verified CLEAR (0% coverage, all three 100% in frame) at 320/360/375/390/414/430/540/
768/1023 on valdosta-ga, statenville-ga, lake-park-ga, ray-city-ga, adel-ga and
service-areas/lake-park. 1024px and up is untouched: 0 differing pixels at
1024/1280/1440 on a town page AND on the home page.
⛔ There are 13 town pages, not 12 — /service-areas/lake-park/ is a second Lake Park
page on the same template. */
@media (max-width:1023px){
.hero-town{align-items:flex-start;min-height:max(62vh,636px);background-size:auto max(880px,62vh);background-position:58% 0}
.hero-town .hero-inner{padding-top:80px;padding-bottom:40px}
.hero-town .hero-title{font-size:clamp(1.75rem,4.6vw,2.5rem)}
.hero-town .hero-badge{margin-bottom:8px}
.hero-town .hero-sub{margin-bottom:16px;line-height:1.35}
.hero-town .hero-actions{gap:10px}
.hero-town .hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.52) 45%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.14) 80%,rgba(0,0,0,.22) 100%)}
}
@media (max-width:389px){
.hero-town .hero-actions .btn-lg{padding:12px 16px;font-size:.875rem}
}
/* Mitch, 2026-09-29 (part three): the same complaint AGAIN, on the 13 town pages
at DESKTOP widths. Part two fixed them below 1024px and deliberately left 1024+
alone, on the understanding that the desktop look was signed off. It was not
safe to leave: measured on the live site before this change, the little girl's
FACE (skin only, forehead to chin) was covered by `.hero-sub` on every town page
from 1024 to 1180px, and on 8 of the 13 at 1280px:
width worst face coverage width worst face coverage
1024 78.7% (all 13 covered) 1280 53.1% (8 of 13)
1100 73.3% (all 13) 1440 10.8% (hair + hairline, 8 of 13)
1180 68.3% (all 13) 1920 0.0% (all 13 clear)
At 1280 the words "zero mess." sit across her eyes. The two adults are never
touched at any desktop width, and nobody was ever cropped out of frame.
⚠️ THE MEASUREMENT IN `scripts/hero_check.py` UNDER-REPORTS THIS, AND ITS
`FACES['girl']` BOX IS WHY. That box starts at source y=940; her hair does not
start until y=962 and her skin until y=985, so ~19% of the box is empty sky and
text crossing only that strip scores ~15% "covered" while visibly clearing her.
Reading that 15% as noise is what made the first pass at this call it clear.
Re-measure with the tight boxes in `scripts/reanalyse.py`
(hair 962, forehead 985, chin 1052, read off a 6x pixel grid on hero.jpg) and
then LOOK at the overlay before believing either number.
🔴 THE HOME PAGE IS NOT TOUCHED AND MUST NOT BE — verified 0 differing pixels at
1024/1280/1440/1920 after this change. Nor are the town pages below 1024px:
this block is scoped `min-width:1024px` so it cannot reach part two's work.
⭐ WHY THIS CHANGES THE PHOTO AND NOT THE LAYOUT. Every layout lever is a trap
here, and the reason is that the hero is CONTENT-sized at desktop (674px against
62vh = 558px at 1440x900), so `align-items` does nothing — there is no slack to
move the copy into. The copy is bottom-anchored, so its last line sits at H-158
while `cover` puts her face at H/2 + 0.110W: the clearance condition is
H < 316 + 0.2195W, and today's hero misses it by 85px at 1024, 46px at 1280 and
11px at 1440 (1920 passes with 68px to spare, which is why it already looked
fine). Shrinking the hero from the bottom moves the centred image UP by half of
what it moves the copy, so it gains nothing; making it taller inverts the
hierarchy against the home hero's 88vh; and narrowing `.hero-sub` adds a line,
which makes the hero taller again. Sizing the background explicitly is the only
lever that moves her without moving anything the client has already approved —
the same move part two made for mobile, for the same reason.
🔑 SO: hero height, title size, padding, copy position and the 62vh identity are
all BYTE-IDENTICAL to before. Only the photo's crop changes.
🔴 1400px IS BOUNDED ON BOTH SIDES AND BOTH BOUNDS ARE MEASURED — re-measure if
you touch it:
· below ~1260px the copy stops clearing her (1250px puts text back on her hair
at 1280/1440/1600; 1275px is clear);
· above ~1650px she is cropped out of the bottom of the hero (1700px leaves
only 91.9% of her head in frame at 1024);
· and above 1531px the 2000px-wide photo is being upscaled, so it softens.
1400 sits 140px above the first bound, 250px below the second and 131px below
the third. The `76.6vw` term is what keeps the photo covering the viewport
(2000/1531 = 1.3064, so a height of 0.766W is exactly `cover`); above ~1828px
it takes over and the framing is byte-identical to today, which is correct
because 1920 already measured clear. The `62vh` term is only a guard so the
photo still covers on a very tall viewport, as in part two.
Verified after this change: 0.0% coverage of BOTH the face box and the
hair+face box, and all three faces 100% in frame, on all 13 town pages at
1024/1100/1180/1280/1366/1440/1600/1920/2560. */
@media (min-width:1024px){
.hero-town{background-size:auto max(1400px,76.6vw,62vh)}
}
/* --------------------------------------------------------------- sections */
.section{padding:68px 0}
@media(min-width:1024px){.section{padding:96px 0}}
.section-alt{background:var(--bg-alt)}
.section-head{text-align:center;max-width:44rem;margin:0 auto 44px}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--green);margin-bottom:10px}
.eyebrow.light{color:rgba(255,255,255,.8)}
.section-title{font-size:clamp(1.9rem,4vw,3rem);font-weight:800}
.section-title.light{color:#fff}
.section-sub{color:var(--muted);font-size:1.05rem}
.section-sub.light{color:rgba(255,255,255,.85)}
.subhead{font-size:1.3rem;font-weight:700;margin:34px 0 14px}
.prose{color:#4b5563;font-size:1.02rem}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card-title{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.card-title.lg{font-size:1.5rem}
.card-text{color:var(--muted);font-size:.94rem;margin:0}
/* -------------------------------------------------------------- calculator */
.calc{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
@media(min-width:768px){.calc{padding:38px}}
.calc-row{margin-bottom:26px}
.calc-label{display:flex;align-items:baseline;justify-content:space-between;font-weight:700;margin-bottom:12px}
.calc-label output{font-weight:800}
/* Mitch, 2026-09-29: "the little buttons had a dog and a scoop pail ... can we get
them back please ... super cute". The old Base44 site drew each calculator handle
as a white pill holding a Lucide glyph — `dog` on Number of Dogs and `paint-bucket`
(his "scoop pail") on Yard Size. These are HIS originals, recovered path-for-path
from the 2026-09-23 capture of the old site
(builds/scoopapoop/current-site-2026-09-23/html/01-home.html) — not redrawn.
⚠️ Styling a range thumb requires appearance:none on the input, which also removes
the native track AND the accent-color fill, so both are rebuilt here. The green
filled portion is driven by --calc-pct, set by main.js on every input event;
Firefox uses ::-moz-range-progress instead and needs no JS.
⚠️ The WebKit and Gecko pseudo-elements MUST stay in separate rules — one combined
selector list makes both engines drop the whole declaration.
🔑 The itself is untouched, so drag, touch and keyboard still
work and the price still calculates; only the paint changed. */
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:40px;margin:0;padding:0;background:transparent;cursor:pointer}
.calc input[type=range]:focus{outline:none}
.calc input[type=range]:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:999px}
.calc input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--green) 0 var(--calc-pct,0%),#d3d3d3 var(--calc-pct,0%) 100%)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:40px;height:40px;margin-top:-17px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50% 50%;background-size:20px 20px;border:1px solid rgba(0,0,0,.1);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.calc input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#d3d3d3}
.calc input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--green)}
.calc input[type=range]::-moz-range-thumb{width:40px;height:40px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50% 50%;background-size:20px 20px;border:1px solid rgba(0,0,0,.1);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
#calc-dogs::-webkit-slider-thumb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.25 16.25h1.5L12 17z'/%3E%3Cpath d='M16 14v.5'/%3E%3Cpath d='M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309'/%3E%3Cpath d='M8 14v.5'/%3E%3Cpath d='M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5'/%3E%3C/svg%3E")}
#calc-dogs::-moz-range-thumb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.25 16.25h1.5L12 17z'/%3E%3Cpath d='M16 14v.5'/%3E%3Cpath d='M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309'/%3E%3Cpath d='M8 14v.5'/%3E%3Cpath d='M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5'/%3E%3C/svg%3E")}
#calc-yard::-webkit-slider-thumb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3E%3Cpath d='m5 2 5 5'/%3E%3Cpath d='M2 13h15'/%3E%3Cpath d='M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z'/%3E%3C/svg%3E")}
#calc-yard::-moz-range-thumb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3E%3Cpath d='m5 2 5 5'/%3E%3Cpath d='M2 13h15'/%3E%3Cpath d='M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z'/%3E%3C/svg%3E")}
.calc-ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:.76rem;margin-top:2px}
.freq-group{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:620px){.freq-group{grid-template-columns:repeat(4,1fr)}}
.freq-btn{padding:11px 8px;border-radius:12px;border:2px solid var(--line);background:#fff;font-weight:600;font-size:.88rem;cursor:pointer;transition:.18s}
.freq-btn:hover{border-color:var(--green)}
.freq-btn[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
.calc-result{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);padding-top:22px;margin:26px 0 20px}
.calc-price-label{font-size:.82rem;color:var(--muted);margin:0 0 2px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.calc-price-value{font-size:2rem;font-weight:800;margin:0}
.calc-note{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}
/* ------------------------------------------------------------ misc blocks */
.area-card{max-width:620px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px}
.area-title{font-size:1.25rem;font-weight:700;margin-bottom:4px}
.area-line{color:var(--green);font-weight:600}
.area-coverage{color:var(--muted);font-size:.9rem;margin:0}
.about-grid{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.about-grid{grid-template-columns:1.1fr .9fr}}
.about-media img{border-radius:var(--radius-lg)}
.pull-quote{font-size:1.35rem;font-weight:700;color:var(--green)}
.about-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.about-rating{display:flex;flex-direction:column;line-height:1.2}
.about-rating strong{font-size:1.35rem}
.about-rating span{color:var(--muted);font-size:.85rem}
.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.ticks{list-style:none;margin:0 0 22px;padding:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:10px;color:#4b5563;font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}
.town-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:700px){.town-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.town-grid{grid-template-columns:repeat(4,1fr)}}
.town-chip{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;transition:.2s}
.town-chip:hover{border-color:var(--green);box-shadow:var(--shadow)}
.town-name{display:block;font-weight:700}
.town-county{display:block;color:var(--muted);font-size:.82rem}
.town-stats .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
.stat-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:4px}
.stat-value{font-weight:700;margin:0}
.facts{list-style:none;margin:0;padding:0;counter-reset:f}
.facts li{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;color:#4b5563}
.fact-num{flex:0 0 30px;height:30px;border-radius:50%;background:rgba(22,163,74,.12);color:var(--green);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.86rem}
.rating-block{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.rating-value{font-size:1.5rem;font-weight:800}
.stars{color:#f59e0b;letter-spacing:2px;margin:0}
.rating-count{color:var(--muted);font-size:.9rem}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}
.review-text{margin:8px 0 18px;font-style:normal;color:#374151;font-size:.96rem}
.review-by{display:flex;align-items:center;gap:10px;margin:0;font-size:.86rem}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem}
.review-name{font-weight:700}
.review-time{color:var(--muted)}
/* ------------------------------------------------------------- accordion */
.accordion{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.acc-heading{margin:0}
.acc-item+.acc-item{border-top:1px solid var(--line)}
.acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:20px 24px;font:inherit;font-weight:700;text-align:left;cursor:pointer}
.acc-trigger:hover{color:var(--green)}
.acc-chevron{flex:0 0 auto;transition:transform .25s}
.acc-trigger[aria-expanded=true] .acc-chevron{transform:rotate(180deg)}
.acc-panel{padding:0 24px 22px;color:#4b5563}
.acc-panel p{margin:0}
/* ----------------------------------------------------------- quote + foot */
.quote-section{background:var(--green);color:#fff}
.quote-card{background:#fff;border-radius:var(--radius-lg);padding:6px;box-shadow:var(--shadow);overflow:hidden}
.quote-card iframe{width:100%;border:0;height:1150px;display:block}
@media(min-width:640px){.quote-card{padding:16px}.quote-card iframe{height:1000px}}
@media(min-width:1024px){.quote-card{padding:24px}.quote-card iframe{height:850px}}
.quote-alt{text-align:center;margin:18px 0 0;color:rgba(255,255,255,.92)}
.quote-alt a{font-weight:700;color:#fff}
.site-footer{background:#111827;color:#d1d5db;padding:56px 0 26px;font-size:.92rem}
.footer-grid{display:grid;gap:32px}
@media(min-width:800px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.footer-brand img{border-radius:50%;background:#fff;padding:4px;margin-bottom:12px}
.footer-name{font-weight:800;color:#fff;font-size:1.05rem;margin:0 0 2px}
.footer-tagline{margin:0 0 10px}
.footer-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.footer-rating .rating-value{font-size:1.1rem;color:#fff}
.footer-head{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#9ca3af;font-weight:700;margin-bottom:14px}
.footer-towns{list-style:none;margin:0;padding:0;columns:2;column-gap:18px}
.footer-towns a{text-decoration:none;line-height:2}
.footer-towns a:hover{color:#fff}
.footer-phone{font-size:1.15rem;font-weight:800;color:#fff;text-decoration:none}
.footer-phone:hover{color:var(--green)}
.footer-quote-label{color:#9ca3af;margin-bottom:10px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;border-top:1px solid #1f2937;margin-top:34px;padding-top:18px;font-size:.84rem;color:#9ca3af}
.footer-bottom p{margin:0}
.footer-legal a,.footer-credit a{color:#9ca3af}
.footer-legal a:hover,.footer-credit a:hover{color:#fff}
.footer-paw{text-align:center;color:#6b7280;font-size:.82rem;margin:14px 0 0}
/* --------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* ----------------------------------------------------------- basic pages */
.page-main .section .prose h2,.page-main .section .prose h3{margin-top:1.6em}
.page-main .prose ul{padding-left:1.2em;color:#4b5563}
.page-main .prose li{margin-bottom:.4em}
body:not(.home) .site-header{background:#fff;box-shadow:0 2px 18px rgba(16,24,40,.08)}
body:not(.home) .header-phone,body:not(.home) .nav-toggle{color:var(--ink)}
body.page-template-page-town .site-header{background:transparent;box-shadow:none}
body.page-template-page-town .header-phone,body.page-template-page-town .nav-toggle{color:#fff}
body.page-template-page-town .site-header.scrolled{background:#fff;box-shadow:0 2px 18px rgba(16,24,40,.08)}
body.page-template-page-town .site-header.scrolled .header-phone,
body.page-template-page-town .site-header.scrolled .nav-toggle{color:var(--ink)}
body:not(.home):not(.page-template-page-town) .page-main{padding-top:72px}
@media(min-width:1024px){body:not(.home):not(.page-template-page-town) .page-main{padding-top:104px}}