/* ==========================================================================
   CROPAS — базовые стили, раскладка, компоненты
   ========================================================================== */

/* --- База --------------------------------------------------------------- */
html, body { margin: 0; padding: 0; }

body {
	font-family: var(--font);
	font-weight: 500;
	color: var(--c-text);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.6;
}

::selection { background: var(--accent); color: #fff; }

input, button, textarea, select { font-family: inherit; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }

.site-main { display: block; }

/* Фоновый шум-оверлей (опционально включается на .has-noise) */
.cr-noise {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .04;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Контейнер ---------------------------------------------------------- */
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--pad-x);
}

/* --- Типографика -------------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--font);
	color: var(--c-black);
	font-weight: 800;
	margin: 0;
	letter-spacing: -.02em;
}

.h1, h1.entry-title {
	font-size: clamp(30px, 3.6vw, 45px);
	line-height: 1.04;
	letter-spacing: -.03em;
}

.h2, .section-title {
	font-size: clamp(25px, 2.9vw, 36px);
	line-height: 1.05;
	letter-spacing: -.025em;
}

.h3 { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; letter-spacing: -.01em; }

.eyebrow {
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0;
}

.lead {
	font-weight: 500;
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.6;
	color: var(--c-text);
}

.muted { color: var(--c-muted); }
.mono { font-family: var(--font-mono); }

/* --- Секции ------------------------------------------------------------- */
.section {
	position: relative;
	z-index: 2;
	padding: var(--section-y) 0;
	background: var(--bg-white);
}
.section--soft { background: var(--bg-soft); }
.section--page { background: var(--bg-page); }
.section--tint { background: var(--accent-tint); }
.section--dark { background: var(--c-footer); color: var(--c-footer-text); }
.section--border-top { border-top: 1px solid var(--bd-2); }
.section--border-bottom { border-bottom: 1px solid var(--bd-2); }

.section__head { max-width: 760px; margin: 0 0 40px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head .eyebrow { margin-bottom: 14px; }
.section__head .section-title { margin: 0; }
.section__head p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--c-text); }

/* --- Кнопки ------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 18px 30px;
	border-radius: var(--r-btn-lg);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--tr), color var(--tr), box-shadow var(--tr), transform var(--tr);
	white-space: nowrap;
	/* Кнопка не шире своего места: подпись CTA городов («…в городе
	   Усть-Каменогорск») при nowrap вылезала за экран на 345px при 328px. */
	max-width: 100%;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 16px 34px -14px rgba(var(--accent-rgb), .85);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
	background: #fff;
	border-color: var(--bd);
	color: var(--c-black);
}
.btn--ghost:hover { background: var(--bg-soft); }

.btn--tint {
	background: var(--accent-tint);
	color: var(--accent);
}
.btn--tint:hover { filter: brightness(.97); }

.btn--sm { padding: 13px 20px; font-size: 14px; border-radius: var(--r-btn); }
.btn--block { display: flex; width: 100%; }

/* --- Чипы / пилюли ------------------------------------------------------ */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--r-pill);
	padding: 9px 15px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
}
.pill--tint { background: var(--accent-tint); color: var(--accent-hover); border: 1px solid rgba(var(--accent-rgb), .22); }
.pill--white { background: #fff; border: 1px solid var(--bd); color: var(--c-text-2); font-weight: 700; }
.pill--outline { background: #fff; border: 1px solid var(--bd); color: var(--c-text-3); cursor: pointer; transition: all var(--tr); }
.pill--outline.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Карточки ----------------------------------------------------------- */
.card {
	background: #fff;
	border: 1px solid var(--bd);
	border-radius: var(--r-card);
	padding: 32px 30px;
}
.card--sm { border-radius: var(--r-card-sm); padding: 26px 24px; }
.card--accent { border: 2px solid var(--accent); box-shadow: 0 34px 64px -34px rgba(var(--accent-rgb), .55); }

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--accent-tint);
	color: var(--accent);
	flex: none;
}
.icon-tile svg { width: 26px; height: 26px; }
.icon-tile--sm { width: 24px; height: 24px; border-radius: var(--r-icon-sm); font-size: 14.5px; font-weight: 800; }

