/* Areas we cover: copy + postcode checker beside the reach map, then towns by distance. */
.ex.areas { padding: calc(var(--ex-hdr) + clamp(48px, 6vw, 88px)) 0 var(--ex-sec); background: radial-gradient(120% 80% at 80% 0%, var(--ex-navy-800) 0%, var(--ex-ink) 60%); color: var(--ex-text); overflow: hidden; }
.ex.areas .areas-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ex.areas .areas-h { font-size: clamp(38px, 5.4vw, 80px); }
.ex.areas .lead { margin-top: 20px; }

/* postcode checker */
.ex.areas .areas-check { margin-top: 32px; max-width: 460px; }
.ex.areas .areas-check label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-green); }
.ex.areas .areas-check-row { display: flex; height: 56px; background: #fff; border-radius: 3px; overflow: hidden; transform: skewX(-10deg); }
.ex.areas .areas-check-row > * { transform: skewX(10deg); }
.ex.areas .areas-check input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 22px; font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ex-ink-text); background: transparent; }
.ex.areas .areas-check input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; color: #5d6a86; }
.ex.areas .areas-check button { margin-right: -8px; padding: 0 30px 0 24px; border: 0; background: var(--ex-green); color: var(--ex-green-ink); font-weight: 800; font-stretch: 110%; font-size: 16px; cursor: pointer; }
.ex.areas .areas-check button:hover { background: var(--ex-green-hi); }
.ex.areas .areas-check-row:focus-within { outline: 2px solid var(--ex-green); outline-offset: 3px; }
.ex.areas .areas-check.is-busy button { opacity: .6; }
.ex.areas .areas-result { margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--ex-green); background: rgba(124, 204, 69, .1); font-size: 15.5px; font-weight: 600; color: #fff; }
.ex.areas .areas-result.is-out { border-left-color: var(--ex-amber); background: rgba(255, 197, 61, .1); }
.ex.areas .areas-result.is-bad { border-left-color: #ff7a6e; background: rgba(198, 47, 42, .14); }
.ex.areas .areas-call { margin-top: 22px; }

/* map */
.ex.areas .areas-map { margin: 0; }
.ex.areas .areas-map-in { position: relative; }
/* the land shapes run past the map's edges (whole countries): clip them to the frame */
.ex.areas .areas-map svg { display: block; width: 100%; height: auto; overflow: hidden; }
.ex.areas .areas-map .land { fill: #13234a; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.ex.areas .areas-map .land--uk { fill: #1d3366; stroke: rgba(255, 255, 255, .18); }
.ex.areas .areas-map .reach { fill: rgba(85, 180, 232, .12); stroke: var(--ex-green); stroke-width: 2.5; stroke-dasharray: 10 8; }
.ex.areas .areas-pin, .ex.areas .areas-hq { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-4px, -50%); white-space: nowrap; pointer-events: none; }
.ex.areas .areas-pin i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #9fd8f5; box-shadow: 0 0 0 2px rgba(7, 15, 34, .7); }
.ex.areas .areas-pin b { font-size: 11.5px; font-weight: 600; color: var(--ex-text-dim); text-shadow: 0 1px 2px rgba(7, 15, 34, .9); }
.ex.areas .areas-hq { z-index: 2; transform: translate(-8px, -50%); }
.ex.areas .areas-hq i { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--ex-green); box-shadow: 0 0 0 4px rgba(7, 15, 34, .8); animation: ex-areas-pulse 2.2s infinite; }
.ex.areas .areas-hq b { padding: 5px 10px; background: var(--ex-green); color: var(--ex-green-ink); font-size: 12.5px; font-weight: 800; font-stretch: 110%; transform: skewX(-10deg); }
@keyframes ex-areas-pulse { 0% { box-shadow: 0 0 0 4px rgba(7, 15, 34, .8), 0 0 0 4px rgba(124, 204, 69, .55); } 70% { box-shadow: 0 0 0 4px rgba(7, 15, 34, .8), 0 0 0 18px rgba(124, 204, 69, 0); } 100% { box-shadow: 0 0 0 4px rgba(7, 15, 34, .8), 0 0 0 4px rgba(124, 204, 69, 0); } }
.ex.areas .areas-map figcaption { margin-top: 12px; font-size: var(--ex-fs-small); color: var(--ex-text-dim); text-align: center; }

/* towns by distance */
.ex.areas .areas-bands-wrap { margin-top: clamp(56px, 7vw, 96px); }
.ex.areas .areas-bands-h { margin-bottom: 28px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 850; font-stretch: 118%; font-style: italic; text-transform: uppercase; line-height: 1; }
.ex.areas .areas-bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ex.areas .areas-band { position: relative; padding: 24px 20px 24px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ex-line); }
.ex.areas .areas-band::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--ex-arc); }
.ex.areas .areas-band h3 { font-size: 20px; font-weight: 850; font-stretch: 115%; font-style: italic; text-transform: uppercase; line-height: 1.1; }
.ex.areas .areas-count { margin: 4px 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ex-green); }
.ex.areas .areas-band ul { display: flex; flex-wrap: wrap; gap: 6px; }
.ex.areas .areas-band li { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 500; color: var(--ex-text); }
.ex.areas .areas-band li span { color: var(--ex-text-dim); }
.ex.areas .areas-source { margin-top: 18px; font-size: 13px; color: var(--ex-text-dim); }

@media (max-width: 1100px) {
	.ex.areas .areas-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.ex.areas .areas-top { grid-template-columns: minmax(0, 1fr); }
	.ex.areas .areas-map { order: -1; }
}
@media (max-width: 640px) {
	.ex.areas { padding-top: calc(var(--ex-hdr) + 24px); }
	.ex.areas .areas-h { font-size: clamp(36px, 11vw, 48px); }
	.ex.areas .areas-pin.has-label:nth-child(n+8) b { display: none; }
	.ex.areas .areas-pin b { font-size: 10px; }
	.ex.areas .areas-bands { grid-template-columns: minmax(0, 1fr); }
	.ex.areas .areas-call .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ex.areas .areas-hq i { animation: none; }
}