diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index fc9097b0..630e7fbc 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -116,8 +116,7 @@
 
 	.hero {
 		display: block;
-		height: 100vh;
-		min-height: var(--hero-min-height);
+		height: 100%;
 		overflow: hidden;
 		position: relative;
 		width: 100vw;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8a9965d0..8b503f3c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -51,51 +51,60 @@
 	Top
 </h2>
 
-<!-- Make sure we only show one banner at a time-->
-{#if data.localeAlert}
-	<Banner
-		contrast={data.localeAlert.isDev}
-		id={data.localeAlert.isDev ? undefined : 'locale-switch'}
-	>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags not vulnerable against XSS -->
-		{@html data.localeAlert.message}
-	</Banner>
-{:else if geo?.country?.code === 'GB'}
-	<Banner contrast={hero}>
-		<b
-			>PauseAI's largest ever protest will be on Saturday February 28th in London. <Link
-				href="https://luma.com/o0p4htmk">Sign up now!</Link
-			></b
+<div class="page-top" class:hero-page={hero}>
+	<!-- Make sure we only show one banner at a time-->
+	{#if data.localeAlert}
+		<Banner
+			contrast={data.localeAlert.isDev}
+			id={data.localeAlert.isDev ? undefined : 'locale-switch'}
 		>
-	</Banner>
-{:else}
-	<NearbyEvent contrast={hero} bind:eventFound {geo} />
-	{#if !eventFound}
-		{#if geo?.country?.code === 'US' && false}
-			<Banner contrast={hero}>
-				<b
-					>HELP US PROTECT STATE SOVEREIGNTY ON AI REGULATION | <Link
-						href="https://mstr.app/b09fa92b-1899-43a0-9d95-99cd99c9dfb2">ACT NOW »</Link
-					></b
-				>
-			</Banner>
-		{:else if false}
-			<Banner contrast={hero} target="/littlehelpers">
-				<strong>🎄 Holiday Matching Campaign!</strong> Help fund volunteer stipends for PauseAI
-				advocates. <Link href="/littlehelpers">Join the Little Helpers campaign →</Link>
-			</Banner>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags not vulnerable against XSS -->
+			{@html data.localeAlert.message}
+		</Banner>
+	{:else if geo?.country?.code === 'GB'}
+		<Banner contrast={hero}>
+			<b
+				>PauseAI's largest ever protest will be on Saturday February 28th in London. <Link
+					href="https://luma.com/o0p4htmk">Sign up now!</Link
+				></b
+			>
+		</Banner>
+	{:else}
+		<NearbyEvent contrast={hero} bind:eventFound {geo} />
+		{#if !eventFound}
+			{#if geo?.country?.code === 'US' && false}
+				<Banner contrast={hero}>
+					<b
+						>HELP US PROTECT STATE SOVEREIGNTY ON AI REGULATION | <Link
+							href="https://mstr.app/b09fa92b-1899-43a0-9d95-99cd99c9dfb2">ACT NOW »</Link
+						></b
+					>
+				</Banner>
+			{:else if false}
+				<Banner contrast={hero} target="/littlehelpers">
+					<strong>🎄 Holiday Matching Campaign!</strong> Help fund volunteer stipends for PauseAI
+					advocates. <Link href="/littlehelpers">Join the Little Helpers campaign →</Link>
+				</Banner>
+			{/if}
 		{/if}
 	{/if}
-{/if}
 
-{#if deLocalizeHref($page.url.pathname) !== '/brussels-ep-protest-2026'}
-	<CampaignBanner href="/brussels-ep-protest-2026" id="brussels-ep-protest-2026">
-		<strong>Brussels, Feb 23</strong> - Join us outside the European Parliament to call for a global treaty
-		to pause frontier AI development.
-	</CampaignBanner>
-{/if}
+	{#if deLocalizeHref($page.url.pathname) !== '/brussels-ep-protest-2026'}
+		<CampaignBanner href="/brussels-ep-protest-2026" id="brussels-ep-protest-2026">
+			<strong>Brussels, Feb 23</strong> - Join us outside the European Parliament to call for a global
+			treaty to pause frontier AI development.
+		</CampaignBanner>
+	{/if}
+
+	{#if hero}
+		<div class="hero-section">
+			<Hero />
+			<Header inverted />
+		</div>
+	{/if}
+</div>
 
-<div class="layout" class:with-hero={hero}>
+<div class="layout" class:hero-page={hero}>
 	{#if $page.route.id === '/sayno'}
 		<!-- Dynamic import and render the selfie UX component -->
 		{#await import('./sayno/SelfieUX.svelte') then module}
@@ -103,12 +112,7 @@
 		{/await}
 	{/if}
 
-	{#if hero}
-		<div class="hero-section">
-			<Hero />
-			<Header inverted />
-		</div>
-	{:else}
+	{#if !hero}
 		<Header />
 	{/if}
 
@@ -147,6 +151,22 @@
 		margin: auto;
 	} */
 
+	.page-top.hero-page {
+		display: flex;
+		flex-direction: column;
+		height: 100dvh;
+	}
+
+	.page-top.hero-page > :global(.banner),
+	.page-top.hero-page > :global(.campaign-banner) {
+		flex-shrink: 0;
+	}
+
+	.page-top.hero-page .hero-section {
+		flex: 1;
+		min-height: 0;
+	}
+
 	.hero-section {
 		position: relative;
 	}
@@ -156,6 +176,8 @@
 		top: 0;
 		left: 0;
 		right: 0;
+		width: min(var(--page-width), 100vw - 6rem);
+		margin-inline: auto;
 		z-index: 1;
 	}
 
@@ -172,6 +194,10 @@
 		padding: 0 var(--padding-wide) 0 var(--padding-wide);
 	}
 
+	.layout.hero-page {
+		grid-template-rows: 1fr auto;
+	}
+
 	/* Transition to narrower padding at narrow viewports (matches navbar 600px breakpoint) */
 	@media (max-width: 600px) {
 		.layout {