fix: critical mobile iOS issues - scrolling and safe areas

CRITICAL FIXES:
1. Removed iOS position:fixed hack that completely broke scrolling
   - Users can now scroll on iPhones/iPads (site was unusable before)

2. Fixed video not extending into safe areas
   - Video now properly fills the entire screen including notch areas
   - Used CSS env() variables with negative margins for full-bleed effect
   - Content respects safe areas with proper padding

3. Added explicit white background fallback
   - White background shows if video fails to load
   - No longer relies on implicit browser defaults

The site is now fully functional on iOS devices with proper safe area
handling and immersive video experience as intended.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

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