/* City directory uses the site's existing light navigation, container and footer. */
.city-directory { padding: 64px 0 80px; color: #1a2b4a; background: #f7f9fc; }
.city-directory-heading { margin-bottom: 28px; color: #64748b; font-size: 14px; }
.city-directory-heading > a { color: #165dff; }
.city-directory-heading h1 { margin: 22px 0 10px; color: #1a2b4a; font-size: 36px; line-height: 1.3; }
.city-directory-heading p { margin: 0; line-height: 1.8; }
.city-directory-regions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; padding: 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.city-directory-regions a { padding: 7px 12px; border-radius: 6px; color: #165dff; background: #f0f5ff; font-size: 14px; }
.city-directory-regions a:hover { background: #e2ecff; }
.city-directory-groups { display: grid; gap: 16px; }
.city-directory-group { padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; scroll-margin-top: 100px; }
.city-directory-group h2 { margin: 0 0 16px; color: #1a2b4a; font-size: 20px; }
.city-directory-group nav { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.city-directory-group nav a { display: inline-flex; min-height: 38px; align-items: center; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 6px; color: #435675; font-size: 14px; }
.city-directory-group nav a:hover { color: #165dff; border-color: #c5d8ff; background: #f8faff; }
.city-directory a:focus-visible { outline: 2px solid #165dff; outline-offset: 3px; }
@media (max-width: 760px) {
  .city-directory { padding: 36px 0 48px; }
  .city-directory-heading h1 { font-size: 28px; }
  .city-directory-regions { padding: 14px; }
  .city-directory-group { padding: 18px; }
  .city-directory-group nav { gap: 8px; }
  .city-directory-group nav a { padding: 6px 10px; }
}