/* --- Сетки -------------------------------------------------------------- */
/* minmax(0,1fr), а не 1fr: это утилиты общего назначения — редактор может
   применить их в блоке «Произвольный HTML» к содержимому любой ширины, а трек
   1fr не сжимается ниже min-content. Брейкпоинты — в responsive.css. */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Формы -------------------------------------------------------------- */
.field {
	width: 100%;
	border: 1px solid var(--bd);
	background: var(--bg-soft-3);
	border-radius: var(--r-input);
	padding: 16px;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.2;
	color: var(--c-black);
	outline: none;
	transition: border-color var(--tr), box-shadow var(--tr);
}
.field::placeholder { color: #8A93A6; }
.field:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .25);
}
.field.is-error { border-color: var(--bad); }

.field-label {
	display: block;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--c-text-3);
	margin-bottom: 7px;
}

.form-note { font-size: 13px; color: var(--c-muted); margin-top: 10px; }

/* Состояния формы */
.cr-form__success,
.cr-form__error { display: none; }
.cr-form.is-success .cr-form__body { display: none; }
.cr-form.is-success .cr-form__success { display: block; }
.cr-form.is-error .cr-form__error { display: block; }
/* Отправка: кнопка гасится И показывает вращающийся индикатор. Одной
   прозрачности мало — при задержке в секунду форма читается как зависшая. */
/* Подпись прячем, на её месте — индикатор. -webkit-text-fill-color нужен для
   вариантов кнопки, где цвет текста задан именно им (Safari и часть тем). */
.cr-form.is-submitting .cr-form__submit {
	opacity: .75;
	pointer-events: none;
	position: relative;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* У .btn анимируется color — подпись растворялась постепенно и всё это
	   время наезжала на индикатор (замер: через 120 мс альфа ещё 0.075).
	   Здесь смена цвета мгновенная, плавной остаётся только прозрачность. */
	transition: opacity var(--tr);
}
/* Светлые варианты кнопки: белый индикатор на белом фоне не виден. */
.cr-form.is-submitting .btn--ghost.cr-form__submit::after,
.cr-form.is-submitting .btn--outline.cr-form__submit::after {
	border-color: rgba(var(--accent-rgb), .3);
	border-top-color: var(--accent);
}
.cr-form.is-submitting .cr-form__submit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cr-spin .7s linear infinite;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }
/* Пользователям с prefers-reduced-motion — статичная дуга без вращения. */
@media (prefers-reduced-motion: reduce) {
	.cr-form.is-submitting .cr-form__submit::after { animation: none; }
}

/* ==========================================================================
   TOP-BAR
   ========================================================================== */
