/*
 * Секции, переработанные относительно прототипа, и новые компоненты.
 *
 * Базовая система (сетка, типографика, кнопки, цвета) живёт в main.css —
 * здесь только то, что изменилось или добавилось: иконки, карусель отзывов,
 * карточки кейсов, инфографика цифр, контакты и шапка с телефоном.
 *//* ── Шапка: телефон, режим работы, мессенджеры ─────────────────────────── *//*
 * Шапка: в один ряд помещаются только меню, телефон и кнопка. Режим работы
 * и мессенджеры вынесены в .nav-extra и видны лишь в мобильном меню —
 * иначе строки наезжали друг на друга.
 */
.nav-inner { grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); }
.nav-collapse nav { min-width: 0; }
.nav-links { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }
.nav-side { min-width: 0; gap: 14px; }

.nav-phone {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 800;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}
.nav-phone:hover,
.nav-phone:focus-visible { color: var(--coral); }

.nav-extra { display: none; }
.nav-region { position: relative; }
.nav-region summary {
	list-style: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}
.nav-region summary::-webkit-details-marker { display: none; }
.nav-region summary::after { content: " ▾"; font-weight: 400; color: var(--ink-faint); }
.nav-region ul {
	margin: 8px 0 0;
	padding: 8px 12px;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
}
.nav-region a { color: inherit; text-decoration: none; }
.nav-region a:hover { color: var(--coral); }
.labs-all { margin-top: 28px; }
.nav-schedule {
	font-size: 12px;
	color: var(--ink-faint);
}
.nav-messengers { display: inline-flex; gap: 8px; }
.nav-msg {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink-mute);
	transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.nav-msg svg { width: 16px; height: 16px; fill: currentColor; }
.nav-msg:hover,
.nav-msg:focus-visible { color: var(--coral); border-color: var(--coral); }

@media (max-width: 1400px) {
	.nav-links { gap: 20px; }
	.nav-links a { font-size: 14px; }}
@media (max-width: 1240px) {
	.nav-phone { display: none; }}/* С 1080px меню превращается в выпадающую панель — там места хватает. */
@media (max-width: 1080px) {
	.nav-extra {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
		padding-top: 14px;
		margin-top: 4px;
		border-top: 1px solid var(--line-soft);
	}
	.nav-phone { display: inline-flex; font-size: 18px; }
	.nav-side { flex-wrap: wrap; }}/* ── Иконки в карточках ────────────────────────────────────────────────── */

.ico { width: 22px; height: 22px; }
.svc-ico,
.sit-ico { color: var(--coral); display: inline-flex; }

.svc-ico { margin-bottom: 2px; }
.svc.dark .svc-ico { color: var(--paper); }/* ── 8. Ситуации: иконка + номер + название + стрелка ──────────────────── */

.sits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sit {
	grid-template-columns: auto auto 1fr auto;
	min-height: 72px;
}
.sit-arrow { color: var(--coral); }

@media (max-width: 767px) {
	.sit { grid-template-columns: auto auto 1fr auto; }}/* ── 7. Стоимость: три карточки вместо фальшивого калькулятора ─────────── */

.cost-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cost-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
}
.cost-card .btn { margin-top: auto; align-self: flex-start; }
.cost-tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--coral);
}
.cost-card h3 { font-family: var(--sans); font-size: 19px; font-weight: 800; margin: 0; }
.cost-note { font-size: 13px; color: var(--ink-faint); }

@media (max-width: 991px) { .cost-grid { grid-template-columns: 1fr; }}/* ── 6. Этапы: список с сохранением нумерации ─────────────────────────── *//* ── 9. Отзывы: карусель ──────────────────────────────────────────────── */

.rev-carousel { position: relative; margin-top: 8px; }
.rev-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 20px) / 3);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	scrollbar-width: thin;
}
.rev-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
}
.rev-card blockquote {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.rev-card blockquote p { margin: 0 0 10px; }
.rev-card blockquote p:last-child { margin-bottom: 0; }

.rev-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}
.rev-counter { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.rev-controls .nav-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: none;
	color: var(--ink);
	cursor: pointer;
	transition: border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.rev-controls .nav-btn:hover:not(:disabled),
.rev-controls .nav-btn:focus-visible { border-color: var(--coral); color: var(--coral); }
.rev-controls .nav-btn:disabled { opacity: 0.35; cursor: default; }

.rev-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 26px;
}
.rev-platforms { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); }
.rev-platforms a { color: var(--ink); }

@media (max-width: 991px) { .rev-track { grid-auto-columns: calc((100% - 20px) / 2); }}
@media (max-width: 640px)  { .rev-track { grid-auto-columns: 88%; }}/* ── 10. Цифры компании ───────────────────────────────────────────────── *//* Оформление блока целиком задано ниже, в разделе правок второй итерации. *//* ── Кейсы ────────────────────────────────────────────────────────────── */

.cases-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.case-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
}
.case-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-faint);
}
.case-number { color: var(--coral); }
.case-amount {
	font-family: var(--sans);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.1;
	margin: 2px 0;
}
.case-amount small {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-faint);
	letter-spacing: 0.02em;
}
.case-card h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin: 0; }
.case-card p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.case-meta { display: grid; gap: 4px; margin: 6px 0 0; font-size: 13px; }
.case-meta div { display: flex; gap: 8px; }
.case-meta dt { color: var(--ink-faint); min-width: 62px; }
.case-meta dd { margin: 0; }
.case-doc {
	margin-top: auto;
	padding-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--coral);
	align-self: flex-start;
}
.case-doc:hover, .case-doc:focus-visible { color: var(--coral); }
.cases-foot { margin-top: 28px; }

@media (max-width: 991px) { .cases-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 640px)  { .cases-grid { grid-template-columns: 1fr; }}/* ── 11. Юристы: четыре карточки в ряд, портрет 3:4 ───────────────────── */

.labs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lab-img { aspect-ratio: 3 / 4; }
.lab-img img,
.lab-img .portrait-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-facts {
	display: flex;
	gap: 18px;
	margin: 8px 0 0;
	font-size: 13px;
}
.lab-facts div { display: grid; gap: 2px; }
.lab-facts dt { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.lab-facts dd { margin: 0; font-family: var(--sans); font-weight: 700; }
.lab-focus { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; }
.lab-more {
	margin-top: 12px;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--coral);
	background: none;
	border-width: 0 0 1px;
	padding: 0 0 2px;
	cursor: pointer;
}
.lab-more:hover, .lab-more:focus-visible { color: var(--coral); }

@media (max-width: 1100px) { .labs-grid { grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 780px)  { .labs-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 480px)  { .labs-grid { grid-template-columns: 1fr; }}/* ── 12. FAQ отдельной секцией ────────────────────────────────────────── */

.faq-list { border-top: 1px dotted var(--line); max-width: 900px; }
.faq-foot { margin-top: 28px; }/* ── 13. Статьи: обложка, дата обновления, автор ──────────────────────── */

.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.art-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	overflow: hidden;
	background: var(--paper);
}
.art-card:hover, .art-card:focus-within { border-color: var(--ink-faint); }
.art-cover {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--paper-warm);
	border-bottom: 1px solid var(--line);
}
.art-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }/* Заглушка вместо пустого серого прямоугольника у статей без миниатюры. */
.art-cover.is-blank {
	background:
		radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1px) 0 0 / 12px 12px,
		var(--paper-warm);
}
.art-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1;
}
.art-body h3 {
	font-family: var(--sans);
	font-size: 18px;
	font-weight: 800;
	margin: 0;
	line-height: 1.3;
	/* Заголовки статей сильно разной длины — ограничиваем, чтобы карточки
	   в ряду не разъезжались по высоте. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.art-body h3 a { color: inherit; text-decoration: none; }
.art-body h3 a:hover, .art-body h3 a:focus-visible { color: var(--coral); }
.art-body p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.art-meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-faint);
}
.art-more {
	margin-top: auto;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--coral);
	padding-bottom: 2px;
}
.art-more:hover, .art-more:focus-visible { color: var(--coral); }
.articles-all { margin-top: 28px; }

@media (max-width: 991px) { .articles-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 640px) { .articles-grid { grid-template-columns: 1fr; }}/* ── 14. Консультация ─────────────────────────────────────────────────── */

.consult-spread {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: start;
}
.consult-direct { display: grid; gap: 14px; margin-top: 28px; }
.consult-phone { display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.consult-phone small { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.consult-phone b { font-family: var(--sans); font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; }
.consult-phone:hover b, .consult-phone:focus-visible b { color: var(--coral); }
.consult-messengers { display: flex; gap: 10px; flex-wrap: wrap; }
.consult-schedule { font-size: 13px; color: var(--ink-faint); }

@media (max-width: 991px) { .consult-spread { grid-template-columns: 1fr; gap: 34px; }}/* Формы */
.yurex-form { display: grid; gap: 14px; }
.yurex-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yurex-form-compact .form-row { grid-template-columns: 1fr; }
.yurex-form .consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13px; }
.yurex-form .consent input { margin-top: 3px; }
.yurex-form button[type='submit'] { justify-self: start; }

@media (max-width: 560px) { .yurex-form .form-row { grid-template-columns: 1fr; }}/* ── 16. Контакты: реквизиты слева, карта и фото офиса справа ─────────── */

.contacts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}
.contacts-info .contact-list { display: grid; gap: 0; }
.contacts-info .contact-list > div {
	display: grid;
	gap: 4px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line-soft);
}
.contacts-info .contact-list small {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.contacts-info .contact-list b { font-family: var(--sans); font-size: 15px; font-weight: 700; display: grid; gap: 2px; }
.contacts-info .contact-list a { color: inherit; text-decoration: none; }
.contacts-info .contact-list a:hover, .contacts-info .contact-list a:focus-visible { color: var(--coral); }

.contacts-visual { display: grid; gap: 16px; }
.contacts-visual .map-slot { border-radius: var(--r-block); overflow: hidden; border: 1px solid var(--line); }
.contacts-visual .map-slot iframe { display: block; width: 100%; min-height: 320px; border: 0; }

@media (max-width: 991px) { .contacts-grid { grid-template-columns: 1fr; }}/* ── Подвал: телефон, почта, рейтинг ──────────────────────────────────── */

.foot-phone {
	display: block;
	margin-top: 14px;
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 800;
	color: inherit;
	text-decoration: none;
}
.foot-mail { display: block; margin-top: 4px; font-size: 14px; color: inherit; }
.foot-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.foot-stars { color: var(--coral); letter-spacing: 0.08em; }
.foot-rating-links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }/* ── Внутренние страницы ──────────────────────────────────────────────── */

.page-hero { padding: 140px 0 40px; }
.page-hero h1 { font-family: var(--sans); font-size: clamp(30px, 4vw, 52px); font-weight: 900; letter-spacing: -0.02em; }
.page-body { padding-bottom: 90px; }
.page-body .entry-content { max-width: 780px; font-size: 16px; line-height: 1.7; }
.page-body .entry-content h2 { font-family: var(--sans); font-size: 26px; font-weight: 800; margin: 34px 0 12px; }
.page-body .entry-content h3 { font-family: var(--sans); font-size: 20px; font-weight: 800; margin: 26px 0 10px; }
.page-body .entry-content p { margin: 0 0 16px; }
.page-body .entry-content ul,
.page-body .entry-content ol { margin: 0 0 16px 20px; }
.page-body .entry-content img { max-width: 100%; height: auto; border-radius: var(--r-block); }

