How to display a logo instead of the site title on one page of a site?

Site URL: https://www.rachelefron.com/songwriting-salon

Hello All, Working on a site that displays Site Title in the header on all pages. I want to display a logo instead on one page. I've seen many posts on how to display either the title or logo or both, but have not yet found a method to replace one with the other. I tried setting site title visibility to hidden, but inserting the logo via CSS makes the site title visible again.  Here's where I'm at:

<style>
.Header--top {background-color: #1985A1 !important;}
.Header-tagline {display: none;} 
  
.Header-branding, .Mobile-bar-branding {
   content: "";
   display: block;
   background-image: url(https://static1.squarespace.com/static/5d228e100f1dd60001f070a7/t/626572b55ffadb5f98bc58af/1650815669395/Songwriting+salon+temp+script.png);
   background-size: contain;
   width: 871px;
   height: 240px;
   margin-left: auto;
   margin-right: auto;
}
</style>

Thanks in advance for taking a look and any help!

I see you able to add a logo.

To hide text, just add color: transparent;

.Header-branding, .Mobile-bar-branding {
   content: "";
   display: block;
   background-image: url(https://static1.squarespace.com/static/5d228e100f1dd60001f070a7/t/626572b55ffadb5f98bc58af/1650815669395/Songwriting+salon+temp+script.png);
   background-size: contain;
   width: 871px;
   height: 240px;
   margin-left: auto;
   margin-right: auto;
color: transparent !important;
}