/* ═══════════════════════════════════════════════════════
   ТЕРАПИЯ КРАСОТЫ · REDUX v2 · editorial design system
   Референс-режиссура: AVA SRG (нумерация, тонкие линии,
   крупная типографика, контрастные секции, маски).
   Палитра: тёплая SPA — без больничного холода.
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:#211d19;
  --coal:#181512;
  --bone:#ece6da;
  --paper:#f5f0e8;
  --milk:#fbf8f3;
  --line:rgba(33,29,25,.16);
  --line-strong:rgba(33,29,25,.4);
  --wood:#6b5d4c;
  --clay:#b07a63;
  --rose:#c99a86;
  --sage:#7e9483;
  --field-sage:#dbe1d6;   /* светлая шалфейная полоса */
  --mineral:#7fa093;
  --gold:#ab8f60;

  --accent:var(--clay);            /* косметология по умолчанию */
  --accent-soft:rgba(176,122,99,.14);

  /* 30.08, п.3 ревизии: реф janu.com. Их шрифты: кастомный JanuSans (гротеск,
     основной вес 300) + коммерческие Macklin / Classic Roman — купить нельзя,
     кириллицы нет. Ставим ближайший легальный аналог с кириллицей: Jost Light.
     Откат в один шаг: вернуть "Prata","Times New Roman",serif. */
  --font-display:"Jost","Onest",-apple-system,"Helvetica Neue",sans-serif;
  --font-body:"Onest",-apple-system,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.19,1,.22,1);
  --gutter:clamp(16px,3.4vw,52px);
  /* Высота шапки = полоса контактов + ряд навигации. Держим одним числом:
     на --header-h завязаны отступы героев, якоря и липкие блоки.

     Считается от содержимого, а не подбирается на глаз: в ряду навигации
     самые высокие элементы — логотип и группа справа с кнопкой «Записаться»,
     оба по 44px. При 96px ряду доставалось 64px, то есть по 10px воздуха
     сверху и снизу — полоса контактов зрительно ложилась на кнопки.
     112px дают ряду 80px и зазор 18px. На телефоне берём 104px: там каждый
     лишний пиксель шапки съедает первый экран, и 14px уже достаточно.

     Полоса контактов — 34px, и строка в ней прижата к низу, а не центрована.
     Два требования выглядели противоречивыми, но решаются одним приёмом:
     строка не должна липнуть к краю экрана (при центровке в полосе 32px
     её центр приходился на 10px) и при этом должна стоять близко к ряду
     навигации, а не висеть от него отдельно. Прижатие к низу даёт центр
     строки около 24px от края и оставляет под ней всего несколько пикселей
     до навигации. Над героем полоса прозрачная, её высота ничего не занимает:
     под ней продолжается кадр. */
  --topbar-h:32px;
  --header-h:100px;
}
@media(max-width:760px){ :root{ --header-h:94px; } }
/* ── Цветокор косметологии ────────────────────────────────────────────
   Референс — nymphaicosmetics.com: там цвет доминирует, а не выцветает.
   Переопределяем базовые токены прямо на body, поэтому карточки, линии
   и тёмные секции подхватывают новый тон сами, без правки своих правил.
   Стоматология остаётся на холодном минерале — направления должны
   отличаться на глаз, а не только подписью. */
body[data-direction="cosmo"]{
  --accent:#a75c3f;                  /* терракота: плотнее прежней clay */
  --accent-soft:rgba(167,92,63,.15);
  --ink:#2a2018;                     /* тёплый эспрессо вместо серо-чёрного */
  --coal:#241b13;
  --paper:#f2e6d6;                   /* песок вместо серо-бежевого */
  --milk:#f9f0e3;
  --bone:#f1e4d1;
  --wood:#7d6448;
  --gold:#c39a5c;
  --line:rgba(42,32,24,.18);
  --line-strong:rgba(42,32,24,.42);
  /* полосы полноширинных полей: песок → карамель → пыльный голубой */
  --field-sand:#eddfc9;
  --field-caramel:#e3ccac;
  --field-mist:#c4d1d4;
  --field-sage:#d7ddc8;   /* шалфей в тёплую сторону */
}
body[data-direction="dent"]{--accent:var(--mineral);--accent-soft:rgba(127,160,147,.16);}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html.lock{overflow:hidden;}
/* Атрибут hidden обязан скрывать элемент, даже если авторский
   display:flex перебивает браузерное правило */
[hidden]{display:none !important;}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65; /* 30.08: аудитория возрастная, базовый кегль крупнее */
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;color:inherit;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
::selection{background:var(--ink);color:var(--bone);}

h1,h2,h3,h4{margin:0;font-weight:400;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}

/* ── Типографика ── */
/* Шкала: заголовок раздела деликатнее заголовка страницы, длинные фразы
   больше не идут капслоком — капс остаётся только на коротких именах. */
.display{
  font-family:var(--font-display);
  font-weight:300; /* Janu-характер: лёгкий гротеск */
  font-size:clamp(34px,calc(26px + 1.25vw),44px);   /* 34 — нижняя граница брифа для мобильных заголовков */
  line-height:1.08;letter-spacing:.02em;
}
.display--lg{font-size:clamp(34px,5vw,72px);line-height:1;text-transform:uppercase;letter-spacing:.035em;}
.display em{font-style:normal;color:var(--accent);transition:color .6s;}
.h-md{
  font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,30px);line-height:1.14;
}
.eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,3vh,32px);
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--wood);
}
/* Черта перед надглавием — единственная зелень на светлых полосах:
   она повторяется на каждом разделе и держит ботанический тон,
   не перекрашивая ни заголовки, ни кнопки. */
.eyebrow::before{content:"";width:44px;height:1px;background:var(--sage);flex-shrink:0;}
.tagline{margin:0 0 8px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);}

/* построчный reveal */
.line-mask{display:block;overflow:hidden;}
.line-mask > span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease);}
.is-in .line-mask > span,.line-mask.is-in > span{transform:none;}

/* reveal при скролле */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-reveal].is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}
  [data-reveal]{opacity:1;transform:none;}
  .marquee__track{animation:none;}
  .line-mask > span{transform:none;}
  .dir-clip,.dir-hero__clip{display:none;}
}

/* ── Зерно плёнки ── */
.grain{
  position:fixed;inset:-60px;z-index:2000;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.31 0 0 0 0 0.25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Прелоадер ── */
.preloader{
  position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:var(--coal);color:var(--bone);
  transition:clip-path 1s var(--ease);clip-path:inset(0 0 0 0);
}
.preloader.is-done{clip-path:inset(0 0 100% 0);pointer-events:none;}
.preloader__inner{text-align:center;padding:0 20px;}
.preloader__word{
  font-family:var(--font-display);font-size:clamp(22px,4vw,40px);
  letter-spacing:.3em;text-transform:uppercase;margin:0 0 10px;padding-left:.3em;
}
.preloader__sub{margin:0;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
.preloader__bar{width:min(320px,60vw);height:1px;background:rgba(236,230,218,.18);margin:30px auto 0;position:relative;overflow:hidden;}
.preloader__bar i{position:absolute;inset:0;background:var(--bone);transform:scaleX(0);transform-origin:left;transition:transform .3s linear;}
.preloader__count{
  position:absolute;right:clamp(18px,4vw,48px);bottom:26px;margin:0;
  font-family:var(--font-display);font-size:clamp(40px,7vw,88px);line-height:1;opacity:.9;
}

/* ── Header ── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--header-h);
  border-bottom:1px solid transparent;color:var(--ink);
  transition:background .5s,border-color .5s,transform .5s var(--ease);
}
.header.is-scrolled{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-color:var(--line);}
.header.is-hidden{transform:translateY(-110%);}
.header__inner{height:calc(100% - var(--topbar-h));display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);padding:0 var(--gutter);}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
/* Полоса контактов над навигацией — как на старом сайте клиники. Телефон и
   часы видны всегда, в том числе на телефонах, где .header__phone скрыт.
   Фона своего не имеет: шапка над героем прозрачная, плашка резала бы кадр.
   Линию снизу показываем только в прокрученном состоянии, вместе с фоном. */
/* Лента непрозрачная, в отличие от самой шапки: полоса лежит поверх
   героя-видео, и на светлом кадре серый текст по прозрачному фону терял
   контраст — номер читался хуже подписи. 32px кадр почти не режут. */
/* Метка врача, ведущего приём на английском. Стоит рядом с направлением,
   набрана мельче и в розовом, чтобы читалась как пометка, а не как второй
   заголовок карточки. */
.doc-card__en{align-self:flex-start;width:fit-content;margin:-6px 0 0;
  padding:3px 9px;border-radius:999px;
  border:1px solid rgba(201,154,134,.5);color:var(--rose);
  font-size:10.5px;letter-spacing:.06em;line-height:1.35;text-transform:none;}

/* Полосы для англоязычных посетителей больше нет: приём на английском
   отмечается на карточке конкретного врача, а не обещанием во всю ширину
   страницы. Шапка на страницах направлений теперь такая же, как везде,
   поэтому отдельного --enbar-h и увеличенной высоты не требуется. */

/* Строка прижата к низу полосы, а не центрована: так она одновременно
   не липнет к краю экрана и стоит близко к ряду навигации. */
.topbar{height:var(--topbar-h);display:flex;align-items:flex-end;
  padding-bottom:3px;
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background .5s,border-color .5s;}
/* Прокрученная шапка красит себя сама — и на четыре процента иначе, чем лента.
   Два полупрозрачных слоя друг на друге давали ступеньку по цвету, а линия
   под лентой резала шапку надвое. Ленту гасим целиком: фон, блюр и линию —
   пусть полоса и навигация читаются одним блоком. Своя лента нужна ей только
   над героем, где под ней кадр видео. */
.header.is-scrolled .topbar{background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;}
.topbar__in{display:flex;align-items:center;gap:10px;width:100%;padding:0 var(--gutter);
  font-size:12.5px;letter-spacing:.02em;color:var(--ink);}
.topbar__phone{color:inherit;white-space:nowrap;transition:color .4s;}
.topbar__phone:hover{color:var(--accent);}
.topbar__sep{opacity:.5;}
.topbar__hours{white-space:nowrap;}
.topbar__addr{color:inherit;white-space:nowrap;transition:color .4s;}
.topbar__addr:hover{color:var(--accent);}
.topbar__nowrap{white-space:nowrap;}
/* 16.09: справа в полосе — номер действующей лицензии со ссылкой на выписку
   из реестра Росздравнадзора. Номер клиника обязана показывать до записи,
   и место у него самое заметное: одна строка с телефоном, над героем.
   margin-left:auto, а не space-between: слева контакты должны остаться
   слитной группой с одинаковыми зазорами, а не разъехаться по ширине. */
.topbar__lic{margin-left:auto;color:inherit;white-space:nowrap;
  text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);
  text-underline-offset:3px;transition:color .4s,text-decoration-color .4s;}
.topbar__lic:hover{color:var(--accent);text-decoration-color:currentColor;}

.logo__mark{
  width:34px;height:34px;border-radius:50%;border:1px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:13px;
  transition:background .4s,color .4s,border-color .4s;
}
.logo:hover .logo__mark{background:var(--ink);color:var(--bone);border-color:var(--ink);}
.logo__text{font-size:11px;letter-spacing:.3em;line-height:1.35;display:flex;flex-direction:column;text-transform:uppercase;}
.logo__text em{font-style:normal;color:var(--accent);transition:color .5s;}

.dir-switch{display:flex;position:relative;border:1px solid var(--line-strong);border-radius:999px;padding:3px;background:color-mix(in srgb,var(--paper) 62%,transparent);}
.dir-switch__btn{
  background:none;border:0;padding:6px 14px;border-radius:999px;font-size:10px;letter-spacing:.16em;
  color:var(--wood);position:relative;z-index:1;transition:color .45s;text-transform:uppercase;
}
.dir-switch__btn.is-active{color:var(--milk);}
.dir-switch__thumb{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;
  background:var(--accent);transition:left .55s var(--ease),background .55s;
}
.dir-switch.is-dent .dir-switch__thumb{left:50%;}

.nav{display:flex;gap:18px;margin-left:auto;}
.nav a{font-size:13px;letter-spacing:.03em;color:var(--wood);position:relative;padding:4px 0;}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav__cta{border:1px solid var(--accent);border-radius:999px;padding:7px 16px !important;color:var(--accent) !important;transition:background .4s,color .4s !important;text-transform:uppercase;font-size:11.5px !important;letter-spacing:.12em !important;}
.nav__cta:hover{background:var(--accent);color:var(--milk) !important;}
.nav__cta::after{display:none;}

.header__right{display:flex;align-items:center;gap:12px;}
/* pointer здесь обязателен: раньше интерактивность подсказывал кастомный курсор,
   его убрали 28.08 — без этого поиск и бургер выглядят некликабельными */
.search-toggle,.burger{background:none;border:0;padding:8px;display:flex;color:inherit;cursor:pointer;}
/* Телефон остался в разметке ради порядка «телефон → соцсети → бургер»,
   но показывать его нечего: тот же номер стоит выше в .topbar. */
.header__phone{display:none;}
/* Соцсети рядом с телефоном. Иконки монохромные и обведены той же линией, что
   поиск и бургер: шапка держится на тонких штрихах, и три фирменных цветных
   кружка (как в ЮАО) выбивались бы из неё. */
.header__msgs{display:flex;align-items:center;gap:8px;}
.hmsg{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--line-strong);border-radius:50%;color:inherit;flex:none;
  transition:background .4s,border-color .4s,color .4s;
}
.hmsg:hover{background:var(--accent);border-color:var(--accent);color:var(--milk);}
/* В подвале гейта и в меню фон тёмный: тёмная линия на нём не видна вовсе. */
.gate__foot .hmsg,.menu-panel .hmsg{border-color:rgba(236,230,218,.28);}
.gate__foot .hmsg:hover,.menu-panel .hmsg:hover{border-color:var(--accent);}
.burger{flex-direction:column;justify-content:center;gap:5px;display:none;}
.burger span{width:22px;height:1.5px;background:currentColor;}

/* полноэкранное меню */
.menu-overlay{
  position:fixed;inset:0;z-index:1500;background:var(--coal);color:var(--bone);
  /* Меню пряталось только clip-path: ссылки оставались в порядке обхода Tab
     (11 фокусируемых элементов внутри aria-hidden). visibility снимает их
     с клавиатуры; задержка 0.8s держит их видимыми до конца анимации закрытия. */
  clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;
  transition:clip-path .8s var(--ease),visibility 0s .8s;
  display:flex;flex-direction:column;padding:calc(var(--header-h) + 20px) var(--gutter) 40px;overflow-y:auto;
}
.menu-overlay.is-open{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto;transition:clip-path .8s var(--ease),visibility 0s;}
.menu-overlay nav a{
  font-family:var(--font-display);font-size:clamp(22px,4.4vw,32px);
  padding:12px 0;border-bottom:1px solid rgba(236,230,218,.12);display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.menu-overlay nav a:hover,.menu-overlay nav a:focus-visible{color:var(--gold);}
/* Меню на две вкладки: навигация и «Пациентам». Второй вкладкой стал бывший
   блок документов из подвала — фон меню такой же тёмный, поэтому стили
   .docs__grid и .legal-pages переехали сюда как есть. */
.menu-tabs{display:flex;gap:8px;flex:0 0 auto;margin-bottom:clamp(18px,2.4vw,30px);}
.menu-tab{
  background:none;border:1px solid rgba(236,230,218,.28);border-radius:999px;color:rgba(236,230,218,.66);
  padding:9px 20px;cursor:pointer;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.menu-tab:hover{color:var(--bone);border-color:rgba(236,230,218,.55);}
.menu-tab.is-active{color:var(--coal);background:var(--bone);border-color:var(--bone);}
.menu-tab:focus-visible{outline:2px solid var(--bone);outline-offset:3px;}
.menu-panel{flex:1 1 auto;min-height:0;}
.menu-docs{max-width:min(100%,760px);}
.menu-docs__title{font-family:var(--font-display);font-size:clamp(24px,3vw,38px);line-height:1.15;margin:0 0 10px;}
.menu-docs .disclaimer{margin:0 0 26px;}
.menu-docs .docs__grid{margin-bottom:clamp(22px,3vw,34px);}
.menu-docs .legal-stack{padding:0;}

.menu-close{
  align-self:flex-end;background:none;border:1px solid rgba(236,230,218,.3);border-radius:999px;
  padding:8px 18px;font-size:11px;letter-spacing:.2em;margin-bottom:20px;text-transform:uppercase;cursor:pointer;
}

@media(max-width:1120px){
  .nav{display:none;}
  .topbar__in{justify-content:center;font-size:12px;}
  .topbar__addr,.topbar__addr + .topbar__sep,.topbar__hours + .topbar__sep{display:none;}
  /* Прижимать лицензию вправо здесь нечем — группа уже отцентрована. */
  .topbar__lic{margin-left:0;}
}

@media(max-width:760px){
  /* На телефоне в строку помещаются только два блока из четырёх. Часы
     уступают место номеру лицензии: расписание повторено в контактах и
     в подвале, а номер до записи больше нигде на экране не встречается.
     Оставшейся паре тесно даже вдвоём, поэтому полоса берёт 11px —
     подпись всё равно служебная, а номер обязан читаться целиком. */
  .topbar__in{font-size:11px;}
  .topbar__hours,.topbar__phone + .topbar__sep{display:none;}
  .burger{display:flex;}
  .dir-switch{margin-left:auto;}
}

/* ── Кнопки ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:999px;border:1px solid var(--accent);
  background:none;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background .4s,color .4s,border-color .4s,filter .4s,transform .18s;
}
.btn:active{transform:translateY(1px);}
.btn--solid{background:var(--accent);color:var(--milk);}
.btn--solid:hover{filter:brightness(1.08);}
.btn--ghost:hover{background:var(--accent);color:var(--milk);}
.btn--dark{border-color:var(--ink);}
.btn--light{border-color:var(--bone);color:var(--bone);}
.btn--light:hover{background:var(--bone);color:var(--ink);}
.linklike{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:inherit;cursor:pointer;}

/* ── HERO ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--coal);}
.hero__split{flex:1;display:flex;position:relative;min-height:520px;}
.hero__half{
  flex:1;position:relative;display:flex;align-items:flex-end;overflow:hidden;
  transition:flex-grow .9s var(--ease),filter .6s;
}
.hero__media{position:absolute;inset:-6% 0;overflow:hidden;}
.hero__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform 1.2s var(--ease);}
.hero__media-note{
  position:absolute;left:14px;top:14px;margin:0;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);opacity:.65;background:rgba(24,21,18,.4);padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px);
}
.hero__half::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,21,18,.74) 0%,rgba(24,21,18,.12) 55%,rgba(24,21,18,.28) 100%);}
.hero__half--cosmo .hero__media img{object-position:70% 30%;}
.hero__half--dent .hero__media img{object-position:30% 30%;}

.hero__half-content{position:relative;z-index:2;padding:clamp(20px,3vw,44px);color:var(--bone);width:100%;}
.hero__kicker{margin:0 0 10px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;opacity:.8;display:flex;gap:12px;align-items:center;}
.hero__kicker::before{content:"";width:36px;height:1px;background:currentColor;opacity:.6;}
.hero__dir-title{
  font-family:var(--font-display);
  font-size:clamp(38px,7.2vh,84px);line-height:.95;text-transform:uppercase;margin:0 0 12px;
}
.hero__dir-sub{max-width:340px;font-size:13.5px;opacity:.85;margin:0;}
.hero__go{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.hero__half.is-open .hero__go,.hero__half:focus-visible .hero__go{opacity:1;transform:none;}
.hero__half:not(.is-open){filter:brightness(.82) saturate(.9);}
.hero__half.is-open{filter:none;}
.hero__half.is-open .hero__media img{transform:scale(1.045);}

/* центральный манифест */
.hero__center{
  position:absolute;z-index:5;left:50%;top:clamp(84px,15vh,150px);transform:translateX(-50%);
  text-align:center;width:min(92vw,900px);pointer-events:none;color:var(--bone);
}
.hero__center a,.hero__center button{pointer-events:auto;}
.hero__monogram{display:inline-flex;margin-bottom:14px;}
.hero__monogram svg{display:block;}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(21px,3.6vw,46px);line-height:1.14;text-transform:uppercase;letter-spacing:.02em;
  text-shadow:0 2px 30px rgba(24,21,18,.55);
}
.hero__lead{margin:14px auto 0;max-width:480px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;}
.hero__actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap;}
.dir-detail__intro .hero__actions{justify-content:flex-start;margin-top:26px;}