.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pagination { margin-top: 40px; display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	color: var(--ink);
	text-decoration: none;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/*
 * WordPress оборачивает номера страниц в div.nav-links — тем же классом
 * размечено меню шапки. Правила меню (отступ 28px, ссылки высотой 44px,
 * подчёркивание при наведении, а на телефоне — столбик) доставались и
 * навигации по страницам: номера вставали в колонку.
 */
.pagination .nav-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.pagination .nav-links a.page-numbers,
.pagination .nav-links .page-numbers {
	display: grid;
	min-height: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
}
.pagination .nav-links a:hover,
.pagination .nav-links a:focus-visible { box-shadow: none; border-color: var(--ink); }

@media (max-width: 991px) { .post-list { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 640px)  { .post-list { grid-template-columns: 1fr; }}/* ── Правки вёрстки по замечаниям к первой сборке ─────────────────────── *//* 06. Шапка «Как проходит банкротство»: в main.css абзац был обрезан до
   22ch и вжимался в узкую колонку под заголовком. */
@media (min-width: 992px) {
	.method-head {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
		align-items: end;
		column-gap: 48px;
	}}
.method-head h2 { max-width: 20ch; }
.method-head .right p { max-width: 42ch; font-size: 14px; }/* 14. Консультация: форма оформлена карточкой, иначе поля висели
   в пустоте и колонка расползалась по всей ширине. */
.consult-spread { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.consult-form-wrap {
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
}
.consult-form { margin-bottom: 0; }
.consult-form .form-status:not([hidden]) { margin-top: 4px; }
@media (max-width: 640px) {
	.consult-form-wrap { padding: 22px; border-radius: var(--r-block); }}/* ══ Вторая итерация правок по замечаниям ═════════════════════════════ *//* ── Подвал ───────────────────────────────────────────────────────────
 * Была жёсткая сетка 2fr+4×1fr при двух реальных колонках, крошечный
 * логотип и гигантская надпись «ЮрЭкс.» во всю ширину. Колонок теперь
 * ровно столько, сколько выводится, надпись убрана из разметки.
 */
.foot-grid {/* repeat() не принимает calc(), поэтому число колонок разбираем
	   отдельными правилами по data-cols из шаблона. */
	grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
	margin-bottom: 44px;
	align-items: start;
}
.foot-grid[data-cols="2"] { grid-template-columns: minmax(280px, 1.6fr) minmax(0, 1fr); }
.foot-grid[data-cols="3"] { grid-template-columns: minmax(280px, 1.6fr) repeat(2, minmax(0, 1fr)); }
.foot-grid[data-cols="5"] { grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(0, 1fr)); }
.foot-brand .brand-mark,
.foot-brand .brand-mark img { height: 44px; }
.foot-lead {
	margin: 20px 0 0;
	max-width: 42ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-mute);
}
.foot-contact {
	display: grid;
	gap: 6px;
	margin-top: 22px;
}
.foot-phone {
	font-family: var(--sans);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.25;
}
.foot-phone.is-alt { font-size: 17px; font-weight: 700; color: var(--ink-soft); }
.foot-phone:hover, .foot-phone:focus-visible { color: var(--coral); }
.foot-mail { font-size: 15px; color: var(--ink); margin-top: 2px; }
.foot-address,
.foot-hours {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-faint);
	max-width: 34ch;
}
.foot-address { margin-top: 8px; }
.foot-messengers { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.foot-messengers .btn { min-height: 38px; padding: 0 16px; font-size: 13px; }

.foot-col h5 {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 16px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-col a {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink-soft);
	text-decoration: none;
}
.foot-col a:hover, .foot-col a:focus-visible { color: var(--coral); }

.foot-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.foot-disclaimer {
	margin: 18px 0 0;
	padding-bottom: 8px;
	max-width: 86ch;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink-faint);
}

@media (max-width: 1080px) {
	.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
	.foot-brand { grid-column: 1 / -1; }}
@media (max-width: 560px) {
	.foot-grid { grid-template-columns: 1fr; }
	.foot-brand { grid-column: auto; }}/* ── 16. Контакты: правая колонка ─────────────────────────────────────
 * Карта плюс карточка «не хотите ехать в офис» — половина секции больше
 * не пустует.
 */
.contacts-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 40px;
	align-items: start;
}
.contacts-visual { display: grid; gap: 20px; }
.map-slot {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	overflow: hidden;
	background: var(--paper-warm);
}
.map-slot iframe { display: block; width: 100%; height: 100%; border: 0; }
.contacts-cta {
	padding: 28px;
	border-radius: var(--r-block);
	background: var(--ink);
	color: var(--paper);
}
.contacts-cta h3 { font-family: var(--sans); font-size: 20px; font-weight: 800; margin: 0 0 10px; }
.contacts-cta p {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: color-mix(in oklch, var(--paper) 76%, transparent);
}
.contacts-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.contacts-cta-actions .btn-ghost { color: var(--paper); border-color: color-mix(in oklch, var(--paper) 40%, transparent); }
.contacts-cta-actions .btn-ghost:hover,
.contacts-cta-actions .btn-ghost:focus-visible { color: var(--paper); border-color: var(--paper); }

@media (max-width: 880px) { .contacts-grid { grid-template-columns: 1fr; gap: 32px; }}/* ── 15. Справочный раздел ────────────────────────────────────────────
 * Была узкая колонка мелкого текста без единого акцента.
 */
.seo-spread {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	gap: 48px;
	align-items: start;
	padding-top: 8px;
	border-top: 1px solid var(--line);
}
.seo-box { max-width: none; }
.seo-box h2 { font-size: clamp(26px, 2.8vw, 36px); max-width: 24ch; }
.seo-box .seo-full p { font-size: 15.5px; line-height: 1.7; }
.seo-links { margin-top: 24px; padding-top: 20px; border-top: 1px dotted var(--line); }

.seo-aside {
	position: relative;
	padding: 30px 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper-warm);
	overflow: hidden;
}
.seo-aside-mark {
	position: absolute;
	top: -14px;
	right: -18px;
	width: 148px;
	color: var(--coral);
	opacity: 0.13;
	pointer-events: none;
}
.seo-aside-mark svg { width: 100%; height: auto; display: block; }
.seo-facts { margin: 18px 0 0; display: grid; gap: 0; position: relative; }
.seo-facts > div { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.seo-facts > div:first-child { border-top: 0; padding-top: 4px; }
.seo-facts dt {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 5px;
}
.seo-facts dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 991px) { .seo-spread { grid-template-columns: 1fr; gap: 32px; }}/* ── 12. FAQ: правая колонка вместо пустоты ───────────────────────── */

.faq-spread-2 {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.75fr);
	gap: 48px;
	align-items: start;
}
.faq-list { max-width: none; }
.faq-aside {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	padding: 28px 26px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper-warm);
}
.faq-aside-art { color: var(--ink); margin: -6px 0 14px; }
.faq-aside-art svg { display: block; width: 100%; height: auto; max-height: 300px; }
.faq-aside h3 { font-family: var(--sans); font-size: 19px; font-weight: 800; margin: 0 0 10px; }
.faq-aside p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.faq-aside .btn { align-self: flex-start; }

@media (max-width: 991px) {
	.faq-spread-2 { grid-template-columns: 1fr; gap: 28px; }
	.faq-aside { position: static; flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; }
	.faq-aside-art { flex: 0 0 120px; margin: 0; }
	.faq-aside h3, .faq-aside p { flex-basis: 100%; }}
@media (max-width: 640px) {
	.faq-aside { flex-direction: column; align-items: stretch; }
	.faq-aside-art { display: none; }}/* ── 10. Цифры компании: карточки с иконкой и пояснением ──────────────
 * Хайрлайны с голыми числами выглядели бедно. Flex вместо grid, чтобы
 * последний ряд растягивался и в сетке не оставалось дыр.
 *//* ── 9. Видеоотзывы ──────────────────────────────────────────────────
 * Карточки-превью: тринадцать плееров YouTube на главной грузились бы
 * непозволительно долго, поэтому iframe появляется только в модалке.
 */
.rev-card.is-video { padding: 0; overflow: hidden; gap: 0; }
.rev-play {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	padding: 0;
	border: 0;
	background: var(--ink);
	cursor: pointer;
	overflow: hidden;
}
.rev-play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
.rev-play:hover img,
.rev-play:focus-visible img { transform: scale(1.04); opacity: 0.85; }
.rev-play-ico {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--coral);
	color: var(--paper);
	box-shadow: 0 10px 30px -10px color-mix(in oklch, var(--ink) 70%, transparent);
}
.rev-play-ico svg { width: 26px; height: 26px; margin-left: 2px; }
.rev-vtitle {
	margin: 0;
	padding: 18px 20px 20px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.rev-dialog { width: min(880px, 92vw); }
.rev-dialog-title { font-family: var(--sans); font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.rev-dialog-frame { aspect-ratio: 16 / 9; border-radius: var(--r-block); overflow: hidden; background: var(--ink); }
.rev-dialog-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.rev-dialog .btn { margin-top: 16px; }/* ── 7. Стоимость: карточки одной высоты ─────────────────────────────
 * В main.css у .cost-grid стоит align-items: start — карточки обрывались
 * на разной высоте.
 */
.cost-grid { align-items: stretch; }
.cost-card { height: 100%; }
.cost-card .law-list { margin-bottom: 4px; }
.cost-note { margin-top: auto; padding-top: 12px; }
/* ── 13. Статьи: обложки строго одной высоты ─────────────────────────
 * В колоночном флексе картинка задавала карточке автоматический
 * минимальный размер, поэтому вертикальные фото растягивали обложку.
 */
.art-cover {
	position: relative;
	flex: 0 0 auto;
	min-height: 0;
	overflow: hidden;
}
.art-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}/* ── 14. Форма: подписи и поля выровнены по верху ────────────────────
 * Строки грид-лейбла растягивались, и поле «Имя» становилось выше
 * поля «Телефон».
 */
.consult-form label { align-content: start; }
.consult-form .form-row > label { align-self: start; }
.consult-form input,
.consult-form textarea,
.consult-form select { flex: none; }/* ── 2. Онлайн-проверка ──────────────────────────────────────────────
 * Все шаги лежат в одной ячейке грида, поэтому высота блока равнялась
 * самому высокому шагу — экрану с формой. На первом вопросе под
 * вариантами оставалась половина экрана пустоты. Теперь неактивные шаги
 * выведены из потока, и блок принимает высоту текущего шага.
 */
.quiz-grid { min-height: 0; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
.quiz-main { min-height: 0; padding: 32px 36px 26px; }
.quiz-stage { position: relative; display: block; flex: 1; }
.quiz-pane { position: absolute; inset: 0; }
.quiz-pane.is-on { position: relative; inset: auto; }

.quiz-art { padding: 28px 26px 26px; }
.quiz-art-lead {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: color-mix(in oklch, var(--paper) 74%, transparent);
	max-width: 34ch;
}
.quiz-art-stage { min-height: 150px; }
.quiz-assure {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.quiz-assure li {
	position: relative;
	padding-left: 20px;
	font-size: 12.5px;
	line-height: 1.4;
	color: color-mix(in oklch, var(--paper) 66%, transparent);
}
.quiz-assure li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--coral);
}/* Панель навигации: кнопка «Назад» больше не стоит одна в пустоте. */
.quiz-nav {
	align-items: center;
	gap: 16px;
	padding-top: 24px;
	margin-top: 24px;
	border-top: 1px solid var(--line-soft);
}
.quiz-bar {
	flex: 1;
	height: 4px;
	min-width: 60px;
	border-radius: var(--r-block);
	background: color-mix(in oklch, var(--ink) 10%, transparent);
	overflow: hidden;
}
.quiz-bar-fill {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: inherit;
	background: var(--coral);
	transform: scaleX(var(--progress, 0));
	transform-origin: left center;
	transition: transform 380ms var(--ease-out);
}
.quiz-count {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-faint);
	white-space: nowrap;
}/* Экран результата: форма занимает всю ширину карточки. */
.quiz-result > p { max-width: 60ch; }
.quiz-again { margin-top: 16px; }

@media (max-width: 880px) {
	.quiz-grid { grid-template-columns: 1fr; }
	.quiz-art-stage { display: none; }
	.quiz-assure { grid-auto-flow: column; grid-auto-columns: max-content; gap: 16px; overflow-x: auto; }}/* ══ Третья итерация ══════════════════════════════════════════════════ *//* ── Плавная прокрутка по якорям ──────────────────────────────────────
 * scroll-padding-top учитывает фиксированную шапку, чтобы заголовок
 * секции не уезжал под неё.
 */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 104px;
}
html.rm,
html.rm body { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }}
@media (max-width: 1080px) {
	html { scroll-padding-top: 88px; }}/* ── Шапки секций в две колонки ───────────────────────────────────────
 * Заголовок слева, лид справа. В main.css шапка зажата в 62ch и у h2
 * стоит max-width: 20–22ch — при крупном кегле заголовок вылезает
 * из колонки и наезжает на абзац.
 */
.section-header {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 24px 64px;
	align-items: end;
	margin-bottom: 56px;
	max-width: none;
	width: 100%;
}
.section-header > div,
.section-header h2,
.section-header .lead {
	min-width: 0;
	max-width: none;
}
.section-header h2 {
	margin: 0;
	font-size: clamp(32px, 3.6vw, 52px);
	overflow-wrap: break-word;
}
.section-header .lead {
	margin: 0;
	padding-bottom: 4px;
	color: var(--ink-soft);
}

.quiz-sec .section-header {
	max-width: none;
	width: 100%;
}
.quiz-sec .section-header h2,
.quiz-sec .section-header .lead {
	max-width: none;
}

.method-head,
.labs-head {
	max-width: none;
	width: 100%;
}
.method-head h2,
.labs-head h2,
.labs-lead,
.method-head .right,
.method-head .right p {
	max-width: none;
	min-width: 0;
}

@media (max-width: 1100px) {
	.section-header,
	.quiz-sec .section-header,
	.method-head,
	.labs-head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		margin-bottom: 40px;
	}
	.section-header .lead { padding-bottom: 0; }}/* ── 10. Цифры компании: тёмный блок из эталонного макета ─────────────
 * В main.css у .work-grid осталась старая раскладка на две колонки —
 * в макете их три: текст и две карточки в ряд.
 */
