/* ============================================================
   TOWN LIST — the landing page's "Areas We Serve" links.
   Replaces the host's AWS-links / service-area-list-style combo
   (2026-07-17): those classes never shipped list-style resets in
   every host build, so the towns rendered with browser bullets
   in front of the location-dot icons.

   ONE flat <ul class="geo-town-list"> holds every town; CSS
   columns split it (3 / 2 / 1 by width) and keep the columns
   balanced automatically — no hand-split half-lists.

   Type is the host's: no font-family/font-size here. Colors and
   spacing are geo-owned design.

   Fills: index.cfm (landing page). Variables from
   service-area.css. Loaded by css-service-area.cfm.
   ============================================================ */
.geo-town-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 28px;
}
.geo-town-list li {
    break-inside: avoid;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.geo-town-list li i {
    flex: 0 0 auto;
    color: var(--geo-accent);
}
.geo-town-list a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.geo-town-list a:hover,
.geo-town-list a:focus {
    color: var(--geo-accent);
}
@media (max-width: 991px) {
    .geo-town-list {
        columns: 2;
    }
}
@media (max-width: 600px) {
    .geo-town-list {
        columns: 1;
    }
}