diff --git a/nextjs-app/components/SchoolHeroMap.module.css b/nextjs-app/components/SchoolHeroMap.module.css
index 99d118b..4d06206 100644
--- a/nextjs-app/components/SchoolHeroMap.module.css
+++ b/nextjs-app/components/SchoolHeroMap.module.css
@@ -1,9 +1,13 @@
-/* Preview band that blends into the hero title; expands to fullscreen. */
+/* Preview band that blends into the hero title; expands to fullscreen.
+   isolation:isolate contains the map + fade + open-button z-indices (which
+   must beat Leaflet's internal panes) so they don't leak out and outrank the
+   header's Compare button. */
 .wrapper {
     position: relative;
     width: 100%;
     height: 210px;
     background: #dfe6e2;
+    isolation: isolate;
 }
 
 @media (max-width: 640px) {
@@ -38,7 +42,9 @@
 .openBtn {
     position: absolute;
     inset: 0;
-    z-index: 3;
+    /* Above Leaflet's marker pane (600) so the whole band — pin included — is
+       one click target. Transparent, so map + pin still show through. */
+    z-index: 800;
     width: 100%;
     height: 100%;
     padding: 0;
@@ -82,7 +88,10 @@
     right: 0;
     bottom: 0;
     top: 33%;
-    z-index: 2;
+    /* Above Leaflet's tile (200) and overlay (400) panes so the gradient is
+       actually visible, but below the marker pane (600) so the pin stays crisp
+       on top of the blend. */
+    z-index: 450;
     pointer-events: none;
     background: linear-gradient(to bottom,
             rgba(255, 255, 255, 0) 0%,