.work-grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.85fr);
	gap: 48px;
	align-items: center;
}
.work-copy .label { display: inline-flex; }
.work-copy .lead {
	max-width: 34ch;
	font-size: 15px;
	line-height: 1.6;
	color: color-mix(in oklch, var(--paper) 70%, transparent);
}
.work-card .img { aspect-ratio: 4 / 3; }
.work-facts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

@media (max-width: 1180px) {
	.work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.work-copy { grid-column: 1 / -1; }}
@media (max-width: 880px) {
	.work { margin: 0 20px; padding: 48px 26px 56px; border-radius: var(--r-block); }
	.work-grid { grid-template-columns: 1fr; gap: 32px; }
	.work-copy { grid-column: auto; }
	.work-card,
	.work-card.alt { transform: none; }
	.work-card:hover,
	.work-card.alt:hover { transform: translateY(-4px); }}/* ── 2. Квиз: пояснение к вопросу ─────────────────────────────────────
 * Высоту карточки задаёт левая тёмная панель, и под двумя-четырьмя
 * вариантами оставалась пустота. Теперь её занимает пояснение, зачем
 * задан вопрос, прижатое к низу шага.
 */
.quiz-stage { display: flex; flex-direction: column; }
.quiz-pane.is-on { display: flex; flex-direction: column; flex: 1; }/* Была серая плашка со скруглением и коралловой полоской слева — самый
 * растиражированный шаблон выноски. Теперь это сноска: волосяная линия,
 * метка мелкими заглавными с разрядкой, текст кеглем ниже основного.
 * Ровно так набраны `.sec-rule` и `.label` по всей теме, так что подсказка
 * перестала выглядеть вставным элементом. */
.quiz-why {
	margin: 26px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-mute);
	max-width: 62ch;
}
.quiz-why b {
	display: block;
	margin-bottom: 5px;
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
}/* Прижимаем к низу только там, где под вариантами реально есть запас. */
@media (min-width: 881px) {
	.quiz-why { margin-top: auto; }}
.quiz-result .quiz-why { display: none; }
.method-more { margin-top: 28px; }
.consult-alt { margin-top: 14px; }
.cost-price { display: grid; gap: 4px; margin: 0 0 8px; }
.cost-price small { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.cost-price b { font-family: var(--sans); font-size: 28px; font-weight: 900; letter-spacing: -0.03em; }
.cost-sum { display: inline-block; margin-left: 8px; font-weight: 800; color: var(--ink); }/* ══ Четвёртая итерация: правки по браузерной вычитке ══════════════════
 *
 * Все находки ниже воспроизведены в браузере и замерены по DOM.
 * Общая причина большинства из них — каскад: правила, дописанные в конец
 * этого файла на прошлых итерациях, перебивали более ранние медиазапросы
 * (та же специфичность, но позже), а часть правил в main.css записана
 * селектором `header.nav > .nav-inner.container` — специфичность (0,3,1),
 * из-за чего короткие переопределения по `.nav-inner` не срабатывали.
 *//* ── Шапка: «Контакты» налезали на телефон ────────────────────────────
 * Правая колонка грида была minmax(180px, 1fr) и получала 322px, тогда как
 * телефон + кнопка занимают 353px. Блок с justify-self:end вылезал влево,
 * под последний пункт меню. Проявлялось на 1440/1600/1920 — то есть на
 * самых частых десктопных ширинах. Колонку размечаем по содержимому.
 * Селектор повторяет специфичность правила из main.css, иначе не победит.
 */
@media (min-width: 1081px) {
	header.nav > .nav-inner.container,
	.nav-inner { grid-template-columns: minmax(0, 1fr) auto max-content; }

	header.nav > .nav-inner.container > .nav-side,
	.nav-side { min-width: max-content; }}/* ── Первый экран на телефоне ─────────────────────────────────────────
 * Портрет когда-то был position:absolute и ложился прямо на текст: лид
 * перекрывал подпись на 103×36 px, само фото — на 171×177 px. Его убрали
 * в обычный поток, но тогда он встал отдельной полосой ПОД кнопками —
 * последним блоком первого экрана, и первый экран вырос до 1177 px.
 *
 * Причина в структуре: заголовок, цифры и кнопки лежат в одной коробке
 * `.hero-copy > .hero-copy-main`, а портрет — её сосед. Ни один из них
 * не может встать рядом с цифрами, пока они в разных родителях. Поэтому
 * на телефоне распускаем обе обёртки через `display: contents` — на этой
 * ширине они и так не несут ни отступов, ни фона, ни своей геометрии, —
 * и собираем первый экран одной сеткой. Цифры занимают левую колонку,
 * портрет — правую в том же ряду, кнопки остаются внизу во всю ширину.
 *
 * Проверено на 320–700 px: пересечений нет, первый экран 1177 → 947 px.
 */
@media (max-width: 700px) {
	.hero { min-height: auto; }

	/* Обёртки распускаем: их дети становятся ячейками сетки первого экрана. */
	.hero-copy,
	.hero-copy-main { display: contents; }

	.hero-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"text    text"
			"proof   portrait"
			"actions actions";
		align-content: start;
		row-gap: 20px;
		column-gap: 12px;
		padding: 96px 16px 32px;
		min-height: auto;
	}/* Карта остаётся фоном, но перестаёт спорить с текстом за контраст. */
	.hero-map { opacity: 0.28; }
	.hero-russia-scene { inset: 0; }

	.hero-copy-text { grid-area: text; }
	.hero-proof     { grid-area: proof; }
	.hero-actions   { grid-area: actions; }

	.hero-portrait {
		grid-area: portrait;
		position: static;
		align-self: end;
		justify-self: end;
		display: flex;
		/* Подпись под фотографией: в разметке она идёт первой. */
		flex-direction: column-reverse;
		align-items: flex-end;
		gap: 8px;
		width: min(168px, 44vw);
		max-width: none;
		margin: 0;
		pointer-events: none;
	}
	.hero-portrait img {
		max-width: 100%;
		max-height: none;
		object-position: center bottom;
	}
	/*
	 * `flex: 0 1 13rem` с десктопа в колоночном флексе задаёт не ширину,
	 * а высоту: подпись раздувалась до 208 px при содержимом в 44 px.
	 */
	.hero-portrait figcaption {
		flex: 0 0 auto;
		max-width: 100%;
		margin: 0;
		text-align: right;
	}
	.hero-portrait figcaption strong { font-size: 13px; }
	.hero-portrait figcaption span { font-size: 10.5px; }}
/* ── 8. Ситуации: единственная сетка без мобильного брейкпоинта ───────
 * `.sits` из этого файла перебивал медиазапросы main.css, и на 390px
 * оставались 4 колонки по 82px при подписях в 92–135px: текст уезжал
 * на соседнюю карточку до 124px.
 */
@media (max-width: 1080px) { .sits { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@media (max-width: 780px)  { .sits { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 520px)  { .sits { grid-template-columns: 1fr; }}/* ── 3. Квиз: правая треть уходила за экран ───────────────────────────
 * `.quiz-assure` на узких экранах раскладывается в строку с
 * прокруткой, но без min-width:0 его min-content (545px) распирал
 * колонку грида до 597px внутри контейнера в 358px. Из-за этого на
 * телефоне обрезалось 189px: кнопки «Нет», «3–5», «более 3 млн ₽»
 * оказывались за краем экрана, и пройти проверку было невозможно.
 */
@media (max-width: 880px) {
	.quiz-art,
	.quiz-main,
	.quiz-assure { min-width: 0; }}
@media (max-width: 560px) {
	.quiz-opts { grid-template-columns: 1fr; }
	.quiz-nav { flex-wrap: wrap; gap: 12px; }
	.quiz-bar { min-width: 0; flex: 1 1 100%; order: 3; }}/* ── 14. Консультация: форма оставалась в две колонки на телефоне ─────
 * Медиазапрос на 991px стоял выше по файлу, а правило второй итерации —
 * ниже, с той же специфичностью. В итоге на 390px колонки получались
 * 146px и 178px, а поля ввода — 170px.
 */
@media (max-width: 991px) {
	.consult-spread { grid-template-columns: 1fr; gap: 34px; }}/* ── Подвал: колонки схлопывались в ноль ──────────────────────────────
 * `.foot-grid[data-cols="5"]` — специфичность (0,2,0) — перебивал
 * медиазапросы по `.foot-grid` (0,1,0). На телефоне получалось
 * «260px 0 0 0 0»: четыре колонки ссылок наезжали друг на друга.
 */
@media (max-width: 1080px) {
	.foot-grid[data-cols],
	.foot-grid { grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(0, 1fr)); }}
@media (max-width: 880px) {
	.foot-grid[data-cols],
	.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }}
@media (max-width: 560px) {
	.foot-grid[data-cols],
	.foot-grid { grid-template-columns: 1fr; }}/* ── Внутренние страницы: контент без стилей ──────────────────────────
 * `.entry-content` описывал только h2, h3, p, списки и картинки.
 * Таблица цен и цитата из закона — самое вероятное содержимое страниц
 * юридического сайта — выводились голым браузерным дефолтом.
 *//* :not(.btn) обязателен: на 404 и в пустом блоге кнопки лежат внутри
 * .entry-content, и без исключения «На главную» превращалась в пустую
 * красную таблетку — коралловый текст на коралловой заливке. */
.page-body .entry-content a:not(.btn) {
	color: var(--coral);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.page-body .entry-content a:not(.btn):hover,
.page-body .entry-content a:not(.btn):focus-visible { color: var(--ink); }

.page-body .entry-content h4 {
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 800;
	margin: 22px 0 8px;
}
.page-body .entry-content li { margin-bottom: 6px; }

.page-body .entry-content blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--coral);
	font-family: var(--serif);
	font-style: italic;
	font-size: 19px;
	line-height: 1.5;
	color: var(--ink-soft);
}
.page-body .entry-content blockquote p:last-child { margin-bottom: 0; }
.page-body .entry-content > table { display: block; overflow-x: auto; }

.page-body .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}
.page-body .entry-content th,
.page-body .entry-content td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.page-body .entry-content th {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	border-bottom-color: var(--ink);
}
.page-body .entry-content tr:last-child td { border-bottom: none; }

.page-body .entry-content hr {
	border: none;
	border-top: 1px solid var(--line);
	margin: 32px 0;
}
.page-body .entry-content code {
	font-family: var(--mono);
	font-size: 0.9em;
	padding: 2px 6px;
	border-radius: var(--r-block);
	background: color-mix(in oklch, var(--ink) 7%, transparent);
}
.page-body .entry-content figure { margin: 0 0 20px; }
.page-body .entry-content figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--ink-faint);
}/* ── Форма поиска ─────────────────────────────────────────────────────
 * Выводится на 404 и в пустом блоге через get_search_form(), но в теме
 * не было ни одного правила: получалось голое браузерное поле.
 */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 20px;
}
.search-form label { flex: 1 1 240px; margin: 0; }/* ── Контраст: три подписи не добирали до AA (4.5:1) ──────────────────
 * Замерено в браузере: .cost-tag на светлой карточке — 4.22:1,
 * на акцентной — 3.80:1, галочка .mark-ok — 4.22:1.
 */
.cost-tag { color: var(--ink-mute); }
.law-list .mark-ok { color: var(--coral-press); }/* --ink-faint рассчитан на белый фон и даёт всего 4.16:1 на тёплой
 * подложке карточек. Там, где подложка не белая, берём тон темнее. */
.cost-card .cost-price small { color: var(--ink-mute); }/* ══ 6. Этапы: таймлайн ════════════════════════════════════════════════
 *
 * Перенос компонента Timeline из Aceternity UI (React + Framer Motion +
 * Tailwind) на средства темы. Поведение то же — липкий номер слева и луч,
 * растущий по мере прокрутки, — но без React и без новых зависимостей:
 * sticky и маска решаются CSS, прогресс считает sections.js.
 *
 * Отличия от оригинала осознанные:
 *   — шаг между записями меньше (у оригинала 160px; на шести этапах это
 *     дало бы ~2000px только на таймлайн, а страница и так длинная);
 *   — слева крупный номер и название под ним, а не короткий год;
 *   — луч коралловый, по палитре ЮрЭкс;
 *   — липкий отступ согласован с scroll-padding-top: 104px, иначе маркер
 *     этапа уезжает под фиксированную шапку.
 */

.method-timeline {
	position: relative;
	margin-top: 8px;
	/* Отступ до линии; на нём же стоят маркеры этапов. */
	--tl-rail: 28px;
	--tl-dot: 18px;
	/* Липкая колонка останавливается ниже шапки. */
	--tl-stick: 128px;
}/* Линия во всю высоту ленты. Маска растворяет её на концах, чтобы лента
 * не начиналась и не обрывалась резким торцом. */
