/* Автоматический пропорциональный слой для экранов до 420 CSS-пикселей. */
/* 1px при базовой ширине 420 равен 0.238095vw. */
@media (max-width: 420px) {

  /* source: tokens.css */

/* ==========================================================================
   Red Peak — design tokens
   ========================================================================== */

:root {
  /* Цвет */
  --color-bg: #040a0a;
  --color-ink: #111111;
  --color-white: #ffffff;
  --color-red: #c6001a;
  --color-dark-grid: #1b2020;
  --color-light-grid: #e6e7e7;
  --color-glass: rgba(255, 255, 255, 0.1);
  --color-muted: rgba(255, 255, 255, 0.5);

  /* Шкала отступов */
  --space-4: 0.952381vw;
  --space-8: 1.904762vw;
  --space-12: 2.857143vw;
  --space-16: 3.809524vw;
  --space-20: 4.761905vw;
  --space-24: 5.714286vw;
  --space-32: 7.619048vw;
  --space-40: 9.52381vw;
  --space-56: 13.333333vw;

  /* Внешний отступ страницы */
  --gutter: var(--space-20);

  /* Вертикальные поля секции: 28.571429vw на макете 1440 */
  --section-pad: max(15.238095vw, 8.33vw);

  /* Радиусы */
  --radius-12: 2.857143vw;
  --radius-16: 3.809524vw;
  --radius-32: 7.619048vw;
  --radius-40: 9.52381vw;

  /* Типографика */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Резиновые кегли: значения дизайна привязаны к макету 342.857143vw */
  --fs-display: max(9.52381vw, 9.72vw);  /* 33.333333vw @1440 */
  --fs-h1: max(7.619048vw, 8.33vw);       /* 28.571429vw @1440 */
  --fs-h2: max(5.238095vw, 3.33vw);       /* 11.428571vw  @1440 */
  --fs-h3: max(4.52381vw, 1.944vw);      /* 6.666667vw  @1440 */
  --fs-body: max(3.571429vw, 1.25vw);     /* 4.285714vw  @1440 */
  --fs-ui: 3.333333vw;

  --tracking-tight: -0.02em;
  --tracking-ui: -0.01em;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
}


  /* source: components.css */

/* ==========================================================================
   Red Peak — общие примитивы.

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

/* --- Стеклянная плашка -------------------------------------------------- */

.pill,
.dock__pill {
  display: flex;
  align-items: center;
  border-radius: var(--radius-16);
  background-color: var(--color-glass);
  -webkit-backdrop-filter: blur(4.761905vw);
  backdrop-filter: blur(4.761905vw);
}

.pill {
  gap: var(--space-8);
  height: 8.095238vw;
  padding: 0 var(--space-12);
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
}

/* На светлом фоне стеклянная версия не читается. */
.pill--light,
.task-card .pill {
  background-color: rgba(4, 10, 10, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--color-bg);
}

/* Акцентная плашка: ею помечен главный входной продукт. */
.pill--accent,
.task-card .pill--accent {
  background-color: var(--color-red);
  color: var(--color-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Красная кнопка ------------------------------------------------------ */

.cta,
.dock__cta,
.scene__cta-final {
  display: flex;
  align-items: center;
  height: 10vw;
  padding: 0 var(--space-16);
  border-radius: var(--radius-16);
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* На ярком фоне красная кнопка теряется — нужна светлая. */
.cta--invert {
  background-color: var(--color-white);
  color: var(--color-bg);
}

/* Наведение у всех кнопок одно: фон уходит в чёрный, надпись — в белый.
   Красная и белая версии сходятся в одном состоянии, поэтому наведение
   читается одинаково, на каком бы фоне кнопка ни стояла. */
.cta:hover,
.cta:focus-visible,
.dock__cta:hover,
.dock__cta:focus-visible,
.scene__cta-final:hover,
.scene__cta-final:focus-visible {
  background-color: var(--color-ink);
  color: var(--color-white);
}

/* --- Точка ---------------------------------------------------------------- */

.dot {
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: currentColor;
}

/* --- Пониженная подвижность ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cta,
  .dock__cta,
  .scene__cta-final {
    transition: none;
  }
}

/* --- Проявление по скроллу ------------------------------------------------ */

/* Стартовое состояние ставится только когда скрипт точно есть: без него
   контент должен остаться видимым, а не пропасть. */
.has-js [data-reveal] {
  opacity: 0;
  will-change: transform, filter, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal] {
    opacity: 1;
    will-change: auto;
  }
}

/* ==========================================================================
   Живой градиент

   Фирменная палитра, собранная из нескольких сильно размытых пятен. Каждое
   идёт по замкнутой траектории с постоянной скоростью и своим периодом:
   периоды взаимно непохожие, поэтому рисунок не выходит на повтор, а
   отсутствие пауз на краях делает движение непрерывно заметным.

   Основа движения — сдвиг: его браузер отдаёт видеокарте и не пересчитывает
   размытие. Масштаб заставляет перерисовывать пятно каждый кадр, поэтому он
   есть только у одного и в узком диапазоне.
   ========================================================================== */

.rp-gradient {
  overflow: hidden;
  background-color: #c81a12;
}

.rp-gradient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(19.047619vw);
  will-change: transform;
}

/* Пятна вытянутые: у круга поворот незаметен. */
.rp-gradient__blob--1 {
  left: -20%;
  top: -35%;
  width: 75%;
  aspect-ratio: 1.4;
  background-color: rgba(255, 74, 38, 0.95);
  animation: rp-drift-1 9s linear infinite;
}

.rp-gradient__blob--2 {
  right: -15%;
  bottom: -30%;
  width: 65%;
  aspect-ratio: 1.2;
  background-color: rgba(198, 0, 26, 1);
  animation: rp-drift-2 13s linear infinite;
}

.rp-gradient__blob--3 {
  right: -22%;
  top: 4%;
  width: 60%;
  aspect-ratio: 1.3;
  background-color: rgba(242, 216, 206, 0.9);
  animation: rp-drift-3 7s linear infinite;
}

.rp-gradient__blob--4 {
  left: 22%;
  bottom: -35%;
  width: 55%;
  aspect-ratio: 1.5;
  background-color: rgba(255, 130, 60, 0.7);
  animation: rp-drift-4 11s linear infinite;
}

/* Траектории замкнутые: последний кадр совпадает с первым, поэтому цикл
   не дёргается на стыке и пятно нигде не останавливается. */
@keyframes rp-drift-1 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(55%, 26%, 0) rotate(14deg); }
  50%  { transform: translate3d(72%, -30%, 0) rotate(0deg); }
  75%  { transform: translate3d(20%, -52%, 0) rotate(-14deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes rp-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  25%  { transform: translate3d(-46%, -20%, 0) scale(0.92); }
  50%  { transform: translate3d(-62%, 24%, 0) scale(1.05); }
  75%  { transform: translate3d(-18%, 46%, 0) scale(0.96); }
  100% { transform: translate3d(0, 0, 0) scale(1.05); }
}

@keyframes rp-drift-3 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(-34%, 40%, 0) rotate(-12deg); }
  50%  { transform: translate3d(-58%, 6%, 0) rotate(0deg); }
  75%  { transform: translate3d(-26%, -34%, 0) rotate(12deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes rp-drift-4 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(40%, -44%, 0) rotate(18deg); }
  50%  { transform: translate3d(-16%, -62%, 0) rotate(0deg); }
  75%  { transform: translate3d(-44%, -20%, 0) rotate(-18deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rp-gradient__blob {
    animation: none;
  }
}


  /* source: scene.css */

/* ==========================================================================
   Scene — закреплённая сцена первого экрана.
   Вся хореография описана кадрами в scripts/scene.js,
   здесь только исходная геометрия слоёв и типографика.
   ========================================================================== */

.scene {
  /* Длина прокрутки сцены. 100svh — сам экран, остальное — «пробег». */
  --scene-length: 600svh;

  position: relative;
  height: var(--scene-length);
  background-color: var(--color-bg);
}

.scene__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background-color: var(--color-bg);
  background-image: url("../assets/hero-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* --- Слой 1. Фотография ------------------------------------------------ */

.scene__photo {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  /* Бокс и картинка внутри неподвижны: сворачивание кадра — это clip-path,
     а положение — transform. Ни одного свойства, вызывающего пересчёт
     макета или повторный ресемплинг картинки. */
  transform: translate3d(0, 100%, 0);
  will-change: transform, clip-path;
}

.scene__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Слой 2. Текст героя ----------------------------------------------- */

.hero__content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  align-items: start;
  align-content: start;
  padding: var(--gutter);
  pointer-events: none;
  will-change: transform;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  padding-right: var(--space-20);
}

.hero__lead {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.hero__text {
  max-width: 66%;
  margin-top: clamp(4.761905vw, 2.8vw, 9.52381vw);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--tracking-ui);
}

/* Перенос после первого предложения — как в макете, только на широких экранах */
.lead-break {
  display: none;
}

/* --- Слой 3. «20+ лет» -------------------------------------------------- */

.scene__years {
  position: absolute;
  z-index: 3;
  left: 50%;
  /* 53.06% вместо 445/800: CSS-строка выше глифов на половину интерлиньяжа */
  top: 53.06%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ширина по содержимому: фильтр размывает 123.809524vw вместо всей ширины экрана. */
  width: fit-content;
  max-width: calc(100% - var(--gutter) * 2);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: filter, opacity;
}

.scene__years-value {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.scene__years-note {
  max-width: min(90%, max(66.666667vw, 24.86vw));
  font-size: var(--fs-body);
  line-height: 1.3;
  letter-spacing: var(--tracking-ui);
}

/* --- Слой 4. Карточки --------------------------------------------------- */

/* Внешний слой — только позиция и контейнер для cqw-единиц.
   Внутренности карточки заданы в долях её ширины, поэтому она
   масштабируется целиком, сохраняя пропорции макета (76.190476vw). */
.scene-card {
  position: absolute;
  z-index: 4;
  container-type: inline-size;
  aspect-ratio: 1;
  opacity: 0;
  will-change: transform, filter, opacity;
}

.scene-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 12.5cqw;              /* 40 / 320 */
  border-radius: 12.5cqw;
  background-color: var(--color-ink);
}

.scene-card__dot {
  width: 6.25cqw;                /* 20 / 320 */
  height: 6.25cqw;
  border-radius: 50%;
  background-color: var(--color-white);
}

.scene-card__text {
  font-size: 8.75cqw;            /* 28 / 320 */
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.scene-card--first {
  left: 9.1%;                    /* 131 / 1440 */
  top: 6.875%;                   /* 55 / 800  */
  width: 22.22%;                 /* 320 / 1440 */
}

.scene-card--second {
  left: 71.74%;                  /* 1033 / 1440 */
  top: 46.875%;                  /* 375 / 800  */
  width: 22.22%;
}

/* --- Слой 5. Финальная кнопка ------------------------------------------ */

.scene__cta-final {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 79.875%;
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (min-width: 243.809524vw) {
  .lead-break {
    display: inline;
  }
}

@media (max-width: 243.571429vw) {
  .hero__content {
    grid-template-columns: 1fr;
    row-gap: var(--space-24);
  }

  .hero__title {
    font-size: max(9.52381vw, 13vw);
    padding-right: 0;
  }

  .hero__lead {
    font-size: max(5.238095vw, 5vw);
  }

  .hero__text {
    max-width: 100%;
    font-size: max(3.571429vw, 2vw);
  }
}

/* ==========================================================================
   prefers-reduced-motion: сцена разбирается в обычный вертикальный поток.
   Скрипт в этом режиме не выставляет инлайн-стили, поэтому правила ниже
   полностью описывают статичный вид.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .scene {
    height: auto;
  }

  .scene__pin {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
    height: auto;
    padding: var(--gutter) var(--gutter) var(--space-40);
    overflow: visible;
  }

  .scene__photo,
  .hero__content,
  .scene__years,
  .scene-card,
  .scene__cta-final {
    position: static;
    transform: none;
    filter: none;
    opacity: 1;
  }

  .hero__content {
    order: 1;
    width: 100%;
    padding: 0;
  }

  .scene__photo {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-16);
  }

  .scene__years {
    order: 3;
    width: 100%;
    padding: 0;
  }

  .scene-card {
    order: 4;
    width: min(76.190476vw, 100%);
  }

  .scene__cta-final {
    order: 5;
  }
}


  /* source: sprint.css */

/* ==========================================================================
   Блок 3 — «Операционный спринт»

   Главный входной продукт. Фон и рамка — общие с блоком шагов, они живут
   на панели-обёртке (panel.css); здесь только содержимое.

   По скролле фон собирается из полосы во всю ширину в скруглённую карточку
   с белыми полями (scripts/frame.js).

   Шапка выровнена по центру: срок, название, подпись, кнопка. Она видна
   сразу и не анимируется — это продающий текст, его нужно прочитать без
   прокрутки. Проявляются по очереди только карточки снизу
   (scripts/reveal.js).
   ========================================================================== */

.sprint {
  position: relative;
  padding: var(--section-pad) var(--panel-pad);
  color: var(--color-white);
}

/* --- Живой фон ------------------------------------------------------------ */

/* Содержимое поверх фона. */
.sprint__inner {
  position: relative;
  z-index: 1;
}

/* --- Шапка по центру ------------------------------------------------------ */

.sprint__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.sprint__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.sprint__note {
  /* 166.666667vw на макете 1440: на меньшей ширине последнее слово уезжало
     на отдельную четвёртую строку. */
  max-width: min(100%, max(95.238095vw, 48.6vw));
  text-wrap: balance;
  font-size: var(--fs-body);
  line-height: 1.3;
  letter-spacing: var(--tracking-ui);
}

.sprint__head .cta {
  margin-top: var(--space-8);
}

/* --- Три карточки --------------------------------------------------------- */

.sprint__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin: var(--section-pad) 0 0;
  padding: 0;
  list-style: none;
}

/* Тот же язык, что у чёрных карточек первого экрана — точка, радиус 40,
   6.666667vw Medium, — но кегль берётся из общей шкалы страницы, а не от ширины
   карточки: здесь она втрое шире и внутреннее масштабирование дало бы
   несоразмерно крупный текст. */
.sprint-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-40);
  min-height: 95.238095vw;
  padding: var(--space-40);
  border-radius: var(--radius-40);
  background-color: var(--color-white);
  color: var(--color-bg);
}

.sprint-card .dot {
  width: 4.761905vw;
  height: 4.761905vw;
  background-color: var(--color-bg);
}

.sprint-card__label {
  display: block;
  margin-bottom: var(--space-16);
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: var(--tracking-ui);
  color: rgba(4, 10, 10, 0.5);
}

.sprint-card__text {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 243.571429vw) {
  .sprint {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .sprint__title {
    font-size: max(5.238095vw, 5vw);
  }

  .sprint__cards {
    grid-template-columns: 1fr;
  }

  .sprint-card {
    min-height: 0;
    gap: var(--space-32);
    padding: var(--space-24);
  }

  .sprint-card__text {
    font-size: max(4.52381vw, 3.4vw);
  }
}


  /* source: dock.css */

/* ==========================================================================
   Дока — навигация, залипшая внизу экрана.

   Два состояния, два слоя, лежащих друг на друге в одной точке: три точки
   на стекле и полная навигация. Переход простой и прямой — точки улетают
   вниз, навигация приходит сверху на их место. Одно направление на оба
   слоя, поэтому смена читается как одно движение, а не как две отдельные
   анимации.

   Слои совмещены не выравниванием, а раскладкой: навигация остаётся в
   потоке и задаёт доке высоту, точки лежат поверх неё по центру. Поэтому
   при смене состояний ничего не прыгает: точка, вокруг которой всё
   происходит, всегда одна и та же.

   Прогрессом перехода управляют двое — прокрутка первого экрана (сцена
   сворачивает навигацию в точки) и клик по точкам; считает scripts/dock.js.

   Размытие фона накладывает жёсткое условие на раскладку: над стеклом
   не должно быть ни одного слоя с прозрачностью, трансформацией или
   will-change. Такой слой отсекает стекло от страницы, и размывать ему
   становится нечего — фон остаётся чётким. Поэтому перелёт написан не
   на обёртках, а на самих стеклянных элементах, и в состоянии покоя
   скрипт убирает свои стили совсем.

   По той же причине наведение и перелёт разведены по разным свойствам:
   скрипт ведёт translate, CSS — scale. Отдельные свойства трансформации
   складываются сами и не переписывают друг друга.

   Без скрипта и в режиме пониженной подвижности остаётся раскрытая
   навигация обычным потоком: точки показывает только класс dock--morph,
   который ставит скрипт.
   ========================================================================== */

.dock {
  /* Тёмный фон страницы — состояние по умолчанию. */
  --dock-fg: var(--color-white);
  --dock-plate: var(--color-white);
  --dock-on-plate: var(--color-ink);

  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: max(var(--space-20), 3svh);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--gutter);
  color: var(--dock-fg);
  /* Ряд ловит клики только там, где что-то есть. */
  pointer-events: none;
  transition: color 0.3s ease;
}

.dock > * {
  pointer-events: auto;
}

/* --- Раскрытая навигация ------------------------------------------------- */

.dock__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-20);
}

