Making items overlap using Bootstrap

Question

I'm working on a new site. I have a layout question. We are using bootstrap 5.

Here's the layout I need:

I'm having trouble with 2 things:

1 - the burgundy testimonial box on the right. It needs to overlap the orangeish image above it. I did this by add negative top padding to the div that contains the box. This moves the box up and causes it to overlay the orangeish image. This box will contain varying text and text this is browser drawn. So I can't use an image for the tesimonial. I'm wondering if there is a better way to do this - instead of using negative padding?

2 - The "Employment" text. It is browser drawn and is in it's own div above the page content div. Again I set a negative top padding to move the Employment text up and place it over the orangeish image. I could add the text to the image but that adds an extra layer of work for any new pages that might get created. Again I'm wondering if there is a better way to do this other than negative top padding.

Grateful for any suggestions!