.method-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tl-rail);
	width: 2px;
	background: var(--line);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}/* Луч. Масштабируем по вертикали, а не тянем height: transform не вызывает
 * пересчёт раскладки, поэтому прокрутка остаётся плавной. */
.method-line-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--coral) 0%, var(--coral) 62%, color-mix(in oklch, var(--coral) 30%, transparent) 100%);
	transform: scaleY(var(--tl-progress, 0));
	transform-origin: top center;
	opacity: var(--tl-opacity, 0);
	will-change: transform;
}

.method-track {
	list-style: none;
	margin: 0;
	padding: 0;
}

.method-node {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 0 48px;
	padding-bottom: 64px;
}
.method-node:last-child { padding-bottom: 0; }

.method-node-aside {
	position: sticky;
	top: var(--tl-stick);
	align-self: start;
	padding-left: 72px;
	/* Фон нужен, чтобы линия не просвечивала сквозь номер этапа. */
	background: var(--paper);
}/* Маркер этапа сидит ровно по центру линии. */
.method-dot {
	position: absolute;
	left: calc(var(--tl-rail) + 1px - var(--tl-dot) / 2);
	top: 10px;
	width: var(--tl-dot);
	height: var(--tl-dot);
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--line);
	box-shadow: 0 0 0 6px var(--paper);
	transition: border-color var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out);
}
.method-node.is-reached .method-dot {
	border-color: var(--coral);
	background: var(--coral);
}

.method-node-aside .num {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 42px;
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: var(--coral);
	margin-bottom: 10px;
}
.method-node-aside h3 {
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.2;
	color: var(--ink);
	margin: 0;
}

.method-node-body {
	padding-top: 6px;
	/* Строку держим в читаемых пределах: на всю ширину контейнера
	 * получилось бы под 90 знаков. Воздух справа здесь осознанный —
	 * так же устроены .lead в остальных секциях. */
	max-width: 60ch;
}
.method-node-body p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
}/* Блок «берём на себя / от клиента» переехал из правой колонки под ленту:
 * таймлайну нужна вся ширина, а сравнение читается парой карточек. */
.method .compare {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 56px;
}

@media (max-width: 1080px) {
	.method-node { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 0 32px; }
	.method-node-aside { padding-left: 60px; }}/* На узких экранах липкая колонка теряет смысл: описание встаёт под
 * заголовком, лента прижимается к левому краю. */
@media (max-width: 880px) {
	.method-timeline { --tl-rail: 11px; --tl-dot: 14px; }
	.method-node {/* Обязательно: на широких экранах маркер цепляется к липкой левой
		 * колонке, а здесь она становится static — без этого все шесть точек
		 * собирались в одной позиции наверху ленты. */
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding-bottom: 40px;
		padding-left: 44px;
	}
	.method-node-aside {
		position: static;
		padding-left: 0;
		background: none;
	}
	.method-node-aside .num { font-size: 32px; margin-bottom: 6px; }
	.method-node-aside h3 { font-size: 18px; }
	.method-node-body { padding-top: 0; }
	.method-dot { left: calc(var(--tl-rail) + 1px - var(--tl-dot) / 2); top: 6px; }
	.method .compare { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }}/* Без анимации луч просто залит целиком — лента остаётся читаемой. */
@media (prefers-reduced-motion: reduce) {
	.method-line-fill {
		transform: none;
		opacity: 1;
		transition: none;
	}
	.method-dot { transition: none; }}
html.rm .method-line-fill { transform: none; opacity: 1; }/* ══ 5. Услуги: подсветка карточек и сетка без пустых ячеек ═══════════
 *
 * Подсветка — перенос SpotlightCard из React Bits: мягкое пятно следует
 * за курсором внутри карточки. В оригинале это React-компонент, пишущий
 * координаты в CSS-переменные; здесь то же самое делает sections.js, а
 * показ и скрытие берёт на себя :hover — состояние в JS не нужно.
 *
 * Пятно у оригинала белое на тёмном фоне. Карточки услуг светлые, поэтому
 * взят коралловый на низкой прозрачности: белое пятно на белом не видно,
 * а плотный коралловый превращает строгую карточку в неоновую плитку.
 */

.svc {/* Нужен для ::after с inset: 0 — до этого у .svc позиционирование
	 * не задавалось вовсе. */
	position: relative;
}/* Подсветку показываем только там, где есть настоящий курсор. На тач-экране
 * :hover залипает после касания, и пятно осталось бы висеть на карточке. */
@media (hover: hover) and (pointer: fine) {
	.svc {
		transition: border-color var(--dur-ui) var(--ease-out);
	}

	.svc::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
		opacity: 0;
		transition: opacity 240ms var(--ease-out);
		background: radial-gradient(
			220px circle at var(--svc-mx, 50%) var(--svc-my, 50%),
			color-mix(in oklch, var(--coral) 13%, transparent),
			transparent 72%
		);
	}

	.svc:hover::after { opacity: 1; }/* Смешивать коралл с --line нельзя: --line построен на синем --ink,
	 * а color-mix в oklch ведёт тон по короткой дуге и уводит рамку
	 * в пурпур (замерено: 307° вместо 28°). Берём коралл с альфой. */
	.svc:hover { border-color: color-mix(in oklch, var(--coral) 48%, transparent); }/* На тёмной карточке коралловый по синему почти не читается. */
	.svc.dark::after {
		background: radial-gradient(
			220px circle at var(--svc-mx, 50%) var(--svc-my, 50%),
			color-mix(in oklch, var(--paper) 16%, transparent),
			transparent 72%
		);
	}
	.svc.dark:hover { border-color: color-mix(in oklch, var(--paper) 30%, transparent); }}

@media (prefers-reduced-motion: reduce) {
	.svc,
	.svc::after { transition: none; }}/* ── Сетка без пустой ячейки в последнем ряду ─────────────────────────
 *
 * Услуг семь, а сетка четырёхколоночная выше 1080px и двухколоночная до
 * 560px — пустая ячейка вылезала в обоих случаях: 4+3 и 2+2+2+1.
 *
 * Правило завязано на количество карточек, а не на «первую»: услуги
 * заводит контент-менеджер, и жёсткий span сломался бы уже на восьмой.
 * Разбор по остатку от деления на число колонок.
 *
 * :nth-last-of-type, а не :nth-last-child — на случай, если внутри сетки
 * появится вспомогательный элемент другого тега: он не собьёт счёт.
 */
@media (min-width: 1081px) {/* остаток 3 — первую карточку на две колонки */
	.svc-grid .svc:first-of-type:nth-last-of-type(7),
	.svc-grid .svc:first-of-type:nth-last-of-type(11) { grid-column: span 2; }/* остаток 2 — две первые по две колонки */
	.svc-grid .svc:first-of-type:nth-last-of-type(6),
	.svc-grid .svc:first-of-type:nth-last-of-type(6) + .svc,
	.svc-grid .svc:first-of-type:nth-last-of-type(10),
	.svc-grid .svc:first-of-type:nth-last-of-type(10) + .svc { grid-column: span 2; }/* остаток 1 — первую во всю ширину */
	.svc-grid .svc:first-of-type:nth-last-of-type(5),
	.svc-grid .svc:first-of-type:nth-last-of-type(9) { grid-column: span 4; }}/* Две колонки: пустая ячейка при любом нечётном количестве. */
@media (min-width: 561px) and (max-width: 1080px) {
	.svc-grid .svc:first-of-type:nth-last-of-type(odd) { grid-column: span 2; }}/* Растянутая карточка иначе разгоняет строку под 55–60 знаков.
 * Ограничение общее для всех карточек — так не нужно вычислять,
 * какая именно оказалась широкой. */
.svc p { max-width: 46ch; }/* ══ 4. Почему выбирают: bento-раскладка ═══════════════════════════════
 *
 * Перенос BentoGrid из Aceternity UI. В оригинале это два React-компонента
 * на Tailwind без состояния и без анимационных библиотек: весь эффект —
 * тень при наведении и сдвиг текста на 8px. Здесь то же самое на CSS Grid
 * и токенах темы, JS нужен только чтобы перенести карту из первого экрана.
 *
 * Первая причина занимает две колонки: восемь пунктов дают тогда девять
 * ячеек — ровно три ряда без пустых мест. Раньше секция была плоским
 * списком в две колонки, где все восемь пунктов весили одинаково.
 */

.why-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	/* У оригинала строки жёстко 18rem. Берём минимум: у нас в ячейках живой
	 * текст, и на узкой колонке он длиннее. */
	grid-auto-rows: minmax(268px, auto);
}

.why-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
	transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.why-card.is-wide { grid-column: span 2; }

@media (hover: hover) and (pointer: fine) {
	.why-card:hover {
		box-shadow: var(--shadow);
		border-color: color-mix(in oklch, var(--ink) 26%, transparent);
	}
	.why-card:hover .why-body { transform: translateX(8px); }}/* Верхняя часть ячейки — то место, где у Aceternity лежит градиентная
 * заглушка. У нас там композиции из вёрстки и SVG. */
.why-cell {
	flex: 1 1 auto;
	display: flex;
	min-height: 108px;
	border-radius: var(--r-block);
	background: var(--paper-warm);
	overflow: hidden;
}
.why-mock { flex: 1; min-width: 0; }

.why-body { transition: transform 220ms var(--ease-out); }
.why-body .ico { width: 24px; height: 24px; color: var(--coral); }
.why-body h3 {
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0 0 6px;
	color: var(--ink);
}
.why-body p {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 0;
	max-width: 52ch;
}
.why-tag {
	display: block;
	margin: 8px 0 4px;
	font-family: var(--sans);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}/* ── Смета ─────────────────────────────────────────────────────────── */
.why-mock-price {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 16px 18px;
}
.why-mock-price .why-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 7px;
	border-bottom: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
	font-family: var(--sans);
	font-size: 12.5px;
	color: var(--ink-mute);
}
.why-mock-price .why-row:last-child { border-bottom: none; }
.why-mock-price b { font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }/* 19px при весе 800 — порог «крупного текста» в WCAG, где достаточно 3:1.
 * На тёплой подложке ячейки коралл даёт 4.22, то есть для обычного
 * текста не дотягивает до 4.5, а для крупного проходит с запасом. */
.why-mock-price .is-lead b { font-size: 19px; color: var(--coral); }/* ── Имущество ─────────────────────────────────────────────────────── */
.why-mock-assets {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	padding: 14px 16px;
}
.why-mock-assets .why-row {
	display: grid;
	grid-template-columns: 18px 1fr auto;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: var(--r-block);
	background: var(--paper);
	font-family: var(--sans);
	font-size: 12px;
	color: var(--ink);
}
.why-mock-assets small { font-size: 10.5px; color: var(--ink-mute); }
.why-mock-assets .ico { width: 16px; height: 16px; color: var(--coral); }/* ── Карта ─────────────────────────────────────────────────────────── */
.why-mock-map {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}
.why-map-fallback .ico { width: 54px; height: 54px; color: color-mix(in oklch, var(--ink) 30%, transparent); }
.why-mock-map.has-map .why-map-fallback { display: none; }/*
 * Копия карты приходит с классом .hero-russia — он нужен ради заливок
 * регионов, поэтому здесь снимаем всё, что относилось к её месту
 * в первом экране.
 */
.why-mock-map svg {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
	max-height: 180px;
	transform: none;
	opacity: 1;
	animation: none;
}
.why-mock-map .office-label,
.why-mock-map .coverage { display: none; }/* ── Команда ───────────────────────────────────────────────────────── */
.why-mock-team {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.why-face {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin-left: -14px;
	border: 3px solid var(--paper);
	border-radius: 50%;
	background: var(--paper-warm);
	overflow: hidden;
}
.why-face:first-child { margin-left: 0; }
.why-face img,
.why-face svg { width: 100%; height: 100%; object-fit: cover; }
.why-face-more {
	margin-left: 10px;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--ink-mute);
}/* ── Рисованные ячейки ─────────────────────────────────────────────── */
.why-mock-art {
	display: grid;
	place-items: center;
	padding: 14px;
}
.why-mock-art svg { width: 100%; max-height: 160px; }/* ── Телефон ───────────────────────────────────────────────────────── */
.why-mock-call {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 16px 18px;
}
.why-mock-call b {
	font-family: var(--sans);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.why-mock-call small { font-size: 11px; color: var(--ink-mute); }
.why-fake-btn {
	align-self: flex-start;
	padding: 8px 16px;
	border-radius: var(--r-block);
	background: var(--coral);
	color: var(--paper);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 700;
}/* ── Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.why-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }/* Ширину снимаем со всех: иначе широкая ячейка занимает ряд целиком,
	 * а следующая остаётся с пустой половиной — та самая дыра, от которой
	 * мы и уходим. */
	.why-card.is-wide { grid-column: span 1; }}
