diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 639ca59..28ae3b2 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -490,11 +490,11 @@ html {
     align-items: center;
     justify-items: center;
     text-align: center;
-    /* Use env() directly for safe area padding */
-    padding-top: calc(env(safe-area-inset-top) + clamp(2rem, 8vh, 5rem));
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
-    padding-bottom: calc(env(safe-area-inset-bottom) + clamp(1.25rem, 3vh, 2.5rem));
+    /* Safari-compatible safe area padding with fallbacks */
+    padding-top: calc(max(env(safe-area-inset-top), 44px) + clamp(2rem, 8vh, 5rem));
+    padding-left: max(env(safe-area-inset-left), 0px);
+    padding-right: max(env(safe-area-inset-right), 0px);
+    padding-bottom: calc(max(env(safe-area-inset-bottom), 0px) + clamp(1.25rem, 3vh, 2.5rem));
     row-gap: clamp(2rem, 6vh, 4rem);
 }
 
@@ -505,6 +505,14 @@ html {
     }
 }
 
+/* iOS-specific padding for hero content */
+@supports (-webkit-touch-callout: none) {
+    .hero-content {
+        /* Use larger fallback for Dynamic Island devices */
+        padding-top: calc(max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px) + clamp(2rem, 8vh, 5rem));
+    }
+}
+
 .hero-main {
     width: min(720px, 100%);
     margin: 0 auto;
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index d77804e..a31a021 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -172,32 +172,59 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container - proper safe area implementation */
+/* Hero video container - Safari-compatible safe area implementation */
 .hero-video-container {
   position: fixed;
   left: 0;
   right: 0;
   width: 100vw;
-  /* 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));
+  /* Default fallback for devices without notch */
+  top: 0;
+  height: 100vh;
   z-index: 1;
   pointer-events: none;
   background: #ffffff;
 }
 
-/* Fallback for browsers without lvh */
-@supports not (height: 100lvh) {
+/* Use @supports with max() as recommended by Apple for safe area */
+@supports(padding: max(0px)) {
   .hero-video-container {
-    height: calc(100vh + env(safe-area-inset-top));
+    /* Use max() to provide fallback when env() returns 0 (Safari bug) */
+    top: calc(-1 * max(env(safe-area-inset-top), 20px));
+    height: calc(100vh + max(env(safe-area-inset-top), 20px));
   }
 }
 
-/* Additional support for browsers with dvh */
+/* iOS-specific fallback using -webkit-touch-callout detection */
+@supports (-webkit-touch-callout: none) {
+  .hero-video-container {
+    /* Hardcoded fallback for iPhone 14/15 Pro Dynamic Island (59px) */
+    /* and iPhone X-13 notch (44px) - uses larger value for safety */
+    top: -59px;
+    height: calc(100vh + 59px);
+  }
+
+  /* Try env() with both modern and legacy syntax */
+  @supports(padding: max(0px)) {
+    .hero-video-container {
+      top: calc(-1 * max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px));
+      height: calc(100vh + max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px));
+    }
+  }
+}
+
+/* Support for dynamic viewport height */
 @supports (height: 100dvh) {
   .hero-video-container {
-    height: calc(100dvh + env(safe-area-inset-top));
+    height: calc(100dvh + max(env(safe-area-inset-top), 59px));
+  }
+}
+
+/* When in standalone PWA mode, env() typically works better */
+@media screen and (display-mode: standalone) {
+  .hero-video-container {
+    top: calc(-1 * env(safe-area-inset-top));
+    height: calc(100vh + env(safe-area-inset-top));
   }
 }
 
