/* «Дело Кожи» — копия сайта для домена (tools/build-dk.mjs, папка dk-site, порт 9500). Внутренние страницы — в оформлении
   главной (/variant/): стена студии с золотистыми волнами (waves.js), всё читаемое — на тёплом молочном стекле, заголовки —
   фирменным Patefon в два тона синего (шрифты — client.css, html[data-font="4"]). Заглушек фото в копии нет (build-dk.mjs
   убирает figure.ph) — блоки, где было фото, собираются в одну колонку (:has). Когда клиника пришлёт фото, они встанут на
   свои места (img вместо заглушки) — правила ниже срабатывают только там, где фото нет */

html { background: #ddd0c1; }
body.page.dk { background: radial-gradient(120% 90% at 72% 10%, #f0e6da 0%, #e2d5c6 55%, #cdbca9 100%) fixed; }
.dk-waves { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.dk-waves.on { opacity: 1; }
.dk main { z-index: 2; }

/* ── стекло — как плашки главной: молочное, тёплое; чуть плотнее (на внутренних страницах много текста) ── */
.dk .glass { background: linear-gradient(to bottom, rgba(250, 246, 239, 0.76) 0%, rgba(250, 246, 239, 0.84) 100%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .glass::before { display: none; }
.dk .glass.accent { background: var(--blue); border-color: rgba(255, 255, 255, 0.25); }
.dk .glass.warm { background: linear-gradient(150deg, rgba(255, 236, 212, 0.92), rgba(250, 246, 239, 0.84)); }

/* ── заголовки — фирменный Patefon, глубокий синий + синий акцент (как на главной) ── */
.dk .h1, .dk .h2, .dk .h3, .dk .cardp h3, .dk .step h3, .dk .person h3, .dk .bk-title, .dk .quiz-q, .dk .prose h2, .dk .prose h3,
.dk .stat b, .dk .pg-hero-tag b, .dk .case-c p, .dk .doc-c p {
  font-family: var(--head), var(--font); font-weight: 700; letter-spacing: -0.01em; }
.dk .h1, .dk .h2, .dk .bk-title { color: var(--ink); }
.dk .h1 { font-size: clamp(34px, 3.5vw, 58px); line-height: 1.04; }
.dk .h2 { font-size: clamp(28px, 2.6vw, 44px); line-height: 1.06; }
.dk .h1 .acc, .dk .h1 .acc-t, .dk .h2 .acc, .dk .h2 .acc-t, .dk .bk-title .acc-t { color: var(--blue); }
.dk .cardp h3, .dk .step h3 { font-size: 19px; line-height: 1.2; }
.dk .person h3 span { font-family: var(--font); font-weight: 400; }
.dk .glass.accent h3 { color: #fff; }

/* ── первый экран страницы: текст — на стеклянной плашке (как первый экран главной); без фото — плашка во всю колонку,
   рядом — отметка (pg-hero-tag: «Бесплатно», «5.0» и т. п.) отдельной плашкой ── */
.dk .pg-hero { padding-top: calc(var(--hdr) + 4vh); align-items: end; }
.dk .pg-hero-copy { padding: clamp(26px, 3vw, 48px); border-radius: 28px; max-width: 900px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.7) 0%, rgba(250, 246, 239, 0.8) 100%); border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .pg-hero:not(:has(.pg-hero-media img)) { grid-template-columns: minmax(0, 1fr) auto; }
.dk .pg-hero-media:not(:has(img)) { position: relative; height: auto; align-self: end; }
.dk .pg-hero-media:not(:has(img)) .pg-hero-tag { position: static; display: block; max-width: 300px; padding: 22px 26px; border-radius: 24px; }
.dk .pg-hero-tag b { font-size: clamp(26px, 2.2vw, 34px); }
.dk .pg-hero-tag span { font-size: 14px; }
.dk .pg-hero.slim .pg-hero-copy { max-width: 900px; }
/* первый экран С ФОТО (10.11, фото клиники; владелец: «фото такого формата странно выглядят — расположи их лучше»): фото —
   такая же скруглённая карточка, как плашка с текстом, той же высоты и вровень с ней (было: ниже плашки и короче,
   прижато к её низу); без фирменной кривой-маски (page.css: container.svg растягивалась под любую пропорцию окна и
   давала слева острый «клин»); плашка — во всю свою колонку, промежуток — как между плашками на странице */
@media (min-width: 861px) {
  .dk .pg-hero:has(.pg-hero-media img) { align-items: stretch; column-gap: clamp(16px, 2vw, 28px); }
  .dk .pg-hero:has(.pg-hero-media img) .pg-hero-copy { max-width: none; justify-content: center; }
  .dk .pg-hero-media:has(img) { height: auto; min-height: clamp(320px, 54vh, 540px); }
}

/* ── заголовок раздела — на стеклянной плашке, как заголовки блоков главной (10.11, владелец: «„Почему «Дело Кожи»“ — просто
   чёрный текст, вообще никак не вписывается в общую концепцию… сделай прям супер красиво»). build-dk.mjs (decorateHeads):
   синяя часть заголовка; подпись — справа через тонкую линию (телефон — под заголовком); по краю плашки — едва заметный
   свет из угла, как на стекле; проявляется вся плашка разом.
   10.11 вечер (владелец: «в подобных формах убрать логотип, центрировать текст и форму уменьшить чуть»): знака и надписи
   над заголовком нет, заголовок и подпись стоят по центру плашки по высоте, поля меньше — плашка ниже ── */
.dk .sec-head { position: relative; isolation: isolate; overflow: hidden; align-items: center; column-gap: clamp(28px, 4vw, 72px);
  margin-bottom: clamp(16px, 1.8vw, 24px); padding: clamp(18px, 1.7vw, 26px) clamp(24px, 2.6vw, 40px); border-radius: 24px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.72) 0%, rgba(250, 246, 239, 0.82) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .sec-head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 140% at 0% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%); }
.dk .sec-head .h2 { max-width: 16em; margin: 0; }
.dk .sec-head .lead { justify-self: stretch; align-self: center; max-width: 36em; margin: 0; padding-left: clamp(22px, 2.4vw, 40px);
  border-left: 1px solid rgba(22, 41, 74, 0.12); line-height: 1.5; color: var(--ink2); opacity: 1; }
.dk .sec-head .lead .link { white-space: nowrap; }
@media (max-width: 860px) {
  .dk .sec-head { padding: 18px 20px; border-radius: 22px; row-gap: 12px; }
  .dk .sec-head .lead { padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(22, 41, 74, 0.12); }
}

/* та же плашка — у остальных заголовков, что лежали прямо на фоне (проверка — tools/check/bare-heads.mjs):
   «Результаты» → «За каждым снимком стоит путь» (вся строка: заголовок | текст и кнопка); «Вопросы» → группы
   (заголовок и подпись слева от вопросов, с номером группы 01–04 терракотой, как у шагов) */
/* (.qa-side в исходнике прилипал при прокрутке — sticky; 10.11 вечер, владелец: «почему форма „Лечение“ идёт вниз вместе со
   скроллом» → стоит на месте, вверху своей группы; top обнулён, иначе он сдвигал бы плашку вниз) */
.dk .rz-path, .dk .qa-side { position: relative; }
.dk .qa-side { top: auto; }
.dk .rz-path, .dk .qa-side { isolation: isolate; overflow: hidden; border-radius: 28px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.72) 0%, rgba(250, 246, 239, 0.82) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .rz-path::before, .dk .qa-side::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 140% at 0% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%); }
/* «За каждым снимком стоит путь» (10.11 поздно вечером, владелец: «много свободного места от текста сверху и снизу»):
   строка «заголовок — кнопка», под тонкой линией — два абзаца в две колонки во всю ширину (как у «Философии») */
.dk .rz-path { display: block; margin-bottom: clamp(16px, 1.8vw, 24px); padding: clamp(22px, 2.2vw, 34px) clamp(24px, 2.8vw, 44px); border-radius: 24px; }
.dk .rz-path-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.dk .rz-path-h .h2 { margin: 0; max-width: none; }
.dk .rz-path-t { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(28px, 4vw, 64px);
  margin-top: clamp(16px, 1.6vw, 24px); padding-top: clamp(16px, 1.6vw, 24px); border-top: 1px solid rgba(22, 41, 74, 0.12); }
.dk .rz-path-t .lead { max-width: none; margin: 0; line-height: 1.5; color: var(--ink2); }
.dk main { counter-reset: qa; }
.dk .qa-side { gap: 12px; padding: clamp(24px, 2.2vw, 34px); }
.dk .qa-side::before { counter-increment: qa; content: counter(qa, decimal-leading-zero); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--terra); }
.dk .qa-side .lead { padding-top: 12px; border-top: 1px solid rgba(22, 41, 74, 0.12); color: var(--ink2); }
/* «Команда» (своя страница копии, dk-src/pages/komanda; 10.11 вечер, владелец: «почему бейджик и голова не помещаются
   полностью»; «тавтология… и формы разные — сделай, чтобы логично было»): у всех — одна карточка одной ширины в обоих
   разделах (врач + 4 косметолога, администрация — 3, по центру); портрет целиком, как снят — 4:5, голова и бейдж в кадре */
.dk .people.team { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; --n: 5; }
.dk .people.team > .person { flex: 0 0 calc((100% - (var(--n) - 1) * 16px) / var(--n)); min-width: 0; }
.dk .people.team > .person > img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
@media (max-width: 1100px) { .dk .people.team { --n: 3; } }
@media (max-width: 600px) { .dk .people.team { --n: 2; gap: 10px; } .dk .people.team > .person { flex-basis: calc((100% - 10px) / 2); } }

/* «Контакты» → «Как связаться» (10.11 вечер, владелец: «„Онлайн — Форма записи внизу страницы“ убрать, всё остальное
   разместить нормально»): синяя часть заголовка, как у остальных плашек; четыре строки делят высоту плашки поровну
   (она одной высоты с картой), телефон — крупно фирменным шрифтом */
.dk .contacts-split .contact-list { flex: 1; align-self: stretch; }
.dk .contacts-split .contact-list li { flex: 1; align-items: center; }
.dk .contacts-split .contact-list li:last-child { border-bottom: 0; }
.dk .contacts-split .contact-list li span { padding-top: 0; }
.dk .contacts-split .contact-list a[href^="tel:"] { font-family: var(--head), var(--font); font-weight: 700; font-size: clamp(20px, 1.6vw, 24px); color: var(--blue); white-space: nowrap; }
@media (max-width: 860px) {
  .dk .rz-path { padding: 22px 20px; border-radius: 24px; }
  .dk .rz-path-t { grid-template-columns: minmax(0, 1fr); }
  .dk .qa-side { padding: 22px 20px; border-radius: 24px; }
}

/* ── «Цена» рядом с «Противопоказаниями» (мезотерапия; 10.11, владелец: «насколько они разные в размере»): было — голый
   заголовок «Цена», под ним маленькая плашка с одной строкой и подпись, рядом высокая карточка противопоказаний. Теперь
   слева — одна плашка той же высоты и вида, что и карточка справа: метка, заголовок, строка цены, внизу — пометка ── */
.dk .mz-price { display: flex; flex-direction: column; padding: 24px; border-radius: 24px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.76) 0%, rgba(250, 246, 239, 0.84) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
/* заголовок — как «Противопоказания» в соседней карточке (тот же размер) */
.dk .mz-price > .h2 { margin-bottom: 0 !important; font-size: 19px; line-height: 1.2; }
.dk .mz-price > .glass.price { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dk .mz-price .price-g h3 { padding-top: 14px; }
/* цена — крупно, фирменным шрифтом и синим (как «от 6 000 ₽» на первом экране) */
.dk .mz-price .price-row { align-items: center; }
.dk .mz-price .price-row .v { font-family: var(--head), var(--font); font-weight: 700; font-size: clamp(26px, 2vw, 32px); letter-spacing: -0.01em; color: var(--blue); }
/* (строка цены — посередине между заголовком и пометкой: пустого места одним куском в плашке нет) */
.dk .mz-price > .glass.price { margin: auto 0; }
.dk .mz-price > .price-note { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.dk .mz-price .price-row { border-bottom: 0; }
.dk .cards-g.c2:has(> .mz-price) { align-items: stretch; }

/* ── «текст + фото»: текст — на плашке (как всё читаемое на главной); без фото — плашка во всю ширину колонки ── */
.dk .split:not(:has(.split-media)) { grid-template-columns: minmax(0, 1fr); }
.dk .split:not(:has(.split-media)) > .split-copy { max-width: 980px; }
.dk .split > .split-copy { padding: clamp(26px, 3vw, 48px); border-radius: 28px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.76) 0%, rgba(250, 246, 239, 0.84) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }

/* ── акции: без фото — одна колонка; светло-терракотовая плашка — тёплое стекло ── */
.dk .promo:not(:has(.promo-media)) { grid-template-columns: minmax(0, 1fr); }
.dk .promo.terra { background: linear-gradient(150deg, rgba(255, 236, 212, 0.92), rgba(250, 246, 239, 0.84)); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45); }
/* фото в карточке акции (10.11): не срез фирменной кривой (та же растянутая маска, что была на первом экране), а снимок
   со скруглёнными углами внутри карточки, с ровным отступом от её краёв */
.dk .promo-media > img { -webkit-mask: none; mask: none; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 22px; }


/* ── «О клинике» → «Клиника изнутри» (10.11, фото клиники; владелец: «фото странно понапиханы — сделай норм»): было — крупный
   ресепшен на два ряда, рядом два маленьких, внизу два огромных (четыре разных размера, нижний ряд выше верхнего). Теперь —
   два ровных ряда: две половины (ресепшен, зона ожидания) и три трети (кабинет врача, процедурный, фасад), все 4:3, мягкая
   тень, как у карточек. Телефон — как был (ресепшен во всю ширину, под ним 2×2; page.css) ── */
.dk .gallery:not(.g4) { gap: 14px; }
@media (min-width: 861px) {
  .dk .gallery:not(.g4) > *, .dk .gallery:not(.g4) > .big, .dk .gallery:not(.g4) > .half { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .dk .gallery:not(.g4) > :nth-child(-n+2) { grid-column: span 3; }
}

/* ── фото на страницах — в стеклянной рамке (10.11, владелец: «подбери красивое оформление для фото — сейчас они как будто
   пустые относительно заднего фона и форм с текстом; не нарушай геометрию», потом: «ещё лучше сможешь сделать?»).
   build-dk.mjs (framePhotos) кладёт отдельно стоящее фото — первый экран, галереи, «текст + фото» — в
   figure.dk-ph > span.dk-ph-in > img. Рамка .dk-ph занимает РОВНО место прежнего img (те же правила размеров ниже;
   сверка — tools/check/photo-geom.mjs); внутри — стекло цвета плашек с бликом из верхнего угла, белая кромка, тень
   плашек; снимок — в окне .dk-ph-in (отступ --m, скругление = рамка − отступ), по его краю — тонкий блик; мышью — снимок
   медленно приближается внутри окна (рамка стоит). Подписей на фото нет (владелец: «подписи у фото точно убирай»).
   В карточках (направления, акции, запись) фото без рамки — рамка там сама карточка ── */
.dk .dk-ph { --r: 26px; --m: 8px; position: relative; display: block; margin: 0; border-radius: var(--r); isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 246, 239, 0.82) 34%, rgba(246, 237, 225, 0.86) 100%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 22px 54px -34px rgba(66, 47, 25, 0.55), 0 2px 6px -4px rgba(66, 47, 25, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.dk .pg-hero-media > .dk-ph { --r: 28px; }
.dk .gallery > .dk-ph { --r: 22px; }
.dk .dk-ph-in { position: absolute; inset: var(--m); overflow: hidden; border-radius: calc(var(--r) - var(--m) - 1px); background: #ebe5dd; }
.dk .dk-ph-in > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  object-fit: cover; border: 0; border-radius: 0; -webkit-mask: none; mask: none; }
/* по краю снимка — тонкий светлый блик и едва заметный свет из верхнего угла, как на стекле */
.dk .dk-ph-in::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); background: linear-gradient(150deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 32%); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dk .dk-ph-in > img { transition: transform 1.6s var(--ease); }
  .dk .dk-ph:hover .dk-ph-in > img { transform: scale(1.035); }
}
/* размеры рамки — как были у img: первый экран — во весь блок; «текст + фото» — 5:4 (wide — 16:10) до 520 px, с 861 px — во
   всю высоту плашки (ниже, в @media); галерея — правила сетки .gallery > * (page.css, dk.css) */
.dk .pg-hero-media > .dk-ph { position: absolute; inset: 0; }
.dk .split-media > .dk-ph { width: 100%; aspect-ratio: 5 / 4; height: auto; max-height: 520px; }
.dk .split-media.wide > .dk-ph { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .dk .dk-ph { --m: 5px; }
  .dk .pg-hero-media > .dk-ph { --r: 24px; }
}

/* ── «Наверх» на внутренних страницах (up.js; 10.11) — как на главной: компьютер — стеклянная плашка «Наверх» со стрелкой
   справа внизу, телефон — круглый значок; появляется, когда первый экран ушёл; пока открыты меню или запись — не видна ── */
.dk-up { position: fixed; z-index: 39; right: var(--pad); bottom: 34px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-radius: 999px; font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); cursor: pointer;
  background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0); transition: opacity 0.5s ease, transform 0.6s var(--ease), visibility 0s linear 0.5s; }