@media (max-width: 620px) {
	.why-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	.why-cell { min-height: 140px; }}

@media (prefers-reduced-motion: reduce) {
	.why-card,
	.why-body { transition: none; }}/* ══ 8. Ситуации: список в две колонки с выезжающей лентой ═════════════
 *
 * Перенос FlowingMenu из React Bits. В оригинале при наведении из
 * ближайшего к курсору края выезжает полоса с бегущим названием; логика
 * определения края перенесена один в один, а сама анимация собрана на
 * CSS-переходах и одной keyframes-анимации — GSAP здесь не нужен.
 *
 * Раньше секция была сеткой 4 × N: девять сценариев давали 4+4+1, то есть
 * три пустые ячейки в последнем ряду, а с десятью — две. Теперь это поток
 * по колонкам: пустых ячеек не бывает при любом количестве, просто левая
 * колонка на строку длиннее.
 */

.sits {
	display: block;
	columns: 2;
	column-gap: 48px;
	border-top: 1px solid var(--line);
}

.sit {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	overflow: hidden;
	break-inside: avoid;
	min-height: 0;
	padding: 18px 6px;
	border: none;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}
.sit b { flex: 1 1 auto; min-width: 0; }
.sit small { flex: 0 0 auto; }

.sit:hover,
.sit:focus-visible {
	background: none;
	border-color: var(--line);
	color: var(--ink);
}/* ── Лента ────────────────────────────────────────────────────────────
 * Три уровня, как в оригинале: внешний слой уезжает по вертикали,
 * внутренний компенсирует его в противоход, а бегущая строка живёт на
 * третьем — иначе одна и та же трансформация конфликтует сама с собой.
 * Разметку собирает sections.js: без JS ленты просто нет, а список
 * остаётся рабочим.
 */
.sit-ribbon {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--coral);
	transform: translateY(101%);
	pointer-events: none;
	/* z-index не нужен: лента добавляется последней и рисуется поверх.
	 * Именно так это решено в оригинале. */}
.sit-ribbon-inner {
	height: 100%;
	overflow: hidden;
	transform: translateY(-101%);
}
.sit-ribbon,
.sit-ribbon-inner {
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sit-ribbon-run {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
	animation: yurex-ribbon 16s linear infinite;
	will-change: transform;
}
.sit-ribbon-part {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-right: 28px;
	white-space: nowrap;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 700;
	color: var(--paper);
}
.sit-ribbon-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: color-mix(in oklch, var(--paper) 70%, transparent);
}/* Содержимое продублировано, поэтому сдвиг на половину даёт стык в стык. */
@keyframes yurex-ribbon {
	to { transform: translateX(-50%); }}/*
 * Лента только там, где есть настоящий курсор. На тач-экране :hover
 * залипает после касания, а выезжать ей в ответ на тап незачем.
 */
@media (hover: none), (pointer: coarse) {
	.sit-ribbon { display: none; }}
@media (prefers-reduced-motion: reduce) {
	.sit-ribbon { display: none; }}/* ── Адаптив ──────────────────────────────────────────────────────────
 * Держим в конце: правило columns: 2 объявлено выше, и при равной
 * специфичности выигрывает более позднее.
 */
@media (max-width: 780px) {
	.sits { columns: 1; }}/* ══ Модальные окна: центрирование и ширина ═══════════════════════════
 *
 * Нативный <dialog> центрируется браузерным `margin: auto`, но в main.css
 * стоит глобальный сброс `* { margin: 0 }` — он его перебивает, и оба
 * диалога темы (видеоотзыв и «Заявка принята» после отправки формы)
 * прилипали к левому верхнему углу экрана.
 */
.od-dialog { margin: auto; }/*
 * `.od-dialog { max-width: 420px }` зажимал ширину видеоокна: max-width
 * всегда сильнее width, поэтому `min(880px, 92vw)` из .rev-dialog не
 * срабатывал и видео открывалось в 420px.
 */
.rev-dialog { max-width: min(880px, 92vw); }/* ══ 9. Видеоотзывы: лента с инерцией ══════════════════════════════════
 *
 * Перенос CircularGallery из React Bits с bend = 0.
 *
 * Почему без WebGL. В оригинале картинки рисуются в ogl как текстуры на
 * плоскостях, а параметр bend выгибает их в дугу. При bend = 0 компонент
 * делает ровно `plane.position.y = 0; plane.rotation.z = 0` — то есть
 * изгиб и был единственным, ради чего нужен WebGL. Остаётся плоская лента
 * со скруглением и инерционной прокруткой, а это умеет обычный DOM.
 *
 * И это оказалось необходимым: в canvas нет элементов, по которым можно
 * кликнуть, пришлось бы считать попадание по координатам. Здесь каждая
 * плитка — <button>, поэтому работают клик, клавиатура и фокус, а модальное
 * окно темы подхватывает их без правок.
 *
 * Разметку строит sections.js поверх обычной карусели. Без JS остаётся
 * карусель со scroll-snap — секция работает в любом случае.
 */

.rev-gallery {
	position: relative;
	overflow: hidden;
	margin-top: 8px;
	/* Края растворяем, чтобы лента уходила за границы, а не обрывалась. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	cursor: grab;
	user-select: none;
}
.rev-gallery.is-dragging { cursor: grabbing; }
.rev-gallery:focus-visible {
	outline: 2px solid var(--coral);
	outline-offset: 4px;
}

.rev-gallery-track {
	display: flex;
	gap: 20px;
	width: max-content;
	will-change: transform;
}

.rev-gallery .rev-card {
	flex: 0 0 auto;
	width: 340px;
	margin: 0;
}/*
 * Гасить клик после протяжки через pointer-events нельзя: класс снимается
 * в setTimeout, а тот выполняется ПОСЛЕ события click — указатели окажутся
 * заблокированы ровно в момент клика, и видео не откроется никогда.
 * Протяжку отличаем в самом обработчике click, по пройденному расстоянию.
 *//* ── Кнопка паузы ─────────────────────────────────────────────────────
 * По WCAG 2.2.2 у движения, которое стартует само и длится дольше пяти
 * секунд, должен быть способ его остановить. Пауза по наведению закрывает
 * только случай мыши: клавиатуре и тач-экрану нужна кнопка.
 */
.rev-gallery-pause {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	appearance: none;
	padding: 6px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-control);
	background: color-mix(in oklch, var(--paper) 88%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--dur-ui) var(--ease-out);
}
.rev-gallery:hover .rev-gallery-pause,
.rev-gallery:focus-within .rev-gallery-pause,
.rev-gallery-pause:focus-visible { opacity: 1; }
.rev-gallery-pause[aria-pressed="true"] {
	opacity: 1;
	border-color: var(--coral);
	color: var(--coral);
}

@media (max-width: 780px) {
	.rev-gallery .rev-card { width: 260px; }}

@media (prefers-reduced-motion: reduce) {
	.rev-gallery-pause { transition: none; }}/* ══ 10. Частые вопросы: пунктирные линии ══════════════════════════════
 *
 * Ориентир — блок «FAQs with dashed lines» (Aceternity UI). Исходник
 * закрыт: реестр отдаёт 401 по всем вариантам FAQ, это платный Pro.
 * Собрано по идее на своей разметке, без правок в PHP и JS.
 *
 * Что взято: пунктир во всю ширину между вопросами, раскрытый вопрос как
 * вложенная карточка (отступает от линий со всех сторон), плюс, который
 * поворачивается в крестик.
 *
 * Что развёрнуто: оригинал тёмный, карточка там СВЕТЛЕЕ фона. У нас лист
 * белый, поэтому карточка наоборот темнее — иначе её не видно.
 *
 * Две колонки сохранены: раскладка .faq-spread-2 выше остаётся как была,
 * здесь только оформление самого списка.
 */

.faq-list {
	position: relative;
	border-top: none;   /* точечная линия выше заменена пунктиром строк */
	padding: 0 12px;
}/* Вертикальные направляющие по краям колонки. */
.faq-list::before,
.faq-list::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background-image: repeating-linear-gradient(to bottom, var(--line) 0 5px, transparent 5px 11px);
}
.faq-list::before { left: 0; }
.faq-list::after { right: 0; }/* Пунктир — граница самой строки, поэтому идёт во всю ширину колонки,
 * а карточка внутри отступает от него. */
.fi {
	position: relative;
	isolation: isolate;   /* держим подложку внутри строки */
	border-bottom: none;
	border-top: 1px dashed var(--line);
}
.fi:first-child { border-top: none; }/* Подложка раскрытого вопроса. Отдельным слоем, потому что карточка
 * обнимает и вопрос, и ответ, а это два соседних элемента. */
.fi.is-open::before {
	content: '';
	position: absolute;
	inset: 9px 10px;
	z-index: -1;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-block);
	background: var(--paper-warm);
}

.fq {
	align-items: flex-start;
	gap: 24px;
	padding: 22px;
	border-radius: var(--r-block);   /* кольцо фокуса повторяет форму карточки */
	line-height: 1.4;
}
.fq:hover,
.fq:focus-visible { background: transparent; }
.fi:not(.is-open):hover .fq { color: var(--coral); }/* Знак «плюс» рисуем двумя полосками, а не символом: main.js подменяет
 * текст на «−», а минус, повёрнутый на 45°, дал бы косую черту вместо
 * крестика. Сам текст остаётся в разметке, он только скрыт. */
.fq .plus {
	position: relative;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 3px;
	font-size: 0;
	color: var(--ink-mute);
	transition: transform 280ms var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.fq .plus::before,
.fq .plus::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1.5px;
	border-radius: var(--r-block);
	background: currentColor;
	transform: translateY(-50%);
}
.fq .plus::after { transform: translateY(-50%) rotate(90deg); }
.fi:hover .plus { color: var(--coral); }
.fi.is-open .plus {
	color: var(--ink-mute);
	transform: rotate(45deg);   /* плюс превращается в крестик */}/* Нижний отступ ответа — на абзаце, а не на обёртке. Обёртка это элемент
 * сетки с высотой `0fr`, и при box-sizing: border-box её вертикальный
 * padding всё равно даёт высоту: у закрытых вопросов проступала полоска
 * ответа. По горизонтали отступ на обёртке безопасен. */
.fa > div { padding: 0 40px 0 22px; }
.fa p {
	padding: 0 0 24px;
	font-size: 14.5px;
	line-height: 1.65;
	max-width: 68ch;
}/* Направляющие по краям съедают ширину строки на телефоне, поэтому от них
 * остаётся только отступ. */
@media (max-width: 780px) {
	.faq-list { padding: 0; }
	.faq-list::before,
	.faq-list::after { display: none; }
	.fi.is-open::before { inset: 6px 0; }
	.fq { padding: 18px 14px; font-size: 15px; gap: 16px; }
	.fa > div { padding: 0 34px 0 14px; }
	.fa p { padding-bottom: 18px; }}

@media (prefers-reduced-motion: reduce) {
	.fq .plus { transition: none; }}/* ══ 11. Консультация: тёмная плита и световые лучи ═══════════════════
 *
 * Финальная конверсия ничем не отличалась от остальных тринадцати секций —
 * тот же белый лист. Тёмная плита отделяет её как финал страницы.
 *
 * Приём в теме уже был: `.contacts-cta` — `background: var(--ink)`,
 * `color: var(--paper)` и свой набор призрачных кнопок. Здесь то же самое,
 * только на всю секцию.
 *
 * Лучи — перенос Background Beams (Aceternity UI). Разметку строит
 * sections.js; без JS остаётся чистая тёмная плита, секция не ломается.
 */

.cta {
	isolation: isolate;   /* держим плиту и лучи под содержимым */
	padding: 112px 0;
	color: var(--paper);
	/* Коралловый на тёмно-синем даёт 2.32:1 — для текста это провал при
	 * норме 4.5:1. Осветлённый на 55% даёт 5.0:1 и остаётся коралловым. */
	--cta-coral: color-mix(in oklch, var(--coral) 55%, var(--paper));
}/* Плита отдельным слоем. Отрицательный z-index внутри `isolation: isolate`
 * кладёт её ниже блоков в потоке, но выше фона секции, поэтому текст
 * остаётся сверху. */
.cta::before {
	content: '';
	position: absolute;
	inset: 0 24px;
	z-index: -1;
	border-radius: var(--r-block);
	background: var(--ink);
}/* ── Лучи ─────────────────────────────────────────────────────────────
 * Тот же inset и радиус, что у плиты, плюс обрезка — иначе кривые вылезут
 * за скруглённый угол.
 */
.cta-beams {
	position: absolute;
	inset: 0 24px;
	z-index: -1;
	border-radius: var(--r-block);
	overflow: hidden;
	pointer-events: none;
}
.cta-beams svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}/* ── Содержимое на тёмном ─────────────────────────────────────────────── */
.cta .display,
.cta .consult-phone { color: var(--paper); }
.cta .lead { color: color-mix(in oklch, var(--paper) 80%, transparent); }
.cta .consult-phone small,
.cta .consult-schedule { color: color-mix(in oklch, var(--paper) 62%, transparent); }

