/* Service area — ported from design/mockup.html (.area). */

.section--service_area{background:var(--navy);color:#fff}
.section--service_area .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.section--service_area h2{margin-top:14px}
.section--service_area .lede{color:rgba(255,255,255,.7);margin-top:20px}
.towns{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}
.towns li{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.85)}
.towns li::before{content:"";width:8px;height:8px;background:var(--red);flex:none}
.area-card{background:var(--navy-deep);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);padding:44px 40px;text-align:center}
.area-card .pin{width:60px;height:60px;margin:0 auto 20px;background:rgba(255,255,255,.06);display:grid;place-items:center;border-radius:50%}
.area-card .pin svg{width:28px;height:28px;color:var(--red)}
.area-card h3{font-size:30px;margin-bottom:8px}
.area-card p{color:rgba(255,255,255,.65);font-size:15px;margin-bottom:24px}

@media(max-width:1020px){.section--service_area .wrap{grid-template-columns:1fr;gap:44px}}

/* Towns that have their own page are links; the rest stay plain text, so the
   list reads consistently either way. */
.towns a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.towns a:hover{color:#fff;text-decoration-color:var(--red)}