/**
 * Общий слой интерфейса: доступность, контраст и читаемость текста.
 *
 * Собранный style.css не редактируется, поэтому исправления живут здесь и
 * подключаются после него. Здесь только то, что мешало пользоваться сайтом:
 * невидимый фокус, слишком светлый служебный текст, мелкий шрифт на ноутбуках,
 * крошечный крестик у формы и скрытые сообщения об ошибках.
 */

/* ==================== размеры текста ==================== */

/*
 * Базовый rem в теме привязан к vw и на каждом брейкпоинте пересчитывается
 * скачком: на 1281px корень около 10.7px, на 1280px — уже 16px. Из-за этого
 * на обычном ноутбуке 1366px текст ответов FAQ и пунктов меню опускался
 * примерно до 11px.
 *
 * Раскладку на rem не трогаем — она держит всю сетку. Вместо этого у текстовых
 * элементов появляется собственная непрерывная шкала: она задана в px и vw,
 * поэтому не зависит от скачков корневого размера и не имеет разрывов
 * на границах 576/577, 992/993 и 1280/1281.
 */
:root {
	--fs-body: clamp(15px, max(1rem, 0.35vw + 12.5px), 26px);
	--fs-body-sm: clamp(14px, max(0.9375rem, 0.3vw + 11.5px), 24px);
	--fs-lead: clamp(17px, max(1.25rem, 0.45vw + 15px), 34px);
	--fs-nav: clamp(15px, max(1rem, 0.3vw + 12.5px), 22px);
	--fs-caption: clamp(13px, max(0.875rem, 0.22vw + 11px), 20px);

	/* служебный текст: контраст к белому не ниже 4.5:1 */
	--color-muted: #6e6e6e;
}

/* хлебные крошки */
.breadcrumbs-link,
.breadcrumbs-title {
	font-size: var(--fs-caption);
}

.breadcrumbs-link {
	color: var(--color-muted);
}

/* меню и выпадающий список «Экспертиза» */
.header-menu ul li a,
.header-nav__expertise-toggle,
.header-dropdown__link {
	font-size: var(--fs-nav);
}

.header-dropdown--mobile .header-dropdown__link {
	font-size: var(--fs-body-sm);
}

/* FAQ на отраслевых страницах.
   Селекторы с родителем — industry.css подключается позже и иначе перебивает. */
.faq .faq__question,
.faq__list .faq__question {
	font-size: var(--fs-lead);
}

.faq .faq__answer,
.faq__list .faq__answer {
	font-size: var(--fs-body);
	line-height: 1.55;
}

/* Описание отрасли на главной: в industry-expertise.css селектор начинается
   с #services, поэтому здесь нужен такой же вес плюс класс. */
#services.industry-expertise .industry-expertise__desc {
	color: var(--color-muted);
}

/* подписи в блоке описания кейса */
.case-description-item__name {
	font-size: var(--fs-caption);
	color: var(--color-muted);
}

/* поля формы */
.popup-form-block__inputs .label,
.popup-form-block__inputs .input,
.popup-form-block__inputs .textarea {
	font-size: var(--fs-body);
}

/*
 * Ниже 993px тема намеренно увеличивает корневой размер — это её планшетная
 * и мобильная подача, и она сохраняется: max() в токенах отдаёт предпочтение
 * штатному rem там, где он крупнее. Отдельных правил для этих ширин не нужно.
 */

/* ==================== якоря под фиксированной шапкой ==================== */

/*
 * Шапка закреплена сверху и занимает от 76 до 102px в зависимости от ширины.
 * Без запаса переход по якорю прятал начало секции под шапкой.
 */
#about,
#services,
#contacts,
#portfolio {
	scroll-margin-top: clamp(96px, 5.4vw, 120px);
}

/* ==================== видимый фокус ==================== */

