/* About, первый экран: фото выше и правее, логотип на стенде виден над цифрами (решение владельца 7.11.2026).
   Текст стоит на тёмной части зала, белая стена начинается правее него. */
@media (min-width: 900px) {
  .about-hero .phx__media { left: 20%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
  .about-hero .phx__shade { background: linear-gradient(180deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 20%), linear-gradient(90deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .5) 38%, rgba(10, 10, 10, 0) 50%), linear-gradient(0deg, rgba(10, 10, 10, .94) 0%, rgba(10, 10, 10, .84) 11%, rgba(10, 10, 10, .42) 18%, rgba(10, 10, 10, 0) 25%); }
  .about-hero .phx__h1 { font-size: clamp(36px, min(4.4vw, 8svh), 68px); max-width: 8em; }
  .about-hero .phx__lead { max-width: min(34vw, 520px); }
}
/* на телефоне фото отдельным блоком над текстом: так логотип не закрыт на экране любой высоты */
.about-hero picture { display: contents; }
@media (max-width: 899px) {
  .about-hero { height: auto; min-height: 0; justify-content: flex-start; }
  .about-hero .phx__media { position: relative; inset: auto; flex: none; height: clamp(300px, 85vw, 520px); overflow: hidden; }
  .about-hero .phx__media img { object-position: 50% 70%; }
  .about-hero .phx__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, 0) 24%, rgba(10, 10, 10, 0) 80%, var(--graphite) 100%); }
  .about-hero .phx__shade { display: none; }
  .about-hero .phx__copy { padding-top: 12px; }
}