/* служебная строка hero */
.hero__meta{
  position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px var(--gutter);border-top:1px solid rgba(236,230,218,.2);
  background:var(--coal);color:var(--bone);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
}
.hero__scroll{display:flex;align-items:center;gap:10px;}
.hero__scroll i{display:block;width:1px;height:24px;background:var(--bone);opacity:.6;animation:scrollPulse 1.8s ease-in-out infinite;transform-origin:top;}
@keyframes scrollPulse{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.hero__seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(245,240,232,.5);z-index:3;pointer-events:none;}

@media(max-width:760px){
  .hero__split{flex-direction:column;}
  .hero__seam{top:50%;bottom:auto;left:0 !important;right:0;width:auto;height:1px;}
  .hero__center{top:70px;width:94vw;}
  .hero__title{font-size:clamp(17px,4.8vw,26px);}
  .hero__actions{margin-top:12px;gap:8px;}
  .hero__actions .btn{padding:11px 18px;font-size:10px;}
}

/* ── Секция: редакционная сетка ── */
.section{padding:clamp(56px,6.2vw,94px) var(--gutter);position:relative;}
.section__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line-strong);margin-bottom:clamp(24px,3.2vw,44px);
}
.section--dark{background:var(--coal);color:var(--bone);}

/* ── Цветные поля секций ──────────────────────────────────────────────
   Плоская страница одного бежевого тона и читалась блёкло. Как на
   nymphaicosmetics.com, секции идут полноширинными полосами цвета:
   песок → карамель → эспрессо → пыльный голубой. Карточки внутри
   остаются на --paper и за счёт этого выступают из поля.
   Токены заданы только у косметологии, поэтому на стоматологии
   классы ничего не красят — фон честно остаётся прежним. */
.section--sand{background:var(--field-sand);}
.section--caramel{background:var(--field-caramel);}
.section--mist{background:var(--field-mist);}
.section--sage{background:var(--field-sage);}
/* поле цветное — линия должна темнеть вместе с ним, иначе сетка исчезает */
.section--caramel .section__head,
.section--mist .section__head,
.section--sage .section__head{border-bottom-color:rgba(42,32,24,.5);}

/* ── Бегущая строка ──
   Вернули 27.08 по просьбе клиента: две полосы на странице задают ритм и не дают
   длинным светлым секциям слипаться. Кегль подчинён новой шкале (h2 = 25-33px):
   прежние 36px спорили бы с заголовками, 17-26px читаются как акцент.
   Маска гасит буквы у краёв — иначе строка обрубается о край экрана.
   Текст продублирован в разметке, петля бесшовна на translateX(-50%). */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);padding:clamp(20px,2.2vw,34px) 0;background:var(--milk);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee--dark{background:transparent;}
.marquee__track{display:flex;width:max-content;animation:marquee 62s linear infinite;}
/* длительность подобрана под длину фразы: обе полосы едут ~85 px/с */
.marquee--dark .marquee__track{animation-duration:46s;}
/* Строка с пакетами длинная и её читают, а не просто отмечают ритм,
   поэтому едет заметно медленнее остальных. */
.marquee--packages .marquee__track{animation-duration:150s;}
/* вторая полоса идёт навстречу первой */
.marquee--rev .marquee__track{animation-direction:reverse;}
.marquee__track span{
  font-family:var(--font-display);font-size:clamp(26px,3.4vw,50px);line-height:1.15;
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;padding-right:clamp(10px,1.2vw,18px);
}
.marquee__track i{font-style:normal;color:var(--accent);padding:0 clamp(10px,1.3vw,18px);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* 30.08: полосы прижаты к соседним блокам — вокруг них было по 56-94px
   секционных полей с каждой стороны, читалось «очень широко». */
.section:has(+ .marquee){padding-bottom:clamp(18px,2.4vw,32px);}
.marquee + .section{padding-top:clamp(22px,2.8vw,38px);}
/* Свёрнутый каталог услуг — секция без видимого содержимого, но с полными
   полями: перед первой полосой висела пустая лента почти в два экрана полей.
   Правило стоит ПОСЛЕ :has-соседей и перебивает их порядком каскада. */
.section.svc-collapsed{padding-block:clamp(14px,1.8vw,24px);}
.section--dark .eyebrow{color:var(--gold);}
.section--dark .eyebrow::before{background:rgba(236,230,218,.4);}
.section--dark .section__head{border-color:rgba(236,230,218,.3);}

/* ── О клинике ── */
.about__values{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,5vh,56px);}
.chip{border:1px solid var(--line-strong);border-radius:999px;padding:9px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--wood);}

/* ── Метка «скоро» (будущие направления и операционная) ── */
.soon-badge{
  display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;padding:5px 13px;margin-bottom:10px;color:var(--gold);
}

/* ── Детали направления ── */
/* ── Первый экран косметологии: видео во всю ширину ──────────────────────
   Бриф просит зацепить с первого кадра, а колонка со статичным портретом
   этого не делала. Ролик лежит фоном, текст поверх него; постер остаётся
   LCP-картинкой, поэтому кадр виден ещё до загрузки видео. */
.dir-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;   /* svh: на телефоне адресная строка не режет кадр */
  display:flex;align-items:flex-end;
  /* 29.08: в тон гейту — в hero остался один заголовок у нижней кромки,
     адресная строка убрана (адрес есть в шапке контактов и подвале). */
  padding:calc(var(--header-h) + 6vh) var(--gutter) clamp(24px,4vh,44px);
  background:var(--coal);color:var(--bone);
}
.dir-hero__media{position:absolute;inset:0;z-index:0;}
.dir-hero__still,
.dir-hero__clip{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:56% 38%;
  filter:saturate(1.12) contrast(1.04);
}
/* Ролик проявляется только когда реально пошёл кадр — иначе на его месте
   моргает чёрный прямоугольник ещё не начавшегося видео. */
.dir-hero__clip{opacity:0;transition:opacity 1.1s ease;}
.dir-hero__clip.is-playing{opacity:1;}
/* Вуаль в тон гейта: без неё светлый текст тонет в освещённой части кадра.
   Она тёплая, а не серая, — цветокор по референсу держится и здесь. */
.dir-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(28,17,10,.86) 0%,rgba(28,17,10,.56) 34%,rgba(28,17,10,.10) 62%,rgba(28,17,10,0) 100%),
    linear-gradient(to top,rgba(22,13,8,.72) 0%,rgba(22,13,8,.10) 38%,rgba(22,13,8,.30) 100%);
}
/* 720, а не 620: заголовок набран крупным шрифтом, и в узкой колонке
   .line-mask со своим overflow:hidden срезал последнюю букву. */
/* Стоматология: тот же приём, но вуаль уводим из шоколада в холодный
   графит, а грейд делаем спокойнее — кабинет и инструмент не должны
   выглядеть тёплыми, как спа. Кадр держим по центру: там улыбка. */
/* 22.09: кадр опущен с 42% до 34%, двумя шагами по просьбе Кирилла.
   Ролик вертикальный (720x1561), на широком экране он растягивается до
   ~3120px по высоте при окне 900 — видно меньше трети, и один процент
   здесь стоит примерно 22px. То есть кадр уехал вниз почти на 180px.
   Ниже 34% опускать опасно: улыбка, ради которой этот кадр и выбран,
   начнёт уходить под заголовок. */
[data-direction="dent"] .dir-hero__still,
[data-direction="dent"] .dir-hero__clip{
  object-position:52% 34%;
  filter:saturate(1.02) contrast(1.05);
}
[data-direction="dent"] .dir-hero::after{
  background:
    linear-gradient(100deg,rgba(16,22,20,.86) 0%,rgba(16,22,20,.56) 34%,rgba(16,22,20,.10) 62%,rgba(16,22,20,0) 100%),
    linear-gradient(to top,rgba(13,19,17,.74) 0%,rgba(13,19,17,.10) 38%,rgba(13,19,17,.30) 100%);
}
/* Надглавие на тёмном кадре: золото — тон косметологии, здесь минерал. */
[data-direction="dent"] .dir-hero .eyebrow{color:var(--mineral);}

.dir-hero__inner{position:relative;z-index:2;max-width:min(720px,100%);}
/* Надстрочник мелкий и попадает на светлую часть кадра — держим его тенью,
   иначе на телефоне он пропадает на щеке. */
.dir-hero .eyebrow{color:var(--gold);text-shadow:0 1px 18px rgba(20,12,7,.75);}
.dir-hero .eyebrow::before{background:rgba(236,230,218,.5);}
.dir-hero h1{margin:0;}
/* 12.09: вместо описательной фразы на первом экране стоит слоган в два-три
   слова. Он короткий, поэтому одной строкой влезает с запасом, и кегль можно
   отпустить почти вдвое против прежних 54px. Справа держим 130px под
   fixed-плашку помощника 24/7: слоган стоит у нижней кромки, ровно на её
   высоте. На планшете и телефоне перенос разрешён — там строка в две части
   читается лучше, чем мелкий кегль в одну. */
.dir-hero__title{font-size:clamp(33px,5.6vw,58px);letter-spacing:.03em;font-weight:300;}
@media(min-width:1025px){
  .dir-hero__inner{max-width:calc(100% - 130px);}
  .dir-hero__title{white-space:nowrap;font-size:min(6vw,92px);}
  /* Слоган стоматологии длиннее косметологического вдвое и в одну строку
     при общем кегле не помещается — вылезал за правый край на 380px.
     Переносить его нельзя: nowrap здесь держит строку на одной высоте с
     плашкой помощника. Поэтому кегль для этой страницы свой, подобран так,
     чтобы строка доходила до края блока и не упиралась в плашку. */
  #direction-dent .dir-hero__title{font-size:min(4.4vw,68px);}
  /* 18.09: слоган косметологии стал длинной фразой, и в одну строку она
     упиралась в правый край — .line-mask своим overflow срезал хвост.
     Разрыв перед «о себе» стоит в разметке: делить фразу по смыслу должен
     автор, а не алгоритм переноса. Кегль подобран так, чтобы первая строка
     целиком уместилась и не дотянулась до плашки помощника. */
  #direction-cosmo .dir-hero__title{white-space:normal;font-size:min(3.7vw,56px);
    line-height:1.06;}
}
.dir-hero__lead{margin:0;max-width:44ch;font-size:clamp(15px,1.15vw,18px);line-height:1.62;color:rgba(236,230,218,.88);}
.dir-hero .hero__actions{justify-content:flex-start;margin-top:clamp(26px,3.6vh,40px);}
/* Подсказка, что под видео есть страница: без неё полноэкранный кадр
   читается как отдельный экран, и каталог услуг под ним не ищут.
   Только волосяная линия, без подписи: подпись вставала в один ряд с
   кнопками и читалась как третья кнопка. */
/* По центру низа, а не справа: справа висит кнопка онлайн-консультанта,
   и подсказка уходила под неё. */
/* 29.08: заголовок опущен к нижней кромке — низ по центру занят текстом
   (на 1280–1440 строки доходят до середины), а справа живёт плашка
   ассистента. Стрелке-подсказке места не осталось, прячем целиком. */
.dir-hero__scroll{
  display:none;
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(26px,4vh,44px);z-index:2;
  flex-direction:column;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(236,230,218,.7);transition:color .4s var(--ease);
}
.dir-hero__scroll:hover{color:var(--bone);}
.dir-hero__scroll span{position:relative;width:1px;height:56px;background:rgba(236,230,218,.26);overflow:hidden;}
.dir-hero__scroll span::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:18px;background:var(--bone);
  animation:scrollCue 2.6s var(--ease) infinite;
}
@keyframes scrollCue{0%{transform:translateY(-18px);}55%,100%{transform:translateY(56px);}}
/* Шапка лежит прямо на тёмном кадре, поэтому до первой прокрутки она светлая.
   Класс .is-scrolled ставит js/main.js — дальше шапка снова обычная. */
body.has-video-hero .header:not(.is-scrolled){color:var(--bone);}
/* Полоса контактов над героем больше не отдельная светлая лента.
   Сплошной фон и линия под ней резали первый экран надвое: кадр начинался
   не от верха страницы, а от границы полосы.

   Фон убран не просто так — он держал контраст: на светлом кадре серый текст
   по прозрачному фону читался хуже подписи. Вместо него под всей шапкой лежит
   мягкое затемнение сверху вниз. Оно решает ту же задачу честнее: и полоса,
   и навигация получают одинаковую основу, граница между ними исчезает,
   а кадр продолжается до самого верха. К низу затемнение сходит на нет,
   поэтому на герое не читается как плашка.

   Только над видео-героем и только до прокрутки: дальше шапка становится
   бумажной и красит себя сама. */
body.has-video-hero .header:not(.is-scrolled)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(24,15,9,.58) 0%, rgba(24,15,9,.34) 55%, rgba(24,15,9,0) 100%);
}
body.has-video-hero .header:not(.is-scrolled) .topbar{
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;
}
/* Текст полосы светлеет вместе с остальной шапкой. Чуть приглушён: телефон
   и адрес не должны спорить с логотипом и кнопкой записи. */
body.has-video-hero .header:not(.is-scrolled) .topbar__in{color:rgba(236,230,218,.82);}
body.has-video-hero .header:not(.is-scrolled) .topbar__in a{color:rgba(236,230,218,.92);}
body.has-video-hero .header:not(.is-scrolled) .topbar__in a:hover{color:var(--milk);}
/* «КРАСОТЫ» в логотипе набрано акцентом — на светлом кадре терракота тонула */
body.has-video-hero .header:not(.is-scrolled) .logo__text em{color:rgba(236,230,218,.7);}
body.has-video-hero .header:not(.is-scrolled) .dir-switch{border-color:rgba(236,230,218,.4);background:rgba(24,15,9,.26);}
body.has-video-hero .header:not(.is-scrolled) .dir-switch__btn{color:rgba(236,230,218,.76);}
body.has-video-hero .header:not(.is-scrolled) .dir-switch__btn.is-active{color:var(--milk);}
body.has-video-hero .header:not(.is-scrolled) .nav a{color:rgba(236,230,218,.82);}
body.has-video-hero .header:not(.is-scrolled) .nav__cta{border-color:rgba(236,230,218,.55);color:var(--bone) !important;}
body.has-video-hero .header:not(.is-scrolled) .nav__cta:hover{background:var(--bone);color:var(--coal) !important;}
body.has-video-hero .header:not(.is-scrolled) .logo:hover .logo__mark{background:var(--bone);color:var(--coal);border-color:var(--bone);}
@media(max-width:760px){
  /* 92svh, а не 100: видно край следующей секции — экран читается как начало
     страницы, а не как заставка. Низ свободен под мобильную панель действий. */
  .dir-hero{min-height:92svh;padding-bottom:24px;}
  /* Телефон лёжа: экран низкий, 24px сажали заголовок вплотную к панели
     «Записаться/Позвонить» (оптический зазор ~6px). */
  @media(max-height:480px){
    .dir-hero{padding-bottom:44px;}
  }
  /* Вертикальные версии кадра и ролика уже скадрированы под телефон,
     поэтому сдвигать точку обзора больше не нужно. */
  .dir-hero__still,.dir-hero__clip{object-position:50% 50%;}
  .dir-hero__scroll{display:none;}
  /* Портретный кадр обрезан по светлой части лица, и боковая вуаль на него
     уже не попадает — на телефоне затемняем снизу вверх. */
  .dir-hero::after{
    background:linear-gradient(to top,rgba(22,13,8,.88) 0%,rgba(22,13,8,.62) 30%,rgba(22,13,8,.14) 62%,rgba(22,13,8,.42) 100%);
  }
}

/* Первый экран направления уходил под фиксированную шапку: на телефоне верхний
   отступ секции (56px) меньше высоты шапки (64px), и надпись «Москва · Воронежская»
   подтекала под логотип. Берём максимум из обычного отступа и высоты шапки. */
.dir-detail{--detail-pad-top:max(clamp(56px,6.2vw,94px),calc(var(--header-h) + 24px));
  padding-top:var(--detail-pad-top);}
/* Первый экран косметологии: не плоский беж, а заливка карамель → песок.
   Стоматология входит тёмной секцией — направления не должны совпадать. */
[data-direction="cosmo"] .dir-detail{
  background:linear-gradient(168deg,var(--field-caramel) 0%,var(--field-sand) 44%,var(--paper) 100%);
}
.dir-detail__intro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);margin-bottom:clamp(36px,6vh,72px);align-items:center;}
.dir-detail__intro p{font-size:clamp(16px,1.4vw,19px);line-height:1.65;max-width:56ch;}
/* Исходники портретные (2:3). Широкое окно 16/10 показывало едва 40 % кадра
   по высоте и резало лицо; портретное окно оставляет ~80 % и лицо целиком. */
/* Окно портретное (4/5) под портретные исходники 2:3. Широкое 16/10 показывало
   ~41 % высоты кадра и резало губы и зубы; при 4/5 видно ~82 % высоты — брови,
   глаза, улыбка и подбородок целиком. Ширину ограничиваем, иначе на большом
   экране фото вырастает в полноэкранный баннер и удлиняет страницу. */
.dir-media{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/5;background:var(--milk);}
.dir-media img,
.dir-clip{width:100%;height:100%;object-fit:cover;}
/* Ожившее фото: петля лежит поверх снимка, её первый кадр совпадает с ним.
   Проявляем только когда браузер реально заиграл — иначе на экране остаётся фото. */
.dir-clip{
  position:absolute;inset:0;display:block;pointer-events:none;
  opacity:0;transition:opacity 1s ease;
}
/* появление быстрее ухода: по наведению улыбка должна начаться сразу,
   а гаснуть — мягко, растворяясь обратно в фотографию */
.dir-clip.is-playing{opacity:1;transition-duration:.45s;}
/* Кадрирование выставлено по замерам: у косметологии ядро лица y14–80 %.
   Стоматология 28.08 переснята кадром под масштаб косметологии: теперь в кадре
   лоб y0, глаза y26 %, зубы y55–60 %, подбородок y82 % — потому ровно по центру. */
