/* ==========================================================================
   «Спасибо, Доктор!» — дизайн-система и стили темы
   Концепция «Спасательный круг»: красно-белые сегменты из логотипа — сквозной
   мотив (маркеры разделов, метки на карте тела, знак), тёмно-синий из надписи
   логотипа — цвет текста и «тяжёлых» секций, серо-стальной старого сайта — фоны.
   Все размеры — от шкалы токенов ниже; отдельных «магических» значений нет.
   ========================================================================== */

/* ---------- Шрифт (локально: без запросов к Google, 152-ФЗ) ---------- */
@font-face {
	font-family: "Onest";
	src: url("../fonts/onest-cyrillic.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Onest";
	src: url("../fonts/onest-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Onest";
	src: url("../fonts/onest-latin-ext.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Метрики запасного шрифта подогнаны под Onest — текст не «прыгает» при загрузке. */
@font-face {
	font-family: "Onest Fallback";
	src: local("Arial");
	size-adjust: 103%;
	ascent-override: 98%;
	descent-override: 26%;
	line-gap-override: 0%;
}

/* ---------- Токены ---------- */
:root {
	/* Цвет */
	--red: #d7262d;          /* красный спасательного круга */
	--red-ink: #b51a21;      /* красный для текста и hover (AA на белом) */
	--red-50: #fdeeee;
	--navy: #1f2160;         /* синий надписи логотипа */
	--navy-900: #15173f;
	--navy-50: #eceefa;
	--ink: #23264a;          /* основной текст */
	--muted: #5f6480;        /* второстепенный текст (AA на белом и paper) */
	--steel: #a3a9b1;        /* серо-стальной старого сайта */
	--line: #dfe2e8;
	--line-strong: #c7ccd6;
	--paper: #f4f5f7;
	--mist: #e7eaf0;
	--sand: #f6f1ea;         /* верёвка круга — тёплый фон отзывов */
	--white: #fff;
	--ok: #1f8a4c;

	/* Шкала отступов, шаг 4px */
	--sp-1: .25rem;  /* 4 */
	--sp-2: .5rem;   /* 8 */
	--sp-3: .75rem;  /* 12 */
	--sp-4: 1rem;    /* 16 */
	--sp-5: 1.5rem;  /* 24 */
	--sp-6: 2rem;    /* 32 */
	--sp-7: 2.5rem;  /* 40 */
	--sp-8: 3rem;    /* 48 */
	--sp-9: 4rem;    /* 64 */
	--sp-10: 6rem;   /* 96 */

	/* Ритм страницы */
	--section: clamp(4rem, 2.75rem + 4.5vw, 7rem);
	--head-gap: clamp(2rem, 1.5rem + 1.6vw, 3rem);
	--gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem);
	--wrap: 76rem; /* 1216px контента */

	/* Типографика */
	--font: "Onest", "Onest Fallback", system-ui, sans-serif;
	--fs-xs: .8125rem;   /* 13 */
	--fs-s: .9375rem;    /* 15 */
	--fs-m: 1.0625rem;   /* 17 — базовый: аудитория клиники в среднем старше 40 */
	--fs-l: 1.25rem;     /* 20 */
	--fs-xl: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
	--fs-2xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.625rem);
	--fs-3xl: clamp(2.375rem, 1.55rem + 3.3vw, 4.25rem);
	--lh: 1.6;
	--lh-tight: 1.15;

	/* Формы */
	--r-s: .5rem;
	--r-m: .875rem;
	--r-l: 1.5rem;
	--r-pill: 999px;
	--control: 3.25rem;     /* 52 — высота полей и кнопок */
	--control-s: 2.5rem;    /* 40 */
	--control-l: 3.5rem;    /* 56 */
	--header-h: 4.5rem;     /* 72 */
	--topbar-h: 2.5rem;     /* 40 */
	--actionbar-h: 4rem;

	/* Тени и движение */
	--shadow-1: 0 1px 2px rgb(21 23 63 / .06), 0 2px 8px rgb(21 23 63 / .05);
	--shadow-2: 0 10px 30px -10px rgb(21 23 63 / .22), 0 2px 6px rgb(21 23 63 / .06);
	--shadow-3: 0 30px 80px -20px rgb(21 23 63 / .35);
	--ease: cubic-bezier(.22, .7, .2, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
	--t-fast: .18s;
	--t: .32s;
	--t-slow: .7s;
}

/* Версия для слабовидящих: крупнее и контрастнее, без смены раскладки */
html.is-a11y {
	font-size: 125%;
	--muted: #2f3350;
	--line: #9aa1b2;
	--line-strong: #6b7284;
	--paper: #fff;
	--sand: #fff;
	--mist: #d9dde6;
	--red: #b51a21;
}
html.is-a11y .prose a, html.is-a11y .links a, html.is-a11y .footer a, html.is-a11y .doc__name a { text-decoration: underline; }
/* Крупный шрифт не помещает меню в строку — раньше переключаемся на «бургер» */
@media (max-width: 104.99rem) {
	html.is-a11y .nav, html.is-a11y .header__phone { display: none !important; }
	html.is-a11y .burger { display: inline-grid; }
}
@media (max-width: 79.99rem) { html.is-a11y .topbar__msg { display: none; } }
html.is-a11y img { filter: grayscale(.4) contrast(1.05); }

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scrollbar-gutter: stable;            /* блокировка прокрутки окнами не сдвигает страницу */
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}
body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-m);
	line-height: var(--lh);
	color: var(--ink);
	background: var(--white);
	font-feature-settings: "tnum" 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--navy); line-height: var(--lh-tight); letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: var(--r-s); }
