/* Saval Assessors — первые пять блоков
   Дизайн-система: docs/04_Дизайн_система.md
   Порядок каскада фиксируем слоями, чтобы утилиты и состояния не воевали со специфичностью. */

@layer reset, tokens, base, layout, components, motion;

/* ─────────────────────────── reset ─────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; }
  img, svg, picture { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; }
  :where(:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

  /* На тёмных поверхностях кольцо фокуса цвета --ink невидимо.
     Переопределяем сам токен — правило выше его подхватит. */
  :where(.services, .founder, .tile--cta, .final, .site-footer, .cases) { --focus-ring: var(--ink-invert); }
}

/* ─────────────────────────── tokens ─────────────────────────── */
@layer tokens {
  :root {
    /* поверхности */
    --surface:         #FFFFFF;
    --surface-tint:    #F7EFEC;
    --surface-neutral: #F2F2F2;
    --surface-invert:  #342A22;

    /* текст */
    --ink:        #342A22;
    --ink-strong: #231F20;
    --ink-muted:  #6B6058;
    --ink-invert: #F7EFEC;

    /* линии */
    --line:        #DED5CE;
    --line-strong: #B4ADA7;

    /* интерактив */
    --btn-bg:       #342A22;
    --btn-bg-hover: #231F20;
    --focus-ring:   #342A22;

    /* типографика */
    --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
    --font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

    --step-overline: .8125rem;
    --step-small:    .9375rem;
    --step-body:     1.0625rem;
    --step-lead:     clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
    /* минимум подобран так, чтобы «Испанские документы,» держалось
       в одной строке на экране 360 px и заголовок не рассыпался на четыре */
    --step-h1:       clamp(1.75rem, 1.05rem + 3.7vw, 5rem);

    /* ритм */
    --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem;   --space-7: 3rem;
    --space-8: 4rem;   --space-9: 6rem;   --space-10: 8rem;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shell: 1200px;
    --header-h: 72px;

    --ease: cubic-bezier(.2, .7, .3, 1);
  }
}

/* ─────────────────────────── base ─────────────────────────── */
@layer base {
  body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--step-body);
    line-height: 1.6;
    font-synthesis-weight: none;
  }

  h1 { font-family: var(--font-display); font-weight: 400; }

  p { text-wrap: pretty; }

  .shell {
    inline-size: min(100% - 2 * var(--space-5), var(--shell));
    margin-inline: auto;
  }

  /* Переход по якорю из навигации: заголовок секции не должен уезжать
     под липкую шапку. */
  main > section[id],
  .service[id] {
    scroll-margin-block-start: calc(var(--header-h) + var(--space-5));
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  @media (width < 48rem) {
    .shell { inline-size: min(100% - 2 * var(--space-4), var(--shell)); }
  }

  /* текст только для скринридера: пояснение к вопросику доступно с клавиатуры,
     даже когда всплывашка не показана */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--space-4);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--ink);
    color: var(--ink-invert);
    border-radius: var(--radius-sm);
    text-decoration: none;

    &:focus { inset-block-start: var(--space-3); }
  }

  .overline {
    font-size: var(--step-overline);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--ink-muted);
  }
}

/* ─────────────────────────── layout ─────────────────────────── */
@layer layout {
  #top-sentinel { position: absolute; inset-block-start: 0; block-size: 1px; inline-size: 1px; }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
    border-block-end: 1px solid transparent;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);

    &[data-stuck="true"] {
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      border-block-end-color: var(--line);
    }
  }

  .site-header__inner {
    /* линия снизу входит в высоту шапки: иначе первый экран не сходится на пиксель */
    block-size: calc(var(--header-h) - 1px);
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .logo {
    flex: none;
    inline-size: 158px;

    & img { inline-size: 100%; block-size: auto; }
  }

  .nav {
    display: flex;
    gap: var(--space-5);
    font-size: var(--step-small);
    font-weight: 500;

    & a {
      text-decoration: none;
      padding-block: var(--space-2);
      color: var(--ink);
      transition: color .2s var(--ease);

      &:hover { color: var(--ink-muted); }
    }
  }

  .site-header__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  /* Контакт в шапке: город и телефон, рядом два мессенджера. Телефон здесь
     полезнее кнопки «описать ситуацию» — она уже стоит на первом экране,
     а звонок и мессенджер закрывают оба привычных способа связи. */
  .head-phone {
    display: grid;
    justify-items: end;
    gap: 1px;
    text-decoration: none;
    color: var(--ink);
    line-height: 1.2;
  }

  .head-phone__city {
    font-size: var(--step-overline);
    color: var(--ink-muted);
    transition: color .2s var(--ease);
  }

  .head-phone__number {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .head-phone:hover .head-phone__city { color: var(--ink); }

  .head-links {
    display: flex;
    gap: var(--space-2);
  }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);

    & svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    &:hover {
      border-color: var(--line-strong);
      background: var(--surface-tint);
    }
  }

  @media (width < 64rem) {
    .nav { display: none; }
    .logo { inline-size: 142px; }
  }

  @media (width < 48rem) {
    /* на узком экране остаются только значки: номер набирают с них же */
    .head-phone { display: none; }
  }

  @media (width < 40rem) {
    .site-header__actions { gap: var(--space-3); }
    .logo { inline-size: 124px; }
    .icon-btn { inline-size: 40px; block-size: 40px; }

    .lang a { padding-inline: 6px; }
  }

  /* На 320 px в строку должны сойтись знак, четыре языка и два значка.
     Языки сжимаются за счёт внутренних отступов, сами ссылки остаются
     доступными для касания. */
  @media (width < 30rem) {
    .site-header__inner { gap: .375rem; }
    .site-header__actions { gap: .375rem; min-inline-size: 0; }

    .logo { inline-size: 80px; }

    .lang {
      min-inline-size: 0;
      flex-shrink: 1;
      gap: 0;
      font-size: .75rem;

      & a { min-inline-size: 0; padding-inline: 2px; min-block-size: 32px; }
    }

    .head-links { flex: none; gap: .375rem; }

    .icon-btn {
      inline-size: 32px;
      block-size: 32px;

      & svg { inline-size: 1.05rem; block-size: 1.05rem; }
    }
  }
}

