diff --git a/tools/av-header-transparent-on-home.php b/tools/av-header-transparent-on-home.php
new file mode 100644
index 0000000..20fcfb4
--- /dev/null
+++ b/tools/av-header-transparent-on-home.php
@@ -0,0 +1,55 @@
+<?php
+/**
+ * Plugin Name: Asterion — Transparent header on home + opaque on scroll
+ * Description: On the home page only, the header sits transparently over the
+ *   100vh video hero. Once the user scrolls past the top, Bricks adds the
+ *   `.on-scroll` class to `#brx-header` and we fade in the navy background +
+ *   a subtle shadow. Other pages keep the default navy header.
+ *
+ * Implementation : pure CSS via wp_head(). Uses Bricks's native `.brx-sticky`
+ * + `.on-scroll` classes (added by the sticky header JS once the user scrolls).
+ */
+defined('ABSPATH') || exit;
+
+add_action('wp_head', function () {
+    // Only inject on the home page (front page) — other pages keep default header
+    if (! is_front_page()) return;
+    ?>
+    <style id="av-header-transparent-on-home">
+    /* Default header state on home : fully transparent over the hero video */
+    body.home #brx-header,
+    body.home #brx-header > section,
+    body.home #brx-header #brxe-hdrsec {
+        background: transparent !important;
+        box-shadow: none;
+        transition: background-color 0.35s ease, box-shadow 0.35s ease;
+    }
+
+    /* Subtle gradient at the very top so the menu text stays readable
+       on any frame of the video (handles bright frames gracefully). */
+    body.home #brx-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        background: linear-gradient(to bottom, rgba(11, 31, 58, 0.55) 0%, rgba(11, 31, 58, 0) 100%);
+        pointer-events: none;
+        z-index: -1;
+        transition: opacity 0.35s ease;
+    }
+
+    /* Scrolled state : navy background fades in, gradient fades out, shadow appears */
+    body.home #brx-header.on-scroll,
+    body.home #brx-header.on-scroll > section,
+    body.home #brx-header.on-scroll #brxe-hdrsec {
+        background: var(--color-brand-navy) !important;
+        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
+    }
+    body.home #brx-header.on-scroll::before {
+        opacity: 0;
+    }
+    </style>
+    <?php
+}, 999);