/* ===========================================================================
   Location (service-area) pages + the Areas We Cover hub.
   Reuses the site's section/card/hero system; only the area-specific parts live
   here. Loads after home.css so the shared aliases (--brand, --line, etc.) exist.
   =========================================================================== */

/* --- Sector chips (town page "Who we help") ------------------------------- */
.sector-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 6px auto 32px; max-width: 760px; }
.sector-tag { display: inline-flex; align-items: center; padding: 9px 17px;
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: var(--off-white, #F8F6FD); border: 1px solid var(--line, #E7E3F2);
  color: var(--ink, #1A1730); font-size: 14.5px; font-weight: 600; line-height: 1; }
a.sector-tag { text-decoration: none; transition: border-color var(--t-fast, 150ms ease), color var(--t-fast, 150ms ease); }
a.sector-tag:hover { border-color: var(--brand, #7C3AED); color: var(--brand, #7C3AED); }

/* --- Nearby-area chips (dark band on town pages) -------------------------- */
.area-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  max-width: 800px; margin: 6px auto 26px; }
.area-chip { display: inline-flex; align-items: center; padding: 11px 20px;
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
  transition: var(--t-base, 250ms cubic-bezier(0.16,1,0.3,1)); }
.area-chip:hover { background: rgba(124,58,237,0.22); border-color: rgba(167,139,250,0.6);
  transform: translateY(-2px); color: #fff; }

/* --- Areas We Cover hub grid --------------------------------------------- */
.areas-grid { display: grid; gap: 46px; margin-top: 10px; }
.area-group__title { font-family: var(--head, inherit); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800; letter-spacing: -0.02em; margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 2px solid var(--line, #E7E3F2); }
.area-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.area-card { display: flex; flex-direction: column; gap: 7px; padding: 22px 24px;
  border-radius: var(--r, 16px); background: #fff; border: 1px solid var(--line, #E7E3F2);
  box-shadow: var(--shadow-card, 0 2px 14px rgba(27,17,64,0.08)); text-decoration: none;
  color: inherit; transition: var(--t-base, 250ms cubic-bezier(0.16,1,0.3,1)); }
.area-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.4);
  box-shadow: var(--shadow-lift, 0 18px 40px rgba(27,17,64,0.16)); }
.area-card__name { font-family: var(--head, inherit); font-weight: 800; font-size: 18px;
  color: var(--ink, #1A1730); display: flex; align-items: center; gap: 8px; }
.area-card__name .arw { color: var(--brand, #7C3AED); transition: transform var(--t-fast, 150ms ease); }
.area-card:hover .area-card__name .arw { transform: translateX(4px); }
.area-card__meta { font-size: 13px; font-weight: 600; color: var(--brand, #7C3AED); }
.area-card__desc { font-size: 14.5px; color: var(--grey, #6A6484); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .area-chip, .area-card, .area-card__name .arw { transition: none; }
  .area-chip:hover, .area-card:hover { transform: none; }
}