/* =====================================================================
   Страница «Контакты» — стили поверх style.css
   ===================================================================== */

/* ---------- Head ---------- */
.chead {
  position: relative;
  margin: 0 20px;
  padding: 58px 44px 56px;
  border-radius: 28px;
  background: var(--dark) url(../img/to-lines.svg) right -40px top / auto 120% no-repeat;
  color: var(--white);
  overflow: hidden;
}
.chead__crumbs { position: absolute; right: 40px; top: 28px; display: flex; gap: 10px; font-size: 16px; letter-spacing: -0.02em; color: rgba(255, 255, 255, .45); }
.chead__crumbs a:hover { color: var(--white); }
.chead__crumbs span, .chead__crumbs b { color: var(--red); font-weight: 400; }
.chead__title { margin-top: 26px; font-size: 74px; font-weight: 400; line-height: .95; letter-spacing: -0.03em; }
.chead__title b { color: var(--red); font-weight: 600; }
.chead__text { width: 560px; margin-top: 30px; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: rgba(255, 255, 255, .8); }
.chead__actions { display: flex; align-items: center; gap: 34px; margin-top: 44px; }
.chead__actions .btn { min-width: 300px; font-variant-numeric: tabular-nums; }
.chead__link { display: inline-flex; align-items: center; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- Cards + map ---------- */
.cgrid { display: grid; grid-template-columns: 690px 1fr; gap: 20px; margin: 20px 20px 0; }
.cgrid__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
.ccard { display: flex; flex-direction: column; min-height: 222px; padding: 26px 28px 28px; border-radius: 20px; background: var(--gray); color: var(--dark); }
.ccard--red { background: var(--red); color: var(--white); }
.ccard--dark { background: var(--dark); color: var(--white); }
.ccard--wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; }
.ccard__label { font-size: 18px; letter-spacing: -0.02em; opacity: .6; }
.ccard--red .ccard__label, .ccard--dark .ccard__label { opacity: .8; }
.ccard__value { display: block; margin-top: 18px; font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ccard__value--sm { font-size: 24px; }
a.ccard__value { transition: opacity .2s; }
.ccard--red .ccard__value { font-size: 29px; white-space: nowrap; }
a.ccard__value:hover { opacity: .75; }
.ccard__note { margin-top: auto; padding-top: 20px; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; opacity: .65; }
.ccard--red .ccard__note { opacity: .85; }
.ccard__socials { margin-top: 0 !important; }
.cgrid__map { position: relative; min-height: 586px; border-radius: 28px; overflow: hidden; background: var(--blue-light); }
.cgrid__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cgrid__route {
  position: absolute; left: 20px; bottom: 20px;
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  border-radius: 22px; background: var(--dark); color: var(--white);
  font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
}
.cgrid__route:hover { background: #1c1f24; }

/* ---------- How to get ---------- */
.cway { padding: 110px 20px 0; }
.cway__title { padding-left: 0; }
.cway__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.wcard { min-height: 290px; padding: 24px 28px 30px; border-radius: 20px; background: var(--blue-light); display: flex; flex-direction: column; }
.wcard--red { background: var(--red); color: var(--white); }
.wcard__num { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--red); }
.wcard--red .wcard__num { color: var(--white); }
.wcard h3 { margin-top: 14px; font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.wcard p { margin-top: auto; padding-top: 28px; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; }

/* ---------- Callback ---------- */
.cback {
  display: grid; grid-template-columns: 1fr 620px; gap: 60px; align-items: center;
  margin: 110px 20px 0; padding: 56px 44px;
  border-radius: 28px; background: var(--dark); color: var(--white);
}
.cback__title { font-size: 64px; font-weight: 400; line-height: .95; letter-spacing: -0.03em; }
.cback__text { width: 470px; margin-top: 26px; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; opacity: .7; }
.cback__input {
  display: block; width: 100%; height: 64px; margin-bottom: 12px; padding: 0 30px;
  border: 0; border-radius: 32px; background: #f2f5fa;
  font: inherit; font-size: 20px; letter-spacing: -0.02em; color: var(--dark); outline: none;
}
.cback__input::placeholder { color: #a4a8af; }
.cback__input:focus { box-shadow: 0 0 0 2px var(--red); }
.cback__submit { display: block; width: 100%; height: 64px; margin-top: 2px; border-radius: 32px; background: var(--red); color: var(--white); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; transition: background .2s; }
.cback__submit:hover { background: #d92b30; }
.cback__agree { margin-top: 20px; text-align: center; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; }
.cback__agree a { color: #ff777b; text-decoration: underline; text-underline-position: from-font; }

/* ---------- Requisites ---------- */
.creq { display: grid; grid-template-columns: 420px 1fr; gap: 40px; margin: 110px 20px 0; }
.creq__title { font-size: 64px; font-weight: 400; line-height: .95; letter-spacing: -0.03em; }
.creq__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 0; }
.creq__list > div { padding: 18px 0; border-top: 1px solid rgba(12, 14, 17, .1); }
.creq__wide { grid-column: 1 / -1; }
.creq__list dt { font-size: 16px; letter-spacing: -0.02em; color: rgba(12, 14, 17, .5); }
.creq__list dd { margin: 6px 0 0; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }

.cta--contacts { margin-top: 110px; }

@media (max-width: 767px) {
  .chead { margin: 8px var(--pad) 0; padding: 22px 20px 28px; border-radius: var(--radius); background-size: auto 100%; }
  .chead__crumbs { position: static; margin-bottom: 18px; font-size: 14px; }
  .chead .chip { height: 38px; padding: 9px 16px; font-size: 14px; }
  .chead__title { margin-top: 16px; font-size: 40px; }
  .chead__text { width: 100%; margin-top: 18px; font-size: 16px; line-height: 1.3; }
  .chead__actions { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 26px; }
  .chead__actions .btn { min-width: 0; }
  .chead__link { justify-content: center; font-size: 16px; }

  .cgrid { grid-template-columns: 1fr; gap: 10px; margin: 10px var(--pad) 0; }
  .cgrid__cards { grid-template-columns: 1fr; gap: 10px; }
  .ccard { min-height: 0; padding: 20px; border-radius: 18px; }
  .ccard--wide { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ccard__label { font-size: 15px; }
  .ccard__value { margin-top: 10px; font-size: 26px; }
  .ccard--red .ccard__value { font-size: clamp(20px, 7.6vw, 26px); }
  .ccard__value--sm { font-size: 20px; }
  .ccard__note { padding-top: 12px; font-size: 14px; }
  .cgrid__map { min-height: 380px; border-radius: 22px; }

  .cway { padding: 56px var(--pad) 0; }
  .cway__title { padding: 0; }
  .cway__cards { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .wcard { min-height: 0; padding: 20px; border-radius: 18px; }
  .wcard h3 { font-size: 24px; }
  .wcard p { padding-top: 16px; font-size: 16px; line-height: 1.25; }

  .cback { grid-template-columns: 1fr; gap: 24px; margin: 56px var(--pad) 0; padding: 30px 20px; border-radius: 24px; }
  .cback__title { font-size: 34px; }
  .cback__text { width: 100%; margin-top: 14px; font-size: 16px; line-height: 1.3; }
  .cback__input, .cback__submit { height: 60px; font-size: 17px; }
  .cback__input { padding: 0 22px; }
  .cback__agree { font-size: 13px; }

  .creq { grid-template-columns: 1fr; gap: 20px; margin: 56px var(--pad) 0; padding: 0; }
  .creq__title { font-size: 34px; }
  .creq__list { grid-template-columns: 1fr; }
  .creq__list > div { padding: 14px 0; }
  .creq__list dd { font-size: 17px; }

  .cta--contacts { margin-top: 40px; }
}