/*
 * В style.css у button, input и textarea глобально снят outline, а локальные
 * правила закрывали только часть элементов. Возвращаем единое состояние
 * фокуса с клавиатуры — на мышь оно не влияет.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 0.1875rem solid #8228e3;
	outline-offset: 0.125rem;
}

/* на тёмной подложке фиолетовый плохо читается — там белая рамка */
.header:not(.header-white) a:focus-visible,
.header:not(.header-white) button:focus-visible,
.header-burger-window a:focus-visible,
.header-burger-window button:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.request a:focus-visible,
.request button:focus-visible {
	outline-color: #ffffff;
}

/* ==================== аккордеон «Этапы работ» ==================== */

/*
 * Заголовок этапа остаётся прежним блоком, а поверх него лежит настоящая
 * кнопка: этап открывается с клавиатуры, а вёрстка не меняется.
 */
.accordion__trigger {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 2;
}

.accordion__trigger:focus-visible {
	outline-offset: -0.25rem;
}

/* ==================== модальные окна ==================== */

/*
 * Крестик был областью примерно 18×15px — слишком мелкая цель для пальца.
 * Сам значок остаётся прежнего размера, увеличивается зона нажатия.
 */
.popup-form-block-close,
.popup-thank-block-close {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #cfd0d0;
	right: 0.75rem;
	top: 0.75rem;
	cursor: pointer;
	-webkit-transition: color 0.2s ease;
	transition: color 0.2s ease;
}

.popup-form-block-close:hover,
.popup-thank-block-close:hover,
.popup-form-block-close:focus-visible,
.popup-thank-block-close:focus-visible {
	color: #111315;
}

.popup-form-block-close svg,
.popup-thank-block-close svg {
	width: 1.125rem;
	height: 0.9375rem;
	min-width: 14px;
	min-height: 12px;
}

/* заголовок окна стал h2 — сбрасываем браузерные отступы */
.popup-form-block__title,
.popup-thank-block__title {
	margin-top: 0;
}

/* пока окно открыто, фон не должен перехватывать указатель */
[inert] {
	pointer-events: none;
}

.popup-form[inert],
.popup-thank[inert],
.popup-soon[inert] {
	pointer-events: none;
}

/* ==================== сообщения формы ==================== */

/*
 * Тема прятала и общий ответ формы, и подсказки у полей: при ошибке
 * пользователь видел только красную рамку и не понимал, что не так.
 * Успешную отправку по-прежнему показывает отдельное окно благодарности,
 * поэтому открываем только сообщения об ошибках.
 */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	display: block;
	margin-top: 0.75rem;
	padding: 0.625rem 0.875rem;
	border-radius: 0.5rem;
	background-color: #fdeaea;
	color: #8a1c1c;
	font-size: var(--fs-body-sm);
	line-height: 1.4;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	color: #8a1c1c;
	font-size: var(--fs-caption);
	line-height: 1.35;
}

.form-field__error:empty {
	display: none;
}

.form-field__error {
	display: block;
	margin-top: 0.375rem;
	color: #8a1c1c;
	font-size: var(--fs-caption);
	line-height: 1.35;
}

/* ==================== блок «Давайте обсудим» ==================== */

/*
 * Секция появлялась слишком поздно и слишком долго.
 *
 * В собранном бандле заголовок анимируется по строкам с триггером
 * «top center» — то есть текст начинал проявляться, только когда верх блока
 * доходил до середины экрана: пользователь успевал увидеть пустую область.
 * Реплики справа собраны в последовательную ленту: три пары по 0.7s + 0.5s,
 * почти три секунды до полного появления.
 *
 * Бандл править нельзя, поэтому его начальные значения перекрываются здесь,
 * а появление берёт на себя своя лёгкая анимация: старт сразу при входе
 * секции в экран, вся сцена укладывается примерно в 0.6s.
 * Композиция, цвета, фотография и кнопка не меняются.
 */
.request .word,
.request .request__text--bottom .whitespace {
	opacity: 1 !important;
	-webkit-transform: none !important;
	    -ms-transform: none !important;
	        transform: none !important;
	translate: none !important;
}