.topbar { background: var(--c-topbar); }
.topbar__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 9px var(--pad-x-header);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1;
	color: #fff;
}
.topbar__badge { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
.topbar__contacts { display: flex; align-items: center; gap: 16px; white-space: nowrap; margin-left: auto; }
.topbar__contacts a { text-decoration: none; }
.topbar__mail { color: rgba(255, 255, 255, .85); }
.topbar__phone { color: #fff; font-weight: 800; }
.topbar__call { color: #fff; font-weight: 700; }
.topbar__contacts a:hover { color: var(--accent-soft); }

/* ==========================================================================
   HEADER (sticky)
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--bd);
}
.site-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 13px var(--pad-x-header);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px;
}

/* Лого */
.brand { display: flex; align-items: center; gap: 12px; flex: none; justify-self: start; text-decoration: none; }
.brand__mark {
	width: 44px; height: 44px; border-radius: 13px;
	background: var(--c-topbar); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 24px; line-height: 1; flex: none;
	overflow: hidden;
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand__name { line-height: 1; }
.brand__title { display: block; font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--c-black); }
.brand__sub { display: block; font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text); margin-top: 6px; white-space: nowrap; }

/* Меню */
.main-nav {
	justify-self: center;
	display: flex;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	color: var(--c-text);
	white-space: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	line-height: 1;
	transition: background var(--tr), color var(--tr);
}
.main-nav a:hover { background: var(--bg-soft); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .is-active > a {
	color: var(--accent-hover); /* --accent на tint даёт 3.96 — ниже нормы AA */
	background: var(--accent-tint);
}

/* Выпадающее меню */
.main-nav .menu-item-has-children { position: relative; }
.main-nav .menu-item-has-children > a::after {
	content: "▾";
	font-size: 9px;
	line-height: 1;
	transition: transform .2s;
}
.main-nav .menu-item-has-children:hover > a::after { transform: rotate(180deg); }
/* Обёртка: позиционирование + невидимый мост при наведении */
.main-nav .sub-menu-wrap {
	position: absolute;
	top: 100%;
	left: 0;
	transform: translateY(6px);
	padding-top: 14px;
	min-width: 266px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 130;
}
.main-nav .menu-item-has-children:hover > .sub-menu-wrap,
.main-nav .menu-item-has-children:focus-within > .sub-menu-wrap {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.main-nav .sub-menu {
	background: #fff;
	border: 1px solid var(--bd);
	border-radius: 14px;
	box-shadow: var(--sh-dropdown);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
}
.main-nav .sub-menu a {
	display: block;
	padding: 11px 14px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	color: var(--c-text);
	white-space: nowrap;
}
.main-nav .sub-menu a:hover { background: var(--accent-tint); color: var(--accent-hover); }
/* Текущая услуга в выпадающем списке (и её родитель — правилом выше). */
.main-nav .sub-menu .is-active > a,
.main-nav .sub-menu .current-menu-item > a { background: var(--accent-tint); color: var(--accent-hover); }
.main-nav .sub-menu .menu-item-all a { border-top: 1px solid var(--bd-5); margin-top: 4px; color: var(--accent); }

/* CTA справа */
.header-cta { justify-self: end; flex: none; }

/* Бургер */
.burger {
	display: none;
	justify-self: end;
	margin-left: auto; /* справа при любой сетке шапки */
	width: 46px; height: 46px;
	border: 1px solid var(--bd);
	background: #fff;
	border-radius: 12px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	padding: 0;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--c-black); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Мобильная панель */
.mobile-nav {
	display: none;
	position: fixed;
	inset: 0 0 0 auto;
	width: min(360px, 88vw);
	background: #fff;
	z-index: 300;
	transform: translateX(100%);
	transition: transform .25s ease, visibility .25s;
	visibility: hidden;
	overflow-y: auto;
	box-shadow: -20px 0 60px -30px rgba(15, 24, 48, .5);
	padding: 22px;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav__overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(11, 20, 38, .45);
	z-index: 290;
}
.mobile-nav__overlay.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li > a {
	display: block;
	padding: 14px 12px;
	font-weight: 700;
	font-size: 17px;
	color: var(--c-black);
	text-decoration: none;
	border-radius: 10px;
}
.mobile-nav > ul > li > a:hover { background: var(--bg-soft); }
.mobile-nav .sub-menu { display: block; padding-left: 12px; }
.mobile-nav .sub-menu a { display: block; padding: 10px 12px; font-weight: 600; font-size: 15px; color: var(--c-text); text-decoration: none; border-radius: 8px; }
.mobile-nav .sub-menu a:hover { background: var(--bg-soft); color: var(--accent); }
.mobile-nav .is-active > a,
.mobile-nav .current-menu-item > a { background: var(--accent-tint); color: var(--accent-hover); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--bd); }
.mobile-nav__brand { font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--c-black); }
.mobile-nav__close {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;               /* цель нажатия по рекомендации WCAG */
	border: 1px solid var(--bd); background: #fff; border-radius: 12px;
	font-size: 26px; line-height: 1; cursor: pointer; color: var(--c-black);
	transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.mobile-nav__close:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.mobile-nav__note { margin: 8px 0 0; font-weight: 500; font-size: 12.5px; color: var(--c-muted); text-align: center; }
.mobile-nav__cta { margin-top: 18px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	position: relative;
	z-index: 2;
	background: var(--c-footer);
	color: var(--c-footer-text);
	padding: 50px 0 32px;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
	gap: 40px;
}
.footer-brand__row { display: flex; align-items: center; gap: 11px; }
.footer-brand__mark {
	width: 38px; height: 38px; border-radius: 11px;
	background: #fff; color: var(--c-footer);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 19px; line-height: 1; overflow: hidden;
}
.footer-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.footer-brand__name { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: #fff; }
.site-footer p { font-weight: 500; font-size: 15px; line-height: 1.6; color: var(--c-muted-2); margin: 18px 0 0; max-width: 30ch; }
.footer-phone { display: block; font-weight: 800; font-size: 17px; color: #fff; text-decoration: none; margin-top: 18px; }
.footer-contacts-line { font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--c-muted-2); margin-top: 6px; }
.footer-col__title { font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.footer-links { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; list-style: none; padding: 0; }
.footer-links a { font-weight: 600; font-size: 15px; line-height: 1.3; color: #fff; text-decoration: none; }
.footer-links a:hover { color: var(--accent-soft); }
.site-footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; }
.site-footer__copy { font-weight: 500; font-size: 14.5px; line-height: 1; color: var(--c-muted); }

/* ==========================================================================
   ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ (свитчер, наверх, whatsapp)
   ========================================================================== */
.floaties {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 250;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
}
.accent-switch {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--bd);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-soft);
	padding: 8px 12px;
}
.accent-switch__pop {
	display: flex;
	gap: 8px;
	align-items: center;
	order: -1;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width .3s ease, opacity .2s ease;
}
.accent-switch:hover .accent-switch__pop,
.accent-switch:focus-within .accent-switch__pop { max-width: 480px; opacity: 1; }
.accent-switch__label { font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text); white-space: nowrap; }
.accent-switch__current { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--accent); }
.accent-swatch { width: 24px; height: 24px; border: none; border-radius: 50%; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: box-shadow .15s; }
.accent-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }

