diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 5e81b26..639ca59 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/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,
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 928fb3a..d77804e 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -237,9 +237,9 @@ onMounted(() => {
   pointer-events: none;
 }
 
-/* Container to prevent horizontal overflow */
+/* Container for hero section */
 .hero-voyage {
-  overflow-x: hidden !important;
+  /* Allow video to extend into safe area - no overflow clipping */
   max-width: 100vw !important;
   position: relative;
   min-height: 100vh;
diff --git a/apps/website/public/safe-area-test.html b/apps/website/public/safe-area-test.html
new file mode 100644
index 0000000..2908867
--- /dev/null
+++ b/apps/website/public/safe-area-test.html
@@ -0,0 +1,157 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Safe Area Test - Harbor Smith</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html, body {
+      margin: 0;
+      background: #000;
+      height: 100%;
+    }
+
+    /* Background that extends under the notch */
+    .bg {
+      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));
+      z-index: -1;
+    }
+
+    /* Fallback for browsers without lvh */
+    @supports not (height: 100lvh) {
+      .bg {
+        height: calc(100vh + env(safe-area-inset-top));
+      }
+    }
+
+    /* Gradient background to visualize extension */
+    .bg::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(180deg,
+        #ff0000 0%,      /* Red at very top (should be in notch) */
+        #ff6600 5%,      /* Orange */
+        #ffcc00 10%,     /* Yellow */
+        #33cc33 20%,     /* Green */
+        #0099ff 40%,     /* Blue */
+        #6633cc 60%,     /* Purple */
+        #cc33cc 80%,     /* Magenta */
+        #000000 100%     /* Black at bottom */
+      );
+    }
+
+    /* Content that stays in safe area */
+    .content {
+      position: relative;
+      min-height: 100dvh;
+      /* Padding to keep content below notch */
+      padding-top: env(safe-area-inset-top);
+      padding-left: env(safe-area-inset-left);
+      padding-right: env(safe-area-inset-right);
+      padding-bottom: env(safe-area-inset-bottom);
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .content h1 {
+      margin: 0;
+      padding: 24px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: 2rem;
+      text-align: center;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    }
+
+    .info {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      padding: 20px;
+      border-radius: 10px;
+      margin: 20px;
+      max-width: 90%;
+    }
+
+    .info p {
+      margin: 10px 0;
+      font-family: monospace;
+      font-size: 14px;
+    }
+
+    .status {
+      padding: 10px;
+      background: rgba(0, 255, 0, 0.2);
+      border-radius: 5px;
+      margin-top: 20px;
+    }
+
+    .error {
+      background: rgba(255, 0, 0, 0.2);
+    }
+  </style>
+</head>
+<body>
+  <div class="bg"></div>
+  <div class="content">
+    <h1>Safe Area Test</h1>
+    <div class="info">
+      <p>If the gradient extends into the notch/Dynamic Island:</p>
+      <p>✅ You should see RED color in the notch area</p>
+      <p>✅ This text should be BELOW the notch</p>
+      <p>✅ The gradient should fill the entire screen</p>
+      <p style="margin-top: 20px;">Debug Info:</p>
+      <p>Safe Area Top: <span id="safeTop">checking...</span></p>
+      <p>Viewport Height: <span id="viewHeight">checking...</span></p>
+      <p>Screen Height: <span id="screenHeight">checking...</span></p>
+    </div>
+    <div class="status" id="status">
+      Testing safe area extension...
+    </div>
+  </div>
+
+  <script>
+    // Display safe area values for debugging
+    function updateDebugInfo() {
+      const safeTop = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)') || '0px';
+      const viewHeight = window.innerHeight + 'px';
+      const screenHeight = screen.height + 'px';
+
+      document.getElementById('safeTop').textContent = safeTop;
+      document.getElementById('viewHeight').textContent = viewHeight;
+      document.getElementById('screenHeight').textContent = screenHeight;
+
+      // Check if safe area is working
+      const computedTop = window.getComputedStyle(document.documentElement).getPropertyValue('padding-top');
+      const statusEl = document.getElementById('status');
+
+      if (parseInt(computedTop) > 0) {
+        statusEl.textContent = '✅ Safe area is active! Video should extend into notch.';
+        statusEl.classList.remove('error');
+      } else {
+        statusEl.textContent = '⚠️ Safe area not detected. Make sure viewport-fit=cover is set.';
+        statusEl.classList.add('error');
+      }
+    }
+
+    // Update on load and orientation change
+    window.addEventListener('load', updateDebugInfo);
+    window.addEventListener('orientationchange', updateDebugInfo);
+    window.addEventListener('resize', updateDebugInfo);
+  </script>
+</body>
+</html>
\ No newline at end of file