.cta .label,
.cta .display .dot,
.cta .sec-rule .roman,
.cta .sec-rule .dot-mark { color: var(--cta-coral); }

.cta .sec-rule {
	border-top-color: color-mix(in oklch, var(--paper) 22%, transparent);
	color: color-mix(in oklch, var(--paper) 58%, transparent);
}/* Призрачные кнопки на тёмном — тот же приём, что у `.contacts-cta`. */
.cta .consult-messengers .btn-ghost,
.cta .consult-alt .btn-ghost {
	color: var(--paper);
	border-color: color-mix(in oklch, var(--paper) 40%, transparent);
}
.cta .consult-messengers .btn-ghost:hover,
.cta .consult-alt .btn-ghost:hover,
.cta .consult-messengers .btn-ghost:focus-visible,
.cta .consult-alt .btn-ghost:focus-visible {
	color: var(--paper);
	border-color: var(--paper);
}/* Телефон подсвечиваем светлым: коралловый на тёмно-синем не проходит
 * по контрасту даже осветлённый, если рядом стоит белый текст. */
.cta .consult-phone:hover b,
.cta .consult-phone:focus-visible b {
	color: var(--paper);
	text-decoration: underline;
}/* Кольцо фокуса на тёмном должно быть светлым, а не коралловым. */
.cta a:focus-visible,
.cta button:focus-visible { outline-color: var(--paper); }
.cta .consult-form-wrap a:focus-visible,
.cta .consult-form-wrap button:focus-visible { outline-color: var(--coral); }
.cta .consult-form-wrap .btn-primary:focus-visible { outline-color: var(--ink); }

@media (max-width: 780px) {
	.cta { padding: 72px 0; }
	.cta::before,
	.cta-beams { inset: 0 12px; border-radius: var(--r-block); }}/* ══ 12. Поля форм: кольцо фокуса не должно кричать об ошибке ═════════
 *
 * Глобально в теме фокус — коралловое кольцо в 3px от элемента. На ссылках
 * и кнопках это работает, а на поле ввода читается как ошибка: красная
 * рамка вокруг поля — универсальный сигнал «вы ошиблись». Тем более что
 * тем же коралловым тема красит настоящую ошибку — `.is-invalid`.
 *
 * Поэтому у полей фокус тёмный и обнимает поле, а коралловый остаётся
 * только за ошибкой. Кольцо не убрано: без видимого фокуса форму нельзя
 * заполнить с клавиатуры (WCAG 2.4.7).
 */
.consult-form input:focus-visible,
.consult-form textarea:focus-visible,
.consult-form select:focus-visible,
.calc select:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 0;
	border-color: var(--ink);
}/* Ошибка остаётся коралловой и теперь ни с чем не путается. */
.consult-form input.is-invalid:focus-visible,
.consult-form textarea.is-invalid:focus-visible,
.consult-form input[aria-invalid='true']:focus-visible,
.consult-form textarea[aria-invalid='true']:focus-visible {
	outline-color: var(--coral);
	border-color: var(--coral);
}/* ══ 13. Онлайн-проверка: «идёт проверка» перед результатом ═══════════
 *
 * Перенос Multi Step Loader (Aceternity UI). Разметку строит main.js —
 * там же живёт вся логика квиза.
 *
 * От оригинала: размытие подложки, список строк, который уезжает вверх на
 * 40px за шаг, затухание соседних строк и радиальная виньетка поверх.
 *
 * Изменено: оригинал накрывает весь экран (`fixed inset-0`), а нам нужно
 * накрыть только карточку квиза. Радиус виньетки уменьшен с 900px под
 * размер карточки — на 900px она бы просто не проявилась.
 *//* Карточка квиза не была позиционирована, и оверлей привязался бы к секции
 * — то есть накрыл бы и заголовок с лидом. */
.quiz-card { position: relative; }

.quiz-check {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	border-radius: inherit;
	overflow: hidden;
	background: color-mix(in oklch, var(--paper) 45%, transparent);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	animation: quiz-check-in 200ms var(--ease-out);
}
.quiz-check.is-out {
	opacity: 0;
	transition: opacity 240ms var(--ease-out);
}
@keyframes quiz-check-in {
	from { opacity: 0; }
	to   { opacity: 1; }}/* Виньетка поверх списка: в центре прозрачная, к краям сплошная. Гасит
 * просвечивающие сквозь размытие варианты ответов. */
.quiz-check::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--paper);
	-webkit-mask-image: radial-gradient(300px at 50% 50%, transparent 30%, #000);
	mask-image: radial-gradient(300px at 50% 50%, transparent 30%, #000);
	pointer-events: none;
}

.quiz-check-list {
	position: relative;
	z-index: 1;   /* выше виньетки */
	width: min(320px, 80%);
}

.quiz-check-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-mute);
	/* Сдвиг и прозрачность считает main.js — здесь только сглаживание,
	 * длительность 0.5s как в оригинале. */
	transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.quiz-check-row.is-now { color: var(--coral); font-weight: 800; }

.quiz-check-ico {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}
.quiz-check-ico svg {
	display: block;
	width: 100%;
	height: 100%;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 640px) {
	.quiz-check-row { font-size: 13px; margin-bottom: 14px; }
	.quiz-check::after {
		-webkit-mask-image: radial-gradient(200px at 50% 50%, transparent 30%, #000);
		mask-image: radial-gradient(200px at 50% 50%, transparent 30%, #000);
	}}/* При выключенной анимации main.js не показывает проверку вовсе, но правило
 * оставляем на случай, если разметка всё же окажется на странице. */
@media (prefers-reduced-motion: reduce) {
	.quiz-check,
	.quiz-check-row { animation: none; transition: none; }}/* ══ 14. Комментарии к записи ═════════════════════════════════════════
 *
 * Стилей не было вовсе: `comments_template()` вызывался, файла шаблона в теме
 * не лежало, и WordPress подставлял свою заглушку. Шаблон добавлен, здесь его
 * оформление — в той же типографике, что и `.entry-content`.
 */

.comments {
	max-width: 760px;
	margin: 56px 0 0;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}

.comments-title {
	font-family: var(--sans);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
}

.comment-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
.comment-list .children {
	list-style: none;
	margin: 0;
	padding-left: 28px;
	border-left: 1px dashed var(--line);
}
.comment-list li { margin-bottom: 24px; }

.comment-body {
	padding: 20px 22px;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-block);
	background: var(--paper-warm);
}/* Автор записи выделен волосяной коралловой рамкой, а не заливкой: заливка
 * спорила бы с самим комментарием. */
.comment-list .bypostauthor > .comment-body { border-color: var(--coral); }

.comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author img {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}
.comment-author .fn {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 800;
	font-style: normal;
	color: var(--ink);
}
.comment-author .says { display: none; }

.comment-metadata {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-metadata a:hover { color: var(--ink); }

.comment-content p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-soft);
}
.comment-content p:last-child { margin-bottom: 0; }

.comment-awaiting-moderation {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 12px;
	color: var(--coral);
}

.reply { margin-top: 12px; }
.comment-reply-link {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}
.comment-reply-link:hover,
.comment-reply-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

.comments-closed {
	font-size: 13.5px;
	color: var(--ink-mute);
}/* ── Форма ────────────────────────────────────────────────────────────
 * Форма получает класс `consult-form`, поэтому поля наследуют оформление
 * заявок вместе с исправленным кольцом фокуса.
 */
.comment-form p { margin: 0 0 16px; }
.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
}
.comment-form textarea {
	width: 100%;
	min-height: 120px;
	resize: vertical;
}
.comment-form .comment-notes,
.comment-form .form-submit { margin-bottom: 0; }
.comment-form .comment-notes {
	font-size: 13px;
	color: var(--ink-mute);
	margin-bottom: 20px;
}
.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
/*
 * Галочка наследовала от полей заявки ширину 100% и высоту 44px: занимала
 * всю строку и выталкивала подпись за край. На телефоне страница статьи
 * становилась шире экрана (459px при 375px), и «Меню» с кнопкой чата
 * уезжали за правый край.
 */
.comment-form .comment-form-cookies-consent input {
	flex: none;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0;
}
.comment-form .comment-form-cookies-consent label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-soft);
}
.comment-form .form-submit { margin-top: 20px; }

#cancel-comment-reply-link {
	margin-left: 12px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--coral);
}

@media (max-width: 640px) {
	.comment-body { padding: 16px; }
	.comment-list .children { padding-left: 14px; }}/* ══ 15. Региональные страницы ════════════════════════════════════════
 *
 * Первый экран здесь другой, чем на главной. У федерального героя своя
 * полноэкранная сцена с картой России и портретом — на региональной
 * странице карта не нужна, её место занимает офис с адресом ниже по
 * странице. Поэтому свои классы, а не `.hero`.
 *//* Первый экран региональной страницы собирается тем же шаблоном, что и
 * федеральный, поэтому своих стилей ему не нужно. *//* ── Карта края ───────────────────────────────────────────────────────
 * Контуры взяты из карты России на главной: тот же регион, та же проекция.
 *//* Соседние регионы — только подсказка о месте, поэтому едва заметны. *//* Цифры в первом экране идут строкой, а не столбиком: на главной колонка
 * узкая, здесь ширина свободна. *//* В теме `.hero-actions .btn` стоит flex: 1 — две кнопки делят узкую колонку
 * федерального героя. Здесь колонка широкая, и кнопки растягивались до
 * половины экрана каждая. *//* ── Цена в карточке услуги ───────────────────────────────────────────
 * Отделяем волосяной линией: цена — не продолжение описания, а отдельный
 * факт, и человек ищет её глазами.
 */
.svc-price {
	margin: auto 0 14px;
	padding-top: 12px;
	border-top: 1px dotted var(--line);
}
.svc-price small {
	display: block;
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 2px;
}
.svc-price b {
	font-family: var(--sans);
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -0.02em;
}
.svc.dark .svc-price { border-top-color: color-mix(in oklch, var(--paper) 26%, transparent); }
.svc.dark .svc-price small { color: color-mix(in oklch, var(--paper) 66%, transparent); }/* ── Выносной абзац ───────────────────────────────────────────────────── */
.region-note {
	max-width: 76ch;
	margin: 32px 0 0;
	padding-left: 20px;
	border-left: 1px solid var(--line);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-soft);
}/* ── Другие направления ───────────────────────────────────────────────── */
.region-sub {
	margin: 56px 0 20px;
	font-family: var(--sans);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 800;
	letter-spacing: -0.02em;
}
.region-other {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 48px;
}
.region-other article {
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.region-other h4 {
	margin: 0 0 8px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 800;
}
.region-other p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: 54ch;
}

.region-more { margin-top: 32px; }/* ── Узкие экраны ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.region-other { grid-template-columns: 1fr; gap: 20px; }}

/* ── Кейсы региона ────────────────────────────────────────────────────── */
.region-cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}
.region-cases article {
	padding: 24px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
}
.region-cases h3 {
	margin: 0 0 14px;
	font-family: var(--sans);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.region-case-facts { margin: 0 0 14px; display: grid; gap: 8px; }
.region-case-facts > div { display: flex; justify-content: space-between; gap: 16px; }
.region-case-facts dt {
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.region-case-facts dd { margin: 0; font-family: var(--sans); font-weight: 800; font-size: 14px; }
.region-case-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }/* ── Отзывы ───────────────────────────────────────────────────────────
 * Карусель федеральной страницы здесь избыточна: отзывов немного и они
 * короткие, поэтому обычная сетка — её и робот прочитает без JS.
 */
.region-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.region-reviews article {
	display: flex;
	flex-direction: column;
	padding: 24px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
}
.region-reviews blockquote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	flex: 1 1 auto;
}
.region-reviews blockquote p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ink-soft);
}
.region-reviews footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding-top: 14px;
	border-top: 1px dotted var(--line);
}
.region-reviews footer b { font-family: var(--sans); font-size: 14px; font-weight: 800; }
.region-reviews footer span { font-size: 13px; color: var(--ink-mute); }
.region-reviews footer small {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.region-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 32px;
}
.region-more .rev-platforms { margin: 0; }/* ── Офис ─────────────────────────────────────────────────────────────── */
.region-office-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 40px;
	align-items: start;
}
.region-office-facts { margin: 0; display: grid; gap: 0; }
.region-office-facts > div {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px dashed var(--line-soft);
}
.region-office-facts > div:first-child { border-top: 1px solid var(--line); }
.region-office-facts dt {
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	line-height: 1.8;
}
.region-office-facts dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}
.region-office-facts dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.region-office-facts dd a:hover,
.region-office-facts dd a:focus-visible { border-bottom-color: var(--ink); }