[data-direction="cosmo"] .dir-media img,
[data-direction="cosmo"] .dir-clip{object-position:50% 45%;filter:saturate(1.16) contrast(1.06);}
[data-direction="dent"] .dir-media img,
[data-direction="dent"] .dir-clip{object-position:50% 50%;}
@media(min-width:901px){.dir-media{max-width:clamp(300px,33vw,440px);margin-left:auto;}}
@media(max-width:900px){.dir-detail__intro{grid-template-columns:1fr;}}
@media(max-width:760px){
  .dir-media{max-width:min(100%,420px);margin-inline:auto;}
  [data-direction="cosmo"] .dir-media img,
  [data-direction="cosmo"] .dir-clip{object-position:50% 42%;}
  [data-direction="dent"] .dir-media img,
  [data-direction="dent"] .dir-clip{object-position:50% 50%;}
}

/* услуги — раскрывающиеся строки */
.svc-row{border-bottom:1px solid var(--line-strong);}
.svc-row:first-of-type{border-top:1px solid var(--line-strong);}
/* Заголовок раздела уже подчёркнут своей линией — верхняя граница первой
   строки давала вторую параллельную черту с пустой полосой между ними. */
.dir-detail .section__head + #services-cosmo .svc-row:first-of-type,
.dir-detail .section__head + #services-dent .svc-row:first-of-type{border-top:0;}
/* Марки косметики — не процедура. Плашка стоит последней, уже под полосой
   поиска (узел переносит collapseServices), со своей рамкой, фоном светлее
   секции и заметным отрывом сверху — чтобы не читалась как группа услуг. */
.svc-row--brands{
  border:1px solid var(--line-strong);border-radius:18px;background:var(--milk);
  margin-top:clamp(30px,4.4vw,56px);padding:0 clamp(14px,2vw,22px);
}
.svc-row__head{
  width:100%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 4px;text-align:left;cursor:pointer;transition:color .3s;
}
.svc-row__head:hover{color:var(--accent);}
.svc-row__h{margin:0;font-weight:400;font-size:inherit;}
.svc-row__headtext{display:flex;flex-direction:column;gap:5px;min-width:0;}
.svc-row__title{font-family:var(--font-display);font-size:clamp(18px,1.7vw,23px);line-height:1.2;min-width:0;display:block;}
/* Подсказка видна только в закрытой строке — открыв её, читаешь полный текст. */
.svc-row__hint{font-size:13px;line-height:1.45;color:var(--wood);max-width:58ch;}
.svc-row.is-open .svc-row__hint{display:none;}
.section--dark .svc-row__hint{color:rgba(236,230,218,.66);}
.svc-row__head i{font-style:normal;font-size:20px;color:var(--accent);transition:transform .5s var(--ease);flex-shrink:0;}
.svc-row.is-open .svc-row__head i{transform:rotate(45deg);}
.svc-row__body{max-height:0;overflow:hidden;transition:max-height .7s var(--ease);}
/* мгновенное закрытие соседей: анимация тут мешает удержать позицию */
.svc-row.is-instant .svc-row__body{transition:none;}
.svc-row__inner{padding:0 4px 26px;}
/* Короткое описание категории вместо бессмысленного счётчика услуг. */
.svc-row__note{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--wood);max-width:64ch;}
/* Процедура внутри категории: своя раскрывающаяся строка.
   Отступ слева и тонкая линия слева показывают вложенность,
   не добавляя ещё одну рамку в и без того линейчатый каталог. */
.svc-proc-list{margin:0 0 22px;border-top:1px solid var(--line);}
.svc-proc{border-bottom:1px solid var(--line);}
.svc-proc__h{margin:0;font-weight:400;font-size:inherit;}
.svc-proc__head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 2px;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink);
  font-family:inherit;transition:color var(--ease);}
.svc-proc__head:hover{color:var(--accent);}
.svc-proc__name{font-size:clamp(15px,1.25vw,17px);line-height:1.35;}
.svc-proc__head i{font-style:normal;font-size:17px;color:var(--accent);flex-shrink:0;
  transition:transform .5s var(--ease);}
.svc-proc.is-open .svc-proc__head i{transform:rotate(45deg);}
.svc-proc__body{max-height:0;overflow:hidden;transition:max-height .7s var(--ease);}
.svc-proc__inner{padding:2px 2px 26px 18px;border-left:1px solid var(--line);
  max-width:1180px;}
/* Карточка процедуры. Сверху кадр и суть, дальше эффект цифрами,
   потом «кому подходит» и «когда нельзя» рядом, следом подготовка
   и уход. Панели без рамок: их разделяет цвет подложки, иначе
   внутри и без того линейчатого каталога рябит от границ. */
.svc-lead{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;
  align-items:start;margin:0 0 20px;}
.svc-lead:has(.svc-lead__text:only-child){grid-template-columns:minmax(0,1fr);}
.svc-proc__figure{margin:0;}
.svc-proc__figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:14px;box-shadow:0 14px 34px rgba(33,29,25,.14);}
/* Кадр 4:5 срезает у горизонтальных снимков 40% ширины, и у части фото под нож
   попадает самое важное: манипула аппарата, лоб пациентки. Двигаем окно кадра
   по каждому снимку отдельно — файлы при этом остаются нетронутыми. */
.svc-proc__figure img[src*="photo-lumecca"]{object-position:12% 50%;}
.svc-proc__figure img[src*="photo-morpheus8"]{object-position:30% 50%;}
/* Карбокситерапия: снимок горизонтальный, и по центру портретного кадра
   оставался край стола. Сдвиг вправо и вверх собирает в кадре то, ради чего
   фотография и стоит в карточке: экран с заданным объёмом газа, палец врача
   на нём и имя аппарата на корпусе. */
.svc-proc__figure img[src*="photo-carboxy"]{object-position:58% 40%;}
.svc-proc__what{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--wood);}
.svc-proc__drugs{margin:0;font-size:14px;line-height:1.6;color:var(--ink);}

/* Средства марок. В отличие от фотографий процедур кадр здесь не режем:
   флаконы сняты квадратом на белом, и cover срезал бы крышку. Одинаковые
   квадраты с contain держат ряд ровным при разной высоте баночек, белая
   плитка отделяет пэкшот от молочного фона плашки, подпись называет
   средство — без неё ряд читается безымянной витриной. */
.svc-shots{list-style:none;margin:0 0 20px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:12px;max-width:560px;}
.svc-shot{display:flex;flex-direction:column;gap:8px;}
.svc-shot img{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:10px;
  background:#fff;border-radius:14px;box-shadow:0 10px 26px rgba(33,29,25,.10);}
.svc-shot__cap{font-size:12.5px;line-height:1.4;color:var(--wood);text-align:center;}

/* Эффект и курс: показатель слева, срок справа — плитками */
.svc-facts{margin:0 0 18px;}
.svc-facts__h,.svc-panel__h{margin:0 0 10px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wood);font-weight:400;}
.svc-facts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.svc-fact{display:flex;flex-direction:column;gap:4px;padding:13px 15px;border-radius:12px;
  background:var(--milk);}
.svc-fact__k{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--wood);}
.svc-fact__v{font-family:var(--font-display);font-size:16px;line-height:1.25;color:var(--ink);}
.svc-facts__notes{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:5px;}
.svc-facts__notes li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.55;color:var(--wood);}
.svc-facts__notes li::before{content:"–";position:absolute;left:0;top:0;color:var(--accent);}

/* Пара колонок: показания и противопоказания, подготовка и уход после */
.svc-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;
  margin:0 0 12px;}
.svc-panel{padding:16px 18px;border-radius:14px;background:var(--milk);}
.svc-panel--for{background:var(--accent-soft);}
.svc-panel--note{background:none;padding:2px 0 0;}
.svc-panel--how{background:rgba(251,248,243,.7);}
/* Преимущества — единственный блок, который продаёт, поэтому галочки */
.svc-panel--plus{background:var(--accent-soft);}
.svc-panel--plus .svc-proc__list li::before{content:"✓";font-size:12px;}
.svc-panel .svc-proc__list li{font-size:14px;}
.svc-panel--against .svc-proc__list li::before{content:"×";}

.svc-proc__list{margin:0;padding:0;list-style:none;display:grid;gap:6px;}
.svc-proc__list li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.55;color:var(--ink);}
.svc-proc__list li::before{content:"–";position:absolute;left:0;top:0;color:var(--accent);}

/* «До и после»: два кадра одной работы рядом, подписи прямо на снимках.
   Пары не растягиваем на всю ширину — лицо крупным планом выглядит
   навязчиво; держим по две работы в ряд и мягкие скругления. */
.svc-cases{margin:22px 0 0;}
.svc-cases__h{margin:0 0 12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wood);font-weight:400;}
.svc-cases__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.svc-case{margin:0;}
.svc-case__pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.svc-case__shot{position:relative;overflow:hidden;border-radius:12px;background:var(--milk);}
/* Кадры не режем под общий формат: обе половинки пары приходят из одной
   склейки, пропорции у них одинаковые, а принудительный 4:3 срезал лица
   по нос — как раз то, ради чего работа и снята. */
.svc-case__shot img{display:block;width:100%;height:auto;}
.svc-case__shot span{position:absolute;left:8px;bottom:8px;padding:4px 10px;border-radius:100px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:rgba(251,248,243,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.svc-case__note{margin:7px 0 0;font-size:13px;line-height:1.5;color:var(--wood);}
/* Этапы одной процедуры: кадры в ряд, номер прямо на снимке */
.svc-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.svc-stage{margin:0;}
.svc-stage .svc-case__shot span{left:8px;top:8px;bottom:auto;min-width:26px;text-align:center;}
.svc-cases__doc{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink);}
.svc-cases__warn{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--wood);}
.section--dark .svc-case__shot span{background:rgba(33,29,25,.72);color:var(--bone);}
.section--dark .svc-cases__doc{color:var(--bone);}

/* Препарат или режим внутри методики — своя мини-карточка */
.svc-part{margin:0 0 16px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);}
.svc-part__name{margin:0 0 8px;font-family:var(--font-display);font-size:16px;line-height:1.3;color:var(--ink);}
.svc-part__what{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--wood);}

.svc-proc__warn{margin:18px 0 0;padding:12px 14px;border-radius:12px;background:var(--milk);
  font-size:13px;line-height:1.55;color:var(--wood);}
.svc-row__more{margin:0 0 10px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--wood);}
.section--dark .svc-proc,.section--dark .svc-proc-list{border-color:rgba(236,230,218,.3);}
.section--dark .svc-proc__inner{border-left-color:rgba(236,230,218,.3);}
.section--dark .svc-proc__head{color:var(--bone);}
.section--dark .svc-proc__what,.section--dark .svc-proc__bh,.section--dark .svc-proc__warn,
.section--dark .svc-row__more{color:rgba(236,230,218,.8);}
.section--dark .svc-proc__list li,.section--dark .svc-proc__drugs{color:var(--bone);}
.section--dark .svc-fact,.section--dark .svc-panel{background:rgba(236,230,218,.08);}
.section--dark .svc-fact__v{color:var(--bone);}
.section--dark .svc-part{border-color:rgba(236,230,218,.3);}
@media(max-width:760px){
  .svc-lead{grid-template-columns:minmax(0,1fr);gap:16px;}
  /* Кадр 3:2 срезал у вертикальных снимков голову врача — на телефоне
     фото и так во всю ширину, поэтому даём ему высоту и режем меньше. */
  .svc-proc__figure img{aspect-ratio:4/5;object-position:50% 32%;}
  .svc-panel{padding:14px 15px;}
}
.section--dark .svc-proc__warn{background:rgba(236,230,218,.08);}
.svc-row__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.svc-row__tags span{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;line-height:1.35;color:var(--ink);}
/* Контекстные ответы вместо общей секции «Частые вопросы». */
.svc-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.65;color:var(--wood);max-width:70ch;}
.svc-note strong{color:var(--ink);font-weight:500;}
.svc-note + .svc-note{margin-top:10px;padding-top:0;border-top:0;}
.svc-note--actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:0;border-top:0;}
.svc-note--actions .btn{padding:10px 18px;font-size:11px;letter-spacing:.12em;}
.section--dark .svc-row,.section--dark .svc-row:first-of-type{border-color:rgba(236,230,218,.3);}
.section--dark .svc-row__tags span{border-color:rgba(236,230,218,.32);color:var(--bone);}
.section--dark .svc-row__note,.section--dark .svc-note{color:rgba(236,230,218,.84);}
.section--dark .svc-note{border-top-color:rgba(236,230,218,.24);}
.section--dark .svc-note strong{color:var(--bone);}

/* Видеогид продолжает редакционный ритм каталога: без превью и карточек,
   только тонкие индексированные строки внутри раскрытой категории. */
.svc-video-guide{margin:24px 0 2px;border-top:1px solid var(--line-strong);
  border-top-color:color-mix(in srgb,var(--accent) 56%,var(--line));}
.svc-video-guide__label{margin:0;padding:13px 0 9px;font-size:10px;font-weight:500;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);}
.svc-video-guide__list{margin:0;padding:0;list-style:none;}
.svc-video-guide__list li{border-top:1px solid var(--line);}
.svc-video-guide__item{display:grid;grid-template-columns:42px minmax(0,1fr) auto 44px;align-items:center;
  gap:clamp(8px,1.4vw,20px);min-height:52px;padding:4px 0;color:var(--ink);
  transition:background-color .25s ease,color .25s ease,padding .3s var(--ease);}
.svc-video-guide__item:hover,.svc-video-guide__item:focus-visible{padding-left:8px;background:var(--accent-soft);color:var(--ink);}
.svc-video-guide__item:focus-visible{outline-color:var(--ink);outline-offset:-2px;}
.svc-video-guide__index,.svc-video-guide__duration{font-size:10px;line-height:1;letter-spacing:.14em;color:var(--ink);}
.svc-video-guide__title{min-width:0;overflow-wrap:anywhere;font-family:var(--font-display);font-size:clamp(14px,1.2vw,16px);line-height:1.35;}
.svc-video-guide__duration{white-space:nowrap;}
.svc-video-guide__play{display:grid;place-items:center;width:30px;height:30px;justify-self:end;
  border:1px solid currentColor;border-radius:50%;font-size:9px;line-height:1;padding-left:1px;}

/* Нативный dialog остаётся в тёмной эспрессо-гамме на обоих направлениях;
   их разница сохраняется в акценте --accent. */
.service-video-dialog{width:min(1080px,calc(100vw - 32px));max-width:1080px;
  max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);
  margin:auto;padding:0;border:1px solid rgba(236,230,218,.32);
  border-color:color-mix(in srgb,var(--accent) 48%,transparent);border-radius:6px;
  overflow:auto;background:var(--coal);color:var(--bone);box-shadow:0 28px 80px rgba(12,9,7,.38);}
.service-video-dialog::backdrop{background:rgba(12,9,7,.78);backdrop-filter:blur(3px);}
.service-video-dialog[open]{animation:serviceVideoDialogIn .38s var(--ease) both;}
@keyframes serviceVideoDialogIn{from{opacity:0;transform:translateY(12px) scale(.992);}to{opacity:1;transform:none;}}
.service-video-dialog__panel{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;
  gap:14px 18px;padding:clamp(20px,3vw,34px);}
.service-video-dialog__index{grid-column:1;grid-row:1;font-size:10px;line-height:1;letter-spacing:.2em;color:var(--bone);}
.service-video-dialog h2{grid-column:2;grid-row:1;margin:0;font-family:var(--font-display);font-size:clamp(18px,2vw,27px);
  font-weight:300;line-height:1.22;color:var(--bone);}
.service-video-dialog__close{grid-column:3;grid-row:1;display:grid;place-items:center;min-width:44px;min-height:44px;
  padding:0;border:1px solid rgba(236,230,218,.32);border-radius:50%;background:transparent;color:var(--bone);
  cursor:pointer;font-size:24px;line-height:1;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.service-video-dialog__close:hover,.service-video-dialog__close:focus-visible{outline-color:var(--bone);border-color:var(--accent);background:var(--accent);color:var(--coal);}
.service-video-dialog video{grid-column:1/-1;display:block;width:100%;max-width:100%;aspect-ratio:16/9;
  object-fit:contain;background:#0d0c0b;}
/* Числовой пульт продолжает ритм крупных модулей сайта: тонкие
   костяные линии, равные ячейки скоростей и никаких пилюль. */
.service-video-dialog__controls{grid-column:1/-1;display:grid;
  grid-template-columns:minmax(72px,auto) auto minmax(0,1fr) auto minmax(72px,auto);
  align-items:stretch;min-width:0;border:1px solid color-mix(in srgb,var(--bone) 32%,transparent);
  border-radius:2px;overflow:hidden;background:var(--coal);color:var(--bone);font-size:11px;line-height:1;}
.service-video-dialog__controls > [data-video-skip],.service-video-dialog__speeds [data-video-speed]{
  min-width:44px;min-height:44px;margin:0;padding:0 12px;border:0;border-radius:0;
  background:transparent;color:var(--bone);cursor:pointer;font-family:var(--font-display);
  font-variant-numeric:tabular-nums;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;}
.service-video-dialog__controls > [data-video-skip="10"]{border-left:1px solid color-mix(in srgb,var(--bone) 24%,transparent);}
.service-video-dialog__controls output{display:grid;place-items:center;min-height:44px;padding:0 12px;
  border-left:1px solid color-mix(in srgb,var(--bone) 24%,transparent);color:var(--bone);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.service-video-dialog__controls [data-video-seek]{width:100%;min-width:0;height:44px;margin:0;padding:0 12px;
  border:0;border-left:1px solid color-mix(in srgb,var(--bone) 24%,transparent);border-radius:0;
  background:transparent;accent-color:var(--accent);cursor:pointer;}
.service-video-dialog__speeds{grid-column:1/-1;grid-row:2;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));min-width:0;border-top:1px solid color-mix(in srgb,var(--bone) 32%,transparent);}
.service-video-dialog__speeds [data-video-speed]{padding:0 8px;border-right:1px solid color-mix(in srgb,var(--bone) 24%,transparent);
  font-size:17px;font-weight:300;letter-spacing:.02em;}
.service-video-dialog__speeds [data-video-speed]:last-child{border-right:0;}
.service-video-dialog__controls > [data-video-skip]:not(:disabled):hover,
.service-video-dialog__controls > [data-video-skip]:not(:disabled):focus-visible,
.service-video-dialog__speeds [data-video-speed]:not(:disabled):hover,
.service-video-dialog__speeds [data-video-speed]:not(:disabled):focus-visible{background:var(--bone);color:var(--coal);}
.service-video-dialog__controls > [data-video-skip]:focus-visible,
.service-video-dialog__speeds [data-video-speed]:focus-visible,
.service-video-dialog__controls [data-video-seek]:focus-visible{outline:2px solid var(--bone);outline-offset:-3px;}
.service-video-dialog__speeds [data-video-speed][aria-pressed="true"]{background:var(--bone);color:var(--coal);
  box-shadow:inset 0 -4px 0 var(--accent);}
.service-video-dialog__speeds [data-video-speed][aria-pressed="true"]:focus-visible{
  outline:2px solid var(--coal);outline-offset:-3px;}
.service-video-dialog__controls button:disabled{opacity:.42;cursor:not-allowed;}
.service-video-dialog__controls [data-video-seek]:disabled{opacity:.42;cursor:not-allowed;}
.service-video-dialog__direct{grid-column:1/-1;display:inline-flex;align-items:center;justify-self:start;min-height:44px;
  border-bottom:1px solid currentColor;color:var(--bone);font-size:11px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;}
.service-video-dialog__direct:hover,.service-video-dialog__direct:focus-visible{outline-color:var(--bone);color:var(--bone);}

@media(max-width:760px){
  .service-video-dialog{width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);border-radius:4px;}
  .service-video-dialog__panel{grid-template-columns:30px minmax(0,1fr) 44px;gap:10px 8px;padding:16px 14px 18px;}
  .service-video-dialog h2{font-size:clamp(16px,5vw,20px);}
  .service-video-dialog__controls{grid-template-columns:repeat(6,minmax(0,1fr));font-size:10px;}
  .service-video-dialog__controls [data-video-current]{grid-column:1;grid-row:1;padding:0 2px;border-left:0;}
  .service-video-dialog__controls [data-video-seek]{grid-column:2/6;grid-row:1;padding-inline:8px;}
  .service-video-dialog__controls [data-video-duration]{grid-column:6;grid-row:1;padding:0 2px;}
  .service-video-dialog__controls > [data-video-skip]{grid-row:2;padding:0;border-top:1px solid color-mix(in srgb,var(--bone) 32%,transparent);font-size:10px;}
  .service-video-dialog__controls > [data-video-skip="-10"]{grid-column:1;}
  .service-video-dialog__controls > [data-video-skip="10"]{grid-column:2;}
  .service-video-dialog__speeds{grid-column:3/-1;grid-row:2;border-left:1px solid color-mix(in srgb,var(--bone) 24%,transparent);}
  .service-video-dialog__speeds [data-video-speed]{padding:0;font-size:14px;}
  .svc-video-guide{margin-top:20px;}
  .svc-video-guide__item{grid-template-columns:30px minmax(0,1fr) auto 40px;gap:8px;min-height:52px;padding-right:60px;}
  .svc-video-guide__title{font-size:14px;}
  .svc-video-guide__play{width:30px;height:30px;}
}

