/* ============================================================
   КОНТАКТЫ
   Первая страница проекта со своим CSS, и это тот случай, когда
   он правда нужен: остальные пять страниц собраны из блоков услуг,
   а здесь ни каталога, ни таблицы, ни оффера — только контакт
   и реквизиты.

   Первого экрана с рендером тут нет намеренно. На странице услуги
   предмет работает на продажу, здесь работает телефон: картинка
   отодвинула бы его вниз, а человек пришёл звонить.
   ============================================================ */
.kt-sect{ padding-top:clamp(96px, 9vw, 150px); }

.kt__head{ max-width:52ch; }

/* Заголовок страницы на ступень крупнее заголовка секции: это h1,
   и на странице он единственный. Верх шкалы взят от .h2 и поднят,
   нижний край оставлен прежним — на телефоне «Контакты» и так
   занимают строку целиком. */
.kt__title{ font-size:clamp(28px, 3.2vw, 54px); }

.kt__lead{
  margin:clamp(16px, 1.7vw, 28px) 0 0;
  font-size:clamp(15px, 1.12vw, 19px);
  line-height:1.6;
  color:var(--fg-lead);
}

/* Четыре карточки в ряд на широком экране, по две на среднем.
   Минимум 260px: ниже телефон переносится по строке, а его нужно
   читать одним куском. */
.kt{
  margin-top:clamp(28px, 3vw, 52px);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(14px, 1.4vw, 24px);
  align-items:stretch;
}

.kt__card{
  display:flex;
  flex-direction:column;
  padding:clamp(20px, 2vw, 34px);
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}

.kt__cap{
  margin:0 0 clamp(10px, 1vw, 16px);
  font-family:var(--font);
  font-size:clamp(12px, .72vw, 12px);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--fg-mute);
}

/* Телефон и почта — самое крупное на странице после заголовка.
   Это и есть содержание страницы контактов. */
.kt__value{
  display:block;
  font-size:clamp(18px, 1.5vw, 24px);
  font-weight:600;
  line-height:1.3;
  color:var(--fg);
  overflow-wrap:anywhere;      /* длинная почта не должна рвать карточку */
}
a.kt__value{ transition:color .2s var(--ease); }
a.kt__value:hover{ color:var(--accent-1); }

/* Адрес и заголовок карточки заявки — не ссылки, и подсвечиваться
   при наведении им незачем. */
.kt__value--plain{ margin:0; }

.kt__note{
  margin:clamp(10px, .9vw, 14px) 0 0;
  font-size:clamp(14px, .92vw, 14px);
  line-height:1.55;
  color:var(--fg-mute);
}

/* Карточка с кнопкой: кнопка прижата к низу, чтобы в ряду карточек
   разной высоты она стояла на одной линии с нижним краем соседних. */
.kt__card--cta{ background:var(--accent-wash); box-shadow:none; }
.kt__card--cta .btn{ width:100%; margin-top:auto; }
.kt__card--cta .kt__note{ margin-bottom:clamp(16px, 1.6vw, 24px); }

.kt__msgs{
  display:grid;
  gap:clamp(8px, .7vw, 12px);
  margin-top:clamp(8px, .7vw, 12px);
}

/* ------------------------------------------------------------
   РЕКВИЗИТЫ
   Описательный список, а не таблица: у реквизитов пары «название —
   значение». Таблица из соседних страниц (how__table) не подошла:
   у неё min-width 720px под четыре колонки, и на телефоне две
   колонки реквизитов уезжали бы вбок без всякой причины.
   ------------------------------------------------------------ */
/* Своего отступа сверху у блока нет намеренно: у .section уже есть поле
   в 95px, и вместе с добавочным margin между карточками и заголовком
   «Реквизиты» получалось 227px пустоты. На длинной странице услуг это
   не видно, на короткой странице контактов читается дырой. */

.reqs{
  margin:clamp(24px, 2.6vw, 44px) 0 0;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface);
  box-shadow:var(--shadow-card);
  overflow:hidden;             /* скругление не должно резаться строками */
}

.reqs__row{
  display:grid;
  grid-template-columns:minmax(180px, 260px) 1fr;
  gap:clamp(12px, 1.4vw, 28px);
  padding:clamp(14px, 1.2vw, 20px) clamp(16px, 1.6vw, 28px);
  border-bottom:1px solid var(--line);
}
.reqs__row:last-child{ border-bottom:0; }

.reqs dt{
  font-size:clamp(14px, .92vw, 14px);
  color:var(--fg-mute);
}

.reqs dd{
  margin:0;
  font-size:clamp(14px, 1.02vw, 16px);
  line-height:1.5;
  color:var(--fg);
  overflow-wrap:anywhere;      /* длинное наименование юрлица */
}

@media (max-width: 700px){
  /* В одну колонку: название над значением. Так реквизиты читаются
     и копируются на телефоне, а не жмутся в две узкие полосы. */
  .reqs__row{ grid-template-columns:1fr; gap:4px; }
}