.to-top {
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--bd); background: #fff; color: var(--accent);
	font-weight: 800; font-size: 18px; line-height: 1; cursor: pointer;
	box-shadow: var(--sh-fab);
	opacity: 0; pointer-events: none; transform: translateY(10px);
	transition: opacity .2s, transform .2s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.wa-fab {
	background: #25D366; color: #0B1426;
	font-weight: 700; font-size: 14.5px; line-height: 1;
	padding: 13px 17px; border-radius: var(--r-pill);
	text-decoration: none;
	box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .9);
	display: inline-flex; align-items: center; gap: 8px;
}

/* Тост */
.cr-toast {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
	z-index: 400; background: var(--c-topbar); color: #fff;
	padding: 15px 22px; border-radius: 14px;
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55);
	font-weight: 600; font-size: 15.5px; line-height: 1.4;
	display: flex; align-items: center; gap: 12px; max-width: 90vw;
	opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.cr-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.cr-toast__check { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* ==========================================================================
   ЛИД-МОДАЛКА (попап)
   ========================================================================== */
.cr-modal {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.cr-modal.is-open { display: flex; }
.cr-modal__overlay { position: absolute; inset: 0; background: rgba(11, 20, 38, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cr-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: var(--r-card);
	padding: 32px;
	box-shadow: 0 40px 90px -30px rgba(15, 24, 48, .6);
	animation: crModalIn .25s ease;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px); /* iOS: 100vh не учитывает адресную строку — низ модалки уезжал за экран */
	overflow-y: auto;
}
@keyframes crModalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cr-modal__close {
	/* На одной вертикали с контентной колонкой: раньше кнопка висела на 14px
	   от угла, тогда как весь контент начинается на 32px — три разных отступа
	   в одной карточке. Теперь правый край кнопки совпадает с правым краем
	   полей и submit-кнопки, верх — с первой строкой шапки. */
	position: absolute; top: 32px; right: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 12px;
	border: 1px solid var(--bd); background: #fff; color: var(--c-black);
	font-size: 22px; line-height: 1; cursor: pointer;
	transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.cr-modal__close:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }
/* Резерв под кнопку: длинный заголовок больше не заезжает под крестик. */
.cr-modal__eyebrow,
.cr-modal__title { padding-right: 56px; }
.cr-modal__eyebrow { display: block; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-hover); }
.cr-modal__title { font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; color: var(--c-black); margin: 6px 0 0; text-wrap: balance; }
.cr-modal__offer { max-width: 34ch; } /* короткая строка читается быстрее длинной на всю карточку */
.cr-modal__offer { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--c-text); margin: 10px 0 0; }
/* Список «что получите» — в theme.css, а не в pages.css: модалка живёт
   в footer.php, то есть на КАЖДОЙ странице, включая главную и услуги,
   куда pages.css не приходит. */
