/* Actual vector map. No photographic layer and no hidden substitute map. */
:root{--blue:#1876c9;--green:#15972e;--orange:#c57930;--pink:#cc64c4;--purple:#8543ac;--red:#c52729;--yellow:#dbce1b;--paper:#fff;--cream:#f0f3f2}
.map-stage{height:calc(100dvh - 0px);min-height:720px;background:#fff;display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:100px minmax(0,1fr) 76px;padding:70px 24px 0;gap:0 24px}
.map-copy{position:static;grid-column:1;grid-row:1;max-width:none;padding:16px 0;pointer-events:auto}.map-copy .eyebrow{display:none}.map-copy h1{font-size:26px;line-height:1.2;margin:0 0 6px}.map-copy h1 br{display:none}.map-copy h1 em{color:inherit}.map-copy p{font-size:14px;max-width:none;line-height:1.4}
.topbar{background:#fff}.brand-copy{font-size:12px}.topbar nav a{font-size:14px}
.map-search{position:static;grid-column:2;grid-row:1;display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-content:center;gap:7px}.map-search input{min-width:0;width:100%;font-size:14px;padding:10px}.map-search button{padding:10px}.add-link{font-size:14px}
.map-canvas{position:relative;inset:auto;grid-column:1;grid-row:2/4;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:auto;min-width:0;min-height:0}
.heb-map{display:block;width:100%;height:100%;min-height:0;max-width:none;transform:none;background:#fff;grid-row:1;overflow:visible}
.heb-map .street{--road:#ddd;cursor:pointer}.heb-map .street.blue{--road:var(--blue)}.heb-map .street.green{--road:var(--green)}.heb-map .street.orange{--road:var(--orange)}.heb-map .street.pink{--road:var(--pink)}.heb-map .street.purple{--road:var(--purple)}.heb-map .street.red{--road:var(--red)}.heb-map .street.yellow{--road:var(--yellow)}
.heb-map .street path{fill:none;filter:none;transition:stroke-width .12s,opacity .12s;stroke-linecap:round;stroke-linejoin:round}.heb-map .street .road-edge{stroke:#34423c;stroke-width:11}.heb-map .street .road-colour{stroke:var(--road);stroke-width:7}.heb-map .street .road-hit{stroke:transparent;stroke-width:25;pointer-events:stroke}.heb-map .street:hover .road-edge,.heb-map .street:focus .road-edge,.heb-map .street.active .road-edge{stroke:#12241b;stroke-width:18}.heb-map .street:hover .road-colour,.heb-map .street:focus .road-colour,.heb-map .street.active .road-colour{stroke-width:12}.heb-map .street:hover .road-hit,.heb-map .street:focus .road-hit,.heb-map .street.active .road-hit{stroke:transparent;stroke-width:25}
.road-label{font:700 12px Arial,sans-serif;fill:#17271f;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none}.landmark-label{font:600 12px Arial,sans-serif;fill:#425a4b;paint-order:stroke;stroke:#fff;stroke-width:3;pointer-events:none}.direction-label{font:11px Arial,sans-serif;fill:#637268;pointer-events:none}.water-label{font:italic 12px Georgia,serif;fill:#548da3;pointer-events:none}.water-line{fill:none;stroke:#b6dce7;stroke-width:12}.canal-line{fill:none;stroke:#8fb6c2;stroke-width:5;stroke-dasharray:10 4}.rail-line{fill:none;stroke:#34423c;stroke-width:4;stroke-dasharray:8 3}.park-shape{fill:#edf4ed;stroke:#cedecd;stroke-width:1.5}.parking-symbol rect{fill:#225b88}.parking-symbol text{fill:#fff;font:700 18px Arial}.doctor-symbol rect{fill:#fff;stroke:#4d7362;stroke-width:2}.doctor-symbol path{stroke:#358969;stroke-width:3}
.market-rainbow>rect:first-child{fill:url(#marketRainbow);stroke:#354e43;stroke-width:1.5}.market-rainbow text{font:bold 14px Arial;fill:#fff;paint-order:stroke;stroke:#263c3d;stroke-width:1;letter-spacing:.04em}.market-rainbow:focus,.market-rainbow:hover{filter:drop-shadow(0 0 4px #34423c)}
.zone-key{position:static;grid-row:2;display:flex;flex-wrap:wrap;justify-content:center;padding:15px 0;gap:8px;max-width:none;background:white}.zone-key button{font-size:14px;border-radius:5px;padding:10px 14px;box-shadow:none;min-height:40px;white-space:normal;max-width:100%;line-height:1.35}
.business-hub text{font:bold 13px "DM Sans",Arial,sans-serif;fill:#fff;paint-order:stroke;stroke:rgba(20,37,29,.5);stroke-width:2px;pointer-events:none;letter-spacing:.02em}.business-hub.small text{font-size:8px;stroke-width:1px;letter-spacing:0}.business-hub:focus rect,.business-hub:hover rect{stroke-width:5px}.business-hub.small:focus rect,.business-hub.small:hover rect{stroke-width:3px}.zone-key .birchcliffe{background:#008a9a}.zone-key .mill{background:#8f315d}.zone-key .town-hall{background:#fff;color:#e000a8;border:2px solid #e000a8}
.map-tools{position:static;grid-column:2;grid-row:3;align-self:center}.map-status{display:none}
.map-canvas .map-tools{position:absolute;top:4px;right:4px;bottom:auto}.map-canvas .map-tools button{font-size:14px;background:#fff}
.mobile-location-tools,.location-button,.location-message{display:none}
#userLocationLayer{pointer-events:none}
.user-location-accuracy{fill:#1876c91c;stroke:#1876c966;stroke-width:2}
.user-location-pulse{fill:#1876c92b;transform-box:fill-box;transform-origin:center;animation:user-location-pulse 1.8s ease-out infinite}
.user-location-ring{fill:#fff;stroke:#1876c9;stroke-width:3}
.user-location-dot{fill:#1876c9}
.user-location-label rect{fill:#14251d;stroke:#fff;stroke-width:2}
.user-location-label text{fill:#fff;font:700 10px "DM Sans",Arial,sans-serif;letter-spacing:.04em}
@keyframes user-location-pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.explore-drawer,.explore-drawer.open{position:static;grid-column:2;grid-row:2;width:auto;max-height:none;min-height:0;transform:none;opacity:1;padding:24px;background:#f7f9f8;border:1px solid #dfe7e2;box-shadow:none;border-radius:14px;overflow:auto}.explore-drawer h2{font-size:30px;line-height:1.1}.explore-drawer .eyebrow{font-size:12px;letter-spacing:.08em}.explore-drawer>p,.drawer-business p,.empty-drawer{font-size:16px}.drawer-close{position:static;float:right;line-height:1}.street-chips button,.drawer-actions a,.drawer-business .meta{font-size:14px}.street-chips button{background:#fff}.street-chips button.active{background:#14251d}.empty-drawer{background:white}.map-stage:has(.explore-drawer.open) .map-copy{max-width:none}.map-stage:has(.explore-drawer.open) .map-search{display:grid!important}.business-stop{display:block;cursor:pointer}.business-stop text{display:none}.business-stop circle{fill:#fff;stroke:#14251d;stroke-width:3}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #216eab;outline-offset:3px}
@media(max-width:1000px){.map-stage{grid-template-columns:minmax(0,1fr) 300px;padding-left:16px;padding-right:16px;gap:0 16px}.map-copy h1{font-size:23px}.map-copy p{font-size:14px}.explore-drawer{padding:18px}.zone-key{gap:5px}.zone-key button{padding:8px;font-size:14px}}
@media(max-width:700px){.map-stage{height:auto;min-height:100dvh;display:flex;flex-direction:column;padding:70px 14px 20px;overflow:visible;gap:12px}.map-copy{padding:14px 0 0}.map-copy h1{font-size:24px}.map-copy p{font-size:14px;max-width:none}.map-search{display:grid!important;width:100%}.map-search input{width:100%}.add-link{text-align:left}.map-canvas{display:grid;grid-template-rows:590px auto;flex:none;overflow:visible}.heb-map{height:590px;width:100%;transform:none}.zone-key{left:auto;right:auto;flex-wrap:wrap;padding:10px 0;justify-content:flex-start;backdrop-filter:none}.explore-drawer,.explore-drawer.open{width:100%;max-height:400px;min-height:200px;transform:none;flex:none}.explore-drawer h2{font-size:27px}.map-tools{display:flex;justify-content:flex-end}.map-stage:has(.explore-drawer.open) .map-search{display:grid!important}}
@media(max-width:700px){
  .map-canvas .map-tools{z-index:4;gap:6px;align-items:center}
  .mobile-location-tools{display:flex;grid-row:2;position:relative;z-index:4;align-items:center;justify-content:flex-start;padding:4px 0 0}
  .map-canvas .mobile-location-tools .location-button{display:inline-block;position:relative;min-height:52px;padding:7px 13px 20px 42px;background:#1876c9;color:#fff;border:3px solid #fff;box-shadow:0 3px 12px #14251d45;font-weight:800;line-height:1.1;text-align:left;animation:find-me-attention 2.2s ease-in-out infinite}
  .map-canvas .mobile-location-tools .location-button::before{content:'';position:absolute;left:14px;top:14px;width:11px;height:11px;border:3px solid currentColor;border-radius:50%;box-shadow:0 0 0 3px #fff4}
  .map-canvas .mobile-location-tools .location-button::after{content:'Show my blue location marker';position:absolute;left:42px;right:10px;bottom:6px;font-size:9px;line-height:1;white-space:nowrap;opacity:.9;font-weight:700}
  .map-canvas .mobile-location-tools .location-button.is-following{background:#14251d;animation:none}
  .map-canvas .mobile-location-tools .location-button.is-following::after{content:'Blue YOU ARE HERE marker active'}
  .mobile-location-tools .location-message:not(:empty){display:block;position:absolute;z-index:4;left:0;right:auto;bottom:calc(100% + 8px);top:auto;width:max-content;max-width:min(260px,80vw);margin:0;padding:7px 10px;border-radius:7px;background:#fff;color:#14251d;box-shadow:0 2px 10px #14251d2b;font-size:12px;line-height:1.3}
}
@keyframes find-me-attention{0%,100%{box-shadow:0 3px 12px #14251d45,0 0 0 0 #1876c966}50%{box-shadow:0 3px 12px #14251d45,0 0 0 8px #1876c900}}
@media(prefers-reduced-motion:reduce){.user-location-pulse{animation:none}.map-canvas .mobile-location-tools .location-button{animation:none}}
/* Full-width map: scale the existing viewBox uniformly without changing geometry. */
.map-stage{height:auto;min-height:100dvh;grid-template-rows:auto auto;overflow:visible}
.map-canvas{grid-column:1/-1;grid-row:2;grid-template-rows:auto auto;overflow:visible;width:100%}
.heb-map{width:100%;height:auto;aspect-ratio:1215/1150;transform:none}
.explore-drawer{display:none}
.explore-drawer.open{display:block;position:fixed;z-index:45;top:88px;right:24px;bottom:auto;left:auto;width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - 112px);min-height:0;transform:none;box-shadow:0 12px 38px #14251d30}
@media(max-width:700px){.map-canvas{grid-template-rows:auto auto}.explore-drawer.open{top:auto;bottom:14px;right:14px;left:14px;width:auto;max-height:60dvh}}

/* Business markers, with a larger invisible click target. */
.heb-map .business-stop .business-dot{fill:#fff;stroke:#14251d;stroke-width:1.5;pointer-events:none}
.heb-map .business-stop .business-hit{fill:transparent;stroke:none;pointer-events:all}
.heb-map .business-stop:focus-visible .business-dot{stroke:#1876c9}
.heb-map .business-stop .business-beacon-pulse,.heb-map .business-stop .business-beacon-ring{opacity:0;pointer-events:none}
.heb-map .business-stop .business-destination-label{display:none;pointer-events:none}
.heb-map .business-stop.is-destination .business-beacon-pulse{opacity:.72;fill:#f5a623;stroke:none;transform-box:fill-box;transform-origin:center;animation:business-destination-pulse 1.35s ease-out infinite}
.heb-map .business-stop.is-destination .business-beacon-ring{opacity:1;fill:#fff5d8;stroke:#d87800;stroke-width:4;filter:drop-shadow(0 0 5px #f5a623)}
.heb-map .business-stop.is-destination .business-dot{fill:#f5a623;stroke:#633500;stroke-width:2.5}
.heb-map .business-stop.is-destination .business-destination-label{display:block}
.heb-map .business-stop.is-destination .business-destination-label rect{fill:#8b4a00;stroke:#fff;stroke-width:2}
.heb-map .business-stop.is-destination .business-destination-label text{display:block;fill:#fff;stroke:none;font:800 12px "DM Sans",Arial,sans-serif;letter-spacing:.04em}
@keyframes business-destination-pulse{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.55);opacity:0}}

.destination-banner{position:absolute;z-index:5;top:4px;left:4px;display:flex;flex-direction:column;max-width:min(280px,70%);padding:8px 12px;border:3px solid #fff;border-radius:10px;background:#8b4a00;color:#fff;box-shadow:0 3px 12px #14251d45}
.destination-banner[hidden]{display:none}
.destination-banner span{font-size:9px;line-height:1.1;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffe2a7}
.destination-banner strong{font-size:14px;line-height:1.25}
.destination-banner:focus-visible{outline:3px solid #14251d;outline-offset:3px}
.drawer-business.is-destination{margin:4px 0;padding:13px 10px 10px;border-radius:10px;background:#fff5d8;outline:3px solid #f5a623;outline-offset:0}
.drawer-actions .business-locate{border:1px solid #9b5600;border-radius:8px;padding:7px 10px;background:#f5a623;color:#3e2300;font-size:11px;font-weight:800;cursor:pointer}
.drawer-actions .business-locate[aria-pressed="true"]{background:#8b4a00;color:#fff;border-color:#8b4a00}
.map-canvas{scroll-margin-top:112px}
@media(max-width:700px){.destination-banner{top:68px;max-width:calc(100% - 8px)}}

@media(prefers-reduced-motion:reduce){.heb-map .business-stop.is-destination .business-beacon-pulse{animation:none;opacity:.45;transform:scale(1)}}

/* Desktop: keep the whole map and its colour controls inside one screen. */
@media(min-width:701px){
  .map-stage{height:100dvh;min-height:620px;grid-template-rows:100px minmax(0,1fr);overflow:hidden}
  .map-canvas{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
  .heb-map{width:100%;height:100%;min-height:0;aspect-ratio:auto}
  .zone-key{padding:8px 0 10px}
  .zone-key button{padding:7px 10px;min-height:34px;font-size:12px}
}

/* Mobile: account for the restored two-row header. */
@media(max-width:700px){
  .map-stage{padding-top:108px}
  .map-canvas{grid-template-rows:auto auto auto}
  .zone-key{grid-row:3}
}

/* Keep Whole town opposite Find me below the map on mobile. */
@media(max-width:700px){
  .map-canvas .mobile-location-tools{grid-column:1}
  .map-canvas .map-tools{position:relative;grid-column:1;grid-row:2;justify-self:end;align-self:center;top:auto;right:auto;bottom:auto;margin:0;z-index:5}
  .map-canvas .map-tools #mapHome{min-height:44px;padding:10px 12px}
}
