/* ==========================================================================
   MOTUL Saratov 6.5.4 — mobile MOTUL wordmark + footer contacts
   ========================================================================== */

/* Footer contacts --------------------------------------------------------- */
.motul-v62 .footer-contacts {
  gap: 9px;
}

.motul-v62 .footer-contact-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.motul-v62 .footer-contact-phone > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #f11927;
}

.motul-v62 .footer-contact-phone > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
}

.motul-v62 .footer-contact-phone strong {
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.motul-v62 .footer-contact-phone small {
  color: #8f9aa2;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

.motul-v62 .footer-contact-email {
  color: #cbd1d5;
}

.motul-v62 .footer-contact-network {
  max-width: 250px;
  color: #9ca6ad;
  font-size: 12px;
  line-height: 1.35;
}

.motul-v62 .footer-contact-branches {
  margin-top: 2px;
  color: #ff3441;
  font-weight: 800;
}

.motul-v62 .footer-contact-branches:hover {
  color: #fff;
}

/* The large MOTUL word in the mobile hero looked too condensed compared with
   the desktop version/original MOTUL proportions. Widen only that word. */
@media (max-width: 700px) {
  .motul-v62 .v61-hero .home-hero__copy h1 {
    display: inline-block;
    width: max-content;
    max-width: none;
    transform: scaleX(1.13);
    transform-origin: left center;
    letter-spacing: -.035em;
  }

  .motul-v62 .footer-contact-phone strong {
    font-size: 19px;
  }

  .motul-v62 .footer-contact-network {
    max-width: none;
  }

  .motul-v62 .footer-contact-branches {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 430px) {
  .motul-v62 .v61-hero .home-hero__copy h1 {
    transform: scaleX(1.10);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motul-v62 .v61-hero .home-hero__copy h1 {
    transition: none;
  }
}
