diff --git a/styles/navigation/nav-mobile-accordion.css b/styles/navigation/nav-mobile-accordion.css
index 9481544..4e2498f 100644
--- a/styles/navigation/nav-mobile-accordion.css
+++ b/styles/navigation/nav-mobile-accordion.css
@@ -7,46 +7,69 @@
 
 /* Mobile accordion navigation */
 @media screen and (max-width: 62.5rem) {
-  .nav-main {
-    .nav-main__toggle {
-      /* display */
-      @apply text-white p-3;
-    }
-
-    .menu-vdi {
-      @apply flex-col bg-white w-[95%] right-0 z-10 py-6;
-      @apply absolute hidden; /* Hidden by default */
-      top: var(--hgtHeader);
-      min-height: calc(100vh - var(--hgtHeader));
-
-      .menu-vdi__submenu {
-        @apply py-2 px-7 flex-col;
-      }
-
-      .menu-vdi__item {
-        a,
-        button {
-          /* text */
-          @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
-          /* spacing & display */
-          @apply block w-full p-4;
-          /* interaction */
-          @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+    .nav-main {
+        .nav-main__toggle {
+            /* display */
+            @apply text-white p-3;
         }
 
-        a {
-          @apply block w-full;
+        .menu-vdi {
+            @apply relative right-0 py-8 flex flex-col;
+            @apply absolute hidden; /* Hidden by default */
+
+            /* Allow the menu itself to scroll when content overflows the viewport */
+            overflow-y: auto;
+            overscroll-behavior: contain;
+
+            background: var(--color-cwc-blue-02);
+            color: var(--color-white);
+            /* Cap the menu height to the visible viewport area so overflowing items
+               scroll inside the menu instead of letting the menu grow taller
+               than the screen. */
+            max-height: calc(100vh - var(--hgtHeader));
+            top: var(--hgtHeader);
+            width: 95%;
+            z-index: 100;
+
+            &, ul.menu-vdi {
+                list-style: none;
+                padding-left: 0;
+                margin: 0;
+            }
+
+            .menu-vdi__submenu { @apply py-2 px-7 flex-col; }
+
+            .menu-vdi__item {
+                list-style: none;
+
+                a, button {
+                    /* text */
+                    @apply font-bold text-20px text-white hover:underline leading-snug;
+
+                    /* spacing & display */
+                    @apply block w-full p-4;
+
+                    /* interaction */
+                    @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+                }
+
+                a { @apply block w-full; }
+
+                button { @apply flex w-full justify-between; }
+            }
         }
 
-        button {
-          @apply flex w-full justify-between;
-        }
-      }
+        /* Show menu when toggle button is expanded */
+        .nav-main__toggle[aria-expanded="true"] ~ .menu-vdi:not(.menu-vdi--sliding) { @apply !flex; /* Use !important to override hidden */ }
     }
 
-    /* Show menu when toggle button is expanded */
-    .nav-main__toggle[aria-expanded="true"] ~ .menu-vdi:not(.menu-vdi--sliding) {
-      @apply !flex; /* Use !important to override hidden */
+    /* Lock the page from scrolling while the menu is open so the touch-scroll
+       gesture only scrolls the menu (or doesn't scroll at all if the menu
+       fits). Also stop the layout from jumping when the scrollbar disappears. */
+    html:has(.nav-main__toggle[aria-expanded="true"]) body,
+    body:has(.nav-main__toggle[aria-expanded="true"]) {
+        overflow: hidden;
+        overscroll-behavior: contain;
+        touch-action: none;
     }
-  }
-}
\ No newline at end of file
+}