diff --git a/app/globals.css b/app/globals.css
index 8b98515..0b4c94b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -7,6 +7,7 @@ html {
   /* Allow content to extend into safe areas */
   min-height: 100vh;
   min-height: -webkit-fill-available;
+  background: white; /* Explicit white fallback */
 }
 
 body {
@@ -14,6 +15,28 @@ body {
   padding: 0;
   min-height: 100vh;
   min-height: -webkit-fill-available;
-  /* Transparent background to allow video to show through */
-  background: transparent;
+  background: white; /* Explicit white fallback */
+  overflow-x: hidden; /* Prevent horizontal scroll */
+}
+
+/* Full-bleed video that extends into safe areas */
+.full-bleed-video-container {
+  position: absolute;
+  /* Extend beyond viewport into safe areas using negative margins */
+  top: calc(env(safe-area-inset-top, 0px) * -1);
+  left: calc(env(safe-area-inset-left, 0px) * -1);
+  right: calc(env(safe-area-inset-right, 0px) * -1);
+  bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
+  width: calc(100% + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
+  height: calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
+  background: white; /* White fallback when video doesn't load */
+}
+
+/* Safe area padding for content */
+.safe-area-padding-top {
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+.safe-area-padding-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
\ No newline at end of file
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index f41b590..fbac31b 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -7,13 +7,6 @@ export default function HeroSection() {
   const [videoLoaded, setVideoLoaded] = useState(false)
 
   useEffect(() => {
-    // Detect iOS and set body position for safe area support
-    const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent)
-    if (isIOS) {
-      document.body.style.position = 'fixed'
-      document.body.style.width = '100%'
-    }
-
     // Handle video loading with fallback
     const video = document.getElementById('hero-video') as HTMLVideoElement
     if (video) {
@@ -46,8 +39,8 @@ export default function HeroSection() {
 
   return (
     <section className="relative h-screen w-full overflow-hidden">
-      {/* Video Background */}
-      <div className="absolute inset-0 w-full h-full">
+      {/* Video Background - Full bleed into safe areas */}
+      <div className="full-bleed-video-container">
         <video
           id="hero-video"
           autoPlay
@@ -66,8 +59,8 @@ export default function HeroSection() {
       {/* Overlay - Separate from video container */}
       <div className="absolute inset-0 bg-gradient-to-b from-harbor-blue/30 via-harbor-blue/50 to-harbor-blue/70 z-[1]" />
 
-      {/* Hero Content */}
-      <div className={`relative z-10 flex h-full flex-col items-center justify-start pt-24 md:justify-center md:pt-0 px-4 text-white transition-opacity duration-1000 ${videoLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      {/* Hero Content - Respect safe areas */}
+      <div className={`relative z-10 flex h-full flex-col items-center justify-start pt-24 md:justify-center md:pt-0 px-4 text-white transition-opacity duration-1000 safe-area-padding-top ${videoLoaded ? 'opacity-100' : 'opacity-0'}`}>
         <div className="max-w-3xl text-center">
           {/* Logo - Responsive sizing */}
           <img