/* ============================================================
   LOCATIONS / AREA PAGES — locations.css
   Linked by all pages in: areas/*.html

   Note: The main CSS for area pages (svc-block, svc-page-hero,
   wcu2-*, area-map-*, ratings-slider, faq-*, stealth-divider,
   svc-page-cta, svc-page-intro) lives in css/style.css because
   those classes are shared across service pages, the homepage,
   and other site pages.

   This file contains styles that are exclusive to area pages.
============================================================ */

/* ── FAQ COLUMNS (two-column FAQ layout used in all area pages) ── */
.faq-col {
  display: flex;
  flex-direction: column;
}

/* ── SECTION HEADER (area page "About [City]" intro block) ── */
.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  color: var(--navy);
  margin-bottom: 14px;
}

.section-header p {
  color: var(--gray-text);
  font-size: 17px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ── SVC-PAGE-INTRO h2 span (colored highlight in area page intro) ── */
.svc-page-intro h2 span {
  color: var(--red);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .section-header { margin-bottom: 32px; }
  .section-header p { font-size: 15px; }

  /* FAQ two-column collapses to single column */
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .faq-col { gap: 0; }
}

@media (max-width: 480px) {
  .section-header { margin-bottom: 24px; }
  .section-header h2 { font-size: clamp(22px, 7vw, 32px); }
  .section-header p { font-size: 14px; }
}