/* Live Navvo maps embedded into the hero + layers mocks (replaces the fake SVG map
   while keeping the overlay chrome — search pill, ETA card, type chips). */
.mock.nv-has-map { position: relative; }
.mock .nv-realmap { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; pointer-events: none; }
.mock .nv-realmap canvas { border-radius: inherit; }
/* Hide the synthetic SVG map layers once a real map is mounted; keep the overlays. */
.mock.nv-has-map .mk-land,
.mock.nv-has-map .mk-district,
.mock.nv-has-map .mk-park,
.mock.nv-has-map .mk-water,
.mock.nv-has-map .mk-roads,
.mock.nv-has-map .mk-traffic,
.mock.nv-has-map .mk-coverage,
.mock.nv-has-map .mk-route { display: none !important; }
/* Overlays sit above the real map. They are already absolutely positioned by
   landing-v2.css, so only the stacking order needs raising (NOT position). */
.mock.nv-has-map .mk-search,
.mock.nv-has-map .mk-eta,
.mock.nv-has-map .mk-chips { z-index: 3; }

/* Street skin: a real street-level panorama image covers the map (z-index 1 —
   above the basemap canvas, below the chrome chips/search at z-3). The ETA card
   is route-specific, so hide it while showing street view. */
.mock .nv-street-pano {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.mock.nv-street-on .nv-street-pano { opacity: 1; }
.mock.nv-street-on .mk-eta { display: none; }
/* a small "Street View" badge so the panorama reads as a Navvo feature */
.mock.nv-street-on::after {
  content: "Street View"; position: absolute; inset-inline-start: 14px; bottom: 14px; z-index: 3;
  font: 600 11px/1 var(--font-display, system-ui); letter-spacing: .02em;
  color: #fff; background: rgba(8,12,22,.62); border: 1px solid rgba(255,255,255,.22);
  padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}