@media(max-width:380px){
  .svc-video-guide__item{grid-template-columns:30px minmax(0,1fr) 40px;grid-template-rows:auto auto;
    gap:3px 8px;min-height:52px;padding-right:60px;}
  .svc-video-guide__index{grid-column:1;grid-row:1;}
  .svc-video-guide__title{grid-column:2;grid-row:1;}
  .svc-video-guide__duration{grid-column:2;grid-row:2;}
  .svc-video-guide__play{grid-column:3;grid-row:1/3;align-self:center;}
  .svc-video-guide__item:hover,.svc-video-guide__item:focus-visible{padding-left:0;}
  .service-video-dialog__controls{font-size:9px;}
  .service-video-dialog__controls > [data-video-skip]{font-size:9px;letter-spacing:-.01em;}
  .service-video-dialog__speeds [data-video-speed]{font-size:13px;}
}

@media(prefers-reduced-motion:reduce){
  .service-video-dialog[open]{animation:none;}
  .service-video-dialog__controls button{transition:none;}
  .svc-video-guide__item{transition:none;}
}

/* ── Врачи ── */
/* Раньше линии сетки рисовались фоном контейнера через gap:1px — незаполненные
   ячейки последнего ряда превращались в серые прямоугольники. Линии перенесены
   на сами карточки, поэтому «хвост» ряда теперь просто пустой. */
/* Четыре карточки в ряд: врачей восемь, и на широком экране сетка
   встаёт двумя полными рядами без дыры в конце. Раньше стояло
   auto-fill, и на 1440 получалось пять колонок — последний ряд
   обрывался на трёх карточках. Ниже колонки убираем по ширине. */
.doctors-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);}
@media(max-width:1120px){.doctors-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:840px){.doctors-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:540px){.doctors-grid{grid-template-columns:minmax(0,1fr);}}
.doc-card{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  background:var(--paper);padding:26px 22px 22px;
  display:flex;flex-direction:column;gap:12px;transition:background .4s;
}
/* Подсветку даём мыши под курсором и клавиатуре, но не «залипшему» фокусу:
   после клика по карточке и закрытия окна фокус возвращается на кнопку,
   и правило с :focus-within оставляло тёмный прямоугольник на карточке,
   с которой человек уже ушёл. */
.doc-card:hover,.doc-card:has(:focus-visible){background:var(--accent-soft);}
.doc-card--openable{cursor:pointer;}
.doc-card__photo{
  width:64px;height:64px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px;
}
.doc-card__spec{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--wood);}
.doc-card h3{font-size:17.5px;line-height:1.3;}
.doc-card p{margin:0;font-size:14px;line-height:1.5;color:var(--wood);}
.doc-card__qual{margin:0;font-size:13.5px;line-height:1.5;color:var(--wood);}
.doc-card__actions .btn{padding:9px 16px;font-size:11px;letter-spacing:.12em;}

/* «Подробнее» — подпись-ссылка, как было: она ведёт к тексту, а не к действию,
   и одинаковой кнопкой рядом с «Записаться» спорила с ней за внимание.
   Ряд с кнопкой прижат к низу, поэтому у соседей по сетке она на общей линии. */
.doc-card__more{
  margin-top:auto;padding:0 0 2px;border:0;background:none;cursor:pointer;
  align-self:flex-start;border-bottom:1px solid currentColor;
  font-family:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.doc-card__more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.doc-card__actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;}
/* Портреты уже кадрированы по лицу при сборке, поэтому кадр берём по центру:
   ручное смещение здесь снова увело бы головы вниз. */
.doc-card__photo--img{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 50%;border:1px solid var(--line-strong);}
@media(max-width:900px){ .doc-card__photo--img{width:112px;height:112px;} }

/* Окно профиля врача. Шире навигатора: тут длинные списки регалий,
   в узкой колонке они превращаются в лестницу из переносов. */
.doc-dialog{max-width:min(860px,94vw);}
.doc-dialog__panel{text-align:left;}
.doc-dialog__head{display:flex;gap:28px;align-items:center;margin-bottom:26px;}
/* В окне портрет крупный: карточка знакомит, а здесь человек рассматривает
   врача. Исходники клиники маленькие (до 373 px), поэтому 240 — предел,
   за которым начинает лезть мыло. */
.doc-dialog__photo{width:240px;height:240px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 50%;border:1px solid var(--line-strong);}
.doc-dialog__head h3{margin:0 0 6px;font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.6vw,30px);line-height:1.15;}
.doc-dialog__spec{margin:0;color:var(--wood);font-size:15px;line-height:1.5;}
.doc-dialog__exp{margin:6px 0 0;font-size:13px;letter-spacing:.06em;color:var(--accent);}
.doc-dialog__section{margin-top:22px;}
.doc-dialog__section h4{margin:0 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood);font-weight:500;}
.doc-dialog__section ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;list-style:disc;}
/* Глобальный сброс списков гасит маркеры, а здесь перечисление длинное:
   без точек регалии сливаются в сплошную стену текста. */
.doc-dialog__section li{list-style:disc;}
.doc-dialog__section li.doc-dialog__sub{list-style:none;margin-left:-4px;color:var(--wood);font-size:14.5px;}
.doc-dialog__section li.doc-dialog__sub::before{content:"— ";}
.doc-dialog__section li{font-size:15px;line-height:1.55;}
.doc-dialog__documents{margin-top:24px;padding:18px;border:1px solid var(--line-strong);background:var(--accent-soft);}
.doc-dialog__documents h4{margin:0 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood);font-weight:500;}
.doc-dialog__document-list{display:grid;gap:8px;}
.doc-dialog__document{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s;}
.doc-dialog__document:hover{border-color:var(--accent);background:#fff;}
.doc-dialog__document:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.doc-dialog__document-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.doc-dialog__document-copy strong{font-size:14px;font-weight:500;line-height:1.35;}
.doc-dialog__document-copy small{font-size:12px;line-height:1.35;color:var(--wood);}
.doc-dialog__document-arrow{flex:0 0 auto;font-size:18px;color:var(--accent);}
.doc-dialog__actions{margin-top:28px;}
@media(max-width:760px){
  .doc-dialog__head{flex-direction:column;gap:14px;}
  .doc-dialog__photo{width:200px;height:200px;align-self:center;}
  .doc-dialog__section li{font-size:14.5px;}
  .doc-dialog__documents{margin-top:20px;padding:14px;}
  .doc-dialog__document{padding:11px 12px;gap:12px;}
}

/* ── Технологии / sticky ── */
.tech-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,90px);align-items:start;}
.tech-sticky{position:sticky;top:calc(var(--header-h) + 30px);}
.tech-list{border-top:1px solid rgba(236,230,218,.2);}
.tech-item{padding:24px 0;border-bottom:1px solid rgba(236,230,218,.2);}
.tech-item strong{font-family:var(--font-display);font-size:clamp(20px,2.4vw,30px);line-height:1.15;display:block;}
.tech-item p{margin:6px 0 0;font-size:14px;line-height:1.55;opacity:.85;max-width:56ch;}
@media(max-width:900px){.tech-grid{grid-template-columns:1fr;}.tech-sticky{position:static;}}

/* ── Отзывы ── */
/* auto-fit, не auto-fill: линии рисует фон-подложка сквозь зазор в 1px,
   и пустая четвёртая колонка при трёх отзывах читалась серым прямоугольником. */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);}
.review-card{background:var(--paper);padding:26px 22px;margin:0;}
.review-card p{margin:0 0 12px;}
.review-card__meta{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.review-card__foot{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.08em;color:var(--wood);}
.reviews__more{display:flex;justify-content:center;margin-top:clamp(20px,3vw,32px);}
/* Шапка блока: надстрочник слева, стрелки листания справа. Стрелки
   показывает js/main.js и только когда лента реально длиннее экрана —
   на десктопе все отзывы стоят в один ряд, листать там нечего. */
.reviews__head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.reviews__head .eyebrow{margin-bottom:1.6em;}
.reviews__nav{display:flex;gap:8px;margin-bottom:1.6em;}
.reviews__nav[hidden]{display:none;}
.reviews__nav button{display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line-strong);border-radius:50%;background:transparent;
  color:var(--ink);font-size:17px;line-height:1;cursor:pointer;
  transition:background var(--ease),color var(--ease),opacity var(--ease);}
.reviews__nav button:hover:not(:disabled){background:var(--ink);color:var(--bone);}
.reviews__nav button:disabled{opacity:.3;cursor:not-allowed;}
/* 12.09: на телефоне отзывы шли колонкой сверху вниз и растягивали
   страницу на несколько экранов. Здесь это лента вбок со снапом:
   один отзыв — один экран, дальше пальцем или стрелками. */
@media(max-width:900px){
  .reviews-grid{display:flex;gap:12px;background:none;border:0;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
  .reviews-grid::-webkit-scrollbar{display:none;}
  .review-card{flex:0 0 min(84%,340px);scroll-snap-align:start;scroll-snap-stop:always;
    border:1px solid var(--line-strong);border-radius:14px;}
  /* надстрочник на телефоне переносится в две строки — стрелки ужимаем,
     иначе они выдавливают его в три */
  .reviews__nav button{width:38px;height:38px;font-size:15px;}
  .reviews__head{align-items:flex-start;gap:10px;}
  .path__aside{gap:10px;}
  .path__nav button{width:38px;height:38px;font-size:15px;}
}

/* ── Цены ── */
.prices__blocks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);}
/* Один блок цен (косметология) растягивается на оба столбца — иначе справа пустота */
.prices__blocks > .price-block:only-child{grid-column:1 / -1;}
.price-block{border:1px solid var(--line-strong);padding:clamp(22px,3vw,40px);background:var(--milk);}
.price-block h3{font-family:var(--font-display);font-size:clamp(19px,1.9vw,25px);line-height:1.2;margin-bottom:8px;}
.price-block__date{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--wood);}
.price-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px;}
.price-table th{text-align:left;font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);}
.price-table th,.price-table td{padding:12px 4px;border-bottom:1px solid var(--line);}
.price-table__empty{color:var(--wood);font-style:italic;}
.price-block__actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
@media(max-width:900px){.prices__blocks{grid-template-columns:1fr;}}

/* ── Документы (тёмная секция) ── */
/* ── Подвал: документы, лицензия, правовые ссылки ───────────────────
   Отдельной секции «Документы и лицензии» в потоке страницы больше нет —
   доступ к файлам живёт здесь и в меню, так что и пользователь, и
   поисковик их по-прежнему находят. */
.site-footer{background:var(--coal);color:var(--bone);padding:clamp(44px,5vw,72px) var(--gutter) 28px;}
.site-footer__grid{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(26px,4vw,68px);align-items:start;
}
.site-footer h2{font-family:var(--font-display);font-size:clamp(19px,1.9vw,25px);line-height:1.2;margin-bottom:12px;}
.site-footer__bottom{
  max-width:var(--maxw);margin:clamp(28px,4vw,48px) auto 0;padding-top:20px;
  border-top:1px solid rgba(236,230,218,.2);display:flex;flex-wrap:wrap;gap:14px 24px;
  justify-content:space-between;align-items:flex-start;font-size:12px;color:rgba(236,230,218,.7);
}
@media(max-width:820px){.site-footer__grid{grid-template-columns:1fr;}}
/* Документы уехали во вкладку «Пациентам»: в подвале остались только
   оговорки, и отделять их сверху уже не от чего. */
.site-footer--slim{padding-top:clamp(30px,3.4vw,46px);}
.site-footer--slim .site-footer__bottom{margin-top:0;border-top:0;padding-top:0;}
.docs__grid{border-top:1px solid rgba(236,230,218,.25);}
.doc-item{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(236,230,218,.25);
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 4px;
  font-size:15px;text-align:left;cursor:pointer;transition:padding-left .4s var(--ease),color .3s;
}
.doc-item:hover{padding-left:16px;color:var(--gold);}
.doc-item span:last-child{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;white-space:nowrap;}
.doc-license{border:1px solid rgba(236,230,218,.25);padding:clamp(20px,3vw,30px);}
.doc-license h3{font-family:var(--font-display);font-size:clamp(17px,1.7vw,22px);line-height:1.25;letter-spacing:.04em;margin-bottom:8px;}
.disclaimer{font-size:12.5px;line-height:1.55;opacity:.72;max-width:70ch;margin-top:18px;}
/* ── Будущие направления / операционная ── */
.future-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
/* Карточки — только объявление, без формы, поэтому крупнее и просторнее */
.future-card{background:var(--paper);padding:clamp(32px,3.6vw,52px);}
.future-card h3{font-family:var(--font-display);font-size:clamp(22px,2.4vw,34px);line-height:1.18;margin:16px 0 12px;}
.future-card p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--wood);max-width:34ch;}
/* На тёмной секции названия и метка «скоро» тонули: серо-коричневый текст
   давал контраст около 2:1. Здесь всё переведено в костяную гамму (≈9:1)
   и золото метки (≈6:1) — оба выше порога WCAG AA. */
.section--dark .future-grid{background:rgba(236,230,218,.22);border-color:rgba(236,230,218,.22);}
/* Непрозрачный фон обязателен: подложка сетки (она же рисует линии в зазоре 1px)
   светлая, и сквозь полупрозрачную карточку фон уходил в серый rgb(79,75,70) —
   подпись «Скоро в клинике» падала до 2,8:1, ниже WCAG AA. */
.section--dark .future-card{background:color-mix(in srgb,var(--coal) 86%,#ffffff);}
.section--dark .future-card h3{color:var(--bone);}
.section--dark .future-card p{color:rgba(236,230,218,.82);}
.section--dark .soon-badge{color:var(--gold);}
.subscribe-form{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}
.subscribe-form input{
  flex:1;min-width:180px;background:none;border:0;border-bottom:1px solid var(--line-strong);
  padding:10px 2px;font-family:inherit;font-size:14px;outline:none;color:inherit;
}
.subscribe-form button{flex-shrink:0;}
/* На тёмной секции «песочная» линия --line-strong не видна: поле подписки
   в блоке операционной выглядело как обычный текст без границы. */
.section--dark .subscribe-form input{border-bottom-color:rgba(236,230,218,.42);}
.section--dark .subscribe-form input::placeholder{color:rgba(236,230,218,.6);}

/* ── Контакты ── */
.contacts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);margin-bottom:clamp(36px,6vh,72px);}
.clinic-card{background:var(--paper);padding:clamp(24px,3vw,40px);font-style:normal;margin:0;}
.clinic-card h3{font-family:var(--font-display);font-size:clamp(17px,1.7vw,22px);line-height:1.25;margin-bottom:12px;}
.clinic-card a{text-decoration:underline;text-underline-offset:3px;}
.clinic-card__map{margin-top:18px;}
.clinic-card__metro{display:inline-block;max-width:28ch;font-size:11px;line-height:1.55;letter-spacing:.13em;text-transform:uppercase;color:var(--wood);}
.map-link{font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;}
.map-link--disabled{opacity:.45;border:0;}
.placeholder-slot{color:var(--wood);font-style:italic;}
/* Карточка соседнего направления шла впритык к ряду чипов — рамка касалась их
   нижнего края и блок читался как обрезанный. */