/* ─────────────────────────── components ─────────────────────────── */
@layer components {

  /* — переключатель языка — */
  .lang {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--step-small);

    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px var(--space-2);
      border-radius: var(--radius-sm);
      color: var(--ink-muted);
      font-weight: 500;
      text-decoration: none;
      min-block-size: 36px;
      transition: color .2s var(--ease), background-color .2s var(--ease);

      &:hover { background: var(--surface-tint); color: var(--ink); }

      /* активный язык помечен и цветом, и начертанием, и подчёркиванием */
      &[aria-current="page"] {
        color: var(--ink);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 1.5px;
      }
    }
  }

  /* — кнопки — */
  .btn {
    --btn-py: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--btn-py) var(--space-5);
    min-block-size: 48px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), translate .12s var(--ease);

    &:active { translate: 0 1px; }
  }

  .btn--primary {
    background: var(--btn-bg);
    color: #fff;

    &:hover { background: var(--btn-bg-hover); }
  }

  /* кнопка на тёмной плитке: инверсия основной */
  .btn--light {
    background: var(--ink-invert);
    color: var(--ink-strong);

    &:hover { background: var(--surface); }
  }

  .btn--ghost {
    border: 1px solid var(--ink);
    color: var(--ink);

    &:hover { background: var(--ink); color: #fff; }
  }

  /* кнопка со знаком мессенджера */
  .btn--icon {
    & svg {
      inline-size: 1.15rem;
      block-size: 1.15rem;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }

  .btn--sm {
    --btn-py: 10px;
    min-block-size: 40px;
    padding-inline: var(--space-4);
    font-size: var(--step-small);
  }

  .btn__arrow {
    inline-size: 16px;
    block-size: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate .2s var(--ease);
  }

  .btn:hover .btn__arrow { translate: 3px 0; }

  /* — меню контактов на Popover API — */
  .contact-wrap { position: relative; display: inline-flex; }

  /* Поповер живёт в top layer, поэтому позиционируется от вьюпорта.
     Координаты проставляет script.js при открытии. */
  .contact-menu {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: var(--space-3);
    inline-size: min(288px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--ink) 55%, transparent);

    &:popover-open {
      animation: pop-in .18s var(--ease);
    }
  }

  .contact-menu__label {
    font-size: var(--step-overline);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .contact-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 500;
    min-block-size: 44px;
    transition: background-color .18s var(--ease);

    &:hover { background: var(--surface-tint); }

    & svg {
      inline-size: 22px;
      block-size: 22px;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }

  .contact-menu__item--quiet {
    color: var(--ink-muted);
    font-size: var(--step-small);
    border-block-start: 1px solid var(--line);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-4);
  }

  /* — первый экран — */
  .hero {
    /* насколько карточка-обещание опускается ниже кадра;
       на ту же величину сдвигаются кнопки, чтобы низы совпали по одной линии */
    --promise-drop: min(var(--space-6), 3.5svh);
    /* Насколько кадр поднимается выше верха текстовой колонки:
       подзаголовок начинается не по кромке снимка, а в его первой трети.
       Вертикальные интервалы первого экрана считаются и от ширины окна,
       и от его высоты: на невысоком ноутбучном экране они сжимаются,
       чтобы кнопка не уезжала за сгиб. */
    /* Единица вертикального воздуха. Растёт быстрее высоты окна: на 768
       еле дышит, к 1000 набирает вес. Все интервалы экрана — кратные ей,
       поэтому близкие элементы остаются близкими на любой высоте, а не
       разъезжаются каждый по своему закону. */
    --air: clamp(0.75rem, calc(5.5svh - 26px), 3rem);

    --media-rise: min(clamp(var(--space-6), 6vw, var(--space-9)), calc(var(--air) * 3));
    /* минимальный отступ от подзаголовка до кнопок */
    --lead-gap:   min(clamp(var(--space-7), 6vw, var(--space-9)), calc(var(--air) * 2.5));
    /* Расстояние от края контейнера до края экрана.
       Считаем от вьюпорта, а не в процентах: процент внутри переменной
       подставляется в свойство как есть и меряется уже от грид-области —
       кадр уезжал на 264 px за экран. */
    --bleed: max(var(--space-5), calc((100vw - var(--shell)) / 2));

    position: relative;
    /* Экран занимает ровно окно и центрируется в нём: на высоком мониторе
       остаток делится поровну сверху и снизу, на невысоком ноутбуке блок
       собирается плотнее. Ниже 62rem колонки идут в столбик, содержимое
       перерастает минимум, и правило перестаёт на что-либо влиять. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Верхняя граница: на очень высоком окне экран не растягивается до края,
       иначе над надзаголовком повисает двести пикселей пустоты. */
    min-block-size: min(calc(100svh - var(--header-h)), 52rem);
    padding-block: min(clamp(var(--space-7), 8vw, var(--space-10)), calc(var(--air) * 3))
                   min(clamp(var(--space-6), 5vw, var(--space-9)), calc(var(--air) * 1.75));
    overflow: clip;
  }

  /* H1 — главный объект экрана. Вторая строка сдвинута вправо: уступ
     задаёт диагональ, по которой глаз идёт к кадру. */
  .hero__title {
    /* нижний отступ = подъём кадра + запас: так снимок не наезжает на заголовок,
       на какой бы ширине ни считался clamp */
    margin-block: min(var(--space-2), calc(var(--air) * .5))
                  calc(var(--media-rise) + min(clamp(var(--space-5), 2.5vw, var(--space-7)), var(--air)));
    /* на невысоком окне кегль ограничен долей высоты — заголовок ужимается
       вместе со всем экраном, а не выталкивает его за край */
    font-size: min(var(--step-h1), 8svh);
    line-height: 1;
    letter-spacing: -.015em;
    color: var(--ink-strong);

    & > span { display: block; }
    /* курсивный акцент не разрывается переносом */
    & em { font-style: italic; white-space: nowrap; }
  }

  .hero__title-b { margin-inline-start: 25%; }

  .hero__row {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    align-items: stretch;
    column-gap: clamp(var(--space-7), 5vw, var(--space-9));
  }

  .hero__copy {
    display: flex;
    flex-direction: column;
  }

  .hero__lead {
    font-size: var(--step-lead);
    line-height: 1.5;
    color: var(--ink);
    /* нижняя граница отступа до кнопок; остальное доберёт auto-margin */
    margin-block-end: var(--lead-gap);

    & p + p { margin-block-start: min(var(--space-4), 2svh); }
  }

  /* кнопки прижаты к низу колонки и опущены на тот же сдвиг, что и карточка */
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    /* Отступ задан явно. Общая нижняя линия с карточкой держится сама:
       кнопки заканчивают колонку, колонка задаёт высоту ряда, а кадр
       и карточка опущены на ту же величину --promise-drop. */
    margin-block-start: auto;
    /* сдвигаем через inset, а не translate: translate анимирует «rise»,
       и fill-mode обнулял бы смещение */
    position: relative;
    inset-block-start: var(--promise-drop);
  }

  /* — маркеры строкой под кадром —
     Компактная строка, а не три колонки во всю ширину: разнесённые
     на четверть экрана тезисы перестают читаться как один ряд.
     Знак ведёт каждый пункт, поэтому при переносе ничего не повисает
     в конце строки — в отличие от точки-разделителя между пунктами. */
  .markers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) clamp(var(--space-6), 2.6vw, var(--space-8));
    margin-block-start: calc(var(--promise-drop) + min(clamp(var(--space-5), 4vw, var(--space-8)), calc(var(--air) * 1.75)));
    font-size: var(--step-small);
    line-height: 1.45;
    color: var(--ink-muted);
    text-wrap: pretty;

    & li {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: var(--space-2);

      /* косая рифмуется с диагоналями знака компании */
      &::before {
        content: "\\";
        color: var(--ink);
        font-weight: 600;
      }
    }
  }

  /* — строка с пояснением — */
  .hint-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-inline-size: 100%;
    padding: 2px 0;
    color: inherit;
    text-align: start;
    line-height: inherit;
    cursor: help;

    & > [data-i] {
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
    }

    &:hover > [data-i],
    &:focus-visible > [data-i],
    &[aria-expanded="true"] > [data-i] {
      color: var(--ink);
      text-decoration-color: var(--line-strong);
    }

    &:focus-visible { border-radius: var(--radius-sm); }
  }

  .hint {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 17px;
    block-size: 17px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-muted);
    transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
  }

  .hint-trigger:hover .hint,
  .hint-trigger:focus-visible .hint,
  .hint-trigger[aria-expanded="true"] .hint {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--surface);
  }

  /* Светлая карточка остаётся визуально вторичной по отношению к тёмной
     карточке-обещанию и указывает на активную строку небольшим хвостиком. */
  .hint-bubble {
    position: fixed;
    inset: auto;
    margin: 0;
    inline-size: min(22rem, calc(100vw - 24px));
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-tint);
    color: var(--ink);
    font-size: var(--step-small);
    line-height: 1.55;
    text-wrap: pretty;
    box-shadow: 0 18px 48px -26px color-mix(in srgb, var(--ink) 55%, transparent),
                0 4px 12px -8px color-mix(in srgb, var(--ink) 30%, transparent);

    &::before {
      content: "";
      position: absolute;
      left: var(--anchor-x, 24px);
      inline-size: 10px;
      block-size: 10px;
      background: var(--surface-tint);
      rotate: 45deg;
    }

    &[data-side="bottom"]::before {
      inset-block-start: -6px;
      border-block-start: 1px solid var(--line);
      border-inline-start: 1px solid var(--line);
    }

    &[data-side="top"]::before {
      inset-block-end: -6px;
      border-block-end: 1px solid var(--line);
      border-inline-end: 1px solid var(--line);
    }

    &:popover-open { animation: pop-in .18s var(--ease); }
  }

  /* — кадр во всю ширину — */
  .hero__media {
    position: relative;
    /* отрицательный внешний отступ выносит колонку из контейнера к краю вьюпорта */
    margin-inline-end: calc(-1 * var(--bleed));
    /* Высоту ряда задаёт колонка с текстом, а не картинка: снимок вынут
       из потока и растягивается по готовой высоте. Иначе ряд тянулся
       до собственной пропорции кадра, и между подзаголовком и кнопками
       оставался провал в четверть экрана. */
    min-block-size: clamp(14rem, 15vw, 18rem);
    /* отрицательный отступ вытягивает кадр вверх за пределы грид-области:
       низ остаётся на общей линии с кнопками, а верх уходит выше подзаголовка */
    margin-block-start: calc(-1 * var(--media-rise));

    & picture { position: absolute; inset: 0; }

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: 57% 42%;
      border-start-start-radius: clamp(3rem, 6vw, 7rem);
    }
  }

  /* — карточка-обещание — */
  .promise {
    position: absolute;
    inset-block-end: calc(-1 * var(--promise-drop));
    inset-inline-start: calc(-1 * var(--space-7));
    inline-size: 19rem;
    padding: var(--space-5);
    background: var(--surface-invert);
    color: var(--ink-invert);
    border-radius: var(--radius-md);
    font-size: var(--step-body);
    line-height: 1.45;
    text-wrap: pretty;

    & .promise__second {
      margin-block-start: var(--space-3);
      color: color-mix(in srgb, var(--ink-invert) 74%, transparent);
    }
  }

  /* Невысокое окно: колонка с текстом шире, подзаголовок укладывается
     в меньшее число строк. Экран сходится по высоте за счёт ширины —
     единственный запас, который на таком окне ещё остаётся. */
  @media (width >= 62rem) and (height < 46rem) {
    .hero__row { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }
  }

  /* — планшет и мобильный — */
  @media (width < 62rem) {
    .hero__title-b { margin-inline-start: 12%; }

    .hero__row {
      grid-template-columns: 1fr;
      row-gap: clamp(var(--space-8), 9vw, var(--space-9));
    }

    .hero__copy { max-inline-size: 36rem; }

    .hero__lead { margin-block-end: 0; }

    .hero__actions {
      margin-block-start: clamp(var(--space-6), 5vw, var(--space-8));
      inset-block-start: 0;
    }

    .markers {
      flex-direction: column;
      gap: var(--space-3);
      margin-block-start: clamp(var(--space-7), 6vw, var(--space-8));
    }

    .hero__media {
      /* кадр тянется от края до края экрана */
      margin-inline: calc(-1 * var(--bleed));
      margin-block-start: 0;
      min-block-size: 0;

      & picture { position: static; }

      & img {
        block-size: auto;
        aspect-ratio: 2 / 1;
        object-position: 64% 42%;
        border-start-start-radius: clamp(3rem, 9vw, 7rem);
      }
    }

    .promise {
      inset-block-end: var(--space-6);
      inset-inline-start: var(--bleed);
      inline-size: min(20rem, calc(100vw - 2 * var(--space-5)));
    }
  }

  /* с 48rem контейнер прижимается к краю на 16 px — кадр повторяет за ним */
  @media (width < 48rem) {
    .hero {
      --bleed: max(var(--space-4), calc((100vw - var(--shell)) / 2));
      padding-block-start: var(--space-7);
    }

    .hero__title {
      margin-block: var(--space-3) var(--space-5);
      font-size: clamp(3.15rem, 9vw, 4rem);
      line-height: .96;
    }

    .hero__row { row-gap: var(--space-7); }

    .hero__media {
      display: grid;
      background: var(--surface-invert);
    }

    .hero__media img {
      aspect-ratio: 16 / 10;
      object-position: 62% 43%;
    }

    .promise {
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-4);
      inline-size: 100%;
      margin: 0;
      padding: var(--space-4) var(--bleed);
      border-radius: 0;
      font-size: var(--step-small);

      & .promise__second { margin-block-start: 0; }
    }
  }

  @media (width < 34rem) {
    .hero__title-b { margin-inline-start: 0; }

    .hero__actions { inline-size: 100%; }
    .hero__actions .contact-wrap,
    .hero__actions .btn { inline-size: 100%; }

    .hero__media img { aspect-ratio: 4 / 3; object-position: 65% 43%; }

    .promise {
      grid-template-columns: 1fr;
      gap: .35rem;
    }
  }

  /* — три ситуации — */
  .situations {
    padding-block: clamp(var(--space-8), 7vw, var(--space-9))
                   clamp(var(--space-9), 11vw, var(--space-10));
    border-block-start: 1px solid var(--line);
    background: var(--surface);
    overflow: clip;
  }

  .situations__header {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(19rem, .7fr);
    align-items: end;
    gap: var(--space-6) var(--space-8);
    margin-block-end: clamp(var(--space-7), 4.5vw, var(--space-8));
  }

  .situations__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 3.9vw, 3.75rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--ink-strong);

    & span { display: block; }
  }

  .situations__lead {
    max-inline-size: 29rem;
    padding-block-end: 5px;
    font-size: var(--step-body);
    line-height: 1.55;
    color: var(--ink-muted);
  }

  .scenario-grid {
    border-block-start: 1px solid var(--line-strong);
  }

  .scenario-grid__item {
    min-inline-size: 0;
    border-block-end: 1px solid var(--line);
  }

  .scenario-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 4rem minmax(10rem, 1.05fr) minmax(18rem, 1.75fr)
                           minmax(14rem, 1.35fr) minmax(9rem, auto);
    align-items: center;
    gap: clamp(var(--space-4), 2.2vw, var(--space-6));
    min-block-size: 12.5rem;
    padding-block: var(--space-6);
    color: var(--ink);
    text-decoration: none;

    &::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline: calc(-1 * var(--space-5));
      z-index: -1;
      background: transparent;
      transition: background-color .2s var(--ease);
    }

    &:hover {
      &::before { background: var(--surface-tint); }
    }

    &:focus-visible { border-radius: var(--radius-sm); }
  }

  .scenario-card__number {
    grid-column: 1;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--line-strong);
    transition: color .2s var(--ease);
  }

  .scenario-card__title {
    grid-column: 2;
    max-inline-size: 14ch;
    font-family: var(--font-text);
    font-size: clamp(1.35rem, 1.3vw + .8rem, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    transition: translate .2s var(--ease);
  }

  .scenario-card__copy {
    grid-column: 3;
    max-inline-size: 31rem;
    color: var(--ink-muted);
    font-size: var(--step-small);
    line-height: 1.6;
  }

  .scenario-card__topics {
    grid-column: 4;
    color: var(--ink-muted);
    font-size: .8125rem;
    line-height: 1.35;

    & li {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: var(--space-2);
      padding-block: 3px;

      &::before {
        content: "—";
        color: var(--line-strong);
      }
    }
  }

  .scenario-card__action {
    grid-column: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-block-size: 44px;
    margin: 0;
    font-size: var(--step-small);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

    & svg {
      inline-size: 20px;
      block-size: 20px;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: translate .2s var(--ease);
    }
  }

  .scenario-card:hover {
    & .scenario-card__number { color: var(--ink); }
    & .scenario-card__title { translate: 4px 0; }
    & .scenario-card__action svg { translate: 4px 0; }
  }

  @media (width < 70rem) {
    .scenario-card {
      grid-template-columns: 3.5rem minmax(9rem, 1fr) minmax(16rem, 1.55fr)
                             minmax(12rem, 1.15fr);
    }

    .scenario-card__action {
      grid-column: 2;
      grid-row: 2;
      justify-content: flex-start;
      margin-block-start: var(--space-3);
    }
  }

  @media (width < 62rem) {
    .situations__header {
      grid-template-columns: 1fr;
      align-items: start;
      row-gap: var(--space-5);
    }

    .scenario-grid {
      display: grid;
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: min(82vw, 25rem);
      gap: var(--space-4);
      border-block-start: 0;
      margin-inline: calc(-1 * var(--space-5));
      padding-inline: var(--space-5);
      padding-block: 2px var(--space-4);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;
      scroll-padding-inline: var(--space-5);
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }

    .scenario-grid__item {
      border-block-end: 0;
      scroll-snap-align: start;
    }

    .scenario-card {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto auto 1fr auto;
      align-items: start;
      min-block-size: 100%;
      padding: var(--space-5);
      border-block-start: 1px solid var(--ink);
      border-block-end: 1px solid var(--line);

      &::before {
        inset: 0;
        background: var(--surface);
      }
    }

    .scenario-card__number {
      grid-column: 2;
      grid-row: 1;
    }

    .scenario-card__title {
      grid-column: 1 / -1;
      grid-row: 2;
      margin-block-start: var(--space-6);
    }

    .scenario-card__copy {
      grid-column: 1 / -1;
      grid-row: 3;
      margin-block-start: var(--space-4);
    }

    .scenario-card__topics {
      grid-column: 1 / -1;
      grid-row: 4;
      margin-block-start: var(--space-6);
      font-size: var(--step-small);
      border-block-start: 1px solid var(--line);

      & li {
        display: block;
        padding-block: 10px;
        border-block-end: 1px solid var(--line);

        &::before { content: none; }
      }
    }

    .scenario-card__action {
      grid-column: 1 / -1;
      grid-row: 5;
      justify-content: space-between;
      margin-block-start: var(--space-5);
    }
  }

  @media (width < 48rem) {
    .situations { padding-block: var(--space-8); }

    .situations__header { margin-block-end: var(--space-7); }

    .situations__title { font-size: clamp(2.25rem, 10vw, 3rem); }

    .scenario-grid {
      grid-template-columns: minmax(0, 1fr);
      grid-auto-flow: row;
      grid-auto-columns: auto;
      gap: 0;
      margin-inline: 0;
      padding: 0;
      overflow: visible;
      scroll-snap-type: none;
    }

    .scenario-grid__item {
      border-block-end: 1px solid var(--line);
      scroll-snap-align: none;
    }

    .scenario-card {
      grid-template-rows: auto auto auto auto;
      min-block-size: 0;
      padding: var(--space-6) 0;
      border-block-start: 0;
      border-block-end: 0;
    }

    .scenario-card__number { grid-row: 1; }

    .scenario-card__title {
      grid-column: 1;
      grid-row: 1;
      margin-block-start: 0;
      padding-inline-end: var(--space-5);
    }

    .scenario-card__copy { grid-row: 2; }
    .scenario-card__topics { grid-row: 3; margin-block-start: var(--space-5); }
    .scenario-card__action { grid-row: 4; }
    .scenario-card__number { font-size: 3rem; }
  }

  /* — что проверяем до первого документа — */
  .checks {
    position: relative;
    isolation: isolate;
    min-block-size: clamp(48rem, 72vw, 56rem);
    background: var(--surface-invert);
    color: var(--ink-invert);
    overflow: clip;
  }

  .checks__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: 47% 50%;
    }
  }

  .checks::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(90deg, rgba(22, 17, 13, .82) 0%, rgba(22, 17, 13, .62) 43%, rgba(22, 17, 13, .12) 68%),
      linear-gradient(0deg, rgba(18, 14, 11, .36), rgba(18, 14, 11, .03) 55%);
  }

  .checks__layout {
    display: grid;
    grid-template-columns: minmax(20rem, .96fr) minmax(28rem, 1.04fr);
    gap: clamp(var(--space-7), 5vw, var(--space-9));
    align-items: end;
    min-block-size: inherit;
    padding-block: clamp(var(--space-8), 6vw, var(--space-9));
  }

  .checks__statement { padding-block-end: var(--space-5); }

  .checks__title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 4.2vw, 4.25rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--ink-invert);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .18);

    & span {
      display: block;
      white-space: nowrap;
    }
  }

  .checks__lead {
    max-inline-size: 31rem;
    margin-block-start: var(--space-5);
    color: color-mix(in srgb, var(--ink-invert) 84%, transparent);
    font-size: var(--step-body);
    line-height: 1.55;
  }

  .checks__contact { margin-block-start: var(--space-6); }

  .checks__statement .btn--primary {
    background: var(--ink-invert);
    color: var(--ink-strong);

    &:hover { background: var(--surface); }
  }

  .checks__sheet {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-6), 3vw, var(--space-7));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--ink);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
  }

  .checks__sheet-intro {
    max-inline-size: 29ch;
    margin-block-end: clamp(var(--space-6), 3vw, var(--space-7));
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.2vw, 2.25rem);
    line-height: 1.17;
    letter-spacing: -.018em;
    color: var(--ink-strong);
  }

  .check-list {
    border-block-start: 1px solid var(--line-strong);
  }

  .check-item {
    display: grid;
    grid-template-columns: minmax(8rem, .62fr) minmax(0, 1.38fr);
    gap: var(--space-5);
    padding-block: clamp(var(--space-5), 1.8vw, var(--space-6));
    border-block-end: 1px solid var(--line);
  }

  .check-item__tag {
    padding-block-start: 4px;
    color: var(--ink-muted);
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .check-item__title {
    grid-column: 2;
    font-size: clamp(1.1rem, 1vw + .72rem, 1.35rem);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.012em;
    color: var(--ink-strong);
  }

  .check-item__copy {
    grid-column: 2;
    margin-block-start: var(--space-3);
    color: var(--ink-muted);
    font-size: var(--step-small);
    line-height: 1.55;
  }

  .checks__note {
    max-inline-size: 38ch;
    margin-block-start: var(--space-5);
    font-size: var(--step-small);
    font-weight: 600;
    color: var(--ink);
  }

  @media (width < 62rem) {
    .checks { min-block-size: 0; }

    .checks::after {
      background: linear-gradient(0deg, rgba(19, 15, 12, .76) 0%, rgba(19, 15, 12, .18) 72%);
    }

    .checks__backdrop { block-size: 35rem; }

    .checks__backdrop img { object-position: 50% 58%; }

    .checks__layout {
      grid-template-columns: 1fr;
      gap: var(--space-7);
      padding-block: 18rem var(--space-8);
    }

    .checks__statement { padding-block-end: 0; }
    .checks__sheet { padding: var(--space-7); }
  }

  @media (width < 48rem) {
    .checks__backdrop { block-size: 31rem; }

    .checks__layout {
      gap: var(--space-6);
      padding-block: 14rem var(--space-8);
    }

    .checks__title {
      font-size: clamp(2.4rem, 11vw, 3.25rem);

      & span { white-space: normal; }
    }

    .checks__contact,
    .checks__contact .btn { inline-size: 100%; }

    .checks__sheet {
      padding: var(--space-5);
      border-radius: var(--radius-md);
    }

    .checks__sheet-intro { font-size: 1.7rem; }

    .check-item {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .check-item__title,
    .check-item__copy { grid-column: 1; }

    .check-item__title { margin-block-start: var(--space-3); }
  }

  /* Светлый журнальный разворот: фотография задаёт паузу, реестр живёт ниже. */
  .checks {
    min-block-size: 0;
    background: var(--surface-tint);
    color: var(--ink);
    overflow: clip;
  }

  .checks::after { content: none; }

  .checks__visual {
    position: relative;
    display: block;
    block-size: clamp(22rem, 34vw, 29rem);
    background: var(--surface-neutral);
    overflow: hidden;

    & picture,
    & img {
      inline-size: 100%;
      block-size: 100%;
    }

    & img {
      object-fit: cover;
      object-position: 50% 64%;
      filter: none;
    }
  }

  .checks__visual-inner {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    align-items: start;
    inline-size: min(100% - 2 * var(--space-5), var(--shell));
    margin-inline: auto;
    padding-block-start: clamp(var(--space-6), 4vw, var(--space-8));
    background: transparent;
    pointer-events: none;
  }

  .checks__title {
    grid-column: 2;
    max-inline-size: 11.5ch;
    margin: 0;
    font-size: clamp(3rem, 4.15vw, 4.4rem);
    line-height: 1.01;
    color: var(--ink-strong);
    text-shadow: none;

    & span { white-space: nowrap; }
  }

  .checks__body {
    display: block;
    padding-block: 0 clamp(var(--space-8), 7vw, var(--space-9));
  }

  .checks__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-7);
    padding-block-start: var(--space-7);
  }

  .checks__lead {
    max-inline-size: 42rem;
    margin-block-start: 0;
    color: var(--ink);
    font-size: var(--step-lead);
    line-height: 1.5;
  }

  .checks__note {
    max-inline-size: 34ch;
    margin-block-start: var(--space-5);
    color: var(--ink-muted);
    font-size: var(--step-small);
    font-weight: 400;
    line-height: 1.55;
  }

  .checks__contact { margin-block-start: 0; }

  .checks__intro .btn--primary {
    background: var(--btn-bg);
    color: var(--ink-invert);

    &:hover { background: var(--btn-bg-hover); }
  }

  .checks__registry { min-inline-size: 0; }

  .check-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--ink);
  }

  .check-item {
    display: block;
    padding: var(--space-6);
    border-block-end: 0;
    border-inline-end: 1px solid var(--line);

    &:first-child { padding-inline-start: 0; }
    &:last-child {
      padding-inline-end: 0;
      border-inline-end: 0;
    }
  }

  .check-item__tag {
    padding-block-start: 0;
  }

  .check-item__title {
    margin-block-start: var(--space-4);
    font-size: clamp(1.1rem, 1vw + .7rem, 1.35rem);
  }

  .check-item__copy {
    margin-block-start: var(--space-3);
  }

  @media (width < 70rem) {
    .check-item { padding-inline: var(--space-5); }
  }

  @media (width < 62rem) {
    .checks__visual { block-size: clamp(20rem, 52vw, 26rem); }

    .checks__visual-inner {
      grid-template-columns: .72fr 1.28fr;
      padding-block-start: var(--space-6);
    }

    .checks__title { font-size: clamp(2.7rem, 6.2vw, 3.8rem); }

    .checks__body { padding-block-end: var(--space-8); }

    .check-list {
      grid-template-columns: repeat(3, minmax(17rem, 1fr));
      margin-inline: calc(-1 * var(--space-5));
      padding-inline: var(--space-5);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;
      scrollbar-width: thin;
    }

    .check-item {
      padding-inline: var(--space-5);
      scroll-snap-align: start;
    }

    .check-item:first-child { padding-inline-start: 0; }

    .checks__intro {
      grid-template-columns: minmax(0, 1fr) auto;
      max-inline-size: none;
    }
  }

  @media (width < 48rem) {
    .checks__visual {
      block-size: 21rem;
    }

    .checks__visual img { object-position: 55% 50%; }

    .checks__visual-inner {
      grid-template-columns: 1fr;
      align-items: start;
      inline-size: calc(100% - 2 * var(--space-4));
      min-block-size: 0;
      padding-block: var(--space-5) 0;
    }

    .checks__visual::after { content: none; }

    .checks__title {
      position: relative;
      z-index: 1;
      grid-column: 1;
      max-inline-size: 100%;
      margin-inline: 0;
      font-size: clamp(2.4rem, 10vw, 3rem);
      text-shadow: none;

      & span { white-space: normal; }
    }

    .checks__body { padding-block: 0 var(--space-8); }

    .check-list {
      grid-template-columns: repeat(3, minmax(82vw, 1fr));
      margin-inline: calc(-1 * var(--space-4));
      padding-inline: var(--space-4);
    }

    .checks__intro {
      grid-template-columns: 1fr;
      gap: var(--space-5);
      padding-block-start: var(--space-6);
    }

    .checks__contact,
    .checks__contact .btn { inline-size: 100%; }

    .check-item { padding-block: var(--space-5); }
  }

  /* Направления услуг: тёмный каталог с раскрывающейся рабочей плоскостью. */
  .services {
    padding-block: clamp(var(--space-9), 8vw, var(--space-10));
    background: var(--surface-invert);
    color: var(--ink-invert);
    overflow: clip;
  }

  .services__header {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(20rem, .62fr);
    align-items: end;
    gap: var(--space-7) var(--space-9);
    margin-block-end: clamp(var(--space-8), 5vw, var(--space-9));
  }

  .services__title {
    font-family: var(--font-display);
    font-size: clamp(3.25rem, 5.6vw, 5.65rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;

    & span {
      display: block;
      white-space: nowrap;
    }
  }

  .services__lead {
    max-inline-size: 30rem;
    padding-block-end: .4rem;
    color: rgb(247 239 236 / .7);
    font-size: var(--step-body);
    line-height: 1.65;
  }

  .notification-card {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    margin-block-start: 2.5rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border-radius: 1rem;
    background: var(--surface-tint);
    color: var(--ink);
  }

  .notification-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 400;
    line-height: 1.15;
    text-wrap: balance;
  }

  .notification-card__body {
    min-inline-size: 0;
    font-size: var(--step-body);
    line-height: 1.65;
  }

  .notification-card__agencies {
    margin-block-start: 1.5rem;
    color: var(--ink-muted);
    font-size: var(--step-small);
  }

  @media (max-width: 48rem) {
    .notification-card { grid-template-columns: minmax(0, 1fr); }
  }

  .service-list {
    border-block-start: 1px solid rgb(247 239 236 / .45);
  }

  .service {
    border-block-end: 1px solid rgb(247 239 236 / .2);
  }

  .service__summary {
    display: grid;
    grid-template-columns: 3rem minmax(16rem, .9fr) minmax(24rem, 1.15fr) 3rem;
    align-items: center;
    gap: clamp(var(--space-5), 3vw, var(--space-8));
    min-block-size: 9rem;
    padding-block: var(--space-6);
    cursor: pointer;
    list-style: none;
    transition: color .25s var(--ease);

    &::-webkit-details-marker { display: none; }
  }

  .service-icon {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .72;
    transition: opacity .25s var(--ease), scale .25s var(--ease);
  }

  .service__title {
    margin: 0;
    font-size: clamp(1.35rem, 1.35vw + .85rem, 1.8rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
  }

  .service__description {
    max-inline-size: 46rem;
    color: rgb(247 239 236 / .62);
    font-size: var(--step-small);
    line-height: 1.6;
    transition: color .25s var(--ease);
  }

  .service__toggle {
    position: relative;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid rgb(247 239 236 / .4);
    border-radius: 50%;
    transition: rotate .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease);

    &::before,
    &::after {
      content: '';
      position: absolute;
      inset: 50% auto auto 50%;
      inline-size: .9rem;
      block-size: 1px;
      translate: -50% -50%;
      background: currentColor;
    }

    &::after { rotate: 90deg; }
  }

  .service__summary:hover {
    & .service-icon { opacity: 1; scale: 1.08; }
    & .service__description { color: rgb(247 239 236 / .88); }
    & .service__toggle { background: rgb(247 239 236 / .1); }
  }

  .service[open] {
    & .service-icon { opacity: 1; }
    & .service__description { color: rgb(247 239 236 / .82); }
    & .service__toggle {
      rotate: 45deg;
      background: var(--surface-tint);
      color: var(--ink);
    }
  }

  .service__content {
    overflow: hidden;
    /* высоту этого блока анимирует скрипт: containment держит пересчёт
       раскладки внутри блока и не гоняет его по всей странице */
    contain: layout paint;

    /* Отступ снизу — псевдоэлементом, а не padding. Скрипт анимирует высоту,
       а padding в неё не входит: в конце закрытия он исчезал разом, и список
       подпрыгивал на эти самые 32 px. */
    &::after {
      content: '';
      display: block;
      block-size: var(--space-6);
    }
  }

  .service__drawer {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(14rem, .55fr);
    align-items: end;
    gap: var(--space-8);
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: var(--surface-tint);
    color: var(--ink);
    border-radius: var(--radius-md);
  }

  .service__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-7);
  }

  .service__items li {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding-block: .8rem;
    border-block-start: 1px solid var(--line);
    font-size: var(--step-small);
    line-height: 1.45;

    &::before {
      content: '—';
      flex: none;
      color: var(--line-strong);
    }
  }

  .service__items .service__item-note {
    display: block;
    grid-column: 1 / -1;
    color: var(--ink-muted);

    &::before {
      content: none;
    }

    &:empty {
      display: none;
    }
  }

  .service__action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-block-size: 3.5rem;
    padding: .9rem 1.1rem;
    background: var(--ink);
    color: var(--ink-invert);
    border-radius: var(--radius-sm);
    font-size: var(--step-small);
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .2s var(--ease);

    & > :last-child {
      font-size: 1rem;
      transition: translate .2s var(--ease);
    }

    &:hover {
      background: var(--ink-strong);

      & > :last-child { translate: .18rem -.18rem; }
    }
  }

  @media (width < 62rem) {
    .services__header { grid-template-columns: 1fr; }
    .services__lead { max-inline-size: 42rem; }

    .service__summary {
      grid-template-columns: 3rem minmax(0, 1fr) 3rem;
      min-block-size: 0;
    }

    .service__description {
      grid-column: 2 / 3;
      grid-row: 2;
    }

    .service__toggle {
      grid-column: 3;
      grid-row: 1 / 3;
    }

    .service__drawer {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .service__action { max-inline-size: 22rem; }
  }

  @media (width < 48rem) {
    .services { padding-block: var(--space-8); }

    .services__header {
      gap: var(--space-5);
      margin-block-end: var(--space-7);
    }

    .services__title { font-size: clamp(2.45rem, 11vw, 3.25rem); }
    .services__title span { white-space: normal; }

    .service__summary {
      grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
      gap: var(--space-4);
      padding-block: var(--space-5);
    }

    .service-icon {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }

    .service__description {
      grid-column: 1 / -1;
      grid-row: 2;
      margin-block-start: var(--space-2);
    }

    .service__toggle {
      grid-column: 3;
      grid-row: 1;
      align-self: center;
      inline-size: 2.5rem;
      block-size: 2.5rem;
    }

    .service__content::after { block-size: var(--space-4); }

    .service__drawer {
      gap: var(--space-6);
      margin-inline: calc(-1 * var(--space-2));
      padding: var(--space-5);
    }

    .service__items { grid-template-columns: 1fr; }
    .service__action { max-inline-size: none; }
  }

  /* Цены — бенто. Плитки разного размера, а не список: размер сам расставляет
     приоритет, и с чего начинать читателю видно без единого слова.
     Две крупные плитки сверху — это две точки входа: разовая консультация
     и миграционная процедура. Остальное ровным рядом. */
  .price {
    background: var(--surface-tint);
    color: var(--ink);
    padding-block: clamp(var(--space-9), 7vw, var(--space-10));
  }

  .price__header {
    display: grid;
    /* Колонка подписи не уже 22rem. На 19rem она сжималась до 312 px, текст
       складывался в пять строк и читался плотной серой плитой рядом
       с заголовком — при том же кегле, что и подписи в остальных секциях. */
    grid-template-columns: minmax(0, 1.3fr) minmax(22rem, .7fr);
    align-items: end;
    gap: var(--space-6) var(--space-8);
    margin-block-end: clamp(var(--space-6), 3.5vw, var(--space-7));
  }

  .price__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 3.9vw, 3.75rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--ink-strong);

    & span { display: block; }
  }

  /* Подпись — две короткие фразы. Всё, что объясняет цену, переехало
     в отдельную плитку: в подписи оно превращалось в серую плиту. */
  .price__lead {
    max-inline-size: 27rem;
    padding-block-end: 5px;
    font-size: var(--step-body);
    line-height: 1.55;
    color: var(--ink-muted);
  }

  .bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(var(--space-3), 1vw, var(--space-4));
  }

  .tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);
    min-block-size: 10rem;
    padding: clamp(var(--space-5), 2vw, var(--space-6));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  /* две точки входа занимают по половине ряда */
  .tile--lg {
    grid-column: span 2;
    min-block-size: 12.5rem;
  }

  /* Место под условие резервируется даже там, где условия нет:
     иначе цифры в соседних плитках стоят на разной высоте. */
  .tile__price { min-block-size: 4.3rem; }
  .tile--lg .tile__price { min-block-size: 5.4rem; }

  .tile__name {
    font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: var(--ink-strong);
    text-wrap: pretty;
  }

  .tile__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 2.4vw, 2.4rem);
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
  }

  .tile--lg .tile__value { font-size: clamp(2.5rem, 3.4vw, 3.4rem); }

  /* «+ IVA», «за человека» — условие, а не цена */
  .tile__note {
    display: block;
    margin-block-start: var(--space-2);
    font-size: var(--step-small);
    line-height: 1.4;
    color: var(--ink-muted);
  }

  .tile__note:empty { display: none; }

  /* — плитка «от чего зависит»: у неё нет цифры, поэтому её не спутать с ценой — */
  .tile--factors { grid-column: span 2; }

  .tile__title {
    font-size: var(--step-overline);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--ink-muted);
  }

  .factors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-6);
    font-size: var(--step-body);
    line-height: 1.45;
    color: var(--ink-strong);

    & li {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: var(--space-2);

      /* та же косая, что у маркеров первого экрана */
      &::before {
        content: "\\";
        color: var(--ink);
        font-weight: 600;
      }
    }
  }

  /* — тёмная плитка с действием закрывает бенто — */
  .tile--cta {
    background: var(--surface-invert);
    border-color: var(--surface-invert);
    color: var(--ink-invert);
  }

  .tile__ask {
    font-size: var(--step-small);
    line-height: 1.5;
    color: color-mix(in srgb, var(--ink-invert) 74%, transparent);
  }

  .tile--cta .contact-wrap { align-self: start; }

  /* Два действия в тёмной плитке: написать или забрать прайс целиком.
     Колонкой, чтобы на узкой плитке кнопки не сжимались до многоточия. */
  .tile__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .price-download {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    color: color-mix(in srgb, var(--ink-invert) 68%, transparent);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: color .2s var(--ease);

    & span {
      border-block-end: 1px solid color-mix(in srgb, var(--ink-invert) 34%, transparent);
      transition: border-color .2s var(--ease);
    }

    & svg {
      inline-size: 1rem;
      block-size: 1rem;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    &:hover {
      color: var(--ink-invert);

      & span { border-block-end-color: currentColor; }
    }
  }

  .price__fine {
    margin-block-start: clamp(var(--space-5), 2.5vw, var(--space-6));
    font-size: var(--step-small);
    line-height: 1.6;
    color: var(--ink-muted);
  }

  @media (width < 62rem) {
    .price { padding-block: var(--space-9); }

    .price__header {
      grid-template-columns: 1fr;
      align-items: start;
      row-gap: var(--space-5);
      margin-block-end: var(--space-6);
    }

    .price__title { font-size: clamp(2.25rem, 6.5vw, 3rem); }
    .price__lead { max-inline-size: 42rem; }

    /* В две колонки крупная плитка перестаёт быть крупной: она просто
       выше соседней. Растягивать её на всю ширину незачем — бенто
       превращается в длинную ленту. */
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile--lg { grid-column: span 1; min-block-size: 12rem; }

    /* Семь цен в две колонки дают нечётный остаток. Плитка «от чего зависит»
       занимает его, а действие уходит широкой полосой в последний ряд —
       так в сетке не остаётся дыр. */
    .tile--factors { grid-column: span 1; }
    .tile--cta { grid-column: span 2; }
    .factors { grid-template-columns: 1fr; }
  }

  @media (width < 48rem) {
    .tile--cta {
      display: grid;
      grid-template-columns: minmax(12rem, 1fr) auto;
      align-items: center;
      gap: var(--space-4) var(--space-5);
      min-block-size: 0;
      padding: var(--space-5);
    }

    .tile--cta .tile__actions {
      justify-content: flex-end;
      align-items: center;
    }
  }

  @media (width < 40rem) {
    .price { padding-block: var(--space-8); }

    /* Одна колонка: span 2 создавал бы вторую и выносил плитку за экран. */
    .bento { grid-template-columns: 1fr; }
    .tile--lg,
    .tile--factors,
    .tile--cta { grid-column: auto; }
    .tile,
    .tile--lg { min-block-size: 0; }
    .tile__price,
    .tile--lg .tile__price { min-block-size: 0; }
    .tile { gap: var(--space-5); }
    .factors { grid-template-columns: 1fr; }
    .tile--cta { grid-template-columns: 1fr; }
    .tile__actions { flex-direction: column; align-items: stretch; }
    .tile--cta .contact-wrap,
    .tile--cta .btn { inline-size: 100%; }
    .price-download { align-self: flex-start; }
  }

  /* Компания и основатель.
     Три яруса без пауз: заявление, проверяемые цифры, тёмная карточка
     с человеком. Тёмная карточка — событие в конце блока: после светлой
     стопки шагов странице нужен удар, а не ещё один текстовый экран. */
  /* Частые вопросы. Белый фон: бенто цен стоит на бежевом, и второй бежевый
     подряд стёр бы границу между блоками.
     Закрытые вопросы — тихие линии во всю ширину: после плотной сетки плиток
     это смена ритма, а не ещё одна сетка. Открытый ответ ложится на бежевую
     плоскость — тот же приём, что в каталоге услуг, только наоборот по свету. */
  .faq {
    background: var(--surface);
    color: var(--ink);
    padding-block: clamp(var(--space-9), 7vw, var(--space-10));
  }

  /* Две колонки: заголовок липнет слева, список идёт справа узкой мерой.
     Во всю ширину вопрос и «плюс» расходились на 1600 px, и между ними
     оставалась пустая полоса — та самая «дыра», из-за которой блок
     выглядит незаполненным. */
  .faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
    gap: var(--space-7) clamp(var(--space-6), 4vw, var(--space-8));
  }

  .faq__aside {
    /* align-self: start обязателен: растянутый элемент занимает всю строку
       сетки, и липкому нечего проезжать */
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-6));
    display: grid;
    justify-items: start;
    gap: var(--space-5);
  }

  .faq__title {
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 3.3vw, 3.25rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink-strong);
  }

  .faq__note {
    max-inline-size: 20rem;
    color: var(--ink-muted);
    font-size: var(--step-small);
    line-height: 1.55;
  }

  .qa-list { border-block-start: 1px solid var(--line); }

  .qa { border-block-end: 1px solid var(--line); }

  .qa__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: var(--space-6);
    padding-block: clamp(var(--space-4), 1.9vw, var(--space-5));
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker { display: none; }
  }

  .qa__q {
    font-size: clamp(1.1rem, .95rem + .45vw, 1.35rem);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -.02em;
    text-wrap: balance;
    transition: color .25s var(--ease);
  }

  .qa__toggle {
    position: relative;
    justify-self: end;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: rotate .35s var(--ease), background-color .25s var(--ease),
                border-color .25s var(--ease), color .25s var(--ease);

    &::before,
    &::after {
      content: '';
      position: absolute;
      inset: 50% auto auto 50%;
      inline-size: .9rem;
      block-size: 1px;
      translate: -50% -50%;
      background: currentColor;
    }

    &::after { rotate: 90deg; }
  }

  .qa__summary:hover {
    & .qa__q { color: var(--ink-strong); }
    & .qa__toggle { border-color: var(--line-strong); background: var(--surface-tint); }
  }

  .qa[open] .qa__toggle {
    rotate: 45deg;
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ink-invert);
  }

  /* высоту этого блока анимирует скрипт — здесь обрезка и containment */
  .qa__content {
    overflow: hidden;
    contain: layout paint;
  }

  /* Бежевая плашка под ответ выглядела как реплика в мессенджере и висела
     полупустой: две строки текста в поле на 1100 px. Ответ живёт открытым
     текстом, а границу держат волосяные линии списка. */
  /* отступ снизу живёт внутри анимируемой коробки, иначе он схлопывается
     скачком в последнем кадре */
  .qa__panel { padding-block-end: var(--space-6); }

  .qa__a {
    max-inline-size: 42rem;
    line-height: 1.6;
  }

  @media (width < 62rem) {
    .faq__grid { grid-template-columns: 1fr; gap: var(--space-6); }

    .faq__aside {
      position: static;
      /* липкий заголовок в одну колонку только мешает: он бы ехал поверх списка */
    }
  }

  @media (width < 48rem) {
    .faq { padding-block: var(--space-8); }
    .faq__title { font-size: clamp(2.1rem, 8.5vw, 2.6rem); }

    .qa__summary {
      grid-template-columns: minmax(0, 1fr) 2.25rem;
      gap: var(--space-4);
      align-items: start;
      padding-block: var(--space-5);
    }

    .qa__q { font-size: 1.075rem; }

    .qa__toggle {
      inline-size: 2.25rem;
      block-size: 2.25rem;
      /* кружок встаёт вровень с первой строкой вопроса, а не с его серединой */
      margin-block-start: -.15rem;
    }

    .qa__panel { padding-block-end: var(--space-5); }
  }

  /* Финал. Четыре реальных лица окружают один простой следующий шаг.
     Разный масштаб портретов собирает живую редакционную композицию вместо
     ряда одинаковых аватаров или ещё одной карточной сетки. */
  .final {
    --focus-ring: var(--ink);
    position: relative;
    overflow: clip;
    background: var(--surface-tint);
    color: var(--ink);
    padding-block: clamp(var(--space-9), 9vw, 9rem);
  }

  .final__canvas {
    position: relative;
    display: grid;
    place-items: center;
    min-inline-size: 0;
    min-block-size: clamp(40rem, 62vw, 48rem);
    isolation: isolate;
  }

  .final__portraits {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .final__portrait {
    --enter-x: 0;
    --enter-y: 1.5rem;
    position: absolute;
    overflow: hidden;
    background: var(--surface-neutral);
    border: clamp(5px, .55vw, 8px) solid var(--surface-tint);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: color-mix(in srgb, #E8D1BF 12%, transparent);
      mix-blend-mode: soft-light;
      pointer-events: none;
    }

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      filter: saturate(.9) contrast(.96) brightness(1.025);
      transition: scale .8s var(--ease);
    }
  }

  .final__portrait--elena {
    --enter-x: -2rem;
    inset-block-start: 7%;
    inset-inline-start: -5%;
    inline-size: clamp(13.5rem, 23vw, 18.5rem);
    aspect-ratio: .76;
    border-radius: 51% 49% 45% 55% / 44% 48% 52% 56%;

    & img { object-position: 49% 48%; }
  }

  .final__portrait--second {
    --enter-x: 1.5rem;
    --enter-y: -1rem;
    inset-block-start: 1%;
    inset-inline-end: 8%;
    inline-size: clamp(10rem, 15.5vw, 12.5rem);
    aspect-ratio: .88;
    border-radius: 50%;

    & img { object-position: 50% 30%; }
  }

  .final__portrait--third {
    --enter-x: -1.5rem;
    --enter-y: 1rem;
    inset-block-end: 0;
    inset-inline-start: 10%;
    inline-size: clamp(9.5rem, 14vw, 11.5rem);
    aspect-ratio: .88;
    border-radius: 50% 50% 47% 53% / 54% 48% 52% 46%;

    & img {
      object-position: 50% 30%;
      scale: 1.28;
    }
  }

  .final__portrait--fourth {
    --enter-x: 2rem;
    inset-block-end: 2%;
    inset-inline-end: -1%;
    inline-size: clamp(12rem, 20vw, 16.5rem);
    aspect-ratio: .76;
    border-radius: 46% 54% 50% 50% / 56% 48% 52% 44%;

    & img { object-position: 51% 31%; }
  }

  .final__statement {
    inline-size: min(100%, 58rem);
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-inline: clamp(var(--space-4), 3vw, var(--space-7));
    text-align: center;
  }

  .final__title {
    max-inline-size: 100%;
    font-family: var(--font-display);
    font-size: clamp(3rem, 5.15vw, 4.6rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;

    & span {
      display: block;
      white-space: nowrap;
    }

    & span:last-child {
      margin-block-start: .08em;
      font-size: .82em;
      letter-spacing: -.035em;
    }
  }

  .final__lead {
    max-inline-size: 38rem;
    margin: clamp(var(--space-5), 2.5vw, var(--space-6)) auto 0;
    color: var(--ink-muted);
    font-size: var(--step-lead);
    line-height: 1.5;
  }

  .final__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-5);
    margin-block-start: clamp(var(--space-6), 3vw, var(--space-7));
  }

  .final__channel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent);
    text-underline-offset: 5px;
    transition: text-decoration-color .2s var(--ease), gap .2s var(--ease);

    &:hover {
      gap: var(--space-3);
      text-decoration-color: var(--ink);
    }
  }

  .final__messenger-icon,
  .btn--icon .final__messenger-icon {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: none;
    fill: currentColor;
    stroke: none;
  }

  .final__team-label {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-start: 50%;
    translate: -50% 0;
    color: var(--ink-muted);
    font-size: var(--step-overline);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .final[data-motion="ready"] .final__portrait {
    opacity: 0;
    transform: translate(var(--enter-x), var(--enter-y)) scale(.94);
  }

  .final[data-motion="ready"][data-visible="true"] .final__portrait {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transition: opacity .8s var(--ease), transform 1s var(--ease);
  }

  .final[data-motion="ready"][data-visible="true"] .final__portrait--second { transition-delay: .08s; }
  .final[data-motion="ready"][data-visible="true"] .final__portrait--third { transition-delay: .16s; }
  .final[data-motion="ready"][data-visible="true"] .final__portrait--fourth { transition-delay: .24s; }

  @media (width < 62rem) {
    .final__canvas { min-block-size: 43rem; }
    .final__statement { inline-size: min(100%, 43rem); }

    .final__portrait--elena {
      inset-block-start: 3%;
      inset-inline-start: -7%;
      inline-size: 12.5rem;
    }

    .final__portrait--second {
      inset-block-start: 0;
      inset-inline-end: -2%;
      inline-size: 9rem;
    }

    .final__portrait--third {
      inset-inline-start: 1%;
      inline-size: 8.5rem;
    }

    .final__portrait--fourth {
      inset-inline-end: -4%;
      inline-size: 11rem;
    }
  }

  @media (width < 48rem) {
    .final { padding-block: var(--space-8); }

    .final__canvas {
      display: flex;
      flex-direction: column;
      min-block-size: 0;
      padding-block-start: 0;
    }

    .final__portraits {
      position: relative;
      inset: auto;
      z-index: 0;
      order: 2;
      inline-size: 100%;
      block-size: clamp(12rem, 54vw, 14.25rem);
      margin-block-start: var(--space-5);
    }

    .final__portrait { border-width: 4px; }

    .final__portrait--elena {
      inset-block-start: 2%;
      inset-inline-start: 5%;
      inline-size: clamp(7.6rem, 33vw, 9.5rem);
    }

    .final__portrait--second {
      inset-block-start: -2%;
      inset-inline-end: 30%;
      inline-size: clamp(6rem, 25vw, 7.2rem);
    }

    .final__portrait--third {
      inset-block-end: 0;
      inset-inline-start: 37%;
      inline-size: clamp(5.8rem, 24vw, 6.8rem);
    }

    .final__portrait--fourth {
      inset-block-end: 1%;
      inset-inline-end: 1%;
      inline-size: clamp(7rem, 30vw, 8.6rem);
    }

    .final__statement {
      order: 1;
      padding-inline: 0;
    }

    .final__title {
      font-size: clamp(2rem, 9.2vw, 2.75rem);
      line-height: 1;

      & span:last-child {
        font-size: .78em;
        letter-spacing: -.04em;
      }
    }

    .final__lead {
      max-inline-size: 31rem;
      font-size: 1rem;
      line-height: 1.55;
    }

    .final__actions {
      flex-direction: column;
      gap: var(--space-4);

      & .btn { inline-size: min(100%, 22rem); }
    }

    .final__team-label {
      position: static;
      order: 3;
      margin-block-start: var(--space-4);
      translate: none;
      white-space: normal;
      text-align: center;
    }
  }

  /* Подвал. Тот же тёмный, что у финала: это одна плита, разделённая волосяной
     линией. Финал говорит громко, подвал — тихо: мелкий кегль и приглушённый текст,
     чтобы он не спорил с обращением над собой. */
  .site-footer {
    background: var(--surface-invert);
    color: var(--ink-invert);
    border-block-start: 1px solid color-mix(in srgb, var(--ink-invert) 15%, transparent);
    padding-block: clamp(var(--space-7), 4vw, var(--space-8)) var(--space-6);
    font-size: var(--step-small);
  }

  .footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .88fr));
    gap: clamp(var(--space-6), 3vw, var(--space-8));
    align-items: start;
  }

  .footer__wordmark {
    font-family: var(--font-text);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .footer__tagline {
    margin-block-start: var(--space-2);
    max-inline-size: 18rem;
    color: color-mix(in srgb, var(--ink-invert) 62%, transparent);
    line-height: 1.5;
  }

  /* переключатель языка тот же, что в шапке, только на тёмном */
  .lang--footer {
    margin-block-start: var(--space-5);
    margin-inline-start: calc(-1 * var(--space-2));

    & a {
      color: color-mix(in srgb, var(--ink-invert) 62%, transparent);

      &:hover {
        background: color-mix(in srgb, var(--ink-invert) 12%, transparent);
        color: var(--ink-invert);
      }

      &[aria-current="page"] { color: var(--ink-invert); }
    }
  }

  .footer__title {
    font-size: var(--step-overline);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: color-mix(in srgb, var(--ink-invert) 55%, transparent);
  }

  .footer__list {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    line-height: 1.4;

    & a {
      color: var(--ink-invert);
      text-decoration-color: color-mix(in srgb, var(--ink-invert) 32%, transparent);
      text-underline-offset: 4px;
      transition: text-decoration-color .2s var(--ease);

      &:hover { text-decoration-color: var(--ink-invert); }
    }
  }

  .footer__list--plain {
    color: color-mix(in srgb, var(--ink-invert) 74%, transparent);
    text-wrap: pretty;
  }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    margin-block-start: clamp(var(--space-6), 3vw, var(--space-7));
    padding-block-start: var(--space-5);
    border-block-start: 1px solid color-mix(in srgb, var(--ink-invert) 15%, transparent);
    color: color-mix(in srgb, var(--ink-invert) 55%, transparent);
    font-size: var(--step-overline);
  }

  .footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);

    & a {
      color: inherit;
      text-decoration-color: color-mix(in srgb, var(--ink-invert) 28%, transparent);
      text-underline-offset: 3px;

      &:hover { color: var(--ink-invert); }
    }
  }

  @media (width < 62rem) {
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; }
  }

  @media (width < 34rem) {
    .footer__grid { grid-template-columns: 1fr; }
  }

  /* Кейсы собраны как редакционная первая полоса. Каждая история раскрывается
     внутри собственной ячейки, поэтому композиция остаётся неподвижной. */
  .cases {
    background: var(--surface-invert);
    color: var(--ink-invert);
    padding-block: clamp(var(--space-9), 7vw, var(--space-10));
  }

  .cases__head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    align-items: end;
    gap: var(--space-5) var(--space-8);
    margin-block-end: clamp(var(--space-7), 4vw, var(--space-8));
  }

  .cases__title {
    font-family: var(--font-display);
    font-size: clamp(2.45rem, 3.75vw, 3.85rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.03em;

    & span { display: block; white-space: nowrap; }
  }

  .cases__lead {
    max-inline-size: 25rem;
    padding-block-end: 5px;
    font-size: var(--step-body);
    line-height: 1.58;
    letter-spacing: -.006em;
    text-wrap: pretty;
    color: rgb(247 239 236 / .72);
  }

  .case-front {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(15rem, auto));
    border-block: 1px solid rgb(247 239 236 / .28);
    border-inline-start: 1px solid rgb(247 239 236 / .28);
  }

  .case {
    --case-accent: #B9AEA6;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
    inline-size: 100%;
    min-block-size: 100%;
    padding: clamp(var(--space-4), 1.7vw, var(--space-5));
    border: 0;
    border-inline-end: 1px solid rgb(247 239 236 / .28);
    border-block-end: 1px solid rgb(247 239 236 / .28);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    isolation: isolate;
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--case-accent) 72%, transparent);
    container-type: inline-size;
    transition: color .28s var(--ease), background-color .28s var(--ease);
  }

  .case--lead { grid-column: 1 / 7; grid-row: 1 / 3; }
  .case--family { grid-column: 7 / 10; grid-row: 1; }
  .case--capital { grid-column: 10 / 13; grid-row: 1; }
  .case--mortgage { grid-column: 7 / 13; grid-row: 2; }
  .case--residence { grid-column: 1 / 5; grid-row: 3; }
  .case--returns { grid-column: 5 / 9; grid-row: 3; }
  .case--autonomo { grid-column: 9 / 13; grid-row: 3; }

  /* У направлений свой спокойный оттенок. Он помогает собирать похожие
     истории взглядом и остаётся внутри тёплой палитры страницы. */
  .case--lead,
  .case--capital,
  .case--returns { --case-accent: #9EAFAC; }

  .case--family,
  .case--residence { --case-accent: #C49B89; }

  .case--mortgage,
  .case--autonomo { --case-accent: #B7AA78; }

  .case::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--case-accent) 18%, transparent) 0%,
      color-mix(in srgb, var(--case-accent) 6%, transparent) 48%,
      transparent 82%
    );
    transform: scaleY(0);
    transform-origin: top;
    pointer-events: none;
    transition: transform .32s var(--ease);
  }

  .case:hover::before,
  .case:focus-visible::before { transform: scaleY(1); }

  .case[aria-expanded='true'] {
    background: color-mix(in srgb, var(--surface-tint) 94%, var(--case-accent));
    color: var(--ink-strong);
  }

  .case::after {
    content: '+';
    position: absolute;
    inset-inline-end: var(--space-4);
    inset-block-end: var(--space-3);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    color: rgb(247 239 236 / .48);
    transition: color .28s var(--ease), rotate .28s var(--ease);
  }

  .case[aria-expanded='true']::after {
    color: rgb(48 38 31 / .48);
    rotate: 45deg;
  }

  .case:focus-visible {
    z-index: 2;
    outline: 2px solid var(--ink-invert);
    outline-offset: -4px;
  }

  .case__head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    min-block-size: 1.25rem;
    line-height: 1.2;
  }

  .case__area {
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
    color: color-mix(in srgb, var(--case-accent) 74%, var(--ink-invert));
  }

  .case__end {
    grid-area: 1 / 1;
    align-self: end;
    max-inline-size: 23ch;
    font-family: var(--font-display);
    font-size: clamp(1.42rem, 7cqi, 2.05rem);
    line-height: 1.1;
    letter-spacing: -.022em;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    transition: opacity .2s ease, transform .28s var(--ease), visibility 0s .28s;
  }

  .case--lead .case__end {
    max-inline-size: 14ch;
    font-size: clamp(2.65rem, 8.6cqi, 4.2rem);
    line-height: 1.01;
    letter-spacing: -.036em;
  }

  .case--mortgage .case__end { max-inline-size: 27ch; }
  .case--residence .case__end,
  .case--returns .case__end,
  .case--autonomo .case__end { max-inline-size: 20ch; }

  .case__mark {
    font-size: .74rem;
    line-height: 1.2;
    letter-spacing: .025em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: rgb(247 239 236 / .62);
  }

  .case[aria-expanded='true'] .case__area {
    color: color-mix(in srgb, var(--case-accent) 72%, var(--ink-strong));
  }

  .case[aria-expanded='true'] .case__mark {
    color: rgb(48 38 31 / .62);
  }

  .case__swap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 1;
    min-block-size: 0;
  }

  .case .case__came--preview {
    grid-area: 2 / 1;
    align-self: end;
    max-inline-size: 38ch;
    padding-inline-end: var(--space-5);
    padding-block-end: var(--space-4);
    font-size: clamp(.84rem, 3.8cqi, .94rem);
    line-height: 1.5;
    letter-spacing: -.008em;
    color: rgb(247 239 236 / .78);
    transition: opacity .2s ease, transform .3s var(--ease), visibility 0s .3s;
  }

  .case__story {
    grid-area: 1 / 1 / -1 / 2;
    display: grid;
    align-content: start;
    gap: .9rem;
    padding-inline-end: var(--space-5);
    font-size: clamp(.84rem, 3.8cqi, .94rem);
    line-height: 1.5;
    letter-spacing: -.008em;
    text-wrap: pretty;
    color: rgb(48 38 31 / .84);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.8rem);
    transition: opacity .2s ease, transform .3s var(--ease), visibility 0s .3s;
  }

  .case__came {
    grid-column: 1 / -1;
    max-inline-size: 38ch;
    color: rgb(48 38 31 / .92);
  }

  .case__story-group {
    display: grid;
    align-content: start;
    gap: .35rem;
  }

  .case__story-group > :last-child { max-inline-size: 38ch; }

  .case__story-label {
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: rgb(48 38 31 / .52);
  }

  .case[aria-expanded='true'] .case__end {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.65rem);
    transition-delay: 0s;
  }

  .case[aria-expanded='true'] .case__came--preview {
    opacity: 0;
    visibility: hidden;
    transform: translateY(.8rem);
    transition-delay: 0s;
  }

  .case[aria-expanded='true'] .case__story {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: .12s, .12s, 0s;
  }

  .case--lead .case__story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: var(--space-6);
    max-inline-size: 38rem;
    padding-inline-end: var(--space-6);
    font-size: 1rem;
    line-height: 1.55;
  }

  .case--mortgage .case__story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: var(--space-5);
  }

  .case--lead .case__story-group + .case__story-group,
  .case--mortgage .case__story-group + .case__story-group {
    padding-inline-start: var(--space-5);
    border-inline-start: 1px solid rgb(48 38 31 / .2);
  }

  @media (width < 76rem) {
    .case-front { grid-template-rows: repeat(4, minmax(13rem, auto)); }
    .case--lead { grid-column: 1 / 8; grid-row: 1 / 3; }
    .case--family { grid-column: 8 / 13; grid-row: 1; }
    .case--capital { grid-column: 8 / 13; grid-row: 2; }
    .case--mortgage { grid-column: 1 / 7; grid-row: 3; }
    .case--residence { grid-column: 7 / 13; grid-row: 3; }
    .case--returns { grid-column: 1 / 7; grid-row: 4; }
    .case--autonomo { grid-column: 7 / 13; grid-row: 4; }

  }

  @media (width < 62rem) {
    .cases__head { grid-template-columns: 1fr; align-items: start; }
    .cases__lead { max-inline-size: 34rem; }
    .cases__title span { white-space: normal; }
  }

  @media (width < 48rem) {
    .cases { padding-block: var(--space-8); }
    .cases__title { font-size: clamp(2.1rem, 8.5vw, 2.6rem); }

    .case-front {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      gap: var(--space-3);
      border: 0;
      overflow: visible;
      scroll-snap-type: none;
    }

    .case {
      grid-column: 1;
      grid-row: auto;
      justify-self: start;
      min-block-size: 15rem;
      border: 1px solid rgb(247 239 236 / .28);
      scroll-snap-align: none;
    }

    .case--lead { inline-size: 100%; min-block-size: 20rem; }
    .case--family { inline-size: 88%; justify-self: end; }
    .case--capital { inline-size: 94%; }
    .case--mortgage { inline-size: 100%; min-block-size: 17rem; }
    .case--residence { inline-size: 86%; }
    .case--returns { inline-size: 93%; justify-self: end; }
    .case--autonomo { inline-size: 100%; }

    .case--lead .case__end {
      max-inline-size: 13ch;
      font-size: clamp(2.4rem, 10vw, 3rem);
      line-height: 1.02;
    }

    .case__end {
      max-inline-size: 21ch;
      font-size: clamp(1.7rem, 7.5vw, 2.1rem);
      line-height: 1.08;
    }

    .case__story,
    .case--lead .case__story,
    .case--mortgage .case__story {
      grid-template-columns: 1fr;
      align-content: start;
      gap: var(--space-4);
      padding-inline-end: var(--space-5);
      font-size: var(--step-small);
      line-height: 1.52;
    }

    .case--lead .case__story-group + .case__story-group,
    .case--mortgage .case__story-group + .case__story-group {
      padding-inline-start: 0;
      border-inline-start: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .case::before,
    .case::after,
    .case__end,
    .case__story { transition: none; }
  }

  .team {
    background: var(--surface);
    color: var(--ink);
    padding-block: clamp(var(--space-7), 4.5vw, var(--space-8)) clamp(var(--space-9), 8vw, var(--space-10));
  }

  .team__header {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(22rem, .7fr);
    align-items: end;
    gap: var(--space-6) var(--space-8);
    margin-block-end: clamp(var(--space-7), 4.5vw, var(--space-8));
  }

  .team__title {
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 3.5vw, 3.4rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ink-strong);

    & span { display: block; }
  }

  /* Один короткий абзац, а не два. Семь строк рядом с двумя строками
     заголовка читаются как толстая подпись и перевешивают его. */
  .team__lead {
    max-inline-size: 27rem;
    padding-block-end: 5px;
    font-size: var(--step-body);
    line-height: 1.55;
    color: var(--ink-muted);
  }

  /* — цифры — */
  .figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid var(--line-strong);
  }

  .figure {
    padding: clamp(var(--space-6), 3vw, var(--space-7)) clamp(var(--space-4), 2vw, var(--space-6));
    border-inline-start: 1px solid var(--line);

    &:first-child {
      border-inline-start: 0;
      padding-inline-start: 0;
    }
  }

  .figure__value {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 3.1vw, 3rem);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink-strong);
    text-wrap: balance;
  }

  .figure__note {
    margin-block-start: var(--space-4);
    max-inline-size: 22ch;
    font-size: var(--step-small);
    line-height: 1.5;
    color: var(--ink-muted);
  }

  .figures__footnote {
    max-inline-size: 52ch;
    margin-block-start: var(--space-3);
    font-size: var(--step-small);
    line-height: 1.5;
    color: var(--ink-muted);
  }

  .figures__footnote:empty { display: none; }

  /* — тёмная карточка основателя — */
  .founder {
    display: grid;
    grid-template-columns: 20rem minmax(21rem, .9fr) minmax(0, 1.15fr);
    gap: clamp(var(--space-6), 3vw, var(--space-8));
    margin-block-start: clamp(var(--space-7), 4vw, var(--space-8));
    background: var(--surface-invert);
    color: var(--ink-invert);
    border-radius: var(--radius-lg);
    overflow: clip;
  }

  /* снимок прижат к левому краю карточки и тянется на всю её высоту:
     640 px исходника на 320 px показа — ровно два пикселя на один */
  .founder__photo {
    display: block;
    align-self: stretch;

    & img {
      inline-size: 100%;
      block-size: 100%;
      min-block-size: 20rem;
      object-fit: cover;
      object-position: 52% 28%;
    }
  }

  .founder__id,
  .founder__note {
    display: grid;
    align-content: center;
    padding-block: clamp(var(--space-6), 3vw, var(--space-8));
  }

  .founder__note { padding-inline-end: clamp(var(--space-6), 3vw, var(--space-8)); }

  .founder__name {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.1vw, 2.15rem);
    line-height: 1.1;
    letter-spacing: -.02em;
  }

  .founder__role {
    margin-block-start: var(--space-3);
    font-size: var(--step-small);
    line-height: 1.5;
    color: color-mix(in srgb, var(--ink-invert) 68%, transparent);
  }

  /* Квалификация вынесена из прозы в список: это проверяемые факты,
     их читают глазами по диагонали, а не предложением. */
  .founder__credentials {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    margin-block-start: var(--space-6);

    & li {
      padding-block-start: var(--space-3);
      border-block-start: 1px solid color-mix(in srgb, var(--ink-invert) 24%, transparent);
      font-size: var(--step-small);
      line-height: 1.45;
    }
  }

  .founder__credentials .founder__education:empty {
    display: none;
  }

  /* Регистрационный номер — тише названия: он для проверки, а не для чтения.
     Отдельной строкой, чтобы длинное название ассоциации не тянуло его за собой. */
  .cred__reg {
    display: block;
    margin-block-start: .2em;
    font-size: var(--step-overline);
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--ink-invert) 58%, transparent);
  }

  /* подсказка внутри тёмной карточки: светлые линии вместо тёмных */
  .founder .hint {
    border-color: color-mix(in srgb, var(--ink-invert) 45%, transparent);
    color: color-mix(in srgb, var(--ink-invert) 75%, transparent);
  }

  .founder .hint-trigger {
    &:hover > [data-i],
    &:focus-visible > [data-i],
    &[aria-expanded="true"] > [data-i] {
      color: var(--ink-invert);
      text-decoration-color: color-mix(in srgb, var(--ink-invert) 55%, transparent);
    }
  }

  .founder .hint-trigger:hover .hint,
  .founder .hint-trigger:focus-visible .hint,
  .founder .hint-trigger[aria-expanded="true"] .hint {
    background: var(--ink-invert);
    border-color: var(--ink-invert);
    color: var(--surface-invert);
  }

  .founder__bio {
    font-size: var(--step-body);
    line-height: 1.6;
  }

  /* Строка про страховку живёт под карточкой, а не внутри неё: в карточке
     она вытягивала её по высоте, и снимок приходилось растягивать
     до полутора пикселей на один. */
  .team__assurance {
    max-inline-size: 52ch;
    margin-block-start: clamp(var(--space-6), 3vw, var(--space-7));
    font-size: var(--step-lead);
    line-height: 1.45;
    color: var(--ink-strong);
  }

  @media (width < 62rem) {
    .team { padding-block: var(--space-8) var(--space-9); }


    .team__header {
      grid-template-columns: 1fr;
      align-items: start;
      row-gap: var(--space-5);
      margin-block-end: var(--space-7);
    }

    .team__title { font-size: clamp(2.15rem, 6vw, 2.9rem); }
    .team__lead { max-inline-size: 42rem; }

    .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .figure:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
    .figure:nth-child(n + 3) { border-block-start: 1px solid var(--line); }

    /* карточка в две колонки: снимок слева на всю высоту, текст справа */
    .founder {
      grid-template-columns: 15rem minmax(0, 1fr);
      gap: var(--space-6);
    }

    .founder__photo { grid-row: 1 / 3; }
    .founder__id { padding-block-end: 0; align-content: start; }
    .founder__note { padding-block-start: 0; align-content: start; }
  }

  @media (width < 48rem) {
    .team { padding-block: var(--space-8); }

    /* снимок ложится сверху во всю ширину карточки */
    .founder {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .founder__photo {
      grid-row: 1;

      & img {
        min-block-size: 0;
        aspect-ratio: 4 / 3;
        object-position: 52% 8%;
      }
    }

    .founder__id {
      padding: var(--space-6) var(--space-5) 0;
    }

    .founder__note {
      padding: var(--space-6) var(--space-5);
    }

    .figure { padding-inline: 0 var(--space-5); }
    .figure:nth-child(even) { padding-inline: var(--space-5) 0; }
  }

  @media (width < 34rem) {
    .figures { grid-template-columns: 1fr; }
    .figure,
    .figure:nth-child(even) { padding-inline: 0; border-inline-start: 0; }
    .figure:not(:first-child) { border-block-start: 1px solid var(--line); }
  }

  /* Как строится работа: шаги собираются в стопку.
     Каждая карточка липнет на свою полку, следующая наезжает сверху и оставляет
     от предыдущей полосу с номером и заголовком. Прокрутка остаётся обычной:
     страница едет вниз всё время, ничего не перехватывается и не едет вбок.
     Видно и пройденное, и то, сколько осталось. */
  .workflow {
    /* полоса, которая остаётся видной от накрытой карточки */
    --peek: clamp(3.25rem, 5.5svh, 4.25rem);
    /* шапка остаётся в кадре вместе со стопкой, поэтому первая карточка
       получает полку сразу под ней */
    --intro-h: 11rem;
    --shelf: calc(var(--header-h) + var(--intro-h) + var(--space-4));
    /* шаг между полками. Плюс пиксель — верхняя граница карточки:
       без него следующая карточка съедала бы линию под шапкой предыдущей */
    --shelf-step: calc(var(--peek) + 1px);
    background: var(--surface-tint);
    color: var(--ink);
    padding-block: clamp(var(--space-9), 8vw, var(--space-10)) clamp(var(--space-7), 4vw, var(--space-8));
  }

  .workflow__header {
    --workflow-exit: 0px;
    position: sticky;
    inset-block-start: var(--header-h);
    z-index: 6;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(19rem, .7fr);
    align-items: end;
    gap: var(--space-6) var(--space-8);
    min-block-size: var(--intro-h);
    margin-block-end: var(--space-4);
    padding-block: var(--space-4) var(--space-5);
    background: var(--surface-tint);
    border-block-end: 1px solid var(--line);
    transform: translateY(var(--workflow-exit));
  }

  .workflow__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 3.9vw, 3.75rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--ink-strong);

    & span { display: block; }
  }

  .workflow__lead {
    max-inline-size: 29rem;
    padding-block-end: 5px;
    font-size: var(--step-body);
    line-height: 1.55;
    color: var(--ink-muted);
  }

  .workflow__stack {
    /* Запас прокрутки после последней карточки: ей нужно дойти до своей полки,
       а собранной стопке — постоять перед глазами, прежде чем экран уедет.
       Именно псевдоэлементом, а не отступом: липкий элемент ограничен
       содержимым родителя, и padding оказался бы уже снаружи этой границы. */
    &::after {
      content: '';
      display: block;
      block-size: clamp(var(--space-7), 14svh, 9rem);
    }
  }

  .wstep {
    position: sticky;
    /* каждая следующая полка ниже предыдущей ровно на высоту полосы */
    inset-block-start: calc(var(--shelf) + var(--i) * var(--shelf-step));
    /* У ранних карточек нижний запас больше. Благодаря этому при выходе
       из секции браузер сохраняет расстояние между полками, а не стягивает
       все карточки в одну гармошку. */
    padding-block-end: calc(
      var(--space-4) + (4 - var(--i)) * var(--shelf-step)
    );
  }


  .wstep__card {
    position: relative;
    display: grid;
    /* первая строка ровно в высоту полосы: накрытая карточка показывает
       целиком свою шапку и ни пикселем больше */
    grid-template-rows: var(--peek) minmax(0, 1fr);
    /* карточка не выше того, что остаётся под полками всех предыдущих */
    min-block-size: min(19.5rem, calc(100svh - var(--shelf) - 4 * var(--shelf-step) - var(--space-6)));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: clip;
    /* тень бьёт вверх: карточка ложится на предыдущую, а не висит над пустотой */
    box-shadow: 0 -10px 24px -16px color-mix(in srgb, var(--ink) 30%, transparent);

    /* крупный номер водяным знаком — фактура, а не информация */
    &::after {
      content: attr(data-num);
      position: absolute;
      inset-block-end: clamp(var(--space-4), 1.5vw, var(--space-5));
      inset-inline-end: clamp(var(--space-5), 3vw, var(--space-7));
      font-family: var(--font-display);
      font-size: clamp(5.5rem, 8vw, 9rem);
      line-height: .74;
      letter-spacing: -.06em;
      color: var(--surface-tint);
      pointer-events: none;
    }
  }

  .wstep__head {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 2vw, var(--space-6));
    padding-inline: clamp(var(--space-5), 3vw, var(--space-7));
    border-block-end: 1px solid var(--line);
    transition: border-color .3s var(--ease);
  }

  .wstep__num {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--line-strong);
    transition: color .3s var(--ease);
  }

  .wstep__title {
    font-size: clamp(1.125rem, 1.35vw, 1.375rem);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ink-strong);
  }

  /* Открытая карточка — та, что сейчас читается. Пройденные приглушены:
     в стопке видно и то, где вы сейчас, и то, что уже позади. */
  .wstep[data-state='open'] {
    & .wstep__num { color: var(--ink-strong); }
    & .wstep__head { border-block-end-color: var(--line-strong); }
  }

  .wstep[data-state='stacked'] .wstep__title {
    color: var(--ink-muted);
    transition: color .3s var(--ease);
  }

  .wstep__body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-content: center;
    column-gap: clamp(var(--space-6), 4vw, var(--space-8));
    row-gap: var(--space-4);
    padding: clamp(var(--space-5), 3vw, var(--space-7)) clamp(var(--space-5), 3vw, var(--space-7));
  }

  .wstep__copy {
    grid-column: 1;
    max-inline-size: 46ch;
    font-size: var(--step-lead);
    line-height: 1.55;
    color: var(--ink);
  }

  /* сноска уходит в правую колонку: карточка широкая, тянуть текст вниз незачем */
  .wstep__note {
    grid-column: 2;
    align-self: center;
    max-inline-size: 34ch;
    padding-inline-start: var(--space-5);
    border-inline-start: 2px solid var(--line-strong);
    font-size: var(--step-small);
    line-height: 1.55;
    color: var(--ink-muted);
  }

  /* На невысоком ноутбуке сохраняем ту же сцену, но собираем её плотнее,
     чтобы раскрытая карточка не оказалась за нижней границей экрана. */
  @media (width >= 62rem) and (height < 48rem) {
    .workflow {
      --intro-h: 8rem;
      --peek: 3rem;
    }

    .workflow__header { padding-block: var(--space-3) var(--space-4); }
    .workflow__title { font-size: clamp(2.25rem, 3vw, 3rem); }
    .workflow__lead { font-size: var(--step-small); line-height: 1.4; }
  }

  @media (width < 62rem) {
    .workflow {
      --peek: 3.25rem;
      padding-block: var(--space-9) var(--space-8);
    }

    .workflow__header {
      position: static;
      min-block-size: 0;
      grid-template-columns: 1fr;
      align-items: start;
      row-gap: var(--space-5);
      margin-block-end: clamp(var(--space-7), 4.5vw, var(--space-8));
      padding-block: 0;
      border-block-end: 0;
    }

    .workflow__title { font-size: clamp(2.25rem, 6.5vw, 3rem); }
    .workflow__lead { max-inline-size: 42rem; }

    .workflow__stack::after { display: none; }

    /* На узком экране стопка не нужна: полок пять, а высоты нет.
       Карточки идут обычным списком. */
    .wstep {
      position: static;
      padding-block-end: var(--space-4);
    }

    .wstep__card {
      min-block-size: 0;
      grid-template-rows: auto minmax(0, 1fr);
    }

    .wstep__head {
      align-items: start;
      gap: var(--space-4);
      padding-block: var(--space-5);
    }

    .wstep__num { font-size: 1.5rem; padding-block-start: .1em; }

    .wstep__body { grid-template-columns: 1fr; row-gap: var(--space-5); }
    .wstep__copy, .wstep__note { grid-column: 1; max-inline-size: 46ch; }
    .wstep__card::after { font-size: clamp(5rem, 18vw, 7rem); }
  }

  @media (width < 48rem) {
    .workflow {
      --intro-h: 10.75rem;
      --peek: 3.25rem;
      --shelf: calc(var(--header-h) + var(--intro-h) + var(--space-3));
      padding-block: var(--space-8) var(--space-7);
    }

    .workflow__header {
      position: sticky;
      inset-block-start: var(--header-h);
      z-index: 6;
      min-block-size: var(--intro-h);
      margin-block-end: var(--space-3);
      padding-block: var(--space-3) var(--space-4);
      background: var(--surface-tint);
      border-block-end: 1px solid var(--line);
      transform: translateY(var(--workflow-exit));
    }

    .workflow__title { font-size: clamp(2.15rem, 8.4vw, 2.75rem); }
    .workflow__lead { font-size: .9rem; line-height: 1.45; }

    .workflow__stack::after {
      display: block;
      block-size: var(--space-8);
    }

    .wstep {
      position: sticky;
      inset-block-start: calc(var(--shelf) + var(--i) * var(--shelf-step));
      padding-block-end: calc(var(--space-3) + (4 - var(--i)) * var(--shelf-step));
    }

    .wstep__card {
      grid-template-rows: var(--peek) minmax(0, 1fr);
      min-block-size: min(17.5rem, calc(100svh - var(--shelf) - 4 * var(--shelf-step) - var(--space-4)));
    }

    .wstep__head {
      align-items: center;
      padding-block: 0;
      padding-inline: var(--space-5);
    }

    .wstep__body { padding: var(--space-5); }
    .wstep__copy { font-size: 1rem; line-height: 1.5; }
    .wstep__note { font-size: .875rem; line-height: 1.5; }

    /* карточка узкая: знак попадал под текст сноски */
    .wstep__card::after { display: none; }
  }

  /* Стопка — это движение. Кому оно мешает, тот получает обычный список. */
  @media (prefers-reduced-motion: reduce) {
    .wstep { position: static; padding-block-end: var(--space-4); }
    .wstep__card { min-block-size: 0; grid-template-rows: auto minmax(0, 1fr); }
    .wstep__head { padding-block: var(--space-5); }
    .workflow__stack::after { display: none; }
  }
}

