Changing Logo on Mobile Overlay (NOT the mobile page itself)

Site URL: https://newconductorsorch.squarespace.com/faq

https://newconductorsorch.squarespace.com/faq
PW: newconductors

The gist of the question: I currently have a white logo that disappears on a white mobile overlay background. I would like the mobile overlay to have a completely different logo. 

This page (FAQ) has color logo, but I've used the SquareKicker extension to use a filter to make it white. My "solution" for the mobile overlay is to use a completely different logo-- for ALL pages! [SquareKicker is not able to help me.]

I have injected this into my header to try to replace the logo for mobile overlay across ALL pages. 

I would appreciate any advice or solutions you could give! 

<style>
  /* hide current image */
body:not(.header--menu-open) .header-title-logo img {
    visibility: hidden!important;
}
  /* set new image on burger menu click */
  body:not(.header--menu-open) .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/61e9e0a1c56e13742a1a45a4/t/622017f14c29f83be16f38e8/1646270449115/Submark+Black.png)!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
}
</style>