::selection { background: var(--red); color: #fff; }
small { font-size: var(--fs-xs); color: var(--muted); }
[hidden] { display: none !important; }

/* Колонки сеток не распираются длинным содержимым (select, длинные слова) */
.hero__grid, .reasons__grid, .about__grid, .contacts__grid, .footer__grid { grid-template-columns: minmax(0, 1fr); }
.container { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 100; padding: var(--sp-3) var(--sp-4); background: var(--navy); color: #fff; border-radius: var(--r-s); transition: top var(--t-fast); }
.skip-link:focus { top: var(--sp-4); }
.site-main { display: block; }

/* ---------- Иконки, знак ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; }
.mark { width: 100%; height: auto; }

/* Маркер раздела — кольцо из сегментов */
.eyebrow {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--red-ink);
}
.eyebrow__ring {
	width: .875rem; height: .875rem; border-radius: 50%;
	background: repeating-conic-gradient(from -22.5deg, var(--red) 0 45deg, var(--white) 0 90deg);
	-webkit-mask: radial-gradient(circle, transparent 36%, #000 38%);
	        mask: radial-gradient(circle, transparent 36%, #000 38%);
	box-shadow: inset 0 0 0 1px rgb(31 33 96 / .18);
}
.section--navy .eyebrow { color: #ff9ea2; }
.section--navy .eyebrow__ring { box-shadow: none; }

/* ---------- Кнопки, ссылки, теги ---------- */
.btn {
	--h: var(--control);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: var(--h); padding: 0 calc(var(--h) * .5);
	border: 1.5px solid transparent; border-radius: var(--r-pill);
	font-size: var(--fs-s); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap;
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn--sm { --h: var(--control-s); }
.btn--lg { --h: var(--control-l); font-size: var(--fs-m); }
.btn--block { width: 100%; }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 8px 20px -8px rgb(215 38 45 / .6); }
.btn--primary:hover { background: var(--red-ink); }
.btn--outline { border-color: var(--line-strong); color: var(--navy); background: var(--white); }
.btn--outline:hover { border-color: var(--navy); }
.btn--ghost { color: var(--navy); background: var(--paper); }
.btn--ghost:hover { background: var(--mist); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--navy-50); }

.more {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	padding: 0; border: 0; background: none;
	font-size: var(--fs-s); font-weight: 600; color: var(--red-ink); text-decoration: none; white-space: nowrap;
}
.more .icon { transition: transform var(--t) var(--ease); }
.more:hover .icon { transform: translateX(4px); }

.icon-btn {
	display: inline-grid; place-items: center;
	width: var(--control-s); height: var(--control-s); padding: 0;
	border: 0; border-radius: 50%; background: var(--paper); color: var(--navy);
	transition: background-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.icon-btn:hover { background: var(--mist); }
.icon-btn--line { width: var(--control); height: var(--control); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.icon-btn--line:hover { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1.5px var(--navy); }
.icon-btn:disabled { opacity: .35; pointer-events: none; }

.chips, .tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip, .tag {
	display: inline-flex; align-items: center; gap: var(--sp-1);
	min-height: var(--control-s); padding: 0 var(--sp-4);
	border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
	font-size: var(--fs-s); font-weight: 500; color: var(--navy); text-decoration: none; line-height: 1.2;
	transition: box-shadow var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.chip:hover, .tag:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.tag { min-height: 2.25rem; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.tag--ext::after { content: "↗"; font-size: .9em; color: var(--muted); }

.status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--steel); flex: none; }
[data-open-status].is-open .status-dot { background: var(--ok); box-shadow: 0 0 0 3px rgb(31 138 76 / .18); }

/* ---------- Верхняя строка ---------- */
.topbar { height: var(--topbar-h); background: var(--paper); font-size: var(--fs-xs); color: var(--muted); }
.topbar__inner { display: flex; align-items: center; gap: var(--sp-6); height: 100%; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); height: 100%; padding: 0; border: 0; background: none; font-size: inherit; color: inherit; text-decoration: none; white-space: nowrap; }
.topbar__item .icon { width: 1rem; height: 1rem; color: var(--steel); }
a.topbar__item:hover, .topbar__a11y:hover, .topbar__msg a:hover { color: var(--navy); }
.topbar__spacer { flex: 1; }
.topbar__msg a { color: inherit; text-decoration: none; font-weight: 500; }
.topbar__a11y[aria-pressed="true"] { color: var(--red-ink); font-weight: 600; }

/* ---------- Шапка ---------- */
.header {
	position: sticky; top: 0; z-index: 40;
	height: var(--header-h);
	background: rgb(255 255 255 / .96);
	box-shadow: 0 1px 0 var(--line);
	transition: box-shadow var(--t);
}
@supports (backdrop-filter: blur(1px)) { .header { background: rgb(255 255 255 / .86); backdrop-filter: saturate(1.4) blur(14px); } }
.header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgb(21 23 63 / .25); }
.header__inner { display: flex; align-items: center; gap: var(--sp-6); height: 100%; }
.header__actions { display: flex; flex: none; align-items: center; gap: var(--sp-4); margin-left: auto; }
.header__phone { display: none; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; }
.header__phone .icon { color: var(--red); }

.logo { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; color: var(--navy); text-decoration: none; }
.logo__mark { width: 2.75rem; height: 2.75rem; filter: drop-shadow(0 2px 4px rgb(21 23 63 / .15)); }
.logo__text { display: grid; line-height: 1.1; }
.logo__name { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.logo__sub { font-size: var(--fs-xs); color: var(--muted); }
.logo--invert { color: #fff; }
.logo--invert .logo__sub { color: rgb(255 255 255 / .6); }
.logo--invert .mark { --mark-line: #fff; }

/* Главное меню */
.nav { display: none; height: 100%; }
.nav__list { display: flex; align-items: stretch; height: 100%; }
.nav__item { position: relative; display: flex; }
.nav__link {
	display: inline-flex; align-items: center; gap: 2px;
	padding: 0 var(--sp-3);
	font-size: var(--fs-s); font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap;
	position: relative;
}
.nav__link::after {
	content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 0; height: 2px;
	background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease);
}
.nav__item:hover > .nav__link::after, .nav__item:focus-within > .nav__link::after, .nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav__chev { width: 1rem; height: 1rem; color: var(--steel); transition: transform var(--t) var(--ease); }
.nav__item:hover .nav__chev, .nav__item:focus-within .nav__chev { transform: rotate(180deg); }

.drop {
	position: absolute; top: 100%; left: 0; z-index: 5;
	min-width: 16rem; padding: var(--sp-3);
	background: #fff; border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: var(--shadow-2);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.nav__item:hover > .drop, .nav__item:focus-within > .drop {
	opacity: 1; visibility: visible; transform: none;
	transition-delay: .06s, .06s, 0s;
}
.drop__link, .drop__sub a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); font-size: var(--fs-s); color: var(--ink); text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast); }
.drop__link:hover, .drop__sub a:hover { background: var(--paper); color: var(--navy); }
.drop--mega { min-width: 40rem; padding: var(--sp-5); }
.drop--mega .drop__list { columns: 3; column-gap: var(--sp-4); }
.drop--mega .drop__item { break-inside: avoid; }
.drop--mega .drop__item--group { padding-block: var(--sp-1); }
.drop__item--group > .drop__link { font-weight: 600; color: var(--navy); }
.drop__sub a { padding-left: var(--sp-5); font-size: var(--fs-xs); color: var(--muted); }
.nav__item:nth-last-child(-n+3) > .drop { left: auto; right: 0; }

.burger { display: inline-grid; place-items: center; width: var(--control-s); height: var(--control-s); padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--navy); }

@media (min-width: 75rem) { /* 1200 */
	.nav { display: block; }
	.burger { display: none; }
}
@media (min-width: 80rem) { .header__phone { display: inline-flex; } } /* 1280: верхний ряд меню — 6 пунктов, телефон помещается */
@media (max-width: 47.99rem) {
	:root { --header-h: 3.75rem; }
	.topbar { display: none; }
	.header__cta { display: none; }
	.logo__mark { width: 2.25rem; height: 2.25rem; }
	.logo__name { font-size: 1rem; }
}
@media (max-width: 63.99rem) { .topbar__msg { display: none; } }

/* ---------- Мобильное меню (выезжающая панель) ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet__backdrop { position: absolute; inset: 0; background: rgb(21 23 63 / .45); opacity: 0; transition: opacity var(--t) var(--ease); }
.sheet__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	display: flex; flex-direction: column;
	width: min(26rem, 100%); background: #fff; box-shadow: var(--shadow-3);
	transform: translateX(100%); transition: transform var(--t) var(--ease);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); flex: none; }
.sheet__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--gutter); }
.sheet__foot { display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); flex: none; }
.sheet__phone { font-size: var(--fs-l); font-weight: 700; color: var(--navy); text-decoration: none; }
.sheet__meta { font-size: var(--fs-xs); color: var(--muted); }
.logo--compact .logo__sub { display: none; }

.mnav__item { border-bottom: 1px solid var(--line); }
.mnav__link, .mnav__toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	min-height: var(--control-l); padding: 0; border: 0; background: none;
	font-size: var(--fs-l); font-weight: 600; color: var(--navy); text-decoration: none; text-align: left;
}
.mnav__toggle .icon { color: var(--steel); transition: transform var(--t) var(--ease); }
.mnav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mnav__sub { padding-bottom: var(--sp-4); }
.mnav__sub a { display: block; padding: var(--sp-2) 0; color: var(--ink); text-decoration: none; }
.mnav__sub li:first-child a { color: var(--red-ink); font-weight: 600; }
.mnav__deep a { padding-left: var(--sp-4); font-size: var(--fs-s); color: var(--muted); }

/* Плавное раскрытие (аккордеон, меню): анимируется высота через grid-строку, без JS-замеров */
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease), visibility 0s linear var(--t); visibility: hidden; }
.collapse.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.collapse__inner { min-height: 0; overflow: hidden; }

/* ---------- Разделы ---------- */
.section { padding-block: var(--section); }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--navy { background: var(--navy); color: rgb(255 255 255 / .78); }
.section--navy h2, .section--navy h3 { color: #fff; }
.section__head { margin-bottom: var(--head-gap); max-width: 50rem; }
.section__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); max-width: none; }
.section__head--split > div:first-child { max-width: 50rem; }
.section__title { font-size: var(--fs-2xl); }
.section__lead { margin-top: var(--sp-4); font-size: var(--fs-l); color: var(--muted); }
@media (max-width: 47.99rem) {
	.section__head--split { flex-direction: column; align-items: flex-start; }
}

