diff --git a/src/components/CCIP/Hero/Hero.css b/src/components/CCIP/Hero/Hero.css
index 77a0be00cba..3e7f9affb36 100644
--- a/src/components/CCIP/Hero/Hero.css
+++ b/src/components/CCIP/Hero/Hero.css
@@ -1,14 +1,8 @@
 .ccip-hero {
   background-color: var(--gray-100);
   border-bottom: 1px solid var(--gray-200);
-
-  /* ADD THIS */
   position: relative;
-  z-index: 10;
-}
-
-.ccip-hero__heading {
-  color: var(--gray-900);
+  z-index: 1; /* lowered */
 }
 
 .ccip-hero__content {
@@ -18,8 +12,12 @@
   justify-content: center;
   align-items: center;
   gap: var(--space-4x);
+  position: relative;
+  z-index: 1; /* lowered */
+}
 
-  /* ADD THIS (backup in case parent isn't enough) */
+/* 🔑 Only elevate the interactive layer */
+.ccip-hero__search {
   position: relative;
-  z-index: 10;
+  z-index: 2;
 }