fix: implement GPT's iOS notch video extension solution

- Added html/body reset styles (margin:0, padding:0, background:#000)
- Removed ALL overflow:hidden from html, body, hero-voyage, and hero-video-container
- Changed hero-voyage to use overflow:clip (prevents scrollbars while allowing extension)
- Fixed video container positioning:
  - Changed from absolute to fixed positioning
  - Added top: calc(-1 * env(safe-area-inset-top)) to pull video into notch
  - Height: calc(100lvh + env(safe-area-inset-top)) with 100vh fallback
  - Set z-index: -1 to place behind all content
- Updated mobile styles to match desktop implementation
- Removed overflow-x:hidden from all parent elements

This follows GPT's exact checklist for iOS notch video extension.

apps/website/assets/css/main.css

@@ -3,6 +3,13 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Reset styles for iOS notch video extension */
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #000; /* Black background for notch area */
+}
+
 /* Smooth Scroll Behavior and iOS Overscroll Prevention */
 html {
   scroll-behavior: smooth;
@@ -11,8 +18,7 @@ html {
   /* Proper iOS viewport handling */
   height: 100%;
   height: -webkit-fill-available;
-  /* Prevent horizontal scrolling */
+  /* Allow video to extend horizontally */
-  overflow-x: hidden !important;
   max-width: 100vw !important;
 }
 
@@ -23,8 +29,7 @@ body {
   min-height: -webkit-fill-available;
   /* Prevent double-tap zoom on mobile */
   touch-action: manipulation;
-  /* Prevent horizontal scrolling */
+  /* Allow video to extend horizontally */
-  overflow-x: hidden !important;
   max-width: 100vw !important;
   position: relative;
 }
@@ -570,13 +575,11 @@ body {
 @media (max-width: 768px) {
   html {
     font-size: 16px; /* Keep base font size for readability */
-    overflow-x: hidden !important;
     max-width: 100vw !important;
   }
 
   body {
     width: 100%;
-    overflow-x: hidden !important;
     max-width: 100vw !important;
   }
 

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

@@ -200,7 +200,6 @@ body {
     font-family: var(--font-sans);
     color: var(--text-dark);
     background: var(--bg-light);
-    overflow-x: hidden !important;
     max-width: 100vw !important;
     position: relative;
     line-height: 1.6;
@@ -210,7 +209,6 @@ body {
 /* Smooth Scrolling */
 html {
     scroll-behavior: smooth;
-    overflow-x: hidden !important;
     max-width: 100vw !important;
 }
 
@@ -410,13 +408,12 @@ html {
 /* Hero Section */
 .hero-voyage {
     position: relative;
-    height: 100vh; /* Fallback for browsers that don't support newer units */
+    min-height: 100vh; /* Fallback for browsers that don't support newer units */
-    height: -webkit-fill-available; /* iOS Safari - fills available space */
+    min-height: -webkit-fill-available; /* iOS Safari - fills available space */
-    height: 100dvh; /* Dynamic viewport height */
+    min-height: 100dvh; /* Dynamic viewport height */
-    overflow: hidden;
+    overflow: clip; /* Prevents scrollbars while allowing content to extend */
     overscroll-behavior-y: none;
     -webkit-overflow-scrolling: touch;
-    overflow-x: hidden !important;
     max-width: 100vw !important;
     contain: layout;
     /* NO padding here - let container fill entire viewport */
@@ -424,12 +421,20 @@ html {
 }
 
 .hero-video-container {
-    position: absolute;
+    position: fixed;
-    inset: 0;
+    left: 0;
-    width: 100%;
+    right: 0;
-    height: 100%;
+    /* Pull the background up into the unsafe area */
-    overflow: hidden;
+    top: calc(-1 * env(safe-area-inset-top));
-    z-index: 1;
+    height: calc(100lvh + env(safe-area-inset-top));
+    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));
+    }
 }
 
 .hero-video,
@@ -1676,30 +1681,35 @@ html {
     .hero-voyage {
         padding: 0;
         /* iOS-specific height handling */
-        height: 100vh;
-        height: -webkit-fill-available;
-        height: 100dvh;
         min-height: 100vh;
         min-height: -webkit-fill-available;
         min-height: 100dvh;
         /* Video will extend under notch - no padding-top here */
         padding-bottom: env(safe-area-inset-bottom);
-        overflow-x: hidden !important;
+        overflow: clip; /* Allow video to extend while preventing scrollbars */
         max-width: 100vw !important;
     }
 
-    /* Make video container fixed on mobile to fill entire viewport including notch */
+    /* Video extends into notch area on mobile */
     .hero-video-container {
         position: fixed !important;
-        inset: 0;
+        left: 0;
+        right: 0;
+        /* Pull the background up into the unsafe area */
+        top: calc(-1 * env(safe-area-inset-top));
         width: 100vw;
-        height: 100vh;
+        height: calc(100lvh + env(safe-area-inset-top));
-        height: -webkit-fill-available;
+        z-index: -1; /* Behind everything */
-        height: 100dvh;
-        z-index: 0;
         pointer-events: none;
     }
 
+    /* Fallback for browsers without lvh support */
+    @supports not (height: 100lvh) {
+        .hero-video-container {
+            height: calc(100vh + env(safe-area-inset-top));
+        }
+    }
+
     .hero-content {
         /* Adjust padding to account for safe areas on all sides */
         padding: clamp(1rem, 4vw, 2rem);
@@ -1707,7 +1717,6 @@ html {
         padding-bottom: max(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));
-        overflow-x: hidden;
         width: 100%;
         display: flex;
         flex-direction: column;