.city-directory { padding:64px 0 72px; background:var(--chalk); }
.city-directory-eyebrow { display:block; color:var(--signal); text-transform:uppercase; letter-spacing:.24em; font-size:13px; margin-bottom:12px; }
.city-directory h2 { font-size:clamp(28px,3.2vw,40px); font-weight:600; letter-spacing:-.035em; line-height:1.25; text-transform:none; margin:0 0 24px; }
.city-directory p { max-width:800px; color:var(--ink-soft); font-size:16px; line-height:2; margin:0 0 18px; }
.city-directory-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; max-width:1100px; color:var(--ink-soft); }
.city-directory-link { display:inline-flex; align-items:center; gap:9px; border:1px solid color-mix(in srgb,var(--signal) 26%,white); border-radius:999px; background:var(--chalk); padding:10px 15px; font-size:14px; line-height:1.3; color:var(--ink); }
.city-directory-name { overflow-wrap:anywhere; }
.city-directory-uf { color:var(--ink-soft); font-size:12px; }
.city-directory-count { background:var(--signal); color:white; border-radius:999px; min-width:27px; padding:3px 7px; font-size:12px; font-weight:700; text-align:center; }
.city-directory-link:hover { background:var(--signal-tint); border-color:var(--signal); }
.city-directory-link:focus-visible { outline:3px solid var(--signal); outline-offset:3px; }
@media(max-width:600px) { .city-directory { padding:40px 0 48px; } .city-directory-links { gap:10px; margin-top:26px; } .city-directory-link { max-width:100%; padding:10px 12px; } .city-directory p { font-size:15px; line-height:1.8; } }