directly under .wrap, so it was captured by the prose rule
`.section > .wrap > ol { max-width: var(--measure) }` -- the same rule whose
own comment says grids are "deliberately exempt". The exemption was by
intent, not by selector. Freed, the four boxes get the whole band. */
.section > .wrap > ol.steps { max-width: none; }
.steps { gap: 26px; }
.steps li { padding: 34px 30px; }
.steps h3 { font-size: 1.24rem; }
.steps p { font-size: 1rem; }
.step-no { font-size: 2.2rem; }
/* [J6] "Read all 17 reviews on Google CTA needs to be centered (sitewide)".
.review-cta{text-align:center} already existed at line 337 but lost the
cascade to `.section > .wrap > p{text-align:left}` (0-1-0 vs 0-2-1), so the
declaration was present in the file and inert in the browser. Matching that
specificity is the whole fix. */
.section > .wrap > p.review-cta, .review-cta { text-align: center; }
/* [J10] "Towns We Serve section in service areas needs to be implemented
better, like buttons not just text". It was a run of plain paragraphs.
Now a card grid that keeps every town's one-line local sentence (that copy is
the page's unique local content -- turning it into bare name buttons would
have deleted it) while giving each town the button affordance Jeff asked for.
Sits on the tint band so the white cards read as raised. */
.towns-sec .town-cards {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px; margin: 24px 0 26px;
}
.town-card {
display: flex; flex-direction: column; gap: 5px; padding: 18px 20px;
background: var(--white); border: 1px solid var(--line); border-radius: 12px;
box-shadow: var(--shadow-sm); text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.town-card:hover, .town-card:focus-visible {
transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--orange);
}
.town-card-name { font-family: var(--font-head); font-weight: 800; font-size: 1.06rem; color: var(--navy); }
.town-card-county {
font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-ink);
}
.town-card-note { font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.towns-note { max-width: var(--measure); margin-inline: auto; color: var(--muted); }
@media (max-width: 1000px) { .towns-sec .town-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .towns-sec .town-cards { grid-template-columns: 1fr; } }
/* [J7] "Service area tab in nav needs to have a dropdown summary". Services
already had .has-sub; Service Areas did not. 12 towns in a single flex
column would be a 450px-tall menu, so this variant lays them two-up as a
summary panel and closes with an "All service areas" link. */
.sub-areas { min-width: 460px; }
.has-sub:hover .sub-areas, .has-sub:focus-within .sub-areas {
display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 6px;
}
.sub-areas .sub-all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
.sub-areas .sub-all a { font-weight: 700; color: var(--orange-ink); }
@media (max-width: 900px) {
.sub-areas { min-width: 0; }
.has-sub:hover .sub-areas, .has-sub:focus-within .sub-areas,
.sub-areas { display: flex !important; grid-template-columns: none; }
}
/* [J12] "reformat contact page, form needs to be at the top of the page or in
the hero". Root cause was not ordering: .contact-grid had NO base rule at
all -- its only declaration lives inside `@media (max-width:860px)` (line
506), so on desktop it stayed display:block and the info column + map (844px
tall) stacked ABOVE the form, pushing the form to y=1695. Declaring the grid
at >=861px puts the form beside the details, at the top of the band.
Scoped to min-width so the 860px stack rule keeps working on mobile. */
@media (min-width: 861px) {
.contact-grid {
display: grid; grid-template-columns: 0.92fr 1.08fr;
gap: 40px; align-items: start;
}
.contact-grid .estimate-card, .contact-grid form { margin-top: 0; }
}
/* [J9] "How It Runs section in financing needs to be smaller and adjust width,
its too long". The width half is covered by the [J4] .steps fix above (it was
capped at the 730px measure, now the full band). This tightens the remaining
height: the band's 78px top/bottom padding plus equal-height stretch left a
lot of dead space under the shorter cards. Applies to the homepage
"How It Works" band too, which is the same component. */
.process-sec { padding-top: 58px; padding-bottom: 58px; }
.steps li { padding: 28px 26px; }