/* ─────────────────────────── motion ─────────────────────────── */
@layer motion {
  @keyframes pop-in {
    from { opacity: 0; translate: 0 -6px; }
    to   { opacity: 1; translate: 0 0; }
  }

  @keyframes rise {
    from { opacity: 0; translate: 0 12px; }
    to   { opacity: 1; translate: 0 0; }
  }

  @keyframes reveal {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  @keyframes settle {
    from { scale: 1.08; }
    to   { scale: 1; }
  }

  /* появление на скролле без JS: анимация, привязанная к прогрессу вьюпорта */
  @supports (animation-timeline: view()) {
    .hero__copy > * {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }

    .situations__header,
    .scenario-card,
    .checks__title,
    .checks__body,
    .workflow__header {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 30%;
    }
  }

  /* первичная загрузка: тот же сдвиг, но по таймеру */
  @supports not (animation-timeline: view()) {
    .hero__copy > * { animation: rise .5s var(--ease) both; }
    .hero__copy > *:nth-child(2) { animation-delay: .06s; }
    .hero__copy > *:nth-child(3) { animation-delay: .12s; }
  }

  /* Шторка вешается на picture, а не на .hero__media: clip-path на родителе
     обрезал бы и карточку-обещание, которая из него выступает. */
  .hero__media picture {
    display: block;
    animation: reveal .9s var(--ease) .12s both;
  }

  .hero__media img { animation: settle 1.2s var(--ease) .12s both; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      animation-timeline: auto !important;
    }
  }
}