.dock__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-16) var(--space-4) var(--space-4);
  border-radius: var(--radius-16);
  background-color: var(--color-glass);
  -webkit-backdrop-filter: blur(4.761905vw);
  backdrop-filter: blur(4.761905vw);
  transition: background-color 0.3s ease;
}

/* Подсветка под курсором — одна на все разделы: она не зажигается и не
   гаснет на каждом, а переезжает с одного на другой. Поэтому это отдельный
   слой, а не фон самого раздела: фон пришлось бы гасить в одном месте и
   зажигать в другом, и связи между двумя движениями не было бы.

   Лежит под разделами, значит, под белой плашкой активного: заезжая на
   неё, подсветка скрывается за ней, а не ложится поверх. */
.dock__glow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: var(--radius-12);
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.2s ease;
}

.dock__glow.is-on {
  opacity: 1;
}

/* Появляясь, подсветка не должна прилетать с прошлого места: она встаёт
   на новое сразу и только потом проявляется. */
.dock__glow.is-placed {
  transition: none;
}

.dock__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 8.095238vw;
  padding: 0 var(--space-12);
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
}

.dock__link--active {
  border-radius: var(--radius-12);
  background-color: var(--dock-plate);
  color: var(--dock-on-plate);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dock__marker {
  flex: 0 0 auto;
  width: 2.380952vw;
  height: 2.380952vw;
  border-radius: 50%;
  background-color: currentColor;
}

/* --- Свёрнутое меню ------------------------------------------------------ */

/* Стекло с точками — сама кнопка, без обёрток: над размытием не должно
   быть ни одного слоя, который отрежет его от страницы. */
.dock__toggle {
  display: none;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-16);
  background-color: var(--color-glass);
  -webkit-backdrop-filter: blur(4.761905vw);
  backdrop-filter: blur(4.761905vw);
  cursor: pointer;
  transition: scale 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.3s ease;
}

.dock__dot {
  width: 2.380952vw;
  height: 2.380952vw;
  border-radius: 50%;
  background-color: currentColor;
}

/* Курсору отвечает scale, перелёт скрипт пишет в translate — отдельные
   свойства складываются и не переписывают друг друга. */
.dock__toggle:hover,
.dock__toggle:focus-visible {
  scale: 1.09;
  background-color: rgba(255, 255, 255, 0.18);
}

.dock__toggle:active {
  scale: 0.97;
  transition-duration: 0.2s;
}

/* ==========================================================================
   Режим смены состояний — включает скрипт
   ========================================================================== */

/* Точки ложатся поверх навигации, в её центр: высоту доки задаёт
   навигация, и точка отсчёта у обоих слоёв одна. */
.dock--morph .dock__toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  translate: -50% -50%;
}

/* ==========================================================================
   Светлый фон под докой
   ========================================================================== */

.dock--light {
  --dock-fg: var(--color-bg);
  --dock-plate: var(--color-bg);
  --dock-on-plate: var(--color-white);
}

.dock--light .dock__pill,
.dock--light .dock__toggle {
  background-color: rgba(4, 10, 10, 0.06);
}

.dock--light .dock__glow {
  background-color: rgba(4, 10, 10, 0.06);
}

.dock--light .dock__toggle:hover,
.dock--light .dock__toggle:focus-visible {
  background-color: rgba(4, 10, 10, 0.12);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 214.285714vw) {
  .dock--mobile {
    --dock-mobile-button-width: 20.952381vw;
    --dock-mobile-right: max(7.619048vw, calc(env(safe-area-inset-right) + 4.761905vw));
    --dock-mobile-bottom: max(5.714286vw, calc(env(safe-area-inset-bottom) + 3.809524vw));

    right: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    bottom: 0;
    justify-content: flex-end;
    padding: 0;
  }

  .dock--mobile .dock__nav {
    position: fixed;
    right: var(--dock-mobile-right);
    bottom: var(--dock-mobile-bottom);
    left: auto;
    display: flex;
    flex-direction: column;
    width: 123.809524vw;
    max-width: calc(100vw - var(--dock-mobile-right) - 4.285714vw);
    margin: 0;
    /* Нижняя зона принадлежит кнопке: панель растёт из той же капсулы,
       а не появляется отдельной карточкой над ней. */
    padding: 1.904762vw 1.904762vw 13.809524vw;
    border-radius: 237.857143vw;
    background: var(--color-white);
    color: var(--color-bg);
    box-shadow: 0 2.857143vw 7.619048vw rgba(4, 10, 10, 0.22);
    opacity: 0;
    pointer-events: none;
    /* Меню рождается из центра кнопки и растёт только вверх и влево. */
    transform-origin:
      calc(100% - (var(--dock-mobile-button-width) / 2))
      calc(100% - 5.238095vw);
    scale: 0.04;
    transition: opacity 220ms ease,
      scale 520ms cubic-bezier(0.2, 0.75, 0.2, 1),
      border-radius 380ms cubic-bezier(0.2, 0.75, 0.2, 1);
    will-change: scale, opacity;
  }

  .dock--mobile-open .dock__nav {
    border-radius: var(--radius-16);
    opacity: 1;
    pointer-events: auto;
    scale: 1;
  }

  .dock--mobile .dock__pill {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.47619vw;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .dock--mobile .dock__link {
    min-width: 0;
    width: 100%;
    height: 12.857143vw;
    justify-content: flex-start;
    padding-inline: 2.857143vw;
    font-size: clamp(4.52381vw, 5.5vw, 6.190476vw);
    letter-spacing: -0.02em;
    text-align: left;
    opacity: 0;
    translate: 0 3.333333vw;
    transition: opacity 220ms ease,
      translate 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dock--mobile .dock__cta {
    justify-content: center;
    width: 100%;
    height: 11.428571vw;
    margin-top: 1.904762vw;
    padding-inline: 3.809524vw;
    font-size: 3.809524vw;
    font-weight: 500;
    opacity: 0;
    translate: 0 3.333333vw;
    transition: opacity 220ms ease,
      translate 360ms cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.25s ease, color 0.25s ease;
  }

  .dock--mobile-open .dock__link,
  .dock--mobile-open .dock__cta {
    opacity: 1;
    translate: 0;
  }

  .dock--mobile-open .dock__link:nth-of-type(1) {
    transition-delay: 180ms;
  }

  .dock--mobile-open .dock__link:nth-of-type(2) {
    transition-delay: 250ms;
  }

  .dock--mobile-open .dock__link:nth-of-type(3) {
    transition-delay: 320ms;
  }

  .dock--mobile-open .dock__link:nth-of-type(4) {
    transition-delay: 390ms;
  }

  .dock--mobile-open .dock__cta {
    transition-delay: 460ms, 460ms, 0ms, 0ms;
  }

  .dock--mobile .dock__toggle {
    position: fixed;
    right: var(--dock-mobile-right);
    bottom: var(--dock-mobile-bottom);
    z-index: 2;
    display: flex;
    width: var(--dock-mobile-button-width);
    min-width: var(--dock-mobile-button-width);
    max-width: calc(100vw - 8.571429vw);
    height: 10.47619vw;
    align-items: center;
    justify-content: center;
    padding-inline: 4.285714vw;
    border-radius: 237.857143vw;
    background: var(--color-white);
    color: var(--color-bg);
    translate: none;
    transition: border-radius 300ms cubic-bezier(0.16, 1, 0.3, 1),
      background-color 180ms ease, color 180ms ease;
  }

  /* Общий hover увеличивает десктопную кнопку. На узком экране этот scale
     выталкивал правый и нижний край за safe-area, особенно после тапа. */
  .dock--mobile .dock__toggle:hover,
  .dock--mobile .dock__toggle:focus-visible {
    scale: 1;
  }

  .dock--mobile .dock__toggle:focus-visible {
    outline: 0.47619vw solid rgba(4, 10, 10, 0.62);
    outline-offset: 0.714286vw;
  }

  .dock--mobile-open .dock__toggle {
    border-radius: 237.857143vw;
    background: rgba(4, 10, 10, 0.06);
  }

  .dock--mobile .dock__toggle::before {
    content: "Меню";
    font-size: 3.809524vw;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.015em;
  }

  .dock--mobile-open .dock__toggle::before {
    content: "Закрыть";
  }

  .dock--mobile .dock__dot {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock,
  .dock__nav,
  .dock__pill,
  .dock__toggle,
  .dock__glow,
  .dock__link--active {
    transition: none;
  }
}


  /* source: calm-hero.css */

/* Альтернативный первый экран: четыре колонки, один статичный кадр. */

@font-face {
  font-family: "NAMU Display";
  src: url("../assets/fonts/NAMU-1960.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.calm-hero {
  --hero-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --hero-cell-pad: clamp(3.809524vw, 1.4vw, 4.761905vw);
  --hero-columns: repeat(4, minmax(0, 1fr));
  --hero-grid-line: var(--color-dark-grid);

  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 112%, rgba(198, 0, 26, 0.22), transparent 34%),
    var(--color-bg);
  isolation: isolate;
}

.calm-hero__grid-lines {
  position: absolute;
  z-index: -1;
  inset: 0 var(--hero-gutter);
  display: grid;
  grid-template-columns: var(--hero-columns);
  pointer-events: none;
}

.calm-hero__grid-lines span {
  border-left: 0.238095vw solid var(--hero-grid-line);
}

.calm-hero__grid-lines span:first-child {
  border-left: 0;
}

.calm-hero__grid-lines span:last-child {
  border-right: 0;
}

.calm-header,
.calm-hero__statement,
.calm-hero__lower {
  display: grid;
  grid-template-columns: var(--hero-columns);
  margin-inline: var(--hero-gutter);
}

.calm-header {
  min-height: clamp(18.095238vw, 9.5vh, 24.761905vw);
  align-items: center;
  border-bottom: 0.238095vw solid var(--hero-grid-line);
}

.logo-slot {
  grid-column: 1;
  display: inline-flex;
  width: fit-content;
  align-items: center;
}

.logo-slot__image {
  display: block;
  width: clamp(20.571429vw, 7.2vw, 25.904762vw);
  height: auto;
}

.calm-header__meta {
  grid-column: 4;
  align-self: center;
  padding-left: clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
}

.calm-hero__statement {
  min-height: clamp(78.571429vw, 56vh, 142.857143vw);
  grid-template-rows: 1fr;
  padding-top: clamp(9.047619vw, 6vh, 17.142857vw);
  padding-bottom: clamp(8.095238vw, 5vh, 15.238095vw);
}

.calm-hero__title {
  grid-column: 1 / -1;
  align-self: end;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.calm-hero__title span {
  display: block;
}

.calm-hero__title span:last-child {
  margin-left: 25%;
  color: var(--color-red);
}

.calm-hero__lower {
  min-height: clamp(54.761905vw, 34vh, 80.952381vw);
  border-top: 0.238095vw solid var(--hero-grid-line);
}

.calm-hero__experience,
.calm-hero__summary {
  position: relative;
  z-index: 2;
  padding: clamp(4.285714vw, 2vw, 7.142857vw) var(--hero-cell-pad) clamp(18.095238vw, 9vh, 24.761905vw);
}

.calm-hero__experience {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calm-hero__experience strong {
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(11.904762vw, 5.3vw, 19.52381vw);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.calm-hero__experience span {
  max-width: 22ch;
  font-size: 3.095238vw;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.58);
}

.calm-hero__summary {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calm-hero__summary > p:first-child {
  max-width: 24ch;
  font-size: clamp(4.047619vw, 1.45vw, 5.238095vw);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.calm-hero__summary-note {
  max-width: 31ch;
  font-size: 3.095238vw;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.58);
}

.calm-hero__media {
  position: relative;
  grid-column: 3 / 5;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

.calm-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 10, 10, 0.28), transparent 44%, rgba(4, 10, 10, 0.46));
  pointer-events: none;
}

.calm-hero__media img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(0.78) contrast(1.04);
}

.calm-hero__media figcaption {
  position: absolute;
  z-index: 1;
  top: clamp(4.285714vw, 2vw, 7.142857vw);
  left: clamp(3.809524vw, 2vw, 7.142857vw);
  max-width: 24ch;
  font-size: 3.095238vw;
  line-height: 1.25;
}

.logo-slot:focus-visible {
  outline: 0.47619vw solid var(--color-white);
  outline-offset: 0.952381vw;
}

@media (max-width: 214.285714vw) {
  .calm-hero {
    --hero-columns: repeat(2, minmax(0, 1fr));
  }

  .calm-hero__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .calm-header__meta {
    grid-column: 2;
  }

  .calm-hero__statement {
    min-height: min(30svh, 67.380952vw);
    padding-block: clamp(4.285714vw, 3vh, 7.142857vw) clamp(5.238095vw, 3vh, 8.095238vw);
  }

  .calm-hero__title {
    font-size: clamp(13.095238vw, 12vw, 25.714286vw);
    line-height: 0.9;
  }

  .calm-hero__title span:last-child {
    margin-left: 0;
    padding-right: calc(0.06em + 2.857143vw);
    text-align: right;
  }

  .calm-hero__lower {
    grid-template-rows: minmax(45.238095vw, auto) minmax(52.380952vw, 30svh);
  }

  .calm-hero__experience,
  .calm-hero__summary {
    padding-bottom: 7.619048vw;
  }

  .calm-hero__experience {
    grid-column: 1;
  }

  .calm-hero__summary {
    grid-column: 2;
  }

  .calm-hero__media {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-inline: calc(-1 * var(--hero-gutter));
    border-top: 0.238095vw solid var(--hero-grid-line);
    border-left: 0;
  }

}

@media (max-width: 133.333333vw) {
  .calm-header {
    min-height: 17.619048vw;
  }

  .logo-slot {
    align-self: center;
  }

  .logo-slot__image {
    width: 19.809524vw;
  }

  .calm-hero__statement {
    min-height: 57.142857vw;
    padding-block: 3.809524vw 5.238095vw;
  }

  .calm-hero__title {
    font-size: clamp(11.428571vw, 16vw, 18.095238vw);
  }

  .calm-hero__lower {
    grid-template-rows: auto auto minmax(50vw, 30svh);
  }

  .calm-hero__experience,
  .calm-hero__summary {
    min-height: 42.380952vw;
    padding: 4.761905vw var(--hero-cell-pad) 5.714286vw;
  }

  .calm-hero__summary {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: auto;
    gap: 7.142857vw;
    border-top: 0.238095vw solid var(--hero-grid-line);
    border-left: 0;
  }

  .calm-hero__experience {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .calm-hero__experience span,
  .calm-hero__summary > p:first-child,
  .calm-hero__summary-note {
    max-width: 28ch;
  }

  .calm-hero__media {
    grid-row: 3;
  }

  .calm-hero__media img {
    object-position: 57% center;
  }
}

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


  /* source: calm-task.css */

/* Второй блок: спокойный диагностический реестр на четырёх колонках. */

.task {
  --task-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --task-columns: repeat(4, minmax(0, 1fr));

  padding: 0 var(--task-gutter);
  background: #fff;
  color: var(--color-bg);
}

.task__stage {
  position: relative;
}

.task__pin {
  position: relative;
  display: grid;
  grid-template-columns: var(--task-columns);
  grid-template-rows: auto 1fr;
  min-height: clamp(92.857143vw, 58svh, 147.619048vw);
}

.task__edge-rule {
  position: absolute;
  z-index: 2;
  right: calc(-1 * var(--task-gutter));
  bottom: 0;
  left: calc(-1 * var(--task-gutter));
  height: 0.238095vw;
  background: var(--color-light-grid);
  pointer-events: none;
}

.task__pin::before,
.task__pin::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.238095vw;
  background: var(--color-light-grid);
  pointer-events: none;
}

.task__pin::before {
  left: 25%;
}

.task__pin::after {
  left: 50%;
  box-shadow: calc((100vw - var(--task-gutter) * 2) / 4) 0 var(--color-light-grid);
}

.task__label,
.task__intro {
  position: relative;
  z-index: 1;
  padding: clamp(5.714286vw, 3vw, 10vw) clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: rgba(4, 10, 10, 0.54);
}

.task__label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  padding-left: 0;
  color: var(--color-bg);
}

.task__label-num,
.task__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.task__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
  color: var(--color-white);
}

.task__label-name {
  padding-inline: 2.619048vw;
  border: 0.238095vw solid var(--color-bg);
  background: #fff;
  color: var(--color-bg);
}

.task__intro {
  grid-column: 4;
  max-width: 27ch;
}

.task__title {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  align-self: end;
  padding: 0 clamp(2.857143vw, 1.4vw, 4.761905vw) clamp(9.52381vw, 5vw, 17.142857vw) 0;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.task__title span {
  display: block;
}

.task__title span:nth-child(2) {
  margin-left: 25%;
  color: var(--color-red);
}

.task__title span:last-child {
  text-align: right;
}

.task__list {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: task-row;
}

.task__list > li {
  width: 100%;
  counter-increment: task-row;
}

.task-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: transparent;
  color: var(--color-bg);
  transition: color 180ms ease;
}

.task-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--task-gutter));
  background: transparent;
  transition: background-color 180ms ease;
  pointer-events: none;
}