.cr-modal__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cr-modal__list li { position: relative; padding-left: 26px; font-weight: 500; font-size: 14.5px; line-height: 1.4; color: var(--c-text); }
.cr-modal__list li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* Подзаголовок теперь вводит список («Что будет в документе:») — отбивку
   до полей даёт сам список, иначе между ними копилось 26 + 16px. */
.cr-modal__list + .cr-form .cr-form__fields { margin-top: 22px; }

.cr-modal .cr-form { border: none; box-shadow: none; padding: 0; }
/* Ритм: блок «шапка» отделён от формы сильнее, чем поля друг от друга,
   иначе заголовок и поля читаются как один сплошной список. */
.cr-modal .cr-form__fields { margin-top: 26px; }
.cr-modal .cr-form__submit { margin-top: 20px; }
/* Выравнивание: шапка слева, а гарантия и согласие были по центру —
   в одной карточке это читалось как разъехавшаяся вёрстка. */
.cr-modal .cr-form__reassure { justify-content: flex-start; text-align: left; margin-top: 20px; }
.cr-modal .cr-form__reassure + .cr-form__submit { margin-top: 12px; }
.cr-modal .cr-form__note { text-align: left; font-size: 12px; line-height: 1.45; color: var(--c-muted); margin-top: 10px; }
.cr-modal .cr-form__note a { color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; }
.cr-modal .cr-form__note a:hover,
.cr-modal .cr-form__note a:focus-visible { color: var(--accent-hover); }
body.cr-modal-open,
body.cr-nav-open { overflow: hidden; }

/* ==========================================================================
   STICKY-CTA (мобайл)
   ========================================================================== */
.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 240;
	display: none;
	gap: 10px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--bd);
	box-shadow: 0 -8px 24px -16px rgba(15, 24, 48, .4);
	transform: translateY(110%);
	transition: transform .25s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex: 1; padding: 14px 12px; font-size: 15px; }
.sticky-cta__call { flex: none !important; width: 52px; padding: 14px 0 !important; }

/* ==========================================================================
   ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */
/* Отступ снизу, а не сверху: крошки стоят внутри контейнера героя, который
   уже даёт отбивку сверху. Отдельной полосы у крошек больше нет.
   Именно margin, а не padding: следующий за крошками блок почти везде несёт
   собственный margin-top (24px у .eyebrow, .bl-hero__row, .article-hero__cat),
   и с padding отбивка складывалась в 50px на одних страницах и 26px на других.
   Схлопывание margin'ов даёт один и тот же зазор на всех. */
.breadcrumbs { margin: 0 0 26px; }
.breadcrumbs--bare { margin: 0 0 26px; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--c-muted); list-style: none; margin: 0; padding: 0; }
/* Один тон на всю строку, как в макете (замер: #171717): раньше ссылки были
   акцентно-синими, разделитель серым, текущий — третьим цветом. */
