/* «Ваш Здоровый Позвонок Плюс» — облик по DIRECTION.md (mood «прямая осанка»). Кит даёт сантехнику, здесь всё остальное. */
@font-face { font-family: Onest; font-weight: 400; font-display: swap; src: url(../fonts/onest-400.woff2) format("woff2"); unicode-range: U+0020-007E,U+00A0,U+00AB,U+00B0,U+00BB,U+0401,U+0410-044F,U+0451,U+2010-2014,U+2018-201E,U+2022,U+2026,U+2116,U+20BD; }
@font-face { font-family: Onest; font-weight: 500 600; font-display: swap; src: url(../fonts/onest-500.woff2) format("woff2"); unicode-range: U+0020-007E,U+00A0,U+00AB,U+00B0,U+00BB,U+0401,U+0410-044F,U+0451,U+2010-2014,U+2018-201E,U+2022,U+2026,U+2116,U+20BD; }
@font-face { font-family: Literata; font-weight: 300; font-style: italic; font-display: swap; src: url(../fonts/literata-300i.woff2) format("woff2"); unicode-range: U+0020-007E,U+00A0,U+00AB,U+00B0,U+00BB,U+0401,U+0410-044F,U+0451,U+2010-2014,U+2018-201E,U+2022,U+2026,U+2116,U+20BD; }