/* ---------- Первый экран ----------
   Не «текст слева, фото справа»: спасательный круг в центре разрезает заголовок,
   внутри круга — ведущий врач. Одно утверждение, одна кнопка. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero {
	--ring: clamp(15rem, 7rem + 19vw, 27rem);
	display: flex; align-items: center;
	min-height: min(calc(100svh - var(--topbar-h) - var(--header-h)), 56rem);
	padding-block: var(--sp-9);
	overflow: hidden;
}
.hero__inner { display: grid; justify-items: center; gap: var(--sp-6); text-align: center; container-type: inline-size; }
.hero__kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-3); font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.hero__kicker span + span::before { content: "·"; margin-right: var(--sp-3); }
.hero__title {
	display: grid; grid-template-columns: minmax(0, 1fr) var(--ring) minmax(0, 1fr); align-items: center; gap: var(--gap);
	width: 100%;
	--gap: clamp(1.5rem, .5rem + 2.5vw, 3.5rem);
	font-size: clamp(2.5rem, .6rem + 4.3vw, 5.25rem);
	font-size: min(5.25rem, calc((100cqi - var(--ring) - var(--gap) * 2) / 2 / (var(--fit, 9) * .6)));
	line-height: .98; letter-spacing: -.045em; font-weight: 800;
}
/* Варианты тезиса лежат стопкой: высота = самый длинный вариант, ничего не прыгает */
.hero__stack { display: grid; }
.hero__v {
	grid-area: 1 / 1; align-self: center;
	opacity: 0; transform: translateX(var(--dx, 0)); filter: blur(4px);
	transition: opacity .6s var(--ease), transform .8s var(--ease), filter .6s var(--ease);
}
.hero__word--l .hero__v { --dx: -1.25rem; }
.hero__word--r .hero__v { --dx: 1.25rem; }
.hero__v.is-active { opacity: 1; transform: none; filter: none; transition-delay: .25s; }
.hero__word { display: block; }
.hero__word--l { text-align: right; }
.hero__word--r { text-align: left; }
.hero__ring { position: relative; display: block; width: var(--ring); aspect-ratio: 1; }
/* Фото — внутри кольца: диаметр 296 из 464 по сетке SVG */
.hero__photo { position: absolute; inset: 18.1%; border-radius: 50%; overflow: hidden; background: var(--mist); }
.hero__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	object-position: var(--focus, 50% 30%); transform-origin: var(--focus, 50% 30%);
	transform: scale(calc(var(--zoom, 1) * 1.08)); opacity: 0;
	transition: opacity .9s var(--ease), transform 1.6s var(--ease);
}
.hero__img.is-active { opacity: 1; transform: scale(var(--zoom, 1)); }
.hero__buoy { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 30px rgb(21 23 63 / .18)); }
.hero__step { transform-origin: 200px 200px; transform: rotate(var(--step, 0deg)); transition: transform 1.2s cubic-bezier(.5, 0, .2, 1); }
.hero__spin { transform-origin: 200px 200px; animation: buoy-spin 80s linear infinite; }
.hero__buoy-line { fill: none; stroke: var(--navy); stroke-opacity: .16; stroke-width: 1.5; }
.hero__buoy-cap { opacity: 0; transition: opacity .6s var(--ease); }
.hero__buoy-cap.is-active { opacity: 1; transition-delay: .3s; }
.hero__buoy-cap { font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; fill: var(--muted); }
@keyframes buoy-spin { to { transform: rotate(360deg); } }
.hero__foot { display: grid; justify-items: center; gap: var(--sp-5); margin-top: var(--sp-2); }
.hero__lead { font-size: var(--fs-l); color: var(--muted); }
.hero__nav { display: flex; align-items: center; gap: var(--sp-2); }
.hero__pause { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); transition: background-color var(--t-fast), color var(--t-fast); }
.hero__pause:hover { background: var(--paper); color: var(--navy); }
.hero__pause-icon { width: .625rem; height: .75rem; border-inline: 3px solid currentColor; }
.hero__pause[aria-pressed="true"] .hero__pause-icon { width: 0; height: 0; border-style: solid; border-width: .375rem 0 .375rem .625rem; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.hero__dot { position: relative; width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--line-strong); overflow: hidden; transition: width var(--t) var(--ease), background-color var(--t); }
.hero__dot::before { content: ""; position: absolute; inset: -.75rem -.25rem; }
.hero__dot:hover { background: var(--steel); }
.hero__dot.is-active { width: 2.5rem; background: var(--mist); }
.hero__dot.is-active::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--red); transform-origin: left; animation: hero-timer var(--hero-delay, 7s) linear forwards; }
.hero.is-paused .hero__dot.is-active::after { animation-play-state: paused; }
@keyframes hero-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Появление: слова «съезжаются» к кругу, круг докатывается */
.js .hero__word--l[data-reveal] { transform: translateX(-1.5rem); }
.js .hero__word--r[data-reveal] { transform: translateX(1.5rem); }
.js .hero__ring[data-reveal] { transform: scale(.9) rotate(-30deg); transition-duration: 1.1s; }
.js .hero [data-reveal].is-visible { transform: none; }

@media (max-width: 47.99rem) {
	.hero { min-height: 0; padding-block: var(--sp-7) var(--sp-8); }
	.hero__title { grid-template-columns: 1fr; gap: var(--sp-4); font-size: min(2.75rem, calc(100cqi / (var(--fit, 9) * .6))); }
	.hero__word--l, .hero__word--r { text-align: center; }
	/* Тезис всегда в две строки — одинаково у всех врачей */
	.hero__ring { justify-self: center; --ring: min(78vw, 19rem); }
	.hero__kicker span + span::before { content: none; }
	.hero__foot .btn { width: 100%; }
}

/* ---------- Клиника в цифрах: позвоночник, который выпрямляется ----------
   Позвонки стоят с изгибом (--y, --r из шаблона) и выстраиваются в линию, когда полоса
   появляется на экране (.is-aligned). Факты подвешены к «якорным» позвонкам зигзагом. */
.facts-band { padding-block: clamp(3rem, 2rem + 3vw, 5rem); background: var(--navy); color: rgb(255 255 255 / .72); overflow: hidden; }
.spine-grid { --vb: 2.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto calc(var(--vb) + 3.5rem) auto; }
.spine { position: relative; grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: .3rem; }
.spine::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgb(255 255 255 / .14); }
.vb {
	position: relative; flex: 1; height: var(--vb); border-radius: .55rem;
	background: rgb(255 255 255 / .92);
	transform: translateY(var(--y)) rotate(var(--r));
	transition: transform 1.2s cubic-bezier(.34, 1.3, .5, 1), background-color var(--t);
	transition-delay: calc(var(--i) * 24ms), 0s;
}
/* Отростки позвонка — чтобы читался позвонок, а не «клавиша» */
.vb::before { content: ""; position: absolute; left: 34%; right: 34%; top: -26%; bottom: -26%; border-radius: 99px; background: inherit; opacity: .5; }
.vb--anchor { background: var(--red); }
.vb--anchor::after { content: ""; position: absolute; inset: -.35rem; border-radius: .8rem; box-shadow: 0 0 0 2px rgb(255 255 255 / 0); transition: box-shadow var(--t); }
.vb.is-lit::after { box-shadow: 0 0 0 2px rgb(255 255 255 / .55); }
.is-aligned .vb { transform: translateY(calc(var(--lift, 0) * -.9rem)) scale(calc(1 + var(--lift, 0) * .08)); }
.is-settled .vb { transition: transform .35s cubic-bezier(.2, .8, .3, 1), background-color var(--t); transition-delay: 0s; }