.dk-up.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease, transform 0.6s var(--ease); }
.dk-up i { width: 10px; height: 10px; border-left: 1.5px solid; border-top: 1.5px solid; transform: rotate(45deg) translate(2px, 2px); }
.menu-open .dk-up.on, .modal-open .dk-up.on { opacity: 0; visibility: hidden; }
@media (max-width: 760px) {
  .dk-up { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 40px; height: 40px; padding: 0; justify-content: center;
    background-color: rgba(250, 247, 243, 0.86); border-color: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 1px 0 #fff, 0 10px 30px -18px rgba(22, 41, 74, 0.45); }
  .dk-up span { display: none; }
}

/* ── юридические тексты — на плашке ── */
.dk .prose { padding: clamp(26px, 3.4vw, 56px); border-radius: 28px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.84) 0%, rgba(250, 246, 239, 0.9) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45); }
.dk .prose .ed { font-size: 14px; color: var(--ink2); }

/* ── карта — в белой рамке, как на главной ── */
.dk .map { border: 5px solid rgba(255, 255, 255, 0.82); border-radius: 22px; box-shadow: 0 24px 46px -30px rgba(22, 41, 74, 0.5); background: linear-gradient(160deg, #ece8e4, #e2ddd7); }

/* ── запись (только «Консультация», «Лечение акне», «Акции», «Контакты»): без фото — одна плашка с формой ── */
.dk .bk-in { background: linear-gradient(to bottom, rgba(250, 246, 239, 0.84) 0%, rgba(250, 246, 239, 0.9) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .bk-in:not(:has(.bk-media img)) { grid-template-columns: minmax(0, 1fr); }
.dk .bk-media:not(:has(img)) { display: none; }
.dk .bk-main { max-width: 980px; }

/* ── 404 ── */
.dk .e404::after { background: rgba(255, 255, 255, 0.55); opacity: 0.6; }

/* ── «Команда» → «Администрация»: с 10.11 три карточки (портреты Мингазовой и Воротниковой со старого сайта убраны,
      build-dk.mjs) — на компьютере в один ряд, где по две в ряд — третья по центру ── */
@media (min-width: 1101px) { .dk .people.three { --cols: 3; } }
@media (max-width: 1100px) { .dk .people.three > .person:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); } }
@media (max-width: 600px) { .dk .people.three > .person:last-child:nth-child(odd) { width: calc(50% - 5px); } }

/* ═══ 10.11.2026, правки владельца по внутренним страницам ═══ */

/* шапка — на тех же местах, что на главной: от края до края с полями var(--pad), а не в колонке 1360 px
   (base.css: .page .hdr → var(--gut)) — при переходе с главной ничего не съезжает к центру */
.dk .hdr { padding-left: var(--pad); padding-right: var(--pad); }

/* первый экран без фото: отметка («5.0», «10 визитов», цена) — не отдельной маленькой плашкой сбоку, а внутри плашки
   с текстом, под кнопками, через тонкую линию (build-dk.mjs переносит p.pg-hero-tag в .pg-hero-copy → .pg-hero-stat) */
.dk .pg-hero:not(:has(.pg-hero-media)) { grid-template-columns: minmax(0, 1fr); }
.dk .pg-hero-copy > .pg-hero-stat { position: static; z-index: auto; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px;
  align-self: stretch; max-width: none; margin-top: clamp(8px, 1.2vw, 16px); padding: clamp(18px, 1.8vw, 24px) 0 0; border: 0;
  border-top: 1px solid rgba(22, 41, 74, 0.12); border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dk .pg-hero-copy > .pg-hero-stat b { font-size: clamp(28px, 2.4vw, 38px); white-space: nowrap; }
.dk .pg-hero-copy > .pg-hero-stat span { margin-top: 0; font-size: 15px; max-width: 30em; }

/* синяя полоса (.band, «Команда» и др.): заголовок — белый (общее правило выше красило его тёмным) */
.dk .band .h2, .dk .band .h3 { color: #fff; }

/* «текст + фото»: плашка с текстом и фото — одной высоты (фото заполняет высоту плашки) */
@media (min-width: 861px) {
  .dk .split:has(> .split-media > img), .dk .split:has(> .split-media > .dk-ph) { align-items: stretch; }
  .dk .split-media:has(> img), .dk .split-media:has(> .dk-ph) { min-height: 380px; }
  .dk .split-media > img, .dk .split-media > .dk-ph { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
  /* «до/после» рядом с текстом («Лечение акне» → «Результаты»): снимок не больше 540 px в ширину, плашка — его высоты,
     текст в ней по центру */
  .dk .split:has(> .split-media > .ba) { align-items: stretch; }
  .dk .split-media:has(> .ba) { width: 100%; max-width: 540px; justify-self: end; }
  .dk .split.rev .split-media:has(> .ba), .dk .split-copy + .split-media:has(> .ba) { justify-self: start; }
  .dk .split:has(> .split-media > .ba) > .split-copy { justify-content: center; }
}

/* «О клинике» → «Лицензия и заключения»: текст слева, документы справа; текст не прилипает при прокрутке (раньше
   плашка ехала вниз поверх документов — в копии раздел сложился в одну колонку, а липкость осталась) */
.dk .docs-split .split-copy { position: static; }
@media (min-width: 861px) {
  .dk .split.docs-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}

/* «Тест на акне»: вопросы — той же ширины и по тому же левому краю, что плашка заголовка (раньше — по центру, уже) */
.dk .quiz { margin-left: 0; max-width: 900px; }
.dk .qz-fine { margin-left: 0; max-width: 900px; text-align: left; }

/* «Вопросы и ответы»: ответ раскрывается плавно (faq.js); при закрытии плюс поворачивается сразу */
.dk .faq details.closing summary::after { transform: none; }

/* «Контакты»: «Как связаться» и карта — рядом, одной высоты (раньше карта уходила отдельным блоком под плашку) */
@media (min-width: 861px) {
  .dk .split.contacts-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; gap: clamp(16px, 2vw, 28px); }
  .dk .contacts-split > .split-copy { max-width: none; }
  .dk .contacts-split .map { min-height: 520px; height: 100%; }
}

/* подвал — как на главной (b10.css, body.variant .ftr): сплошное синее поле без бледного знака, шрифты главной;
   переход к нему плавный — низ страницы уходит в синий длинным градиентом (владелец 10.11: «разретушируй футер на
   других страницах так же, как на главной»). Градиент — над подвалом, позади содержимого страницы (main выше по z) */
.dk .ftr { z-index: 1; overflow: visible; margin-top: clamp(150px, 22vh, 240px); padding: clamp(64px, 9vh, 100px) var(--gut) calc(30px + env(safe-area-inset-bottom));
  background: var(--blue); font-family: var(--font); }
.dk .ftr::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% - 1px); width: auto; max-width: none;
  height: clamp(300px, 46vh, 460px); aspect-ratio: auto; opacity: 1; pointer-events: none; -webkit-mask: none; mask: none;
  background: linear-gradient(to bottom, rgba(39, 93, 167, 0) 0%, rgba(39, 93, 167, 0.04) 18%, rgba(39, 93, 167, 0.12) 34%,
    rgba(39, 93, 167, 0.27) 50%, rgba(39, 93, 167, 0.48) 65%, rgba(39, 93, 167, 0.72) 80%, rgba(39, 93, 167, 0.9) 91%, #275da7 100%); }
.dk .ftr-top { gap: clamp(28px, 4vw, 64px); padding-bottom: clamp(40px, 6vh, 60px); border-bottom-color: rgba(255, 255, 255, 0.2); }
.dk .ftr-logo { width: min(380px, 100%); }
.dk .ftr-slogan { margin-top: 26px; max-width: 13em; font-family: var(--head), var(--font); font-weight: 700; font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1.12; letter-spacing: -0.005em; color: #fff; }
.dk .ftr h4 { margin-bottom: 14px; font: 600 13px/1.2 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.dk .ftr-col a, .dk .ftr-col p { font-size: 17px; line-height: 1.4; padding: 5px 0; color: rgba(255, 255, 255, 0.92); }
.dk .ftr-col a:hover { color: #fff; }
.dk .ftr .ftr-tel { margin-top: 8px; font-family: var(--head), var(--font); font-weight: 700; font-size: 24px !important; line-height: 1.2; color: #fff; white-space: nowrap; }
.dk .ftr-bot { gap: 14px 30px; padding-top: 24px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.dk .ftr-legal { gap: 6px 24px; }
.dk .ftr-legal a { font-size: 15px; color: rgba(255, 255, 255, 0.88); }
.dk .ftr-bot a:hover { color: #fff; }
.dk .ftr-warn { margin-top: 10px; padding-top: 24px; font-family: var(--head), var(--font); font-weight: 700; font-size: clamp(16px, 1.55vw, 24px);
  letter-spacing: 0.05em; line-height: 1.3; color: rgba(255, 255, 255, 0.94); }
@media (max-width: 760px) {
  .dk .ftr { margin-top: 110px; padding: 52px 20px calc(28px + env(safe-area-inset-bottom)); }
  .dk .ftr::before { height: 320px; }
  .dk .ftr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px 18px; padding-bottom: 34px; }
  .dk .ftr-brand, .dk .ftr-col:last-child { grid-column: 1 / -1; }
  .dk .ftr-logo { width: min(290px, 100%); }
  .dk .ftr-slogan { margin-top: 20px; font-size: 24px; }
  .dk .ftr h4 { margin-bottom: 10px; font-size: 12.5px; }
  .dk .ftr-col a, .dk .ftr-col p { padding: 6px 0; }
  .dk .ftr .ftr-tel { margin-top: 6px; font-size: 27px !important; }
  .dk .ftr-bot { flex-direction: column; gap: 14px; padding-top: 24px; }
  .dk .ftr-legal { flex-direction: column; align-items: flex-start; gap: 0; }
  .dk .ftr-legal a { padding: 6px 0; }
  .dk .ftr-warn { margin-top: 6px; padding-top: 22px; font-size: 16px; line-height: 1.35; text-align: left; }
}

@media (max-width: 860px) {
  .dk .pg-hero:not(:has(.pg-hero-media img)) { grid-template-columns: minmax(0, 1fr); }
  .dk .pg-hero-media:not(:has(img)) .pg-hero-tag { max-width: none; }
  .dk .pg-hero-copy { padding: 22px 20px 22px; border-radius: 24px; }
  .dk .split > .split-copy, .dk .prose { padding: 22px 20px; border-radius: 24px; }
}

/* ═══ 10.11 вечер: текст внутренних страниц крупнее (владелец: «на этих страницах можно увеличить весь текст, он какой-то
   мелкий»; потом ещё раз: «текст как будто всё ещё мелкий… остаются формы, в которых текст мелкий» — вторая ступень).
   Основной текст — 17–19 px (в исходнике 14–16), вводные абзацы — до 22 px, пояснения — от 14,5 px, капс — от 12,5 px,
   заголовки карточек — 23 px (в исходнике 19). Проверка — tools/check/text-sizes.mjs (что осталось мельче порога).
   Телефон: основной текст тоже крупнее; карточки людей в две колонки — как были (иначе фамилии не помещаются) ═══ */
.dk .lead { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; }
.dk .crumbs { font-size: 15px; }
.dk .fine { font-size: 14.5px; line-height: 1.5; }
.dk .label { font-size: 13.5px; }
.dk .badge { font-size: 13px; }
.dk .ticks li { font-size: 18px; }
.dk .cardp p { font-size: 17.5px; line-height: 1.5; }
.dk .cardp .meta { font-size: 16px; }
.dk .cardp .meta b { font-size: 20px; }
.dk .cardp .go { font-size: 16.5px; }
.dk .step p { font-size: 17px; line-height: 1.5; }
.dk .step h3::before { font-size: 13.5px; margin-bottom: 16px; }
.dk .price-g h3 { font-size: 13.5px; }
.dk .price-row .d { font-size: 15.5px; }
.dk .price-note { font-size: 15.5px; }
.dk .faq .a { font-size: 17.5px; }
.dk .person h3 span { font-size: 16px; }
.dk .person .role { font-size: 12.5px; }
.dk .person .bio { font-size: 15.5px; }
.dk .contact-list li span { font-size: 12.5px; }
.dk .doc-c span { font-size: 14.5px; }
.dk .pg-hero-tag span { font-size: 16px; }
.dk .quiz-n { font-size: 13.5px; }
.dk .quiz-hint { font-size: 16.5px; }
.dk .scale-l { font-size: 15px; }
.dk .fld > span { font-size: 12.5px; }
.dk .agree { font-size: 14.5px; }
.dk .bk-steps li { font-size: 16px; }
.dk .bk-steps b { font-size: 17.5px; }
.dk .bk-or { font-size: 15.5px; }
.dk .bk-card-v { font-size: 16px; }
.dk .prose .ed { font-size: 15.5px; }
.dk .qa-nav a { font-size: 16.5px; }
.dk .about-copy p:not(.label):not(.lead), .dk .mz-more { font-size: 18px; }
/* (обычные абзацы в плашках «текст + фото» — у страниц услуг свои классы: la-copy-more, kc-more, ch-more, pz-more…) */
.dk .split-copy > p:not(.lead):not(.fine):not(.label):not(.price-note) { font-size: 18px; line-height: 1.55; }
.dk .promo .fine, .dk .promo.blue .fine { font-size: 14.5px; }
.dk .mz-price > .h2 { font-size: 23px; }
.dk main .cta:not(.cta-lg) { font-size: 16px; }
@media (min-width: 861px) {
  .dk .cardp h3, .dk .step h3 { font-size: 23px; }
  .dk .person h3 { font-size: 22px; }
  .dk .price-row .n { font-size: 18.5px; }
  .dk .price-row .v { font-size: 20px; }
  .dk .faq summary { font-size: 19px; }
  .dk .contact-list li { font-size: 18.5px; }
  .dk .doc-c p { font-size: 17px; }
  .dk .opt span { font-size: 18px; }
  .dk .prose { font-size: 18px; }
  .dk .prose h2 { font-size: 26px; }
  .dk .prose h3 { font-size: 21px; }
}
@media (max-width: 600px) {
  .dk .lead { font-size: 17px; }
  .dk .ticks li { font-size: 16.5px; }
  .dk .cardp p, .dk .step p, .dk .faq .a { font-size: 16.5px; }
  .dk .person h3 span { font-size: 13.5px; }
  .dk .person .bio { font-size: 13px; }
  .dk .person .role { font-size: 11px; }
  .dk .mz-price > .h2 { font-size: 20px; }
}

/* ── «О клинике» → «Философия» (10.11 вечер, владелец: «можно увеличить текст и уменьшить форму — здесь много свободного
   места»; потом: «то, что в кавычках, можно по центру, и текст как будто всё ещё мелкий»): подписи-метки нет, цитата
   крупная и по центру плашки, под тонкой линией — два абзаца во всю ширину, крупнее; поля и промежутки небольшие ── */
.dk .quote { padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.8vw, 44px); }
.dk .quote blockquote { max-width: 30em; margin: 0 auto; text-align: center; font-size: clamp(25px, 2.6vw, 42px); line-height: 1.18; text-wrap: balance; }
.dk .quote-more { max-width: none; margin-top: clamp(18px, 1.8vw, 28px); padding-top: clamp(18px, 1.8vw, 28px); gap: 12px clamp(28px, 4vw, 64px); }
.dk .quote-more p { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; }

/* ── цифры (.stats — «О клинике», «Результаты»; 10.11 поздно вечером, владелец: «то, что после кнопки, — вот эти формочки
   выглядят непонятно, сделай красиво»): было — три высокие полупустые плашки, цифра в углу и мелкая подпись под ней.
   Теперь — одна стеклянная полоса: три колонки через тонкие линии, в каждой крупная синяя цифра и рядом её подпись
   (читается одной строкой: «7 — клиник в сети»); телефон — три строки друг под другом ── */
.dk .stats { gap: 0; padding: clamp(20px, 2vw, 30px) clamp(6px, 0.8vw, 14px); border-radius: 24px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.72) 0%, rgba(250, 246, 239, 0.82) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .stats > .stat { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 24px); min-width: 0; padding: 2px clamp(16px, 2vw, 34px); border-radius: 0;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dk .stats > .stat + .stat { border-left: 1px solid rgba(22, 41, 74, 0.12); }
.dk .stats .stat b { flex: none; font-size: clamp(50px, 4.6vw, 76px); line-height: 0.9; letter-spacing: -0.02em; white-space: nowrap; }
.dk .stats .stat span { flex: 1; min-width: 0; margin: 0; max-width: 17em; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.35; color: var(--ink); }
.dk .stats-note { margin-top: 14px; padding: 0 clamp(8px, 1vw, 16px); }
@media (max-width: 860px) {
  .dk .stats { padding: 4px 20px; }
  .dk .stats > .stat { gap: 16px; padding: 16px 0; }
  .dk .stats > .stat + .stat { border-left: 0; border-top: 1px solid rgba(22, 41, 74, 0.12); }
  .dk .stats .stat b { min-width: 2.3em; font-size: 46px; }
  .dk .stats .stat span { font-size: 16px; }
}

/* ── «Услуги» → синяя карточка «Комплексное лечение акне» (главное направление, без фото; значок «10» убран — «тут зачем
   10»): заголовок крупнее, «Подробнее» — у нижнего края карточки (у соседних карточек с фото там же строка цены) ── */
.dk a.cardp.accent > h3:first-child { font-size: clamp(24px, 2vw, 30px); line-height: 1.12; }
.dk a.cardp.accent > .go:last-child { margin-top: auto; padding-top: 14px; }

/* ═══ 11.11 вечер: все плашки и рамки — на одной сетке (владелец: «все вот такие рамки нужно уровнять с верхними»; «нижний
   блок расширить, странно смотрится; пользовательское соглашение тоже»). Замер на 1280 px (tools/check/q-edges.js) показал:
   · блоки «текст + фото» делили ширину иначе, чем первый экран: колонки 1 : 1 с промежутком 5vw (601 | 665) против
     1 : 0,92 и 28 px у первого экрана (644 | 670); «Лицензия» (1 : 1,05) и «Контакты» (1 : 1,1) — каждый по-своему;
   · первый экран без фото — 900 px, а всё под ним — во всю ширину (1189 px); «Политика» и «Соглашение» — текст 800 px.
   Теперь: двухколоночные блоки — колонки и промежуток как у первого экрана (края рамок совпадают по всей странице); первый
   экран без фото и текст документов — во всю ширину, как остальные плашки; подводка первого экрана — по ширине плашки
   (владелец: «курса.» на «Результатах» уходило одно на вторую строку) ═══ */
@media (min-width: 861px) {
  .dk .split:has(> .split-media), .dk .split.docs-split, .dk .split.contacts-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); column-gap: clamp(16px, 2vw, 28px); }
}
.dk .pg-hero-copy, .dk .pg-hero.slim .pg-hero-copy { max-width: none; }
/* (первый экран без фото — одна колонка без промежутка: правило «1fr auto» выше по весу оставляло пустую колонку и 4vw справа) */
.dk main .pg-hero:not(:has(.pg-hero-media)) { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.dk .pg-hero .lead { max-width: 62em; text-wrap: pretty; }
.dk .prose { max-width: none; }
/* «Политика конфиденциальности», «Пользовательское соглашение» — заголовок в одну строку (11.11 вечер, владелец: «можно и в одну
   строку написать»): у первого экрана внутренних страниц заголовок не шире 13em (page.css) — у этих двух (section.pg-doc,
   dk-src/pages) предела нет; на телефоне длинные слова переносятся сами */
.dk .pg-hero.pg-doc .h1 { max-width: none; }
/* телефон: «конфиденциальности» при 34 px — 374 px, шире плашки (внутри ~316 на 390, ~286 на 360) — вылезало за край
   и страница разъезжалась вбок (так было и на боевом); кегль по ширине экрана, слово целиком внутри плашки */
@media (max-width: 760px) {
  .dk .pg-hero.pg-doc .h1 { font-size: min(34px, 7.1vw); }
}