/* =====================================================================
   KENNEDY HVAC — service areas by region (loaded only where used)
   ===================================================================== */
.areas { display: grid; gap: 2.25rem clamp(1.5rem, 3vw, 3rem); }
.areas__group {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding-top: 1.25rem;
  border-top: var(--border-w) solid var(--color-navy);
  min-width: 0;
}
.areas__title { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h3-display); line-height: 1.15; }
.areas__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.areas__base {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm-plus);
  font-weight: 600;
  color: var(--color-ink-muted);
}
.areas__base .icon { width: 0.875rem; height: 0.875rem; color: var(--color-orange); }
/* "Call to confirm" region: dashed frame instead of a solid rule */
.areas__group--confirm {
  padding: 1.25rem 1.5rem 1.5rem;
  border: var(--border-w) dashed var(--color-navy);
  border-radius: var(--radius-card);
  background: var(--color-cream);
}
.section--cream-2 .areas__group--confirm { background: var(--color-surface); }
.areas__confirm { font-size: var(--fs-sm-plus); color: var(--color-ink-muted); line-height: 1.5; }
.areas__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  border-radius: var(--radius-l);
  background: var(--color-cream);
}
.section--cream-2 .areas__footer { background: var(--color-surface); }
.areas__footer-text { font-size: var(--fs-md); font-weight: 600; }
.areas__footer-text a { font-weight: 700; white-space: nowrap; }

@media (min-width: 48em) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas__footer { border-radius: var(--radius-pill); padding-left: 2rem; }
  .areas--regions .areas__group--central,
  .areas--regions .areas__group--glades { grid-column: 1 / -1; }
}

@media (min-width: 64em) {
  /* Approved arrangement when all five regions are shown */
  .areas--regions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "north central central south"
      "west  central central glades";
  }
  .areas--regions .areas__group--north { grid-area: north; }
  .areas--regions .areas__group--central { grid-area: central; }
  .areas--regions .areas__group--south { grid-area: south; }
  .areas--regions .areas__group--west { grid-area: west; }
  .areas--regions .areas__group--glades { grid-area: glades; }
  .areas--auto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}