diff --git a/apps/website/public/safe-area-fix-test.html b/apps/website/public/safe-area-fix-test.html
new file mode 100644
index 0000000..90ef89c
--- /dev/null
+++ b/apps/website/public/safe-area-fix-test.html
@@ -0,0 +1,267 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <title>Safe Area Fix Test - Harbor Smith</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+      background: #000;
+      height: 100%;
+    }
+
+    /* Use @supports as recommended by Apple */
+    @supports(padding: max(0px)) {
+      .bg {
+        position: fixed;
+        left: 0;
+        right: 0;
+        width: 100%;
+        /* Use max() function to ensure fallback */
+        top: calc(-1 * max(env(safe-area-inset-top), 20px));
+        /* Safari-specific: use constant as fallback */
+        top: calc(-1 * max(constant(safe-area-inset-top), env(safe-area-inset-top), 20px));
+        height: calc(100vh + max(env(safe-area-inset-top), 20px));
+        height: calc(100vh + max(constant(safe-area-inset-top), env(safe-area-inset-top), 20px));
+        z-index: -1;
+      }
+    }
+
+    /* Fallback for browsers without @supports */
+    .bg {
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: -44px; /* Standard notch height fallback */
+      width: 100%;
+      height: calc(100vh + 44px);
+      z-index: -1;
+    }
+
+    /* iOS-specific using -webkit-touch-callout */
+    @supports (-webkit-touch-callout: none) {
+      .bg {
+        /* For iPhone 14/15 Pro with Dynamic Island (59px) */
+        top: -59px;
+        height: calc(100vh + 59px);
+      }
+    }
+
+    /* Gradient background */
+    .bg::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(180deg,
+        #ff0000 0%,      /* Red at very top */
+        #ff6600 10%,     /* Orange */
+        #ffcc00 20%,     /* Yellow */
+        #33cc33 30%,     /* Green */
+        #0099ff 50%,     /* Blue */
+        #6633cc 70%,     /* Purple */
+        #cc33cc 90%,     /* Magenta */
+        #000000 100%     /* Black at bottom */
+      );
+    }
+
+    /* Content with proper safe area padding using max() */
+    @supports(padding: max(0px)) {
+      .content {
+        position: relative;
+        min-height: 100vh;
+        padding-top: max(env(safe-area-inset-top), 44px);
+        padding-top: max(constant(safe-area-inset-top), env(safe-area-inset-top), 44px);
+        padding-left: max(env(safe-area-inset-left), 0px);
+        padding-right: max(env(safe-area-inset-right), 0px);
+        padding-bottom: max(env(safe-area-inset-bottom), 0px);
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    /* Fallback content padding */
+    .content {
+      position: relative;
+      min-height: 100vh;
+      padding-top: 44px;
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: 0;
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @supports (-webkit-touch-callout: none) {
+      .content {
+        padding-top: 59px; /* Dynamic Island */
+      }
+    }
+
+    h1 {
+      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);
+      margin-bottom: 20px;
+    }
+
+    .info {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      -webkit-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;
+    }
+
+    .success {
+      color: #4CAF50;
+    }
+
+    .warning {
+      color: #FFC107;
+    }
+
+    .error {
+      color: #F44336;
+    }
+
+    /* Force fullscreen for better safe area support */
+    @media screen and (display-mode: standalone) {
+      .bg {
+        top: calc(-1 * env(safe-area-inset-top));
+        height: calc(100vh + env(safe-area-inset-top));
+      }
+
+      .content {
+        padding-top: env(safe-area-inset-top);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="bg"></div>
+  <div class="content">
+    <h1>Safe Area Fix Test v2</h1>
+    <div class="info">
+      <p class="success">✅ Using hardcoded fallback: -59px for Dynamic Island</p>
+      <p class="success">✅ Using max() function for reliable fallbacks</p>
+      <p class="success">✅ Supporting both env() and constant()</p>
+      <p class="warning">⚠️ Safari bug: env() returns 0 in portrait mode</p>
+
+      <p style="margin-top: 20px; font-weight: bold;">Visual Test:</p>
+      <p>🔴 Red should be visible in the notch area</p>
+      <p>📝 This text should be below the notch</p>
+
+      <p style="margin-top: 20px; font-weight: bold;">Debug Values:</p>
+      <p>Safe Area Top: <span id="safeTop">checking...</span></p>
+      <p>Computed Top Padding: <span id="computedPadding">checking...</span></p>
+      <p>Viewport Height: <span id="viewHeight">checking...</span></p>
+      <p>User Agent: <span id="userAgent">checking...</span></p>
+
+      <p style="margin-top: 20px; font-weight: bold;">Workaround Status:</p>
+      <p id="workaround" class="warning">Using hardcoded fallback values</p>
+    </div>
+
+    <div class="info" style="margin-top: 20px;">
+      <p style="font-weight: bold;">Try These Tests:</p>
+      <p>1. Rotate to landscape and back to portrait</p>
+      <p>2. Add to Home Screen for PWA mode</p>
+      <p>3. Check if red gradient extends to top</p>
+    </div>
+  </div>
+
+  <script>
+    function detectDevice() {
+      const ua = navigator.userAgent;
+      const isIPhone = /iPhone/.test(ua);
+      const isIPad = /iPad/.test(ua);
+      const isIOS = isIPhone || isIPad;
+
+      // Detect specific iPhone models with notch/Dynamic Island
+      const hasNotch = isIPhone && screen.height >= 812; // iPhone X and later
+      const hasDynamicIsland = isIPhone && screen.height >= 852; // iPhone 14 Pro and later
+
+      return {
+        isIOS,
+        isIPhone,
+        hasNotch,
+        hasDynamicIsland,
+        screenHeight: screen.height,
+        screenWidth: screen.width
+      };
+    }
+
+    function updateDebugInfo() {
+      const device = detectDevice();
+      const styles = getComputedStyle(document.documentElement);
+
+      // Try to get safe area values
+      let safeTop = styles.getPropertyValue('padding-top') || '0px';
+
+      // Get computed padding on content
+      const content = document.querySelector('.content');
+      const computedPadding = window.getComputedStyle(content).paddingTop;
+
+      document.getElementById('safeTop').textContent = safeTop || '0px (Safari bug)';
+      document.getElementById('computedPadding').textContent = computedPadding;
+      document.getElementById('viewHeight').textContent = window.innerHeight + 'px';
+      document.getElementById('userAgent').textContent = device.isIPhone ?
+        (device.hasDynamicIsland ? 'iPhone 14/15 Pro' :
+         device.hasNotch ? 'iPhone with Notch' : 'iPhone') :
+        'Not iPhone';
+
+      // Update workaround status
+      const workaroundEl = document.getElementById('workaround');
+      if (parseInt(safeTop) > 0) {
+        workaroundEl.textContent = '✅ Safe area is working!';
+        workaroundEl.className = 'success';
+      } else if (device.hasDynamicIsland) {
+        workaroundEl.textContent = '⚠️ Using 59px fallback for Dynamic Island';
+        workaroundEl.className = 'warning';
+      } else if (device.hasNotch) {
+        workaroundEl.textContent = '⚠️ Using 44px fallback for notch';
+        workaroundEl.className = 'warning';
+      }
+    }
+
+    // Update on load and orientation change
+    window.addEventListener('load', updateDebugInfo);
+    window.addEventListener('orientationchange', () => {
+      setTimeout(updateDebugInfo, 100);
+    });
+    window.addEventListener('resize', updateDebugInfo);
+
+    // Check for standalone mode
+    if (window.navigator.standalone) {
+      document.body.classList.add('standalone');
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file