Nailed it - thank you so much, you're a life saver!
It didn't work at first but I made a slight addition to the 'hide current image' section and it worked perfectly.
New code below:
<style>
/* hide current image */
body.header--menu-open .header-title-logo img {
visibility: hidden;
}
/* set new image on burger menu click */
body.header--menu-open .header-title-logo a {
background-image: url(https://static1.squarespace.com/static/5e8a138dedf9386b7757061f/t/5fc8e19e90a4f8549d839be0/1607000480214/%5BSITE%5D+%23FF_MASTER-LOGO_WHITE.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>