.fact { position: relative; grid-column: var(--col); display: grid; justify-items: center; gap: var(--sp-2); padding-inline: var(--sp-4); text-align: center; cursor: default; }
.fact--up { grid-row: 1; align-self: end; padding-bottom: var(--sp-5); }
.fact--down { grid-row: 3; align-self: start; padding-top: var(--sp-5); }
/* Выноска от факта к его позвонку */
.fact::after { content: ""; position: absolute; left: 50%; width: 1px; height: 1.75rem; background: rgb(255 255 255 / .35); transition: background-color var(--t); }
.fact::before { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: #fff; transition: transform var(--t) var(--ease); }
.fact--up::after { top: 100%; }
.fact--up::before { top: calc(100% + 1.75rem - 3px); }
.fact--down::after { bottom: 100%; }
.fact--down::before { bottom: calc(100% + 1.75rem - 3px); }
.fact:hover::after { background: #fff; }
.fact:hover::before { transform: scale(1.6); }
.fact__num { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact__label { max-width: 15rem; font-size: var(--fs-s); line-height: 1.45; }
.spine-grid__note { grid-column: 1; grid-row: 3; align-self: end; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .4); }

/* Узкие экраны: позвоночник встаёт вертикально слева, факты — столбиком справа */
@media (max-width: 63.99rem) {
	.spine-grid { --vb: 2.25rem; grid-template-columns: var(--vb) minmax(0, 1fr); grid-template-rows: none; column-gap: var(--sp-6); row-gap: var(--sp-7); }
	.spine { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; align-items: stretch; gap: .25rem; }
	.spine::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; }
	/* Вертикальный изгиб мягче: в узкой колонке ему некуда уходить */
	.vb { flex: 1; width: var(--vb); height: auto; min-height: .5rem; border-radius: .4rem; transform: translateX(calc(var(--y) * .4)) rotate(calc(var(--r) * -.6)); }
	/* Факты идут столбиком и не совпадают с «якорями» — на телефоне позвонки одного цвета */
	.vb--anchor { background: rgb(255 255 255 / .92); }
	.vb::before { left: -24%; right: -24%; top: 32%; bottom: 32%; }
	.fact, .fact--up, .fact--down { grid-column: 2; grid-row: auto; align-self: center; justify-items: start; padding: 0; text-align: left; }
	.fact::after, .fact--up::after, .fact--down::after { top: 50%; bottom: auto; left: auto; right: 100%; width: var(--sp-5); height: 1px; }
	.fact::before, .fact--up::before, .fact--down::before { top: 50%; bottom: auto; left: auto; right: calc(100% + var(--sp-5) - 3px); margin: -3px 0 0; }
	.spine-grid__note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vb { transform: none; } .hero__dot.is-active::after { animation: none; transform: none; } }

/* ---------- Где болит: сканер ----------
   Слева — подписи зон на реальной высоте зоны с выносками к телу, в центре — манекен
   с позвонками и сканирующей линией, справа — карточка зоны (все карточки стопкой). */
.bodymap { background: var(--paper); }
.bodymap__hint { max-width: 22rem; font-size: var(--fs-s); color: var(--muted); }
.scan { --bh: clamp(22rem, 16rem + 18vw, 36rem); --bw: calc(var(--bh) * 240 / 520); --gap: var(--sp-8); display: grid; gap: var(--sp-6); align-items: start; }

/* Подписи зон */
.scan__labels { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.scan__labels::-webkit-scrollbar { display: none; }
.zlabel {
	position: relative; flex: none; display: inline-flex; align-items: baseline; gap: var(--sp-2);
	min-height: var(--control-s); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill);
	background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); white-space: nowrap; align-items: center;
	transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.zlabel__num { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--steel); transition: color var(--t-fast); }
