diff --git a/src/assets/protests/[Downsized] June 2025 DeepMind.jpg b/src/assets/protests/[Downsized] June 2025 DeepMind.jpg
new file mode 100644
index 000000000..7823a5856
Binary files /dev/null and b/src/assets/protests/[Downsized] June 2025 DeepMind.jpg differ
diff --git a/src/assets/protests/[Downsized] San Francisco.jpeg b/src/assets/protests/[Downsized] San Francisco.jpeg
new file mode 100644
index 000000000..2bfd0a29f
Binary files /dev/null and b/src/assets/protests/[Downsized] San Francisco.jpeg differ
diff --git a/src/assets/protests/[Downsized] September 2023 Den Haag.jpg b/src/assets/protests/[Downsized] September 2023 Den Haag.jpg
new file mode 100644
index 000000000..2dba6866b
Binary files /dev/null and b/src/assets/protests/[Downsized] September 2023 Den Haag.jpg differ
diff --git a/src/assets/protests/den-haag.jpeg b/src/assets/protests/den-haag.jpeg
deleted file mode 100644
index 8434c5519..000000000
Binary files a/src/assets/protests/den-haag.jpeg and /dev/null differ
diff --git a/src/assets/protests/london.jpeg b/src/assets/protests/london.jpeg
deleted file mode 100644
index 77254383a..000000000
Binary files a/src/assets/protests/london.jpeg and /dev/null differ
diff --git a/src/assets/protests/san-francisco.jpeg b/src/assets/protests/san-francisco.jpeg
deleted file mode 100644
index 65760997f..000000000
Binary files a/src/assets/protests/san-francisco.jpeg and /dev/null differ
diff --git a/src/lib/components/Block.svelte b/src/lib/components/Block.svelte
index 02e26b5a3..02152fb69 100644
--- a/src/lib/components/Block.svelte
+++ b/src/lib/components/Block.svelte
@@ -29,7 +29,16 @@
 
 <style>
 	.block-wrapper {
-		margin-bottom: 5rem;
+		margin-bottom: 2.5rem;
+		padding: 1.5rem;
+		border-left: 3px solid var(--brand);
+		background: linear-gradient(90deg, rgba(255, 148, 22, 0.05) 0%, transparent 100%);
+		transition: all 0.2s ease;
+	}
+
+	.block-wrapper:hover {
+		border-left-width: 5px;
+		background: linear-gradient(90deg, rgba(255, 148, 22, 0.08) 0%, transparent 100%);
 	}
 
 	.block-wrapper :global(a) {
@@ -42,12 +51,15 @@
 		color: var(--brand);
 		text-transform: uppercase;
 		text-decoration: none;
-		font-size: 1.2rem;
+		font-size: 0.9rem;
 		font-family: var(--font-heading);
 		font-weight: 700;
+		letter-spacing: 0.05em;
+		margin-top: 0.75rem;
+		display: inline-block;
 	}
 
-	.c2a:hover {
+	.block-wrapper:hover .c2a {
 		text-decoration: underline;
 	}
 
@@ -56,7 +68,7 @@
 	}
 
 	.text {
-		max-width: 30rem;
+		max-width: 40rem;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -65,19 +77,28 @@
 
 	p {
 		font-size: 1rem;
+		line-height: 1.6;
+		color: var(--text);
+		opacity: 0.85;
+		margin: 0.5rem 0 0 0;
 	}
 
 	h2 {
-		font-size: 1.5rem;
-		font-weight: 800;
+		font-size: 1.25rem;
+		font-weight: 700;
 		margin: 0;
 		text-transform: uppercase;
-		line-height: 1.2;
+		line-height: 1.3;
+		letter-spacing: 0.02em;
 	}
 
 	@media (min-width: 850px) {
 		h2 {
-			font-size: 1.5rem;
+			font-size: 1.35rem;
+		}
+
+		.block-wrapper {
+			padding: 1.75rem 2rem;
 		}
 	}
 
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 161ba89c4..ba197a4a2 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -1,168 +1,297 @@
 <script lang="ts">
-	import london from '$assets/protests/london.jpeg?enhanced'
-	import denHaag from '$assets/protests/den-haag.jpeg?enhanced'
-	import sf from '$assets/protests/san-francisco.jpeg?enhanced'
+	import deepmind from '$assets/protests/[Downsized] June 2025 DeepMind.jpg?enhanced'
+	import sf from '$assets/protests/[Downsized] San Francisco.jpeg?enhanced'
+	import denHaag from '$assets/protests/[Downsized] September 2023 Den Haag.jpg?enhanced'
 	import { onMount } from 'svelte'
-	import { emulateCqwIfNeeded } from '$lib/container-query-units'
 	import * as m from '$lib/paraglide/messages.js'
 	import Link from '$lib/components/Link.svelte'
+	import ChevronDown from 'lucide-svelte/icons/chevron-down'
 
 	let currentImageIndex = 0
-	const images = [london, denHaag, sf]
-	let isMobile = false
-	let tagline: HTMLDivElement
-
-	const checkMobile = () => {
-		isMobile = window.innerWidth <= 768
-	}
+	const images = [deepmind, sf, denHaag]
+	let mounted = false
 
 	onMount(() => {
-		checkMobile()
-		window.addEventListener('resize', checkMobile)
+		mounted = true
 
-		// Switch images every 5 seconds
 		const interval = setInterval(() => {
-			if (isMobile) {
-				currentImageIndex = (currentImageIndex + 1) % images.length
-			}
-		}, 5000)
-
-		const cleanupCqwEmulation = emulateCqwIfNeeded(tagline)
+			currentImageIndex = (currentImageIndex + 1) % images.length
+		}, 6000)
 
-		return () => {
-			clearInterval(interval)
-			window.removeEventListener('resize', checkMobile)
-			cleanupCqwEmulation?.()
-		}
+		return () => clearInterval(interval)
 	})