.region-office-map {
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	overflow: hidden;
	background: var(--paper-warm);
	min-height: 320px;
}
.region-office-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }/* ── О компании ───────────────────────────────────────────────────────── */
.region-about-body { max-width: 76ch; }
.region-about-body p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-soft);
}

@media (max-width: 991px) {
	.region-office-grid { grid-template-columns: 1fr; gap: 28px; }}

@media (max-width: 640px) {
	.region-office-facts > div { grid-template-columns: 1fr; gap: 4px; }
	.region-cases article,
	.region-reviews article { padding: 20px; }}/* ══ 7. Стоимость: тарифные карточки ═══════════════════════════════════
 *
 * Блок переехал с «состава цены» на тарифы: три процедуры карточками,
 * остальные строкой, обязательные расходы и рассрочка — плашкой снизу.
 * Базу берём у прежних `.cost-card` — рамка, радиус, отступы совпадают,
 * — и дописываем только новое.
 */
.cost-card { position: relative; gap: 10px; }
.cost-card.is-top {
	border: 2px solid var(--ink);
	box-shadow: 0 18px 40px -28px color-mix(in oklch, var(--ink) 50%, transparent);
}
.cost-flag {
	position: absolute;
	top: -2px;
	right: -2px;
	padding: 5px 10px;
	background: var(--coral);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cost-sub { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); }
.cost-card .cost-price {
	margin: 4px 0 0;
	padding: 14px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
/* Список тянется, чтобы кнопки у всех трёх карточек стояли на одной линии. */
.cost-card .law-list { flex: 1; margin-top: 6px; }
.cost-card .law-list li { font-size: 13.5px; grid-template-columns: 16px 1fr; gap: 9px; }
.cost-card .btn { margin-top: 18px; align-self: stretch; justify-content: center; }

.cost-rest {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 18px 0 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
}
.cost-rest li { padding: 16px 18px; border-right: 1px solid var(--line); }
.cost-rest li:last-child { border-right: 0; }
.cost-rest span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.cost-rest b { display: block; margin-top: 6px; font-family: var(--sans); font-size: 15px; font-weight: 800; }

.cost-extra {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 20px;
	margin-top: 20px;
}
.cost-extra > div {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper-warm);
}
.cost-extra h3 { font-family: var(--sans); font-size: 18px; font-weight: 800; margin: 0; }
.cost-extra .cost-note { margin-top: auto; padding-top: 12px; }
.cost-split {
	background: var(--ink) !important;
	border-color: transparent !important;
	color: var(--paper);
}
.cost-split h3 { color: var(--paper); }
.cost-split p { margin: 0; font-size: 13.5px; line-height: 1.6; color: color-mix(in oklch, var(--paper) 82%, transparent); }
.cost-split .cost-tag { color: var(--paper); }
.cost-split .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 991px) {
	.cost-rest { grid-template-columns: 1fr; }
	.cost-rest li { border-right: 0; border-bottom: 1px solid var(--line); }
	.cost-rest li:last-child { border-bottom: 0; }
	.cost-extra { grid-template-columns: 1fr; }}

/* ── Подсветка рамки за курсором ──────────────────────────────────────
 *
 * Порт Aceternity Glowing Effect (он же — приём с сайта Cursor): угол
 * conic-gradient считается от центра карточки к указателю.
 *
 * Кольцо рисуем маской, а не вложенной обёрткой: у карточки непрозрачный
 * фон, и псевдоэлемент с z-index:-1 лёг бы поверх него — `isolation`
 * создаёт контекст наложения, внутри которого отрицательный z-index
 * уходит выше фона элемента, но ниже содержимого. Маска обходится без
 * лишнего div и без правок разметки.
 */
.cost-card::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from calc(var(--glow-angle, 0deg) - 30deg) at 50% 50%,
		transparent 0deg, var(--coral) 12deg, var(--ink) 26deg, transparent 60deg, transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--dur-enter) var(--ease-out);
	pointer-events: none;
}
.cost-card.is-lit::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.cost-card::after { transition: none; }}
/* ══ 6. Этапы: кто что делает ══════════════════════════════════════════
 *
 * Обе колонки были одинаковыми светлыми рамками с пунктиром — сначала у
 * «ЮрЭкс берёт на себя» была коралловая рамка, потом их уравняли, и блок
 * перестал читаться как сравнение. Между тем весь его смысл в перекосе:
 * пять пунктов юридической работы против трёх действий клиента.
 *
 * Теперь перекос виден: «на себя» — тёмная плита, «от клиента» — лист
 * рядом, в подписи — счётчик пунктов.
 */
.compare-col {
	padding: 26px 26px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
}
.compare-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.compare-count {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--ink-faint);
}
.compare-col h3 { font-size: 19px; font-weight: 800; margin: 14px 0 16px; }
.compare-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.compare-col li {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 12px;
	align-items: baseline;
	padding: 11px 0;
	font-size: 14.5px;
	line-height: 1.5;
	border-top: 1px solid var(--line-faint);
}
.compare-col li:first-child { border-top: 0; }
.compare-num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--coral);
}

/* «На себя» — тёмная плита: объём работы виден до чтения списка. */
.compare-col.is-us {
	background: var(--ink);
	border-color: transparent;
	color: var(--paper);
}
.compare-col.is-us h3 { color: var(--paper); }
.compare-col.is-us .label { color: var(--paper); }
.compare-col.is-us .compare-head { border-bottom-color: color-mix(in oklch, var(--paper) 28%, transparent); }
.compare-col.is-us .compare-count { color: color-mix(in oklch, var(--paper) 62%, transparent); }
.compare-col.is-us li { border-top-color: color-mix(in oklch, var(--paper) 16%, transparent); }
.compare-col.is-us .compare-num { color: var(--coral-soft); }

.compare-col.is-you .label { color: var(--ink-faint); }
.compare-col.is-you .compare-num { color: var(--ink-faint); }

/* ══ Ставрополь: признаки долговой нагрузки ════════════════════════════
 *
 * Был плоский список в две колонки с тире и точечными разделителями —
 * единственный блок страницы, до которого не дошло оформление. Делаем
 * карточками того же веса, что и «Ситуации» на главной: длинные фразы
 * туда ложатся, а короткий номер держит ритм.
 */
.region-signs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}
.region-signs li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink-soft);
}
.region-signs b {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--coral);
	padding-top: 2px;
}
@media (max-width: 1080px) { .region-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 700px) {
	.region-signs { grid-template-columns: 1fr; }
	.compare-col { padding: 22px 20px 18px; }}
/* ══ Капча на формах ═══════════════════════════════════════════════════
 *
 * Виджет Яндекса рисует себя сам, от нас нужен только отступ и чтобы он не
 * распирал узкие формы: в боковой форме консультации места меньше, чем
 * стандартные 302 px виджета.
 */
.smart-captcha {
	margin: 4px 0 2px;
	max-width: 100%;
	overflow: hidden;
}

/* ══ 1.6.0 · Правки по документу заказчика от 29.09.2026 ══════════════ */

/* ── Шапка: две строки (возвращено в 1.8.2) ────────────────────────────
 * Верхняя тонкая строка — регион, мессенджеры и график работы, под ней
 * логотип, меню, телефон и кнопка. При прокрутке (.is-compact) верхняя
 * строка прячется, остаётся одна. Так шапка стояла на сайте до 1.8.0;
 * в 1.8.0 по ошибке приехал файл с однострочной шапкой из 1.6.0.
 * Отступ первого экрана считается от реальной высоты шапки (--nav-h). */
@media (min-width: 1081px) {
	.nav-inner {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
	}
	.nav-extra {
		display: flex;
		align-items: center;
		grid-column: 1 / -1;
		grid-row: 1;
		justify-content: space-between;
		gap: 16px;
		padding: 2px 4px 8px;
		border-bottom: 1px solid var(--line-soft);
		font-size: 12px;
	}
	.nav .brand,
	.nav-collapse nav,
	.nav-side { grid-row: 2; }
	.nav-side { grid-column: 3; }
	.nav-schedule {
		display: inline;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
		color: var(--ink-mute);
	}
	.nav-region summary { font-size: 13px; text-transform: none; letter-spacing: 0; }
	.nav-region ul {
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 5;
		min-width: 180px;
		box-shadow: var(--shadow);
	}
	.nav-region li + li { margin-top: 6px; }
	.nav-messengers { gap: 8px; }
	.nav-msg { width: 32px; height: 32px; border: 1px solid var(--line); }
	.nav-msg svg { width: 16px; height: 16px; }
	.nav-links { gap: 24px; }

	.nav.is-compact .nav-extra { display: none; }
	.nav.is-compact .brand,
	.nav.is-compact .nav-collapse nav,
	.nav.is-compact .nav-side { grid-row: 1; }

	/* Высота развёрнутой двухстрочной шапки для отступа первого экрана.
	 * Если на сайте стоит main.js с замером, он уточнит её сам; без него
	 * отступ брался по однострочной шапке, и заголовок уходил под неё. */
	:root { --nav-h: 115px; }
}
@media (min-width: 1281px) {
	:root { --nav-h: 125px; }
}
/* С пунктом «Блог» в меню семь пунктов: на средних экранах ужимаем отступы,
 * телефон прячем до 1400 px (он есть в первом экране и в подвале). */
