diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 52d63ba..b6ad403 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -19,15 +19,21 @@
   z-index: 0;
 }
 
-.hero .hero-media img,
-.hero .hero-media video {
+.hero .hero-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-/* video layers over the poster image and fades in once it is playing */
+/*
+ * video layers over the poster image, fills the hero, and fades in once it is
+ * playing (the <video> element itself carries the .hero-media class, so it is
+ * sized here rather than via a descendant selector)
+ */
 .hero .hero-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   opacity: 0;
   transition: opacity 0.6s ease;
 }
@@ -45,6 +51,15 @@
   z-index: 1;
 }
 
+/*
+ * video variant: the video (and its poster) is a self-contained creative with
+ * its own headline and CTA, so drop the darkening gradient (and the overlaid
+ * text, below) and let the media show edge-to-edge.
+ */
+.hero.video::after {
+  content: none;
+}
+
 /* Content */
 .hero .hero-content {
   position: absolute;
@@ -96,3 +111,8 @@
     padding: 0 32px 80px;
   }
 }
+
+/* video variant: hide the overlaid text (see gradient note above) */
+.hero.video .hero-content {
+  display: none;
+}