.task-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: calc(-1 * var(--task-gutter));
  bottom: 0;
  left: calc(-1 * var(--task-gutter));
  height: 0.238095vw;
  background: var(--color-light-grid);
  pointer-events: none;
}

.task-card__head {
  display: grid;
  grid-template-columns: var(--task-columns);
  width: 100%;
  min-height: clamp(31.428571vw, 12vw, 45.238095vw);
  align-items: center;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.task-card__head::before {
  content: "0" counter(task-row);
  grid-column: 1;
  align-self: start;
  padding: clamp(5.238095vw, 2.4vw, 8.095238vw) clamp(2.857143vw, 1.4vw, 4.761905vw) 0 0;
  font-size: 2.857143vw;
  line-height: 1;
  color: rgba(4, 10, 10, 0.42);
  transition: color 180ms ease;
}

.task-card__pain {
  grid-column: 2 / 4;
  padding: clamp(5.238095vw, 2.4vw, 8.095238vw) clamp(3.809524vw, 2vw, 7.142857vw);
  border-left: 0.238095vw solid var(--color-light-grid);
  font-size: clamp(5.952381vw, 2.75vw, 10vw);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.task-card__foot {
  grid-column: 4;
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 2.857143vw;
  padding: clamp(5.238095vw, 2.4vw, 8.095238vw) clamp(2.857143vw, 1.4vw, 4.761905vw);
  border-left: 0.238095vw solid var(--color-light-grid);
}

.task-card .pill {
  max-width: calc(100% - 8.095238vw);
  overflow: hidden;
  background: rgba(4, 10, 10, 0.06);
  color: var(--color-bg);
  text-overflow: ellipsis;
}

.task-card .pill--accent {
  background: var(--color-red);
  color: var(--color-white);
}

.task-card__arrow {
  flex: 0 0 auto;
  width: 4.761905vw;
  height: 4.761905vw;
  color: rgba(4, 10, 10, 0.42);
  transition: transform 220ms ease, color 180ms ease;
}

.task-card:hover::before,
.task-card:focus-within::before {
  background: #f5f5f5;
}

.task-card__head:focus-visible {
  outline: 0.47619vw solid var(--color-red);
  outline-offset: -0.714286vw;
}

.task-card__head:hover .task-card__arrow {
  transform: translateX(0.952381vw);
  color: var(--color-bg);
}

.task-card.is-open {
  color: var(--color-white);
}

.task-card.is-open::before {
  background: var(--color-bg);
}

.task-card.is-open::after {
  background: var(--color-dark-grid);
}

.task-card.is-open .task-card__head::before,
.task-card.is-open .task-card__arrow {
  color: rgba(255, 255, 255, 0.54);
}

.task-card.is-open .task-card__pain,
.task-card.is-open .task-card__foot {
  border-color: var(--color-dark-grid);
}

.task-card.is-open .task-card__arrow,
.task-card.is-open .task-card__head:hover .task-card__arrow {
  transform: rotate(90deg);
}

.task-card.is-open .pill {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.task-card.is-open .pill--accent {
  background: var(--color-red);
}

/* Главная кнопка строки уже закрывает панель повторным кликом. */
.task-card__close {
  display: none;
}

.task-card__panel {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.task-card__panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: calc(-1 * var(--task-gutter));
  left: calc(-1 * var(--task-gutter));
  height: 0.238095vw;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
}

.task-card.is-open .task-card__panel {
  grid-template-rows: 1fr;
}

.task-card.is-open .task-card__panel::before {
  opacity: 1;
}

.task-card__panel-inner {
  display: grid;
  grid-template-columns: var(--task-columns);
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease;
}

.task-card.is-open .task-card__panel-inner {
  opacity: 1;
  transition-delay: 80ms;
}

.task-card__lead {
  grid-column: 2 / 4;
  margin: 0;
  padding: clamp(3.809524vw, 2vw, 7.142857vw) clamp(3.809524vw, 2vw, 7.142857vw) clamp(9.52381vw, 4vw, 14.285714vw);
  border-left: 0.238095vw solid var(--color-dark-grid);
  font-size: clamp(4.047619vw, 1.55vw, 5.47619vw);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.task-facts {
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 0.238095vw solid var(--color-dark-grid);
  border-left: 0.238095vw solid var(--color-dark-grid);
  list-style: none;
}

.task-facts__item {
  display: flex;
  min-height: 35.714286vw;
  flex-direction: column;
  justify-content: space-between;
  gap: 5.714286vw;
  padding: clamp(4.761905vw, 2vw, 7.142857vw);
  border-right: 0.238095vw solid var(--color-dark-grid);
}

.task-facts__item:last-child {
  border-right: 0;
}

.task-facts__label {
  font-size: 2.857143vw;
  line-height: 1;
  color: rgba(255, 255, 255, 0.42);
}

.task-facts__text {
  font-size: clamp(3.571429vw, 1.2vw, 4.285714vw);
  line-height: 1.28;
}

@media (max-width: 214.285714vw) {
  .task {
    --task-columns: repeat(2, minmax(0, 1fr));
  }

  .task__pin {
    min-height: clamp(95.238095vw, 52svh, 114.285714vw);
  }

  .task__pin::before {
    left: 50%;
  }

  .task__pin::after {
    display: none;
  }

  .task__label {
    grid-column: 1;
  }

  .task__intro {
    grid-column: 2;
  }

  .task__title {
    grid-column: 1 / -1;
    font-size: clamp(12.380952vw, 10vw, 18.571429vw);
    line-height: 0.98;
  }

  .task-card__head {
    grid-template-columns: 20.952381vw 1fr;
    grid-template-rows: auto auto;
  }

  .task-card__head::before {
    grid-column: 1;
    grid-row: 1 / 3;
    height: 100%;
  }

  .task-card__pain {
    grid-column: 2;
    grid-row: 1;
    padding-bottom: 3.333333vw;
  }

  .task-card__foot {
    grid-column: 2;
    grid-row: 2;
    min-height: 15.714286vw;
    border-top: 0.238095vw solid var(--color-light-grid);
  }

  .task-card.is-open .task-card__foot {
    border-color: var(--color-dark-grid);
  }

  .task-card__panel-inner {
    grid-template-columns: 20.952381vw 1fr;
  }

  .task-card__lead,
  .task-facts {
    grid-column: 2;
  }

  .task-facts {
    grid-template-columns: 1fr;
  }

  .task-facts__item {
    min-height: 0;
    border-right: 0;
    border-bottom: 0.238095vw solid var(--color-dark-grid);
  }

  .task-facts__item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 133.333333vw) {
  .task__pin {
    grid-template-rows: auto 1fr auto;
    min-height: 100vw;
  }

  .task__label {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-top: 5.714286vw;
  }

  .task__intro {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: 34ch;
    padding: 0 0 9.52381vw;
    font-size: 3.809524vw;
    line-height: 1.32;
  }

  .task__title {
    grid-row: 2;
    padding: 0 0 5.714286vw;
    font-size: clamp(8.571429vw, 10vw, 10.952381vw);
    line-height: 0.98;
  }

  .task__title span:nth-child(2) {
    margin-left: 10%;
  }

  .task-card__head {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 45.238095vw;
    padding-top: 4.285714vw;
  }

  /* На телефоне номер остаётся частью реестра, но перестаёт забирать
     треть рабочей строки у формулировки. Так карточка читается сверху вниз:
     номер → ситуация → следующий шаг, а не как сжатая версия таблицы. */
  .task-card__head::before {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    padding: 0 3.809524vw;
  }

  .task-card__pain {
    grid-column: 1;
    grid-row: 2;
    padding: 2.380952vw 3.809524vw 4.761905vw;
    border-left: 0;
    font-size: clamp(5.714286vw, 6.8vw, 6.904762vw);
    line-height: 1.04;
  }

  .task-card__foot {
    grid-column: 1;
    grid-row: 3;
    min-height: 15.714286vw;
    height: auto;
    padding: 3.333333vw 3.809524vw;
    border-left: 0;
    border-top: 0.238095vw solid var(--color-light-grid);
  }

  .task-card.is-open .task-card__foot {
    border-color: var(--color-dark-grid);
  }

  .task-card__panel-inner {
    grid-template-columns: 1fr;
  }

  .task-card__lead,
  .task-facts {
    grid-column: 1;
    border-left: 0;
  }

  .task-card__lead {
    padding: 5.714286vw 3.809524vw 8.571429vw;
    font-size: 3.809524vw;
    line-height: 1.36;
  }

  .task-facts__item {
    gap: 3.809524vw;
    padding: 4.761905vw 3.809524vw;
  }

  .task-facts__text {
    font-size: 3.809524vw;
    line-height: 1.35;
  }

}

@media (prefers-reduced-motion: reduce) {
  .task-card,
  .task-card__arrow,
  .task-card__panel,
  .task-card__panel-inner {
    transition: none;
  }
}


  /* source: calm-sprint.css */

/* Третий блок: спокойный продуктовый модуль на общей четырёхколоночной сетке. */

.sprint {
  --sprint-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --sprint-columns: repeat(4, minmax(0, 1fr));

  margin: 0;
  padding: 0 var(--sprint-gutter) clamp(9.52381vw, 4vw, 14.285714vw);
  background: var(--color-bg);
  color: var(--color-white);
}

.sprint__inner {
  position: relative;
  z-index: 1;
}

.sprint__grid-lines {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: grid;
  grid-template-columns: var(--sprint-columns);
  pointer-events: none;
}

.sprint__grid-lines span {
  border-left: 0.238095vw solid var(--color-dark-grid);
}

.sprint__grid-lines span:first-child {
  border-left: 0;
}

.sprint__head {
  display: grid;
  grid-template-columns: var(--sprint-columns);
  grid-template-rows: auto 1fr auto;
  min-height: clamp(147.619048vw, 88svh, 204.761905vw);
  border-bottom: 0.238095vw solid var(--color-dark-grid);
  text-align: left;
}

.sprint__label,
.sprint__head > .pill {
  align-self: start;
  margin-top: clamp(5.714286vw, 3vw, 10vw);
}

.sprint__label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  padding-right: clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1;
  color: var(--color-bg);
}

.sprint__label-num,
.sprint__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.sprint__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
  color: var(--color-white);
}

.sprint__label-name {
  padding-inline: 2.619048vw;
  border: 0.238095vw solid var(--color-bg);
  background: #fff;
  color: var(--color-bg);
}

.sprint__head > .pill {
  grid-column: 4;
  width: fit-content;
  margin-left: clamp(2.857143vw, 1.4vw, 4.761905vw);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sprint__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding: 0 0 clamp(5.714286vw, 3vw, 10vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.sprint__title span {
  display: block;
}

.sprint__title span:last-child {
  margin-left: calc(50% + clamp(4.285714vw, 2vw, 7.142857vw) + 2.857143vw);
  color: var(--color-red);
}

.sprint__note {
  grid-column: 3 / 5;
  grid-row: 3;
  align-self: end;
  max-width: 39ch;
  margin: 0;
  padding: 0 clamp(4.285714vw, 2vw, 7.142857vw) clamp(10vw, 5vw, 17.142857vw);
  font-size: clamp(4.047619vw, 1.35vw, 4.761905vw);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: rgba(255, 255, 255, 0.76);
}

.sprint__cards {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sprint-fact;
}

.sprint__cards::before {
  content: none;
}

.sprint-card {
  display: grid;
  grid-template-columns: var(--sprint-columns);
  min-height: clamp(27.619048vw, 10vw, 35.238095vw);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-top: 0.238095vw solid var(--color-dark-grid);
  border-radius: 0;
  background: transparent;
  color: var(--color-white);
  counter-increment: sprint-fact;
}

.sprint-card:first-child {
  border-top: 0;
}

.sprint-card::before {
  content: "0" counter(sprint-fact);
  grid-column: 1;
  align-self: center;
  padding: 0 clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(7.142857vw, 3vw, 10.952381vw);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-white);
}

.sprint-card .dot {
  display: none;
}

.sprint-card__text {
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  margin: 0;
  border-left: 0.238095vw solid var(--color-dark-grid);
  font-size: clamp(4.047619vw, 1.45vw, 5.238095vw);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.sprint-card__label,
.sprint-card__text > [data-mock] {
  margin: 0;
}

.sprint-card__label {
  grid-column: 1;
  justify-self: start;
  margin-left: clamp(3.809524vw, 2vw, 7.142857vw);
  padding: 1.904762vw 3.095238vw;
  border: 0.238095vw solid rgba(255, 255, 255, 0.26);
  border-radius: 237.857143vw;
  font-size: 2.857143vw;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-white);
}

.sprint-card__text > [data-mock] {
  grid-column: 2 / 4;
  max-width: 47ch;
  padding: clamp(5.714286vw, 2.5vw, 8.571429vw) clamp(3.809524vw, 2vw, 7.142857vw);
}

@media (max-width: 214.285714vw) {
  .sprint {
    --sprint-columns: repeat(2, minmax(0, 1fr));
  }

  .sprint__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .sprint__head {
    min-height: 147.619048vw;
  }

  .sprint__label {
    grid-column: 1;
  }

  .sprint__head > .pill {
    grid-column: 2;
  }

  .sprint__title {
    grid-column: 1 / -1;
    padding-right: 0;
    font-size: clamp(12.857143vw, 10vw, 18.571429vw);
  }

  .sprint__title span:last-child {
    margin-left: 50%;
  }

  .sprint__note {
    grid-column: 1 / -1;
    max-width: 48ch;
    padding-left: 0;
  }

  .sprint-card {
    grid-template-columns: 17.142857vw 1fr;
  }

  .sprint-card__text {
    grid-column: 2;
    grid-template-columns: 1fr 2fr;
  }

  .sprint-card__label {
    grid-column: 1;
  }

  .sprint-card__text > [data-mock] {
    grid-column: 2;
  }
}

@media (max-width: 133.333333vw) {
  .sprint {
    padding-bottom: calc(22.857143vw + env(safe-area-inset-bottom));
  }

  .sprint__head {
    display: grid;
    min-height: auto;
    grid-template-rows: auto;
    row-gap: 0;
    padding-bottom: 11.428571vw;
  }

  .sprint__label,
  .sprint__head > .pill {
    margin-top: 5.714286vw;
  }

  .sprint__label {
    font-size: 0;
    padding-right: 0;
  }

  .sprint__label span {
    font-size: 2.857143vw;
  }

  .sprint__title {
    grid-row: 2;
    margin-top: clamp(17.142857vw, 18vw, 22.857143vw);
    padding-bottom: 7.619048vw;
    /* «Операционный» — самое длинное слово в заголовках секций: кегль
       рассчитан от доступной ширины малого экрана, чтобы строка не
       появляла горизонтальный скролл даже на 76.190476vw. */
    font-size: clamp(7.142857vw, 9.8vw, 9.285714vw);
    line-height: 0.84;
  }

  .sprint__title span:last-child {
    margin-left: 25%;
  }

  .sprint__note {
    grid-row: 3;
    max-width: 34ch;
    padding: 0 0 9.52381vw;
    font-size: 4.047619vw;
    line-height: 1.38;
  }

  /* Мобильный реестр сохраняет сквозные линии секции, но не наследует
     десктопную служебную колонку: длинное пояснение получает всю строку.
     Порядок чтения остаётся тем же — номер, роль, результат. */
  .sprint-card {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 4.285714vw;
  }

  .sprint-card::before {
    grid-column: 1;
    align-self: start;
    padding: 0 3.809524vw;
    font-size: 4.761905vw;
  }

  .sprint-card__text {
    grid-column: 1;
    grid-template-columns: 1fr;
    min-height: 0;
    align-content: start;
    gap: 4.285714vw;
    padding: 2.380952vw 3.809524vw 6.190476vw;
    border-left: 0;
    font-size: 4.52381vw;
    line-height: 1.24;
  }

  .sprint-card__label,
  .sprint-card__text > [data-mock] {
    grid-column: 1;
  }

  .sprint-card__label {
    margin-left: 0;
  }

  .sprint-card__text > [data-mock] {
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sprint *,
  .sprint *::before,
  .sprint *::after {
    transition: none !important;
  }
}


  /* source: calm-steps.css */

/* Четвёртый блок: фиксированный тезис слева и вертикальная карта процесса справа. */

.steps {
  --steps-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --steps-columns: repeat(4, minmax(0, 1fr));

  position: relative;
  padding: 0 var(--steps-gutter);
  overflow: clip;
  background: #fff;
  color: var(--color-bg);
}

.steps__grid-lines {
  position: absolute;
  inset: 0 var(--steps-gutter);
  display: grid;
  grid-template-columns: var(--steps-columns);
  pointer-events: none;
}

.steps__grid-lines span {
  border-left: 0.238095vw solid var(--color-light-grid);
}

.steps__grid-lines span:first-child {
  border-left: 0;
}

.steps__layout {
  position: relative;
  display: grid;
  grid-template-columns: var(--steps-columns);
  border-top: 0.238095vw solid var(--color-light-grid);
  align-items: start;
}

.steps__intro {
  position: sticky;
  top: 0;
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: start;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(12.380952vw, 7vw, 24.761905vw);
  padding: clamp(5.714286vw, 3vw, 10vw) clamp(4.285714vw, 2vw, 7.142857vw) clamp(20.47619vw, 8vw, 28.571429vw) 0;
}

.steps__label {
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  font-size: 2.857143vw;
  line-height: 1;
  color: var(--color-bg);
}

.steps__label-num,
.steps__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.steps__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
  color: var(--color-white);
}

.steps__label-name {
  padding-inline: 2.619048vw;
  border: 0.238095vw solid var(--color-bg);
  background: #fff;
  color: var(--color-bg);
}

.steps__title {
  width: 100%;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(11.904762vw, 4.7vw, 19.52381vw);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.steps__title span {
  display: block;
  white-space: nowrap;
}

.steps__title span:nth-child(2) {
  margin-left: 7%;
}

.steps__title span:last-child {
  margin-left: 18%;
  color: var(--color-red);
}

.steps__list {
  grid-column: 3 / 5;
  grid-row: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: clamp(48.809524vw, 19vw, 66.666667vw);
  border-bottom: 0.238095vw solid var(--color-light-grid);
}

.step__num {
  padding: clamp(5.714286vw, 3vw, 10vw) clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: clamp(6.666667vw, 2.8vw, 10vw);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(4, 10, 10, 0.34);
  font-variant-numeric: tabular-nums;
  transition: color 180ms ease;
}

.step__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7.619048vw;
  margin: 0;
  padding: clamp(5.714286vw, 3vw, 10vw) clamp(3.809524vw, 2vw, 7.142857vw);
  border-left: 0.238095vw solid var(--color-light-grid);
}

.step__title {
  margin: 0;
  font-size: clamp(5.714286vw, 2.35vw, 8.571429vw);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--color-bg);
}

.step__text {
  max-width: 30ch;
  font-size: clamp(3.571429vw, 1.2vw, 4.285714vw);
  line-height: 1.3;
  color: rgba(4, 10, 10, 0.58);
}

.steps.is-focus-ready .step__title,
.steps.is-focus-ready .step__text {
  color: rgba(4, 10, 10, 0.28);
  transition: color 360ms ease;
}

.steps.is-focus-ready .step.is-focus .step__title,
.steps.is-focus-ready .step.is-focus .step__text {
  color: var(--color-bg);
}

.step:hover .step__num {
  color: var(--color-red);
}

.step:last-child {
  border-bottom: 0;
}

@media (max-width: 214.285714vw) {
  .steps {
    --steps-columns: repeat(2, minmax(0, 1fr));
  }

  .steps__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .steps__intro {
    position: static;
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: clamp(85.714286vw, 50svh, 109.52381vw);
    justify-content: space-between;
    gap: 0;
    padding-right: 0;
    padding-bottom: clamp(9.52381vw, 6vw, 15.238095vw);
    border-bottom: 0.238095vw solid var(--color-light-grid);
  }

  .steps__title {
    font-size: clamp(11.428571vw, 9vw, 17.142857vw);
    line-height: 0.88;
  }

  .steps__title span {
    white-space: normal;
  }

  .steps__title span:nth-child(2) {
    margin-left: 10%;
    text-align: left;
  }

  .steps__title span:last-child {
    margin-left: 0;
    text-align: right;
  }

  .steps__list {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .step {
    grid-template-columns: 22.857143vw 1fr;
    min-height: 42.857143vw;
  }

  .step__body {
    gap: 5.238095vw;
  }

  .steps.is-focus-ready .step__title,
  .steps.is-focus-ready .step__text {
    color: var(--color-bg);
  }
}

@media (max-width: 133.333333vw) {
  .steps__intro {
    min-height: 78.571429vw;
    padding-bottom: 8.571429vw;
  }

  .steps__title {
    font-size: clamp(8.095238vw, 9.5vw, 10vw);
  }

  .step {
    grid-template-columns: 10.952381vw 1fr;
    min-height: 0;
  }

  .step__num {
    padding-right: 1.904762vw;
    padding-left: 0;
    font-size: 4.285714vw;
  }

  .step__body {
    gap: 4.285714vw;
    padding-top: 5.238095vw;
    padding-bottom: 5.238095vw;
    padding-right: 3.333333vw;
    padding-left: 3.809524vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step__num,
  .steps.is-focus-ready .step__title,
  .steps.is-focus-ready .step__text {
    transition: none;
  }

  .steps.is-focus-ready .step__title,
  .steps.is-focus-ready .step__text {
    color: var(--color-bg);
  }
}


  /* source: calm-results.css */

/* Пятый блок: измеримый результат как спокойный KPI-реестр. */

.results {
  --results-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --results-columns: repeat(4, minmax(0, 1fr));
  --results-pad: clamp(3.809524vw, 2vw, 7.142857vw);

  position: relative;
  padding: 0 var(--results-gutter);
  overflow: clip;
  background: var(--color-bg);
  color: var(--color-white);
}

.results__grid-lines {
  position: absolute;
  inset: 0 var(--results-gutter);
  display: grid;
  grid-template-columns: var(--results-columns);
  pointer-events: none;
}

.results__grid-lines span {
  border-left: 0.238095vw solid var(--color-dark-grid);
}

.results__grid-lines span:first-child {
  border-left: 0;
}

.results__inner {
  position: relative;
  z-index: 1;
}

.results__head {
  display: grid;
  grid-template-columns: var(--results-columns);
  grid-template-rows: auto 1fr auto;
  min-height: clamp(157.142857vw, 92svh, 214.285714vw);
}

.results__label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  margin-top: clamp(5.714286vw, 3vw, 10vw);
  padding-right: clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1;
}

.results__label-num,
.results__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.results__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
  color: var(--color-white);
}

.results__label-name {
  padding-inline: 2.619048vw;
  border: 0.238095vw solid var(--color-bg);
  background: var(--color-white);
  color: var(--color-bg);
}

.results__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: clamp(5.714286vw, 3vw, 10vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.results__title span {
  display: block;
}

.results__title span:nth-child(2) {
  margin-left: 25%;
}

.results__title span:last-child {
  margin-left: 25%;
  color: var(--color-red);
  text-align: right;
}

.results__intro {
  grid-column: 3 / 5;
  grid-row: 3;
  max-width: 48ch;
  padding: 0 var(--results-pad) clamp(10.47619vw, 5vw, 17.142857vw);
  font-size: clamp(4.047619vw, 1.35vw, 4.761905vw);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: rgba(255, 255, 255, 0.72);
}

.results__metrics {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.results__metrics::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: calc(-1 * var(--results-gutter));
  left: calc(-1 * var(--results-gutter));
  height: 0.238095vw;
  background: var(--color-dark-grid);
  pointer-events: none;
}

.result-metric {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--results-columns);
  min-height: clamp(33.333333vw, 12vw, 42.857143vw);
  align-items: stretch;
}

.result-metric::before,
.result-metric::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--results-gutter));
  left: calc(-1 * var(--results-gutter));
  pointer-events: none;
}

