Quote Block: Hanging quote marks, different color than text?

I would like to hang my beginning quote marks to the left of my quote block and make both opening and closing quote marks a different color than the text. Could someone please help? Example attached.

Bonus ask: Is it possible to flush left the source, get rid of the "—", apply different text styles and sizes to a source name and the source position/company on the next line? Ideally, I'd like to have:

Firstname Surname (upper and lower case, 14 px)
CEO, Acme Paints (all caps, 10 px)

My site in progress

Thank you!

Hi Kayt, you'll need to set your website to have a site-wide password and share that so we can take a look:

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

Doh! Thanks, Cass. 

https://polygon-flugelhorn-w4mh.squarespace.com/config/
PW: Octob3r

@kaytdefever give this a go:

// QUOTE BLOCK //

// color of quote marks
.sqs-block-quote blockquote span {
  color: red;
}

.sqs-block-quote blockquote span:first-child {
  display: inline-block;
  margin-left: -10px; // space on left of first quote
  margin-right: 2px; // space on right of first quote
}

// hide dash
.sqs-block-quote .source::first-letter {
 color: transparent !important;
 margin-left: -20px;
}

// source name
.sqs-block-quote .source {
  padding-top: 10px; // space above name
  text-align: left;
  font-size: 14px;
}

// source title
.sqs-block-quote .source span {
    display: block;
  padding-top: 10px; // space above title
  font-size: 10px; // size of title
  text-transform: uppercase;
}

For the title section to work with the above code, you'll need to enter <span> tags around the title/company name, like this:

There's some kind of limitation with Firefox for the treatment of the dash (it's set up in the Squarespace HTML rather than CSS) - I checked in Chrome and it's transparent there, but not FF.

Thanks so much for your help, @CassAggett!

A couple follow-up questions for you:

The dash disappeared in Chrome but then there was a blank space in its place. I made a clunky adjustment to the code and shifted the margin-left: -26px. That probably looks like crap in FF now though. Is there any other way to do this? If it's not going to look consistent, I'm fine with leaving the dash in, no big deal.

I adjusted the sizes of the source name and title and now there's too much line space between the two. How can I tighten up the space? It doesn't look like I can put a negative number in padding-top.

Thank you so much!

https://polygon-flugelhorn-w4mh.squarespace.com/config/pages/650cd14f0414b2080da6a0b7
PW: Octob3r