* { box-sizing: border-box; }

/* Цвета зафиксированы: браузерным тёмным темам менять их запрещено.
   В meta при этом заявлена «поддержка» тёмной темы: встроенные браузеры
   (Telegram, Android WebView) тогда не включают свою инверсию, а берут
   наши стили — а в «тёмных» стилях у нас те же светлые цвета */
:root { color-scheme: only light; }
html { background: #fff; }
/* принудительное затемнение инвертирует background-color, но не градиенты —
   белый «градиент» держит фон белым даже там, где движок игнорирует запрет */
html, body { background-image: linear-gradient(#fff, #fff); }
@media (prefers-color-scheme: dark) {
  html, body { background: #fff !important; color: #24303a !important; }
}

/* Прокручивается сам документ. CSS-привязка оставлена только на случай
   выключенного JS: с ней мелкие шаги колеса отпружинивают назад, а резкий
   рывок пролистывает несколько экранов, поэтому при живом JS листание
   ведёт скрипт — один жест равен одному экрану */
html { scroll-snap-type: y mandatory; }
html.js { scroll-snap-type: none; }

body {
  margin: 0;
  background: #fff;
  color: #24303a;
  font-family: Manrope, sans-serif;
}

.slide {
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide svg {
  display: block;
  /* правый отступ под навигацию: точки залезали на фото и карточки */
  width: min(calc(100vw - 52px), calc(100svh * 16 / 9));
  height: auto;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.slide a { cursor: pointer; }
.slide a > rect:first-child { fill: transparent; }

/* Меню первого экрана: подчёркивание проявляется при наведении.
   Именно прозрачностью: transform на SVG рендерится не у всех, и спрятанные
   им линии на таких машинах торчали постоянно «кривым подчёркиванием» */
.nav .navline { opacity: 0; transition: opacity .3s; }
.nav:hover .navline, .nav.is-live .navline { opacity: 1; }
/* кнопки слегка «вздрагивают» под курсором */
.cta { cursor: pointer; }
/* нарисованные в макете кнопки нельзя перекрасить по :hover — тонируем их
   плёнкой прямо в накрывающей ссылке, иначе наведение никак не видно */
/* Селектор длиннее, чем `.slide a > rect:first-child { fill: transparent }`
   ниже: то правило делает прозрачными невидимые зоны клика и по специфичности
   перебивало заливку плёнки — из-за этого подсветка кнопок не была видна */
.slide a.cta > rect.hitfx {
  fill: #24303a; fill-opacity: 0; transition: fill-opacity .25s;
}
.slide a.cta:hover > rect.hitfx { fill-opacity: .16; }

/* Карточки подсвечиваются по всей площади. Наведение считает скрипт, а не
   :hover — иначе пришлось бы гасить события у текста, и он перестал бы
   выделяться мышью */
/* Фигуры не должны ловить мышь: нажатие на залитую карточку или фон
   не начинает выделение, и текст внутри неё выделить не получается.
   Подсветку считает скрипт по координатам, события фигурам не нужны */
.slide path { pointer-events: none; }
path.card { transition: fill .35s, stroke-width .35s; }
rect.case-card { transition: height .35s cubic-bezier(.22,.61,.36,1), fill .3s; }
path.card.is-hover { fill: #fdf5f1; stroke-width: 1.6; }

/* Блоки без рамки (шаги, риски, таймлайн, отзывы) — подложка под текстом */
rect.zone {
  fill: #cc501d;
  fill-opacity: 0;
  pointer-events: none;
  transition: fill-opacity .3s;
}
#s5 rect.zone { fill: #005b9a; }   /* на экране рисков клиентка просила синюю */
rect.zone.is-hover { fill-opacity: .085; }

/* Появление содержимого слайда */
.js .slide .an { opacity: 0; }
.js .slide.ready .an {
  animation: rise .55s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

.fold-btn { cursor: pointer; }
.fold-btn rect { transition: fill .25s; }
.fold-btn:hover rect { fill: #f7ded3; }
.fold-btn.is-hidden { display: none; }



/* --------------------------------------------------------------- Мобильная версия
   Слайд 16:9 на телефоне даёт текст 4 px при читаемом минимуме 14,
   поэтому ниже 1100 px то же содержимое разворачивается в поток */
.mobile { display: none; }

@media (max-width: 1100px) {
  .deck { display: none; }
  .mobile { display: block; padding: 0 0 48px; }

  .m-slide {
    padding: 34px clamp(18px, 5vw, 32px) 30px;
    border-bottom: 1px solid rgba(36, 48, 58, .1);
  }
  .m-slide:nth-child(even) { background: #faf9f7; }

  .m-h {
    font-family: Literata, serif; font-weight: 600;
    font-size: clamp(25px, 6.4vw, 32px); line-height: 1.16;
    color: #005b9a; margin: 0 0 16px; text-wrap: balance;
  }
  .m-sub {
    font-family: Literata, serif; font-weight: 600;
    font-size: clamp(17px, 4.4vw, 20px); line-height: 1.3;
    color: #005b9a; margin: 22px 0 8px;
  }
  .m-strong { font-weight: 700; font-size: 16px; margin: 18px 0 6px; color: #24303a; }
  .m-p { font-size: 16px; line-height: 1.55; color: rgba(36, 48, 58, .82); margin: 0 0 12px; }
  .m-accent {
    font-family: Literata, serif; font-size: 17px; line-height: 1.4;
    color: #cc501d; margin: 18px 0 10px;
    padding-left: 14px; border-left: 3px solid #cc501d;
  }
  .m-photo {
    display: block; width: 100%; height: auto; border-radius: 18px;
    margin: 0 0 22px;
  }
  .m-card {
    background: #fff; border: 1px solid rgba(204, 80, 29, .35); border-radius: 16px;
    padding: 16px 18px; margin: 0 0 12px;
  }
  .m-card b {
    display: block; font-family: Literata, serif; font-size: 20px; font-weight: 600;
    color: #005b9a; margin-bottom: 6px;
  }
  .m-card span { font-size: 15px; line-height: 1.5; color: rgba(36, 48, 58, .8); }
  .m-btn {
    display: block; text-align: center; margin: 18px 0 0;
    padding: 15px 22px; border-radius: 999px;
    background: #cc501d; color: #fff; font-weight: 600; font-size: 16px;
    text-decoration: none;
  }
  .m-btn--tg { background: #fff; color: #005b9a; border: 1.5px solid #005b9a; }
  .m-contact {
    display: block; margin-top: 14px; font-size: 17px; font-weight: 600;
    color: #005b9a; text-decoration: none;
  }
}


/* ================= МОБИЛЬНАЯ ВЕРСИЯ ================= */
.mtop, .mmenu, .mflow, .msheet { display: none; }

@media (max-width: 1100px) {
  .deck, .mobile { display: none !important; }
  .mtop, .mflow { display: block; }

  /* один пункт макета: полотно у Елены шириной 405 пунктов.
     На планшете растягивать бесконечно нельзя — упираемся в 520 px */
  .mflow, .mtop, .mmenu, .msheet {
    --u: calc(min(100vw, 520px) / 405);
    --blue: #005b9a;
    --dark: #24303a;
    --orange: #cc501d;
    --orange-soft: #fcf1eb;
    --blue-soft: #ccdeea;
    --year: #e36735;
    --grey: #767171;
  }

  /* закреплённые блоки считаются от видимой области, она на 5 px шире
     области документа — без этого появляется горизонтальная прокрутка.
     Именно clip, а не hidden: hidden превращает body в контейнер прокрутки
     и отклеивает position: sticky у фото биографии */
  html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
  body { background: #fff; }

  /* --- закреплённая шапка --- */
  .mtop {
    position: fixed; inset: 0 0 auto; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(10 * var(--u)) calc(27 * var(--u)) calc(10 * var(--u)) calc(37.7 * var(--u));
    height: calc(56 * var(--u));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(36,48,58,.08);
  }
  .mtop-brand {
    display: flex; align-items: center; gap: calc(11 * var(--u)); text-decoration: none;
  }
  .mtop-brand img { width: calc(14.5 * var(--u)); }
  .mtop-brand b {
    display: block; font-family: Literata, serif; font-weight: 500;
    font-size: calc(16 * var(--u)); line-height: calc(18 * var(--u)); color: var(--blue);
  }
  .mtop-brand i {
    display: block; font-style: normal; font-family: Manrope; font-weight: 500;
    font-size: calc(11 * var(--u)); line-height: calc(13.5 * var(--u)); color: var(--dark);
  }

  /* кружок-гамбургер в макете 31.8 пункта */
  .mburger {
    width: calc(31.8 * var(--u)); height: calc(31.8 * var(--u)); flex: none;
    border: 0; border-radius: 50%; background: var(--orange);
    display: grid; place-items: center; cursor: pointer; padding: 0;
  }
  .mburger span, .mburger span::before, .mburger span::after {
    content: ""; display: block; width: calc(15 * var(--u)); height: calc(1.8 * var(--u));
    background: #fff; border-radius: 2px; position: relative;
    transition: transform .3s, opacity .2s;
  }
  .mburger span::before { position: absolute; transform: translateY(calc(-5 * var(--u))); }
  .mburger span::after { position: absolute; transform: translateY(calc(5 * var(--u))); }
  body.mopen .mburger span { background: transparent; }
  body.mopen .mburger span::before { transform: rotate(45deg); }
  body.mopen .mburger span::after { transform: rotate(-45deg); }

  .mmenu {
    display: block; position: fixed; inset: calc(56 * var(--u)) 0 auto; z-index: 39;
    background: #fff; padding: calc(8 * var(--u)) calc(37.7 * var(--u)) calc(20 * var(--u));
    box-shadow: 0 18px 40px -22px rgba(36,48,58,.5);
    transform: translateY(-115%); transition: transform .35s cubic-bezier(.22,.61,.36,1);
  }
  body.mopen .mmenu { transform: none; }
  .mmenu a {
    display: block; padding: calc(13 * var(--u)) 0; font-size: calc(17.5 * var(--u));
    color: var(--dark); text-decoration: none; border-bottom: 1px solid rgba(36,48,58,.08);
  }

  /* --- экраны --- */
  /* мягкая привязка: при листании следующий экран встаёт на заголовок,
     но прокрутку не перехватывает — читать длинный текст это не мешает */
  html { scroll-snap-type: y proximity; scroll-padding-top: calc(56 * var(--u)); }
  .mflow { padding-top: calc(56 * var(--u)); font-family: Manrope, sans-serif; }
  .ms {
    scroll-snap-align: start; scroll-margin-top: calc(56 * var(--u));
    padding: calc(34 * var(--u)) calc(36.8 * var(--u)) calc(40 * var(--u));
    border-bottom: 1px solid rgba(36,48,58,.1);
  }

  /* --- типографика по макету --- */
  .ms-h1 {
    font-family: Literata, serif; font-weight: 600; font-size: calc(37 * var(--u));
    line-height: calc(44 * var(--u)); color: var(--blue);
    margin: 0 0 calc(20 * var(--u)); letter-spacing: 0;
  }
  .ms-h {
    font-family: Literata, serif; font-weight: 600; font-size: calc(25 * var(--u));
    line-height: calc(30 * var(--u)); color: var(--blue); margin: 0 0 calc(16 * var(--u));
  }
  .ms-h3 {
    font-family: Literata, serif; font-weight: 600; font-size: calc(22 * var(--u));
    line-height: calc(27 * var(--u)); color: var(--blue); margin: calc(28 * var(--u)) 0 calc(14 * var(--u));
  }
  .ms-hero-sub {
    font-family: Literata, serif; font-weight: 700; font-size: calc(17 * var(--u));
    line-height: calc(27 * var(--u)); color: var(--blue); margin: 0 0 calc(18 * var(--u));
  }
  .ms-sub, .ms-lead {
    font-size: calc(17.5 * var(--u)); line-height: calc(26 * var(--u));
    color: var(--dark); margin: 0 0 calc(16 * var(--u));
  }
  .ms-hint {
    font-size: calc(13 * var(--u)); line-height: calc(16.5 * var(--u)); color: #000;
    text-align: center; margin: calc(22 * var(--u)) 0 calc(14 * var(--u));
  }
  /* оранжевый вывод: иконка слева, текст Literata в две-четыре строки */
  .ms-out {
    display: grid; grid-template-columns: calc(45.4 * var(--u)) 1fr;
    gap: calc(14 * var(--u)); align-items: start;
    margin: calc(30 * var(--u)) 0 0;
  }
  .ms-out.plain { display: block; }
  .ms-out img { width: 100%; }
  .ms-lead-hero { margin: calc(26 * var(--u)) 0 0; }
  .ms-out p {
    margin: 0; font-family: Literata, serif; font-weight: 700;
    font-size: calc(17 * var(--u));
    line-height: calc(24.5 * var(--u)); color: var(--orange);
  }
  .ms-accent {
    font-size: calc(17.5 * var(--u)); line-height: calc(26 * var(--u));
    font-weight: 700; color: var(--orange); margin: 0 0 calc(16 * var(--u));
  }
  .ms-blue {
    font-family: Literata, serif; font-weight: 700; font-size: calc(17 * var(--u));
    line-height: calc(22 * var(--u)); color: var(--blue); margin: calc(26 * var(--u)) 0 0;
  }
  .ms-photo {
    display: block; width: 100%; border-radius: calc(10 * var(--u));
    margin: calc(10 * var(--u)) 0 calc(20 * var(--u));
  }
  /* фото с флипчартом из десктопной версии — вертикальное (0.48), а слот
     макета 3:4: держим пропорции слота и подрезаем снизу, верх с лицом
     и флипчартом остаётся целиком */
  .ms-photo-crop {
    aspect-ratio: 3 / 4; object-fit: cover; object-position: center 26%;
  }
  /* по финальным правкам фото отзеркалено: взгляд и маркер направлены к тексту */
  .ms-photo-flip { transform: scaleX(-1); }

  /* первый экран: фото в синем круге */
  .ms-hero-photo {
    position: relative; margin: 0 calc(-8 * var(--u)) calc(24 * var(--u));
    padding-top: calc(26 * var(--u));   /* воздух между подзаголовком и дугой круга */
    display: grid; place-items: end center;
    overflow: clip;              /* круг обрезается блоком: край не виден нигде */
  }
  /* круг за фото: крупнее макетного и смещён вниз (просьба из полуфинала) —
     сверху воздух до подзаголовка, низ и правый край срезаются блоком,
     поэтому в правом нижнем углу сплошная заливка. Клики не ловит */
  /* верх круга — дуга: её пик справа, а над головой (левее центра) она идёт
     ниже. Поднимаем круг так, чтобы дуга проходила над макушкой, а воздух
     сверху даёт padding блока. Низ по-прежнему срезается блоком */
  .ms-disc {
    position: absolute; width: calc(560 * var(--u)); height: calc(560 * var(--u));
    background: var(--blue); border-radius: 50%;
    top: calc(14 * var(--u)); left: calc(52 * var(--u));
    pointer-events: none;
  }
  .ms-hero-photo img {
    position: relative; width: calc(320.8 * var(--u)); margin-top: calc(22 * var(--u));
  }

  /* кнопка-таблетка: в макете 215.4 x 51 */
  .ms-btn {
    display: block; margin: calc(8 * var(--u)) auto 0;
    min-width: calc(215.4 * var(--u)); padding: calc(15 * var(--u)) calc(24 * var(--u));
    border: 0; border-radius: 999px; background: var(--orange); color: #fff;
    font-family: Manrope; font-weight: 600; font-size: calc(17 * var(--u));
    line-height: calc(21 * var(--u)); cursor: pointer;
    transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .25s;
    box-shadow: 0 10px 22px -14px rgba(204,80,29,.9);
  }
  .ms-btn:hover {
    transform: scale(1.05); background: #b8461a;
    box-shadow: 0 14px 30px -12px rgba(204,80,29,.95);
  }
  .ms-btn:active { transform: scale(.92); background: #a63f15; }

  /* --- карусели --- */
  .mrail {
    display: flex; gap: calc(12 * var(--u));
    margin: calc(26 * var(--u)) calc(-36.8 * var(--u)) calc(14 * var(--u));
    padding: calc(4 * var(--u)) calc(36.8 * var(--u)) calc(8 * var(--u));
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mrail::-webkit-scrollbar { display: none; }
  .mcard, .mcase {
    flex: 0 0 calc(331.3 * var(--u)); scroll-snap-align: center; box-sizing: border-box;
    border: 1px solid var(--orange); border-radius: calc(18 * var(--u));
    padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); background: #fff;
    transition: background .3s, border-color .3s;
  }
  .mcard.on, .mcase.on { background: var(--orange-soft); }
  /* метрика: 40 пунктов цифра, 24 — «лет», подпись 16, пояснение 14 */
  .mcard-num {
    font-family: Literata, serif; font-weight: 700; font-size: calc(40 * var(--u));
    line-height: calc(44 * var(--u)); color: var(--dark); margin-bottom: calc(4 * var(--u));
  }
  .mcard-num span {
    font-family: Literata, serif; font-weight: 700; font-size: calc(24 * var(--u));
  }
  .mcard-label {
    font-weight: 700; font-size: calc(17 * var(--u)); line-height: calc(20 * var(--u));
    color: var(--dark); margin-bottom: calc(8 * var(--u));
  }
  .mcard-note {
    font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); color: var(--orange);
  }

  .mdots { display: flex; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }
  .mdot {
    width: calc(9 * var(--u)); height: calc(9 * var(--u)); padding: 0; border-radius: 50%;
    border: 1px solid rgba(36,48,58,.3); background: transparent; cursor: pointer;
    transition: background .25s, transform .25s, border-color .25s;
  }
  .mdot.on { background: var(--orange); border-color: var(--orange); }

  /* --- кейсы --- */
  .mcase { padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(24 * var(--u)); }
  .mcase-top {
    display: grid; grid-template-columns: calc(45 * var(--u)) 1fr;
    gap: calc(16 * var(--u)); align-items: start;
  }
  .mcase-ico {
    width: calc(45 * var(--u)); height: calc(45 * var(--u));
    background: var(--orange); border-radius: calc(11 * var(--u));
    display: grid; place-items: center;
  }
  .mcase-ico img { width: calc(31.2 * var(--u)); }
  .mcase-t {
    display: block; font-family: Literata, serif; font-weight: 700;
    font-size: calc(15.5 * var(--u)); line-height: calc(19 * var(--u)); color: var(--orange);
  }
  .mcase-s {
    display: block; font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u));
    color: var(--dark); font-weight: 400; margin-top: calc(10 * var(--u));
  }
  .mcase-b { margin-top: calc(14 * var(--u)); }
  .mcase-b b {
    display: block; font-family: Literata, serif; font-weight: 700;
    font-size: calc(13.5 * var(--u)); line-height: calc(16.5 * var(--u)); color: var(--blue);
  }
  .mcase-b p {
    margin: calc(3 * var(--u)) 0 0; font-size: calc(13.5 * var(--u));
    line-height: calc(17 * var(--u)); color: #000;
  }

  /* --- аккордеон проблем: оранжевые плашки 335 x 53.2 --- */
  .macc { margin: 0; display: grid; gap: calc(24.3 * var(--u)); }
  .macc-item { border: 0; }
  .macc-head {
    width: 100%; box-sizing: border-box; display: grid;
    grid-template-columns: calc(40.7 * var(--u)) 1fr calc(16 * var(--u));
    align-items: center; gap: calc(12.3 * var(--u));
    min-height: calc(53.2 * var(--u)); padding: calc(6 * var(--u)) calc(12.2 * var(--u));
    background: var(--orange); border: 0; border-radius: calc(10 * var(--u)); cursor: pointer;
    font-family: Literata, serif; font-weight: 400; font-size: calc(15 * var(--u));
    line-height: calc(18.5 * var(--u)); color: #fff; text-align: left;
  }
  .macc-ico {
    width: calc(40.7 * var(--u)); height: calc(39.7 * var(--u)); border-radius: 50%;
    background: #fff; display: grid; place-items: center;
  }
  .macc-ico img { width: calc(28.3 * var(--u)); }
  .macc-sign { position: relative; width: calc(14 * var(--u)); height: calc(14 * var(--u)); justify-self: end; }
  .macc-sign::before, .macc-sign::after {
    content: ""; position: absolute; inset: 50% 0 auto; height: calc(1.6 * var(--u));
    background: #fff; transition: transform .3s;
  }
  .macc-sign::after { transform: rotate(90deg); }
  .macc-head[aria-expanded="true"] .macc-sign::after { transform: rotate(0); }
  .macc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
  .macc-head[aria-expanded="true"] + .macc-body { grid-template-rows: 1fr; }
  .macc-inner { overflow: hidden; }
  .macc-inner p {
    margin: calc(10 * var(--u)) 0 0; font-size: calc(15.5 * var(--u));
    line-height: calc(21.5 * var(--u)); color: var(--dark);
  }

  /* --- аккордеон задач: голубые плашки, заголовок 20 --- */
  .mtask { display: grid; gap: calc(14.4 * var(--u)); }
  .mtask-head {
    width: 100%; box-sizing: border-box; display: grid;
    grid-template-columns: calc(39.6 * var(--u)) 1fr calc(16 * var(--u));
    align-items: center; gap: calc(12.3 * var(--u));
    min-height: calc(53.2 * var(--u)); padding: calc(6 * var(--u)) calc(12.3 * var(--u));
    background: var(--blue-soft); border: 0; border-radius: calc(10 * var(--u)); cursor: pointer;
    font-family: Literata, serif; font-weight: 700; font-size: calc(22 * var(--u));
    line-height: calc(25 * var(--u)); color: var(--blue); text-align: left;
  }
  .mtask-ico {
    width: calc(39.6 * var(--u)); height: calc(39.6 * var(--u)); border-radius: 50%;
    background: var(--blue); display: grid; place-items: center;
  }
  .mtask-ico img { width: calc(28.3 * var(--u)); }
  .mtask-sign { position: relative; width: calc(14 * var(--u)); height: calc(14 * var(--u)); justify-self: end; }
  .mtask-sign::before, .mtask-sign::after {
    content: ""; position: absolute; inset: 50% 0 auto; height: calc(1.6 * var(--u));
    background: var(--blue); transition: transform .3s;
  }
  .mtask-sign::after { transform: rotate(90deg); }
  .mtask-head[aria-expanded="true"] .mtask-sign::after { transform: rotate(0); }
  .mtask-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
  .mtask-head[aria-expanded="true"] + .mtask-body { grid-template-rows: 1fr; }
  .mtask-inner { overflow: hidden; }

  .mlist { margin: calc(10 * var(--u)) 0 0; padding: 0; list-style: none; }
  .mlist li {
    position: relative; padding-left: calc(22.6 * var(--u)); margin-bottom: calc(8 * var(--u));
    font-size: calc(15.5 * var(--u)); line-height: calc(21.5 * var(--u)); color: var(--dark);
  }
  .mlist li::before {
    content: ""; position: absolute; left: calc(6 * var(--u)); top: calc(7 * var(--u));
    width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--blue);
  }

  /* восьмой экран заканчивается белой полосой вывода — нижнее поле секции
     убрано, заголовок экрана 9 идёт сразу за полосой */
  #m8 { padding-bottom: 0; }

  /* вопрос-мостик между аккордеоном проблем и цепочкой: два смысловых
     блока разводим воздухом (финальные правки Елены) */
  .mchain-lead { margin: calc(44 * var(--u)) 0 calc(6 * var(--u)); }

  /* --- цепочка «интересная программа → изменений не произошло» --- */
  .mchain {
    position: relative; display: grid; gap: calc(14 * var(--u)); margin: calc(26 * var(--u)) 0 0;
  }
  .mchain::before {
    content: ""; position: absolute; left: calc(24 * var(--u));
    top: calc(40 * var(--u)); bottom: calc(40 * var(--u)); width: calc(2.4 * var(--u));
    border-radius: 2px;
    background: repeating-linear-gradient(var(--blue) 0 calc(5 * var(--u)),
                transparent calc(5 * var(--u)) calc(10 * var(--u)));
  }
  .mchain-item {
    position: relative; display: grid; grid-template-columns: calc(51 * var(--u)) 1fr;
    gap: calc(14 * var(--u)); align-items: center;
  }
  .mchain-item img { position: relative; background: #fff; }
  .mchain-item img { width: 100%; }
  .mchain-item b {
    display: block; font-family: Literata, serif; font-weight: 700; color: var(--blue);
    font-size: calc(17 * var(--u)); line-height: calc(21 * var(--u));
  }
  .mchain-item span {
    display: block; font-size: calc(15 * var(--u)); line-height: calc(19 * var(--u)); color: #000;
  }
  /* последний шаг: плашка оранжевая, а иконка стоит рядом с ней, не внутри */
  .mchain-item.last > div {
    background: var(--orange); border-radius: calc(12 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    display: grid; align-content: center; gap: calc(6 * var(--u));
  }
  .mchain-item.last b { color: #fff; font-size: calc(19 * var(--u)); line-height: calc(23 * var(--u)); }
  .mchain-item.last span { color: #fff; font-size: calc(17 * var(--u)); line-height: calc(23 * var(--u)); }

  /* --- вкладки этапов: синие плашки 164.5 x 51 --- */
  .mtabs {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: calc(16.1 * var(--u)) calc(12.3 * var(--u));
  }
  .mtab {
    display: flex; align-items: center; gap: calc(8 * var(--u));
    min-height: calc(51 * var(--u)); padding: calc(6 * var(--u)) calc(7 * var(--u));
    border: 0; border-radius: calc(10 * var(--u)); background: rgba(0,91,154,.45); color: #fff;
    font-family: Literata, serif; font-size: calc(14 * var(--u)); line-height: calc(17 * var(--u));
    font-weight: 700; text-align: left; cursor: pointer;
    transition: background .25s;
  }
  .mtab i {
    width: calc(25 * var(--u)); height: calc(24 * var(--u)); flex: none; border-radius: 50%;
    background: #fff; color: var(--blue); display: grid; place-items: center;
    font-family: Literata, serif; font-style: normal; font-weight: 700; font-size: calc(17 * var(--u));
    /* у Literata высокие выносы — без поправки цифра сидит ниже центра кружка */
    line-height: 1; padding-bottom: calc(3 * var(--u)); box-sizing: border-box;
  }
  .mtab.on { background: var(--blue); }
  .mpanes {
    margin-top: calc(20 * var(--u)); border: calc(1.6 * var(--u)) solid var(--blue);
    border-radius: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u));
  }
  .mpane { display: none; }
  .mpane.on { display: block; animation: mfade .25s ease both; }
  .mpane ul { margin: 0; padding: 0; list-style: none; }
  .mpane li {
    position: relative; padding-left: calc(22.5 * var(--u)); margin-bottom: calc(10.8 * var(--u));
    font-size: calc(15.5 * var(--u)); line-height: calc(21.5 * var(--u)); color: var(--dark);
    font-weight: 600;
  }
  .mpane li::before {
    content: ""; position: absolute; left: calc(6 * var(--u)); top: calc(7 * var(--u));
    width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--blue);
  }
  @keyframes mfade { from { opacity: 0; transform: translateY(6px); } }

  /* --- карточки рисков: 334.4 x 136, заливка #fcf1eb --- */
  .mflips { display: grid; gap: calc(24 * var(--u)); margin-top: calc(6 * var(--u)); }
  .mflip { perspective: 1000px; cursor: pointer; }
  .mflip-in {
    position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .mflip.on .mflip-in { transform: rotateY(180deg); }
  .mflip-in { display: grid; }
  .mflip-a, .mflip-b {
    /* обе стороны лежат в одной ячейке сетки: высота карточки сама
       выравнивается по более длинному тексту, ничего не обрезается */
    grid-area: 1 / 1;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: calc(14 * var(--u));
    padding: calc(20 * var(--u)) calc(18 * var(--u));
    min-height: calc(136 * var(--u)); box-sizing: border-box;
    display: grid; grid-template-columns: calc(45.4 * var(--u)) 1fr; gap: calc(16 * var(--u));
    align-content: start;
  }
  .mflip-a { background: var(--orange-soft); border: 1px solid var(--orange); }
  .mflip-b {
    transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
    background: var(--blue); color: #fff;
  }
  /* Safari местами не прячет изнанку по backface-visibility и показывает
     зеркальный текст — подстраховываемся прозрачностью в середине поворота */
  .mflip-a, .mflip-b { transition: opacity 0s .3s; }
  .mflip-b { opacity: 0; }
  .mflip.on .mflip-a { opacity: 0; }
  .mflip.on .mflip-b { opacity: 1; }
  .mflip-ico { width: 100%; align-self: start; }
  .mflip-turn {
    position: absolute; top: calc(12 * var(--u)); right: calc(12 * var(--u));
    width: calc(22.7 * var(--u));
  }
  /* заголовок не должен подлезать под значок «переверни» в углу */
  .mflip-a b, .mflip-b b { padding-right: calc(26 * var(--u)); }
  .mflip-a b {
    display: block; font-family: Literata, serif; font-weight: 400; font-size: calc(19 * var(--u));
    line-height: calc(23.5 * var(--u)); color: var(--orange); margin-bottom: calc(10 * var(--u));
  }
  .mflip-b b {
    display: block; font-family: Literata, serif; font-weight: 400; font-size: calc(19 * var(--u));
    line-height: calc(23.5 * var(--u)); color: #fff; margin-bottom: calc(10 * var(--u));
  }
  .mflip p { margin: 0; font-size: calc(15.5 * var(--u)); line-height: calc(20.5 * var(--u)); color: #000; }
  .mflip-b p { color: #fff; }

  /* --- ленты логотипов --- */
  .mlogos {
    overflow: hidden; margin: calc(18 * var(--u)) calc(-36.8 * var(--u)); height: calc(26 * var(--u));
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .mlogos-track { display: flex; gap: calc(26 * var(--u)); width: max-content; align-items: center; }
  .mlogos img {
    height: calc(20 * var(--u)); width: auto; filter: grayscale(1) opacity(.55);
    transition: filter .35s; cursor: pointer;
  }
  .mlogos img.clr { filter: none; }
  .mlogos.ltr .mlogos-track { animation: mrun-l 46s linear infinite; }
  .mlogos.rtl .mlogos-track { animation: mrun-r 52s linear infinite; }
  @keyframes mrun-l { to { transform: translateX(-50%); } }
  @keyframes mrun-r { from { transform: translateX(-50%); } }

  /* --- отзывы --- */
  .mrev { margin-top: calc(26 * var(--u)); }
  .mrev-who b {
    display: block; font-family: Literata, serif; font-weight: 700;
    font-size: calc(17 * var(--u)); line-height: calc(21 * var(--u)); color: var(--blue);
  }
  .mrev-who span {
    display: block; font-size: calc(15 * var(--u)); line-height: calc(19 * var(--u));
    color: var(--dark); margin-top: calc(4 * var(--u));
  }
  .mrev-q {
    position: relative; margin: calc(14 * var(--u)) 0 calc(8 * var(--u));
    padding-left: calc(30 * var(--u)); font-size: calc(15 * var(--u));
    line-height: calc(20.5 * var(--u)); color: var(--dark);
  }
  .mrev-q::before {
    content: "\201C"; position: absolute; left: 0; top: calc(-6 * var(--u));
    font-family: Literata, serif; font-size: calc(40 * var(--u)); line-height: 1; color: var(--blue);
  }
  .mrev-more {
    display: flex; align-items: center; gap: calc(8 * var(--u));
    margin: 0 auto; background: none; border: 0; padding: calc(4 * var(--u)) 0;
    color: var(--dark); font-family: Manrope; font-size: calc(14 * var(--u)); cursor: pointer;
  }
  .mrev-more::before {
    content: ""; width: 0; height: 0; border: calc(7 * var(--u)) solid transparent;
    border-top-color: var(--blue); border-bottom: 0; transition: transform .3s;
  }
  .mrev-more[aria-expanded="true"]::before { transform: rotate(180deg); }
  .mrev-full { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
  .mrev-more[aria-expanded="true"] + .mrev-full { grid-template-rows: 1fr; }
  .mrev-inner { overflow: hidden; }
  .mrev-inner p {
    margin: calc(10 * var(--u)) 0 0; padding-left: calc(30 * var(--u));
    font-size: calc(15 * var(--u)); line-height: calc(20.5 * var(--u)); color: var(--dark);
  }

  /* --- биография поверх фото --- */
  /* Фото уходит фоном, а биография начинается ниже лица — как в макете */
  /* Фото зафиксировано на весь экран, биография идёт «титрами» в нижней
     половине — лицо текст не задевает. Длину прокрутки задаёт распорка,
     в хвосте остаётся одно фото в полный рост — как просила Елена */
  .mbio {
    position: relative; margin: calc(20 * var(--u)) calc(-36.8 * var(--u)) 0;
    overflow: clip;
  }
  .mbio-pin {
    position: sticky; top: calc(56 * var(--u));
    height: calc(100svh - 56 * var(--u));
    margin-bottom: calc(-100svh + 56 * var(--u));
    overflow: hidden;
  }
  /* титры показаны — фото прибивается к низу блока и уезжает вместе с ним,
     иначе липкое фото стоит и следующий экран наплывает поверх */
  .mbio.done .mbio-pin {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    margin-bottom: 0;
  }
  .mbio-photo {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 58% top;
  }
  .mbio-pin::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,28,36,.16) 0%, rgba(20,28,36,.30) 42%,
                rgba(20,28,36,.62) 55%, rgba(20,28,36,.7) 100%);
  }
  /* окно титров прибито к низу закреплённого фото: при входе на экран
     текст виден с первых строк и не дёргается при обратной прокрутке */
  .mbio-window {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 55%;
    overflow: hidden; z-index: 1;
    -webkit-mask-image: linear-gradient(transparent 0, #000 8%);
    mask-image: linear-gradient(transparent 0, #000 8%);
  }
  .mbio-steps { will-change: transform; }
  .mbio-spacer { height: 200svh; }
  /* финал титров: оранжевый вывод на белой полосе во всю ширину экрана —
     как на референсе Елены, без плашки со скруглениями */
  .mstep-final {
    background: #fff;
    margin: calc(28 * var(--u)) calc(-36.8 * var(--u)) 0;
    padding: calc(22 * var(--u)) calc(36.8 * var(--u)) calc(26 * var(--u));
  }
  .mstep-final .ms-out { margin: 0; }
  /* пунктир между иконками этапов — от первой иконки до последней, не ниже */
  .mbio-steps {
    position: relative;
    /* без нижнего поля: белая полоса вывода — последний пиксель титров,
       она встаёт заподлицо с нижним краем фото */
    padding: calc(10 * var(--u)) calc(36.8 * var(--u)) 0;
  }
  .mbio-line {
    position: absolute; left: calc(51.8 * var(--u)); width: calc(1.8 * var(--u));
    top: 0; height: 0;
    background: repeating-linear-gradient(var(--orange) 0 calc(5 * var(--u)),
                transparent calc(5 * var(--u)) calc(11 * var(--u)));
  }
  .mstep {
    position: relative; z-index: 1; display: grid;
    grid-template-columns: calc(31.2 * var(--u)) 1fr; gap: calc(20 * var(--u));
    padding: calc(14 * var(--u)) 0;
  }
  .mstep-ico {
    width: calc(31.2 * var(--u)); height: calc(31.2 * var(--u)); border-radius: 50%;
    background: var(--orange); display: grid; place-items: center;
    transition: transform .3s;
  }
  .mstep-ico img { width: calc(22 * var(--u)); }
  .mstep.on .mstep-ico { transform: scale(1.08); }
  .mstep-b b {
    display: block; font-family: Literata, serif; font-weight: 700;
    font-size: calc(18 * var(--u)); line-height: calc(21.5 * var(--u)); color: #fff;
  }
  .mstep-b i {
    display: block; font-style: normal; font-weight: 700; font-size: calc(15 * var(--u));
    line-height: calc(18 * var(--u)); color: var(--year); margin-bottom: calc(8 * var(--u));
  }
  .mstep-b p {
    margin: 0; font-size: calc(16.5 * var(--u)); line-height: calc(21.5 * var(--u)); color: #fff;
  }

  /* --- контакты --- */
  .ms-tg {
    display: grid; grid-template-columns: calc(56.8 * var(--u)) 1fr; align-items: center;
    gap: calc(10 * var(--u)); margin: calc(26 * var(--u)) 0 0;
    text-decoration: none; color: var(--dark);
  }
  .ms-tg img { width: 100%; transition: transform .2s cubic-bezier(.22,.61,.36,1), filter .2s; }
  .ms-tg:hover img { transform: scale(1.12); filter: brightness(1.12); }
  .ms-tg:active img { transform: scale(.85); }
  .ms-tg-t { font-size: calc(15 * var(--u)); line-height: calc(19 * var(--u)); }
  .ms-contacts {
    display: grid; gap: calc(12 * var(--u)); margin: calc(26 * var(--u)) calc(-1 * var(--u)) 0;
    background: var(--blue); border-radius: calc(10 * var(--u));
    padding: calc(14 * var(--u)) calc(20 * var(--u));
  }
  .ms-contacts a {
    display: grid; grid-template-columns: calc(21.5 * var(--u)) 1fr; align-items: center;
    gap: calc(12 * var(--u)); color: #fff; text-decoration: none;
    font-size: calc(17 * var(--u)); line-height: calc(21 * var(--u));
    transition: transform .18s;
  }
  .ms-contacts a:first-child { font-weight: 700; }
  .ms-contacts a:active { transform: scale(.97); }
  .ms-contacts img { width: 100%; justify-self: center; }

  /* --- форма-шторка --- */
  .msheet {
    display: block; position: fixed; inset: 0; z-index: 60; background: #fff;
    transform: translateY(100%); transition: transform .4s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto;
  }
  .msheet.on { transform: none; }
  .msheet[hidden] { display: none; }
  .msheet-in { padding: calc(22 * var(--u)) calc(36.8 * var(--u)) calc(50 * var(--u)); }
  .msheet-x {
    position: sticky; top: 0; float: right; width: calc(36 * var(--u)); height: calc(36 * var(--u));
    border: 0; border-radius: 50%; background: #faf9f7; font-size: calc(20 * var(--u));
    color: rgba(36,48,58,.6); cursor: pointer;
  }
  .msheet h2 {
    display: grid; grid-template-columns: calc(51 * var(--u)) 1fr; align-items: center;
    gap: calc(15 * var(--u)); clear: both; margin: calc(10 * var(--u)) 0 calc(24 * var(--u));
    font-family: Literata, serif; font-weight: 600; font-size: calc(23 * var(--u));
    line-height: calc(27.5 * var(--u)); color: var(--orange);
  }
  .msheet h2 img { width: 100%; }
  .mfield { display: block; margin-bottom: calc(20 * var(--u)); }
  .mfield span {
    display: block; font-size: calc(17 * var(--u)); line-height: calc(21 * var(--u));
    color: #000; margin-bottom: calc(8 * var(--u));
  }
  .mfield input, .mfield textarea {
    width: 100%; box-sizing: border-box; font-family: Manrope; font-size: calc(17 * var(--u));
    line-height: calc(22 * var(--u)); color: #000;
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    border: 1px solid var(--dark); border-radius: calc(6 * var(--u)); background: #fff;
  }
  .mfield input::placeholder, .mfield textarea::placeholder { color: var(--grey); }
  .mfield input:focus, .mfield textarea:focus { outline: none; border-color: var(--blue); }
  .mconsent {
    display: flex; gap: calc(10 * var(--u)); align-items: flex-start;
    font-size: calc(15 * var(--u)); line-height: calc(19.5 * var(--u));
    color: var(--dark); margin: calc(8 * var(--u)) 0 calc(22 * var(--u));
  }
  .mconsent input { margin-top: 2px; accent-color: var(--orange); flex: none; }
  .mconsent a { color: var(--orange); }
  .mform-send, .mthanks-back {
    width: 100%; padding: calc(14 * var(--u)); border: 0; border-radius: 999px; color: #fff;
    font-family: Manrope; font-weight: 600; font-size: calc(18 * var(--u)); cursor: pointer;
    transition: transform .18s;
  }
  .mform-send { background: var(--orange); }
  .mthanks-back { background: var(--blue); }
  .mform-send:active, .mthanks-back:active { transform: scale(.97); }
  .mform-err { color: var(--orange); font-size: calc(14 * var(--u)); margin: calc(10 * var(--u)) 0 0; }
  .mthanks { padding: calc(20 * var(--u)) 0 calc(30 * var(--u)); }
  .mthanks-h {
    display: grid; grid-template-columns: calc(51 * var(--u)) 1fr; align-items: center;
    gap: calc(15 * var(--u)); margin-bottom: calc(20 * var(--u));
  }
  .mthanks-h img { width: 100%; }
  .mthanks b {
    display: block; font-family: Literata, serif; font-weight: 600;
    font-size: calc(23 * var(--u)); line-height: calc(27.5 * var(--u)); color: var(--orange);
  }
  .mthanks i {
    display: block; font-style: normal; font-size: calc(18 * var(--u));
    line-height: calc(21.6 * var(--u)); color: var(--blue); margin-bottom: calc(18 * var(--u));
  }
  .mthanks p {
    font-size: calc(18 * var(--u)); line-height: calc(21.6 * var(--u)); color: var(--blue);
    margin: 0 0 calc(28 * var(--u));
  }

  @media (prefers-reduced-motion: reduce) {
    .mlogos-track { animation: none; }
    .mflip-in, .macc-body, .mtask-body, .mrev-full, .msheet { transition-duration: .01ms; }
  }
}


/* Форма обратной связи по кнопке */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 20px; background: rgba(36,48,58,.55); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box { background: #fff; border-radius: 18px; padding: clamp(22px,3vw,38px);
  width: min(520px,100%); max-height: 92vh; overflow-y: auto;
  transform: translateY(16px); transition: transform .3s; }
.modal.is-open .modal__box { transform: none; }
.modal__box h2 { font-family: Literata, serif; font-size: 26px; font-weight: 600;
  color: #005b9a; margin: 0 0 12px; }
.modal__lead { margin: 0 0 22px; font-size: 15px; color: rgba(36,48,58,.72); }
.modal__close { float: right; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #faf9f7; font-size: 20px; cursor: pointer; color: rgba(36,48,58,.6); }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 15px;
  padding: 12px 14px; border: 1px solid rgba(36,48,58,.16); border-radius: 12px;
  background: #faf9f7; }
.field input:focus, .field textarea:focus { outline: none; border-color: #005b9a; background: #fff; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px;
  color: rgba(36,48,58,.6); margin-bottom: 18px; }
.consent input { margin-top: 2px; accent-color: #cc501d; }
.consent a { color: #cc501d; }
.submit { width: 100%; padding: 14px; border: 0; border-radius: 999px; background: #cc501d;
  color: #fff; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
.submit:hover { background: #b8461a; }
.form-status { margin-top: 12px; font-size: 14px; color: #1d8b41; display: none; }
.form-status.on { display: block; }
.modal__title { display: flex; align-items: center; gap: 14px;
  font-family: Literata, serif; font-size: 24px; font-weight: 600;
  color: #cc501d; margin: 0 0 18px; }
.modal__title img { width: 44px; }
.modal__sub { margin: 0 0 12px; font-size: 17px; color: #005b9a; }
.modal__text { margin: 0 0 22px; font-size: 16px; line-height: 1.45; color: #005b9a; }
.submit--back { background: #005b9a; }
.submit--back:hover { background: #004a80; }

/* Бегущая строка логотипов клиентов */
@keyframes logo-run { to { transform: translateX(-2447.28px); } }
.logo-track { animation: logo-run 71.98s linear infinite; }
.logos:hover .logo-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .js .slide .an { opacity: 1; }
  .js .slide.ready .an { animation: none; }
}

/* Точки-навигация справа */
.dots {
  position: fixed;
  /* держим точки у края самого слайда, а не окна: на широком мониторе
     они уезжали к рамке экрана и правая сторона выглядела «заполненной»,
     а левая пустой */
  right: calc(max(0px, (100vw - 52px - min(calc(100vw - 52px), 100svh * 16 / 9)) / 2) + 12px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  z-index: 10;
}
.dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  /* драфт 4: пустые кружочки оранжевые — синие сливались с фигурами макета */
  border: 1px solid #cc501d;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.dots button.is-on { background: #cc501d; border-color: #cc501d; transform: scale(1.35); }

/* Подсказка «листайте» на первом экране */
.hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(36, 48, 58, .45);
  z-index: 10;
  transition: opacity .4s;
}
.hint.is-off { opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  html, html.js { scroll-snap-type: none; }
  .slide { height: auto; }
  .slide svg { width: 100vw; }
  .dots { display: none; }
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}