diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
index 1b2e316..5dd8ae2 100644
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -6,7 +6,7 @@
   "scope": "/",
   "id": "/",
   "display": "standalone",
-  "display_override": ["standalone"],
+  "display_override": ["fullscreen", "standalone"],
   "orientation": "portrait",
   "background_color": "#0a0a0a",
   "theme_color": "#0a0a0a",
diff --git a/src/App.vue b/src/App.vue
index 3deaca3..5d8df1b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2423,7 +2423,7 @@ watch(mobileMenuOpen, (open) => {
 
     <section
       v-if="isHomeRoute"
-      class="hero-fold relative isolate min-h-screen overflow-hidden"
+      class="hero-fold relative isolate overflow-hidden"
       :style="{ '--safe-area-bg-image': `url(${currentHeroBackground})` }"
     >
       <div class="hero-bg-layer">
diff --git a/src/style.css b/src/style.css
index 37b2c79..e167d78 100644
--- a/src/style.css
+++ b/src/style.css
@@ -51,13 +51,16 @@ body.menu-open {
 
 .hero-bg-layer {
   position: absolute;
-  inset: -5rem 0;
+  inset:
+    calc(-5rem - env(safe-area-inset-top))
+    0
+    calc(-5rem - env(safe-area-inset-bottom));
   transform: translate3d(0, var(--hero-bg-y, 0px), 0) scale(1.03);
   will-change: transform;
 }
 
 .hero-fold {
-  min-height: 100svh;
+  min-height: calc(100svh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
 .hero-bg {