@media (min-width: 1081px) and (max-width: 1400px) {
	.nav-links { gap: 14px; }
	.nav-links a { font-size: 14px; }
	.nav-phone { display: none; }
}
@media (min-width: 1081px) and (max-width: 1200px) {
	.nav-links { gap: 12px; }
	.nav-links a { font-size: 13.5px; }
}
.nav-msg.is-youtube:hover,
.nav-msg.is-youtube:focus-visible { color: #e30613; border-color: #e30613; }
.nav-msg.is-whatsapp:hover,
.nav-msg.is-whatsapp:focus-visible { color: #25d366; border-color: #25d366; }
.nav-msg.is-telegram:hover,
.nav-msg.is-telegram:focus-visible { color: #2aabee; border-color: #2aabee; }
.nav-msg.is-max:hover,
.nav-msg.is-max:focus-visible { color: #7b61ff; border-color: #7b61ff; }

/* Текстовые кнопки мессенджеров: иконка + подпись, один вид везде. */
.messengers.is-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-btn { gap: 8px; }
.msg-btn svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.foot-messengers { margin-top: 18px; }
.contacts-messengers { display: contents; }

/* ── Первый экран: цифры полосой внизу, компактный режим по высоте ────
 * Раньше пять цифр стояли столбиком и вместе с абзацем и кнопками
 * первый экран занимал 1060–1090 px — кнопок не видно было ни на одном
 * реальном экране, даже на мониторе 1080p с браузерной рамкой. Цифры
 * уходят в полосу по низу экрана, а на невысоких окнах ужимаются
 * отступы и кегль. Компактный режим завязан на высоту окна, а не на
 * ширину: на высоком мониторе он не срабатывает вовсе. */
@media (min-width: 701px) {
	.hero-copy,
	.hero-copy-main { display: contents; }
	.hero-stage {
		grid-template-rows: 1fr auto auto;
		grid-template-areas:
			"text    portrait"
			"actions portrait"
			"proof   proof";
		gap: 0 32px;
	}
	.hero-copy-text {
		grid-area: text;
		max-width: 38rem;
		align-self: start;
		padding-top: 4px;
	}
	.hero-actions {
		grid-area: actions;
		max-width: 38rem;
		align-self: end;
		padding-bottom: 34px;
	}
	.hero-portrait {
		grid-area: portrait;
		z-index: 1;
	}
	.hero-portrait img { max-height: calc(100svh - 190px); }
	.hero-proof {
		grid-area: proof;
		position: relative;
		z-index: 3;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		gap: 10px 24px;
		width: auto;
		max-width: none;
		margin: 0 calc(-1 * max(48px, 4vw));
		padding: 18px max(48px, 4vw) 20px;
		border-top: 1px solid var(--line);
		border-bottom: none;
		background: color-mix(in oklch, var(--paper) 72%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	.hero-proof-item {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
		padding: 0;
		border-bottom: none;
	}
	.hero-proof-item:last-child { padding-bottom: 0; }
	.hero-proof-item b { font-size: clamp(24px, 2.2vw, 32px); }
	.hero-proof-item small { margin-top: 0; }
}
@media (min-width: 701px) and (max-height: 900px) {
	.hero h1 { font-size: clamp(36px, 4.3vw, 54px); margin-bottom: 8px; }
	.hero-copy .lead { font-size: 15px; max-width: 44ch; }
	.hero-proof { padding-top: 12px; padding-bottom: 14px; }
	.hero-proof-item b { font-size: clamp(22px, 2vw, 28px); }
	.hero-proof-item small { font-size: 10px; }
	.hero-actions { padding-bottom: 28px; }
	.hero-portrait img { max-height: calc(100svh - 170px); }
}
@media (min-width: 701px) and (max-height: 760px) {
	.hero h1 { font-size: clamp(32px, 3.9vw, 46px); }
	.hero-copy .lead { font-size: 14px; }
	.hero-actions { padding-bottom: 22px; }
	.hero-actions .btn { min-height: 48px; }
}
@media (min-width: 701px) and (max-height: 640px) {
	.hero h1 { font-size: clamp(30px, 3.5vw, 40px); }
	.hero-copy .lead { font-size: 13.5px; }
	.hero-proof-item b { font-size: clamp(20px, 1.8vw, 24px); }
}

/* ── Попап «Получить консультацию» ──────────────────────────────────── */
.od-dialog-form {
	width: min(600px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	padding: 32px 32px 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 30px 80px -30px color-mix(in oklch, var(--ink) 60%, transparent);
}
.od-dialog-form h2 {
	margin: 10px 0 8px;
	font-family: var(--sans);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.od-dialog-lead {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-soft);
}
.od-dialog-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-mute);
	cursor: pointer;
}
.od-dialog-close svg { width: 20px; height: 20px; }
.od-dialog-close:hover,
.od-dialog-close:focus-visible { background: color-mix(in oklch, var(--ink) 6%, transparent); color: var(--ink); }
.od-dialog-form .consult-form { background: transparent; padding: 0; box-shadow: none; }
@media (max-width: 560px) {
	.od-dialog-form { padding: 24px 18px 20px; }
	.od-dialog-form .form-row { grid-template-columns: 1fr; }}

/* ── Блок консультации на телефоне: форма первой ─────────────────────
 * По записи Метрики: человек нажимал «Получить консультацию», попадал на
 * экран текста и решал, что промахнулся. Теперь кнопки открывают попап,
 * а в самой секции на узких экранах форма идёт первой. */
@media (max-width: 991px) {
	.consult-form-wrap { order: -1; }}

/* ── Отзывы: площадки по городам ─────────────────────────────────────── */
.rev-platforms {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px dotted var(--line);
}
.rev-platforms-title {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.rev-platforms-row {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	font-size: 14px;
}
.rev-platforms-row b { font-family: var(--sans); font-weight: 800; color: var(--ink); min-width: 96px; }
.rev-platforms-row a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.rev-platforms-row a:hover,
.rev-platforms-row a:focus-visible { color: var(--coral); border-bottom-color: var(--coral); }

/* ── Услуги: альтернативы банкротству отдельной группой ──────────────── */
.svc-alt { margin-top: 56px; max-width: 64ch; }
.svc-alt-title {
	margin: 0 0 8px;
	font-family: var(--sans);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.svc-alt-lead { margin: 0; font-size: 15px; color: var(--ink-soft); }
.svc-grid-alt { margin-top: 20px; }
.svc.svc-is-alt { border-top: 3px solid var(--coral); }
@media (max-width: 767px) {
	.svc-alt { margin-top: 40px; }}

/* ── Юристы: карточка в рамке с подсветкой за курсором ───────────────
 * Карточки были «голыми» — фото и текст на фоне страницы — и терялись.
 * Теперь у каждой рамка и то же кольцо-подсветка, что у тарифов
 * (общий скрипт initCardGlow). */
.lab {
	position: relative;
	isolation: isolate;
	padding: 12px 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-block);
	background: color-mix(in oklch, var(--paper) 94%, var(--bone));
	transition: transform var(--dur-enter) var(--ease-out), box-shadow var(--dur-enter) var(--ease-out);
}
.lab:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lab-img { box-shadow: none; margin-bottom: 14px; }
.lab::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from calc(var(--glow-angle, 0deg) - 30deg) at 50% 50%,
		transparent 0deg, var(--coral) 12deg, var(--ink) 26deg, transparent 60deg, transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--dur-enter) var(--ease-out);
	pointer-events: none;
}
.lab.is-lit::after { opacity: 1; }
.lab-more { margin-top: auto; padding-top: 12px; }
@media (prefers-reduced-motion: reduce) {
	.lab, .lab::after { transition: none; }
	.lab:hover { transform: none; }}

/* Постоянная рамка-градиент: фото на странице юриста. */
.lab-frame {
	position: relative;
	border-radius: var(--r-block);
	overflow: hidden;
}
.lab-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(145deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 20%, transparent) 50%, var(--coral) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

/* ── Страница юриста ────────────────────────────────────────────────── */
.lawyer-page { padding: 140px 0 64px; }
.lawyer-back { margin: 0 0 24px; font-size: 13px; }
.lawyer-back a { color: var(--ink-mute); text-decoration: none; }
.lawyer-back a:hover { color: var(--coral); }
.lawyer-hero {
	display: grid;
	grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.lawyer-photo { aspect-ratio: 3 / 4; background: var(--bone); }
.lawyer-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lawyer-intro h1 { margin: 10px 0 6px; font-size: clamp(30px, 4vw, 52px); }
.lawyer-role { margin: 0 0 20px; font-size: 16px; color: var(--ink-soft); }
.lawyer-facts {
	display: flex;
	gap: 28px;
	margin: 0 0 20px;
	padding: 14px 0;
	border-top: 1px dotted var(--line);
	border-bottom: 1px dotted var(--line);
}
.lawyer-facts dt {
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.lawyer-facts dd { margin: 2px 0 0; font-family: var(--sans); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.lawyer-focus { margin: 0 0 16px; font-size: 16px; line-height: 1.55; }
.lawyer-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.lawyer-tags li {
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
}
.lawyer-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lawyer-body { margin-top: 48px; max-width: 72ch; }
@media (max-width: 767px) {
	.lawyer-page { padding-top: 110px; }
	.lawyer-hero { grid-template-columns: 1fr; gap: 24px; }
	.lawyer-photo { max-width: 240px; }
	.lawyer-facts { gap: 20px; }}

/* ── Офис в Ставрополе: фотографии ───────────────────────────────────── */
.region-office-photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 28px;
}
.region-office-photos figure { margin: 0; }
.region-office-photos img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-block);
	border: 1px solid var(--line);
}
.region-office-photos figcaption {
	margin-top: 6px;
	font-size: 12px;
	color: var(--ink-mute);
}
@media (max-width: 640px) {
	.region-office-photos { grid-template-columns: 1fr 1fr; }
	.region-office-photos figure:first-child { grid-column: 1 / -1; }}

/* ── Карта сайта ───────────────────────────────────────────────────────── */
.sitemap-page { padding-bottom: 64px; }
.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px 40px;
}
.sitemap-col h2 {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--coral);
}
.sitemap-col ul { margin: 0; padding: 0; list-style: none; }
.sitemap-col li { padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.sitemap-col a { color: var(--ink); text-decoration: none; }
.sitemap-col a:hover { color: var(--coral); }

/* ── Контакты: реквизиты читаемым блоком ─────────────────────────────── */
.contact-list .requisites b { font-weight: 500; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Окна до 1000 px высотой (монитор 1080p с браузерной рамкой): на пяти
 * пикселях полоса цифр уходила за край — снимаем воздух у кнопок и полосы. */
@media (min-width: 701px) and (max-height: 1000px) {
	.hero-actions { padding-bottom: 24px; }
	.hero-proof { padding-top: 12px; padding-bottom: 14px; }
	.hero-copy-text { padding-top: 0; }
}

/* ── Попап: появление из логотипа ─────────────────────────────────────
 * Окно не проявляется из тумана, а раскрывается: в центре возникает
 * логотип, от него окно расходится в стороны, логотип уезжает в угол,
 * заголовок и поля проявляются лесенкой. Всё на CSS-переходах со
 * @starting-style; там, где его нет, окно просто появляется. */
.od-dialog-form {
	padding-top: 72px;
	clip-path: inset(0 0 0 0 round var(--r-block));
	transition:
		clip-path 560ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 200ms var(--ease-out),
		translate 560ms cubic-bezier(0.22, 1, 0.36, 1),
		scale 560ms cubic-bezier(0.22, 1, 0.36, 1),
		overlay 560ms allow-discrete,
		display 560ms allow-discrete;
}
.od-dialog-form::backdrop {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
@starting-style {
	.od-dialog-form[open] {
		clip-path: inset(0 41% 0 41% round 28px);
		opacity: 1;
		translate: 0 6px;
		scale: 0.98;
	}}
.od-dialog-brand {
	position: absolute;
	left: 32px;
	top: 26px;
	width: 96px;
	z-index: 2;
	pointer-events: none;
	translate: 0 0;
	scale: 1;
	transition:
		left 560ms cubic-bezier(0.22, 1, 0.36, 1),
		top 560ms cubic-bezier(0.22, 1, 0.36, 1),
		translate 560ms cubic-bezier(0.22, 1, 0.36, 1),
		scale 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.od-dialog-brand img { display: block; width: 100%; height: auto; }
@starting-style {
	.od-dialog-form[open] .od-dialog-brand {
		left: 50%;
		top: 50%;
		translate: -50% -50%;
		scale: 1.8;
	}}
.od-dialog-form > .label,
.od-dialog-form > h2,
.od-dialog-form > .od-dialog-lead,
.od-dialog-form > form {
	transition: opacity 420ms var(--ease-out), translate 420ms var(--ease-out);
}
.od-dialog-form[open] > .label { transition-delay: 220ms; }
.od-dialog-form[open] > h2 { transition-delay: 280ms; }
.od-dialog-form[open] > .od-dialog-lead { transition-delay: 340ms; }
.od-dialog-form[open] > form { transition-delay: 400ms; }
@starting-style {
	.od-dialog-form[open] > .label,
	.od-dialog-form[open] > h2,
	.od-dialog-form[open] > .od-dialog-lead,
	.od-dialog-form[open] > form {
		opacity: 0;
		translate: 0 12px;
	}}
@media (max-width: 560px) {
	.od-dialog-form { padding-top: 64px; }
	.od-dialog-brand { left: 18px; top: 22px; width: 84px; }}
@media (prefers-reduced-motion: reduce) {
	.od-dialog-form,
	.od-dialog-brand,
	.od-dialog-form > * { transition: none !important; }}

/* ── Тарифы и расходы: без галочек и восклицательных знаков ─────────────
 * Состав тарифа — нумерованный список в стиле счётчиков секций; расходы —
 * строки сметы с отточием и суммой справа. Галочки и «!» заказчик назвал
 * шаблонными — и был прав. */
.cost-includes {
	list-style: none;
	margin: 6px 0 4px;
	padding: 0;
	flex: 1;
	counter-reset: inc;
	display: grid;
	gap: 9px;
}
.cost-includes li {
	position: relative;
	padding: 0 0 9px 34px;
	font-size: 13.5px;
	line-height: 1.45;
	border-bottom: 1px dotted var(--line-soft);
}
.cost-includes li:last-child { border-bottom: none; }
.cost-includes li::before {
	counter-increment: inc;
	content: counter(inc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.25em;
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--coral);
}
.cost-ledger { margin: 16px 0 0; display: grid; gap: 0; }
.cost-ledger > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line-soft);
}
.cost-ledger > div:first-child { border-top: 1px solid var(--line); }
.cost-ledger dt {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 20px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--ink-soft);
}
.cost-ledger dd {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
	white-space: nowrap;
}
/* Прочие списки с маркерами (закон, ситуации): вместо символов — точка-квадрат. */
.mark-ok, .mark-warn {
	font-size: 0;
	line-height: 0;
	position: relative;
	display: block;
	min-height: 16px;
}
.mark-ok::before, .mark-warn::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: var(--coral);
}
.mark-warn::before { background: var(--ink); }

/* Альтернативы — три карточки на всю ширину секции. */
.svc-grid-alt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-grid-alt .svc { grid-column: auto !important; }
@media (max-width: 991px) {
	.svc-grid-alt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svc-grid-alt .svc:first-child { grid-column: 1 / -1 !important; }}
@media (max-width: 640px) {
	.svc-grid-alt { grid-template-columns: 1fr; }}

/* ── Отступ первого экрана от фактической высоты шапки ─────────────────
 * Шапка плавающая и меняет высоту (верхняя строка, компактный режим,
 * перенос меню), а отступ был вписан числом по ярусам высоты окна — на
 * невысоких окнах заголовок уходил под шапку. Теперь main.js кладёт
 * высоту шапки в --nav-h, а отступ считается от неё. */
.hero-stage { padding-top: calc(var(--nav-h, 64px) + 34px); }
@media (min-width: 701px) and (max-height: 900px) {
	.hero-stage { padding-top: calc(var(--nav-h, 64px) + 22px); }}
@media (min-width: 701px) and (max-height: 700px) {
	.hero-stage { padding-top: calc(var(--nav-h, 64px) + 14px); }}
@media (max-width: 700px) {
	.hero-stage { padding-top: calc(var(--nav-h, 60px) + 28px); }}