Need to fix border at bottom of full-page background image

I have a full-page background image, except the last section on the page needs to be opaque. I'm trying to add a curved border to separate the two but it looks janky.

Site: https://tortoise-paddlefish-lj6z.squarespace.com/services

PW: feather

I have this in the header code injection: 

<style>
.section-background, .page-section, .section-border {
    background: rgba(12, 81, 66, 0.5) !important;
}
  
body {
   background-image: url(https://static1.squarespace.com/static/63f8cf4d9f5c2418c319eaa5/t/640902e5db3b2536863f098c/1678312166703/ambilimon-annamala-poosari-eCaTObQxJ1w-unsplash.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;}
</style>

And in the Custom CSS I have this to fix the last section:

//last section opaque
section[data-section-id="64025f78fa164317f8f68f50"] .section-background {
  background: @ltbeige !important; }

But the border at the bottom of the last section before the opaque section is messed up. Is there a way to fix it?

Hi,

What should it look like?

Thanks, @tuanphan -- I just made it straight to present to the client, but here's a screenshot of how it looks with the curved border we wanted. The image doesn't extend to the border, and the color in the last section (which is set by CSS) doesn't extend up to the border. Client needs to launch site early next week, so for now we're leaving the borders straight -- but is there a way to fix this? 

(Some of the pages have a single background image running across multiple sections, and that's what doesn't play well with the new border options.)