.uao{margin-top:clamp(26px,4vw,44px);border:1px solid var(--line-strong);padding:clamp(26px,4vw,52px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:24px;align-items:center;background:var(--milk);}
.uao h3{font-family:var(--font-display);font-size:clamp(20px,2.2vw,28px);line-height:1.2;margin:8px 0 12px;}
.uao__text p{max-width:56ch;}
.uao .btn{justify-self:start;}
@media(max-width:800px){.uao{grid-template-columns:1fr;}}
/* Иерархия: h1 направления остаётся крупнейшим, заголовки секций заметно мельче,
   иначе на странице десяток одинаковых по весу «дисплеев» и читать не за что зацепиться. */
.section__head h2.display{font-size:clamp(25px,2.5vw,33px);}

/* ── Заголовок каталога: половинки съезжаются ─────────────────────────
   От сцены-телескопа остался один жест: «Наши» приходит слева, «услуги»
   справа, и строка собирается, пока секция поднимается по экрану. Сцены
   на 175vh, летящих кадров и ожидания каталог больше не требует.
   Начальный разлёт ставит main.js: без скриптов строка обязана стоять
   на месте, а не висеть за краями. Кегль здесь крупнее даже h1
   направления: это единственная строка на всю ширину поля, и мелкой
   она читается как подпись, а не как вход в главный раздел.
   overflow-x:clip прячет вылет за край страницы и, в отличие от
   overflow:hidden, не делает из шапки контейнер прокрутки. */
.section__head--split{overflow-x:clip;
  /* Полоса во всю ширину экрана. Шапка вырывается из боковых полей
     секции отрицательными margin и возвращает их себе как padding:
     цвет доходит до краёв, а текст остаётся на общей сетке. Верхний
     отступ секции съеден тем же приёмом, чтобы полоса встала встык к
     предыдущему блоку и читалась как отбивка перед каталогом, а не
     как заголовок внутри него. */
  margin-inline:calc(var(--gutter) * -1);
  /* Вычитаем верхний отступ .dir-detail целиком — а не похожее число:
     у секции он берётся через max() с высотой шапки и на широком экране
     больше, из-за чего над полосой оставалась случайная щель фона.
     16.09: щель убрана. Пока полоса была тёмной, воздух отделял её от
     тёмного героя; теперь она светлая и цветом каталога, так что граница
     с героем видна сама, а кремовый зазор читался случайной линией
     третьего оттенка между двумя полями. */
  margin-top:calc(var(--detail-pad-top) * -1);
  margin-bottom:clamp(32px,4.2vw,58px);
  /* Полоса держится узкой: воздух вокруг строки — ровно чтобы буквы
     не касались краёв. Толстая полоса читалась как ещё один экран,
     а нужна отбивка. */
  padding:clamp(14px,1.6vw,24px) var(--gutter);
  /* Полоса светлая, буквы тёмные: чёрное поле сразу под тёмным героем
     давало два тяжёлых экрана подряд, а каталог под ним всё равно
     светлый. Своей заливки у полосы нет вовсе: она стоит внутри секции
     каталога и показывает её собственную подложку — так между полосой и
     списком под ней не появляется шва. Ровный цвет не годился: у
     косметологии каталог залит диагональным градиентом, и плашка одного
     тона расходилась с ним по всей ширине. */
  background:transparent;color:var(--ink);
  /* Слова съезжаются к середине полосы, а не к левому краю: у прижатой
     влево строки половина жеста уходила за кадр, и «Наши» появлялось
     почти собранным. Шапка обычно раскладывает заголовок и ссылку по
     краям — здесь ребёнок один, и его надо поставить в центр. */
  justify-content:center;text-align:center;
  /* Линию из .section__head здесь гасим. Под полосой сразу начинается
     каталог, и его первая строка приходит со своей верхней границей —
     две черты в двадцати пикселях друг от друга читались как ошибка
     вёрстки, а не как разделитель. Границу оставляем той, что
     принадлежит списку. */
  border-bottom:0;}
.split-title{display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(10px,1.4vw,20px);}
.split-title__word{display:inline-block;will-change:transform;}
.section__head h2.display.split-title{font-size:clamp(40px,7vw,104px);line-height:1.04;}
@media(prefers-reduced-motion:reduce){
  .split-title__word{transform:none !important;}
}
.disclaimer-final{font-size:12.5px;line-height:1.55;color:rgba(236,230,218,.7);margin:0;max-width:74ch;}

/* ── Модалка записи ── */
.modal{position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;padding:18px;}
.modal__backdrop{position:absolute;inset:0;background:rgba(24,21,18,.66);backdrop-filter:blur(6px);}
.modal__panel{
  position:relative;z-index:2;background:var(--paper);width:min(560px,100%);
  max-height:88vh;overflow-y:auto;padding:clamp(24px,4vw,44px);border-radius:2px;
  animation:modalIn .5s var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
.modal__close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-strong);background:none;font-size:18px;line-height:1;cursor:pointer;color:inherit;
}
.modal__panel h3{font-family:var(--font-display);font-size:clamp(18px,1.8vw,23px);line-height:1.25;margin:0 0 16px;padding-right:46px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);margin-bottom:6px;}
.field input{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line-strong);
  padding:10px 2px;font-family:inherit;font-size:15px;outline:none;color:inherit;border-radius:0;
}
.field input:focus{border-color:var(--accent);}
.form-note{font-size:12.5px;line-height:1.5;color:var(--wood);margin-top:12px;}
.form-note a{text-decoration:underline;}
/* Согласия — отдельными галочками, а не строкой мелким шрифтом под кнопкой:
   пассивное «отправляя форму, вы соглашаетесь» наличия согласия не доказывает. */
.form-consent{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:12.5px;line-height:1.5;color:var(--wood);cursor:pointer;}
.form-consent input{flex:none;width:17px;height:17px;margin-top:1px;accent-color:var(--accent);cursor:pointer;}
.form-consent a{text-decoration:underline;}
.form-consent--opt{opacity:.8;}
.mis-note,.muted{font-size:12px;color:var(--wood);}
.booking-steps{font-size:14px;line-height:1.55;color:var(--wood);padding-left:18px;margin:0 0 16px;}

/* ── Окно онлайн-записи (виджет ПрофСалона) ──
   Внутри рамки — страница чужого домена: её оформление нам недоступно,
   поэтому «наше» здесь только обрамление — затемнение, бумажная полоса
   с названием и крестик, как у остальных окон сайта. Ширину держим
   узкой: виджет свёрстан под колонку и на широком поле растягивает
   строки расписания. */
.pf-modal{position:fixed;inset:0;z-index:2550;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,32px);opacity:0;transition:opacity .35s var(--ease);}
.pf-modal.is-open{opacity:1;}
.pf-modal__backdrop{position:absolute;inset:0;background:rgba(24,21,18,.66);backdrop-filter:blur(6px);}
.pf-modal__panel{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--paper);
  width:min(560px,100%);height:min(780px,100%);overflow:hidden;border-radius:2px;
  transform:translateY(22px);transition:transform .45s var(--ease);}
.pf-modal.is-open .pf-modal__panel{transform:none;}
.pf-modal__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;
  padding:14px 14px 14px 20px;border-bottom:1px solid var(--line-strong);}
.pf-modal__bar span{font-family:var(--font-display);font-size:16px;line-height:1.2;}
.pf-modal__close{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);
  background:none;font-size:18px;line-height:1;cursor:pointer;color:inherit;}
/* Виджет подтягивает свои шрифты и цвета; фон под ним белый, поэтому
   бумажную подложку панели он перекрывает — так и задумано. */
.pf-modal__frame{flex:1 1 auto;min-height:0;background:#fff;}
.pf-modal__frame iframe{display:block;width:100%;height:100%;border:0;}
@media(max-width:640px){
  /* На телефоне запись занимает экран целиком: внутри виджета свой длинный
     скролл по услугам и датам, и обрезать его полями негде. */
  .pf-modal{padding:0;}
  .pf-modal__panel{width:100%;height:100%;border-radius:0;}
}

/* ── Поиск ── */
.search-panel{position:fixed;inset:0;z-index:2400;display:none;}
.search-panel.is-open{display:block;}
.search-panel__backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--paper) 97%,transparent);backdrop-filter:blur(10px);border:0;width:100%;cursor:default;}
.search-panel__inner{
  position:relative;z-index:2;max-width:780px;margin:0 auto;
  padding:calc(var(--header-h) + 4vh) var(--gutter) 40px;
  max-height:100vh;max-height:100svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.search-panel__close{
  position:absolute;top:calc(var(--header-h) - 12px);right:var(--gutter);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);
  font-size:18px;line-height:1;cursor:pointer;color:var(--ink);transition:background .3s,transform .3s;
}
.search-panel__close:hover{background:var(--accent-soft);transform:rotate(90deg);}
.search-panel__input{
  width:100%;background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  font-family:var(--font-display);font-size:clamp(20px,2.8vw,34px);line-height:1.25;padding:10px 2px;outline:none;color:var(--ink);
}
.search-panel__input:focus{border-bottom-width:2px;}
/* Штатный «крестик» Chrome в input[type=search] синий и выбивается из палитры. */
.search-panel__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;cursor:pointer;
  background:currentColor;opacity:.45;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;}
.search-panel__input::-webkit-search-cancel-button:hover{opacity:.9;}
.search-panel__hint{font-size:12.5px;line-height:1.5;color:var(--wood);margin:14px 0 22px;max-width:60ch;}
/* Быстрые запросы: то, ради чего раньше стояла целая секция «с чем приходят». */
.search-quick{margin:0 0 26px;}
.search-quick__label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood);margin:0 0 10px;}
.search-quick__list{display:flex;flex-wrap:wrap;gap:8px;}
.search-quick button{
  background:none;border:1px solid var(--line-strong);border-radius:999px;padding:9px 17px;
  font-size:13.5px;color:var(--ink);cursor:pointer;transition:background .3s,border-color .3s;
}
.search-quick button:hover{border-color:var(--accent);background:var(--accent-soft);}
.search-results{display:flex;flex-direction:column;gap:8px;}
.search-hit{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border:1px solid var(--line-strong);padding:16px 20px;background:var(--paper);
  color:inherit;transition:background .3s,border-color .3s,padding-left .3s var(--ease);
}
.search-hit:hover{background:var(--accent-soft);border-color:var(--accent);padding-left:26px;}
.search-hit strong{display:block;font-size:16px;line-height:1.3;font-weight:400;}
.search-hit span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--wood);}
.search-hit em{font-style:normal;flex-shrink:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.search-empty{font-size:15px;line-height:1.6;color:var(--wood);}
/* Поиск отвечает ссылками. Тому, кто пришёл с вопросом, нужен собеседник:
   строка под быстрыми запросами и карточка в выдаче ведут к помощнику. */
.search-ask{font-size:13px;line-height:1.6;color:var(--wood);margin:0 0 22px;max-width:60ch;}
.search-ask-card{
  border:1px solid var(--line-strong);border-left:2px solid var(--accent);background:var(--milk);
  padding:16px 20px;margin:0 0 10px;
}
.search-ask-card p{font-size:14px;line-height:1.55;color:var(--wood);margin:0 0 12px;}
.search-ask-card .btn{margin:0;}
/* Компактная полоса «найти услугу» вместо прежней секции запросов. */
.search-band{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  border:1px solid var(--line-strong);padding:clamp(18px,2.2vw,26px) clamp(18px,2.6vw,32px);background:var(--milk);
}
.search-band p{margin:0;flex:1;min-width:220px;font-size:15px;line-height:1.55;color:var(--wood);}
.section--dark .search-band{background:rgba(236,230,218,.05);border-color:rgba(236,230,218,.28);}
.section--dark .search-band p{color:rgba(236,230,218,.82);}

/* ── Окно записи ПрофСалона ──────────────────────────────────────
   Их виджет ставит форму боковой панелью шириной 500px, прижатой к правому
   краю. На сайте окно записи всегда открывалось по центру поверх страницы,
   и боковая панель читается как чужеродный элемент. Возвращаем центр: их
   правила заданы по id и подключаются позже нашего файла, поэтому селектор
   с запасом по весу, иначе их height:100% побеждает при равной силе.
   Высоту ограничиваем экраном — форма внутри прокручивается сама. */
/* Затемнение вокруг окна виджет заливает чистым чёрным. На тёплом сайте это
   читается как провал, поэтому берём фирменный уголь. Слой наш, на нашей
   странице — в отличие от содержимого формы, его перекрасить можно. */
html body #profsalon_overlay{background:rgba(24,21,18,.82)!important;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
html body #profsalon_iframe{
  left:50%!important;right:auto!important;top:50%!important;
  transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px))!important;
  height:min(780px,calc(100vh - 56px))!important;
  border:0;border-radius:14px;
  box-shadow:0 30px 80px rgba(24,21,18,.45);
}

/* ── Ассистент ── */
.assistant-fab{
  position:fixed;right:18px;bottom:18px;z-index:1300;display:flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--bone);border:0;border-radius:999px;padding:13px 20px;
  font-size:11px;letter-spacing:.18em;cursor:pointer;box-shadow:0 10px 30px rgba(24,21,18,.3);
  transition:transform .4s var(--ease);
}
.assistant-fab:hover{transform:translateY(-3px);}
/* 18.09: кнопку помощника не замечали — на телефоне это просто тёмный кружок
   без подписи, и что за ним живёт, понять было нельзя. Добавлены две вещи:
   переливающийся ореол, который ловит взгляд движением, и всплывающая
   подсказка с названием. И то, и другое гасится при «уменьшении движения». */
/* Свечение живёт в box-shadow самой кнопки, а не в подложке: у кнопки
   position:fixed с z-index, она создаёт свой слой, и подложка с
   отрицательным z-index легла бы поверх её фона, обесцветив кружок. */
.assistant-fab{animation:fabGlow 4.6s var(--ease) infinite;}
/* Подсказка нужна только там, где кнопка — безымянный кружок. На широких
   экранах подпись «24/7» стоит прямо в кнопке, и всплывашка лишняя. */
.assistant-fab .fab-tip{display:none;}
@keyframes fabGlow{
  0%,100%{box-shadow:0 10px 30px rgba(24,21,18,.3),0 0 0 2px rgba(176,122,99,.42),0 0 16px 2px rgba(176,122,99,.30);}
  34%{box-shadow:0 10px 30px rgba(24,21,18,.3),0 0 0 2px rgba(171,143,96,.66),0 0 24px 5px rgba(171,143,96,.42);}
  67%{box-shadow:0 10px 30px rgba(24,21,18,.3),0 0 0 2px rgba(201,154,134,.62),0 0 24px 5px rgba(201,154,134,.40);}
}
/* Редкая волна поверх свечения: раз в несколько секунд от кнопки расходится
   кольцо. Пауза длинная, чтобы движение звало, а не мельтешило. */
.assistant-fab::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:fabPulse 4.6s var(--ease) infinite;
}
@keyframes fabPulse{
  0%,70%{box-shadow:0 0 0 0 rgba(176,122,99,.45);}
  90%{box-shadow:0 0 0 15px rgba(176,122,99,0);}
  100%{box-shadow:0 0 0 0 rgba(176,122,99,0);}
}
@media (prefers-reduced-motion:reduce){
  .assistant-fab{animation:none;box-shadow:0 10px 30px rgba(24,21,18,.3),0 0 0 2px rgba(176,122,99,.5);}
  .assistant-fab::before{animation:none;box-shadow:none;}
}
.assistant{
  position:fixed;right:18px;bottom:18px;z-index:2400;width:min(380px,calc(100vw - 36px));
  height:min(560px,calc(100vh - 60px));background:var(--paper);border:1px solid var(--line-strong);
  display:flex;flex-direction:column;border-radius:2px;overflow:hidden;
  animation:modalIn .45s var(--ease);box-shadow:0 24px 60px rgba(24,21,18,.28);
}
.assistant__head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--coal);color:var(--bone);
}
.assistant__head h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;}
.assistant__log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.msg{max-width:86%;padding:11px 14px;font-size:13.5px;line-height:1.55;border-radius:12px;white-space:pre-line;margin:0;}
.msg--bot{background:var(--accent-soft);align-self:flex-start;}
.msg--user{background:var(--ink);color:var(--bone);align-self:flex-end;}
.msg-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.msg-actions button{background:none;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:7px 13px;font-size:12px;cursor:pointer;}
.assistant__quick{display:flex;gap:6px;overflow-x:auto;padding:10px 14px;border-top:1px solid var(--line);}
.assistant__quick button{flex-shrink:0;background:none;border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;font-size:12.5px;cursor:pointer;color:var(--ink);}
.assistant__input{display:flex;border-top:1px solid var(--line);}
.assistant__input input{flex:1;border:0;background:none;padding:14px;font-family:inherit;font-size:14px;outline:none;color:inherit;}
.assistant__input button{background:none;border:0;font-size:20px;padding:0 18px;cursor:pointer;color:var(--accent);}
.assistant__limits{font-size:11.5px;line-height:1.45;color:var(--wood);padding:9px 14px;border-top:1px solid var(--line);margin:0;}
/* Заявка внутри переписки. Лежит в общей ленте сообщений, но во всю ширину:
   это не реплика, а форма, и узкий «пузырь» её только ломал бы. */
.asst-lead{align-self:stretch;background:var(--accent-soft);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:8px;}
.asst-lead__t{margin:0;font-size:13px;line-height:1.5;}
.asst-lead__f{border:1px solid var(--line-strong);border-radius:8px;background:var(--milk);padding:9px 11px;font-family:inherit;font-size:13.5px;color:inherit;outline:none;}
.asst-lead__f:focus{border-color:var(--accent);}
.asst-lead .form-consent{margin:0;font-size:12px;}
.asst-lead__btn{border:0;border-radius:999px;background:var(--accent);color:var(--milk);padding:10px 16px;font-size:12px;letter-spacing:.14em;font-family:inherit;cursor:pointer;}
.asst-lead__btn[disabled]{opacity:.55;cursor:default;}
.asst-lead__s{margin:0;font-size:12.5px;line-height:1.45;}
.asst-lead__s.is-err{color:#9d3b34;}
.asst-lead__s.is-ok{color:var(--accent);}

/* ── Toast ── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:2600;
  background:var(--coal);color:var(--bone);padding:14px 22px;border-radius:999px;
  font-size:13px;max-width:min(90vw,520px);text-align:center;opacity:0;transition:all .4s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0);}

/* юридические шаблонные страницы */
/* Юридические тексты живут в подвале свёрнутыми: страницу не удлиняют,
   из разметки не выпадают. Тон — светлый, подвал тёмный. */
.legal-stack{padding:0 var(--gutter) 8px;}
.legal-pages{border-top:1px solid rgba(236,230,218,.16);}
.legal-pages > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:15px 0;color:var(--bone);
}
.legal-pages > summary::-webkit-details-marker{display:none;}
.legal-pages > summary::after{
  content:"+";margin-left:auto;flex:0 0 auto;
  font-size:17px;line-height:1;color:rgba(236,230,218,.6);
  transition:transform .3s var(--ease);
}
.legal-pages[open] > summary::after{transform:rotate(45deg);}
.legal-pages > summary:hover::after{color:var(--bone);}
.legal-pages > summary h3{
  display:inline;margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(15px,1.25vw,17px);line-height:1.3;letter-spacing:0;text-transform:none;
}
.legal-pages > summary:focus-visible{outline:2px solid var(--bone);outline-offset:2px;}
.legal-placeholder{margin:0 0 18px;color:rgba(236,230,218,.62);font-style:italic;font-size:13px;letter-spacing:.04em;}

/* ─────────────────────────────────────────────
   Шапка над тёмным первым экраном.
   На странице стоматологии открывающая секция —
   тёмный разворот диптиха, и шапка до скролла
   лежит прямо на нём. Осветляем только её и
   только там; после скролла подложка светлая
   и всё возвращается к общим правилам.
   ───────────────────────────────────────────── */
body[data-page="dent"] .header:not(.is-scrolled){color:var(--bone);}
body[data-page="dent"] .header:not(.is-scrolled) .nav a{color:rgba(236,230,218,.8);}
body[data-page="dent"] .header:not(.is-scrolled) .nav a:hover{color:var(--bone);}
body[data-page="dent"] .header:not(.is-scrolled) .logo__mark{border-color:rgba(236,230,218,.45);}
body[data-page="dent"] .header:not(.is-scrolled) .logo:hover .logo__mark{background:var(--bone);color:var(--coal);border-color:var(--bone);}
body[data-page="dent"] .header:not(.is-scrolled) .dir-switch{border-color:rgba(236,230,218,.4);background:rgba(24,21,18,.42);}
body[data-page="dent"] .header:not(.is-scrolled) .dir-switch__btn{color:rgba(236,230,218,.72);}
body[data-page="dent"] .header:not(.is-scrolled) .dir-switch__btn.is-active{color:var(--coal);}

/* ─────────────────────────────────────────────
   Мобильная шапка: переключатель направлений
   шире экрана и выталкивал бургер за край —
   на узких экранах его прячем (переход на второе
   направление остаётся в меню и в кросс-полосе).
   ───────────────────────────────────────────── */
@media(max-width:640px){
  .dir-switch{display:none;}
  .header__inner{gap:12px;}
}

/* ─────────────────────────────────────────────
   Мобильная панель действий: запись и звонок
   всегда под пальцем. Только страницы направлений,
   только узкие экраны. Ассистент приподнят.
   ───────────────────────────────────────────── */
