/* Areas page  -  coverage map */
.areas-map-section {
 padding-top: 48px;
}

.areas-map-layout {
 display: grid;
 grid-template-columns: 1.4fr 1fr;
 gap: 28px;
 align-items: stretch;
}

.areas-map-wrap {
 position: relative;
 height: 420px;
 min-height: 420px;
}

.areas-coverage-map {
 width: 100%;
 height: 420px;
 min-height: 420px;
 border-radius: 10px;
 border: 1px solid rgba(77, 184, 224, 0.22);
 background: #060a0f;
 overflow: hidden;
 z-index: 0;
}

.areas-coverage-map .leaflet-container {
 width: 100%;
 height: 420px !important;
 min-height: 420px;
 background: #060a0f;
 font-family: var(--font-body);
}

.areas-map-legend {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 margin-top: 12px;
}

.areas-legend-item {
 font-family: var(--font-display);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: rgba(232, 240, 248, 0.75);
 padding-left: 18px;
 position: relative;
}

.areas-legend-item::before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 10px;
 height: 10px;
 border-radius: 50%;
}

.areas-legend-service::before { background: #00d4ff; border-radius: 2px; }
.areas-legend-outside::before { background: rgba(180, 190, 200, 0.35); border-radius: 2px; }
.areas-legend-hq::before { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.5); }

.areas-map-sidebar {
 background: var(--dark-surface, #111);
 border: 1px solid rgba(77, 184, 224, 0.18);
 border-radius: 10px;
 padding: 28px 24px;
}

.areas-map-sidebar h3 {
 font-size: clamp(18px, 2.4vw, 22px);
 margin-bottom: 12px;
 color: #fff;
}

.areas-map-intro {
 color: var(--text-muted);
 font-size: var(--text-body-sm);
 line-height: 1.7;
 margin-bottom: 20px;
}

.areas-map-towns {
 list-style: none;
 margin: 0 0 24px;
 padding: 0;
 display: grid;
 gap: 12px;
}

.areas-map-towns li {
 font-size: var(--text-body-sm);
 line-height: 1.55;
 color: rgba(232, 240, 248, 0.88);
 padding-left: 14px;
 border-left: 2px solid rgba(8, 146, 212, 0.45);
}

.areas-map-towns strong {
 color: var(--bright-cyan);
 font-weight: 600;
}

.areas-map-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.areas-map-marker {
 background: transparent;
 border: none;
}

.areas-map-pin {
 display: block;
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: var(--bright-cyan);
 border: 2px solid #fff;
 box-shadow: 0 0 10px rgba(8, 146, 212, 0.55);
}

.areas-map-pin--hq {
 width: 22px;
 height: 22px;
 background: #fff;
 border-color: var(--brand-blue);
 box-shadow: 0 0 14px rgba(8, 146, 212, 0.65);
}

.areas-leaflet-popup .leaflet-popup-content-wrapper {
 background: #0c1219;
 color: #e8f0f8;
 border: 1px solid rgba(77, 184, 224, 0.28);
 border-radius: 8px;
}

.areas-leaflet-popup .leaflet-popup-tip {
 background: #0c1219;
}

.areas-seo-content {
 margin-top: 0;
 padding-top: 0;
 border: none;
}

.areas-nationwide-card {
 max-width: 880px;
}

.areas-seo-content p {
 color: var(--text-muted);
 line-height: 1.75;
 margin-bottom: 16px;
}

.areas-section-prose {
 margin-top: 32px;
 padding: 0;
 background: none;
 border: none;
 border-radius: 0;
}

.areas-section-prose h3 {
 font-size: 18px;
 margin-bottom: 14px;
 font-style: normal;
 text-transform: none;
 color: var(--text-muted);
}

.areas-section-prose p {
 color: var(--text-muted);
 line-height: 1.75;
 font-size: var(--text-body-sm);
 margin-bottom: 14px;
}

.areas-section-prose p:last-child {
 margin-bottom: 0;
}

@media (max-width: 900px) {
 .areas-map-layout {
  grid-template-columns: 1fr;
 }

 .areas-map-wrap,
 .areas-coverage-map,
 .areas-coverage-map .leaflet-container {
  height: 320px;
  min-height: 320px;
 }
}
/* deploy-stamp: 2026-07-07T14:40:15 */