.result-metric::before {
  z-index: -1;
  inset-block: 0;
  background: transparent;
}

.result-metric::after {
  bottom: 0;
  height: 0.238095vw;
  background: var(--color-dark-grid);
}

.result-metric__name,
.result-metric__value,
.result-metric__arrow {
  position: relative;
  z-index: 1;
}

.result-metric__name {
  grid-column: 1;
  align-self: center;
  padding: var(--results-pad);
  font-size: clamp(3.571429vw, 1.25vw, 4.285714vw);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.68);
}

.result-metric__value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.380952vw;
  padding: var(--results-pad);
  border-left: 0.238095vw solid var(--color-dark-grid);
}

.result-metric__value--before {
  grid-column: 2;
}

.result-metric__value--after {
  grid-column: 4;
}

.result-metric__value > span {
  font-size: 2.857143vw;
  line-height: 1;
  color: rgba(255, 255, 255, 0.42);
}

.result-metric__value strong {
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(12.380952vw, 6vw, 21.904762vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
}

.result-metric__value small {
  font: inherit;
}

.result-metric__value--after strong {
  color: var(--color-red);
}

.result-metric__arrow {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 0.238095vw solid var(--color-dark-grid);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(8.095238vw, 3vw, 10.952381vw);
  line-height: 1;
  color: rgba(255, 255, 255, 0.34);
}

.results__foot {
  position: relative;
  display: grid;
  grid-template-columns: var(--results-columns);
  min-height: clamp(35.714286vw, 14vw, 50vw);
  align-items: start;
  padding-top: clamp(7.142857vw, 4vw, 13.809524vw);
  padding-bottom: clamp(15.238095vw, 7vw, 24.761905vw);
}

.results__note-label {
  grid-column: 1;
  width: fit-content;
  margin-left: var(--results-pad);
  padding: 1.904762vw 3.095238vw;
  border: 0.238095vw solid rgba(255, 255, 255, 0.28);
  border-radius: 237.857143vw;
  font-size: 2.857143vw;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
}

.results__foot p {
  grid-column: 3 / 5;
  max-width: 46ch;
  padding-inline: var(--results-pad);
  font-size: clamp(3.571429vw, 1.2vw, 4.285714vw);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 214.285714vw) {
  .results {
    --results-columns: repeat(2, minmax(0, 1fr));
  }

  .results__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .results__head {
    min-height: clamp(100vw, 56svh, 128.571429vw);
  }

  .results__title {
    font-size: clamp(11.428571vw, 9vw, 17.142857vw);
    line-height: 0.88;
  }

  .results__title span:nth-child(2) {
    margin-left: 10%;
  }

  .results__title span:last-child {
    margin-left: 0;
  }

  .results__intro {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-bottom: clamp(7.619048vw, 5vw, 11.428571vw);
  }

  .result-metric {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    min-height: 47.619048vw;
  }

  .result-metric__name {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 0;
  }

  .result-metric__value {
    grid-row: 2;
  }

  .result-metric__value--before {
    grid-column: 1;
    border-left: 0;
  }

  .result-metric__value--after {
    grid-column: 2;
  }

  .result-metric__arrow {
    position: absolute;
    z-index: 2;
    grid-column: auto;
    grid-row: auto;
    top: 58%;
    left: 50%;
    border-left: 0;
    transform: translate(-50%, -50%);
  }

  .results__foot p {
    grid-column: 2;
  }
}

@media (max-width: 133.333333vw) {
  .results__head {
    min-height: 85.714286vw;
  }

  .results__label {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .results__title {
    font-size: clamp(9.047619vw, 10vw, 11.428571vw);
    line-height: 0.9;
  }

  .results__intro {
    padding-right: 0;
    padding-bottom: 7.619048vw;
    font-size: 3.809524vw;
  }

  .result-metric {
    min-height: 43.809524vw;
  }

  .result-metric__name {
    padding-top: 4.761905vw;
    font-size: 3.333333vw;
  }

  .result-metric__value {
    gap: 1.904762vw;
    padding: 4.761905vw 3.809524vw;
  }

  .result-metric__value strong {
    font-size: clamp(10vw, 12vw, 12.857143vw);
  }

  .result-metric__value strong small {
    display: block;
  }

  .result-metric__arrow {
    font-size: 6.666667vw;
  }

  .results__foot {
    grid-template-columns: 1fr;
    gap: 6.666667vw;
    padding-top: 6.666667vw;
    padding-bottom: 17.142857vw;
  }

  .results__note-label,
  .results__foot p {
    grid-column: 1;
  }

  .results__note-label {
    margin-left: 0;
  }

  .results__foot p {
    padding-inline: 0;
  }
}


  /* source: calm-cases.css */

/* Шестой блок: два структурированных кейса вместо длинных отзывов. */

.cases {
  --cases-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --cases-columns: repeat(4, minmax(0, 1fr));
  --cases-pad: clamp(3.809524vw, 2vw, 7.142857vw);

  position: relative;
  padding: 0 var(--cases-gutter);
  overflow: clip;
  background: #fff;
  color: var(--color-bg);
}

.cases__grid-lines {
  position: absolute;
  inset: 0 var(--cases-gutter);
  display: grid;
  grid-template-columns: var(--cases-columns);
  pointer-events: none;
}

.cases__grid-lines span {
  border-left: 0.238095vw solid var(--color-light-grid);
}

.cases__grid-lines span:first-child {
  border-left: 0;
}

.cases__inner {
  position: relative;
  z-index: 1;
}

.cases__head {
  display: grid;
  grid-template-columns: var(--cases-columns);
  grid-template-rows: auto 1fr auto;
  min-height: clamp(157.142857vw, 92svh, 214.285714vw);
}

.cases__label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  margin-top: clamp(5.714286vw, 3vw, 10vw);
  padding-right: clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1;
}

.cases__label-num,
.cases__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.cases__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
  color: #fff;
}