.mobile-cta{display:none;}
@media(max-width:760px){
  body.direction-page .mobile-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:850;
    display:flex;gap:1px;
    background:var(--line-strong);
    border-top:1px solid var(--line-strong);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mobile-cta .btn{
    flex:1;border-radius:0;border:0;margin:0;
    padding:15px 10px;font-size:10.5px;
  }
  .mobile-cta .btn--solid{background:var(--accent);color:var(--milk);}
  .mobile-cta .btn--ghost{background:var(--milk);color:var(--ink);}
  body.direction-page{padding-bottom:52px;}
  body.direction-page .assistant-fab{bottom:74px;}
  body.direction-page .assistant{bottom:132px;}
  /* На телефоне плашка «24/7» шириной 120 px ложилась поверх кнопок в карточках.
     Оставляем круглую иконку: подпись есть в aria-label, перекрытие минимально. */
  .assistant-fab{width:52px;height:52px;padding:0;justify-content:center;gap:0;}
  .assistant-fab span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  /* Подпись на телефоне не помещается рядом с иконкой — она перекрывала бы
     кнопки в карточках. Поэтому название всплывает слева ненадолго: показать,
     что за кружком помощник, и уйти, освободив место. Один показ за загрузку
     страницы, ничего не запоминаем — в хранилище браузера лезть не за чем.
     Подсказка декоративная и продублирована в aria-label самой кнопки. */
  .assistant-fab .fab-tip{
    display:block;position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
    padding:7px 12px;border-radius:999px;white-space:nowrap;
    background:var(--ink);color:var(--bone);font-size:11px;letter-spacing:.14em;
    box-shadow:0 8px 22px rgba(24,21,18,.34);
    opacity:0;pointer-events:none;animation:fabTip 9s var(--ease) 2.5s both;
  }
  @keyframes fabTip{
    0%{opacity:0;transform:translate(8px,-50%);}
    6%,52%{opacity:1;transform:translate(0,-50%);}
    62%,100%{opacity:0;transform:translate(8px,-50%);}
  }
  @media (prefers-reduced-motion:reduce){
    .assistant-fab .fab-tip{animation:none;opacity:0;}
  }
}

/* ─────────────────────────────────────────────
   Шапка: восьмой пункт «Пациентам».
   1. Пункт меню никогда не переносится внутри себя
      («О клинике» ломалось на две строки).
   2. Зазор плавающий — на средних экранах ужимается.
   3. В полосе 1121–1400px прячем переключатель
      направлений (он съедает 280px): навигация важнее,
      а перейти в соседнее направление можно из меню
      и из полосы после блока записи. Ниже 1120px
      навигация и так уходит в бургер, и переключатель
      возвращается на своё место.
   ───────────────────────────────────────────── */
.nav a{white-space:nowrap;}
.nav{gap:clamp(10px,1vw,18px);}
@media(min-width:1121px) and (max-width:1400px){
  .dir-switch{display:none;}
}

/* ── Телефон: чиним раскладку ───────────────────────────────── */

/* Бургер прижимаем вправо. До 640px переключатель направлений скрыт,
   а вместе с ним пропадал его margin-left:auto — группа уезжала к логотипу. */
@media(max-width:640px){
  .header__right{margin-left:auto;}
  /* На телефоне в шапке тесно: иконки соцсетей ужимаем и сближаем, чтобы
     логотип, поиск, три ссылки и бургер умещались в 390px без переноса. */
  .header__msgs{gap:4px;}
  .hmsg{width:26px;height:26px;}
  .hmsg svg{width:13px;height:13px;}
}

/* Заголовок секции: длинное слово («стоматологию») в одну строку с соседями
   не помещается, и страница становилась шире экрана. */
@media(max-width:640px){
  .section__head{flex-wrap:wrap;align-items:flex-start;gap:12px 24px;}
  .section__head > *{min-width:0;}
}

/* Строка документа: название и метка «после согласования» в одну строку не
   влезают. Раньше порог был 360px — список жил в подвале, и три строки в
   названии терпели. Теперь это отдельный экран во вкладке «Пациентам»,
   поэтому метку уводим под название на всех телефонах. */
@media(max-width:600px){
  .doc-item{flex-wrap:wrap;gap:4px 16px;padding:14px 0;}
  .doc-item > span:first-child{min-width:0;flex:1 0 100%;}
  .doc-item > span:last-child{font-size:10.5px;opacity:.6;}
}

/* Пальцевые цели: на тач-ширинах доводим иконки шапки и меню до 44px */
@media(max-width:1120px){
  .search-toggle,.burger{min-width:44px;min-height:44px;align-items:center;justify-content:center;}
  .menu-close{min-height:44px;}
}

/* iOS увеличивает страницу при фокусе на поле мельче 16px и обратно уже не
   отматывает. На тач-ширинах поднимаем кегль полей до 16px. */
@media(max-width:760px){
  .field input,.subscribe-form input,.assistant__input input,.search-panel__input,.asst-lead__f{font-size:16px;}
  /* Палец не попадает в 36 px: на телефоне кнопкам даём 44 px по высоте —
     минимум, ниже которого промахи становятся системой. */
  .btn,.svc-cta a,.svc-cta button{min-height:44px;}
  /* Отдельно стоящие текстовые ссылки (телефон, почта, карта, «все отзывы»)
     широкие, но всего ~20 px в высоту — добираем вертикальными отступами,
     чтобы палец попадал в саму строку, а не рядом с ней. */
  .clinic-card a[href^="tel:"],.clinic-card a[href^="mailto:"],
  .map-link,.linklike,.logo,.gate__foot a{display:inline-flex;align-items:center;min-height:44px;}
}

/* В модалке записи первый абзац подтекал под круглую кнопку закрытия. */
#bookingModal #bookingModalBody > *:first-child{padding-right:46px;}

/* Поиск на телефоне: панель занимает весь экран, крестик всегда в пределах
   большого пальца, подсказки не растягивают страницу. */
@media(max-width:640px){
  .search-panel__inner{padding-top:calc(var(--header-h) + 16px);}
  /* fixed, а не absolute: список результатов длиннее экрана, и при прокрутке
     крестик уезжал вверх вместе с ним — на телефоне закрыть поиск было нечем
     (клавиатуры с Escape нет, подложки под пальцем тоже). */
  .search-panel__close{position:fixed;top:12px;right:12px;z-index:5;background:var(--milk);}
  .search-hit{flex-direction:column;gap:6px;}
  .search-hit em{align-self:flex-start;}
}

/* Блокировка прокрутки под открытой панелью и модалками. */
body.is-locked{overflow:hidden;}

/* Поле карточек: перспектива на родителе, дети летят по оси Z. */

/* Комбо-карточка: фото услуги с подписью-пилюлей внахлёст снизу.
   Летит как обычная карточка — механике всё равно, что внутри. */

/* Подпись живёт внутри кадра. Пока она свисала под плиткой, соседний
   кадр в полёте наезжал на неё и срезал слова. */

/* Кольцо позиций вокруг центра: середина остаётся под заголовок. */

/* Раскладка поля: два пояса сверху и два снизу, середина пустая —
   там сходится заголовок. Разнобой по высоте намеренный, ряд не должен
   читаться линейкой; проверяли на пересечения замером рамок в браузере. */

/* ещё два кадра в середину: слева над строкой заголовка и справа под ней */

/* Без анимации: одна статичная сцена, карточки не мельтешат. */

@media(max-width:900px){
  
  
  
  
  
  /* Подпись уходит внутрь кадра. Снаружи она висела на 30vw-карточке
     одной нерушимой строкой: «Профессиональная гигиена» шире самой
     плитки, поэтому названия упирались в край экрана и прятались под
     соседними карточками — в полёте поле сортируется по глубине, а не
     по порядку в разметке, и подпись перекрывала любая соседка ближе
     к камере. Внутри кадра подпись живёт по своей ширине: видно фото —
     видно и название. */
  
  
  /* Раскладка поля на телефоне: три колонки сверху и три снизу, между
     ними коридор для заголовка. Карточки больше не наезжают друг на
     друга — раньше половина названий пряталась под соседним кадром, а
     крайние свисали за экран. Разброс держим лёгким сдвигом рядов,
     чтобы поле не читалось таблицей. */
  /* сбрасываем десктопные привязки: половина карточек там стояла по
     bottom/right, и с новыми top/left карточка растянулась бы между
     двумя краями. */
  
  /* «Биоревитализация» — одно длинное слово: на телефоне уменьшаем
     кегль подписи, иначе она рвётся посреди слова */
  
  /* На телефоне двадцать кадров превращаются в кашу: показываем
     четырнадцать, пояса 40–56% оставлены под строку заголовка. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* ═══ АППАРАТЫ: общая сцена «На чём работаем» ═══
   Одиночный стоматологический слайд остаётся статичным. Многостраничную
   косметологическую сцену внизу файла переводит в стрелочную карусель
   класс .machines--carousel; базовые размеры медиа общие для обоих видов. */
.machines{position:relative;z-index:2;}
.machines__pin{height:calc(120vh * var(--mslides,5));}
.machines--single .machines__pin{height:auto;}
.machines__scene{position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--m-bg,var(--field-sage));}
.machines--single .machines__scene{position:relative;}
.machines__track{position:absolute;inset:0;display:flex;will-change:transform;}
.machines__slide{position:relative;flex:0 0 100vw;height:100%;
  display:flex;align-items:center;}
/* Кадр аппарата: по центру, чуть правее — слева живёт текст */
/* Центр кадра смещён правее середины: слева живёт текст, и широкие
   горизонтальные манипулы иначе подлезают под список. */
.machines__media{position:absolute;left:58%;top:50%;width:min(44vw,620px);
  transform:translate(-50%,-50%);will-change:transform;pointer-events:none;}
.machines__media img,.machines__media video{display:block;width:100%;height:auto;
  border-radius:clamp(18px,2vw,28px);box-shadow:0 30px 70px rgba(33,29,25,.18);}
/* Вырезанный аппарат: без рамки, тень объёмом; вертикальные башни
   упираются в потолок сцены, поэтому ограничение по высоте. */
/* Тень живёт на обёртке, а не на самом кадре. На <img> фильтр заводил
   отдельный слой композитора, а прозрачность при перелистывании ставится
   на обёртку — браузер считал слой аппарата непрозрачным и заливал его
   прямоугольник светлым: под вырезанным фото проступал «фон», ровно по
   габаритам картинки, и только в момент перелистывания. Когда фильтр и
   opacity на одном элементе, слой один и заливки нет. */
.machines__media--cut{filter:drop-shadow(0 30px 50px rgba(33,29,25,.28));}
.machines__media--cut img{width:auto;max-width:100%;max-height:74vh;margin:0 auto;
  border-radius:0;box-shadow:none;}
/* Врач у микроскопа: новый ролик снят в интерьере, поэтому резкая прямоугольная
   рамка спорила бы с фоном секции. Края мягко сходят в прозрачность: видео читается как часть блока,
   а не как вставленное окно. Кнопка звука кликабельна, сам кадр остаётся некликабельным. */
.machines__media--doctor{display:flex;flex-direction:column;align-items:center;gap:26px;
  position:relative;width:auto;pointer-events:none;gap:0;
  filter:drop-shadow(0 24px 42px rgba(33,29,25,.2));}
.machines__media--doctor video{width:min(32vw,380px);max-width:100%;height:auto;
  aspect-ratio:4/5;max-height:min(66vh,594px);object-fit:cover;object-position:50% 46%;
  border-radius:0;box-shadow:none;filter:saturate(.9) contrast(.97);
  -webkit-mask-image:radial-gradient(ellipse 64% 62% at 50% 50%,#000 48%,rgba(0,0,0,.92) 56%,rgba(0,0,0,.34) 70%,transparent 78%);
  mask-image:radial-gradient(ellipse 64% 62% at 50% 50%,#000 48%,rgba(0,0,0,.92) 56%,rgba(0,0,0,.34) 70%,transparent 78%);}
.machines--doctor .machines__sound{position:absolute;z-index:2;left:50%;bottom:clamp(24px,4vh,38px);
  margin:0;transform:translateX(-50%);white-space:nowrap;}
/* Зеркало блока аппаратов: там кадр справа, здесь врач слева, текст справа.
   Пара стоит по центру блока: свободное место делится поровну автомаргинами,
   поля слева и справа равны, между врачом и текстом просвет в 150 px.
   Делить блок ровно надвое нельзя: врач узкий, текст широкий, и от равных
   половин внешние поля выходят разной ширины.
   Классов в селекторе четыре не для красоты: общие правила статичного слайда
   центруют оба блока через margin:auto и лежат ниже по файлу — с тремя
   классами они перебивают эти. */
.machines--single.machines--doctor.is-static .machines__slide{align-items:flex-end;
  gap:clamp(64px,15vw,240px);padding:clamp(56px,10vh,120px) var(--gutter);}
.machines--single.machines--doctor.is-static .machines__media--doctor{order:1;margin:0 0 0 auto;}
.machines--single.machines--doctor.is-static .machines__info{order:2;margin:0 auto 0 0;
  max-width:min(44ch,100%);}
/* Кнопки стоят на одной линии: колонки выровнены по низу, а кнопка звука ниже
   кнопки записи на несколько пикселей, поэтому её приподнимаем — иначе совпадут
   нижние края, но не середины, и на глаз линия поедет. */
.machines--single.machines--doctor.is-static .machines__sound{margin:0;}
.machines__sound{pointer-events:auto;display:inline-flex;align-items:center;gap:.6em;
  padding:.75em 1.3em;border-radius:100px;cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:rgba(251,248,243,.9);border:1px solid var(--line-strong);
  backdrop-filter:blur(6px);transition:background var(--ease),border-color var(--ease);}
.machines__sound:hover{background:var(--milk);border-color:var(--ink);}
.machines__sound-off{display:none;}
.machines__sound[aria-pressed="true"] .machines__sound-on{display:none;}
.machines__sound[aria-pressed="true"] .machines__sound-off{display:inline;}
/* Текст слайда: колонка слева, поверх кадра */
.machines__info{position:relative;z-index:2;margin-left:var(--gutter);
  max-width:min(40ch,42vw);will-change:transform,opacity;}
.machines__info .eyebrow{margin-bottom:1.1em;}
.machines__name{font-family:var(--font-display);font-weight:400;
  font-size:clamp(34px,4.6vw,72px);line-height:1.02;font-weight:300;letter-spacing:.02em;
  color:var(--ink);margin:0 0 .18em;}
.machines__vendor{font-size:clamp(13px,1.05vw,16px);opacity:.62;margin:0 0 1.6em;}
.machines__list{list-style:none;margin:0 0 2em;padding:0;
  font-size:clamp(13.5px,1.08vw,16.5px);line-height:1.55;}
.machines__list li{position:relative;padding-left:1.35em;margin-bottom:.55em;}
.machines__list li::before{content:"";position:absolute;left:0;top:.62em;
  width:.5em;height:1px;background:var(--ink);opacity:.55;}
/* Типографический кадр: у лазера нет пресс-фото (бренд не указан),
   вместо аппарата — крупная длина волны. Честно и графично. */
.machines__media--type{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:clamp(90px,15vw,230px);line-height:1;
  color:var(--ink);opacity:.14;letter-spacing:-.01em;white-space:nowrap;
  user-select:none;}
/* Индикатор: номер слайда, живёт в углу сцены */
.machines__count{position:absolute;left:var(--gutter);bottom:5vh;z-index:3;
  font-size:13px;letter-spacing:.14em;color:var(--ink);opacity:.6;
  font-variant-numeric:tabular-nums;}
.machines--single .machines__count{display:none;}
/* Переход к каталогу: появляется на последнем слайде ленты */
.machines__next{position:absolute;right:var(--gutter);bottom:5vh;z-index:5;
  display:inline-flex;align-items:center;gap:.7em;padding:.9em 1.5em;border-radius:100px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:rgba(251,248,243,.9);border:1px solid var(--line-strong);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;
  transition:background .3s var(--ease),border-color .3s var(--ease);}
.machines__next:hover{background:var(--milk);border-color:var(--ink);}
.machines--single .machines__next{display:none;}
.machines.is-static .machines__next{position:static;opacity:1;pointer-events:auto;
  margin:24px auto 0;}
/* Статика: reduced motion или одиночный слайд без пробега */
.machines.is-static .machines__pin{height:auto;}
.machines.is-static .machines__scene{position:relative;height:auto;}
.machines.is-static .machines__track{position:static;display:block;}
.machines.is-static .machines__slide{flex:none;width:100%;height:auto;
  padding:clamp(48px,9vh,110px) 0;}
.machines.is-static .machines__media{position:relative;left:auto;top:auto;
  transform:none;margin:0 auto 32px;}
.machines.is-static .machines__info{margin:0 auto;max-width:56ch;}
@media(max-width:900px){
  .machines__pin{height:calc(105vh * var(--mslides,5));}
  /* 19.09: нижний отступ был 13vh — это 110px на обычном телефоне, при том
     что панель «Записаться/Позвонить» внизу занимает 48. Лишние полсотни
     пикселей забирали высоту у кадра аппарата, и на слайдах с длинным
     описанием снимок ужимался вдвое. Оставляем панель с запасом и отдаём
     остальное кадру. */
  .machines__slide{align-items:flex-end;padding-bottom:max(7vh,62px);}
  /* Кадр выше и мельче: текст слайда поднимается высоко, вертикальные
     башни иначе наезжают на заголовок. width с !important, потому что
     у Lumecca ширина ограничена инлайн-стилем под родное разрешение. */
  /* Полоса сверху отдана счётчику и кнопке «к услугам»: высокие аппараты
     (AlexaPro, Dermadrop) при top 25% и max-height 32vh начинались на 76px,
     а низ кнопки — 128px, и стойка лезла прямо под кнопку.
     Теперь кадр не привязан к проценту высоты, а стоит ПОД кнопкой: верх =
     низ кнопки (9vh + 36px) + 10px зазора, отсюда и центр. Высота обычно
     28vh, но на низких экранах её ужимает свободная полоса между кнопкой и
     текстом слайда — иначе на 667px (SE) аппарат уезжал под заголовок.
     560px в формуле — это текст слайда снизу (13vh отступа + самый высокий
     блок текста, Morpheus8) плюс верхняя полоса с кнопкой; ниже 90px кадр
     не ужимаем, там уже не фото. На 844px формула не срабатывает — держит
     28vh, так что эталонный телефон не меняется. */
  /* 18.09: кадр стоял абсолютом, а его место подбиралось константами под
     самый высокий текст. У аппаратов с длинным описанием (HELEO4, Med Expert,
     александритовый лазер) текст поднимался выше расчёта, и снимок ложился
     на надпись «На чём работаем», а иногда и на сам заголовок. Теперь кадр
     стоит в потоке над текстом: наехать физически не на что, а при длинном
     описании он сам ужимается до нижней границы. */
  /* Сверху слайд держит полосу под счётчиком и кнопкой «к услугам»: без неё
     кадр у аппаратов с длинным описанием подлезал уже под них. Кадр ужимается
     сам — min-height:0 и max-height:100% позволяют ему отдать место тексту. */
  .machines__slide{flex-direction:column;justify-content:flex-end;align-items:stretch;
    padding-top:calc(9vh + 46px);}
  .machines__media{
    --m-h:33vh;
    position:static;left:auto;top:auto;transform:none;
    width:min(70vw,420px) !important;margin:0 auto 12px;
    display:flex;justify-content:center;align-items:flex-end;
    flex:1 1 auto;min-height:0;overflow:hidden;}
  .machines__media img,.machines__media video{
    width:auto;max-width:100%;height:100%;max-height:var(--m-h);object-fit:contain;}
  .machines__media--cut img{max-height:var(--m-h);}
  .machines__info{margin:0 var(--gutter);max-width:none;}
  .machines__name{font-size:clamp(30px,9vw,44px);}
  .machines__vendor{margin-bottom:1em;}
  .machines__list{font-size:13.5px;margin-bottom:1.2em;}
  .machines__list li{margin-bottom:.4em;}
  .machines__count{bottom:auto;top:9.9vh;}  /* низ занят панелью «Записаться/Позвонить» */
  /* на узком экране кнопка ложилась на «Записаться» внутри слайда —
     уводим её наверх, к счётчику */
  .machines__next{right:var(--gutter);left:auto;transform:none;bottom:auto;top:9vh;
    font-size:11px;padding:.7em 1.1em;}
  /* Статичная панель (стоматология): видео сверху во всю ширину, текст под ним */
  .machines.is-static .machines__slide{display:block;padding:9vw var(--gutter) 6vh;}
  .machines.is-static .machines__media{width:100% !important;margin:0 0 24px;}
  /* у ролика с врачом ширину диктует высота кадра, растягивать на всю полосу нечего */
  .machines.is-static .machines__media--doctor{width:100% !important;
    margin:0 auto clamp(-48px,-9vw,-34px);}
  /* на телефоне колонка: врач сверху, текст под ним */
  .machines--single.machines--doctor.is-static .machines__slide{padding:0 var(--gutter) 6vh;gap:0;
    align-items:stretch;}
  .machines--single.machines--doctor.is-static .machines__sound{margin-bottom:0;}
  .machines--single.machines--doctor.is-static .machines__media--doctor{
    margin:0 auto clamp(4px,2vw,10px);transform:translateY(-12px);}
  .machines--single.machines--doctor.is-static .machines__info{max-width:none;margin:0;}
  .machines__media--doctor video{width:min(84vw,380px);max-width:none;max-height:none;}
  .machines--doctor .machines__sound{bottom:clamp(30px,8vw,42px);}
  .machines--single.machines--doctor .machines__sound{font-size:10px;padding:.58em .86em;gap:.45em;}
  .machines--single.machines--doctor .machines__sound svg{width:13px;height:13px;}
  .machines__sound{font-size:11px;padding:.7em 1.1em;}
  .machines.is-static .machines__info{margin:0;}
}

/* ═══ «О клинике»: слоган, крупный рейтинг, отзывы внутри блока ═══ */
.about__slogan{font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,4vw,64px);line-height:1.06;font-weight:300;letter-spacing:.02em;
  color:var(--ink);margin:0 0 clamp(28px,5vh,56px);max-width:18ch;}
/* Абзац под слоганом: слоган набран крупно и держит взгляд, поэтому текст
   рядом с ним идёт обычным кеглем и узкой колонкой — иначе два крупных
   блока спорят друг с другом. */
.about__lead{max-width:62ch;
  /* Верхний отступ отрицательный: абзац подтягивается к слогану, который
     отбит большим margin. Нижний возвращает тот же воздух — без него
     крупные цифры рейтинга липнут к последней строке. */
  margin:calc(-1 * clamp(14px,2.4vh,28px)) 0 clamp(28px,5vh,56px);
  color:var(--wood);font-size:clamp(15px,1.15vw,17.5px);line-height:1.7;}
/* Второй абзац подряд: отрицательный верхний отступ гасим — он тянет к
   слогану только первый. Нижний большой отступ оставляем последнему:
   иначе абзацы одного текста стоят так же далеко друг от друга, как
   текст и цифры рейтинга, и связь между ними теряется. */
.about__lead + .about__lead{margin-top:0;}
.about__lead:not(:last-of-type){margin-bottom:1.15em;}
.about__reviews{margin-top:clamp(44px,7vh,84px);}
.about__reviews .eyebrow{margin-bottom:1.6em;}
@media(max-width:900px){
  .about__slogan{font-size:clamp(26px,7.4vw,40px);}
}

/* ═══ ПРАЙС: группы прейскуранта, раскрываются по одной ═══ */
.price-groups{margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--line-strong);}
@media(min-width:901px){
  .price-groups--split{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,64px);align-items:start;}
}
.price-group{border-bottom:1px solid var(--line-strong);}
.price-group__head{margin:0;font-size:inherit;font-weight:400;}
.price-group__head button{display:flex;width:100%;align-items:baseline;justify-content:space-between;
  gap:20px;padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink);
  font-family:var(--font-display);font-size:clamp(17px,1.7vw,23px);line-height:1.3;}