.zlabel__name { font-size: var(--fs-s); font-weight: 600; }
.zlabel:hover { color: var(--navy); }
.zlabel[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.zlabel[aria-selected="true"] .zlabel__num { color: #ff9ea2; }

/* Тело */
.scan__body { position: relative; justify-self: center; width: var(--bw); height: var(--bh); }
.body { display: block; width: 100%; height: 100%; overflow: visible; }
.body__shape { fill: url(#skin); stroke: rgb(122 74 50 / .3); stroke-width: .7; stroke-linejoin: round; }
.body__head { fill: url(#skin-head); }
.body__floor { fill: rgb(32 30 80 / .16); }
.body__relief { pointer-events: none; }
.body__light { fill: rgb(255 240 225 / .4); }
.body__shade { stroke: rgb(120 70 45 / .3); stroke-linecap: round; }
.body__dimple { fill: rgb(120 70 45 / .35); }
.body__crease { stroke: rgb(122 74 50 / .35); stroke-width: .9; stroke-linecap: round; }
.body__zones { pointer-events: none; }
.body__zone { fill: #e0323a; opacity: 0; transition: opacity var(--t) var(--ease); }
.vert { fill: rgb(150 92 64 / .32); transition: fill var(--t) var(--ease); }
.body__hit { fill: transparent; cursor: pointer; }
.pin { opacity: 0; transition: opacity var(--t) var(--ease); pointer-events: none; }
.pin__ring { fill: none; stroke: #fff; stroke-width: 5; }
.pin__seg { fill: none; stroke: var(--red); stroke-width: 5; }
.pin__pulse { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.body[data-zone-hover="head"] .body__zone[data-zone="head"], .body[data-zone-hover="neck"] .body__zone[data-zone="neck"], .body[data-zone-hover="chest"] .body__zone[data-zone="chest"], .body[data-zone-hover="lower"] .body__zone[data-zone="lower"], .body[data-zone-hover="legs"] .body__zone[data-zone="legs"] { opacity: .14; }
.body[data-zone-active="head"] .body__zone[data-zone="head"], .body[data-zone-active="neck"] .body__zone[data-zone="neck"], .body[data-zone-active="chest"] .body__zone[data-zone="chest"], .body[data-zone-active="lower"] .body__zone[data-zone="lower"], .body[data-zone-active="legs"] .body__zone[data-zone="legs"] { opacity: .38; }
.body[data-zone-active="neck"] .vert[data-zone="neck"], .body[data-zone-active="chest"] .vert[data-zone="chest"], .body[data-zone-active="lower"] .vert[data-zone="lower"] { fill: var(--red); }
.body[data-zone-active="head"] .pin[data-zone="head"], .body[data-zone-active="neck"] .pin[data-zone="neck"], .body[data-zone-active="chest"] .pin[data-zone="chest"], .body[data-zone-active="lower"] .pin[data-zone="lower"], .body[data-zone-active="legs"] .pin[data-zone="legs"] { opacity: 1; }
.body[data-zone-active="head"] .pin[data-zone="head"] .pin__pulse, .body[data-zone-active="neck"] .pin[data-zone="neck"] .pin__pulse, .body[data-zone-active="chest"] .pin[data-zone="chest"] .pin__pulse, .body[data-zone-active="lower"] .pin[data-zone="lower"] .pin__pulse, .body[data-zone-active="legs"] .pin[data-zone="legs"] .pin__pulse { animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0% { opacity: .45; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }

/* Сканирующая линия: при появлении проходит сверху вниз, при смене зоны переезжает */
.scan__beam {
	position: absolute; left: -18%; right: -18%; top: var(--scan-y); height: 2px; margin-top: -1px;
	background: linear-gradient(90deg, transparent, var(--red) 18%, var(--red) 82%, transparent);
	box-shadow: 0 0 12px 1px rgb(215 38 45 / .55);
	pointer-events: none;
	transition: top 1s cubic-bezier(.65, 0, .25, 1);
}
.scan__beam::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 4rem; background: radial-gradient(50% 100% at 50% 100%, rgb(215 38 45 / .2), transparent); }
.scan.is-idle .scan__beam { top: 0; }
.scan.is-sweeping .scan__beam { transition-duration: 1.6s; }

/* Карточки зон — стопкой, высота = самая высокая */
.scan__panels { display: grid; }
.zcard {
	grid-area: 1 / 1; display: grid; gap: var(--sp-5); align-content: start;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: #fff; border-radius: var(--r-l); box-shadow: var(--shadow-1);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.zcard.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.zcard__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.zcard__count { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.zcard__count span { font-size: var(--fs-s); font-weight: 600; letter-spacing: 0; color: var(--steel); }
.zcard__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); }
.zcard__title { font-size: var(--fs-xl); }
.zcard__sub { margin-bottom: var(--sp-3); padding: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zcard__symptoms { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.symptom {
	display: flex; align-items: center; gap: var(--sp-3); min-height: var(--control-s); padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-m); background: var(--paper); font-size: var(--fs-s); line-height: 1.35; cursor: pointer;
	transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.symptom:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.symptom input { position: absolute; opacity: 0; pointer-events: none; }
.symptom__box { position: relative; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.symptom__box::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 78% no-repeat; transform: scale(0); transition: transform var(--t-fast) var(--ease); }
.symptom input:checked + .symptom__box { background: var(--red); box-shadow: none; }
.symptom input:checked + .symptom__box::after { transform: scale(1); }
.symptom:has(input:checked) { background: var(--red-50); }
.symptom input:focus-visible + .symptom__box { outline: 2px solid var(--navy); outline-offset: 2px; }
.zcard__links { display: grid; gap: var(--sp-5); }
.zcard__note { padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--red); background: var(--red-50); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: var(--fs-s); color: var(--ink); }
.zcard__cta { display: grid; justify-items: start; gap: var(--sp-3); }
.zcard__status { min-height: 1.5em; font-size: var(--fs-s); color: var(--muted); }
.zcard__status.is-picked { color: var(--navy); }
/* На узком экране строка статуса может занять две строки — место под них зарезервировано */
@media (max-width: 39.99rem) { .zcard__status { min-height: 3em; } }
.links { display: grid; gap: var(--sp-1); }
.links a { font-size: var(--fs-s); font-weight: 500; color: var(--navy); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .25em; transition: text-decoration-color var(--t-fast), color var(--t-fast); }
.links a:hover { color: var(--red-ink); text-decoration-color: currentColor; }
@media (min-width: 40rem) { .zcard__symptoms { grid-template-columns: 1fr 1fr; } .zcard__links { grid-template-columns: 1fr 1fr; } .zcard__symptoms legend { grid-column: 1 / -1; } }

@media (min-width: 64rem) {
	.scan { grid-template-columns: 10rem var(--bw) minmax(0, 1fr); column-gap: var(--gap); }
	/* Подписи — на высоте своей зоны, выноска доходит до края силуэта */
	.scan__labels { position: relative; display: block; height: var(--bh); margin: 0; padding: 0; overflow: visible; }
	.zlabel {
		position: absolute; right: 0; top: var(--y); transform: translateY(-50%);
		flex-direction: row-reverse; gap: var(--sp-3); padding: 0; min-height: 2rem;
		background: none; box-shadow: none; text-align: right;
	}
	.zlabel::after {
		content: ""; position: absolute; left: 100%; top: 50%; height: 1px;
		width: calc(var(--gap) + var(--bw) * var(--x) - .25rem); margin-left: var(--sp-3);
		background: var(--line); transform-origin: left; transform: scaleX(1);
		transition: transform var(--t) var(--ease), background-color var(--t);
	}
	.zlabel::before {
		content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin: -3px 0 0;
		left: calc(100% + var(--sp-3) + var(--gap) + var(--bw) * var(--x) - .5rem);
		border-radius: 50%; background: var(--red); opacity: 0; transform: scale(.4); transition: opacity var(--t), transform var(--t) var(--ease);
	}
	.zlabel__name { font-size: var(--fs-m); }
	.zlabel:hover::after { background: var(--steel); }
	.zlabel[aria-selected="true"] { background: none; color: var(--navy); }
	.zlabel[aria-selected="true"] .zlabel__num { color: var(--red-ink); }
	.zlabel[aria-selected="true"]::after { transform: none; background: var(--red); }
	.zlabel[aria-selected="true"]::before { opacity: 1; transform: none; transition-delay: .2s; }
	.scan__body { justify-self: auto; }
}
@media (prefers-reduced-motion: reduce) { .scan.is-idle .scan__beam { top: var(--scan-y); } }

/* ---------- Методы лечения: справочник ----------
   Таблица без «игры»: метод · показания · кто ведёт · цена и за что она.
   На десктопе — 4 колонки с общей шапкой, на телефоне — компактная карточка-строка. */
.mtable__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-s); color: var(--muted); }
.mtable__summary strong { font-size: var(--fs-l); font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.mtable { --cols: minmax(0, 1.5fr) minmax(0, 1fr) 9.5rem 8.5rem; }
.mtable__head { display: none; }
.mgroup + .mgroup { margin-top: var(--sp-6); }
.mgroup__title { display: flex; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--navy); font-size: var(--fs-l); }
.mgroup__num { font-size: var(--fs-xs); font-weight: 700; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.mrow {
	position: relative; display: grid; gap: var(--sp-2) var(--sp-5); padding: var(--sp-4) var(--sp-3); margin-inline: calc(var(--sp-3) * -1);
	border-bottom: 1px solid var(--line); border-radius: var(--r-s);
	grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price" "helps helps" "docs docs";
	transition: background-color var(--t-fast);
}
.mrow:hover { background: var(--paper); }
.mrow__main { grid-area: main; display: grid; gap: 2px; }
.mrow__name { justify-self: start; font-size: var(--fs-m); font-weight: 700; color: var(--navy); text-decoration: none; line-height: 1.35; }
/* Вся строка кликабельна — ссылка растянута поверх, вложенные ссылки (виды массажа, врачи) поднимаются выше */
.mrow__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mrow:hover .mrow__name { color: var(--red-ink); }
.mrow__desc { font-size: var(--fs-s); color: var(--muted); line-height: 1.45; }
.mrow__kids { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); margin-top: var(--sp-1); font-size: var(--fs-s); }
.mrow__kids a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .22em; }
.mrow__kids a:hover { color: var(--red-ink); text-decoration-color: currentColor; }
.mrow__cell { font-size: var(--fs-s); line-height: 1.45; }
/* На телефоне подписи колонок — в строку с содержимым, чтобы метод занимал 3–4 строки */
.mrow__label { margin-right: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.mrow__helps { grid-area: helps; color: var(--ink); }
.mrow__docs { grid-area: docs; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.mrow__docs .mrow__label { display: none; }
.mrow__price { grid-area: price; text-align: right; white-space: nowrap; }
.mrow__sum { display: block; font-size: var(--fs-m); font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.mrow__unit { font-size: var(--fs-xs); color: var(--muted); }
.faces { position: relative; z-index: 1; display: inline-flex; }
.face { position: relative; display: block; width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden; background: var(--mist); box-shadow: 0 0 0 2px #fff; transition: transform var(--t-fast) var(--ease); }
.face + .face { margin-left: -.5rem; }
.face:hover { transform: translateY(-2px); z-index: 1; }
.face__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faces__names { font-size: var(--fs-xs); color: var(--muted); }
.mtable__foot { max-width: 52rem; margin-top: var(--sp-6); font-size: var(--fs-s); color: var(--muted); }
.mtable__foot a { color: var(--navy); }

@media (min-width: 64rem) {
	.mtable__head {
		display: grid; grid-template-columns: var(--cols); gap: var(--sp-5); padding: 0 0 var(--sp-3);
		font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--steel);
	}
	.mtable__r { text-align: right; }
	.mgroup__title { margin-top: 0; }
	.mrow { grid-template-columns: var(--cols); grid-template-areas: "main helps docs price"; align-items: start; }
	.mrow__label { display: none; }
	.mrow__price { padding-top: 1px; }
}

/* ---------- Как проходит лечение ---------- */
.steps__list { display: grid; gap: var(--sp-7); counter-reset: step; }
.step { position: relative; display: grid; gap: var(--sp-3); align-content: start; }
.step__num {
	display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--sp-2);
	border-radius: 50%; font-size: var(--fs-l); font-weight: 800; color: #fff;
	background: var(--navy);
	box-shadow: 0 0 0 2px rgb(255 255 255 / .18), 0 0 0 8px var(--navy);
	position: relative; z-index: 1;
}
.step__num::before {
	content: ""; position: absolute; inset: -6px; border-radius: 50%;
	background: repeating-conic-gradient(from -22.5deg, var(--red) 0 45deg, transparent 0 90deg);
	-webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
	        mask: radial-gradient(circle, transparent 62%, #000 64%);
	z-index: -1;
}
.step__title { font-size: var(--fs-l); }
.step__text { font-size: var(--fs-s); }
.steps__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgb(255 255 255 / .14); }
.steps__foot p { display: flex; gap: var(--sp-3); align-items: flex-start; max-width: 46rem; font-size: var(--fs-s); }
.steps__foot .icon { color: #ff9ea2; margin-top: 2px; }
@media (min-width: 48rem) { .steps__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
	.steps__list { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
	.steps__list::before { content: ""; position: absolute; }
	.step:not(:last-child)::after { content: ""; position: absolute; top: 1.75rem; left: 4.5rem; right: calc(var(--sp-6) * -1 + var(--sp-3)); height: 1px; background: rgb(255 255 255 / .2); }
}

/* ---------- Врачи ---------- */
.doctors__grid { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.doc { display: flex; flex-direction: column; gap: var(--sp-4); }
.doc__body { display: flex; flex-direction: column; flex: 1; }
.doc__photo { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; background: var(--mist); }
.doc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transition: transform var(--t-slow) var(--ease); }
.doc:hover .doc__img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
.doc__exp { position: absolute; left: var(--sp-3); bottom: var(--sp-3); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: rgb(255 255 255 / .94); font-size: var(--fs-xs); font-weight: 600; color: var(--navy); }
.doc__name { font-size: var(--fs-l); }
.doc__name a { text-decoration: none; }
.doc__name a:hover { color: var(--red-ink); }
.doc__role { margin-top: var(--sp-1); font-size: var(--fs-s); color: var(--muted); line-height: 1.45; }
.doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: auto; padding-top: var(--sp-4); }
.doc__ext { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.doc__ext:hover { color: var(--navy); }

/* ---------- Почему мы ---------- */
.reasons__grid { display: grid; gap: var(--sp-7); }
.award { display: grid; grid-template-columns: 7rem 1fr; gap: var(--sp-4); align-items: center; margin-top: var(--sp-7); padding: var(--sp-4); background: #fff; border-radius: var(--r-l); box-shadow: var(--shadow-1); text-decoration: none; transition: box-shadow var(--t); }
.award:hover { box-shadow: var(--shadow-2); }
.award__img { position: relative; aspect-ratio: 1.41; border-radius: var(--r-s); overflow: hidden; background: var(--mist); }
.award__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.award__text { font-size: var(--fs-s); line-height: 1.45; color: var(--muted); }
.award__text strong { display: block; color: var(--navy); font-size: var(--fs-m); }
.acc { border-top: 1px solid var(--line-strong); }
.acc__item { border-bottom: 1px solid var(--line-strong); }
.acc__h { font-size: inherit; }
.acc__btn {
	display: grid; grid-template-columns: 3rem 1fr 2rem; align-items: center; gap: var(--sp-3);
	width: 100%; min-height: 5rem; padding: var(--sp-4) 0; border: 0; background: none; text-align: left;
}
.acc__num { font-size: var(--fs-s); font-weight: 700; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.acc__title { font-size: var(--fs-l); font-weight: 600; color: var(--navy); line-height: 1.3; }
.acc__icon { position: relative; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color var(--t), box-shadow var(--t); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .75rem; height: 1.5px; margin: -.75px 0 0 -.375rem; background: var(--navy); transition: transform var(--t) var(--ease), background-color var(--t); }
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon { background: var(--navy); box-shadow: none; }
.acc__btn[aria-expanded="true"] .acc__icon::before, .acc__btn[aria-expanded="true"] .acc__icon::after { background: #fff; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__text { padding: 0 2.75rem var(--sp-5) calc(3rem + var(--sp-3)); color: var(--muted); }
@media (min-width: 64rem) {
	.reasons__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-10); }
	.reasons__aside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); align-self: start; }
}
@media (max-width: 39.99rem) { .acc__text { padding-left: 0; padding-right: 0; } .acc__btn { grid-template-columns: 2.25rem 1fr 2rem; } }

/* ---------- Горизонтальные ленты (акции, отзывы) ---------- */
.track {
	--edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
	display: grid; grid-auto-flow: column; grid-auto-columns: min(21rem, 82vw); gap: var(--sp-5);
	padding: var(--sp-2) var(--edge) var(--sp-6);
	scroll-padding-inline: var(--edge);
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; }
.track:focus-visible { outline-offset: -4px; }
/* Мышью ленту можно тянуть: курсор-«ладонь», во время жеста — без снапа и выделения текста */
@media (hover: hover) and (pointer: fine) { .track { cursor: grab; } }
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.track.is-dragging * { pointer-events: none; }
.track.is-coasting { scroll-snap-type: none; }
.track img { -webkit-user-drag: none; user-select: none; }
.slider-nav { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 47.99rem) { .slider-nav { display: none; } }

.promo { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.promo__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.promo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; padding: var(--sp-5); }
.promo__title { font-size: var(--fs-l); line-height: 1.25; }
.promo__text { font-size: var(--fs-s); color: var(--muted); }
.promo__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: auto; padding-top: var(--sp-3); }
.promo__end { font-size: var(--fs-xs); color: var(--muted); }
.promo--perk { box-shadow: none; color: rgb(255 255 255 / .82); }
.promo--perk .promo__title { color: #fff; }
.promo--perk .promo__text { color: rgb(255 255 255 / .82); }
.promo--perk .more { color: #fff; }
.promo--red { background: var(--red); }
.promo--navy { background: var(--navy); }
.promo__big { display: flex; align-items: flex-end; aspect-ratio: 16 / 10; padding: var(--sp-5); font-size: clamp(4rem, 3rem + 3vw, 5.5rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: #fff; background: radial-gradient(circle at 100% 0, rgb(255 255 255 / .14) 0 30%, transparent 30.5%) no-repeat; }
.promo__qr { width: 5.5rem; margin-top: auto; padding: var(--sp-1); background: #fff; border-radius: var(--r-s); }
.promos > .container:last-child { margin-top: var(--sp-2); }

/* ---------- Отзывы ---------- */
.review { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6); background: #fff; border-radius: var(--r-l); box-shadow: var(--shadow-1); }
.review__text { position: relative; margin: 0; flex: 1; }
.review__text::before { content: "“"; display: block; height: 2rem; font-size: 4rem; line-height: 1; font-weight: 800; color: var(--red); }
.review__text p { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-s); line-height: 1.6; }
.review__by { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.review__avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; background: var(--navy-50); font-weight: 700; color: var(--navy); }
.review__name { display: block; font-weight: 600; color: var(--navy); line-height: 1.3; }
.review__meta { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.reviews .track { grid-auto-columns: min(24rem, 86vw); }
.reviews__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-2); }
.reviews__sites { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-s); color: var(--muted); }
.reviews__bonus { display: flex; align-items: center; gap: var(--sp-2); width: 100%; font-size: var(--fs-s); color: var(--muted); }
.reviews__bonus .icon { color: var(--red); }

/* ---------- О клинике + SEO-текст ---------- */
.about__grid { display: grid; gap: var(--sp-8); align-items: start; }
.about__media { display: grid; gap: var(--sp-5); }
.video { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; background: var(--navy); }
.video__poster, .video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video video { opacity: 0; transition: opacity var(--t-slow) var(--ease); background: #000; }
.video.is-playing video { opacity: 1; }
.video__play { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: var(--sp-4); padding: var(--sp-5); border: 0; text-align: left; color: #fff; background: linear-gradient(180deg, transparent 40%, rgb(21 23 63 / .75)); transition: opacity var(--t); }
.video.is-playing .video__play { opacity: 0; pointer-events: none; }
.video__btn { display: grid; place-items: center; width: 4rem; height: 4rem; flex: none; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 8px rgb(215 38 45 / .25); transition: box-shadow var(--t) var(--ease); }
.video__btn .icon { fill: #fff; stroke: none; width: 1.5rem; height: 1.5rem; margin-left: 3px; }
.video__play:hover .video__btn { box-shadow: 0 0 0 12px rgb(215 38 45 / .3); }
.video__caption { display: grid; gap: 2px; line-height: 1.35; }
.video__caption span { font-size: var(--fs-xs); opacity: .8; }
.about__card { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-6); background: var(--paper); border-radius: var(--r-l); font-size: var(--fs-s); }
.about__card-title { font-size: var(--fs-l); font-weight: 700; color: var(--navy); line-height: 1.3; }
@media (min-width: 64rem) { .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-10); } .about__media { position: sticky; top: calc(var(--header-h) + var(--sp-6)); } }

.readmore { margin-top: var(--sp-6); }
.readmore__body { position: relative; max-height: 24rem; overflow: hidden; transition: max-height var(--t-slow) var(--ease-io); }
.readmore__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8rem; background: linear-gradient(rgb(255 255 255 / 0), #fff); pointer-events: none; transition: opacity var(--t); }
.readmore.is-open .readmore__body::after { opacity: 0; }
.readmore__btn { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding: 0; border: 0; background: none; font-weight: 600; color: var(--red-ink); }
.readmore__btn .icon { transition: transform var(--t) var(--ease); }
.readmore.is-open .readmore__btn .icon { transform: rotate(180deg); }

/* Тексты из редактора.
   Компоненты темы внутри текста (карточки из «Цикла запроса», отзывы, акции) помечены .not-prose —
   типографика текста на них не распространяется: `:not(:where(.not-prose *))` не добавляет специфичности. */
.prose { font-size: var(--fs-m); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2:not(:where(.not-prose *)) { margin-top: var(--sp-7); font-size: var(--fs-xl); }
.prose h3:not(:where(.not-prose *)) { margin-top: var(--sp-6); font-size: var(--fs-l); }
.prose h4:not(:where(.not-prose *)) { margin-top: var(--sp-5); font-size: var(--fs-m); }
.prose :is(h2, h3, h4):not(:where(.not-prose *)) + * { margin-top: var(--sp-3); }
.prose a:not(:where(.not-prose *, .wp-block-button__link)) { color: var(--navy); text-decoration: underline; text-decoration-color: var(--line-strong); transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.prose a:not(:where(.not-prose *, .wp-block-button__link)):hover { color: var(--red-ink); text-decoration-color: currentColor; }
.prose :is(ul, ol):not(:where(.not-prose, .not-prose *)) { display: grid; gap: var(--sp-2); padding-left: 0; }
.prose ul:not(:where(.not-prose, .not-prose *)) > li { position: relative; padding-left: var(--sp-5); }
.prose ul:not(:where(.not-prose, .not-prose *)) > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.prose ol:not(:where(.not-prose, .not-prose *)) { counter-reset: li; }
.prose ol:not(:where(.not-prose, .not-prose *)) > li { position: relative; padding-left: var(--sp-6); counter-increment: li; }
.prose ol:not(:where(.not-prose, .not-prose *)) > li::before { content: counter(li) "."; position: absolute; left: 0; font-weight: 700; color: var(--red-ink); }
.prose li > :is(ul, ol) { margin-top: var(--sp-2); }
.prose :is(img, video):not(:where(.not-prose *)) { border-radius: var(--r-m); }
.prose figure:not(:where(.not-prose, .not-prose *)) { margin-block: var(--sp-6); }
.prose blockquote:not(:where(.not-prose *)) { margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--red); background: var(--paper); border-radius: 0 var(--r-s) var(--r-s) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.prose :is(th, td) { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--navy); }

/* ---------- Блог ---------- */
.posts { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.post-card__link { display: grid; gap: var(--sp-3); text-decoration: none; }
.post-card__img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; background: var(--mist); }
.post-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.post-card__link:hover .post-card__img img { transform: scale(1.04); }
/* Запись без обложки: крупный фрагмент круга в углу вместо пустой рамки */
.post-card__img--empty { background: var(--navy-50); }
.post-card:nth-child(3n+2) .post-card__img--empty { background: var(--sand); }
.post-card:nth-child(3n+3) .post-card__img--empty { background: var(--red-50); }
.post-card__mark { position: absolute; width: 62%; right: -14%; bottom: -26%; transition: transform var(--t-slow) var(--ease); }
.post-card__link:hover .post-card__mark { transform: rotate(45deg); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.post-card__cat { font-weight: 600; color: var(--red-ink); }
.post-card__title { font-size: var(--fs-l); font-weight: 600; line-height: 1.3; color: var(--navy); transition: color var(--t-fast); }
.post-card__link:hover .post-card__title { color: var(--red-ink); }

/* ---------- Запись и контакты ---------- */
.contacts__grid { display: grid; gap: var(--sp-7); align-items: start; }
.booking-card { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--navy); color: rgb(255 255 255 / .78); border-radius: var(--r-l); }
.booking-card .eyebrow { color: #ff9ea2; }
.booking-card .eyebrow__ring { box-shadow: none; }
.booking-card__title { font-size: var(--fs-2xl); color: #fff; }
.booking-card__lead { margin-top: var(--sp-4); margin-bottom: var(--sp-6); }
.cinfo { display: grid; }
.cinfo__row { display: grid; gap: var(--sp-1) var(--sp-5); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.cinfo__row:first-child { border-top: 1px solid var(--line); }
.cinfo dt { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); color: var(--muted); }
.cinfo dt .icon { color: var(--red); }
.cinfo dd { line-height: 1.55; }
.cinfo strong { color: var(--navy); }
.cinfo__phone { font-size: var(--fs-l); font-weight: 700; color: var(--navy); text-decoration: none; }
.cinfo__phone:hover { color: var(--red-ink); }
.cinfo__status { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-s); font-weight: 500; color: var(--navy); min-height: 1.5em; }
.cinfo__msg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.map { position: relative; margin-top: var(--sp-6); aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; background: var(--mist) repeating-linear-gradient(45deg, transparent 0 22px, rgb(255 255 255 / .45) 22px 23px); isolation: isolate; }
.map__canvas { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.map.is-loaded .map__canvas { opacity: 1; }
.map__canvas iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Подложка карты приглушена, фирменная метка и интерфейс остаются цветными */
.map [class*="ground-pane"] { filter: grayscale(.85) contrast(1.04) brightness(1.03); }
.map__route {
	position: absolute; right: var(--sp-4); top: var(--sp-4); z-index: 2;
	display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--control-s); padding: 0 var(--sp-4);
	border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-2);
	font-size: var(--fs-s); font-weight: 600; color: var(--navy); text-decoration: none;
	transition: color var(--t-fast), box-shadow var(--t-fast);
}
.map__route .icon { color: var(--red); }
.map__route:hover { color: var(--red-ink); box-shadow: var(--shadow-3); }
@media (min-width: 40rem) { .cinfo__row { grid-template-columns: 10rem 1fr; } }
@media (min-width: 64rem) {
	.contacts__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: stretch; }
	.contacts__info { display: flex; flex-direction: column; }
	.map { flex: 1; aspect-ratio: auto; min-height: 18rem; }
}

/* ---------- Формы (Contact Form 7) ---------- */
.form .wpcf7-form { display: grid; gap: var(--sp-4); }
.form .hidden-fields-container, .form .screen-reader-response { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.form .wpcf7-form.init .wpcf7-response-output, .form .wpcf7-form.resetting .wpcf7-response-output, .form .wpcf7-form.submitting .wpcf7-response-output, .form .wpcf7-response-output:empty { display: none; }
.form .wpcf7-spinner { visibility: hidden; width: 1.5rem; height: 1.5rem; border: 2.5px solid rgb(255 255 255 / .4); border-top-color: #fff; border-radius: 50%; }
.form .submitting .wpcf7-spinner { visibility: visible; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form .wpcf7-form > p { margin: 0; }
.form br { display: none; }
.form label { display: grid; gap: var(--sp-2); font-size: var(--fs-s); font-weight: 500; color: var(--navy); }
.form .wpcf7-form-control-wrap { display: block; position: relative; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .form textarea {
	width: 100%; min-height: var(--control); padding: 0 var(--sp-4);
	border: 1.5px solid var(--line-strong); border-radius: var(--r-m); background: #fff;
	font: inherit; font-size: var(--fs-m); color: var(--ink);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
	-webkit-appearance: none; appearance: none;
}
.form textarea { height: 6.5rem; min-height: 6.5rem; padding-block: var(--sp-3); resize: vertical; }
.form select { padding-right: var(--sp-8); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2160' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right var(--sp-4) center / 1.125rem no-repeat; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgb(31 33 96 / .12); }
.form .wpcf7-not-valid { border-color: var(--red); }
/* Текстовых подсказок об ошибках нет — только красная рамка поля (и галочки согласия). */
.form .wpcf7-not-valid-tip { display: none !important; }
.form .wpcf7-acceptance.wpcf7-not-valid input { border-color: var(--red); }
.form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-xs); font-weight: 400; color: var(--muted); line-height: 1.5; cursor: pointer; }
.form .wpcf7-acceptance input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; border: 1.5px solid var(--line-strong); border-radius: 6px; background: #fff; -webkit-appearance: none; appearance: none; display: grid; place-items: center; transition: background-color var(--t-fast), border-color var(--t-fast); }
.form .wpcf7-acceptance input:checked { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: var(--navy); }
.form .wpcf7-acceptance a { color: inherit; }
.form .wpcf7-submit {
	width: 100%; min-height: var(--control-l); border: 0; border-radius: var(--r-pill);
	background: var(--red); color: #fff; font: inherit; font-weight: 600; font-size: var(--fs-m);
	box-shadow: 0 8px 20px -8px rgb(215 38 45 / .6);
	transition: background-color var(--t-fast), opacity var(--t-fast);
}
.form .wpcf7-submit:hover { background: var(--red-ink); }
.form .wpcf7-submit:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.form .wpcf7-form > p:has(.wpcf7-submit) { position: relative; }
.form .wpcf7-spinner { position: absolute; right: var(--sp-4); top: 50%; margin: -12px 0 0; }
.form .wpcf7-response-output { margin: 0 !important; padding: var(--sp-3) var(--sp-4) !important; border: 0 !important; border-radius: var(--r-m); font-size: var(--fs-s); background: var(--paper); animation: fade-in var(--t) var(--ease); }
/* «Есть ошибки» и «отправлено» текстом не показываем: ошибки видны по рамкам, успех — карточкой поверх формы.
   Сбой отправки (почта/спам) оставляем текстом — иначе человек не узнает, что заявка не ушла. */
.form .invalid .wpcf7-response-output, .form .unaccepted .wpcf7-response-output, .form .sent .wpcf7-response-output { display: none; }
.form .failed .wpcf7-response-output, .form .spam .wpcf7-response-output, .form .aborted .wpcf7-response-output { background: var(--red-50); color: var(--red-ink); }

/* Спасибо-карточка: лежит поверх формы и занимает ровно её место, поэтому размеры блока не меняются. */
.form { --form-bg: #fff; }
.form .wpcf7-form { position: relative; }
.form-thanks {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
	padding: var(--sp-5); text-align: center; background: var(--form-bg);
	opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}
.form.is-sent .form-thanks { opacity: 1; visibility: visible; transition: opacity var(--t) var(--ease), visibility 0s; }
.form.is-sent .wpcf7-form > :not(.form-thanks) { visibility: hidden; }
.form-thanks p { margin: 0; }
.form-thanks__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #e7f5ec; color: #1e7a45; }
.form-thanks__icon svg { width: 1.75rem; height: 1.75rem; }
.form-thanks__title { font-size: var(--fs-xl); font-weight: 600; color: var(--navy); }
.form-thanks__text { max-width: 24rem; font-size: var(--fs-s); color: var(--muted); }
.form-thanks__again { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: var(--fs-s); font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.form--dark { --form-bg: var(--navy); }
.form--dark .form-thanks__icon { background: rgb(255 255 255 / .12); color: #8fe0ad; }
.form--dark .form-thanks__title, .form--dark .form-thanks__again { color: #fff; }
.form--dark .form-thanks__text { color: rgb(255 255 255 / .75); }
.form--dark label { color: #fff; }
.form--dark input[type="text"], .form--dark input[type="tel"], .form--dark select, .form--dark textarea { border-color: transparent; }
.form--dark input:focus, .form--dark select:focus, .form--dark textarea:focus { border-color: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / .2); }
.form--dark .wpcf7-acceptance label { color: rgb(255 255 255 / .7); }
.form--dark .wpcf7-acceptance input { border-color: rgb(255 255 255 / .5); background-color: transparent; }
.form--dark .wpcf7-acceptance input:checked { background-color: var(--red); border-color: var(--red); }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Окно записи ---------- */
.modal {
	width: min(36rem, calc(100% - var(--gutter) * 2)); max-width: none; max-height: calc(100dvh - var(--sp-8));
	margin: auto; padding: 0; border: 0; border-radius: var(--r-l); background: #fff; color: var(--ink);
	box-shadow: var(--shadow-3); overflow: hidden;
	opacity: 0; transform: translateY(16px) scale(.98);
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.modal.is-open { opacity: 1; transform: none; }
.modal::backdrop { background: rgb(21 23 63 / .5); opacity: 0; transition: opacity var(--t) var(--ease); }
.modal.is-open::backdrop { opacity: 1; }
.modal__panel { position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.modal__close { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.modal__head { padding-right: var(--sp-8); margin-bottom: var(--sp-6); }
.modal__kicker { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); }
.modal__title { margin-top: var(--sp-2); font-size: var(--fs-xl); }
.modal__context { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--navy-50); font-size: var(--fs-s); color: var(--navy); }
.modal__alt { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-s); color: var(--muted); }
.modal__alt a { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; color: var(--navy); }
.modal__alt .icon { width: 1rem; height: 1rem; }
@media (max-width: 47.99rem) {
	.modal { width: 100%; max-height: calc(100dvh - var(--sp-6)); margin: auto 0 0; border-radius: var(--r-l) var(--r-l) 0 0; transform: translateY(40px); }
	.modal__panel { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
}

/* ---------- Подвал ----------
   1) полоса «о клинике + телефон и запись»; 2) четыре колонки: Пациентам, Клиника, Что лечим,
   Контакты; 3) юридический блок; 4) нижняя строка: копирайт, документы, разработчик. */
.footer { padding-block: var(--sp-9) var(--sp-6); background: var(--navy-900); color: rgb(255 255 255 / .7); font-size: var(--fs-s); }
.footer a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
.footer a:hover { color: #fff; }
.footer small { color: rgb(255 255 255 / .45); }

.footer__top { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid rgb(255 255 255 / .12); }
.footer__about { margin-top: var(--sp-4); max-width: 30rem; }
.footer__cta { display: grid; justify-items: start; gap: var(--sp-3); }
.footer__bigphone { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: #fff !important; }
.footer__hours { display: flex; align-items: center; color: rgb(255 255 255 / .6); }
.footer__hours .status-dot { margin-right: var(--sp-2); }

.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); padding-block: var(--sp-7); }
.footer__title { margin-bottom: var(--sp-4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .45); }
.footer__links { display: grid; gap: var(--sp-2); }
.footer__more { color: #ff9ea2 !important; }
.footer__contacts { display: grid; gap: var(--sp-3); }
.footer__contacts li { display: grid; grid-template-columns: 1.125rem 1fr; gap: var(--sp-3); align-items: start; line-height: 1.45; }
.footer__contacts .icon { width: 1.125rem; height: 1.125rem; margin-top: 1px; color: #ff9ea2; }
.footer__contacts a { color: #fff; font-weight: 500; }
.footer__socials { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer__socials a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--sp-3); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); font-size: var(--fs-xs); font-weight: 500; color: rgb(255 255 255 / .85); transition: box-shadow var(--t-fast), color var(--t-fast); }
.footer__socials a:hover { box-shadow: inset 0 0 0 1px #fff; }
.footer__col:last-child, .footer__col--wide { grid-column: 1 / -1; }

.footer__legal { display: grid; gap: var(--sp-3); padding-block: var(--sp-5); border-top: 1px solid rgb(255 255 255 / .12); font-size: var(--fs-xs); line-height: 1.6; color: rgb(255 255 255 / .45); }
.footer__warn { font-size: var(--fs-s); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: rgb(255 255 255 / .6); }

.footer__bottom { display: grid; gap: var(--sp-4); align-items: center; padding-top: var(--sp-5); border-top: 1px solid rgb(255 255 255 / .12); font-size: var(--fs-xs); color: rgb(255 255 255 / .5); }
.footer__docs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.dev-credit { display: inline-flex; align-items: center; gap: var(--sp-3); justify-self: start; color: rgb(255 255 255 / .55) !important; line-height: 1.3; }
.dev-credit__text { white-space: nowrap; }
.dev-credit__logo { width: auto; height: 2rem; opacity: .72; transition: opacity var(--t-fast); }
.dev-credit:hover { color: rgb(255 255 255 / .9) !important; }
.dev-credit:hover .dev-credit__logo { opacity: 1; }

@media (min-width: 48rem) {
	.footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
	.footer__cta { justify-items: end; text-align: right; }
}
@media (min-width: 64rem) {
	.footer__grid { grid-template-columns: 1fr 1fr 1.1fr 1.4fr; gap: var(--sp-6); }
	.footer__col:last-child, .footer__col--wide { grid-column: auto; }
	.footer__bottom { grid-template-columns: auto 1fr auto; gap: var(--sp-6); }
	.dev-credit { justify-self: end; padding-left: var(--sp-5); border-left: 1px solid rgb(255 255 255 / .15); }
}

/* ---------- Мобильная панель действий ---------- */
.actionbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-2);
	padding: var(--sp-2) var(--gutter) calc(var(--sp-2) + env(safe-area-inset-bottom));
	background: rgb(255 255 255 / .96); box-shadow: 0 -1px 0 var(--line), 0 -10px 30px -18px rgb(21 23 63 / .3);
	transform: translateY(110%); transition: transform var(--t) var(--ease);
}
.actionbar.is-visible { transform: none; }
.actionbar__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 3rem; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--navy); font-size: var(--fs-s); font-weight: 600; text-decoration: none; }
.actionbar__btn--primary { background: var(--red); color: #fff; }
@media (max-width: 47.99rem) { body { padding-bottom: var(--actionbar-h); } }
@media (min-width: 48rem) { .actionbar { display: none; } }

/* Внутренние страницы — assets/css/inner.css (подключается везде, кроме главной). */

/* ---------- Появление при прокрутке ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.js [data-reveal] { opacity: 1; transform: none; }
}