Two separate lines link color hover together (?)

Hello! Me again 🤪

I'm trying to solve a problem with our company logo. 

The logo is "MMM architects" with two different fonts and I would like to add it to our homepage either on the header in the corner with architects on a second line below MMM, or to have it as a text block. The text needs to change colour on hover as that's part of the whole site identity now...  

I've managed to add a second line of text below the site title, but I need the words to remain in proportion when the screen changes size - any way that can be achieved? 

Another solution would be to have it in a text block and using the 'scale text' to solve the proportions issue. I've managed to have a different font within the same text block with: 

h4 strong em {font-family: calibri;
font-style: initial; }

This works great, but when you add a link to the text and it is in two separate lines, when you hover over it, it doesn't recognise it as one element and only changes the colour of the element you're hovering over (if it is all one line it changes the colour of the entire block). 

I would love it if someone could help out with a solution for both. 

Am I able to add an animated logo somehow? Like the one on these guys website: https://www.michaelisboyd.com/ 

Long one, sorry 😅

https://violin-halibut-2csa.squarespace.com/

Password: mmmarchitects

Two text blocks on the homepage as reference... if it helps