/* Area hub pages (Bristol, Yate ...): editorial copy columns, service blocks, AC image */
.city-page .area-copy h3 { margin-top: 26px; font-size: 1.15rem; }
.city-page .area-copy h3:first-child { margin-top: 0; }
.city-page .area-copy .area-list { margin: 16px 0 0; padding-left: 1.3rem; display: grid; gap: 6px; line-height: 1.6; }
.city-page .area-copy .area-cta { margin-top: 26px; }
.city-page .regional-coverage-grid .regional-card p + p { margin-top: 12px; }
.city-page .area-service .area-ac-media { display: block; margin-top: 24px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); }
.city-page .area-service .area-ac-media img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
.city-page .area-nearby .area-tags { margin-top: 14px; }
@media (max-width: 860px) {
  .city-page .area-copy .area-cta .btn { width: 100%; text-align: center; }
}

/* long CTA labels must wrap instead of widening the page on phones */
.city-page .sub-hero-grid > div, .city-page .split > div, .city-page .coverage-layout > div { min-width: 0; }
.city-page .hero-actions .btn, .city-page .area-cta .btn { white-space: normal; text-align: center; }
@media (max-width: 860px) {
  .city-page .hero-actions { flex-direction: column; align-items: stretch; }
}

.city-page .area-hero .hero-actions { margin-top: 26px; }

/* FAQ: the answer sits on a white card inside a dark section, so it must not inherit the light section text colour */
.city-page .faq-item { background: #fff; }
.city-page .faq-item button { color: var(--navy, #0a1f33); }
.city-page .faq-item p { color: #334155; line-height: 1.65; }

/* closing CTA box that carries the approved closing heading and text */
.city-page .coverage-final-cta .heating-cta-box > div:first-child h2 { margin: 8px 0 18px; }
.city-page .coverage-final-cta .heating-cta-box > div:first-child p:not(.eyebrow) { margin-top: 14px; }
.city-page .coverage-final-cta .heating-cta-box .text-link { display: inline-block; margin-top: 8px; }

/* cards with several paragraphs: keep content top-aligned instead of stretching the grid rows */
.city-page .regional-coverage-grid .regional-card { align-content: start; }