diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index e629008..3d95c42 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -222,7 +222,7 @@ html {
     z-index: 1000;
     background: rgba(255, 255, 255, 0);
     backdrop-filter: blur(0);
-    transition: var(--transition-slow);
+    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
     padding: calc(var(--space-md) + env(safe-area-inset-top, 0)) 0 var(--space-md) 0;
 }
 
@@ -233,6 +233,30 @@ html {
     padding: calc(var(--space-sm) + env(safe-area-inset-top, 0)) 0 var(--space-sm) 0;
 }
 
+@media (max-width: 768px) {
+    .voyage-nav,
+    .voyage-nav.scrolled {
+        padding: calc(var(--space-sm) + env(safe-area-inset-top, 0)) 0 var(--space-sm) 0;
+    }
+}
+
+@supports (padding-top: constant(safe-area-inset-top)) {
+    .voyage-nav {
+        padding: calc(var(--space-md) + constant(safe-area-inset-top)) 0 var(--space-md) 0;
+    }
+
+    .voyage-nav.scrolled {
+        padding: calc(var(--space-sm) + constant(safe-area-inset-top)) 0 var(--space-sm) 0;
+    }
+
+    @media (max-width: 768px) {
+        .voyage-nav,
+        .voyage-nav.scrolled {
+            padding: calc(var(--space-sm) + constant(safe-area-inset-top)) 0 var(--space-sm) 0;
+        }
+    }
+}
+
 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
@@ -425,15 +449,23 @@ html {
     left: 0;
     right: 0;
     /* Pull the background up into the unsafe area */
-    top: calc(-1 * env(safe-area-inset-top));
-    height: calc(100lvh + env(safe-area-inset-top));
+    top: calc(-1 * env(safe-area-inset-top, 0));
+    height: calc(100lvh + env(safe-area-inset-top, 0));
     z-index: -1; /* Behind everything */
 }
 
 /* Fallback for browsers without lvh support */
 @supports not (height: 100lvh) {
     .hero-video-container {
-        height: calc(100vh + env(safe-area-inset-top));
+        height: calc(100vh + env(safe-area-inset-top, 0));
+    }
+}
+
+/* Older iOS fallback that still uses constant() */
+@supports (top: constant(safe-area-inset-top)) {
+    .hero-video-container {
+        top: calc(-1 * constant(safe-area-inset-top));
+        height: calc(100vh + constant(safe-area-inset-top));
     }
 }
 
@@ -1983,4 +2015,4 @@ body.theme-monaco-white .btn-primary-warm,
 body.theme-monaco-white .btn-secondary-warm {
     background: var(--warm-orange);
     color: var(--white);
-}
\ No newline at end of file
+}