.price-group__head button::after{content:"+";margin-left:auto;font-size:1.1em;color:var(--clay);
  transition:transform .3s var(--ease);}
.price-group.is-open .price-group__head button::after{content:"×";transform:rotate(180deg);}
.price-group__body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.price-group .price-table{width:100%;border-collapse:collapse;margin:0 0 22px;}
.price-group .price-table th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wood);font-weight:400;padding:0 0 10px;border-bottom:1px solid var(--line);}
.price-group .price-table th:last-child{text-align:right;}
.price-group .price-table td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;
  font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.5;}
.price-group .price-val{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-family:var(--font-display);font-size:clamp(15px,1.25vw,19px);padding-left:24px;}
/* код Минздрава — служебная строка под названием, мелко и тихо */
.price-code{display:block;margin-top:3px;font-size:11px;letter-spacing:.06em;color:var(--wood);opacity:.55;}
.price-block__date{font-size:clamp(13px,1.05vw,15px);color:var(--wood);margin:0 0 20px;}
.price-block__date strong{color:var(--ink);font-weight:400;}
@media(max-width:900px){
  .price-group__head button{padding:16px 0;font-size:16px;gap:12px;}
  .price-group .price-table td{font-size:13.5px;padding:10px 0;}
  .price-group .price-val{font-size:15px;padding-left:12px;}
  .price-code{font-size:10.5px;}
}

/* ═══ Каталог услуг живёт за кнопкой «Весь список услуг» ═══
   Свёрнут по умолчанию (класс ставит JS, чтобы без скриптов список
   остался доступен), раскрывается кнопкой из блока-телескопа, поиском
   и переходом ?open=. */
.svc-collapsed .svc-wrap{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .6s var(--ease),opacity .4s var(--ease);}
.svc-wrap{max-height:none;opacity:1;transition:opacity .4s var(--ease);}
.svc-collapsed .search-band{display:none;}

/* ═══ Путь пациента (стек «слева направо», реф functionhealth.com) ═══
   БАЗА (все ширины, без JS, reduced-motion): горизонтальная лента со
   scroll-snap — скролл живёт в .path__track, страница вбок не едет.
   ДЕСКТОП ≥1121px при живом JS (.path--stack ставит setupPathStack):
   секция 340svh, .path__pin прилипает на экран, карточки въезжают справа
   и складываются; пройденные шаги видны корешками слева с вертикальной
   подписью. Вертикальный жест не крадётся. ol глобально не сброшен. */
.path{overflow:hidden;}
.path::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 85% at 50% 32%,rgba(176,122,99,.16),transparent 72%);}
.path__pin{position:relative;}
.path__hint{margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,230,218,.55);}
/* 12.09: подсказки словами оказалось мало — добавляем настоящие стрелки.
   Они листают ленту на карточку и гаснут на краях, поэтому по ним видно,
   что справа есть продолжение. В режиме стека (десктоп) листает скролл
   страницы, и стрелки там не нужны. */
.path__aside{display:flex;align-items:center;gap:14px;}
.path__nav{display:flex;gap:8px;}
.path__nav button{display:grid;place-items:center;width:42px;height:42px;
  border:1px solid rgba(236,230,218,.3);border-radius:50%;background:transparent;
  color:var(--bone);font-size:17px;line-height:1;cursor:pointer;
  transition:background var(--ease),color var(--ease),opacity var(--ease);}
.path__nav button:hover:not(:disabled){background:var(--bone);color:var(--ink);}
.path__nav button:disabled{opacity:.28;cursor:not-allowed;}
/* 16.09: в стеке шаги листались только скроллом — Кирилл открыл страницу
   на компьютере и не нашёл, чем переключать. Стрелки вернули; жмётся и сам
   корешок — он и есть видимая полоса соседней карточки. */
.path--stack .path__tag{cursor:pointer;background:transparent;
  transition:background var(--ease),color var(--ease);}
.path--stack .path__tag:hover,.path--stack .path__tag:focus-visible{background:rgba(201,154,134,.16);color:var(--bone);}
.path__lead{max-width:56ch;margin:0 0 clamp(30px,4vw,48px);font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:rgba(236,230,218,.82);}
.path__track{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 10px;
  /* Снап считается от края поля прокрутки, а дорожка отбита гаттером:
     без этого первый шаг «прилипал» на scrollLeft 16, лента считалась
     подвинутой и стрелка «назад» загоралась в самом начале. */
  scroll-padding-inline:var(--gutter);}
.path__steps{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);
  gap:clamp(14px,1.6vw,22px);margin:0;padding:0;list-style:none;counter-reset:pathstep;}
.path__steps::before{content:"";position:absolute;left:0;right:0;top:58px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,154,134,.55) 8%,rgba(201,154,134,.55) 92%,transparent);}
.path__step{position:relative;overflow:hidden;padding:26px 22px 28px;border-radius:14px;
  background:linear-gradient(165deg,#282119 0%,#1d1813 100%);border:1px solid rgba(236,230,218,.14);
  box-shadow:0 30px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(251,248,243,.07);
  counter-increment:pathstep;scroll-snap-align:start;}
.path__step::after{content:"0" counter(pathstep);position:absolute;top:-14px;right:-6px;z-index:0;
  font-family:var(--font-display);font-size:96px;line-height:1;color:rgba(201,154,134,.1);
  letter-spacing:-.04em;pointer-events:none;}
.path__step > *{position:relative;z-index:1;}
.path__tag{display:block;margin:0 0 12px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);}
.path__num{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border:1px solid rgba(201,154,134,.55);border-radius:50%;background:#221d18;
  font-family:var(--font-display);font-size:26px;color:var(--rose);
  text-shadow:0 1px 0 rgba(24,21,18,.7),0 -1px 0 rgba(251,248,243,.14);
  box-shadow:0 0 0 6px rgba(201,154,134,.07);}
.path__step h3{margin:18px 0 10px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(17px,1.25vw,20px);line-height:1.3;color:var(--bone);}
.path__step p{margin:0;font-size:14px;line-height:1.6;color:rgba(236,230,218,.72);}
.path__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,44px);position:relative;}

@media(max-width:760px){
  /* На телефоне шаги листаются каруселью слева направо — выбор Кирилла
     (16.09). Столбец, стоявший здесь до этого, растягивал блок на пять
     экранов подряд; лента держит один шаг в кадре, а порядок читается
     по подписи «Шаг 01…05» и по стрелкам.
     Чтобы боковой скролл был виден пальцу, а не угадывался: карточка
     занимает 86vw, поэтому край следующей всегда торчит справа, снап
     жёсткий и со stop:always — палец переводит ровно на один шаг,
     мимо не пролетает. */
  .path__track{scroll-snap-type:x mandatory;}
  .path__steps{grid-auto-columns:86vw;gap:12px;}
  .path__step{scroll-snap-stop:always;}
  /* Кадр положе портретного 3:2: карточка со снимком, подписью и
     абзацем должна уместиться в экран целиком, иначе внутри карусели
     заводится ещё и вертикальный скролл. */
  .path__media{aspect-ratio:16/10;}
}

@media(min-width:1121px){
  /* Стек включает JS классом .path--stack; без него и десктоп живёт лентой. */
  /* Шаги листаются только стрелками и корешками: секция занимает ровно
     экран, запаса прокрутки под неё нет, и страница идёт мимо блока
     обычным ходом, ничего не перехватывая. */
  .path--stack{height:100svh;padding:0;overflow:clip;}
  .path--stack .path__pin{position:relative;height:100%;display:flex;flex-direction:column;
    padding:calc(var(--header-h) + 3vh) var(--gutter) 3.5vh;
    /* полёт карточек обрезается краем пина: свой overflow липкость не ломает,
       а scrollWidth страницы не распирается летящими карточками */
    overflow:clip;}
  .path--stack .path__hint{display:none;}
  .path--stack .path__lead{margin-bottom:clamp(18px,2.5vh,30px);}
  .path--stack .path__track{flex:1;min-height:0;overflow:visible;margin:0;padding:0;scroll-snap-type:none;}
  .path--stack .path__steps{display:block;height:100%;perspective:1600px;perspective-origin:20% 50%;}
  .path--stack .path__steps::before{display:none;}
  /* корешок = 68px; ширина карточки такая, чтобы правый край лёг в край сцены */
  .path--stack .path__step{position:absolute;top:0;bottom:0;left:0;margin:0;
    width:calc(100% - var(--rest));padding:0 40px 0 108px;
    display:flex;flex-direction:column;justify-content:center;
    border-radius:16px;overflow:hidden;
    box-shadow:-34px 0 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(251,248,243,.07);
    transform:translate3d(100vw,0,0);will-change:transform;scroll-snap-align:none;}
  .path--stack .path__step:nth-child(1){--rest:0px;z-index:1;}
  .path--stack .path__step:nth-child(2){--rest:68px;z-index:2;}
  .path--stack .path__step:nth-child(3){--rest:136px;z-index:3;}
  .path--stack .path__step:nth-child(4){--rest:204px;z-index:4;}
  .path--stack .path__step:nth-child(5){--rest:272px;z-index:5;}
  /* вертикальная подпись-корешок: видна и у активной карточки, и у пройденной */
  .path--stack .path__tag{position:absolute;left:0;top:0;bottom:0;width:68px;margin:0;
    display:flex;align-items:center;justify-content:center;
    writing-mode:vertical-rl;transform:rotate(180deg);
    border-right:1px solid rgba(236,230,218,.12);
    font-size:12px;letter-spacing:.28em;color:var(--rose);}
  .path--stack .path__step::after{font-size:clamp(140px,16vw,220px);top:auto;bottom:-30px;right:10px;}
  .path--stack .path__step h3{font-size:clamp(24px,2vw,34px);max-width:18ch;margin:20px 0 12px;}
  .path--stack .path__step p{font-size:16px;max-width:52ch;color:rgba(236,230,218,.78);}
  .path--stack .path__cta{margin-top:clamp(16px,2.5vh,26px);}
  /* Раньше transform писался каждый кадр по прокрутке и своей анимации не
     требовал. Теперь шаг меняется нажатием, поэтому переезд карточки
     анимируем сами; при .path--anim выключенном первый кадр встаёт без полёта. */
  .path--stack .path__step{transition:opacity .9s var(--ease);}
  .path--stack.path--anim .path__step{transition:opacity .9s var(--ease),transform .62s cubic-bezier(.22,.61,.36,1);}
}

.site-credit{text-decoration:underline;text-underline-offset:2px;transition:color .2s ease;}
.site-credit:hover{color:rgba(236,230,218,1);}

/* ═══ Новые редакционные блоки: навигатор, пакеты, FAQ и блог ═══ */
.section-intro{max-width:62ch;margin:clamp(-18px,-1.5vw,-10px) 0 clamp(28px,4vw,48px);
  color:var(--wood);font-size:clamp(14px,1.15vw,17px);line-height:1.65;}

.dent-quiz{background:var(--field-sage);}
[data-direction="cosmo"] .dent-quiz{background:var(--field-caramel);}

/* Само «окно» блока ниже сцены: кадры живут в полосе 76vh, а не во всю
   высоту экрана. Так между верхним и нижним поясом остаётся ровно столько
   места, сколько нужно строке заголовка, и пустоты в середине нет. */

/* Сбрасываем стороны от прежней раскладки на двадцать плиток: там у тех же
   номеров стояли другие top/bottom, и карточка растягивалась между двумя. */

/* Рисунок по периметру: ни один кадр не стоит вровень с соседом, верхний
   и нижний пояса смещены друг относительно друга. Середина пустая — там
   сходится строка заголовка. */

/* На стоматологии направлений шесть: в нижнем поясе их два, поэтому
   разводим по краям. Только на широком экране: на телефоне кадры идут
   поясами сверху вниз, и там своя раскладка. */
@media(min-width:901px){
  
  
  /* Четыре кадра: два в верхнем поясе, два в нижнем. Базовые правила
     ставят третий и четвёртый наверх — здесь их опускаем, иначе низ поля
     пустует и заголовок сходится не в середине картинки, а над ней. */
  
  
  
  
}

@media(max-width:900px){
  /* 12.09: на телефоне поле по координатам не сложилось. Подпись-пилюля
     лежала поверх фотографии и спорила с кадром, а посреди поля зияла
     дыра — коридор под сходящуюся строку заголовка. На узком экране это
     читается не как приём, а как дырка в вёрстке.
     Поэтому поле здесь — обычная сетка в две колонки: сверху кадр, под
     ним название на фоне секции, никаких наложений. Середина занята
     кадрами: заголовок «Наши услуги» приезжает ПОД ними (z-index поля
     выше) и открывается сам, когда поле улетает на зрителя. */
  
  /* сетка кладёт кадры сама — снимаем абсолютные привязки и фиксированную ширину */
  
  /* нечётный последний кадр встаёт посередине ряда своей шириной,
     а не растягивается на обе колонки */
  
  
  /* Подпись вышла из кадра: плашка со стеклом больше не нужна, название
     стоит прямым текстом на фоне секции и читается при любом фото. */
  
}
/* Телефон боком: экран ниже 620px, четыре пояса в него не помещаются
   никакой шириной плитки. Раскладываем в четыре колонки — получается
   два пояса, и поле снова целиком в кадре. */

.quiz-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;margin:0 var(--gutter) clamp(40px,6vh,80px);padding:clamp(22px,3vw,34px) clamp(24px,3.4vw,42px);
  border-radius:18px;background:var(--field-caramel);}
.quiz-band__text{margin:0;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--ink);}
/* Окно навигатора: панель со своей прокруткой, чтобы длинный результат
   не растягивал окно за пределы экрана. */
.quiz-dialog{border:0;padding:0;background:none;max-width:min(760px,94vw);width:100%;}
.quiz-dialog::backdrop{background:rgba(33,29,25,.55);backdrop-filter:blur(3px);}
.quiz-dialog__panel{position:relative;max-height:88vh;overflow:auto;border-radius:20px;
  padding:clamp(26px,4vw,44px);background:var(--bone);box-shadow:0 30px 80px rgba(33,29,25,.35);}
.quiz-dialog__close{position:absolute;top:12px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--milk);color:var(--ink);font-size:20px;line-height:1;
  cursor:pointer;transition:background var(--ease);}
.quiz-dialog__close:hover{background:var(--sand);}
.quiz-dialog .dent-quiz__step,.quiz-dialog .dent-quiz__result{padding:0;background:none;border:0;}
@media(max-width:760px){
  .quiz-band{margin:0 var(--gutter) 40px;}
  .quiz-dialog__panel{padding:22px 18px;max-height:92vh;}
}
/* Список направлений в ответе навигатора: нумерованный, потому что
   порядок — это и есть рекомендация, с чего начинать. */
