/* ==========================================================================
   ПЕРЕПЛЁТ · About — раскладки страницы «О нас» (ключ `about`)
   Подключается ПОСЛЕ tokens → base → components → blocks → frames.
   Два экрана: кто мы (hero) → три «ноги» (product__steps) → цифры (hit) →
   три кадра → «напишите нам». Кегли и интерлиньяжи — только токены.
   ========================================================================== */

/* ==========================================================
   HERO — два абзаца лида, без чипов и показателей
   ========================================================== */
.about-hero { min-height: 0; }
.about-hero .hero__lead { max-width: none; }
.about-hero .hero__lead + .hero__lead { margin-top: -0.75rem; }
.about-hero .hero__gallery { min-height: 34rem; }
.about-hero .hero__photo--1 { width: min(84%, 34rem); top: -8%; }
.about-hero .hero__photo--2 { width: min(74%, 30rem); top: 50%; }
.about-hero .hero__stamp { left: 0; right: auto; bottom: -2%; }
@media (max-width: 1080px) { .about-hero .hero__gallery { min-height: 26rem; } }

/* ==========================================================
   ТРИ НОГИ — карточки product__steps, текста чуть больше, чем на главной
   ========================================================== */
.legs .product__step p { color: var(--fg); }

/* ==========================================================
   ЦИФРЫ — подписи длиннее обычных, даём им место
   ========================================================== */
.about-hit .stat__label { max-width: 24ch; }
.about-hit .stat__value--text { font-size: var(--fs-stat); }

/* ==========================================================
   ТРИ КАДРА — ряд полароидов под карточками
   ========================================================== */
.legs .about-photos__grid { margin-top: 3rem; }
.about-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}
.about-photos__grid .polaroid { margin: 0; }
@media (max-width: 900px) {
  .about-photos__grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory;
    padding: 0.5rem var(--gutter) 1rem;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    scrollbar-width: none;
  }
  .about-photos__grid::-webkit-scrollbar { display: none; }
  .about-photos__grid .polaroid { flex: 0 0 70vw; scroll-snap-align: center; }
}

/* ==========================================================
   НАПИШИТЕ НАМ — как блок Даши на главной, на белой бумаге.
   Форма занимает всю ширину рядом с фото.
   ========================================================== */
/* Даша на «О нас»: Telegram виден и на десктопе, не только ниже 900. */
#about-form .form__lead-in { display: block; margin-bottom: 1.25rem; }
#about-form .form__lead-in .form__tg { width: 100%; min-height: 3.25rem; white-space: normal; }
#about-form .form__lead-in .form__or { display: block; text-align: center; margin: 0.85rem 0 0; }
#about-form .input,
#about-form .textarea {
  background: #fff;
  border: 1px solid rgba(36, 33, 33, 0.55);
  color: var(--ink-900);
}
#about-form .input::placeholder,
#about-form .textarea::placeholder { color: #4a4a4a; }

.contact .section__head { margin-bottom: 2.5rem; }
.contact .section__head .lead { max-width: none; }
.contact .manager__text h3 { font-size: var(--fs-h3); line-height: var(--lh-display); margin: 0; }
.contact .manager__photo .host__photo { aspect-ratio: 1; }
@media (max-width: 600px) {
  .contact .manager__actions .btn { width: 100%; }
}

/* Шапка: выпадающее меню поверх тёмных секций */
.nav__menu { color: var(--ink-900); }