Footer Curved Section Divider Top – Dynamic Background Color

I have created this curved effect at the top of my footer. 

It works on most pages except ones that have a non-white section above them. 

Does anyone know a way to create a dynamic background color that pulls from the VISIBLE section above?

This is my current code:

footer section:nth-child(3) div.section-border .section-background{
  outline:1.5px @black solid;
  border-radius:40px 40px 0 0!important;
}

footer section:nth-child(3){
div.section-border{background:inherit!important;}
}

Further context if needed: I have two additional footer sections that are hidden on most pages which is why the native divider of the section above doesn't work. I also tried adjusting the padding + position of the sections to overlap but it created challenges in edit mode + wasn't consistent on every page (probably because sometimes section is in footer and other times in main body?)

Website pages in order:
selwyndealers.squarespace.com
selwyndealers.squarespace.com/shop
selwyndealers.squarespace.com/services

Can you share link to some pages where it worked? We can compare code easier