:root {
  --base: #f5f9fa;      /* safe_base(#F7F8FA): стены кабинетов */
  --tint: #e8eef9;      /* светлая тонировка фирменного синего #4973C5 */
  --card: #ffffff;
  --ink: #16213f;       /* тёмно-синяя форма врачей */
  --muted: #4b5670;
  --line: #d5dce8;
  --blue: #4973c5;      /* фирменный 1: вордмарк */
  --deep: #264988;      /* глубокий синий: полосы «О клинике» и «Запись» */
  --brand: #e20348;     /* фирменный 2: крест «Плюс» — только призыв */
  --brand-ink: #ffffff;
  --gold: #ffcf69;      /* отметка: только на тёмном */
  --dark: #16213f; --on-dark: #f5f9fa; --on-dark-muted: #b3bdd3;
  --serif: Literata, Georgia, serif;
  --sans: Onest, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1440px;       /* 1376 + поля 2×32 */
  --pad: clamp(20px, 2.2vw, 32px);
  --sec: clamp(96px, 11vw, 168px);
  --gap: clamp(24px, 3vw, 48px);
  --top: 72px;
  --r: 2px;             /* углы креста знака — прямые */
  --btn-pad: 0 30px;
  --h1: clamp(46px, 8.4vw, 120px);
  --h2: clamp(34px, 4.7vw, 68px);
  --h3: clamp(22px, 1.9vw, 32px);
  --lead: clamp(18px, 1.55vw, 22px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --tilt: -9.8deg;
}
@media (max-width: 760px) { :root { --top: 60px; --dock: 64px; } }

body { font-size: clamp(17px, 1.25vw, 19px); }
h1, h2, h3 { font-family: var(--sans); font-weight: 500; }
h2 { letter-spacing: -.025em; line-height: .98; }
h3 { letter-spacing: -.015em; line-height: 1.15; }
.lit { font-family: var(--serif); font-style: italic; font-weight: 300; }
a { color: inherit; }
.btn { font-weight: 600; font-size: 16px; min-height: 54px; letter-spacing: -.005em; }
.btn s { font-weight: 400; opacity: .7; }
@media (hover: hover) { .btn:hover { background: #c3003d; border-color: #c3003d; } }
.warn { font-size: 15px; }

/* метка раздела: плюс знака 18 px + номер */
.lbl { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.lbl__plus { width: 18px; height: 18px; fill: var(--brand); }
.lbl--on { color: var(--on-dark-muted); }

/* ================= шапка: светлая, прозрачная над героем ================= */
.top { position: fixed; inset: 0 0 auto; background: transparent; color: var(--ink); }
html:not(.is-hero) .top { background: rgb(247 248 250 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
@supports (animation-timeline: scroll()) { html.is-hero .top { animation: top-fill linear both; animation-timeline: scroll(root); animation-range: 0 24px; } }
@keyframes top-fill { from { background: rgb(247 248 250 / 0); box-shadow: 0 1px 0 transparent; } to { background: rgb(247 248 250 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); } }
.top__row { display: flex; align-items: center; gap: 28px; height: var(--top); max-width: none; }
.brand { display: block; flex: none; }
.brand__logo { width: auto; height: 52px; }
@media (min-width: 1101px) {
  .nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
  .nav__find, .nav__sub { display: none; }
}
.nav a { position: relative; padding: 10px 0; color: var(--ink); font-size: 15px; text-decoration: none; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--brand); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
@media (hover: hover) { .nav a:hover::after { transform: scaleX(1); transform-origin: left; } }
.top__tel { display: block; white-space: nowrap; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.25; text-decoration: none; font-variant-numeric: tabular-nums; }
.top__tel small { font-size: inherit; font-weight: 400; }
.top__tel--free { color: var(--muted); font-weight: 400; }
.top__cta { min-height: 44px; font-size: 15px; }
@media (max-width: 1100px) {
  .top__row { gap: 16px; }
  .top__tel { margin-left: auto; }
  .nav { background: var(--base); box-shadow: 0 20px 40px -20px rgb(22 33 63 / .25); }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .nav a::after { display: none; }
  .nav__sub { font-size: 16px !important; color: var(--muted) !important; }
  .nav__find input { width: 100%; min-height: 48px; margin: 8px 0; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
}
@media (max-width: 760px) {
  .brand__logo { height: 42px; }
  .top__cta, .top__tel--free { display: none; }
  .top__tel { font-size: 14px; }
}
@media (max-width: 359px) { .brand__logo { height: 34px; } .top__tel small { display: none; } }

/* рейл прокрутки: 24 позвонка (7 шейных + 12 грудных + 5 поясничных), пройденные — кармин */
.rail { position: fixed; right: 18px; top: 50%; z-index: 30; display: grid; gap: 7px; translate: 0 -50%; pointer-events: none; }
.rail i { width: 5px; height: 5px; background: var(--line); }
.rail i:nth-child(7), .rail i:nth-child(19) { margin-bottom: 6px; }
@supports (animation-timeline: scroll()) {
  .rail i { animation: rail-on linear both; animation-timeline: scroll(root); }
  .rail i:nth-child(1) { animation-range: 0% 1%; } .rail i:nth-child(2) { animation-range: 4% 5%; } .rail i:nth-child(3) { animation-range: 8% 9%; }
  .rail i:nth-child(4) { animation-range: 12% 13%; } .rail i:nth-child(5) { animation-range: 16% 17%; } .rail i:nth-child(6) { animation-range: 20% 21%; }
  .rail i:nth-child(7) { animation-range: 24% 25%; } .rail i:nth-child(8) { animation-range: 28% 29%; } .rail i:nth-child(9) { animation-range: 32% 33%; }
  .rail i:nth-child(10) { animation-range: 36% 37%; } .rail i:nth-child(11) { animation-range: 40% 41%; } .rail i:nth-child(12) { animation-range: 44% 45%; }
  .rail i:nth-child(13) { animation-range: 48% 49%; } .rail i:nth-child(14) { animation-range: 52% 53%; } .rail i:nth-child(15) { animation-range: 56% 57%; }
  .rail i:nth-child(16) { animation-range: 60% 61%; } .rail i:nth-child(17) { animation-range: 64% 65%; } .rail i:nth-child(18) { animation-range: 68% 69%; }
  .rail i:nth-child(19) { animation-range: 72% 73%; } .rail i:nth-child(20) { animation-range: 76% 77%; } .rail i:nth-child(21) { animation-range: 80% 81%; }
  .rail i:nth-child(22) { animation-range: 84% 85%; } .rail i:nth-child(23) { animation-range: 88% 89%; } .rail i:nth-child(24) { animation-range: 92% 93%; }
}
@keyframes rail-on { to { background: var(--brand); scale: 1.3; } }
@media (max-width: 1100px) { .rail { display: none; } }

/* ================= первый экран: «Скульптура» (эскиз A) ================= */
.hero { position: relative; min-height: max(100svh, 820px); padding-top: var(--top); overflow: clip; }
.hero__kicker { padding-top: 26px; color: var(--ink); font-size: 15px; text-align: center; }
.stage { position: relative; width: 380px; height: 570px; margin: 22px auto 0; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; background: #dfe3ea; animation: slit 1.1s var(--ease) .1s both; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: settle 1.6s var(--ease) .1s both; }
@keyframes slit { from { clip-path: inset(0 46% 0 46%); } to { clip-path: inset(0); } }
@keyframes settle { from { scale: 1.14; } to { scale: 1; } }
.hero__plus { position: absolute; top: -21px; right: -21px; z-index: 3; width: 64px; height: 62px; fill: var(--brand); animation: plus-in .6s var(--ease) 1.05s both; }
@keyframes plus-in { from { transform: skewX(9.8deg) scale(.6); opacity: 0; } }
.hero h1 { font-size: min(var(--h1), 7.15vw); line-height: .92; letter-spacing: -.035em; text-wrap: nowrap; }
.hero h1 > span { position: absolute; z-index: 2; white-space: nowrap; }
.hero__w1 { right: calc(100% + 28px); top: calc(42% - .74em); animation: in-l 1.1s var(--ease) .1s both; }
.hero__w2 { left: calc(100% + 28px); top: calc(62% - .74em); animation: in-r 1.1s var(--ease) .1s both; }
@keyframes in-l { from { translate: -24px 0; } }
@keyframes in-r { from { translate: 24px 0; } }
.hero__side { position: absolute; width: 300px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.hero__side .lit { display: block; margin-bottom: 6px; color: var(--ink); font-size: 21px; line-height: 1.3; }
.hero__side b { color: var(--ink); font-weight: 500; }
.hero__side--l { right: calc(100% + 30px); top: calc(42% + .5em + 44px); text-align: right; }
.hero__side--r { left: calc(100% + 30px); top: calc(62% + 48px); }
.hero__row { position: absolute; left: 0; right: 0; bottom: 34px; }
.hero__rowin { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.hero__rowin > * { animation: row-up .8s var(--ease) .35s both; }
@keyframes row-up { from { translate: 0 12px; } }
.hero__trust { display: flex; gap: 22px; }
.hero__trust a { display: grid; gap: 2px; max-width: 220px; padding-left: 16px; border-left: 2px solid var(--brand); font-size: 13px; line-height: 1.35; text-decoration: none; color: var(--muted); }
.hero__trust b { color: var(--ink); font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.hero__phones { justify-self: end; font-size: 18px; line-height: 1.45; text-align: right; font-variant-numeric: tabular-nums; }
.hero__phones a { text-decoration: none; font-weight: 500; }
.hero__phones small { margin-right: 8px; color: var(--muted); font-size: 13px; }
.hero__mcta { display: none; }
@media (max-width: 1180px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: auto; padding-inline: var(--pad); overflow: visible; }
  .stage, .hero__row, .hero__rowin, .hero__mcta { display: contents; }
  .hero__kicker { order: 1; padding: 18px 0 0; font-size: 14px; text-align: left; }
  .hero h1 { order: 2; padding-top: 10px; font-size: clamp(44px, 12.4vw, 60px); }
  .hero h1 > span { position: static; display: block; animation: none; }
  .hero__btn { order: 3; width: 100%; max-width: 520px; margin-top: 12px; }
  .hero__mcta p { order: 3; margin-top: 16px; color: var(--ink); font-size: 17px; line-height: 1.35; }
  .hero__pic { order: 5; position: relative; height: 56svh; min-height: 380px; margin: 22px calc(-1 * var(--pad)) 0; }
  .hero__plus { top: -22px; right: 18px; width: 50px; height: 48px; }
  .hero__side, .hero__phones { display: none; }
  .hero__trust { order: 6; gap: 16px; padding: 22px 0 8px; }
  .hero__trust b { font-size: 26px; }
  .hero__rowin > * { animation: none; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); column-gap: 40px; }
  .hero__kicker, .hero h1, .hero__btn, .hero__mcta p, .hero__trust { grid-column: 1; }
  .hero h1 { padding-top: 40px; font-size: clamp(56px, 8vw, 92px); }
  .hero__pic { grid-column: 2; grid-row: 1 / span 6; height: auto; min-height: 0; aspect-ratio: 2 / 3; margin: 30px 0 0; }
  .hero__plus { right: -16px; top: -20px; }
}

/* ================= 01 видеопроход: закреплённый горизонтальный проход ================= */
.vp { padding-top: var(--sec); }
.vp__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap); align-items: end; margin-bottom: clamp(36px, 4vw, 64px); }
.vp h2 { max-width: 12em; }
.vp__lead { max-width: 440px; justify-self: end; color: var(--muted); font-size: var(--lead); line-height: 1.45; }
@media (max-width: 760px) {
  .vp__head { grid-template-columns: minmax(0, 1fr); }
  .vp__lead { justify-self: start; }
}
/* р3 проход: кадр во весь экран, табличка кабинета; без JS и при reduced-motion — шесть кадров столбиком */
.vp__stage { position: relative; }
.room { position: relative; height: 100svh; overflow: hidden; }
.room__m { position: absolute; inset: 0; z-index: var(--z); transform-origin: 50% 55%; background: 50% 50% / cover no-repeat; }
.js .room__m img.is-wait { opacity: 0; }
.room__m img, .room__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room__m video { opacity: 0; transition: opacity .45s linear; }
.room__m video.is-play { opacity: 1; }
.plate { position: absolute; left: 32px; bottom: 32px; z-index: 20; padding: 28px 36px; background: rgb(247 248 250 / .94); border-radius: var(--r); color: var(--ink); }
.plate[data-c="tl"] { bottom: auto; top: calc(var(--top) + 32px); }
.plate[data-c="br"] { left: auto; right: 32px; }
.plate__n { display: flex; gap: 10px; align-items: center; font: 500 14px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgb(22 33 63 / .6); }
.plate__n .lbl__plus { width: 14px; height: 14px; }
.plate__t { margin-top: 0; overflow: hidden; font-size: clamp(44px, 7.2vw, 104px); font-weight: 500; line-height: 1.16; letter-spacing: -.035em; white-space: nowrap; }
.plate__t { margin-block: -.16em -.1em; }   /* маска с запасом: глифы не режутся в покое, span уходит целиком за край */
.plate__t > span { display: block; padding-block: .16em; }
.plate__s { margin-top: 12px; max-width: var(--pw, 46vw); font-weight: 300; font-style: italic; font-size: 22px; line-height: 1.3; color: var(--muted); }
.is-scene { height: calc(6 * 115vh); }
.is-scene .vp__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink) 50% 50% / cover no-repeat; }
.is-scene .vp__stage, .is-scene .room { position: absolute; inset: 0; height: auto; overflow: visible; }
@media (max-width: 760px) {
  .room__m img, .room__m video { object-position: var(--ox) 50%; }
  .room__m { background-position: var(--ox) 50%; }
  .plate, .plate[data-c] { left: 20px; right: 20px; top: auto; bottom: 20px; padding: 20px; }
  .plate__t { white-space: normal; }
  .plate__s { max-width: none; font-size: 18px; }
  .is-scene { height: calc(6 * 100svh); }
  .is-scene .vp__stick { height: 100svh; }
}

/* р3 кинозал: полоса на чернилах, главный экран, главы, три фильма; свой плеер */
.cine { margin-top: 0; padding-block: clamp(80px, 8vw, 140px); background: var(--dark); color: var(--on-dark); }
.cine__head { display: flex; justify-content: space-between; align-items: end; gap: var(--gap); margin-bottom: clamp(28px, 3vw, 48px); }
.cine__h { font-size: var(--h2); line-height: 1.02; letter-spacing: -.02em; }
.cine__meta { text-align: right; color: var(--on-dark-muted); font-size: 17px; line-height: 1.6; }
.cine__meta a { color: var(--on-dark); }
.cine__main { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); color: #fff; }
.cine__main img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cine__play, .cfilm__play { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: var(--brand); transition: transform .6s var(--ease); }
.cine__play::after, .cfilm__play::after { content: ""; position: absolute; left: 44%; top: 50%; border-left: 30px solid #fff; border-block: 19px solid transparent; transform: translate(-30%, -50%); }
.cine__go { position: absolute; left: 0; right: 0; top: calc(50% + 76px); text-align: center; font-size: 17px; font-weight: 500; text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
@media (hover: hover) { .cine__main:hover img { transform: scale(1.03); } .cine__main:hover .cine__play { transform: scale(1.08); } }
.cine__ch { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin-top: 20px; border-top: 1px solid rgb(245 249 250 / .22); }
.cine__ch a { position: relative; padding-top: 18px; }
.cine__ch a::before { content: ""; position: absolute; left: 0; top: -5px; width: 2px; height: 9px; background: var(--brand); }
@media (max-width: 1099px) { .cine__ch { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 0; } .cine__ch a { display: flex; align-items: center; gap: 16px; min-height: 48px; padding-top: 0; border-bottom: 1px solid rgb(245 249 250 / .14); } .cine__ch a::before { display: none; } .ch__t { margin: 0; width: 3.2em; flex: none; } }
.cine__ch a { display: block; color: var(--on-dark); }
.cine__ch img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); opacity: .86; transition: opacity .3s; }
.cine__ch a:hover img, .cine__ch a:focus-visible img { opacity: 1; }
.ch__t { display: block; margin-top: 10px; font-style: italic; font-weight: 300; font-size: 17px; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.ch__n { display: block; font-size: 17px; font-weight: 500; line-height: 1.3; }
.cine__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(48px, 5vw, 80px); }
.cfilm { display: block; color: var(--on-dark); }
.cfilm__m { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); }
.cfilm__m img, .cfilm__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cfilm__m video { opacity: 0; transition: opacity .3s linear; }
.cfilm__m video.is-play { opacity: 1; }
.cfilm__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cfilm__play::after { border-left-width: 18px; border-block-width: 11px; }
.cfilm__t { display: block; margin-top: 16px; font-size: 22px; font-weight: 500; line-height: 1.25; }
.cfilm__d { display: block; margin-top: 4px; font-style: italic; font-weight: 300; font-size: 17px; color: var(--on-dark-muted); }
@media (max-width: 760px) {
  .cine__head { display: block; }
  .cine__meta { text-align: left; margin-top: 12px; }
  .cine__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .cine__play::after { border-left-width: 20px; border-block-width: 13px; }
  .cine__go { top: calc(50% + 46px); font-size: 15px; }
  .cine__ch { column-gap: 16px; margin-top: 8px; }
  .cine__ch a { display: flex; align-items: center; gap: 16px; min-height: 48px; border-bottom: 1px solid rgb(245 249 250 / .14); }
  .cine__ch img { display: none; }
  .ch__t { margin: 0; width: 3.2em; }
  .cine__list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.pl { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--dark); color: var(--on-dark); overflow: hidden; }
.pl::backdrop { background: var(--dark); }
.pl__in { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.pl__v { position: relative; min-height: 0; }
.pl__v video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pl__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: linear-gradient(transparent, rgb(10 16 32 / .8)); transition: opacity .4s; }
.pl.is-idle .pl__bar, .pl.is-idle .pl__x { opacity: 0; }
.pl__b { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(245 249 250 / .12); color: #fff; font: 500 15px/1 var(--sans); cursor: pointer; }
.pl__b:hover { background: rgb(245 249 250 / .22); }
.pl__time { flex: none; font-variant-numeric: tabular-nums; font-size: 15px; min-width: 7.5em; }
.pl__track { position: relative; flex: 1; height: 24px; cursor: pointer; }
.pl__track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: rgb(245 249 250 / .25); }
.pl__fill { position: absolute; left: 0; top: 10px; height: 4px; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.pl__tick { position: absolute; top: 6px; width: 3px; height: 12px; margin-left: -1px; background: var(--brand); }
.pl__x { position: absolute; right: 16px; top: 16px; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(245 249 250 / .12); color: #fff; font-size: 26px; cursor: pointer; transition: opacity .4s; }
.pl__ch { display: none; }
@media (min-width: 1100px) {
  .pl.has-ch .pl__in { grid-template-columns: minmax(0, 1fr) 320px; }
  .pl.has-ch .pl__ch { display: block; padding: 88px 24px 24px; overflow: auto; border-left: 1px solid rgb(245 249 250 / .12); }
}
.pl__ch h4 { margin-bottom: 16px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); font-weight: 500; }
.pl__ch button { display: flex; gap: 14px; align-items: center; width: 100%; min-height: 48px; border: 0; background: none; color: var(--on-dark); font: 400 17px/1.3 var(--sans); text-align: left; cursor: pointer; }
.pl__ch button span { width: 3.2em; font: italic 300 17px var(--serif); color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.pl__ch button.is-on { font-weight: 500; }
.pl__ch button.is-on span { color: var(--brand); font-style: normal; }
@media (prefers-reduced-motion: reduce) { .cine__main img, .cine__play, .cfilm__play { transition: none; } }

/* ================= 02 диагностика (р2): липкий холст 3D 7/5, три шага по 80vh ================= */
.diag { padding-top: var(--sec); }
.diag__head { margin-bottom: clamp(32px, 4vw, 64px); }
.diag__split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.4vw, 80px); align-items: start; }
.diag__stage { position: sticky; top: 12vh; }
.diag__canvas { position: relative; aspect-ratio: 78 / 70; max-height: 76vh; overflow: hidden; background: var(--tint); }
.diag__canvas img, .diag__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.diag__canvas canvas { opacity: 0; transition: opacity .6s var(--ease); }
.diag__canvas.is-ready canvas { opacity: 1; }
.diag__canvas figcaption { position: absolute; left: 16px; bottom: 12px; color: var(--muted); font-size: 12px; }
.diag__tag { position: absolute; left: 0; top: 0; margin: -10px 0 0 22px; padding: 6px 10px; background: var(--ink); color: #fff; font-size: 14px; white-space: nowrap; pointer-events: none; }
.diag__tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 18px; height: 1px; background: var(--ink); }
.diag__steps { display: grid; }
.dstep { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding-left: 28px; border-left: 1px solid var(--line); transition: border-color .5s var(--ease); }
.dstep__poster { display: none; }
.dstep__n { color: var(--brand); font-size: 68px; line-height: 1; }
.dstep__t { margin: 18px 0 14px; font-size: 32px; line-height: 1.1; }
.dstep p { max-width: 24em; color: var(--muted); font-size: 19px; line-height: 1.5; }
.js .dstep .dstep__n { color: var(--line); transition: color .5s var(--ease); }
.js .dstep.is-on { border-color: var(--brand); }
.js .dstep.is-on .dstep__n { color: var(--brand); }
.diag__cta { margin-top: 24px; }
@media (min-width: 761px) { .diag__cta { grid-column: 2; } }
@media (max-width: 760px) {
  .diag__split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .diag__stage { top: var(--top); z-index: 1; margin-inline: calc(var(--pad) * -1); }
  .diag__canvas { aspect-ratio: auto; height: 48vh; max-height: none; }
  .dstep { min-height: 70vh; justify-content: flex-end; padding: 24px 0 32px; border-left: 0; border-top: 1px solid var(--line); }
  .dstep__n { font-size: 48px; }
  .dstep__t { font-size: 26px; }
  .dstep p { font-size: 17px; }
}
@media (max-width: 760px) { html:not(.js) .dstep__poster { display: block; width: 100%; height: auto; margin-bottom: 16px; } html:not(.js) .diag__stage { display: none; } }

/* ================= 03 что лечим: крупный набор строк + фото у курсора ================= */
.lech { padding-top: var(--sec); overflow-x: clip; }
.lech__head { margin-bottom: clamp(28px, 3vw, 48px); }
.napr { border-top: 1px solid var(--line); }
.dir a { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: clamp(14px, 1.6vw, 24px) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.dir__n { color: var(--muted); font-size: 14px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.dir__t { min-width: 0; overflow-wrap: anywhere; font-size: clamp(24px, 3.2vw, 46px); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; transition: translate .6s var(--ease), color .4s var(--ease); }
.dir__pic { width: 64px; height: 80px; object-fit: cover; }
.dir__pic--mark { display: block; background: var(--tint); }
.dir__pic--mark::before { content: ""; display: block; width: 26px; height: 26px; margin: 27px auto; background: var(--blue); clip-path: polygon(38% 0, 72% 0, 64% 33%, 100% 33%, 96% 67%, 60% 67%, 52% 100%, 18% 100%, 26% 67%, 0 67%, 4% 33%, 40% 33%); }
@media (min-width: 1101px) {
  .dir__pic { width: 96px; height: 120px; transform-origin: 100% 50%; transition: scale .6s var(--ease), rotate .6s var(--ease); }
  .dir__pic--mark::before { margin: 47px auto; }
}
@media (hover: hover) and (min-width: 1101px) {
  .dir a:hover .dir__pic { scale: 1.9; rotate: -2deg; position: relative; z-index: 2; }
  .dir a:hover .dir__t { translate: 24px 0; color: var(--blue); }
}
.why { margin-top: clamp(56px, 6vw, 96px); }
.why__head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
.why__t { font-size: 32px; line-height: 1.15; max-width: 22em; }
.why__side { display: grid; gap: 16px; justify-items: start; }
.why__side .warn { color: var(--muted); }
.why__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: clamp(24px, 3vw, 48px); }
.why__list li { position: relative; padding: 16px 0 16px 26px; border-top: 1px solid var(--line); font-size: 20px; line-height: 1.3; }
.why__list li::before { content: ""; position: absolute; left: 0; top: 22px; width: 12px; height: 12px; background: var(--brand); clip-path: polygon(38% 0, 72% 0, 64% 33%, 100% 33%, 96% 67%, 60% 67%, 52% 100%, 18% 100%, 26% 67%, 0 67%, 4% 33%, 40% 33%); }
@media (prefers-reduced-motion: no-preference) { .js .why__list li { opacity: 0; translate: 0 16px; transition: opacity .6s var(--ease), translate .6s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); } .js .why__list.is-in li { opacity: 1; translate: 0 0; } }
@media (max-width: 900px) { .why__head { grid-template-columns: minmax(0, 1fr); } .why__t { font-size: 24px; } }
@media (max-width: 760px) { .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; column-gap: 16px; } .why__list li { font-size: 16px; padding: 12px 0 12px 20px; } .why__list li::before { top: 17px; width: 10px; height: 10px; } .dir a { grid-template-columns: 34px minmax(0, 1fr) 64px; gap: 14px; } }

/* ================= 04 врачи: 3×2 портретов 4:5 ================= */
.vr { padding-top: var(--sec); }
.docs__head { margin-bottom: clamp(28px, 3vw, 48px); }
.docs__grid { --g: clamp(16px, 2vw, 32px); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--g)) / 3.3); gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: var(--blue) var(--line); }
.doc { scroll-snap-align: start; }
.doc__pic { overflow: hidden; background: var(--tint); }
.doc__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: scale .9s var(--ease); }
@media (hover: hover) { .doc:hover .doc__pic img { scale: 1.035; } }
.doc__n { margin-top: 18px; font-size: clamp(20px, 1.7vw, 26px); }
.doc__r { margin-top: 6px; color: var(--muted); font-size: 16px; }
.doc__go { display: inline-block; margin-top: 12px; color: var(--brand); font-weight: 500; font-size: 15px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; }
@media (hover: hover) { .doc__go:hover { text-decoration-color: currentColor; } }
@media (max-width: 760px) { .docs__grid { grid-auto-columns: 46vw; } .doc__n { font-size: 17px; } .doc__r { font-size: 14px; } }

