Child Behind Parent Element, but not behind Background

I’ve used custom code to add a “highlight” to my Hero Heading using span wrappers (https://youtu.be/KHfpL6f-r5E?si=WBvx6mjwVueQ6fjw). I would like the highlight to be underneath the text, however, adding a higher z-index to the text is not working. If I add a -1 z-index to the highlight element, it disappears behind the background. If I add a -1 z-index to the background, it seems to work, however, nothing is clickable anymore.

Is there any way for me to get the span wrapper/highlight element to be behind the text?


Here is my site Read-Only: [LINK]