CSS help with overlays?

I am stumped!

Here’s the desired behavior: A div with a single background image, but half of the div has a dark overlay and the other half a less-dark overlay. There is lots of text, a form, etc, but that should all be unaffected by the overlays.

I managed the desired behavior on the dark overlay, but no on the less-dark overlay. The less-dark overlay is affecting the text in the div.

The problem is near the bottom of the page, in the contact us/experience success area.

FYI, the method I’m using is to enclose the content in a wrapper div, and to use a ::wrapper pseudoelement with the background-color: 0,0,0,0.9 or whatever to darken it. The form-wrapper area is working correctly; the engage-wrapper area is not.

Here is the code:

Here is a deployment:

I’m not 100% sure why, but giving .engage a position of relative solves it.

Genius! Yes, that does solve it, thanks!