.cases__label-name {
  padding-inline: 2.857143vw;
  border: 0.238095vw solid var(--color-bg);
  background: #fff;
}

.cases__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: clamp(5.714286vw, 3vw, 10vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.cases__title span {
  display: block;
}

.cases__title span:nth-child(2) {
  margin-left: 25%;
}

.cases__title span:last-child {
  margin-left: calc(50% + var(--cases-pad));
  color: var(--color-red);
  text-align: left;
}

.cases__intro {
  grid-column: 3 / 5;
  grid-row: 3;
  max-width: 50ch;
  padding: 0 var(--cases-pad) clamp(10.47619vw, 5vw, 17.142857vw);
  font-size: clamp(4.047619vw, 1.35vw, 4.761905vw);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: rgba(2, 10, 10, 0.64);
}

.cases__list {
  position: relative;
}

.cases__list::before,
.case::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--cases-gutter));
  left: calc(-1 * var(--cases-gutter));
  height: 0.238095vw;
  background: var(--color-light-grid);
  pointer-events: none;
}

.cases__list::before {
  z-index: 2;
  top: 0;
}

.case {
  position: relative;
}

.case::after {
  bottom: 0;
}

.case__summary {
  position: relative;
  display: grid;
  grid-template-columns: var(--cases-columns);
  min-height: clamp(30.47619vw, 11vw, 40.47619vw);
  align-items: center;
  cursor: pointer;
  list-style: none;
  transition: background-color 180ms ease;
}

.case__summary::-webkit-details-marker {
  display: none;
}

.case__summary:focus {
  outline: none;
}

.case__summary:focus-visible {
  outline: 0.47619vw solid var(--color-red);
  outline-offset: -0.47619vw;
}

.case__summary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--cases-gutter));
  background: transparent;
  transition: background-color 180ms ease;
}

.case__summary:hover::before {
  background: #f5f5f5;
}

.case__num {
  grid-column: 1;
  align-self: start;
  padding: var(--cases-pad);
  font-size: 2.857143vw;
  color: rgba(2, 10, 10, 0.44);
}

.case__name {
  grid-column: 2 / 4;
  padding: var(--cases-pad);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(10.952381vw, 6.2vw, 22.857143vw);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.case__shift {
  grid-column: 4;
  align-self: end;
  padding: var(--cases-pad) clamp(15.238095vw, 6vw, 22.380952vw) var(--cases-pad) var(--cases-pad);
  font-size: clamp(3.333333vw, 1.05vw, 3.809524vw);
  line-height: 1.25;
  color: rgba(2, 10, 10, 0.56);
}

.case__toggle {
  position: absolute;
  right: var(--cases-pad);
  width: 9.047619vw;
  height: 9.047619vw;
  border: 0.238095vw solid rgba(2, 10, 10, 0.3);
  border-radius: 50%;
}

.case__toggle::before,
.case__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.857143vw;
  height: 0.238095vw;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}

.case__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.case[open] .case__toggle {
  border-color: var(--color-red);
  background: var(--color-red);
  color: #fff;
}

.case[open] .case__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.case__story {
  display: grid;
  grid-template-columns: var(--cases-columns);
}

.case__stage {
  min-height: clamp(64.285714vw, 24vw, 85.714286vw);
  padding: var(--cases-pad);
  border-left: 0.238095vw solid var(--color-light-grid);
}

.case__stage:first-child {
  border-left: 0;
}

.case__stage-label {
  margin-bottom: clamp(12.380952vw, 6vw, 21.904762vw);
  font-size: 2.857143vw;
  line-height: 1;
  color: rgba(2, 10, 10, 0.44);
}

.case__stage > p:last-child {
  max-width: 27ch;
  font-size: clamp(4.047619vw, 1.35vw, 5vw);
  line-height: 1.26;
  letter-spacing: -0.018em;
}

.case__stage--result {
  background: var(--color-red);
  color: #fff;
}

.case__stage--result .case__stage-label {
  color: rgba(255, 255, 255, 0.66);
}

.case:last-child {
  margin-bottom: clamp(19.047619vw, 9vw, 33.333333vw);
}

@media (max-width: 214.285714vw) {
  .cases {
    --cases-columns: repeat(2, minmax(0, 1fr));
  }

  .cases__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .cases__head {
    min-height: clamp(100vw, 56svh, 128.571429vw);
  }

  .cases__title {
    font-size: clamp(11.428571vw, 9vw, 17.142857vw);
    line-height: 0.88;
  }

  .cases__title span:nth-child(2) {
    margin-left: 10%;
  }

  .cases__intro {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-bottom: clamp(7.619048vw, 5vw, 11.428571vw);
  }

  .case__summary {
    grid-template-rows: auto auto;
    padding-block: 4.285714vw;
  }

  .case__num {
    grid-column: 1;
    grid-row: 1;
  }

  .case__name {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-left: calc(25% + var(--cases-pad));
    padding-right: 17.142857vw;
    font-size: clamp(10.47619vw, 9vw, 17.142857vw);
  }

  .case__shift {
    grid-column: 2;
    grid-row: 2;
    padding-right: 17.142857vw;
  }

  .case__story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case__stage:nth-child(odd) {
    border-left: 0;
  }

  .case__stage:nth-child(n + 3) {
    border-top: 0.238095vw solid var(--color-light-grid);
  }

  .case__stage {
    min-height: 50vw;
  }

  .case__stage-label {
    margin-bottom: 8.571429vw;
  }
}

@media (max-width: 133.333333vw) {
  .cases__head {
    min-height: 85.714286vw;
  }

  .cases__label {
    grid-column: 1 / -1;
  }

  .cases__title {
    font-size: clamp(9.047619vw, 10vw, 11.428571vw);
    line-height: 0.9;
  }

  .cases__title span:last-child {
    margin-left: 0;
  }

  .cases__intro {
    padding-right: 0;
    padding-bottom: 7.619048vw;
    font-size: 3.809524vw;
  }

  .case__summary {
    grid-template-rows: auto auto auto;
    min-height: 40.952381vw;
    align-items: start;
  }

  .case__num {
    grid-row: 1;
    padding-bottom: 0;
  }

  .case__name {
    grid-row: 2;
    padding-left: var(--cases-pad);
    padding-top: 2.380952vw;
    padding-bottom: 2.380952vw;
    font-size: clamp(8.095238vw, 10vw, 10.47619vw);
  }

  .case__shift {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 0;
    padding-left: var(--cases-pad);
  }

  .case__toggle {
    top: 15.47619vw;
    right: 3.809524vw;
    width: 8.095238vw;
    height: 8.095238vw;
  }

  .case__story {
    grid-template-columns: 1fr;
  }

  .case__stage {
    min-height: 0;
    padding: 5.238095vw 3.809524vw;
    border-top: 0.238095vw solid var(--color-light-grid);
    border-left: 0;
  }

  .case__stage-label {
    margin-bottom: 6.666667vw;
  }

  .case:last-child {
    margin-bottom: 15.238095vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case__summary,
  .case__summary::before,
  .case__toggle::before,
  .case__toggle::after {
    transition: none;
  }
}


  /* source: calm-products.css */

/* Седьмой блок: продуктовая лестница как полноширинный реестр глубины работы. */

.products {
  --products-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --products-columns: repeat(4, minmax(0, 1fr));
  --products-pad: clamp(3.809524vw, 2vw, 7.142857vw);

  position: relative;
  padding: 0 var(--products-gutter);
  overflow: clip;
  background: var(--color-bg);
  color: var(--color-white);
}

.products__grid-lines {
  position: absolute;
  inset: 0 var(--products-gutter);
  display: grid;
  grid-template-columns: var(--products-columns);
  pointer-events: none;
}

.products__grid-lines span {
  border-left: 0.238095vw solid var(--color-dark-grid);
}

.products__grid-lines span:first-child {
  border-left: 0;
}

.products__inner {
  position: relative;
  z-index: 1;
}

.products__head {
  display: grid;
  grid-template-columns: var(--products-columns);
  grid-template-rows: auto 1fr auto;
  min-height: clamp(157.142857vw, 92svh, 214.285714vw);
}

.products__label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  margin-top: clamp(5.714286vw, 3vw, 10vw);
  padding-right: clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1;
}

.products__label-num,
.products__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.products__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
}

.products__label-name {
  padding-inline: 2.857143vw;
  border: 0.238095vw solid var(--color-bg);
  background: var(--color-white);
  color: var(--color-bg);
}

.products__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: clamp(5.714286vw, 3vw, 10vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.products__title span {
  display: block;
}

.products__title span:nth-child(2) {
  margin-left: 25%;
}

.products__title span:last-child {
  margin-left: calc(50% + var(--products-pad));
  color: var(--color-red);
  text-align: left;
}

.products__intro {
  grid-column: 3 / 5;
  grid-row: 3;
  max-width: 50ch;
  padding: 0 var(--products-pad) clamp(10.47619vw, 5vw, 17.142857vw);
  font-size: clamp(4.047619vw, 1.35vw, 4.761905vw);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: rgba(255, 255, 255, 0.7);
}

.products__levels {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.products__levels::before,
.product-level::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--products-gutter));
  left: calc(-1 * var(--products-gutter));
  height: 0.238095vw;
  background: var(--color-dark-grid);
  pointer-events: none;
}

.products__levels::before {
  z-index: 2;
  top: 0;
}

.product-level {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--products-columns);
  min-height: clamp(35.714286vw, 12vw, 42.857143vw);
  align-items: stretch;
}

.product-level::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--products-gutter));
  background: transparent;
}

.product-level::after {
  bottom: 0;
}

.product-level__rule {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: calc(-1 * var(--products-gutter));
  width: calc((100% + (2 * var(--products-gutter))) * var(--level));
  height: 0.47619vw;
  background: var(--color-red);
  pointer-events: none;
}

.products.is-lines-ready .product-level__rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.products.is-lines-preparing .product-level__rule {
  transition: none;
}

.products.is-lines-ready .product-level.is-line-visible .product-level__rule {
  transform: scaleX(1);
}

.product-level__depth,
.product-level__name,
.product-level__when,
.product-level__term {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  margin: 0;
  padding: var(--products-pad);
}

.product-level__depth {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3.809524vw;
}

.product-level__num {
  font-size: 2.857143vw;
  color: rgba(255, 255, 255, 0.38);
}

.product-level__verb {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  padding-inline: 2.857143vw;
  border: 0.238095vw solid rgba(255, 255, 255, 0.28);
  border-radius: 237.857143vw;
  font-size: 2.857143vw;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.76);
}

.product-level__name {
  grid-column: 2;
  display: flex;
  align-items: center;
  border-left: 0.238095vw solid var(--color-dark-grid);
  font-family: "NAMU Display", Arial, sans-serif;
  min-width: 0;
  font-size: clamp(5.238095vw, 1.85vw, 7.142857vw);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  overflow-wrap: normal;
}

.product-level__when {
  grid-column: 3;
  display: flex;
  align-items: center;
  border-left: 0.238095vw solid var(--color-dark-grid);
  font-size: clamp(3.571429vw, 1.2vw, 4.285714vw);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.68);
}

.product-level__term {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.619048vw;
  border-left: 0.238095vw solid var(--color-dark-grid);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(5.714286vw, 2.2vw, 8.095238vw);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.product-level__term span {
  font-family: Arial, sans-serif;
  font-size: 2.857143vw;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.4);
}

.products__foot {
  display: grid;
  grid-template-columns: var(--products-columns);
  min-height: clamp(35.714286vw, 14vw, 50vw);
  padding-top: clamp(7.619048vw, 4vw, 13.809524vw);
  padding-bottom: clamp(15.238095vw, 7vw, 24.761905vw);
}

.products__foot p {
  grid-column: 3 / 5;
  max-width: 45ch;
  padding-inline: var(--products-pad);
  font-size: clamp(3.571429vw, 1.2vw, 4.285714vw);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 214.285714vw) {
  .products {
    --products-columns: repeat(2, minmax(0, 1fr));
  }

  .products__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .products__head {
    min-height: clamp(100vw, 56svh, 128.571429vw);
  }

  .products__title {
    font-size: clamp(11.428571vw, 9vw, 17.142857vw);
    line-height: 0.88;
  }

  .products__title span:nth-child(2) {
    margin-left: 10%;
  }

  .products__intro {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-bottom: clamp(7.619048vw, 5vw, 11.428571vw);
  }

  .product-level {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    min-height: 61.904762vw;
  }

  .product-level__depth {
    grid-column: 1;
    grid-row: 1;
  }

  .product-level__term {
    grid-column: 2;
    grid-row: 1;
    border-left: 0.238095vw solid var(--color-dark-grid);
  }

  .product-level__name {
    grid-column: 1 / -1;
    grid-row: 2;
    border-left: 0;
    font-size: clamp(8.095238vw, 6.2vw, 11.904762vw);
  }

  .product-level__when {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 0;
    border-left: 0;
  }

  .products__foot p {
    grid-column: 2;
  }
}