/* линии-выноски рисуются, но быстро и почти одновременно */
.request__line line {
	stroke-dasharray: 620 !important;
	stroke-dashoffset: 620 !important;
	-webkit-transition: stroke-dashoffset 0.5s ease-out;
	transition: stroke-dashoffset 0.5s ease-out;
}

.request__message {
	opacity: 0 !important;
	-webkit-transform: translateY(0.5rem) !important;
	    -ms-transform: translateY(0.5rem) !important;
	        transform: translateY(0.5rem) !important;
	translate: none !important;
	-webkit-transition: opacity 0.4s ease-out, -webkit-transform 0.4s ease-out;
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* скрытое состояние включает скрипт — без него текст остаётся видимым */
.request.js-reveal .request__text--top > p,
.request.js-reveal .request__text--bottom,
.request.js-reveal .request__group {
	opacity: 0;
	-webkit-transform: translateY(1.25rem);
	    -ms-transform: translateY(1.25rem);
	        transform: translateY(1.25rem);
	-webkit-transition: opacity 0.45s ease-out, -webkit-transform 0.45s ease-out;
	transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.request.is-revealed .request__text--top > p,
.request.is-revealed .request__text--bottom,
.request.is-revealed .request__group {
	opacity: 1;
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}

/* небольшой сдвиг между строками, а не растянутая цепочка */
.request.is-revealed .request__group {
	-webkit-transition-delay: 0.06s;
	        transition-delay: 0.06s;
}

.request.is-revealed .request__text--bottom {
	-webkit-transition-delay: 0.12s;
	        transition-delay: 0.12s;
}

.request.is-revealed .request__line line {
	stroke-dashoffset: 0 !important;
}

.request.is-revealed .request__message {
	opacity: 1 !important;
	-webkit-transform: none !important;
	    -ms-transform: none !important;
	        transform: none !important;
}

.request.is-revealed .request__item--2 .request__line line,
.request.is-revealed .request__item--2 .request__message {
	-webkit-transition-delay: 0.07s;
	        transition-delay: 0.07s;
}

.request.is-revealed .request__item--3 .request__line line,
.request.is-revealed .request__item--3 .request__message {
	-webkit-transition-delay: 0.14s;
	        transition-delay: 0.14s;
}

@media (prefers-reduced-motion: reduce) {
	.request.js-reveal .request__text--top > p,
	.request.js-reveal .request__text--bottom,
	.request.js-reveal .request__group,
	.request__message {
		opacity: 1 !important;
		-webkit-transform: none !important;
		    -ms-transform: none !important;
		        transform: none !important;
	}

	.request__line line {
		stroke-dashoffset: 0 !important;
	}
}

/* ==================== видео в кейсах ==================== */

/*
 * Тема отключала указатель у ролика, пока на него не навели мышью. На тач-
 * устройствах и при управлении с клавиатуры это делало элементы управления
 * недоступными. Там, где мыши нет, ролик снова кликабелен.
 */
@media (hover: none), (pointer: coarse) {
	.case-video .case-video__video,
	.case-video .case-video__video:not(:hover) {
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-video .case-video__video,
	.case-video .case-video__video:not(:hover) {
		pointer-events: auto;
	}
}

/* с показанными элементами управления ролик тоже должен принимать нажатия */
.case-video .case-video__video[controls],
.case-video .case-video__video[controls]:not(:hover) {
	pointer-events: auto;
}

/* ==================== Turnstile ==================== */

/* проверка Cloudflare шире узкого телефона — даём ей ужиматься */
.wpcf7-turnstile,
.cf-turnstile {
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 400px) {
	.wpcf7-turnstile iframe,
	.cf-turnstile iframe {
		max-width: 100%;
	}
}

/* ==================== текстовые страницы (page.php) ==================== */

.page-text {
	min-height: 100vh;
	background-color: #111315;
	color: #fff;
	padding: 9.375rem 0 6.25rem;
}

.page-text__block {
	max-width: min(100%, 52em); /* от размера текста, а не от rem: на 1440 rem = 12px */
	margin: 0 auto;
	font-size: var(--fs-body);
}

.page-text__title {
	font-family: Unbounded, sans-serif;
	font-weight: 400;
	/* «КОНФИДЕНЦИАЛЬНОСТИ» (Unbounded — широкий) должно влезать в строку и на
	   320px: при 18px слово 297px > 284px контейнера и рвётся «…НОСТ / И»;
	   нижняя граница 16px даёт 5.2vw = 16.6px на 320 (≈273px), на ≥360px — как раньше */
	font-size: clamp(16px, min(2.2em, 5.2vw), 48px);
	line-height: 1.15;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	margin: 0 0 1.5em;
}

.page-text__content {
	font-family: Inter, sans-serif;
	font-size: var(--fs-body);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.page-text__content h2 {
	font-family: Unbounded, sans-serif;
	font-weight: 400;
	font-size: var(--fs-lead);
	line-height: 1.3;
	color: #fff;
	margin: 2em 0 0.75em;
}

.page-text__content p,
.page-text__content ul,
.page-text__content ol {
	margin: 0 0 1em;
}

.page-text__content ul,
.page-text__content ol {
	padding-left: 1.5em;
	list-style: disc; /* тема сбрасывает маркеры списков */
}

.page-text__content ol {
	list-style: decimal;
}

.page-text__content li {
	margin-bottom: 0.5em;
}

.page-text__content a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.page-text__content a:hover {
	color: var(--accent, #8228e3);
}

@media (max-width: 767px) {
	.page-text {
		padding: 7.5rem 0 4.375rem;
	}
}

/* ==================== согласие на обработку ПД в форме ==================== */

/* Чекбокс Contact Form 7 [acceptance]: одна строка мелким текстом под полями,
   в стиле подписей формы. Кнопка «Отправить» без галочки не активна —
   это штатное поведение CF7, серверная проверка тоже его.
   Тема глобально снимает appearance у input, поэтому квадрат и галочка
   рисуются здесь — в цветах полей формы и акцента. */
.popup-form-block__consent {
	width: 100%;
	margin-top: 1rem;
}

.popup-form-block__consent .wpcf7-form-control-wrap,
.popup-form-block__consent .wpcf7-acceptance,
.popup-form-block__consent .wpcf7-list-item {
	display: block;
	margin: 0;
}

.popup-form-block__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	cursor: pointer;
	font-size: var(--fs-caption, 0.8125rem);
	line-height: 1.4;
	color: #575F6E;
}

.popup-form-block__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.125rem 0 0;
	border: 0.0625rem solid #BECBE1;
	border-radius: 0.25rem;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.popup-form-block__consent input[type="checkbox"]:hover {
	border-color: var(--accent, #8228e3);
}

.popup-form-block__consent input[type="checkbox"]:checked {
	border-color: var(--accent, #8228e3);
	background-color: var(--accent, #8228e3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.popup-form-block__consent input[type="checkbox"]:focus-visible {
	outline: 0.125rem solid var(--accent, #8228e3);
	outline-offset: 0.125rem;
}

.popup-form-block__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.popup-form-block__consent a:hover {
	color: var(--accent, #8228e3);
}

/* кнопка, пока согласие не дано */
.popup-form-block__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==================== стрелка на первом экране ==================== */

/* Поворот стрелки при наведении (transition 2s в теме) идёт на большой
   картинке; без собственного слоя браузер перерисовывает её каждый кадр —
   отсюда рывки, особенно пока страница ещё догружается. Слой заранее. */
@media (min-width: 993px) {
	.main-screen__image {
		will-change: transform;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
	}
}

/* ==================== движение ==================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		-webkit-animation-duration: 0.01ms !important;
		        animation-duration: 0.01ms !important;
		-webkit-animation-iteration-count: 1 !important;
		        animation-iteration-count: 1 !important;
		-webkit-transition-duration: 0.01ms !important;
		        transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- футер: зона нажатия ссылок ---------- */

/* «(Behance)», «(Профиль на Fl)», телефон и почта — блочные ссылки высотой в
   строку текста (21–23px на телефоне, где корневой кегль уменьшен); WCAG 2.5.8
   просит минимум 24×24. Минимальная высота в px добавляет 1–3px снизу — на
   вёрстку не влияет. */
.footer__link,
.footer__phone,
.footer__mail {
	min-height: 24px;
}

/* ==================== карточка кейса: отрасль и состав работ ==================== */

/* Короткая мета под названием: человеку из рекламы нужно сразу понять,
   что за проект и какой объём работ за ним стоит. */
.portfolio-card__meta {
	margin-top: 0.5rem;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: clamp(13px, 0.9375rem, 18px);
	line-height: 1.3;
	color: var(--accent, #8228e3);
}

.portfolio-card__scope {
	margin-top: 0.25rem;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: clamp(12px, 0.875rem, 17px);
	line-height: 1.35;
	color: #6f7276;
}

/* ==================== блок «Стоимость рассчитывается индивидуально» ==================== */

.estimate__block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 2.5rem 4.375rem;
	align-items: start;
}

.estimate__sub {
	margin: 0 0 1.25rem;
	color: #6f7276;
}

.estimate__title {
	margin: 0;
	font-family: Unbounded, sans-serif;
	font-weight: 400;
	/* корневой кегль темы растёт на узких экранах, поэтому одних rem мало:
	   на 390px 3.125rem = 54px и «рассчитывается» не помещалось в колонку.
	   min() держит заголовок в пределах ширины экрана, clamp — в разумных границах */
	font-size: clamp(20px, min(3.125rem, 6.4vw), 60px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #111315;
}

.estimate__text {
	margin: 0;
	max-width: 38rem;
	font-family: Inter, sans-serif;
	font-size: clamp(15px, 1.125rem, 22px);
	line-height: 1.45;
	color: #4a4d51;
}

.estimate__factors {
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.estimate__factor {
	display: grid;
	grid-template-columns: 2.5rem minmax(7rem, 12rem) minmax(0, 1fr);
	gap: 0 1rem;
	align-items: baseline;
	padding: 0.875rem 0;
	border-bottom: 0.0625rem solid #e3e3e3;
}

.estimate__factor:first-child {
	border-top: 0.0625rem solid #e3e3e3;
}

.estimate__factor-num {
	font-family: Inter, sans-serif;
	font-size: clamp(12px, 0.8125rem, 16px);
	color: #a0a3a7;
}

.estimate__factor-name {
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: clamp(14px, 1.0625rem, 21px);
	color: #111315;
}

.estimate__factor-desc {
	font-family: Inter, sans-serif;
	font-size: clamp(13px, 0.9375rem, 18px);
	line-height: 1.35;
	color: #6f7276;
}

.estimate__actions {
	margin-top: 2.25rem;
	display: flex;
	align-items: center;
	gap: 1.25rem 1.75rem;
	flex-wrap: wrap;
}

.estimate__note {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: clamp(13px, 0.9375rem, 18px);
	color: #6f7276;
}

@media (max-width: 992px) {
	.estimate__block {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.estimate__factor {
		grid-template-columns: 2rem minmax(0, 1fr);
		gap: 0.25rem 0.75rem;
	}

	.estimate__factor-desc {
		grid-column: 2;
	}
}

@media (max-width: 576px) {
	.estimate__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.estimate__button {
		width: 100%;
	}

	.estimate__note {
		text-align: center;
	}
}

/* ==================== липкая кнопка на телефоне ==================== */

/*
 * Появляется после первого экрана и исчезает у блока «Давайте обсудим».
 * Узкая полоса поверх контента: кнопка того же вида, что и в первом экране,
 * фон — затемнение, чтобы текст под ней читался.
 */
.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	padding: 0.625rem 1.25rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(180deg, rgba(17, 19, 21, 0) 0%, rgba(17, 19, 21, 0.92) 42%);
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.28s ease, opacity 0.28s ease;
	pointer-events: none;
}

.sticky-cta.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.sticky-cta__button {
	width: 100%;
	height: 3.25rem;
	font-size: 1rem;
}

@media (min-width: 768px) {
	.sticky-cta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sticky-cta {
		transition: none;
	}
}

/* ==================== первый экран: заголовок с кнопкой по центру ==================== */

/*
 * Левая колонка распределяет содержимое через space-between: заголовок с
 * кнопкой прижимался к шапке, лид — к низу, и между ними оставалась большая
 * пустота. Автоматические поля забирают это свободное место поровну сверху и
 * снизу, поэтому заголовок и кнопка встают по центру колонки, а лид остаётся
 * внизу. На планшете и телефоне раскладка первого экрана другая — не трогаем.
 */
@media (min-width: 993px) {
	.main-screen__header {
		margin-top: auto;
		margin-bottom: auto;
		/* и чуть выше центра — так первый экран выглядит собраннее.
		   На 993–1279px свободного места над заголовком всего ~66px,
		   поэтому там сдвиг меньше: иначе заголовок упирается в шапку. */
		transform: translateY(-30px);
	}
}

@media (min-width: 1280px) {
	.main-screen__header {
		transform: translateY(-60px);
	}
}

/* ==================== форма: кнопка и положение окна ==================== */

/* Ширина кнопки была рассчитана на «Отправить»; текст CTA длиннее. */
.popup-form-block__button {
	width: auto;
	min-width: 11.875rem;
	padding: 0 1.75rem;
	white-space: nowrap;
}

/* Окно по центру экрана, но если оно выше экрана — прижимается к верху,
   иначе шапка с крестиком оказывается выше области просмотра. */
.popup-form__wrapper {
	align-items: safe center;
}

/* ==================== форма: единое оформление полей ==================== */

/*
 * Поля формы (текст, телефон, email, выпадающие списки, комментарий) должны
 * выглядеть одинаково: один шрифт, кегль, высота, рамка и цвет подсказки.
 * Поэтому оформление задаётся одним правилом, а не наследуется вперемешку
 * из собранного style.css, где у .input и .textarea разные наборы свойств.
 */
.popup-form-block__inputs .input,
.popup-form-block__inputs .select,
.popup-form-block__inputs .textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 0.0625rem solid #becbe1;
	border-radius: 0.5rem;
	outline: none;
	background-color: #fff;
	color: var(--text, #111315);
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	transition: border-color 0.2s ease;
}

.popup-form-block__inputs .input,
.popup-form-block__inputs .select {
	height: 2.8125rem;
	padding: 0 1.25rem;
}

.popup-form-block__inputs .textarea {
	height: 6.25rem;
	padding: 0.75rem 1.25rem;
	resize: vertical;
}

.popup-form-block__inputs .input:focus,
.popup-form-block__inputs .select:focus,
.popup-form-block__inputs .textarea:focus {
	border-color: var(--accent, #8228e3);
}

/* подсказка в поле — одним цветом везде (у textarea она была чёрной) */
.popup-form-block__inputs .input::placeholder,
.popup-form-block__inputs .textarea::placeholder {
	color: #757575;
	opacity: 1;
}

/* выпадающие списки: тема глушит системный вид полей, поэтому стрелка своя */
.popup-form-block__inputs .select {
	padding-right: 2.75rem;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23111315' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.25rem center;
}

/* первый пункт обязательного списка — подсказка, а не выбор */
.popup-form-block__inputs .select:invalid,
.popup-form-block__inputs .select option[value=""] {
	color: #757575;
}

/* подписи полей: мельче содержимого, чтобы не конкурировать с ним */
.popup-form-block__inputs .label {
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	text-transform: none;
}

/* звёздочка у обязательного поля — акцентом, без лишнего веса */
.popup-form-block__inputs .label__required {
	color: var(--accent, #8228e3);
	font-weight: 500;
}

/*
 * Полей шесть, в одну колонку форма переставала помещаться на ноутбуках
 * (1366×768, 1280×800) — верх окна с крестиком уезжал за экран. Короткие поля
 * от 576px встают в две колонки, длинные занимают всю ширину.
 */
@media (min-width: 768px) {
	.popup-form-block__inputs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.875rem 1rem;
	}

	.popup-form-block__input--wide,
	.popup-form-block__consent {
		grid-column: 1 / -1;
	}

	.popup-form-block__inputs .textarea {
		height: 5rem;
	}
}

/* одинаковый шаг между подписью и полем и между строками формы */
.popup-form-block__input {
	gap: 0.375rem;
}

.popup-form-block__inputs {
	gap: 0.875rem;
}

/* на телефоне — одна колонка и чуть мельче текст */
@media (max-width: 767px) {
	.popup-form-block__inputs .input,
	.popup-form-block__inputs .select,
	.popup-form-block__inputs .textarea {
		font-size: 16px;
	}

	.popup-form-block__inputs .label {
		font-size: 15px;
	}
}

/* ==================== форма на телефоне: во весь экран ==================== */

/*
 * Раньше на телефоне окно формы было обычной «карточкой» с отступами: контент
 * не помещался, верх и низ уходили за экран, и форма выглядела обрезанной.
 * Теперь окно занимает экран целиком, прокручивается внутри себя, а верх с
 * заголовком и крестиком остаётся на месте при прокрутке.
 */
@media (max-width: 767px) {
	.popup-form {
		overflow: hidden; /* прокрутка живёт внутри окна */
	}

	.popup-form__wrapper {
		padding: 0;
		height: 100vh;
		height: 100dvh;
		align-items: stretch;
	}

	.popup-form-block {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		scroll-padding-bottom: 6rem; /* поле не прячется под клавиатурой */
		padding: calc(1.125rem + env(safe-area-inset-top)) 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
	}

	/* заголовок с крестиком виден всегда, даже когда форма прокручена */
	.popup-form-block__header {
		position: sticky;
		top: calc(-1.125rem - env(safe-area-inset-top));
		z-index: 2;
		margin: calc(-1.125rem - env(safe-area-inset-top)) -1.25rem 0;
		padding: calc(1.125rem + env(safe-area-inset-top)) 1.25rem 0.75rem;
		background-color: #fff;
	}

	.popup-form-block-close {
		position: fixed;
		top: calc(1.125rem + env(safe-area-inset-top));
		right: 1.25rem;
		z-index: 3;
	}

	/* длинное пояснение на телефоне только занимает экран — оставляем его на десктопе */
	.popup-form-block__subtitle {
		display: none;
	}

	/* «Обсудить проект» должно помещаться в одну строку: корневой кегль темы
	   на телефоне крупный, и заголовок переносился на два ряда */
	.popup-form-block__title {
		max-width: calc(100% - 3rem);
		font-size: min(23px, 6vw);
		white-space: nowrap;
	}

	.popup-form-block__inputs .textarea {
		height: 5.5rem;
	}

	/* поле, на которое встал фокус, не должно оказаться под клавиатурой */
	.popup-form-block__inputs .input,
	.popup-form-block__inputs .select,
	.popup-form-block__inputs .textarea {
		scroll-margin-block: 5rem;
	}

	.popup-form-block__button {
		width: 100%;
		margin-top: 1.25rem;
	}
}

/* ==================== капча рядом с кнопкой ==================== */

/*
 * Порядок в форме: поля → согласие → капча → кнопка (узел переносит
 * initCaptchaPlacement в site.js). Здесь — только отступы вокруг виджета.
 */
.wpcf7-form .wpcf7-turnstile {
	margin-top: 1.25rem;
}

@media (max-width: 767px) {
	.wpcf7-form .wpcf7-turnstile {
		margin-top: 1rem;
	}
}