html, body { background: #1C1D20; }
:where(a), :where(a:hover) { color: #FFFFFF; }

input::placeholder, textarea::placeholder { color: #8B8B8F; opacity: 1; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: #FFFFFF; caret-color: #FFFFFF; -webkit-box-shadow: 0 0 0 1000px #202020 inset; transition: background-color 9999s ease-out 0s; }

.nav-link { color: #FFFFFF; }
.nav-link__dot { background: #D9D9D9; }

.contact { background: #1C1D20; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; }
.contact .wrap { padding-top: calc(252 * var(--k)); }

/* ===== Заголовок с аватаром ===== */
.contact__top { position: relative; padding-left: calc(303 * var(--k)); }
.contact__title { margin: 0; font-weight: 400; font-size: calc(117 * var(--k)); line-height: calc(125.2 / 117); letter-spacing: 0; white-space: nowrap; color: #FFFFFF; }
.contact__title-muted { color: #B3B2B2; }
.contact__avatar { position: absolute; left: calc(1334 * var(--k)); top: calc(151 * var(--k)); width: calc(126 * var(--k)); height: calc(126 * var(--k)); border-radius: 50%; object-fit: cover; background: #3A3B3F; }
.contact__arrow { position: absolute; left: calc(1334 * var(--k)); top: calc(354 * var(--k)); width: calc(22 * var(--k)); height: calc(22 * var(--k)); overflow: visible; }

/* ===== Форма слева, контакты справа ===== */
.contact__body { display: grid; grid-template-columns: calc(873 * var(--k)) 1fr; column-gap: calc(154 * var(--k)); align-items: start; margin-top: calc(132.4 * var(--k)); padding-left: calc(307 * var(--k)); }
/* после отправки форма не схлопывается - низ страницы остаётся на месте */
.brief { min-height: calc(1470 * var(--k)); }
.brief__trap { display: none; } /* ловушка для ботов (pages.ts): невидимое поле браузер не заполняет сам */

/* ===== Поля. Состояния переключает js/contact.js ===== */
.brief__fields { border-top: 1px solid rgba(255,255,255,0.18); }
.field { display: grid; grid-template-columns: calc(71 * var(--k)) minmax(0, 1fr); padding: calc(49 * var(--k)) 0 calc(42 * var(--k)); border-bottom: 1px solid rgba(255,255,255,0.18); transition: border-color .2s; }
.field__num { grid-area: 1 / 1; align-self: start; margin-top: calc(8 * var(--k)); font-weight: 400; font-size: max(12px, calc(13 * var(--k))); line-height: calc(18 / 13); color: #8B8B8F; transition: color .2s; }
.field__label { grid-area: 1 / 2; font-weight: 400; font-size: max(18px, calc(24 * var(--k))); line-height: calc(32 / 24); white-space: nowrap; color: #FFFFFF; }
.field__err { grid-area: 1 / 2; justify-self: end; align-self: start; margin-top: calc(6 * var(--k)); font-weight: 400; font-size: max(13px, calc(15 * var(--k))); line-height: calc(22 / 15); white-space: nowrap; color: #FF6B5E; }
.field__input { grid-area: 2 / 2; display: block; width: 100%; height: calc(44em / 24); box-sizing: border-box; margin: calc(14 * var(--k)) 0 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-weight: 400; font-size: max(18px, calc(24 * var(--k))); line-height: calc(44 / 24); color: #FFFFFF; caret-color: #FFFFFF; }

.field--message { padding-bottom: calc(150 * var(--k)); }
.field--message .field__input { height: calc(220em / 24); margin-top: calc(22 * var(--k)); resize: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; line-height: calc(36 / 24); }

/* активно (в фокусе или заполнено) / в фокусе / ошибка */
.field.is-active .field__num { color: #FFFFFF; }
.field.is-focus { border-bottom-color: #FFFFFF; }
.field.is-error .field__num { color: #FF6B5E; }
.field.is-error { border-bottom-color: #FF6B5E; }

/* «Где вам удобнее ответить?»: свой выпадающий список (js/contact.js) и поле под выбранный способ.
   Кнопка списка - той же высоты, шрифта и отступа от вопроса, что строка ввода: поле не выше соседних, текст на одной линии */
.reply { grid-area: 2 / 2; display: flex; align-items: center; gap: calc(24 * var(--k)); min-width: 0; margin-top: calc(14 * var(--k)); }
.reply .field__input { flex: 1; min-width: 0; margin: 0; }
/* у способа связи подсказка длинная (про ник в Telegram) - справа от заголовка наезжала на него: под полем, как на телефоне */
.field--reply .field__err { grid-area: 3 / 2; justify-self: start; margin-top: calc(12 * var(--k)); white-space: normal; }
.field--reply:not(.is-error) .field__err { display: none; }
.reply__only, .reply__note { font-weight: 400; font-size: max(18px, calc(24 * var(--k))); line-height: calc(44 / 24); }
.reply__only { flex: none; color: #B3B2B2; }
.reply__note { color: #8B8B8F; }
.pick { position: relative; flex: none; }
.pick__btn { display: inline-flex; align-items: center; gap: 0.45em; height: calc(44em / 24); margin: 0; padding: 0 max(12px, calc(18 * var(--k))); border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-weight: 400; font-size: max(18px, calc(24 * var(--k))); line-height: 1; white-space: nowrap; cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; transition: box-shadow .2s; }
.pick__btn:focus-visible { outline-color: #FFFFFF; }
.pick.is-open .pick__btn { box-shadow: inset 0 0 0 1px #FFFFFF; }
@media (hover: hover) { .pick__btn:hover { box-shadow: inset 0 0 0 1px #FFFFFF; } }
.pick__chevron { flex: none; width: 0.5em; height: auto; transition: transform .2s; }
.pick.is-open .pick__chevron { transform: rotate(180deg); }
.pick__list { position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; min-width: 100%; box-sizing: border-box; margin: 0; padding: 6px; list-style: none; background: #26272B; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,0.45); outline: none; }
.pick__list:not([hidden]) { animation: pick-in .16s ease-out; }
@keyframes pick-in { from { opacity: 0; transform: translateY(-4px); } }
.pick__option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 12px; font-weight: 400; font-size: max(16px, calc(18 * var(--k))); line-height: 1.3; white-space: nowrap; color: #B3B2B2; cursor: pointer; }
.pick__option.is-active { background: rgba(255,255,255,0.08); color: #FFFFFF; }
.pick__option[aria-selected="true"] { color: #FFFFFF; }
.pick__option[aria-selected="true"]::after { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #166FF5; }

/* номер: страна (флаг) слева от поля - кнопка как у списка способов, список стран с поиском (js/contact.js) */
.tel { position: relative; flex: 1; display: flex; align-items: center; gap: max(10px, calc(14 * var(--k))); min-width: 0; }
.tel[hidden] { display: none; }
.tel__cc { flex: none; padding: 0 max(10px, calc(14 * var(--k))); }
.tel__cc[hidden] { display: none; }
.tel.is-open .tel__cc { box-shadow: inset 0 0 0 1px #FFFFFF; }
.tel.is-open .tel__cc .pick__chevron { transform: rotate(180deg); }
.tel__flag { flex: none; width: 1.1em; height: 1.1em; object-fit: contain; }
.tel__pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; width: min(380px, calc(100vw - 40px)); box-sizing: border-box; padding: 6px; background: #26272B; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,0.45); outline: none; }
.tel__pop:not([hidden]) { animation: pick-in .16s ease-out; }
.tel__search { display: block; width: 100%; height: 44px; box-sizing: border-box; margin: 0 0 6px; padding: 0 14px; border: 0; border-radius: 12px; outline: none; background: rgba(255,255,255,0.08); color: #FFFFFF; font-family: inherit; font-size: 16px; }
.tel__search::placeholder { color: #8B8B8F; }
.tel__search:focus-visible { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); }
.tel__list { position: relative; max-height: 300px; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; }
.tel__opt { justify-content: flex-start; gap: 12px; }
.tel__opt[hidden] { display: none; }
.tel__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tel__code { flex: none; color: #8B8B8F; }
.tel__empty { padding: 10px 14px; color: #8B8B8F; font-size: 16px; }

@media (prefers-reduced-motion: reduce) { .pick__list:not([hidden]), .tel__pop:not([hidden]) { animation: none; } }

/* ===== Согласие и кнопка ===== */
.brief__actions { --cb: max(18px, calc(20 * var(--k))); position: relative; padding-top: calc(34 * var(--k)); }
.consent-row { display: flex; align-items: center; gap: calc(14 * var(--k)); }

.consent { position: relative; flex: none; width: var(--cb); height: var(--cb); }
.consent__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.consent__box { position: absolute; inset: 0; background: transparent; box-shadow: inset 0 0 0 1px #FFFFFF; outline: 2px solid transparent; outline-offset: 3px; transition: background-color .15s, box-shadow .15s; }
.consent__check { position: absolute; left: 32.5%; top: 15%; width: 25%; height: 45%; box-sizing: content-box; border-right: 2px solid #1C1D20; border-bottom: 2px solid #1C1D20; transform: rotate(45deg); opacity: 0; transition: opacity .15s; }
.consent.is-checked .consent__box { background: #FFFFFF; }
.consent.is-checked .consent__check { opacity: 1; }
.consent.is-error .consent__box { box-shadow: inset 0 0 0 1px #FF6B5E; }
.consent.is-fv .consent__box { outline-color: #FFFFFF; }

.consent__label { font-weight: 400; font-size: max(14px, calc(16 * var(--k))); line-height: calc(26 / 16); white-space: nowrap; color: #B3B2B2; cursor: pointer; }
.consent__label a { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity .2s; }
@media (hover: hover) { .consent__label a:hover { opacity: 0.7; } }
.consent__err { display: block; margin-top: calc(5 * var(--k)); padding-left: calc(var(--cb) + 14 * var(--k)); font-weight: 400; font-size: max(12px, calc(14 * var(--k))); line-height: calc(20 / 14); white-space: nowrap; color: #FF6B5E; }

/* круглая кнопка сидит центром на нижней линии поля «сообщение» */
.brief__submit { --btn: max(120px, calc(208 * var(--k))); position: absolute; left: calc(727 * var(--k) - var(--btn) / 2); top: calc(var(--btn) / -2 - 1px); z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--btn); height: var(--btn); margin: 0; padding: 0; border: 0; border-radius: 50%; background: #166FF5; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-weight: 400; font-size: max(15px, calc(20 * var(--k))); line-height: 1; white-space: nowrap; cursor: pointer; opacity: 1; outline: 2px solid transparent; outline-offset: 6px; transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .25s, opacity .2s; }
@media (hover: hover) { :root:not(.fx) .brief__submit:hover { transform: scale(1.04); background: #2F84FF; } }
.brief__submit:active { transform: scale(0.98); }
.brief__submit.is-sending { cursor: progress; opacity: 0.7; }
.brief__submit.is-fv { outline-color: #FFFFFF; }

/* ===== Заявка отправлена ===== */
.brief-success { box-sizing: border-box; padding-top: calc(50 * var(--k)); border-top: 1px solid rgba(255,255,255,0.18); display: flex; flex-direction: column; align-items: flex-start; }
.brief-success__label { margin: 0; font-weight: 400; font-size: max(11px, calc(12 * var(--k))); line-height: calc(18 / 12); letter-spacing: 0.04em; text-transform: uppercase; color: #8A8A8A; }
.brief-success__title { margin: calc(24 * var(--k)) 0 0; font-weight: 400; font-size: max(36px, calc(64 * var(--k))); line-height: 1.1; color: #FFFFFF; outline: none; }
.brief-success__text { margin: calc(20 * var(--k)) 0 0; max-width: calc(620 * var(--k)); font-weight: 400; font-size: max(17px, calc(22 * var(--k))); line-height: 1.45; color: #B3B2B2; text-wrap: pretty; }
.brief-success__email { color: #FFFFFF; }
.brief-success__reset { width: max(180px, calc(223 * var(--k))); height: max(52px, calc(59 * var(--k))); margin: calc(44 * var(--k)) 0 0; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px #B3B2B2; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-weight: 400; font-size: max(15px, calc(18 * var(--k))); line-height: 1; cursor: pointer; transition: background-color .2s, color .2s; }
@media (hover: hover) { :root:not(.fx) .brief-success__reset:hover { background: #FFFFFF; color: #1C1D20; } }
.brief-success__reset:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ===== Без JavaScript: вместо полей (их прячет noscript в layout.ts) - как написать напрямую, в духе экрана «спасибо» ===== */
.brief__nojs { padding-top: calc(50 * var(--k)); border-top: 1px solid rgba(255,255,255,0.18); }
.brief__nojs-title { margin: 0; font-weight: 400; font-size: max(26px, calc(48 * var(--k))); line-height: 1.15; color: #FFFFFF; }
.brief__nojs-text { margin: calc(20 * var(--k)) 0 0; max-width: max(320px, calc(620 * var(--k))); font-weight: 400; font-size: max(17px, calc(22 * var(--k))); line-height: 1.45; color: #B3B2B2; text-wrap: pretty; overflow-wrap: anywhere; }
.brief__nojs-text a { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity .2s; }
.brief__nojs-text a[href^="tel:"] { white-space: nowrap; } /* номер - одной строкой */
@media (hover: hover) { .brief__nojs-text a:hover { opacity: 0.7; } }

/* ===== Контакты справа ===== */
.contacts { display: flex; flex-direction: column; align-items: flex-start; margin-top: calc(2 * var(--k)); }
.contacts__caption { margin-top: calc(49 * var(--k)); }
.contacts__link { margin-top: calc(10 * var(--k)); font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: calc(28 / 19); white-space: nowrap; color: #FFFFFF; transition: opacity .2s; }
.contacts__link--first { margin-top: calc(15 * var(--k)); }
@media (hover: hover) { .contacts__link:hover { opacity: 0.6; } }

/* ===== Низ страницы ===== */
.contact-footer { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(196 * var(--k)); padding: 0 calc(129 * var(--k)) calc(39 * var(--k)); }
.contact-footer__col { display: flex; flex-direction: column; gap: calc(15 * var(--k)); }
.contact-footer__col--social { min-width: calc(205 * var(--k)); }

/* ===== Планшет: кнопка под согласием, ниже 900 - контакты под формой ===== */
@media (max-width: 1100px) {
  .brief__submit { position: static; margin: 32px 0 0 auto; }
}
@media (max-width: 900px) {
  .contact__body { grid-template-columns: 1fr; row-gap: 64px; padding-right: calc(310 * var(--k)); }
  .brief { min-height: 0; }
}

/* ===== Телефон: форма во всю ширину, ошибка поля - под полем, шрифт полей не меньше 16px (иначе iPhone приближает) ===== */
@media (max-width: 767px) {
  .contact .wrap { padding-top: 150px; }
  .contact__top { --fs: clamp(40px, 12.5vw, 64px); padding: 0 20px; }
  .contact__title { font-size: var(--fs); }
  .contact__avatar { left: auto; right: 20px; top: calc(var(--fs) * 1.07 * 2 + (var(--fs) * 1.07 - 64px) / 2); width: 64px; height: 64px; }
  .contact__arrow { display: none; }

  .contact__body { row-gap: 56px; margin-top: 48px; padding: 0 20px; }
  .field { grid-template-columns: 32px minmax(0, 1fr); padding: 22px 0 10px; }
  .field__num { margin-top: 4px; }
  .field__label { font-size: 17px; white-space: normal; }
  .field__err { grid-area: 3 / 2; justify-self: start; margin-top: 4px; font-size: 13px; white-space: normal; }
  .field:not(.is-error) .field__err { display: none; }
  .field__input { margin-top: 6px; font-size: 18px; }
  .field--message { padding-bottom: 10px; }
  .field--message .field__input { height: calc(160em / 24); margin-top: 10px; }
  /* список и поле контакта - друг под другом: рядом поле стало бы слишком узким для «@rock или +7 …» */
  .reply { flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
  .reply .field__input, .reply .tel { flex-basis: 100%; }
  .tel__pop { left: -32px; right: 0; width: auto; } /* во всю ширину формы - от номера вопроса (32px) до края */
  .reply__only, .reply__note { font-size: 18px; }
  .pick__btn { height: 40px; padding: 0 16px; font-size: 18px; }
  .pick__option { padding: 12px 14px; font-size: 17px; }

  .brief__actions { padding-top: 24px; }
  .consent-row { align-items: flex-start; gap: 12px; }
  .consent { margin-top: 3px; }
  .consent__label { font-size: 14px; line-height: 1.6; white-space: normal; }
  .consent__err { margin-top: 4px; padding-left: calc(var(--cb) + 12px); white-space: normal; }
  /* без параллакса: в потоке он наезжал бы на контакты; relative - чтобы круг заливки при наведении мышью обрезался кнопкой, а не вылезал за край */
  .brief__submit { position: relative; left: auto; top: auto; margin-top: 24px; translate: none; }

  .brief-success { padding-top: 32px; }
  .brief-success__title { margin-top: 16px; }
  .brief-success__text { max-width: none; margin-top: 14px; }
  .brief-success__reset { margin-top: 32px; }
  .brief__nojs { padding-top: 32px; }
  .brief__nojs-text { max-width: none; margin-top: 14px; }

  .contacts__caption { margin-top: 32px; }
  .contacts__link { margin-top: 6px; padding: 4px 0; }
  .contacts__link--first { margin-top: 10px; }

  .contact-footer { flex-direction: column; gap: 32px; margin-top: 96px; padding: 0 20px 28px; }
  .contact-footer__col { gap: 10px; }
  .contact-footer__col--social { min-width: 0; }
}