diff --git a/components/Hero.tsx b/components/Hero.tsx
index 28d6ee6..919e1a9 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import Fox from "./Fox";
+import PlayReel from "./PlayReel";
 import Timecode from "./Timecode";
 import { site } from "@/content/site";
 
@@ -9,7 +10,7 @@ export default function Hero() {
       {/* Plate: showreel if configured, otherwise a moving light field */}
       {site.reel ? (
         <video
-          className="absolute inset-0 h-full w-full object-cover opacity-60"
+          className="absolute inset-0 h-full w-full object-cover opacity-55"
           src={site.reel}
           poster={site.reelPoster ?? undefined}
           autoPlay
@@ -57,7 +58,12 @@ export default function Hero() {
           <p className="max-w-md text-base leading-relaxed text-muted md:text-lg">
             Compositing, CG and finishing for series, film and commercials, built on a pipeline we wrote ourselves.
           </p>
-          <div className="flex gap-3">
+          <div className="flex flex-wrap items-center gap-3">
+            {site.fullReel && (
+              <span className="mr-3">
+                <PlayReel src={site.fullReel} poster={site.reelPoster ?? undefined} />
+              </span>
+            )}
             <Link
               href="/work/"
               className="bg-fg px-5 py-3.5 whitespace-nowrap md:px-6 font-mono text-xs tracking-[0.2em] text-ink uppercase transition-colors hover:bg-accent"
diff --git a/components/PlayReel.tsx b/components/PlayReel.tsx
new file mode 100644
index 0000000..4312389
--- /dev/null
+++ b/components/PlayReel.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+// "Play reel" button that opens the full reel in a fullscreen lightbox.
+export default function PlayReel({ src, poster, label = "Play reel" }: { src: string; poster?: string; label?: string }) {
+  const [open, setOpen] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("keydown", onKey);
+    document.body.style.overflow = "hidden";
+    videoRef.current?.play().catch(() => {});
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="group flex items-center gap-3 font-mono text-xs tracking-[0.2em] whitespace-nowrap uppercase"
+      >
+        <span className="flex h-11 w-11 items-center justify-center rounded-full border border-white/40 transition-colors group-hover:border-accent group-hover:bg-accent">
+          <svg viewBox="0 0 10 12" className="ml-0.5 h-3 w-3 fill-current" aria-hidden="true">
+            <path d="M0 0l10 6-10 6z" />
+          </svg>
+        </span>
+        {label}
+      </button>
+
+      {open && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label="Showreel"
+          className="fixed inset-0 z-[70] flex items-center justify-center bg-black/95 p-4 md:p-10"
+          onClick={() => setOpen(false)}
+        >
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            className="absolute top-4 right-5 font-mono text-xs tracking-[0.2em] text-muted uppercase hover:text-fg"
+          >
+            Close ✕
+          </button>
+          <video
+            ref={videoRef}
+            src={src}
+            poster={poster}
+            controls
+            playsInline
+            className="max-h-full w-full max-w-7xl bg-black"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/content/site.ts b/content/site.ts
index 75c2fa3..95a1488 100644
--- a/content/site.ts
+++ b/content/site.ts
@@ -13,10 +13,11 @@ export const site = {
   // TODO: switch to an @ttvfx.com address once the domain's mail is set up.
   email: "chris@twotalesanimation.com",
   location: "Pretoria, South Africa",
-  // Optional studio showreel for the home hero: drop public/reel.mp4 and set
-  // this to "/reel.mp4" (and reelPoster to a still).
-  reel: null as string | null,
-  reelPoster: null as string | null,
+  // Muted background loop for the home hero (cut from the Summertide reel).
+  reel: "/reel/hero-loop.mp4" as string | null,
+  reelPoster: "/reel/hero-poster.jpg" as string | null,
+  // Full reel with sound, opened by the hero's "Play reel" button.
+  fullReel: "/reel/summertide-reel.mp4" as string | null,
   socials: [
     // TODO: add real profiles, e.g. { label: "Vimeo", href: "https://vimeo.com/..." }
   ] as { label: string; href: string }[],
@@ -125,6 +126,25 @@ export type Project = {
 };
 
 export const projects: Project[] = [
+  {
+    slug: "summertide",
+    title: "Summertide",
+    client: "M-Net",
+    year: 2024,
+    category: "Series",
+    summary:
+      "Creature and simulation work for M-Net’s coastal family drama: CG African penguins, a CG shark with water simulation, shark replacements on the beach, CG storm clouds and lightning, a CG seal and pyro simulations.",
+    image: "/work/summertide/still-18.jpg",
+    video: "/reel/summertide-reel.mp4",
+    gallery: [
+      "/work/summertide/still-101.jpg",
+      "/work/summertide/still-139.jpg",
+      "/work/summertide/still-80.jpg",
+      "/work/summertide/still-187.jpg",
+    ],
+    credits: ["CG Penguins", "CG Shark & Water Sim", "Shark Replacement", "CG Clouds & Lightning", "CG Seal", "Pyro Simulations"],
+    hue: 190,
+  },
   {
     slug: "festo-f1",
     title: "Festo F1",
diff --git a/public/reel/hero-loop.mp4 b/public/reel/hero-loop.mp4
new file mode 100644
index 0000000..140f02b
Binary files /dev/null and b/public/reel/hero-loop.mp4 differ
diff --git a/public/reel/hero-poster.jpg b/public/reel/hero-poster.jpg
new file mode 100644
index 0000000..7fd1dd6
Binary files /dev/null and b/public/reel/hero-poster.jpg differ
diff --git a/public/reel/summertide-reel.mp4 b/public/reel/summertide-reel.mp4
new file mode 100644
index 0000000..bf78847
Binary files /dev/null and b/public/reel/summertide-reel.mp4 differ
diff --git a/public/work/summertide/still-101.jpg b/public/work/summertide/still-101.jpg
new file mode 100644
index 0000000..d017b10
Binary files /dev/null and b/public/work/summertide/still-101.jpg differ
diff --git a/public/work/summertide/still-139.jpg b/public/work/summertide/still-139.jpg
new file mode 100644
index 0000000..f170559
Binary files /dev/null and b/public/work/summertide/still-139.jpg differ
diff --git a/public/work/summertide/still-18.jpg b/public/work/summertide/still-18.jpg
new file mode 100644
index 0000000..eaafa6f
Binary files /dev/null and b/public/work/summertide/still-18.jpg differ
diff --git a/public/work/summertide/still-187.jpg b/public/work/summertide/still-187.jpg
new file mode 100644
index 0000000..1821145
Binary files /dev/null and b/public/work/summertide/still-187.jpg differ
diff --git a/public/work/summertide/still-33.jpg b/public/work/summertide/still-33.jpg
new file mode 100644
index 0000000..d91dd80
Binary files /dev/null and b/public/work/summertide/still-33.jpg differ
diff --git a/public/work/summertide/still-80.jpg b/public/work/summertide/still-80.jpg
new file mode 100644
index 0000000..ba793d2
Binary files /dev/null and b/public/work/summertide/still-80.jpg differ