@media (max-width: 133.333333vw) {
  .products__head {
    min-height: 85.714286vw;
  }

  .products__label {
    grid-column: 1 / -1;
  }

  .products__title {
    font-size: clamp(9.047619vw, 10vw, 11.428571vw);
    line-height: 0.9;
  }

  .products__title span:last-child {
    margin-left: 0;
  }

  .products__intro {
    padding-right: 0;
    padding-bottom: 7.619048vw;
    font-size: 3.809524vw;
  }

  .product-level {
    min-height: 61.904762vw;
  }

  .product-level__depth,
  .product-level__name,
  .product-level__when,
  .product-level__term {
    padding: 5.714286vw 3.809524vw;
  }

  .product-level__depth {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.904762vw;
  }

  .product-level__name {
    font-size: clamp(7.142857vw, 8vw, 8.571429vw);
  }

  .product-level__when {
    padding-top: 1.904762vw;
    padding-bottom: 5.714286vw;
    font-size: 3.571429vw;
  }

  .product-level__term {
    font-size: 5.952381vw;
  }

  .products__foot {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 6.666667vw;
    padding-bottom: 17.142857vw;
  }

  .products__foot p {
    grid-column: 1;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .products.is-lines-ready .product-level__rule {
    transform: scaleX(1);
    transition: none;
  }
}


  /* source: calm-why.css */

/* Восьмой блок: управленческий опыт и его практический смысл для клиента. */

.why {
  --why-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --why-columns: repeat(4, minmax(0, 1fr));
  --why-pad: clamp(3.809524vw, 2vw, 7.142857vw);

  position: relative;
  padding: 0 var(--why-gutter);
  overflow: clip;
  background: #fff;
  color: var(--color-bg);
}

.why__grid-lines {
  position: absolute;
  inset: 0 var(--why-gutter);
  display: grid;
  grid-template-columns: var(--why-columns);
  pointer-events: none;
}

.why__grid-lines span {
  border-left: 0.238095vw solid var(--color-light-grid);
}

.why__grid-lines span:first-child {
  border-left: 0;
}

.why__inner {
  position: relative;
  z-index: 1;
}

.why__head {
  display: grid;
  grid-template-columns: var(--why-columns);
  grid-template-rows: auto 1fr auto;
  min-height: clamp(157.142857vw, 92svh, 214.285714vw);
}

.why__label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  margin-top: clamp(5.714286vw, 3vw, 10vw);
  padding-right: clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1;
}

.why__label-num,
.why__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.why__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
  color: #fff;
}

.why__label-name {
  padding-inline: 2.857143vw;
  border: 0.238095vw solid var(--color-bg);
  background: #fff;
}

.why__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: clamp(5.714286vw, 3vw, 10vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.why__title span {
  display: block;
}

.why__title span:nth-child(2) {
  margin-left: 25%;
}

.why__title span:last-child {
  color: var(--color-red);
  text-align: right;
}

.why__intro {
  grid-column: 3 / 5;
  grid-row: 3;
  max-width: 50ch;
  padding: 0 var(--why-pad) clamp(10.47619vw, 5vw, 17.142857vw);
  font-size: clamp(4.047619vw, 1.35vw, 4.761905vw);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: rgba(2, 10, 10, 0.64);
}

.why__proof {
  position: relative;
  display: grid;
  grid-template-columns: var(--why-columns);
  margin-inline: calc(-1 * var(--why-gutter));
  background: #fff;
}

.why__proof::before,
.why__proof::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  left: 0;
  height: 0.238095vw;
  background: var(--color-light-grid);
  pointer-events: none;
}

.why__proof::before {
  top: 0;
}

.why__proof::after {
  bottom: 0;
}

.why__proof-lead,
.why__proof-item {
  box-sizing: border-box;
  min-height: clamp(78.571429vw, 28vw, 100vw);
  padding: var(--why-pad);
}

.why__proof-lead {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-red);
  color: #fff;
}

.why__proof-lead strong {
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(17.619048vw, 8vw, 29.047619vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.05em;
}

.why__proof-lead p {
  max-width: 24ch;
  font-size: clamp(3.571429vw, 1.2vw, 4.285714vw);
  line-height: 1.25;
}

.why__proof-lead p span {
  display: block;
  margin-bottom: 1.666667vw;
  font-size: 2.857143vw;
  color: rgba(255, 255, 255, 0.68);
}

.why__proof-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 0.238095vw solid var(--color-light-grid);
}

.why__proof-num {
  font-size: 2.857143vw;
  color: rgba(2, 10, 10, 0.42);
}

.why__proof-item h3 {
  max-width: 14ch;
  margin: 0 0 clamp(4.761905vw, 2.2vw, 8.095238vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(6.428571vw, 2.4vw, 9.047619vw);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.why__proof-item h3 span {
  display: block;
}

.why__proof-item p {
  max-width: 27ch;
  margin: 0;
  font-size: clamp(3.571429vw, 1.15vw, 4.047619vw);
  line-height: 1.3;
  color: rgba(2, 10, 10, 0.62);
}

@media (min-width: 214.52381vw) {
  .why__proof {
    margin-inline: 0;
  }

  .why__proof::before,
  .why__proof::after {
    right: calc(-1 * var(--why-gutter));
    left: calc(-1 * var(--why-gutter));
  }

  .why__proof-lead,
  .why__proof-item:last-child {
    position: relative;
  }

  .why__proof-lead::before,
  .why__proof-item:last-child::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--why-gutter);
  }

  .why__proof-lead::before {
    right: 100%;
    background: var(--color-red);
  }

  .why__proof-item:last-child::after {
    left: 100%;
    background: #fff;
  }
}

@media (max-width: 214.285714vw) {
  .why {
    --why-columns: repeat(2, minmax(0, 1fr));
  }

  .why__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .why__head {
    min-height: clamp(100vw, 56svh, 128.571429vw);
  }

  .why__title {
    font-size: clamp(11.428571vw, 9vw, 17.142857vw);
    line-height: 0.88;
  }

  .why__title span:nth-child(2) {
    margin-left: 10%;
  }

  .why__intro {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-bottom: clamp(7.619048vw, 5vw, 11.428571vw);
  }

  .why__proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why__proof-lead,
  .why__proof-item {
    min-height: 66.666667vw;
  }

  .why__proof-item:nth-child(3) {
    border-left: 0;
    border-top: 0.238095vw solid var(--color-light-grid);
  }

  .why__proof-item:nth-child(4) {
    border-top: 0.238095vw solid var(--color-light-grid);
  }
}

@media (max-width: 133.333333vw) {
  .why__head {
    min-height: 85.714286vw;
  }

  .why__label {
    grid-column: 1 / -1;
  }

  .why__title {
    font-size: clamp(9.047619vw, 10vw, 11.428571vw);
    line-height: 0.9;
  }

  .why__intro {
    padding-right: 0;
    padding-bottom: 7.619048vw;
    font-size: 3.809524vw;
  }

  .why__proof {
    grid-template-columns: 1fr;
  }

  .why__proof-lead {
    min-height: 52.380952vw;
    padding: 5.238095vw 3.809524vw;
  }

  .why__proof-item {
    min-height: 47.619048vw;
    padding: 5.238095vw 3.809524vw;
  }

  .why__proof-lead,
  .why__proof-item {
    grid-column: 1;
  }

  .why__proof-item {
    border-top: 0.238095vw solid var(--color-light-grid);
    border-left: 0;
  }

  .why__proof-item h3 {
    font-size: clamp(6.666667vw, 8vw, 8.571429vw);
    margin-bottom: 3.809524vw;
  }
}


  /* source: calm-team.css */

/* Девятый блок: партнёры через релевантную клиенту экспертизу. */

.team {
  --team-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --team-columns: repeat(4, minmax(0, 1fr));
  --team-pad: clamp(3.809524vw, 2vw, 7.142857vw);

  position: relative;
  padding: 0 var(--team-gutter);
  overflow: clip;
  background: var(--color-bg);
  color: var(--color-white);
}

.team__grid-lines {
  position: absolute;
  inset: 0 var(--team-gutter);
  display: grid;
  grid-template-columns: var(--team-columns);
  pointer-events: none;
}

.team__grid-lines span {
  border-left: 0.238095vw solid var(--color-dark-grid);
}

.team__grid-lines span:first-child {
  border-left: 0;
}

.team__inner {
  position: relative;
  z-index: 1;
}

.team__head {
  display: grid;
  grid-template-columns: var(--team-columns);
  grid-template-rows: auto 1fr auto;
  min-height: clamp(157.142857vw, 92svh, 214.285714vw);
}

.team__label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  margin-top: clamp(5.714286vw, 3vw, 10vw);
  padding-right: clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1;
}

.team__label-num,
.team__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.team__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
}

.team__label-name {
  padding-inline: 2.857143vw;
  border: 0.238095vw solid var(--color-bg);
  background: var(--color-white);
  color: var(--color-bg);
}

.team__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: clamp(5.714286vw, 3vw, 10vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.team__title span {
  display: block;
}

.team__title span:nth-child(2) {
  margin-left: 25%;
}

.team__title span:last-child {
  color: var(--color-red);
  text-align: right;
}

.team__intro {
  grid-column: 3 / 5;
  grid-row: 3;
  max-width: 50ch;
  padding: 0 var(--team-pad) clamp(10.47619vw, 5vw, 17.142857vw);
  font-size: clamp(4.047619vw, 1.35vw, 4.761905vw);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: rgba(255, 255, 255, 0.7);
}

.team__people {
  position: relative;
  display: grid;
  grid-template-columns: var(--team-gutter) repeat(4, minmax(0, 1fr)) var(--team-gutter);
  margin-inline: calc(-1 * var(--team-gutter));
}

.team__people::before,
.team__people::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: calc(-1 * var(--team-gutter));
  left: calc(-1 * var(--team-gutter));
  height: 0.238095vw;
  background: var(--color-dark-grid);
  pointer-events: none;
}

.team__people::before {
  top: 0;
}

.team__people::after {
  bottom: 0;
}

.team__lead,
.team-person {
  min-width: 0;
  min-height: clamp(140.47619vw, 48vw, 171.428571vw);
}

.team__lead {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--team-pad);
  background: var(--color-red);
}

.team__lead-num {
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(18.095238vw, 8vw, 29.047619vw);
  line-height: 0.8;
  letter-spacing: -0.05em;
}

.team__lead h3 {
  margin: 0 0 3.809524vw;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(7.619048vw, 3vw, 11.428571vw);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.team__lead p {
  max-width: 25ch;
  margin: 0;
  font-size: clamp(3.571429vw, 1.15vw, 4.047619vw);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.76);
}

.team-person {
  display: grid;
  grid-template-rows: auto 1fr;
  border-left: 0.238095vw solid var(--color-dark-grid);
}

.team-person:nth-child(2) {
  grid-column: 3;
}

.team-person:nth-child(3) {
  grid-column: 4;
}

.team-person:nth-child(4) {
  grid-column: 5 / 7;
}

.team-person__photo {
  position: relative;
  width: 100%;
  height: clamp(61.904762vw, 22vw, 78.571429vw);
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  background: #e8e5e3;
}

.team-person__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.03);
}

.team-person__body {
  display: flex;
  flex-direction: column;
  min-height: clamp(61.904762vw, 22vw, 78.571429vw);
  padding: var(--team-pad);
}

.team-person__num {
  margin-bottom: auto;
  font-size: 2.857143vw;
  color: rgba(255, 255, 255, 0.38);
}

.team-person__body h3 {
  margin: 0 0 4.285714vw;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(6.190476vw, 2.2vw, 8.095238vw);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.team-person__body h3 span {
  display: block;
}

.team-person__body p {
  margin: 0;
  font-size: clamp(3.333333vw, 1.05vw, 3.809524vw);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 214.285714vw) {
  .team {
    --team-columns: repeat(2, minmax(0, 1fr));
  }

  .team__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .team__head {
    min-height: clamp(100vw, 56svh, 128.571429vw);
  }

  .team__title {
    font-size: clamp(11.428571vw, 9vw, 17.142857vw);
    line-height: 0.88;
  }

  .team__title span:nth-child(2) {
    margin-left: 10%;
  }

  .team__intro {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-bottom: clamp(7.619048vw, 5vw, 11.428571vw);
  }

  .team__people {
    grid-template-columns: var(--team-gutter) repeat(2, minmax(0, 1fr)) var(--team-gutter);
  }

  .team__lead {
    grid-column: 1 / 3;
  }

  .team-person:nth-child(2) {
    grid-column: 3 / 5;
  }

  .team-person:nth-child(3) {
    grid-column: 1 / 3;
  }

  .team-person:nth-child(4) {
    grid-column: 3 / 5;
  }

  .team__lead,
  .team-person {
    min-height: 123.809524vw;
  }

  .team-person:nth-child(3) {
    border-top: 0.238095vw solid var(--color-dark-grid);
    border-left: 0;
  }

  .team-person:nth-child(4) {
    border-top: 0.238095vw solid var(--color-dark-grid);
  }
}

@media (max-width: 133.333333vw) {
  .team__head {
    min-height: 85.714286vw;
  }

  .team__label {
    grid-column: 1 / -1;
  }

  .team__title {
    font-size: clamp(9.047619vw, 10vw, 11.428571vw);
    line-height: 0.9;
  }

  .team__intro {
    padding-right: 0;
    padding-bottom: 7.619048vw;
    font-size: 3.809524vw;
  }

  .team__people {
    grid-template-columns: var(--team-gutter) minmax(0, 1fr) var(--team-gutter);
  }

  .team__lead,
  .team-person:nth-child(2),
  .team-person:nth-child(3),
  .team-person:nth-child(4) {
    grid-column: 1 / -1;
  }

  .team__lead {
    min-height: 57.142857vw;
    padding: 5.238095vw 3.809524vw;
  }

  .team-person {
    grid-template-columns: 42% 58%;
    grid-template-rows: 1fr;
    min-height: 54.761905vw;
    border-top: 0.238095vw solid var(--color-dark-grid);
    border-left: 0;
  }

  .team-person__photo {
    height: 100%;
    aspect-ratio: auto;
  }

  .team-person__body {
    min-height: 54.761905vw;
    padding: 4.285714vw 3.809524vw;
  }

  .team-person__body h3 {
    font-size: clamp(5.47619vw, 6.5vw, 6.904762vw);
  }

  .team-person__body p {
    font-size: 3.095238vw;
  }
}


  /* source: calm-telegram.css */

/* Десятый блок: Telegram как витрина мышления, а не ссылка в футере. */

.telegram {
  --telegram-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --telegram-columns: repeat(4, minmax(0, 1fr));
  --telegram-pad: clamp(3.809524vw, 2vw, 7.142857vw);

  position: relative;
  padding: 0 var(--telegram-gutter);
  overflow: clip;
  background: #fff;
  color: var(--color-bg);
}

.telegram__grid-lines {
  position: absolute;
  inset: 0 var(--telegram-gutter);
  display: grid;
  grid-template-columns: var(--telegram-columns);
  pointer-events: none;
}

.telegram__grid-lines span {
  border-left: 0.238095vw solid var(--color-light-grid);
}

.telegram__grid-lines span:first-child {
  border-left: 0;
}

.telegram__inner {
  position: relative;
  z-index: 1;
}

.telegram__head {
  display: grid;
  grid-template-columns: var(--telegram-columns);
  grid-template-rows: auto 1fr auto;
  min-height: clamp(157.142857vw, 92svh, 214.285714vw);
}

.telegram__label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.952381vw;
  margin-top: clamp(5.714286vw, 3vw, 10vw);
  padding-right: clamp(2.857143vw, 1.4vw, 4.761905vw);
  font-size: 2.857143vw;
  line-height: 1;
}

