diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 9edd27e..7de1fec 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -37,8 +37,8 @@
     /* Safe area helpers */
     --safe-area-top: env(safe-area-inset-top, 0px);
     --safe-area-bottom: env(safe-area-inset-bottom, 0px);
-    --initial-safe-area-top: 0px;
-    --safe-area-cover-top: max(var(--safe-area-top), var(--initial-safe-area-top));
+    --safe-area-cover-top: env(safe-area-max-inset-top, env(safe-area-inset-top, 0px));
+    --safe-area-cover-bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
 }
 
 
@@ -239,6 +239,8 @@ html {
     :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);
     }
 }
 
@@ -496,15 +498,16 @@ html {
     position: relative;
     z-index: 10;
     height: 100%;
+    min-height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     gap: var(--space-md);
     text-align: center;
     /* Apply safe area padding HERE to protect content from being obscured */
-    padding: calc(max(var(--safe-area-cover-top), var(--space-lg))) var(--space-md) calc(max(var(--safe-area-bottom), var(--space-lg)) + var(--space-sm));
+    padding: calc(max(var(--safe-area-cover-top), clamp(6rem, 14vh, 10rem))) var(--space-md) calc(max(var(--safe-area-cover-bottom), clamp(5rem, 12vh, 8rem)) + var(--space-sm));
 }
 
 .trust-badge {
@@ -1724,25 +1727,25 @@ html {
         left: 0;
         right: 0;
         /* Pull the background up into the unsafe area */
-        top: calc(-1 * env(safe-area-inset-top));
+        top: calc(-1 * env(safe-area-max-inset-top, env(safe-area-inset-top)));
         width: 100vw;
-        height: calc(100lvh + env(safe-area-inset-top));
-        z-index: -1; /* Behind everything */
+        height: calc(100lvh + env(safe-area-max-inset-top, env(safe-area-inset-top)));
+        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));
+            height: calc(100vh + env(safe-area-max-inset-top, env(safe-area-inset-top)));
         }
     }
 
     .hero-content {
         /* Adjust padding to account for safe areas on all sides */
         padding: clamp(1rem, 4vw, 2rem);
-        padding-top: max(env(safe-area-inset-top, 0), clamp(2rem, 4vw, 3rem));
-        padding-bottom: max(env(safe-area-inset-bottom, 0), clamp(1rem, 4vw, 2rem));
+        padding-top: max(env(safe-area-max-inset-top, env(safe-area-inset-top, 0)), clamp(2rem, 4vw, 3rem));
+        padding-bottom: max(env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0)), clamp(1rem, 4vw, 2rem));
         padding-left: max(env(safe-area-inset-left, 0), clamp(1rem, 3vw, 2rem));
         padding-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem));
         width: 100%;
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index b0211bb..bf17430 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -209,7 +209,7 @@ onMounted(() => {
 
 .scroll-to-explore {
   margin-top: auto;
-  margin-bottom: var(--space-md);
+  margin-bottom: calc(max(var(--safe-area-cover-bottom, 0px), var(--space-lg)));
   display: flex;
   flex-direction: column;
   align-items: center;