.breadcrumbs__list a { color: #262626; text-decoration: none; }
.breadcrumbs__list a:hover { color: var(--accent-hover); }
.breadcrumbs__sep { color: var(--c-muted-3); }
.breadcrumbs__current { color: var(--c-text-2); }

/* ==========================================================================
   ДВУХКОЛОННЫЙ БЛОК «ТЕКСТ + МЕДИА»
   ==========================================================================
   Раскладка была в style= прямо в разметке (front-page.php и single-service.php),
   поэтому медиазапросы её не брали: на 360px текстовая колонка распирала сетку
   до 370px (её min-content), а картинка ужималась в полоску 2px.
   Треки minmax(0,…) плюс одна колонка ниже 900px. */
.about-2col { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.about-2col--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Составной селектор, а не .about-2col__pic: у .award__frame своя пропорция
   3/4 (диплом — портрет), и sections.css грузится после theme.css. Раньше 4/3
   стояло инлайном и перебивало всё. */
.about-2col__pic,
.award__frame.about-2col__pic { aspect-ratio: 4 / 3; width: 83%; margin: 0 auto; }
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }

@media (max-width: 900px) {
	.about-2col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.about-2col__pic,
	.award__frame.about-2col__pic { width: 100%; }
}

@media (max-width: 560px) {
	.about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
}

/* ==========================================================================
   УТИЛИТЫ
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 14px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.hidden { display: none !important; }

/* Радиальная подсветка hero */
.hero-glow {
	position: absolute;
	top: -140px; right: -120px;
	width: 520px; height: 520px;
	background: radial-gradient(closest-side, rgba(var(--accent-rgb), .12), transparent);
	border-radius: 50%;
	pointer-events: none;
}

/* Список-галочки */
.check-list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--c-text-2); }
.check-list .check {
	flex: none; width: 24px; height: 24px; border-radius: var(--r-icon-sm);
	background: var(--accent-tint); color: var(--accent-hover);
	display: flex; align-items: center; justify-content: center;
	font-size: 14.5px; font-weight: 800;
}

/* Рейтинг-звёзды */
.stars { font-weight: 700; font-size: 15px; line-height: 1; color: var(--accent); letter-spacing: .08em; }