.telegram__label-num,
.telegram__label-name {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  border-radius: 237.857143vw;
  white-space: nowrap;
}

.telegram__label-num {
  min-width: 10.952381vw;
  padding-inline: 2.857143vw;
  background: var(--color-red);
  color: #fff;
}

.telegram__label-name {
  padding-inline: 2.857143vw;
  border: 0.238095vw solid var(--color-bg);
  background: #fff;
}

.telegram__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: clamp(5.714286vw, 3vw, 10vw);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.telegram__title span {
  display: block;
}

.telegram__title span:nth-child(2) {
  margin-left: 25%;
}

.telegram__title span:last-child {
  margin-left: calc(50% + var(--telegram-pad));
  color: var(--color-red);
  text-align: left;
}

.telegram__intro {
  grid-column: 3 / 5;
  grid-row: 3;
  max-width: 48ch;
  padding: 0 var(--telegram-pad) clamp(10.47619vw, 5vw, 17.142857vw);
  font-size: clamp(4.047619vw, 1.35vw, 4.761905vw);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: rgba(2, 10, 10, 0.64);
}

.telegram__posts {
  position: relative;
  margin-inline: calc(-1 * var(--telegram-gutter));
}

.telegram__posts::before,
.telegram-post::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 0.238095vw;
  background: var(--color-light-grid);
  pointer-events: none;
}

.telegram__posts::before {
  z-index: 2;
  top: 0;
}

.telegram-post {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--telegram-gutter) repeat(4, minmax(0, 1fr)) var(--telegram-gutter);
  min-height: clamp(33.333333vw, 12vw, 42.857143vw);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.telegram-post::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: transparent;
  transition: background-color 180ms ease;
}

.telegram-post::after {
  bottom: 0;
}

.telegram-post:hover::before {
  background: #f5f5f5;
}

.telegram-post:focus {
  outline: none;
}

.telegram-post:focus-visible {
  outline: 0.47619vw solid var(--color-red);
  outline-offset: -0.47619vw;
}

.telegram-post__tag,
.telegram-post h3,
.telegram-post__action {
  box-sizing: border-box;
  margin: 0;
  padding: var(--telegram-pad);
}

.telegram-post__tag {
  grid-column: 1 / 3;
  align-self: start;
  width: fit-content;
  margin: var(--telegram-pad);
  padding: 1.904762vw 2.857143vw;
  border: 0.238095vw solid rgba(2, 10, 10, 0.28);
  border-radius: 237.857143vw;
  font-size: 2.857143vw;
  line-height: 1;
}

