/* Полоса заявки. Десктоп - фрейм PdUFz (1440x284), мобильная - I5WrKq (390x395).
   Ширина текстовой колонки в макете 965 - это не заданное число, а остаток:
   1328 минус блок действий (307) минус зазор (56). Поэтому здесь flex, а не ширины. */

.strip { background: var(--paper); }

.strip__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  padding-block: 72px;
}

.strip__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.strip__kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 3px;
  color: var(--magenta-text);
}

.strip__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 38px;
  /* В макете 1.14, то есть 43.32 px. pen округляет строку до целого, и из
     дробной высоты набегает лишний пиксель на всю полосу, поэтому держим
     ровно ту высоту строки, которую рисует макет. */
  line-height: 43px;
  letter-spacing: -1.2px;
  color: var(--ink);
}

.strip__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 27px;   /* 16 x 1.7 = 27.2, в макете строка 27 */
  color: var(--muted);
}

.strip__actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.strip__btn {
  padding: 18px 32px;
  font-size: 15px;
  line-height: 18px;
}

.strip__contacts {
  display: flex;
  align-items: center;
  gap: 10px;
}

.strip__phone {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  color: var(--ink);
  white-space: nowrap;
}

.strip__dot {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 18px;
  color: var(--muted);
}

.strip__contacts .ico {
  width: 17px;
  height: 17px;
  color: var(--ink);
  transition: color .15s ease;
}

.strip__contacts .soc__link:hover .ico { color: var(--magenta-text); }

@media (max-width: 860px) {
  .strip__in {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-block: 48px;
  }

  .strip__text {
    gap: 18px;
    display: contents;
  }

  .strip__kicker {
    font-size: var(--m-kicker);
    line-height: 13px;
    letter-spacing: var(--m-kicker-ls);
  }

  .strip__title {
    font-size: 27px;
    line-height: 31px;   /* 27 x 1.15 = 31.05 */
    letter-spacing: -0.9px;
  }

  .strip__lead {
    font-size: 15px;
    line-height: 26px;   /* 15 x 1.7 = 25.5 */
  }

  .strip__actions {
    display: contents;
  }

  .strip__btn {
    padding: 17px 24px;
    width: 100%;
  }

  .strip__contacts {
    gap: 12px;
    padding-top: 4px;
  }

  .strip__contacts .ico { width: 18px; height: 18px; }

  .strip__dot { display: none; }
}

/* Лид на мобильной в макете короче - держим оба текста и показываем нужный. */
.strip__lead--m { display: none; }

@media (max-width: 860px) {
  .strip__lead--d { display: none; }
  .strip__lead--m { display: block; }
}