/* The approved mascot sits beside the blue headline and quote contact details. */
.hero h1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(102px, 10.5vw, 168px);
  column-gap: 12px;
  align-items: center;
}

.hero-heading-lead { min-width: 0; }
.hero h1 em { grid-column: 1 / -1; }
.hero-heading-mascot {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .hero h1 {
    grid-template-columns: minmax(0, 1fr) clamp(90px, 25vw, 150px);
    column-gap: 10px;
  }
}

.quote-team {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.quote-mascot {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  justify-self: center;
}

.quote-contact-details { min-width: 0; }
.quote-contact-details .quote-phone { margin-top: 0; gap: 10px; }
.quote-contact-details .quote-phone > span { width: 36px; height: 36px; flex-shrink: 0; }
.quote-contact-details .quote-phone strong { font-size: clamp(19px, 1.8vw, 24px); }
.quote-contact-details .quote-location { gap: 10px; font-size: 11px; }
.quote-contact-details .quote-location > .icon { margin-inline: 7px; flex-shrink: 0; }
.quote-google-proof {
  position: relative;
  display: block;
  width: 100%;
  max-width: 260px;
  margin-top: 22px;
}
.quote-google-proof .google-review-badge { display: block; }
/* Lighten only the badge lettering, keeping the Google colors and gold stars. */
.quote-google-proof::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/brand/google-five-star-reviews.png") center / 100% 100% no-repeat;
  clip-path: inset(55% 0 0 31%);
  filter: brightness(0) invert(1);
  pointer-events: none;
}

@media (max-width: 1000px) {
  .quote-team { gap: 14px; }
  .quote-contact-details .quote-phone > span,
  .quote-contact-details .quote-location > .icon { display: none; }
  .quote-contact-details .quote-phone small { font-size: 7px; }
}

@media (max-width: 760px) {
  .quote-team { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); max-width: 470px; margin-top: 24px; }
  .quote-mascot { max-width: 170px; }
  .quote-contact-details .quote-phone strong { font-size: clamp(19px, 5vw, 24px); }
}

@media (max-width: 370px) {
  .quote-team { gap: 10px; }
  .quote-contact-details .quote-phone small { letter-spacing: 0; }
}