/* ===== AREA PAGES (/areas and /areas/<city>) =====
   Page-specific pieces only. Layout, type and components come from
   styles.css and page-service.css. */

/* Page header without a hero photo */
.area-header .section-header { margin-bottom: 0; }
.area-header .section-header__lead { max-width: 46rem; margin-inline: auto; }
.area-header .btn-group { justify-content: center; margin-top: var(--space-4); }

/* City facts: a plain two-column list of sourced local details */
.area-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-3);
  list-style: none;
}

.area-facts li {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.area-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--navy-800);
  margin-bottom: 0.25rem;
}

.area-sources {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin-top: var(--space-3);
  max-width: none;
}

.area-sources a { color: var(--ink-700); text-decoration: underline; }

/* Closed-sale photo already published on the home page */
.area-proof {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
}

.area-proof img { width: 100%; height: auto; display: block; }

.area-proof figcaption {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.area-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.area-prose p + p { margin-top: var(--space-2); }
.area-prose h3 { margin-top: var(--space-4); margin-bottom: var(--space-1); }

/* Service cards: let the 280px minimum shrink on very narrow phones */
.area-page .services {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Hub cards are links */
.area-page a.area-card { position: relative; overflow: hidden; }

/* ----- Contact form on area pages ----- */
.area-contact form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.area-contact .calculator__input { padding-left: 1rem; }
.area-contact textarea.calculator__input { min-height: 120px; resize: vertical; }
.area-contact .cf-turnstile { min-height: 65px; }

.area-form-status {
  display: none;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: 0.95rem;
}

.area-form-status--ok { background: #e8f5ee; border-left: 4px solid #0F6E56; color: #04342C; }
.area-form-status--error { background: #fde7e0; border-left: 4px solid #993C1D; color: #4A1B0C; }
.area-form-status a { color: inherit; font-weight: 600; }

@media (max-width: 960px) {
  .area-split { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* The Turnstile widget is 300px wide at minimum. Trim the card padding on
   phones so it fits, and scale it (zoom, so the layout box shrinks too) on
   the narrowest screens. */
.area-contact .calculator__form,
.area-contact form { min-width: 0; }

@media (max-width: 480px) {
  .area-contact .calculator { padding: 12px; }
}

@media (max-width: 389px) {
  .area-contact .cf-turnstile { zoom: 0.85; }
}

@media (max-width: 339px) {
  .area-contact .cf-turnstile { zoom: 0.75; }
}