diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index acb750be..c8b501c4 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -206,6 +206,7 @@ footer{
 	padding-block: 1rem;
 	text-align: center;
 	margin-top: auto;
+	position: relative;
 }
 
 @media screen and (max-width: 800px) {
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index 246d194d..ed05433b 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -130,7 +130,7 @@
 /* ─── Hero parallax (same scaleY technique as TitleImgParallax) ─── */
 .hero-section {
 	--parallax-scale: 0.3;
-	margin-bottom: -20vh;
+	margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px)));
 	transform-origin: center top;
 	transform: translateY(-1rem) scaleY(calc(1 - var(--parallax-scale)));
 }