/* ================= 05 видео-отзывы: стена 9:16, чётные колонки против прокрутки ================= */
/* ================= 05 отзывы (р2): одна секция, сегмент Видео | Текстом ================= */
.otz2 { padding-top: var(--sec); }
.otz2__head { display: flex; justify-content: space-between; align-items: end; gap: var(--gap); margin-bottom: 32px; }
.otz2__src { margin: 0 0 6px; font-size: 17px; white-space: nowrap; }
.otz2__src a { text-decoration: none; color: var(--muted); } .otz2__src b { color: var(--ink); font-size: 28px; font-weight: 500; margin-right: 4px; }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: clamp(32px, 3.4vw, 48px); }
.seg__b { position: relative; z-index: 1; min-height: 48px; padding: 0 28px; border: 0; background: none; color: var(--muted); font: 500 16px/1 var(--sans); cursor: pointer; transition: color .35s var(--ease); }
.seg__b[aria-selected="true"] { color: #fff; }
.seg__k { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r); background: var(--ink); transition: translate .35s var(--ease); }
.seg:has(#t-text[aria-selected="true"]) .seg__k { translate: 100% 0; }
.otz2__t { margin-bottom: 24px; font-size: var(--h3); }
.otz2__p[hidden] { display: none; }
.otz2__p.is-in { animation: pane-in .45s var(--ease) both; }
@keyframes pane-in { from { opacity: 0; translate: 0 16px; } }
.otz2__rail { position: relative; }
.otz2__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.otz2__arr { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: 18px; cursor: pointer; }
@media (hover: hover) { .otz2__arr:hover { border-color: var(--ink); } }
.votz__grid { --g: clamp(12px, 1.4vw, 24px); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--g)) / 4); gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: var(--blue) var(--line); }
.votz__grid li { scroll-snap-align: start; }
.rev__top { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: start; }
.rev__doc img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.rev__doc figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .otz2__head { flex-direction: column; align-items: start; } .seg { display: grid; width: 100%; } .votz__grid { grid-auto-columns: calc((100% - var(--g)) / 1.3); } .rev__top { grid-template-columns: minmax(0, 1fr); } .rev__doc { max-width: 240px; } }
.otz { position: relative; display: block; overflow: hidden; background: var(--tint); }
.otz img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; transition: scale .9s var(--ease); }
@media (hover: hover) { .otz:hover img { scale: 1.04; } }
.otz__play { width: 44px; height: 44px; right: 10px; bottom: 10px; }
.otz__play::after { left: 17px; top: 13px; border-left-width: 12px; border-block-width: 9px; }
.otz__t { position: absolute; left: 12px; bottom: 16px; padding: 3px 8px; background: rgb(22 33 63 / .82); color: #fff; font-size: 13px; }
@keyframes counter { from { translate: 0 40px; } to { translate: 0 -40px; } }

/* ================= 06 о клинике: глубокая синяя полоса, въезжает справа ================= */
.about { padding-top: var(--sec); }
.about__band { background: var(--deep); color: var(--on-dark); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .about__band { animation: band-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes band-in { from { scale: .92 1; } to { scale: 1 1; } }
.about__band { transform-origin: 100% 50%; }
.about__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap); padding-block: clamp(72px, 8vw, 128px); }
.about h2 { color: #fff; }
.about__lead { max-width: 36em; margin-top: 28px; font-size: var(--lead); line-height: 1.5; color: var(--on-dark); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.facts div { padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .28); }
.facts dt { color: var(--gold); font-size: clamp(40px, 4vw, 64px); line-height: 1; }
.facts dd { margin-top: 12px; color: var(--on-dark-muted); font-size: 15px; line-height: 1.45; }
.about__pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.about__pics figure:nth-child(2) { margin-top: 96px; }
.about__pics img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 900px) { .about__in { grid-template-columns: minmax(0, 1fr); } .facts { grid-template-columns: minmax(0, 1fr); gap: 16px; } .about__pics figure:nth-child(2) { margin-top: 48px; } }

/* ================= 07 цены: две колонки, строки справа налево ================= */
.ceny { padding-top: var(--sec); overflow-x: clip; }
.ceny__head { margin-bottom: clamp(28px, 3vw, 48px); }
.ceny__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.plist { border-top: 1px solid var(--line); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 11ch 9ch; column-gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-variant-numeric: tabular-nums lining-nums; }
.prow__n { font-size: 20px; line-height: 1.3; transition: color .3s var(--ease); }
.prow__p { justify-self: end; color: var(--brand); font-size: 24px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.prow__o { justify-self: end; color: var(--muted); font-size: 15px; white-space: nowrap; }
@media (hover: hover) { .prow:hover .prow__n { color: var(--blue); } }
.prow--main .prow__n { font-weight: 500; }
.ceny__slot { position: sticky; top: calc(var(--top) + 24px); display: grid; gap: 16px; }
.ceny__slot img { width: 100%; height: auto; background: var(--tint); }
.ceny__slot p { color: var(--ink); font-size: 17px; line-height: 1.45; }
.ceny__note { display: grid; gap: 8px; margin-top: 28px; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .ceny__grid { grid-template-columns: minmax(0, 1fr); } .ceny__slot { position: static; } }
@media (max-width: 760px) { .prow { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; } .prow__n { grid-column: 1 / -1; } .prow__p { grid-column: 1; justify-self: start; font-size: 22px; } .prow__o { grid-column: 2; } }

/* ================= 08 отзывы: длинная цитата + три коротких ================= */
.rev { padding-top: var(--sec); }
.rev__head { margin-bottom: clamp(28px, 3vw, 56px); }
.rev__big blockquote { max-width: 26em; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.3; }
.rev__by { margin-top: 20px; color: var(--muted); font-size: 15px; }
.rev__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(48px, 5vw, 80px); }
.rev__list li { padding-top: 20px; border-top: 2px solid var(--blue); }
.rev__list blockquote { font-size: 17px; line-height: 1.55; }
.rev__list p { margin-top: 14px; color: var(--muted); font-size: 14px; }
.rev__src { margin-top: 40px; font-size: 17px; }
.rev__src a { text-underline-offset: .3em; }
@media (max-width: 900px) { .rev__list { grid-template-columns: minmax(0, 1fr); } }

/* ================= 09 запись: полоса #264988, форма на белой карточке ================= */
.zap { margin-top: var(--sec); background: var(--deep); color: var(--on-dark); }
.zap__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: var(--gap); align-items: center; padding-block: clamp(72px, 8vw, 128px); }
.zap h2 { color: #fff; font-size: clamp(32px, 3.6vw, 54px); }
.zap__price { margin-top: 18px; color: var(--gold); font-size: clamp(40px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.zap__price s { margin-left: 10px; color: var(--on-dark-muted); font-size: .4em; font-weight: 400; letter-spacing: 0; }
.zap__lead { margin-top: 24px; max-width: 30em; font-size: var(--lead); color: var(--on-dark-muted); }
.zap__lead a { color: #fff; }
.fbox { padding: clamp(24px, 3vw, 44px); background: var(--card); color: var(--ink); border-radius: var(--r); }
.form { gap: 10px; }
.form__title { margin-bottom: 12px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.field > span { color: var(--muted); font-size: 14px; }
.field > span i { font-style: normal; }
.field input, .field select { min-height: 52px; border: 1px solid var(--line); border-radius: var(--r); background: var(--base); font-size: 17px; }
.check { color: var(--muted); font-size: 14px; line-height: 1.45; }
.check a { color: var(--ink); }
.form .btn { margin-top: 10px; }
.ok__title { margin-bottom: 10px; color: var(--brand); font-size: 28px; font-weight: 500; }
@media (max-width: 900px) { .zap__in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

/* ================= 10 контакты ================= */
.kontakt { padding-block: var(--sec); }
.kont__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.kont h2 { max-width: 12em; }
.kont__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 44px; }
.kont__dl dt { color: var(--muted); font-size: 14px; }
.kont__dl dd { margin-top: 6px; font-size: 18px; line-height: 1.5; }
.kont__dl a { font-size: 24px; font-weight: 500; text-decoration: none; letter-spacing: -.01em; }
.kont__map { aspect-ratio: auto; min-height: 420px; background: var(--tint); }
.kont__map .embed__btn { gap: 6px; border: 0; background: var(--tint); color: var(--ink); cursor: pointer; font-size: 22px; font-weight: 500; }
.kont__map .embed__btn small { color: var(--muted); font-size: 14px; font-weight: 400; }
.kont__map .embed__link { padding: 14px 20px; font-size: 15px; }
@media (max-width: 900px) { .kont__in, .kont__dl { grid-template-columns: minmax(0, 1fr); } .kont__map { min-height: 300px; } }

/* ================= подвал: чернила, вордмарк набором ================= */
.foot { padding: clamp(32px, 3vw, 48px) 0 calc(40px + var(--dock)); background: var(--dark); color: var(--on-dark); }
.foot__word { font-size: clamp(40px, 7.2vw, 104px); font-weight: 500; letter-spacing: -.04em; line-height: .95; color: #fff; }
.foot__word span { color: var(--brand); font-size: .4em; letter-spacing: 0; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.8fr; gap: 32px var(--gap); margin-top: clamp(32px, 3vw, 48px); padding-top: 32px; border-top: 1px solid rgb(255 255 255 / .16); }
.foot__h { margin-bottom: 14px; color: var(--on-dark-muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.foot__nav { display: grid; align-content: start; gap: 8px; }
.foot a { color: var(--on-dark); text-decoration-color: rgb(255 255 255 / .3); }
.foot__nav a { text-decoration: none; font-size: 16px; }
@media (hover: hover) { .foot__nav a:hover { color: #fff; text-decoration: underline; } }
.foot__contact { display: grid; align-content: start; gap: 8px; font-size: 16px; }
.foot__tel { font-size: 22px; font-weight: 500; text-decoration: none; }
.foot__btn { justify-self: start; margin-top: 10px; }
.foot__legal { display: grid; gap: 12px; color: var(--on-dark-muted); font-size: 14px; line-height: 1.6; }
.foot__warn { margin-top: 48px; font-size: 16px; color: var(--on-dark); }
.foot__small { margin-top: 12px; max-width: 70em; color: var(--on-dark-muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 1100px) { .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .foot__contact, .foot__legal { grid-column: 1 / -1; } .foot__nav a { font-size: 15px; } }

/* ================= диалоги: запись по акции и плеер ================= */
.dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: var(--r); background: var(--card); color: var(--ink); overflow: auto; }
.dlg::backdrop { background: rgb(22 33 63 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg[open] { animation: dlg-in .5s var(--ease); }
@keyframes dlg-in { from { opacity: 0; scale: .96; } }
.dlg__x { position: absolute; right: 8px; top: 8px; z-index: 2; width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 30px; line-height: 1; cursor: pointer; }
.dlg--film { width: min(1100px, calc(100vw - 24px)); background: #000; color: #fff; }
.dlg--film.is-vertical { width: min(420px, calc(100vw - 24px)); }
.dlg__video { width: 100%; max-height: calc(100svh - 24px); background: #000; }

/* ================= cookie: карточка снизу слева ================= */
.cookie { position: fixed; left: 16px; bottom: calc(16px + var(--dock)); z-index: 44; display: grid; gap: 12px; width: min(360px, calc(100vw - 32px)); padding: 20px; border-radius: var(--r); background: var(--card); color: var(--ink); box-shadow: 0 24px 48px -20px rgb(22 33 63 / .4); font-size: 13px; line-height: 1.45; }
.cookie a { color: var(--ink); }
.cookie__t { font-size: 16px; }
.cookie__set summary { font-weight: 500; text-decoration: underline; text-underline-offset: .25em; }
.cookie__set > div { display: grid; gap: 10px; padding-top: 10px; }
.tog { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.tog input { width: 18px; height: 18px; accent-color: var(--brand); }
.tog b { display: block; }
.cookie__ok { min-height: 44px; }
.cookie { transition: translate .5s var(--ease), opacity .5s var(--ease); }
@media (min-width: 761px) { .cookie.is-off { translate: 0 120%; opacity: 0; pointer-events: none; visibility: hidden; } }
@media (max-width: 760px) { .cookie { position: static; width: auto; margin: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); padding: 20px var(--pad) calc(20px + var(--dock)); } }

/* ================= заставка: облик ================= */

/* ================= движение секций сверх набора кита ================= */
.napr .dir, .plist .prow { opacity: 1; }
.is-motion .dir:not(.is-in), .is-motion .prow:not(.is-in) { opacity: 0; }
.is-motion .dir.is-in { animation: from-left .8s var(--ease) calc(var(--i, 0) * 60ms) both; }
.is-motion .prow.is-in { animation: from-right .8s var(--ease) calc(var(--i, 0) * 50ms) both; }
.is-motion .votz__grid li:not(.is-in) { opacity: 0; }
.is-motion .votz__grid li.is-in { animation: pic-up .9s var(--ease) calc(var(--i, 0) * 70ms) both; }
.is-motion .doc:not(.is-in) .doc__pic { clip-path: inset(100% 0 0 0); }
.is-motion .doc.is-in .doc__pic { animation: mask-up 1s var(--ease) calc(var(--i, 0) * 90ms) both; }
@keyframes from-left { from { opacity: 0; translate: -60px 0; } }
@keyframes from-right { from { opacity: 0; translate: 32px 0; } }
@keyframes pic-up { from { opacity: 0; translate: 0 48px; } }
@keyframes mask-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .is-motion .dir, .is-motion .prow, .is-motion .votz__grid li, .is-motion .films__list li { opacity: 1 !important; } .is-motion .doc .doc__pic { clip-path: none !important; } }

.zap__pic { margin-top: 36px; max-width: 520px; }
.zap__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.form__sub { margin: -4px 0 8px; color: var(--muted); font-size: 15px; }
.foot__mark { display: flex; align-items: flex-end; min-height: clamp(200px, 22vw, 320px); padding: clamp(20px, 2.4vw, 36px); background: linear-gradient(to top, var(--dark), rgb(22 33 63 / .25) 70%), url(../img/p-room-konsult-1280.webp) 50% 40% / cover; border-radius: var(--r); }
.foot__mark img { width: clamp(200px, 20vw, 280px); height: auto; padding: 12px 18px; background: var(--base); border-radius: var(--r); box-sizing: content-box; }
.lics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.lics img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; background: #fff; transition: scale .6s var(--ease); }
@media (hover: hover) { .lics a:hover img { scale: 1.04; } }
.lics a { display: block; overflow: hidden; }
@media (max-width: 1100px) { .napr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (max-width: 760px) { .napr .dir__pic { display: none; } .dir a { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; } .dir__t { font-size: clamp(18px, 5vw, 24px); } }
.kont__pic { margin-top: 40px; max-width: 520px; }
.kont__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kont__pic figcaption { margin-top: 10px; color: var(--muted); font-size: 17px; }
@media (max-width: 1280px) { .top__tel--free { display: none; } }
.rev__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border: 1px solid var(--line); }
.rev__doc img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rev__doc figcaption, .rev__shot figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .rev__top { grid-template-columns: minmax(0, 1fr); } .rev__shot { max-width: 360px; } }
@media (max-width: 760px) {
  .rev__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--pad)); padding: 0 var(--pad) 12px; }
  .rev__list li { scroll-snap-align: start; }
  .rev__shot { display: none; }
  .rev__doc { display: block; order: -1; max-width: 60%; }
  .kont__in > div:first-child { display: flex; flex-direction: column; }
  .kont__pic { order: 1; margin: 28px 0 0; }
  .kont__dl { order: 2; }
}
@media (max-width: 760px) {
  .rev__big blockquote { font-size: 22px; }
  .zap__text { display: flex; flex-direction: column; }
  .zap__text .lbl { order: 0; } .zap__pic { order: 1; margin: 0 0 24px; } .zap__text h2 { order: 2; } .zap__price { order: 3; } .zap__lead { order: 4; }
  .kont__pic { order: -1; margin: 0 0 28px; }
}
@media (max-width: 760px) { .napr .dir__n { display: none; } .dir a { grid-template-columns: minmax(0, 1fr); } .dir__t { overflow-wrap: normal; hyphens: auto; font-size: 19px; } }
@media (max-width: 760px) {
  .foot { padding-bottom: calc(16px + var(--dock)); }
  .foot__mark { margin-bottom: 16px; }
  .foot__cols { margin-top: 24px; padding-top: 20px; }
  .foot__warn { margin-top: 24px; }
}

/* ================= р2 первый экран: четыре такта (щель → скан-проявка → плюс → наезд), прокрутка и мышь ================= */
.hero__frame { background: var(--tint); }
.hero__frame img { position: absolute; inset: 0; animation: none; }
.hero__col { clip-path: inset(0); animation: col-in 1.2s cubic-bezier(.65, 0, .35, 1) .6s both !important; }
.hero__duo { filter: url(#duo) contrast(1.05); }
@keyframes col-in { from { clip-path: inset(0 0 100% 0); } }
@keyframes drift { to { scale: 1.03; } }
.hero__scan { position: absolute; inset: 0 0 auto; z-index: 2; height: 100%; pointer-events: none; translate: 0 101%; animation: scan 1.2s cubic-bezier(.65, 0, .35, 1) .6s both; }
.hero__scan::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brand); box-shadow: 0 0 24px 6px rgb(73 115 197 / .75), 0 0 2px var(--brand); }
@keyframes scan { from { translate: 0 0; } to { translate: 0 101%; } }
.hero__plus { animation: plus-draw .6s linear 1.6s both, plus-tilt .35s var(--ease) 2.2s both; }
@keyframes plus-draw { 0% { clip-path: inset(0 38% 100% 38%); } 58% { clip-path: inset(0 38% 0 38%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes plus-tilt { from { transform: skewX(-9.8deg); } to { transform: none; } }
.hero__row::before { content: ""; position: absolute; left: max(var(--pad), calc((100vw - 1376px) / 2)); right: max(var(--pad), calc((100vw - 1376px) / 2)); top: -18px; height: 1px; background: var(--line); transform-origin: 0 50%; animation: rule .6s var(--ease) 2.2s both; }
@keyframes rule { from { transform: scaleX(0); } }
@media (min-width: 1181px) { .hero__pic { position: absolute; inset: 0; } }
.hero h1 > span { translate: calc(var(--mx, 0) * -4px) calc(var(--my, 0) * -4px); }
.hero__frame { translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 8px); }
@supports (animation-timeline: scroll()) {
  @media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
    .hero__w1 { animation: in-l 1.1s var(--ease) .1s both, w-l linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .hero__w2 { animation: in-r 1.1s var(--ease) .1s both, w-r linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .hero__pic { animation: pic-out linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .hero__pic { animation: pic-out-s linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes w-l { to { transform: translateX(-10vw); opacity: .25; } }
@keyframes w-r { to { transform: translateX(10vw); opacity: .25; } }
@keyframes pic-out { to { transform: scale(1.12); } }
@keyframes pic-out-s { to { transform: scale(1.06); } }
@media (max-width: 760px) {
  .hero__frame { animation-duration: .8s; animation-delay: 0s; }
  .hero__col { animation: col-in 1s cubic-bezier(.65, 0, .35, 1) .4s both !important; }
  .hero__scan { animation-duration: 1s; animation-delay: .4s; }
  .hero__plus { animation: plus-draw .4s linear 1.4s both; }
  .hero__row::before { display: none; }
}
@media (max-width: 760px) { .hero { overflow-x: clip; } }
.why__more { display: none; }
@media (max-width: 760px) { .why__list:not(.is-open) li:nth-child(n+7) { display: none; } .why__more { display: inline-flex; align-items: center; min-height: 48px; margin-top: 16px; padding: 0 20px; border: 1px solid var(--ink); border-radius: var(--r); background: none; color: var(--ink); font: 600 16px/1 var(--sans); cursor: pointer; } .why__more[hidden] { display: none; } }
@media (max-width: 400px) { .diag__tag { display: none; } .why__list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hero__col, .hero__scan, .hero__plus, .hero__row::before { animation: none !important; } .hero__scan { display: none; } }
.pl__pp .i-pause, .pl__pp.is-on .i-play { display: none; }
.pl__pp.is-on .i-pause { display: inline; }
.pl__b svg { vertical-align: middle; }
.pl__b.is-off { opacity: .5; }
.cine__main, .cine__ch a, .cfilm { text-decoration: none; }
/* р3 apple-design: номер таблички 4,04:1 → --muted 6,9:1; тонкий Literata 300 на 17 px → 400; на 390 табличка над липкой панелью */
.plate__n { color: var(--muted); }
.ch__t, .cfilm__d, .pl__ch button span { font-weight: 400; }
@media (max-width: 760px) { .plate, .plate[data-c] { bottom: calc(var(--dock, 64px) + 16px); } }
@media (max-width: 760px) { .cine__ch a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-block: 8px; } .ch__t { width: auto; } }