diff --git a/css/style.css b/css/style.css
index 60f575e..1a3048d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -238,29 +238,31 @@ body {
 }
 
 /* On narrow screens, switch to horizontal scrolling so all 6 tabs stay
-   on a single row instead of breaking into a tall stack. Placed after
-   the base .nav-btn rules so its specificity-tie-breaker wins. */
+   on a single row instead of breaking into a tall stack. !important is
+   used defensively here — any cached older CSS or future style overrides
+   shouldn't be able to bring back the wrapped layout on phones. */
 @media (max-width: 720px) {
     .main-nav {
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        overflow-y: hidden;
+        flex-wrap: nowrap !important;
+        overflow-x: auto !important;
+        overflow-y: hidden !important;
         scroll-snap-type: x proximity;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
-        gap: 4px;
-        padding: 6px;
+        gap: 4px !important;
+        padding: 6px !important;
     }
     .main-nav::-webkit-scrollbar {
         display: none;
     }
     .nav-btn {
-        flex: 0 0 auto;
-        min-width: auto;
-        white-space: nowrap;
+        flex: 0 0 auto !important;
+        min-width: auto !important;
+        max-width: none !important;
+        white-space: nowrap !important;
         scroll-snap-align: start;
-        padding: 10px 14px;
-        font-size: 0.88rem;
+        padding: 10px 14px !important;
+        font-size: 0.88rem !important;
     }
 }