.cosmo-quiz__list{margin:18px 0 0;padding:0 0 0 1.1em;display:grid;gap:16px;}
.cosmo-quiz__item{padding-left:6px;}
.cosmo-quiz__name{margin:0 0 4px;font-family:var(--font-display);font-size:clamp(17px,1.5vw,21px);
  line-height:1.3;color:var(--ink);}
.cosmo-quiz__why{margin:0 0 6px;font-size:14.5px;line-height:1.55;color:var(--wood);max-width:64ch;}
.dent-quiz__choice.is-on{background:var(--ink);color:var(--bone);border-color:var(--ink);}
/* «Дальше» на шаге с множественным выбором прижимаем вправо: кнопка
   продолжения читается как движение вперёд, а не как ещё один вариант. */
.dent-quiz__actions--end{justify-content:flex-end;}
.dent-quiz #dentQuiz{max-width:980px;margin:0 auto;}
.dent-quiz__step,.dent-quiz__result{position:relative;padding:clamp(26px,5vw,64px);
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--milk) 76%,transparent);}
.dent-quiz__step h3,.dent-quiz__result h3{font-family:var(--font-display);font-weight:300;
  font-size:clamp(28px,4.5vw,58px);line-height:1.08;margin:0 0 16px;}
.dent-quiz__kicker{margin:0 0 14px;color:var(--wood);font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
.dent-quiz__note{max-width:60ch;color:var(--wood);font-size:15px;}
/* Постоянная оговорка навигатора: он не диагностика и не собирает данные */
.quiz-dialog__legal{margin:0 0 18px;max-width:62ch;color:var(--wood);
  font-size:12.5px;line-height:1.55;opacity:.85;}
.dent-quiz__fieldset{min-width:0;margin:0;padding:0;border:0;}
.dent-quiz__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin-top:clamp(26px,4vw,44px);background:var(--line-strong);border:1px solid var(--line-strong);}
.dent-quiz__choices--wide{grid-template-columns:repeat(2,minmax(0,1fr));}
.dent-quiz__choices button{min-height:84px;padding:20px 24px;border:0;background:var(--paper);
  cursor:pointer;text-align:left;font-size:clamp(15px,1.25vw,18px);line-height:1.4;
  transition:background .25s ease,color .25s ease;}
.dent-quiz__choices button:hover,.dent-quiz__choices button:focus-visible{background:var(--ink);color:var(--bone);}
.dent-quiz__back,.dent-quiz__restart{border:0;border-bottom:1px solid currentColor;background:none;padding:0 0 3px;
  cursor:pointer;color:var(--wood);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.dent-quiz__back{position:absolute;right:clamp(26px,5vw,64px);top:clamp(26px,5vw,64px);}
.dent-quiz__tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0;}
.dent-quiz__tags span{padding:7px 13px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:12px;letter-spacing:.04em;}
.dent-quiz__result > p:not(.dent-quiz__kicker){max-width:64ch;}
.dent-quiz__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;}
.dent-quiz__restart{margin-left:auto;}

.packages{background:var(--milk);}
/* ── Пакеты свёрнуты в одну строку ────────────────────────────────────
   Тринадцать программ занимали целый экран списка ещё до того, как
   читатель решил, интересны ли ему пакеты. Заголовок секции работает
   выключателем: та же типографика, что у других h2, плюс число программ
   и знак «+» — чтобы строка читалась как приглашение, а не как обычная
   шапка. Линии сверху и снизу держат её отдельным блоком на молочном
   фоне секции. */
.packages-fold{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);}
.packages-fold__summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  /* Счётчик и знак держатся первой строки заголовка, а не середины
     блока: на узком экране заголовок переносится в две строки, и по
     центру подпись повисала напротив лида. */
  align-items:baseline;gap:clamp(14px,2.6vw,38px);padding:clamp(20px,2.8vw,38px) 0;
  cursor:pointer;list-style:none;}
.packages-fold__summary::-webkit-details-marker{display:none;}
/* Знак вместо стрелки: тот же словарь, что у строк программ внутри,
   поэтому раскрытие блока и раскрытие пакета выглядят одним жестом. */
.packages-fold__summary::after{content:"+";font-size:clamp(26px,3vw,38px);line-height:1;color:var(--accent);}
.packages-fold[open] .packages-fold__summary::after{content:"×";}
.packages-fold__text h2{margin:0;transition:color .3s var(--ease);}
.packages-fold__summary:hover h2{color:var(--accent);}
.packages-fold__text p{margin:10px 0 0;max-width:58ch;color:var(--wood);
  font-size:clamp(14px,1.2vw,16px);line-height:1.6;}
.packages-fold__count{white-space:nowrap;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wood);}
/* Содержимое не «выпрыгивает»: короткий заход снизу повторяет поведение
   остальных раскрывающихся блоков сайта. */
.packages-fold__body{padding-bottom:clamp(18px,2.6vw,34px);animation:packagesFoldIn .38s var(--ease);}
@keyframes packagesFoldIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.packages-fold__body{animation:none;}}
#packagesGrid{border-top:1px solid var(--line-strong);}
.package-row{border-bottom:1px solid var(--line-strong);}
.package-row > summary{display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;align-items:baseline;
  gap:clamp(14px,2vw,30px);padding:clamp(19px,2.2vw,30px) 0;cursor:pointer;list-style:none;}
.package-row > summary::-webkit-details-marker{display:none;}
.package-row > summary::after{content:"+";grid-column:4;font-size:24px;line-height:1;color:var(--accent);}
.package-row[open] > summary::after{content:"×";}
.package-row__index{font-size:11px;letter-spacing:.16em;color:var(--wood);}
.package-row__title{font-family:var(--font-display);font-size:clamp(18px,2.1vw,29px);line-height:1.25;}
.package-row__price{white-space:nowrap;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--wood);}
.package-row__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:1px;margin:0 0 clamp(28px,4vw,48px) 54px;background:var(--line);border:1px solid var(--line);}
.package-variant{display:flex;flex-direction:column;padding:clamp(22px,3vw,36px);background:var(--paper);}
.package-variant__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line);}
.package-variant h4{font-family:var(--font-display);font-size:clamp(18px,1.7vw,23px);}
.package-variant__price{display:grid;justify-items:end;gap:3px;margin:0;text-align:right;white-space:nowrap;}
.package-variant__price strong{font-family:var(--font-display);font-size:19px;font-weight:400;}
.package-variant__price s,.package-variant__price span{font-size:11px;color:var(--wood);}
.package-variant ol,.package-variant ul{margin:20px 0 24px;padding:0;list-style:none;counter-reset:package-step;}
.package-variant li{position:relative;padding:9px 0 9px 30px;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.55;color:var(--wood);}
.package-variant ol li{counter-increment:package-step;}
.package-variant ol li::before{content:counter(package-step,decimal-leading-zero);position:absolute;left:0;top:10px;
  font-size:10px;letter-spacing:.08em;color:var(--accent);}
.package-variant ul li::before{content:"—";position:absolute;left:0;color:var(--accent);}
.package-variant .btn{align-self:flex-start;margin-top:auto;}

.faq-list{background:var(--paper);}
#faqGrid{border-top:1px solid var(--line-strong);}
.faq-item{border-bottom:1px solid var(--line-strong);}
.faq-item summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;
  padding:clamp(18px,2vw,27px) 0;cursor:pointer;list-style:none;font-family:var(--font-display);
  font-size:clamp(17px,1.7vw,23px);line-height:1.35;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:var(--font-body);font-size:22px;color:var(--accent);}
.faq-item[open] summary::after{content:"×";}
.faq-item summary i{grid-column:2;grid-row:1;font-family:var(--font-body);font-size:10px;
  font-style:normal;letter-spacing:.14em;color:var(--wood);}
.faq-item__answer{max-width:72ch;padding:0 70px 24px 0;color:var(--wood);font-size:15px;line-height:1.7;}
.faq-item__answer p{margin:0;}
/* У косметологии ответы идут в два-три абзаца: без зазора они слипаются
   в одно полотно, а margin на самом p сдвинул бы и однострочные ответы. */
.faq-item__answer p + p{margin-top:12px;}

/* ЧЗВ косметологии: 25 вопросов против шести на стоматологии. Подряд такой
   список не читают, поэтому над ним рубрики-переключатели, а номер в строке
   заменён названием рубрики — при фильтре сквозная нумерация всё равно
   врёт, а рубрика подсказывает, куда смотреть в режиме «Все вопросы». */
.faq-cosmo__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(18px,2.4vw,28px);}
.faq-chip{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-strong);background:transparent;color:var(--wood);cursor:pointer;
  font-family:var(--font-body);font-size:13px;line-height:1.2;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);}
.faq-chip span{font-size:10.5px;letter-spacing:.08em;opacity:.6;}
.faq-chip:hover{color:var(--ink);border-color:var(--ink);}
.faq-chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--bone);}
.faq-chip.is-on span{opacity:.75;}
.faq-chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
#faqCosmoGrid{border-top:1px solid var(--line-strong);}
.faq-cosmo .faq-item summary i{text-transform:uppercase;white-space:nowrap;}
.faq-cosmo__note{margin:clamp(20px,2.6vw,30px) 0 0;max-width:74ch;color:var(--wood);
  font-size:12.5px;line-height:1.6;opacity:.85;}
@media(max-width:700px){
  /* На телефоне рубрика в строке вопроса отнимает половину ширины у самого
     вопроса — оставляем её только на широких экранах. Справа хватает места
     под «+», и запас в 70px, рассчитанный на десктоп, тоже снимаем. */
  .faq-cosmo .faq-item summary i{display:none;}
  .faq-cosmo .faq-item__answer{padding-right:32px;}
}

.blog-list{background:var(--field-mist);}
#blogGrid{border-top:1px solid var(--line-strong);}
.blog-item{border-bottom:1px solid var(--line-strong);}
.blog-item summary{display:grid;grid-template-columns:120px minmax(240px,.9fr) minmax(260px,1fr) auto;
  gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(22px,3vw,38px) 0;cursor:pointer;list-style:none;}
.blog-item summary::-webkit-details-marker{display:none;}
.blog-item summary::after{content:"↘";font-size:22px;color:var(--accent);transition:transform .3s var(--ease);}
.blog-item[open] summary::after{transform:rotate(180deg);}
.blog-item__index{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood);}
.blog-item__title{font-family:var(--font-display);font-size:clamp(18px,2vw,28px);line-height:1.25;}
.blog-item__lead{font-size:14px;line-height:1.55;color:var(--wood);}
.blog-item__body{max-width:74ch;margin-left:calc(120px + clamp(18px,3vw,48px));padding:0 0 34px;}
.blog-item__body p{font-size:15px;line-height:1.7;color:var(--wood);}

/* Рейтинги — только две кликабельные цифры. У блока и ссылок намеренно нет
   карточной поверхности, рамок, отступов, теней и декоративных псевдоэлементов. */
.about-rating-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,7vw,112px);margin:0;border:0;background:none;box-shadow:none;}
.about-rating-number{display:block;width:max-content;min-height:0;padding:0;margin:0;
  border:0;background:none;box-shadow:none;outline:0;border-radius:0;
  font-family:var(--font-display);font-size:clamp(72px,10vw,148px);font-weight:400;
  line-height:.9;color:var(--wood);text-decoration:none;}
.about-rating-number::before{content:none;display:none;}
.about-rating-number[data-label]::after{content:attr(data-label);display:block;margin-top:14px;
  font-family:var(--font-body);font-size:11px;font-weight:400;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--wood);
  border:0;background:none;box-shadow:none;}
.about-rating-number:hover{color:var(--accent);}

/* Авторская схема пути: навигация остаётся полезной без тяжёлого картографического
   виджета, а живой пунктир становится визуальным акцентом блока контактов. */
.route-map{min-width:0;margin:0;overflow:hidden;background:var(--milk);display:flex;flex-direction:column;}
.route-map__head{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(290px,1.3fr);gap:24px;
  align-items:end;padding:clamp(22px,3vw,34px);border-bottom:1px solid var(--line);}
.route-map__head .eyebrow{margin-bottom:8px;font-size:9px;}
.route-map__head h3{font-family:var(--font-display);font-size:clamp(18px,1.8vw,24px);line-height:1.15;}
.route-map__switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.route-map__switch button{position:relative;display:flex;min-width:0;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;cursor:pointer;
  font-size:11px;line-height:1;transition:color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);}
.route-map__switch button:hover{transform:translateY(-1px);}
.route-map__switch button.is-active{background:var(--ink);color:var(--milk);}
.route-map__switch button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.route-map__switch button small{flex:0 0 auto;font-size:9px;letter-spacing:.08em;opacity:.72;}
.route-map__canvas{position:relative;isolation:isolate;overflow:hidden;background:color-mix(in srgb,var(--field-sage) 70%,var(--paper));}
.route-map__canvas::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 70px color-mix(in srgb,var(--ink) 8%,transparent);}
.route-map__canvas svg{display:block;width:100%;height:auto;aspect-ratio:1120/540;}
.route-map__base{pointer-events:none;}
.route-map__route{opacity:0;visibility:hidden;transition:opacity .45s var(--ease);}
.route-map__route.is-active{opacity:1;visibility:visible;}
.route-map__path{fill:none;stroke:var(--accent);stroke-width:6;stroke-dasharray:.008 .019;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
/* Маска не двигает готовый пунктир, а медленно открывает его от метро к
   клинике. При каждом выборе маршрута класс is-drawing ставится заново. */
.route-map__reveal{fill:none;stroke:#fff;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;}
.route-map__reveal.is-drawing{animation:routeDraw var(--route-duration,10s) linear forwards;}
@keyframes routeDraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
.route-map__metro circle{fill:var(--ink);stroke:var(--milk);stroke-width:3;vector-effect:non-scaling-stroke;}
.route-map__metro text{fill:var(--milk);font-family:var(--font-body);font-size:17px;font-weight:500;}
.route-map__station{fill:var(--ink);stroke:var(--milk);stroke-width:4;paint-order:stroke;stroke-linejoin:round;
  font-family:var(--font-display);font-size:14px;letter-spacing:.02em;}
.route-map__pin-ring{fill:var(--accent);stroke:var(--milk);stroke-width:3;vector-effect:non-scaling-stroke;}
.route-map__pin-core{fill:var(--milk);}
.route-map__pulse{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:routePulse 2.8s var(--ease) infinite;}
@keyframes routePulse{0%{opacity:.75;transform:scale(.55);}75%,100%{opacity:0;transform:scale(1.25);}}
.route-map__clinic-label text{fill:var(--ink);font-family:var(--font-body);paint-order:stroke;stroke:var(--milk);stroke-width:5px;stroke-linejoin:round;}
.route-map__clinic-name{font-size:17px;font-weight:500;}
.route-map__clinic-address{font-size:11px;letter-spacing:.06em;}
.route-map__note{position:absolute;z-index:3;right:12px;bottom:10px;padding:5px 7px;background:rgba(251,248,243,.8);
  font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--wood);backdrop-filter:blur(4px);}
.route-map__caption{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(22px,3vw,34px);border-top:1px solid var(--line);}
.route-map__caption p{max-width:48ch;margin:0;font-size:12px;line-height:1.55;color:var(--wood);}
.route-map__caption .map-link{flex:0 0 auto;font-size:9px;}

/* Пять фото образуют одну визуальную историю. В ленте фото идёт сверху,
   в десктопном стеке занимает правую часть карточки. */
.path__media{margin:20px 0 0;aspect-ratio:3/2;overflow:hidden;border:1px solid rgba(236,230,218,.14);}
.path__image{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(.96);}
@media(min-width:1121px){
  .path--stack .path__step{padding-right:calc(44% + 48px);}
  .path--stack .path__media{position:absolute;z-index:0;inset:0 0 0 auto;width:44%;height:100%;margin:0;
    aspect-ratio:auto;border:0;border-left:1px solid rgba(236,230,218,.12);}
  .path--stack .path__media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(29,24,19,.5),transparent 34%);pointer-events:none;}
  .path--stack .path__image{height:100%;object-position:center;}
  .path--stack .path__num,.path--stack .path__step h3,.path--stack .path__step p{z-index:2;}
}

/* Стрелочная карусель аппаратов: без липкой сцены и без горизонтального
   движения от вертикального скролла. */
.machines--carousel .machines__pin{height:auto;}
.machines--carousel .machines__scene{position:relative;height:min(860px,100svh);min-height:700px;
  transition:background-color .45s var(--ease);}
.machines--carousel .machines__track{position:absolute;inset:0;display:block;transform:none!important;will-change:auto;}
.machines--carousel .machines__slide{position:absolute;inset:0;width:100%;height:100%;}
.machines--carousel .machines__slide.is-active{animation:machineIn .55s var(--ease) both;}
@keyframes machineIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.machines--carousel .machines__next{display:none;}
.machines__nav{position:absolute;right:var(--gutter);top:calc(var(--header-h) + 12px);bottom:auto;z-index:6;display:flex;gap:8px;}
.machines__nav button{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line-strong);
  border-radius:50%;background:rgba(251,248,243,.88);cursor:pointer;font-size:20px;
  backdrop-filter:blur(6px);transition:background .2s ease,color .2s ease,opacity .2s ease;}
.machines__nav button:hover:not(:disabled){background:var(--ink);color:var(--bone);}
.machines__nav button:disabled{opacity:.3;cursor:not-allowed;}
.machines__info > .btn + .btn{margin-left:7px;}

@media(max-width:760px){
  .dent-quiz__choices,.dent-quiz__choices--wide{grid-template-columns:1fr;}
  .dent-quiz__back{position:static;margin-bottom:22px;}
  .dent-quiz__restart{width:100%;margin:10px 0 0;text-align:left;}
  .package-row > summary{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;}
  .package-row > summary::after{grid-column:3;grid-row:1;}
  .package-row__price{grid-column:2;grid-row:2;}
  .package-row__body{margin-left:0;grid-template-columns:1fr;}
  .package-variant__head{display:block;}
  .package-variant__price{justify-items:start;text-align:left;margin-top:10px;}
  .about-rating-numbers{grid-template-columns:1fr;gap:clamp(28px,8vw,40px);}
  .about-rating-number{font-size:clamp(70px,25vw,112px);}
  .blog-item summary{grid-template-columns:1fr auto;gap:8px 18px;}
  .blog-item__index,.blog-item__title,.blog-item__lead{grid-column:1;}
  .blog-item summary::after{grid-column:2;grid-row:1/4;}
  .blog-item__body{margin-left:0;}
  .route-map__head{grid-template-columns:1fr;gap:16px;}
  .route-map__switch{grid-template-columns:1fr;}
  .route-map__canvas svg{width:100%;height:300px;aspect-ratio:auto;}
  .route-map__caption{align-items:flex-start;flex-direction:column;gap:12px;}
  .machines--carousel .machines__scene{height:max(740px,100svh);min-height:0;}
  .machines__nav button{width:42px;height:42px;}
  .machines__info > .btn{margin:5px 5px 0 0;}
  .machines__info > .btn + .btn{margin-left:0;}
}

@media(prefers-reduced-motion:reduce){
  .machines--carousel .machines__slide.is-active{animation:none;}
  .route-map__reveal{animation:none!important;stroke-dashoffset:0;}
  .route-map__pulse{animation:none;opacity:.5;}
  .route-map__route,.route-map__switch button{transition:none;}
}