/* --- Фолбэк-навигация без JavaScript (мобильная панель открывается скриптом) --- */
.no-js-nav { display: none; }
.no-js-nav__list { list-style: none; margin: 0; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; background: #fff; border-bottom: 1px solid #e6e8ee; }
.no-js-nav__list li { margin: 0; }
.no-js-nav__list a { color: #0b1426; text-decoration: none; font-weight: 600; font-size: 15px; }
.no-js-nav__list ul { display: none; }
@media (max-width: 1024px) { .no-js-nav { display: block; } }

/* Подвал: строка юр-ссылок и адрес — нужны на всех типах страниц,
   раньше лежали в pages.css, который не грузится на услугах и кейсах. */
/* Юр-ссылки — служебная строка: мельче и тише основного текста подвала. */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; align-items: center; margin-top: 10px; }
.site-footer__legal a { font-weight: 500; font-size: 12px; line-height: 1.5; color: var(--c-muted-2, #98A2B4); text-decoration: none; opacity: .75; transition: opacity var(--tr), color var(--tr); }
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { opacity: 1; color: var(--c-muted); text-decoration: underline; }
.site-footer__legal a + a::before { content: "·"; margin-right: 14px; color: var(--c-muted-2, #98A2B4); opacity: .5; }
.footer-address { font: 500 13.5px/1.6 'Manrope', sans-serif; color: var(--c-muted-2, #98A2B4); margin-top: 18px; }
.footer-address__more { display: inline-block; margin-top: 6px; font-weight: 600; font-size: 13px; color: var(--c-muted); text-decoration: none; }
.footer-address__more:hover { color: var(--accent-soft); }
.footer-phone__label { font-weight: 500; font-size: 12.5px; color: var(--c-muted-2, #98A2B4); margin-top: 2px; }

/* --- Область виджетов в подвале ----------------------------------------
   Область регистрируется в inc/setup.php и выводится в footer.php, но своих
   стилей не имела. Блочные виджеты (дефолт WordPress с 5.8) игнорируют
   before_title и рисуют собственные h2/ul — те брали глобальный цвет
   заголовков (почти чёрный) и на тёмном подвале давали контраст 1.08:1. */
.footer-widgets {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 30px; padding-bottom: 34px; margin-bottom: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-widget h2,
.footer-widget h3,
.footer-widget .footer-col__title {
	font: 700 13px/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase;
	color: var(--c-muted-2, #98A2B4); margin: 0 0 14px;
}
.footer-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-widget li { margin: 0; }
.footer-widget a { color: var(--c-footer-text, #EAECF6); text-decoration: none; font-weight: 500; font-size: 14px; }
.footer-widget a:hover,
.footer-widget a:focus-visible { color: var(--accent-soft); }
.footer-widget p,
.footer-widget .textwidget { color: var(--c-footer-text, #EAECF6); font-weight: 500; font-size: 14px; line-height: 1.6; }
.footer-widget select,
.footer-widget input[type="search"],
.footer-widget input[type="text"] { width: 100%; max-width: 280px; }
.footer-widget .wp-block-search__input { color: var(--c-black); }
/* Honeypot формы. Критично: без этого правила поле-ловушка видно посетителю. */
.cr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- Цели нажатия ------------------------------------------------------- */
/* Текстовые ссылки в плотных строках были высотой 13–21px: по WCAG 2.2 (2.5.8)
   минимум 24×24. Добавляем высоту зоне нажатия, не меняя типографику. */
.topbar__mail,
.topbar__phone,
.topbar__call { display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumbs__list a { display: inline-flex; align-items: center; min-height: 24px; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-address__more { min-height: 24px; align-items: center; }
.legal-req__v,
a.legal-req__v { display: inline-flex; align-items: center; min-height: 24px; }
.article-hero__cat { display: inline-flex; align-items: center; min-height: 24px; }
.cr-form__note a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-links a,
.footer-contacts-line a { display: inline-flex; align-items: center; min-height: 24px; }

/* --- Видимый фокус с клавиатуры (WCAG 2.4.7) ---------------------------- */
/* :where() держит специфичность 0 — собственные стили компонентов не ломаются.
   Раньше на кнопках с своим фоном системное кольцо фокуса почти не читалось. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 6px;
}
/* Поля со своей индикацией фокуса: внешнее кольцо снимаем, иначе рамки
   накладываются одна на другую — собственная рамка поля плюс глобальный
   outline давали «двойное окно». Индикатор должен быть один. */
.field:focus-visible,
.bl-search__in:focus-visible,
.mid-cta__field:focus-visible,
.cr-quiz__phone:focus-visible,
.ct-formcard .field:focus-visible { outline: none; }
/* На тёмных блоках акцентное кольцо тонет — переключаем на белое. */
:where(.cta-home__card, .site-footer, .topbar, .faq-cta, .art-cta, .mid-cta, .section--ai)
	:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
	outline-color: #fff;
}

/* --- Резерв высоты под подмену шрифта (CLS) ----------------------------- */
/* font-display: swap перерисовывает текст, когда Manrope догрузился, и строки
   меняют высоту — из-за этого «прыгала» вся страница ниже. Замер показал, что
   сдвиг стабильно начинался с верхней строки контактов и хлебных крошек;
   фиксируем им минимальную высоту — она равна фактической после загрузки. */
.topbar__inner { min-height: 42px; }
.topbar__contacts { min-height: 24px; }
.breadcrumbs { min-height: 24px; }

/* --- Контраст текста акцентом на светлых подложках (WCAG AA) ------------- */
/* Замер: --accent (#1F6FEB) как ТЕКСТ даёт 3.96 на --accent-tint и 4.35 на
   --bg-soft — ниже нормы 4.5 для обычного текста. Осветление подложки предел
   не берёт (максимум 4.35), поэтому для текста берём --accent-hover: он есть
   во всех 12 палитрах и даёт 5.47 на tint и 6.02 на soft. Фон кнопок и заливки
   остаются на --accent — там белый текст по-прежнему проходит (4.63). */
.check,
.stars,
.case-tag,
.tier__opt,
.tier__cta,
.tier__yes,
.fm-card__w,
.tcard__metric,
.process__tab-num,
.seo-vs__mark,
.factors-check__mark,
.staffvs__m,
.article-byline__ava,
.case-filter__count,
.guarantee__check,
.letters-link,
.calc__result-label,
.xsvc-row__arr,
.eyebrow,
.article-hero__cat { color: var(--accent-hover); }

/* Декоративные глифы и подписи: были 1.8–2.5 при норме 4.5. */
.kpi__arrow,
.kpi__a,
.post-card__dot { color: var(--c-muted); }
.breadcrumbs__sep { color: var(--c-text-3, #4E5770); }

/* Подвал тёмный: --c-muted на #0B1426 даёт 4.0. Светлее — 7.15. */
.site-footer__copy,
.site-footer .footer-col__title,
.footer-address__more,
.footer-contacts-line { color: var(--c-muted-2, #98A2B4); }