/* =========================================================
   ЗАЯВКА И КОНТАКТЫ: форма, сообщение об успехе, контакты
   ========================================================= */

.contact { row-gap: 64px; }
.contact__intro { grid-column: 1 / span 5; }
.contact__intro .h2 { margin-top: 24px; }
.contact__intro .lead { margin-top: 28px; max-width: 30ch; }
.contact__form-wrap { grid-column: 7 / span 6; position: relative; }

/* ---------- Форма ---------- */
.form { display: grid; gap: 40px; transition: opacity .5s var(--ease); }
.form.is-hidden { opacity: 0; pointer-events: none; }

.field { position: relative; }

/* Минималистичные инпуты: только нижняя граница, без заливки */
.field input {
  width: 100%;
  padding: 28px 0 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--fg);
  font: inherit;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 300;
  outline: none;
  transition: border-color .3s;
  -webkit-appearance: none;
  appearance: none;
}
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  transition: background-color 9999s;
}
.field input:focus { border-bottom-color: var(--fg); }
.field input[aria-invalid="true"] { border-bottom-color: var(--error); }

/* Плавающая подпись поля */
.field label {
  position: absolute; left: 0; top: 30px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 300;
  color: var(--dim);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .35s var(--ease), color .35s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  transform: translateY(-28px) scale(.6);
  color: var(--muted);
}

.form__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.form__note { font-size: 12px; color: var(--dim); max-width: 36ch; }
.form__error { font-size: 13px; color: var(--error); min-height: 1em; }

.submit-btn[disabled] { opacity: .4; cursor: progress; }

/* ---------- Сообщение об успешной отправке (на месте формы) ---------- */
.form-success {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  opacity: 0; visibility: hidden;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.form-success.is-visible { opacity: 1; visibility: visible; transform: none; }
.form-success__icon { width: 56px; height: 56px; }
.form-success__title { font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; max-width: 22ch; }
.form-success .btn { align-self: flex-start; border-bottom-color: var(--dim); }

/* ---------- Прямые контакты ---------- */
.contacts-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: 48px;
  border-top: 1px solid var(--line);
  list-style: none;
}
.contacts-list .eyebrow { display: block; margin-bottom: 12px; }
.contacts-list a { font-size: clamp(16px, 1.3vw, 19px); font-weight: 400; transition: color .3s; word-break: break-word; }
.contacts-list a:hover { color: var(--muted); }

@media (max-width: 1024px) {
  .contact__intro,
  .contact__form-wrap { grid-column: 1 / -1; }
  .contacts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}

@media (max-width: 680px) {
  .contacts-list { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  /* Зона нажатия ~44 px по высоте — удобно попадать пальцем */
  .contacts-list a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}