.telegram-post h3 {
  grid-column: 3 / 5;
  border-left: 0.238095vw solid var(--color-light-grid);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(6.666667vw, 2.8vw, 10.47619vw);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.telegram-post:hover h3 {
  color: var(--color-red);
}

.telegram-post__action {
  grid-column: 5 / 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  border-left: 0.238095vw solid var(--color-light-grid);
  font-size: clamp(3.333333vw, 1.1vw, 3.809524vw);
}

.telegram-post__action span {
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(6.666667vw, 2.4vw, 9.047619vw);
  line-height: 1;
  transition: transform 180ms ease;
}

.telegram-post:hover .telegram-post__action span {
  transform: translate(0.952381vw, -0.952381vw);
}

.telegram__cta {
  display: grid;
  grid-template-columns: var(--telegram-gutter) repeat(4, minmax(0, 1fr)) var(--telegram-gutter);
  min-height: clamp(52.380952vw, 20vw, 73.809524vw);
  align-items: center;
  margin-inline: calc(-1 * var(--telegram-gutter));
  margin-bottom: clamp(19.047619vw, 9vw, 33.333333vw);
  background: var(--color-red);
  color: #fff;
  text-decoration: none;
}

.telegram__cta > span:first-child {
  grid-column: 1 / 5;
  padding: var(--telegram-pad);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(10vw, 5vw, 18.095238vw);
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.telegram__cta-icon {
  grid-column: 5 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-left: 0.238095vw solid rgba(255, 255, 255, 0.28);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 6vw, 21.904762vw);
}

.telegram__cta-icon > span {
  display: block;
  transition: transform 180ms ease;
}

.telegram__cta:hover .telegram__cta-icon > span {
  transform: translate(1.666667vw, -1.666667vw);
}

.telegram__cta:focus {
  outline: none;
}

.telegram__cta:focus-visible {
  outline: 0.47619vw solid var(--color-bg);
  outline-offset: -1.190476vw;
}

@media (max-width: 214.285714vw) {
  .telegram {
    --telegram-columns: repeat(2, minmax(0, 1fr));
  }

  .telegram__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .telegram__head {
    min-height: clamp(100vw, 56svh, 128.571429vw);
  }

  .telegram__title {
    font-size: clamp(11.428571vw, 9vw, 17.142857vw);
    line-height: 0.88;
  }

  .telegram__title span:nth-child(2) {
    margin-left: 10%;
  }

  .telegram__title span:last-child {
    margin-left: 0;
  }

  .telegram__intro {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-bottom: clamp(7.619048vw, 5vw, 11.428571vw);
  }

  .telegram-post {
    grid-template-columns: var(--telegram-gutter) repeat(2, minmax(0, 1fr)) var(--telegram-gutter);
    grid-template-rows: auto 1fr;
    min-height: 47.619048vw;
  }

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

  .telegram-post h3 {
    grid-column: 1 / -1;
    grid-row: 2;
    border-left: 0;
  }

  .telegram-post__action {
    grid-column: 3 / 5;
    grid-row: 1;
    align-self: stretch;
  }

  .telegram__cta {
    grid-template-columns: var(--telegram-gutter) repeat(2, minmax(0, 1fr)) var(--telegram-gutter);
  }

  .telegram__cta > span:first-child {
    grid-column: 1 / 3;
  }

  .telegram__cta-icon {
    grid-column: 3 / 5;
  }
}

@media (max-width: 133.333333vw) {
  .telegram__head {
    min-height: 100vw;
  }

  .telegram__label {
    grid-column: 1 / -1;
  }

  .telegram__title {
    font-size: clamp(9.047619vw, 10vw, 11.428571vw);
    line-height: 0.9;
  }

  .telegram__intro {
    padding-right: 7.619048vw;
    padding-bottom: 11.428571vw;
    font-size: 3.809524vw;
  }

  .telegram-post {
    min-height: 52.380952vw;
    align-items: start;
  }

  .telegram-post__tag {
    margin: 5.714286vw 3.809524vw 0;
  }

  .telegram-post h3 {
    padding: 7.142857vw 7.619048vw 9.52381vw 3.809524vw;
    font-size: clamp(5.714286vw, 6.6vw, 6.666667vw);
    line-height: 1.02;
    letter-spacing: -0.025em;
  }

  .telegram-post__action {
    padding: 5.714286vw 7.619048vw 0 3.809524vw;
    font-size: 3.095238vw;
  }

  .telegram__cta {
    min-height: 40.47619vw;
    margin-top: 7.619048vw;
    margin-bottom: 20.952381vw;
  }

  .telegram__cta > span:first-child {
    padding: 4.285714vw 7.619048vw 4.285714vw 3.809524vw;
    font-size: clamp(6.904762vw, 8vw, 9.047619vw);
  }

  .telegram__cta-icon {
    font-size: 12.380952vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-post::before,
  .telegram-post h3,
  .telegram-post__action span,
  .telegram__cta-icon > span {
    transition: none;
  }
}


  /* source: calm-mobile-titles.css */

/* Единый межстрочный интервал заголовков на всех размерах экрана.
   У NAMU Display высокие буквы: прежние значения 0.8–0.98 сближали строки
   до наложения. Единый интервал сохраняется и при переносах внутри span. */
:is(
  .calm-hero__title,
  .task__title,
  .sprint__title,
  .steps__title,
  .results__title,
  .cases__title,
  .products__title,
  .why__title,
  .team__title,
  .telegram__title
) {
  line-height: 1.1;
}

/* Единая шкала заголовков секций со второго блока.
   Файл подключён после стилей секций, чтобы они не меняли кегль. */

:is(
  .task__title,
  .sprint__title,
  .steps__title,
  .results__title,
  .cases__title,
  .products__title,
  .why__title,
  .team__title,
  .telegram__title
) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: clamp(6.666667vw, 3vw, 11.428571vw);
  font-size: clamp(13.809524vw, 8.7vw, 35.714286vw);
}

/* При общем крупном кегле заголовок процесса больше не помещается в прежнюю
   половину сетки. На десктопе даём ему полную ширину, а шаги ставим ниже. */
@media (min-width: 214.52381vw) {
  .steps__intro {
    position: static;
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: clamp(133.333333vw, 72svh, 180.952381vw);
    justify-content: space-between;
    gap: clamp(12.380952vw, 7vw, 24.761905vw);
    padding-right: 0;
    padding-bottom: clamp(13.333333vw, 6vw, 20.952381vw);
    border-bottom: 0.238095vw solid var(--color-light-grid);
  }

  .steps__list {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .step {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .step__num {
    grid-column: 1;
  }

  .step__body {
    grid-column: 2 / -1;
  }
}

@media (max-width: 214.285714vw) {
  :is(
    .task__title,
    .sprint__title,
    .steps__title,
    .results__title,
    .cases__title,
    .products__title,
    .why__title,
    .team__title,
    .telegram__title
  ) {
    /* У NAMU Display отрицательный трекинг: без оптического поля крайняя
       буква выглядит прилипшей к линии сетки даже при формально верной ширине. */
    padding-right: clamp(5.238095vw, 4vw, 8.571429vw);
    font-size: clamp(11.428571vw, 9vw, 17.142857vw);
    overflow-wrap: anywhere;
  }

  :is(
    .task__title,
    .sprint__title,
    .steps__title,
    .results__title,
    .cases__title,
    .products__title,
    .why__title,
    .team__title,
    .telegram__title
  ) span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 133.333333vw) {
  /* Воздух между мобильными секциями 02–10. Отступ находится внутри
     цветового поля блока, поэтому фон и вертикальная сетка не рвутся. */
  :is(
    .task,
    .sprint,
    .steps,
    .results,
    .cases,
    .products,
    .why,
    .team,
    .telegram
  ) {
    padding-top: clamp(10.47619vw, 12vw, 14.285714vw);
  }

  :is(
    .task__title,
    .sprint__title,
    .steps__title,
    .results__title,
    .cases__title,
    .products__title,
    .why__title,
    .team__title,
    .telegram__title
  ) {
    font-size: clamp(8.571429vw, 9.5vw, 10vw);
    padding-right: 4.761905vw;
  }

  /* Не разрываем «измеримому» внутри слова. Уменьшается только
     декоративный сдвиг строки — кегль и общие поля секции не меняются. */
  .steps__title span:nth-child(2) {
    margin-left: 4%;
    overflow-wrap: normal;
    word-break: normal;
  }
}


  /* source: calm-footer.css */

/* Подвал: контакты и навигация в общей четырёхколоночной системе. */

.site-footer {
  --footer-gutter: clamp(3.809524vw, 1.4vw, 5.714286vw);
  --footer-columns: repeat(4, minmax(0, 1fr));
  --footer-pad: clamp(3.809524vw, 2vw, 7.142857vw);

  position: relative;
  padding: 0 var(--footer-gutter);
  overflow: clip;
  border-top: 0.238095vw solid var(--color-dark-grid);
  background: var(--color-bg);
  color: var(--color-white);
}

.site-footer__grid-lines {
  position: absolute;
  inset: 0 var(--footer-gutter);
  display: grid;
  grid-template-columns: var(--footer-columns);
  pointer-events: none;
}

.site-footer__grid-lines span {
  border-left: 0.238095vw solid var(--color-dark-grid);
}

.site-footer__grid-lines span:first-child {
  border-left: 0;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

.site-footer__hero {
  display: grid;
  grid-template-columns: var(--footer-columns);
  min-height: clamp(76.190476vw, 31vw, 111.904762vw);
  margin-inline: calc(-1 * var(--footer-gutter));
}

.site-footer__brand {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9.52381vw;
  padding: clamp(7.142857vw, 4vw, 13.809524vw) calc(var(--footer-pad) + var(--footer-gutter));
}

.site-footer__logo {
  display: block;
  width: min(100%, 92.857143vw);
}

.site-footer__logo img {
  width: 100%;
  height: auto;
}

.site-footer__brand p {
  max-width: 34ch;
  font-size: clamp(3.571429vw, 1.2vw, 4.285714vw);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.58);
}

.site-footer__contact {
  grid-column: 3 / 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  background: var(--color-red);
  color: #fff;
}

.site-footer__contact-text {
  grid-column: 1;
  display: flex;
  align-items: flex-end;
  padding: var(--footer-pad);
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(10vw, 4.8vw, 17.619048vw);
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.site-footer__contact-icon {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(15.238095vw, 7vw, 25.714286vw);
}

.site-footer__contact-icon span {
  display: block;
  transition: transform 180ms ease;
}

.site-footer__contact:hover .site-footer__contact-icon span,
.site-footer__contact:focus-visible .site-footer__contact-icon span {
  transform: translate(1.904762vw, -1.904762vw);
}

.site-footer__contact:focus-visible,
.site-footer__logo:focus-visible,
.site-footer__link:focus-visible {
  outline: 0.47619vw solid currentColor;
  outline-offset: -0.714286vw;
}

.site-footer__links {
  display: grid;
  grid-template-columns: var(--footer-columns);
  margin-inline: calc(-1 * var(--footer-gutter));
  border-top: 0.238095vw solid var(--color-dark-grid);
  border-bottom: 0.238095vw solid var(--color-dark-grid);
}

.site-footer__column {
  min-height: clamp(54.761905vw, 20vw, 71.428571vw);
  padding: var(--footer-pad);
}

.site-footer__column + .site-footer__column {
  border-left: 0.238095vw solid var(--color-dark-grid);
}

.site-footer__column-label {
  display: block;
  margin-bottom: clamp(10vw, 5vw, 17.142857vw);
  font-size: 2.857143vw;
  color: rgba(255, 255, 255, 0.4);
}

.site-footer__column nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.857143vw;
}

.site-footer__link {
  font-size: clamp(3.571429vw, 1.2vw, 4.285714vw);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.74);
  transition: color 160ms ease;
}

.site-footer__link:hover {
  color: var(--color-red);
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: var(--footer-columns);
  min-height: 28.095238vw;
  align-items: center;
  font-size: 2.857143vw;
  color: rgba(255, 255, 255, 0.38);
}

.site-footer__copyright {
  grid-column: 1 / 3;
}

.site-footer__descriptor {
  grid-column: 3 / 5;
  padding-inline: var(--footer-pad);
}

@media (min-width: 214.52381vw) {
  /* Hero и колонки растянуты до краёв через отрицательный gutter, поэтому
     фоновая сетка должна стоять на тех же координатах — иначе линии двоятся. */
  .site-footer__grid-lines {
    inset-inline: 0;
  }

  .site-footer__logo {
    width: min(100%, clamp(28.571429vw, 10.5vw, 38.095238vw));
  }

  .site-footer__brand p {
    max-width: 32ch;
    font-size: clamp(3.095238vw, 1vw, 3.571429vw);
  }

  /* Фиксированный док занимает нижнюю часть viewport. Увеличенная зона
     подвала держит копирайт выше него даже в самой нижней точке страницы. */
  .site-footer__bottom {
    min-height: 41.904762vw;
    padding-bottom: 17.142857vw;
  }
}

@media (max-width: 214.285714vw) {
  .site-footer {
    --footer-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .site-footer__hero {
    grid-template-columns: var(--footer-columns);
  }

  .site-footer__brand,
  .site-footer__contact {
    grid-column: 1 / -1;
  }

  .site-footer__brand {
    min-height: 61.904762vw;
  }

  .site-footer__contact {
    min-height: 57.142857vw;
  }

  .site-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__column {
    min-height: 47.619048vw;
  }

  .site-footer__column:nth-child(3) {
    border-top: 0.238095vw solid var(--color-dark-grid);
    border-left: 0;
  }

  .site-footer__column:nth-child(4) {
    border-top: 0.238095vw solid var(--color-dark-grid);
  }
}

@media (max-width: 133.333333vw) {
  .site-footer__brand {
    min-height: 52.380952vw;
    padding: 5.714286vw 3.809524vw;
  }

  .site-footer__logo {
    width: min(64vw, 57.142857vw);
  }

  .site-footer__contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.333333vw;
    min-height: 42.857143vw;
    padding: 5.714286vw 3.809524vw;
    text-align: left;
  }

  .site-footer__contact-text {
    order: 2;
    flex: 0 1 auto;
    align-items: center;
    padding: 0;
    font-size: clamp(7.619048vw, 9vw, 9.52381vw);
  }

  .site-footer__contact-icon {
    order: 1;
    flex: 0 0 auto;
    border-left: 0;
    font-size: 9.047619vw;
    line-height: 1;
    color: #fff;
  }

  .site-footer__links {
    grid-template-columns: 1fr;
  }

  .site-footer__column {
    min-height: 0;
    padding: 5.238095vw 3.809524vw;
    border-top: 0.238095vw solid var(--color-dark-grid);
    border-left: 0 !important;
  }

  .site-footer__column:first-child {
    border-top: 0;
  }

  .site-footer__column-label {
    margin-bottom: 4.761905vw;
  }

  .site-footer__bottom {
    grid-template-columns: 1fr;
    gap: 2.380952vw;
    min-height: 26.190476vw;
    align-content: center;
  }

  .site-footer__copyright,
  .site-footer__descriptor {
    grid-column: 1;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__contact-icon span,
  .site-footer__link {
    transition: none;
  }
}


  /* source: collaboration-modal.css */

/* Единый сценарий запроса на сотрудничество. */

html.is-modal-open {
  overflow: hidden;
}

.collaboration-modal {
  position: fixed;
  inset: 0%;
  z-index: 1;
  width: min(280.952381vw, calc(100vw - 7.619048vw));
  max-width: none;
  max-height: calc(100dvh - 7.619048vw);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #fff;
  color: var(--color-bg);
  box-shadow: 0 7.619048vw 23.809524vw rgba(0, 0, 0, 0.42);
}

.collaboration-modal::backdrop {
  background: rgba(4, 10, 10, 0.78);
  backdrop-filter: blur(1.904762vw);
}

.collaboration-modal [hidden] {
  display: none !important;
}

.collaboration-modal[open] {
  animation: collaboration-modal-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.collaboration-modal[open]::backdrop {
  animation: collaboration-backdrop-in 240ms ease both;
}

.collaboration-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: min(171.428571vw, calc(100dvh - 7.619048vw));
  overflow: auto;
  overscroll-behavior: contain;
}

.collaboration-modal__grid-lines {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
}

.collaboration-modal__grid-lines span + span {
  border-left: 0.238095vw solid var(--color-light-grid);
}

.collaboration-modal__close {
  position: absolute;
  z-index: 5;
  top: 4.761905vw;
  right: 4.761905vw;
  width: 11.428571vw;
  height: 11.428571vw;
  border: 0.238095vw solid rgba(4, 10, 10, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.collaboration-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.285714vw;
  height: 0.238095vw;
  background: currentColor;
}

.collaboration-modal__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.collaboration-modal__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.collaboration-modal__close:hover {
  background: var(--color-bg);
  color: #fff;
  transform: rotate(4deg);
}

.collaboration-modal__close:focus-visible,
.collaboration-form__submit:focus-visible,
.collaboration-success button:focus-visible {
  outline: 0.47619vw solid var(--color-red);
  outline-offset: 0.714286vw;
}

.collaboration-modal__intro {
  grid-column: 1 / 3;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 13.333333vw;
  padding: 6.666667vw clamp(5.714286vw, 3vw, 10.47619vw) 8.095238vw;
}

.collaboration-modal__label {
  display: flex;
  align-items: center;
  gap: 0.952381vw;
  font-size: 2.857143vw;
}

.collaboration-modal__label span {
  display: inline-flex;
  min-height: 7.142857vw;
  align-items: center;
  justify-content: center;
  padding-inline: 2.857143vw;
  border: 0.238095vw solid var(--color-bg);
  border-radius: 237.857143vw;
}

.collaboration-modal__label span:first-child {
  min-width: 10.952381vw;
  border-color: var(--color-red);
  background: var(--color-red);
  color: #fff;
}

.collaboration-modal__title {
  margin: 0;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(12.857143vw, 5.6vw, 20.47619vw);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.collaboration-modal__title span {
  display: block;
}

.collaboration-modal__title span:last-child {
  color: var(--color-red);
}

.collaboration-modal__lead {
  max-width: 42ch;
  margin-top: 7.142857vw;
  font-size: clamp(3.571429vw, 1.3vw, 4.285714vw);
  line-height: 1.35;
  color: rgba(4, 10, 10, 0.62);
}

.collaboration-modal__response {
  max-width: 30ch;
  font-size: 3.095238vw;
  line-height: 1.35;
  color: rgba(4, 10, 10, 0.46);
}

.collaboration-form {
  grid-column: 3 / 5;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  border-left: 0.238095vw solid var(--color-light-grid);
  background: #fff;
}

.collaboration-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 20.952381vw;
}

.collaboration-field {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 30.47619vw;
  padding: 5.238095vw clamp(4.285714vw, 2vw, 6.666667vw) 4.285714vw;
  border-top: 0.238095vw solid var(--color-light-grid);
}

.collaboration-field:nth-child(even) {
  border-left: 0.238095vw solid var(--color-light-grid);
}

.collaboration-field:nth-child(3) {
  grid-column: 1 / -1;
}

.collaboration-field--wide {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  min-height: 50.952381vw;
  border-left: 0 !important;
  background: #fff;
}

.collaboration-field__label {
  display: block;
  margin-bottom: 4.285714vw;
  font-size: 2.857143vw;
  line-height: 1;
  color: rgba(4, 10, 10, 0.52);
}

.collaboration-field__label b {
  color: var(--color-red);
  font-weight: 500;
}

.collaboration-field:focus-within .collaboration-field__label {
  color: var(--color-bg);
}

.collaboration-field input,
.collaboration-field textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--color-bg);
  font: inherit;
  font-size: clamp(4.047619vw, 1.55vw, 5vw);
  line-height: 1.24;
  letter-spacing: -0.025em;
}

.collaboration-field textarea {
  min-height: 26.666667vw;
  resize: vertical;
}

.collaboration-field input::placeholder,
.collaboration-field textarea::placeholder {
  color: rgba(4, 10, 10, 0.3);
  opacity: 1;
}

.collaboration-field small {
  display: block;
  min-height: 3.809524vw;
  margin-top: 1.904762vw;
  font-size: 2.619048vw;
  line-height: 1.2;
  color: var(--color-red);
}

.collaboration-field.is-invalid {
  box-shadow: inset 0 -0.47619vw 0 var(--color-red);
}

.collaboration-form__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  border-top: 0.238095vw solid var(--color-light-grid);
}

.collaboration-form__meta {
  align-self: end;
  padding: 5.238095vw clamp(4.285714vw, 2vw, 6.666667vw);
}

.collaboration-form__meta p {
  font-size: 2.619048vw;
  line-height: 1.35;
  color: rgba(4, 10, 10, 0.42);
}

.collaboration-form__status {
  margin-top: 2.142857vw;
  color: var(--color-red) !important;
}

.collaboration-form__fallback {
  display: inline-block;
  margin-top: 1.904762vw;
  font-size: 2.857143vw;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.714286vw;
}

.collaboration-form__trap {
  position: absolute !important;
  width: 0.238095vw !important;
  height: 0.238095vw !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.collaboration-form__submit {
  display: flex;
  min-height: 27.619048vw;
  align-items: center;
  justify-content: center;
  gap: 3.809524vw;
  padding: 5.238095vw clamp(4.285714vw, 2vw, 6.666667vw);
  background: var(--color-red);
  color: #fff;
  cursor: pointer;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(5.238095vw, 2.1vw, 7.380952vw);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-align: left;
  text-transform: uppercase;
  transition: background-color 180ms ease;
}

.collaboration-form__submit span:first-child {
  max-width: 9.5ch;
  text-align: left;
}

.collaboration-form__submit span:last-child {
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: 10vw;
  font-weight: 400;
  line-height: 0.7;
  transition: transform 180ms ease;
}

.collaboration-form__submit:hover {
  background: #a90016;
}

.collaboration-form__submit:hover span:last-child {
  transform: translate(0.952381vw, -0.952381vw);
}

.collaboration-form__submit[aria-busy="true"] {
  cursor: wait;
  opacity: 0.78;
}

.collaboration-form__submit[aria-busy="true"] span:last-child {
  display: none;
}

.collaboration-success {
  grid-column: 1 / -1;
  min-height: min(171.428571vw, calc(100dvh - 7.619048vw));
  padding: 7.142857vw clamp(5.714286vw, 4vw, 13.333333vw) 9.52381vw;
  background: var(--color-bg);
  color: #fff;
}

.collaboration-success:not([hidden]) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: collaboration-success-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.collaboration-success__eyebrow {
  font-size: 2.857143vw;
  color: rgba(255, 255, 255, 0.48);
}

.collaboration-success h2 {
  margin: 0;
  font-family: "NAMU Display", Arial, sans-serif;
  font-size: clamp(13.809524vw, 8vw, 26.666667vw);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.collaboration-success h2 span {
  color: var(--color-red);
}

.collaboration-success div > p {
  max-width: 48ch;
  margin-top: 7.142857vw;
  color: rgba(255, 255, 255, 0.58);
}

.collaboration-success button {
  align-self: flex-start;
  min-height: 11.428571vw;
  padding: 0 5.238095vw;
  border-radius: 237.857143vw;
  background: #fff;
  color: var(--color-bg);
  cursor: pointer;
  font-weight: 500;
}

@keyframes collaboration-modal-in {
  from { opacity: 0; transform: translateY(5.714286vw) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes collaboration-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes collaboration-success-in {
  from { opacity: 0; transform: translateY(4.285714vw); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 214.285714vw) {
  .collaboration-modal {
    width: min(161.904762vw, calc(100vw - 5.714286vw));
    max-height: calc(100dvh - 5.714286vw);
  }

  .collaboration-modal__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
    max-height: calc(100dvh - 5.714286vw);
  }

  .collaboration-modal__grid-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collaboration-modal__grid-lines span:nth-child(n + 3) {
    display: none;
  }

  .collaboration-modal__intro,
  .collaboration-form {
    grid-column: 1 / -1;
  }

  .collaboration-modal__intro {
    min-height: 92.857143vw;
    padding: 5.238095vw 4.761905vw 6.190476vw;
    border-bottom: 0.238095vw solid var(--color-light-grid);
  }

  .collaboration-modal__title {
    font-size: clamp(11.428571vw, 10vw, 16.190476vw);
  }

  .collaboration-modal__lead {
    max-width: 48ch;
    margin-top: 5.238095vw;
  }

  .collaboration-form {
    border-left: 0;
  }

  .collaboration-form__fields {
    padding-top: 0;
  }

  .collaboration-success {
    grid-column: 1 / -1;
    min-height: calc(100dvh - 5.714286vw);
  }
}

@media (max-width: 133.333333vw) {
  .collaboration-modal {
    width: min(100vw, calc(100vw - 7.619048vw));
    max-height: calc(100dvh - 11.428571vw);
    border-radius: var(--radius-16);
  }

  .collaboration-modal__panel {
    max-height: calc(100dvh - 11.428571vw);
    scrollbar-width: thin;
    scrollbar-color: rgba(4, 10, 10, 0.24) transparent;
  }

  .collaboration-modal__close {
    position: fixed;
    top: 4.285714vw;
    right: 3.809524vw;
    width: 10.47619vw;
    height: 10.47619vw;
    margin: 0;
  }

  .collaboration-modal__intro {
    min-height: 76.190476vw;
    gap: 5.714286vw;
    padding: 4.285714vw 3.809524vw 5.714286vw;
  }

  .collaboration-modal__label {
    padding-right: 12.857143vw;
  }

  .collaboration-modal__title {
    padding-right: 2.380952vw;
    font-size: clamp(9.52381vw, 11vw, 11.428571vw);
  }

  .collaboration-modal__lead {
    margin-top: 4.285714vw;
    padding-right: 2.857143vw;
    font-size: 3.571429vw;
  }

  .collaboration-modal__response {
    font-size: 2.857143vw;
  }

  .collaboration-form__fields {
    display: block;
  }

  .collaboration-field,
  .collaboration-field--wide {
    min-height: 23.809524vw;
    padding: 4.285714vw 3.809524vw 3.333333vw;
    border-left: 0 !important;
  }

  .collaboration-field--wide {
    min-height: 41.428571vw;
  }

  .collaboration-field textarea {
    min-height: 25vw;
  }

  .collaboration-form__footer {
    display: flex;
    flex-direction: column-reverse;
  }

  .collaboration-form__meta {
    padding: 3.809524vw;
  }

  .collaboration-form__submit {
    min-height: 20vw;
    padding: 4.285714vw 3.809524vw;
    font-size: 5.952381vw;
  }

  .collaboration-form__submit span:first-child {
    max-width: none;
  }

  .collaboration-success {
    min-height: min(147.619048vw, calc(100dvh - 11.428571vw));
    padding: 5.714286vw 3.809524vw;
  }

  .collaboration-success h2 {
    font-size: clamp(10.47619vw, 13vw, 14.761905vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collaboration-modal[open],
  .collaboration-modal[open]::backdrop,
  .collaboration-success:not([hidden]) {
    animation: none;
  }

  .collaboration-modal__close,
  .collaboration-form__submit,
  .collaboration-form__submit span:last-child {
    transition: none;
  }
}


}