diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index db1ab87..9b7ca7b 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -79,10 +79,7 @@ body {
 }
 
 /* Optimize scroll performance */
-.hero-voyage {
-  will-change: scroll-position;
-  contain: layout style paint;
-}
+/* Removed contain property to allow video to extend into safe area */
 
 /* Accessibility: Reduced Motion */
 @media (prefers-reduced-motion: reduce) {
diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 28ae3b2..871db45 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -443,7 +443,7 @@ html {
     overscroll-behavior-y: none;
     -webkit-overflow-scrolling: touch;
     max-width: 100vw !important;
-    contain: layout;
+    /* Removed contain: layout to allow video to extend into safe area */
     /* NO padding here - let container fill entire viewport */
     /* Safe areas will be applied to content only */
 }
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index a31a021..da543d0 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -1,35 +1,37 @@
 <template>
   <section class="hero-voyage" id="heroSection">
-    <!-- Hero video background container - will be absolutely positioned -->
-    <div ref="videoContainer" class="hero-video-container">
-      <!-- White overlay that fades out when video is ready -->
-      <div
-        class="video-white-overlay"
-        :class="{ 'fade-out': videoLoaded }"
-      />
+    <!-- Hero video background teleported to body for proper safe area extension -->
+    <Teleport to="body">
+      <div ref="videoContainer" class="hero-video-container hero-video-teleported">
+        <!-- White overlay that fades out when video is ready -->
+        <div
+          class="video-white-overlay"
+          :class="{ 'fade-out': videoLoaded }"
+        />
 
-      <video
-        ref="videoElement"
-        autoplay
-        loop
-        muted
-        playsinline
-        preload="auto"
-        class="hero-video"
-        :class="{ 'video-loaded': videoLoaded }"
-        @loadeddata="handleVideoLoaded"
-        @canplaythrough="handleVideoLoaded"
-        @play="handleVideoLoaded"
-      >
-        <source
-          src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
-          type="video/mp4"
+        <video
+          ref="videoElement"
+          autoplay
+          loop
+          muted
+          playsinline
+          preload="auto"
+          class="hero-video"
+          :class="{ 'video-loaded': videoLoaded }"
+          @loadeddata="handleVideoLoaded"
+          @canplaythrough="handleVideoLoaded"
+          @play="handleVideoLoaded"
         >
-      </video>
+          <source
+            src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
+            type="video/mp4"
+          >
+        </video>
 
-      <div class="hero-overlay gradient-warm" />
-      <div class="hero-overlay gradient-depth" />
-    </div>
+        <div class="hero-overlay gradient-warm" />
+        <div class="hero-overlay gradient-depth" />
+      </div>
+    </Teleport>
 
     <div class="hero-content" :class="{ 'is-ready': videoLoaded }">
       <div class="hero-main">
@@ -186,6 +188,12 @@ onMounted(() => {
   background: #ffffff;
 }
 
+/* Teleported video container - positioned at body level to bypass DOM containment */
+.hero-video-teleported {
+  position: fixed !important;
+  z-index: 1 !important;
+}
+
 /* Use @supports with max() as recommended by Apple for safe area */
 @supports(padding: max(0px)) {
   .hero-video-container {