Using singularitygs for fixed width content, full width color background, and image overlapping two full width sections

I'm trying to produce a layout like this:

Where blue is the top header, red is the bottom header, green is the menu and the white bottom is the body. The white circle is a logo that I'm trying to place such that it overlaps the header sections but not the menu section.

Following the advice in Singularity Grid layout with header and footer width 100%, I set up div wrappers on the content section and got the full width background colors working.

I also used div wrappers to position the header and menu regions into the fixed width positions in the middle of the screen (indicated by the black vertical lines).

Finally, I've set up the header regions to take up only a portion of the grid (9,4), and the logo to take up only a portion of the grid (3,1).

Unfortunately I'm not really sure how to align the logo next to the grid portions and maintain the full width color backgrounds. And I wouldn't be surprised if maybe the way I did set up the divs is inconsistent with what I'm trying to do.

Any suggestions or tips?

I've set up a Sassmeister example. The actual site is being done in drupal, but the demo was done from scratch to hopefully make it more readable. http://sassmeister.com/gist/7163c32a080a446f20ff

You're probably going to just have to turn on overflow as visible on the row with the logo and have the logo be on the same row as the top header so it can overhang to the bottom one. This is kind of rough but it shows what I mean:

http://sassmeister.com/gist/3390b25fdd41d1e6fba2