/* Service Areas page: neighbourhood list + interactive map (Leaflet + OpenStreetMap, no API key) */
.areas-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:stretch}
.areas-side{display:flex;flex-direction:column;gap:32px}
.areas-side .sec-head{margin:0}
.areas-note{margin:0;max-width:52ch;text-align:left}
.areas-split .pins.wide{grid-template-columns:1fr 1fr;max-width:none;margin:0;gap:20px 24px}
.area-btn{all:unset;display:inline;cursor:pointer;font:inherit;color:inherit;line-height:1.4;border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease)}
.area-btn:hover{border-bottom-color:currentColor}
.area-btn:focus-visible{outline:2px solid var(--forest);outline-offset:4px;border-radius:2px}
.area-list li svg{transition:fill .3s var(--ease),stroke .3s var(--ease)}
.area-list li.is-on .area-btn{color:var(--forest);font-weight:500;border-bottom-color:var(--green)}
.area-list li.is-on svg{stroke:var(--forest);fill:var(--green)}
.areas-map{position:relative;z-index:0;isolation:isolate;height:auto;min-height:460px;border-radius:var(--radius);overflow:hidden;background:#e6eadf;box-shadow:var(--shadow-float)}
.areas-map .leaflet-tile-pane{filter:grayscale(1) sepia(.14) contrast(.9) brightness(1.05)}
.areas-map.leaflet-container{font-family:var(--sans)}
.areas-map .leaflet-control-attribution{font-size:10px;background:rgba(245,242,233,.85)}
.areas-map .leaflet-bar a{color:var(--deep)}
.ghr-pin{background:none;border:0}
.ghr-pin svg{width:28px;height:28px;fill:var(--stone);stroke:var(--forest);stroke-width:1.8;filter:drop-shadow(0 2px 3px rgba(16,45,38,.35));transition:transform .3s var(--spring),fill .3s var(--ease);transform-origin:50% 100%}
.ghr-pin.on svg{fill:var(--green);transform:scale(1.25)}
.leaflet-tooltip.ghr-tip{font:500 13px/1.2 var(--sans);color:var(--deep);background:var(--stone);border:0;border-radius:4px;padding:6px 10px;box-shadow:0 4px 14px -4px rgba(16,45,38,.45)}
.leaflet-tooltip-top.ghr-tip::before{border-top-color:var(--stone)}
/* Office pin: red (Paula 28.10), above the neighbourhood pins */
.ghr-office svg{width:36px;height:36px;fill:#D7262E;stroke:#fff;stroke-width:1.6}
.ghr-office.on svg,.ghr-office svg{transform:none}
.leaflet-tooltip.ghr-tip-office{background:#D7262E;color:#fff;font-weight:500}
.leaflet-tooltip-top.ghr-tip-office::before{border-top-color:#D7262E}
.ghr-popup .leaflet-popup-content{font:400 14px/1.5 var(--sans);color:var(--deep);margin:12px 16px}
.ghr-popup .leaflet-popup-content a{color:var(--forest);font-weight:500}
.ghr-legend{display:flex;flex-direction:column;gap:4px;background:rgba(245,242,233,.94);border-radius:4px;padding:8px 10px;font:400 12px/1.3 var(--sans);color:var(--deep);box-shadow:0 2px 8px -2px rgba(16,45,38,.3)}
.ghr-legend span{display:flex;align-items:center;gap:7px}
.ghr-legend i{width:10px;height:10px;border-radius:50%;flex:none}
.ghr-legend .lg-office{background:#D7262E}
.ghr-legend .lg-area{background:var(--stone);border:1.8px solid var(--forest);box-sizing:border-box}
@media (max-width:900px){.areas-split{grid-template-columns:1fr;gap:32px}.areas-map{height:360px;min-height:0}}
@media (prefers-reduced-motion:reduce){.ghr-pin svg,.area-btn,.area-list li svg{transition:none}}