diff --git a/apps/web/app/hero-background.css b/apps/web/app/hero-background.css
new file mode 100644
index 0000000..2d87833
--- /dev/null
+++ b/apps/web/app/hero-background.css
@@ -0,0 +1,90 @@
+/* Homepage hero — editorial background image treatment.
+   The photograph is decorative atmosphere: copy and product UI remain primary. */
+.hero {
+  background-color: var(--paper);
+  background-image:
+    linear-gradient(
+      180deg,
+      rgba(251, 249, 243, 0.18) 0%,
+      rgba(251, 249, 243, 0.12) 58%,
+      rgba(251, 249, 243, 0.72) 82%,
+      rgba(251, 249, 243, 0.98) 100%
+    ),
+    linear-gradient(
+      90deg,
+      rgba(251, 249, 243, 0.995) 0%,
+      rgba(251, 249, 243, 0.97) 30%,
+      rgba(251, 249, 243, 0.88) 48%,
+      rgba(251, 249, 243, 0.68) 68%,
+      rgba(251, 249, 243, 0.78) 100%
+    ),
+    url('/media/editorial/assay/hero-proof-in-review.avif');
+  background-repeat: no-repeat;
+  background-size: 100% 100%, 100% 100%, cover;
+  background-position: center, center, 68% 50%;
+}
+
+:root[data-theme='dark'] .hero {
+  background-image:
+    linear-gradient(
+      180deg,
+      rgba(19, 21, 25, 0.12) 0%,
+      rgba(19, 21, 25, 0.08) 56%,
+      rgba(19, 21, 25, 0.42) 78%,
+      rgba(19, 21, 25, 0.96) 100%
+    ),
+    linear-gradient(
+      90deg,
+      rgba(19, 21, 25, 0.995) 0%,
+      rgba(19, 21, 25, 0.96) 28%,
+      rgba(19, 21, 25, 0.80) 47%,
+      rgba(19, 21, 25, 0.44) 67%,
+      rgba(19, 21, 25, 0.58) 100%
+    ),
+    url('/media/editorial/assay/hero-proof-in-review.avif');
+}
+
+@media (max-width: 980px) {
+  .hero {
+    background-size: 100% 100%, 100% 100%, auto 64%;
+    background-position: center, center, 76% 10%;
+    background-image:
+      linear-gradient(
+        180deg,
+        rgba(251, 249, 243, 0.38) 0%,
+        rgba(251, 249, 243, 0.70) 48%,
+        rgba(251, 249, 243, 0.98) 100%
+      ),
+      linear-gradient(
+        90deg,
+        rgba(251, 249, 243, 0.985) 0%,
+        rgba(251, 249, 243, 0.92) 52%,
+        rgba(251, 249, 243, 0.78) 100%
+      ),
+      url('/media/editorial/assay/hero-proof-in-review.avif');
+  }
+
+  :root[data-theme='dark'] .hero {
+    background-image:
+      linear-gradient(
+        180deg,
+        rgba(19, 21, 25, 0.38) 0%,
+        rgba(19, 21, 25, 0.72) 50%,
+        rgba(19, 21, 25, 0.98) 100%
+      ),
+      linear-gradient(
+        90deg,
+        rgba(19, 21, 25, 0.985) 0%,
+        rgba(19, 21, 25, 0.91) 50%,
+        rgba(19, 21, 25, 0.74) 100%
+      ),
+      url('/media/editorial/assay/hero-proof-in-review.avif');
+  }
+}
+
+@media (max-width: 640px) {
+  .hero {
+    background-size: 100% 100%, 100% 100%, auto 50%;
+    background-position: center, center, 80% 5%;
+  }
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 57d1fc5..0b42bf9 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -5,6 +5,7 @@ import { SiteHeader } from '../components/SiteHeader'
 import { SiteFooter } from '../components/SiteFooter'
 import { SITE } from '../lib/site'
 import './globals.css'
+import './hero-background.css'
 
 // Self-hosted variable fonts (AGENTS.md §DESIGN TOKENS) — no network fetch, no layout shift.
 const fraunces = localFont({
diff --git a/apps/web/public/media/editorial/assay/hero-proof-in-review.avif b/apps/web/public/media/editorial/assay/hero-proof-in-review.avif
new file mode 100644
index 0000000..5643efb
Binary files /dev/null and b/apps/web/public/media/editorial/assay/hero-proof-in-review.avif differ