+
+	function scrollToContent() {
+		window.scrollTo({
+			top: window.innerHeight,
+			behavior: 'smooth'
+		})
+	}
 </script>
 
-<div class="hero">
-	{#if isMobile}
+<div class="hero" class:mounted>
+	<div class="images">
 		{#each images as image, i}
-			<enhanced:img src={image} sizes="100vw" alt="" class:active={currentImageIndex === i} />
+			<enhanced:img
+				src={image}
+				sizes="100vw"
+				alt="PauseAI protest"
+				class:active={currentImageIndex === i}
+			/>
 		{/each}
-	{:else}
-		<enhanced:img src={london} sizes="100vw" alt="" />
-		<enhanced:img src={denHaag} sizes="100vw" alt="" />
-		<enhanced:img src={sf} sizes="100vw" alt="" />
-	{/if}
+	</div>
+
 	<div class="overlay"></div>
-	<div class="tagline" bind:this={tagline}>
-		<h2>{m.home_hero()}</h2>
+
+	<div class="content">
+		<h1 class="headline">{m.home_hero()}</h1>
+
+		<div class="actions">
+			<Link href="/join" class="btn btn-primary">{m.header_join()}</Link>
+			<Link href="/action" class="btn btn-secondary">Take Action</Link>
+		</div>
 	</div>
-	<div class="actions">
-		<Link href="/join">{m.header_join()}</Link>
-		<Link href="/donate">{m.header_donate()}</Link>
+
+	<button class="scroll-indicator" on:click={scrollToContent} aria-label="Scroll to content">
+		<ChevronDown size={32} />
+	</button>
+
+	<div class="image-indicators">
+		{#each images as _, i}
+			<button
+				class="indicator"
+				class:active={currentImageIndex === i}
+				on:click={() => (currentImageIndex = i)}
+				aria-label={`View image ${i + 1}`}
+			/>
+		{/each}
 	</div>
 </div>
 
 <style>
-	.tagline {
-		background-color: black;
-		position: absolute;
-		top: 50%;
+	.hero {
+		position: relative;
+		height: calc(100vh - 5rem);
+		min-height: 500px;
+		width: 100vw;
 		left: 50%;
-		transform: translate(-50%, -50%);
-		width: clamp(20rem, 45vw, 100%);
-		container-type: inline-size;
-		--cqw: 1cqw;
+		transform: translateX(-50%);
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
-	.tagline h2 {
-		text-transform: uppercase;
-		color: white;
-		font-size: calc(8.75 * var(--cqw));
-		text-align: center;
-		margin: 0;
-		padding: calc(6.5 * var(--cqw));
+	.images {
+		position: absolute;
+		inset: 0;
 	}
 
-	@media (max-width: 850px) {
-		.tagline h2 {
-			font-size: calc(8.5 * var(--cqw));
-			padding: calc(7.5 * var(--cqw));
-		}
+	.images :global(img) {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		object-position: top center;
+		opacity: 0;
+		transition: opacity 1.5s ease-in-out;
 	}
 
-	.hero {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		height: 100vh;
-		min-height: var(--hero-min-height);
-		overflow: hidden;
-		position: relative;
-		/* Full-bleed: use transform-based centering instead of margin calc
-		   (fixes WebKit/iOS Safari rendering issue - see #562) */
-		width: 100vw;
-		left: 50%;
-		transform: translateX(-50%);
+	.images :global(img.active) {
+		opacity: 1;
 	}
 
 	.overlay {
 		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: var(--brand);
-		opacity: 0.8;
+		inset: 0;
+		background: linear-gradient(
+			135deg,
+			rgba(0, 0, 0, 0.55) 0%,
+			rgba(0, 0, 0, 0.3) 50%,
+			rgba(255, 148, 22, 0.3) 100%
+		);
+	}
+
+	.content {
+		position: relative;
+		z-index: 1;
+		text-align: center;
+		padding: 2rem;
+		max-width: 900px;
+		opacity: 0;
+		transform: translateY(30px);
+		transition:
+			opacity 0.8s ease-out,
+			transform 0.8s ease-out;
+	}
+
+	.mounted .content {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.headline {
+		font-size: clamp(2.5rem, 8vw, 4.5rem);
+		font-weight: 700;
+		color: white;
+		text-transform: uppercase;
+		margin: 0 0 1.5rem 0;
+		line-height: 1.05;
+		letter-spacing: 0.02em;
+		text-shadow:
+			0 2px 4px rgba(0, 0, 0, 0.9),
+			0 4px 12px rgba(0, 0, 0, 0.7),
+			0 8px 30px rgba(0, 0, 0, 0.5);
+	}
+
+	.headline::after {
+		content: '';
+		display: block;
+		width: 80px;
+		height: 4px;
+		background: var(--brand);
+		margin: 1.5rem auto 0;
 	}
 
 	.actions {
-		position: absolute;
-		bottom: 10%;
-		left: 50%;
-		transform: translateX(-50%);
 		display: flex;
-		gap: 1rem;
+		gap: 1.25rem;
+		justify-content: center;
+		flex-wrap: wrap;
 	}
 
-	.actions :global(a) {
-		background-color: white;
+	.actions :global(.btn) {
 		font-family: var(--font-heading);
 		text-decoration: none;
-		font-size: 1.2rem;
-		color: black;
-		padding: 1rem 2rem;
+		font-size: 1rem;
+		padding: 0.9rem 2.2rem;
 		text-transform: uppercase;
-		transition: scale 0.1s;
+		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 		cursor: pointer;
+		font-weight: 700;
+		letter-spacing: 0.05em;
+		border-radius: 3px;
 	}
 
-	.actions :global(a:hover) {
-		scale: 1.05;
+	.actions :global(.btn-primary) {
+		background: linear-gradient(135deg, var(--brand) 0%, #e8850f 100%);
+		color: white;
+		border: none;
+		box-shadow: 0 4px 15px rgba(255, 148, 22, 0.3);
 	}
 
-	.actions :global(a:active) {
-		scale: 0.95;
+	.actions :global(.btn-primary:hover) {
+		background: linear-gradient(135deg, #ffaa3d 0%, var(--brand) 100%);
+		transform: translateY(-3px);
+		box-shadow: 0 6px 25px rgba(255, 148, 22, 0.45);
 	}
 
-	.hero :global(img) {
-		/* 2x the blur */
-		width: calc(100% + 10px);
-		height: 100%;
-		object-fit: cover;
-		filter: blur(5px);
+	.actions :global(.btn-secondary) {
+		background: rgba(255, 255, 255, 0.1);
+		color: white;
+		border: 2px solid rgba(255, 255, 255, 0.8);
+		backdrop-filter: blur(4px);
+	}
+
+	.actions :global(.btn-secondary:hover) {
+		background: white;
+		color: #222;
+		border-color: white;
+		transform: translateY(-3px);
+		box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
+	}
+
+	.scroll-indicator {
+		position: absolute;
+		bottom: 2rem;
+		left: 50%;
+		transform: translateX(-50%);
+		background: none;
+		border: none;
+		color: white;
+		cursor: pointer;
+		opacity: 0.7;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
+		animation: bounce 2s infinite;
+	}
+
+	.scroll-indicator:hover {
+		opacity: 1;
 	}
 
+	@keyframes bounce {
+		0%,
+		20%,
+		50%,
+		80%,
+		100% {
+			transform: translateX(-50%) translateY(0);
+		}
+		40% {
+			transform: translateX(-50%) translateY(-10px);
+		}
+		60% {
+			transform: translateX(-50%) translateY(-5px);
+		}
+	}
+
+	.image-indicators {
+		position: absolute;
+		bottom: 2rem;
+		right: 2rem;
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.indicator {
+		width: 40px;
+		height: 4px;
+		border: none;
+		background: rgba(255, 255, 255, 0.4);
+		cursor: pointer;
+		transition: all 0.3s ease;
+		padding: 0;
+	}
+
+	.indicator:hover {
+		background: rgba(255, 255, 255, 0.7);
+	}
+
+	.indicator.active {
+		background: var(--brand);
+	}
+
+	/* Mobile */
 	@media (max-width: 768px) {
 		.hero {
-			display: block;
+			min-height: 100svh;
+		}
+
+		.content {
+			padding: 1.5rem;
+		}
+
+		.actions {
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.actions :global(.btn) {
+			width: 100%;
+			max-width: 280px;
+			text-align: center;
 		}
 
-		.hero :global(img) {
-			position: absolute;
-			opacity: 0;
-			transition:
-				opacity 1s ease-in-out,
-				transform 10s ease-in-out;
-			transform: scale(1.1);
+		.image-indicators {
+			right: 50%;
+			transform: translateX(50%);
+			bottom: 5rem;
 		}
 
-		.hero :global(img.active) {
-			opacity: 1;
-			transform: scale(1);
+		.scroll-indicator {
+			bottom: 1rem;
 		}
 	}
 </style>
diff --git a/src/lib/components/Home.svelte b/src/lib/components/Home.svelte
index 977b6a45d..91e4556cc 100644
--- a/src/lib/components/Home.svelte
+++ b/src/lib/components/Home.svelte
@@ -17,12 +17,12 @@
 <PostMeta {title} {description} />
 <!-- The Hero image is in `+layout.svelte` -->
 
-<div style="height: 5rem;" />
+<div style="height: 2rem;" />
 
 <QuotesCarousel />
-<div class="divider" />
+<div class="divider" style="margin: 2rem 0;" />
 <Stats />
-<div class="divider" />
+<div class="divider" style="margin: 2rem 0;" />
 <section>
 	<Block linkText={m.home_risks_c2a()} href="/risks">
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
diff --git a/src/lib/components/QuoteContent.svelte b/src/lib/components/QuoteContent.svelte
index dddd73f8d..644fe878a 100644
--- a/src/lib/components/QuoteContent.svelte
+++ b/src/lib/components/QuoteContent.svelte
@@ -28,10 +28,10 @@
 <style>
 	.quote-card {
 		background: var(--color-background);
-		min-height: 18rem;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		gap: 1rem;
 	}
 
 	.quote-text {
diff --git a/src/lib/components/logo.svelte b/src/lib/components/logo.svelte
index 6713c94db..3e85f358a 100644
--- a/src/lib/components/logo.svelte
+++ b/src/lib/components/logo.svelte
@@ -4,7 +4,7 @@
 	export let animate = false
 	export let fill: string | null = null
 	export let inverted = false
-	$: orange = inverted ? 'white' : '#FF9416'
+	const orange = '#FF9416'
 	$: modifiedFill = fill ?? (inverted ? 'black' : 'var(--text)')
 </script>
 
diff --git a/src/lib/components/navbar/universal/UniversalNavbar.svelte b/src/lib/components/navbar/universal/UniversalNavbar.svelte
index a59aa6c70..28629585d 100644
--- a/src/lib/components/navbar/universal/UniversalNavbar.svelte
+++ b/src/lib/components/navbar/universal/UniversalNavbar.svelte
@@ -56,6 +56,21 @@
 	.inverted-header {
 		color: white;
 		z-index: 1;
+		position: relative;
+		--vspace: 1rem;
+	}
+
+	.inverted-header::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 100vw;
+		background: white;
+		z-index: -1;
+		pointer-events: none;
 	}
 
 	nav {
@@ -73,10 +88,28 @@
 		height: 0;
 	}
 
+	nav.move-up.inverted-header {
+		height: auto;
+		overflow: visible;
+	}
+
 	nav > * {
 		margin-bottom: 0.25rem;
 	}
 
+	nav.inverted-header > * {
+		margin-bottom: 0;
+	}
+
+	.inverted-header .logo-container {
+		align-items: center;
+	}
+
+	.inverted-header .logo {
+		display: flex;
+		align-items: center;
+	}
+
 	.logo-container {
 		flex-grow: 1;
 		display: flex;
diff --git a/src/lib/components/navbar/universal/UniversalNavlink.svelte b/src/lib/components/navbar/universal/UniversalNavlink.svelte
index 20322faf5..e95de7083 100644
--- a/src/lib/components/navbar/universal/UniversalNavlink.svelte
+++ b/src/lib/components/navbar/universal/UniversalNavlink.svelte
@@ -63,7 +63,7 @@
 	}
 
 	a.inverted {
-		color: white;
+		color: var(--brand);
 	}
 
 	a.inverted:hover {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 090f1f707..02d55edb8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -82,10 +82,10 @@
 		{/await}
 	{/if}
 
+	<Header inverted={hero} />
 	{#if hero}
 		<Hero />
 	{/if}
-	<Header inverted={hero} moveUp={hero} />
 
 	<main>
 		<PageTransition url={$page.url.pathname}>