fix: comprehensive safe area implementation fixes for iOS video display

- Remove overflow-x: hidden from HeroSection.vue that was clipping video
- Delete duplicate .hero-video-container styles from voyage-layout.css
- Fix navigation to use env() directly instead of CSS variables
- Remove deprecated constant() syntax
- Add safe-area-test.html for testing safe area extension

The video should now properly extend under the iOS notch/Dynamic Island
while keeping content within safe areas.

apps/website/assets/css/voyage-layout.css

@@ -229,10 +229,13 @@ html {
     background: rgba(255, 255, 255, 0);
     backdrop-filter: blur(0);
     transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
-    --nav-safe-area-top: var(--safe-area-cover-top);
     --nav-padding-top-base: var(--space-md);
     --nav-padding-bottom-base: var(--space-md);
-    padding: calc(var(--nav-padding-top-base) + var(--nav-safe-area-top)) 0 var(--nav-padding-bottom-base) 0;
+    /* Use env() directly for safe area padding */
+    padding-top: calc(var(--nav-padding-top-base) + env(safe-area-inset-top));
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: var(--nav-padding-bottom-base);
 }
 
 /* iOS-specific navigation stabilization to prevent bobbing */
@@ -242,14 +245,7 @@ html {
     }
 }
 
-@supports (top: constant(safe-area-inset-top)) {
-    :root {
-        --safe-area-top: constant(safe-area-inset-top);
-        --safe-area-bottom: constant(safe-area-inset-bottom);
-        --safe-area-cover-top: constant(safe-area-inset-top);
-        --safe-area-cover-bottom: constant(safe-area-inset-bottom);
-    }
-}
+/* Deprecated constant() syntax removed - using env() directly */
 
 .voyage-nav.scrolled {
     background: rgba(255, 255, 255, 0.95);
@@ -452,26 +448,7 @@ html {
     /* Safe areas will be applied to content only */
 }
 
-.hero-video-container {
-    position: fixed;
-    left: 0;
-    right: 0;
-    /* Pull up by safe-area to extend under notch */
-    top: calc(-1 * env(safe-area-inset-top));
-    /* Grow height to compensate */
-    height: calc(100lvh + env(safe-area-inset-top));
-    transform: translate3d(0, var(--parallax-offset, 0px), 0);
-    background: #ffffff;
-    z-index: 0; /* Behind content */
-    pointer-events: none;
-}
-
-/* Fallback for browsers without lvh support */
-@supports not (height: 100lvh) {
-    .hero-video-container {
-        height: calc(100vh + env(safe-area-inset-top));
-    }
-}
+/* Video container styles moved to HeroSection.vue component for better encapsulation */
 
 .hero-video,
 .hero-image-fallback,