Help with size of mobile logo customized css on specific page

Hi, I'd like the max height on mobile to be 30px, but it's showing up bigger on the case studies and contact us page. The logo is a different colour on these 2 pages than the others so I used a custom css code in the advanced section  of the page.

This is what I'm using but mobile isn't updating. Any help would be appreciated!

password is: envoya

<style> 
div.header-title-logo a {
content:url("https://static1.squarespace.com/static/64d38ce5b3504f0e75b29442/t/64de1bb82025a62707830810/1692277688580/Envoya_logo_seafoam.png") !important;     
max-height: 45px;
}
</style>
<style> 
div.header-mobile-logo a {
content:url("https://static1.squarespace.com/static/64d38ce5b3504f0e75b29442/t/64de1bb82025a62707830810/1692277688580/Envoya_logo_seafoam.png") !important;    
max-height: 30px;
}
</style>

@rebeccach Can you please share your site URL so I can take a look?

Hi Sam! thank you url is https://pepper-badger-9tac.squarespace.com/

@rebeccach Here's a code snippet to fix the mobile logo size. Add the code under  Website > Utilities > Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
	.header-title-logo a {
		max-height: 30px !important;
	}
}

That worked, thanks so much!