.coverage-layout,
.pricing-grid,
.review-grid,
.evidence-grid { display: grid; gap: 18px; }
.coverage-layout { grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.coverage-panel,
.pricing-card,
.review-card,
.evidence-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.coverage-panel { padding: 28px; }
.coverage-panel h2 { margin-bottom: 12px; }
.coverage-map { min-height: 100%; padding: 30px; border-radius: var(--radius); background: radial-gradient(circle at 28% 22%, rgba(201,146,94,.28), transparent 25%), linear-gradient(145deg, #dfe9e2, #b9d0c2); position: relative; overflow: hidden; }
.coverage-map::before, .coverage-map::after { content: ""; position: absolute; border: 1px solid rgba(22,55,45,.22); border-radius: 48% 52% 44% 56%; transform: rotate(-17deg); }
.coverage-map::before { inset: 16% 12% 18% 15%; }
.coverage-map::after { inset: 28% 22% 28% 28%; }
.coverage-map h2, .coverage-map p, .coverage-pins { position: relative; z-index: 1; }
.coverage-pins { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.coverage-pin { padding: 8px 11px; border-radius: 999px; background: rgba(255,253,249,.88); border: 1px solid rgba(22,55,45,.18); color: var(--green); font-size: .86rem; font-weight: 720; }
.demo-label { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: #fff1df; color: #7a4d29; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.pricing-grid { grid-template-columns: repeat(4, 1fr); }
.pricing-card { padding: 24px; display: flex; flex-direction: column; min-width: 0; }
.pricing-card h3 { margin-top: 16px; }
.price-range { color: var(--green); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 820; letter-spacing: -.04em; margin: 8px 0 10px; }
.pricing-card p { color: var(--muted); margin: 0; }
.pricing-card .unit { margin-top: auto; padding-top: 18px; color: var(--earth); font-size: .86rem; font-weight: 760; }
.price-notice { padding: 20px 22px; border-left: 4px solid var(--earth); background: #fff9f1; color: #5e554b; }
.price-notice strong { color: var(--ink); }
.review-grid { grid-template-columns: repeat(2, 1fr); }
.review-card { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.review-card blockquote { margin: 0; color: var(--ink); font-size: 1.02rem; }
.review-card footer { margin-top: auto; color: var(--muted); font-size: .88rem; }
.review-card .demo-label { align-self: flex-start; }
.evidence-grid { grid-template-columns: repeat(4, 1fr); }
.evidence-card { padding: 20px; }
.evidence-card h3 { font-size: 1.05rem; }
.evidence-card p { color: var(--muted); margin: 0; font-size: .9rem; }
.placeholder { color: var(--earth); font-weight: 760; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.source-list { display: grid; gap: 12px; padding-left: 20px; }
.source-list li { color: var(--muted); }
.areas-explorer { display: grid; grid-template-columns: 1.55fr .75fr; gap: 24px; align-items: start; }
.areas-map-card, .areas-list-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 14px 32px rgba(17,39,31,.05); }
.areas-card-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 18px; }
.areas-card-head h2, .areas-list-card h2 { margin-bottom: 8px; }
.areas-card-head p { color: var(--muted); font-size: .9rem; max-width: 190px; margin: 0; }
.borough-map { min-height: 500px; position: relative; overflow: hidden; isolation: isolate; border-radius: 15px; background: #eef4f0; background-image: linear-gradient(rgba(255,255,255,.75) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.75) 1px, transparent 1px); background-size: 25% 25%; }
.borough-map::before { content: "SOUTH LONDON"; position: absolute; inset: 24px auto auto 24px; color: #9eb3aa; font-size: .72rem; letter-spacing: .14em; font-weight: 850; z-index: 2; }
.map-region { position: absolute; border: 2px solid rgba(255,255,255,.9); background: #d4dfdb; transform: rotate(-16deg); z-index: 0; }
.map-region-north { width: 52%; height: 32%; left: 22%; top: 8%; border-radius: 48% 58% 35% 62%; }
.map-region-west { width: 42%; height: 44%; left: 8%; top: 27%; border-radius: 58% 34% 62% 38%; }
.map-region-east { width: 43%; height: 47%; right: 7%; top: 26%; border-radius: 35% 62% 44% 56%; }
.map-region-south { width: 51%; height: 46%; left: 26%; bottom: 5%; border-radius: 42% 56% 58% 38%; background: #b6d4ca; }
.map-borough { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 3; border: 2px solid rgba(255,255,255,.9); border-radius: 999px; padding: 8px 10px; background: #35a4a4; color: #fff; font: inherit; font-size: .75rem; font-weight: 800; box-shadow: 0 4px 10px rgba(22,55,45,.14); }
.map-borough.is-nearby { background: #71c9cf; color: #123832; }
.map-borough:hover, .map-borough.is-selected { outline: 3px solid #d99b61; outline-offset: 2px; transform: translate(-50%, -50%) scale(1.05); }
.area-status { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--earth); background: #fff8ee; display: flex; justify-content: space-between; gap: 12px; }
.area-status span { color: var(--muted); }
.map-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; color: var(--muted); font-size: .78rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #35a4a4; }
.legend-nearby { background: #71c9cf; }.legend-outside { background: #d4dfdb; }
.areas-list-card { position: sticky; top: 104px; }
.areas-list { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
.areas-list button { text-align: left; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 14px 8px; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 720; }
.areas-list button:hover, .areas-list button.is-selected { color: var(--green-2); background: #f1f6f2; }
@media (max-width: 980px) { .coverage-layout { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: repeat(2, 1fr); } .evidence-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .areas-explorer { grid-template-columns: 1fr; } .areas-list-card { position: static; } }
@media (max-width: 700px) { .pricing-grid, .review-grid, .evidence-grid { grid-template-columns: 1fr; } .coverage-panel, .coverage-map, .pricing-card, .review-card, .evidence-card, .areas-map-card, .areas-list-card { padding: 20px; } .areas-card-head { display: block; } .areas-card-head p { max-width: none; margin-top: 8px; } .borough-map { min-height: 420px; } .map-borough { font-size: .68rem; padding: 7px 8px; } .area-status { display: block; } .area-status span { display: block; margin-top: 3px; } }

/* Realistic borough map adapted from the plumber demo's inline SVG pattern. */
.map-wrap { overflow: hidden; border-radius: 15px; background: #eef4f0; padding: 10px; }
.borough-map.borough-map-svg { display: block; width: 100%; min-height: 0; height: auto; overflow: visible; background: transparent; background-image: none; }
.borough-map-svg .borough { cursor: pointer; outline: none; }
.borough-map-svg .borough path { stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: transform .18s ease, fill .18s ease, filter .18s ease; transform-box: fill-box; transform-origin: center; }
.borough-map-svg .borough-core path { fill: var(--green-2); }
.borough-map-svg .borough-service path { fill: #45aaa0; }
.borough-map-svg .borough-neutral path { fill: #d9e1df; }
.borough-map-svg .borough:hover path, .borough-map-svg .borough:focus path, .borough-map-svg .borough.selected path { transform: scale(1.018); filter: drop-shadow(0 5px 5px rgba(17,39,31,.18)); }
.borough-map-svg .borough-core:hover path, .borough-map-svg .borough-core:focus path, .borough-map-svg .borough-core.selected path { fill: var(--green); }
.borough-map-svg .borough-service:hover path, .borough-map-svg .borough-service:focus path, .borough-map-svg .borough-service.selected path { fill: #45aaa0; }
.borough-map-svg .borough-neutral:hover path, .borough-map-svg .borough-neutral:focus path, .borough-map-svg .borough-neutral.selected path { fill: #b9c9c6; }
.borough-map-svg .borough-label { pointer-events: none; text-anchor: middle; dominant-baseline: middle; fill: var(--ink); font-size: 8px; font-weight: 800; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 2.5px; stroke-linejoin: round; }
.borough-map-svg .borough-neutral .borough-label { fill: #53655b; }
.borough-map-svg .thames { fill: none; stroke: #9bcbdc; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; opacity: .95; }
.borough-map-svg .context-label { fill: #7f968d; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-anchor: middle; opacity: .72; }
.map-legend .legend-core { background: var(--green-2); }
.map-legend .legend-nearby { background: #45aaa0; }
.map-legend .legend-outside { background: #d4dfdb; }
@media (max-width: 700px) { .map-wrap { padding: 6px; } .borough-map-svg .borough-label { font-size: 7px; } }