:root {
  /* colors — section backgrounds */
  --color-blumine: #1C506B;
  --color-atoll: #0A5273;
  --color-astronaut: #24516E;
  --color-eden: #125F5D;
  --color-casal: #2A656C;
  --color-astronautmid: #275774;
  --color-casalmid: #265B65;
  --color-elm: #205F6D;
  --color-ming: #2F637C;

  /* colors — accents & text */
  --color-turquoiseblue: rgba(113, 212, 231, 1);
  --color-turquoiseblue-70: rgba(113, 212, 231, 0.7);
  --color-white: rgba(255, 255, 255, 1);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-15: rgba(255, 255, 255, 0.15); /* обводка SVG-анимаций (pulse-rings/wave), см. animations.md */

  /* fonts */
  --font-onest: "Onest", Inter, Manrope, sans-serif;
  --font-inter: "Inter", "SF Pro Text", "Source Sans 3", "Noto Sans", sans-serif;

  /* type scale — база ⩾1024px (одинаковая на 1024–1439px и ⩾1440px, отдельного варианта под
     1440px в источнике нет), переопределения для ⩽1024px/⩽768px — в секции брейкпоинтов ниже */
  --text-tag: 400 13px/1.0 var(--font-inter);
  --text-link: 400 13px/1.35 var(--font-inter);
  --text-button: 400 13px/1.54 var(--font-inter);
  --text-body: 400 14px/1.35 var(--font-inter);
  --text-body-lg: 300 24px/1.05 var(--font-onest); /* uppercase */
  --text-subheading: 300 18px/1.25 var(--font-inter);
  --text-subheading-lg: 300 22px/1.05 var(--font-onest);
  --text-heading-sm: 300 26px/1.05 var(--font-onest); /* uppercase */
  --text-heading: 300 54px/0.9 var(--font-onest); /* uppercase */
  --text-heading-lg: 300 68px/0.9 var(--font-onest); /* uppercase */

  /* spacing */
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-36: 36px;
  --spacing-48: 48px;
  --spacing-72: 72px;
  --spacing-96: 96px;
  --spacing-108: 108px;
  --spacing-120: 120px;
  --spacing-132: 132px;

  /* radii & borders */
  --radius-card: 12px;
  --radius-pill: 132px;
  --border-hairline: 0.75px;
  --border-button: 1px;

  /* grid — гуттер колонок, разный по брейкпоинтам (см. design/design-tokens.md → "Сетка"):
     24px ⩾1440px (это значение), 16px 1025–1440px, 12px ⩽1024px — переопределения в
     секции брейкпоинтов ниже */
  --grid-gap: var(--spacing-24);
}

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

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-blumine);
  font: var(--text-body);
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ==========================================================================
   Навигация — фиксирована, вне #smooth-wrapper (см. design/animations.md)
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  padding: var(--spacing-24) var(--spacing-36) !important;
  min-height: 100px;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.nav__logo-img {
  height: 45px;
}

.nav__line {
  flex: 1 1 auto;
  height: var(--border-hairline);
  background: var(--color-white-30);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  flex: 0 0 auto;
  white-space: nowrap;
}

.nav__menu-item a {
  font: var(--text-button) !important;
  text-transform: uppercase !important;
  color: var(--color-white-50) !important;
}

.nav__menu-item--active a {
  color: var(--color-turquoiseblue-70) !important;
}

.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 45px;
  height: 45px;
  border-radius: var(--radius-pill);
  border: var(--border-button) solid var(--color-white-70);
  flex: 0 0 auto;
}

.nav__burger-line {
  width: 16px;
  height: var(--border-hairline);
  background: var(--color-white);
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  border-radius: var(--radius-pill);
  border: var(--border-button) solid transparent;
  font: var(--text-button);
  white-space: nowrap;
}

.button--cta {
  padding: var(--spacing-16) var(--spacing-24) !important;
  border-color: var(--color-turquoiseblue) !important;
  color: var(--color-turquoiseblue) !important;
}

.button--small {
  padding: var(--spacing-8) var(--spacing-16) !important;
  border-color: var(--color-white-70) !important;
  color: var(--color-white-70) !important;
}

/* ==========================================================================
   Link Button — без pill-обводки, подчёркнутый текст + стрелка, см.
   design/style-guide.md → "Link Button"
   ========================================================================== */

.link-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--spacing-4) !important;
  font: var(--text-link) !important;
  color: var(--color-turquoiseblue) !important;
}

.link-button__text {
  text-decoration: underline;
}

/* ==========================================================================
   Теги
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6) var(--spacing-8) !important;
  border-radius: var(--radius-pill);
  border: var(--border-button) solid var(--color-white-50);
  font: var(--text-tag);
  color: var(--color-white-50);
  width: fit-content;
}

.tag__icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-turquoiseblue);
}

/* ==========================================================================
   Карточки
   ========================================================================== */

.card {
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.08); /* точное значение не задокументировано нигде, подобрано на глаз — сверить визуально */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.card__title {
  font: var(--text-heading-sm);
  text-transform: uppercase;
  color: var(--color-turquoiseblue);
}

.card__text {
  font: var(--text-body);
  color: var(--color-white-50);
}

/* Карточка с фоновым фото (Section 3 / 8 / 9), см. design/layout-notes.md →
   "Компонент: карточка с фоновым фото". Модификатор поверх .card — вместо стеклянной
   подложки Hero-карточки здесь на всю карточку фото + градиент-оверлей. */
.card--photo {
  position: relative;
  overflow: hidden;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card__bg {
  position: absolute;
  /* выше/ниже границ карточки (не inset:0) — запас на параллакс-сдвиг (yPercent в main.js,
     Section 3), чтобы при смещении не открывались пустые края; .card--photo уже имеет
     overflow: hidden, лишнее обрезается */
  top: -10%;
  bottom: -10%;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;
}

.card__overlay {
  position: absolute;
  left: 0;
  right: 0;
}

.card__tag {
  position: absolute;
  z-index: 2;
}

.card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Общий страничный слой фонов (.page-backgrounds) — вне #smooth-content,
   см. design/animations.md → "GSAP — общая архитектура скролла"
   ========================================================================== */

.page-backgrounds {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.page-backgrounds__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.page-backgrounds__layer--active {
  opacity: 1;
}

.page-backgrounds__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.page-backgrounds__photo {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 1022px; /* ⩾1440px — точные px-значения по брейкпоинтам, см. медиазапросы ниже,
                    утверждённые, не трогаем */
  /* Высота — не min-height:100vh + object-fit:cover (было раньше), а auto: считается из
     реального соотношения сторон фото при заданной ширине, без принудительного растягивания
     до высоты экрана. На большинстве брейкпоинтов естественная высота и так ⩾100vh (ширина
     там и была реальным ограничением) — видимой разницы нет. На высоких узких планшетах, где
     раньше min-height заставлял cover обрезать фото по бокам, теперь фото просто не дотянется
     до самого низа экрана на разницу высот — обрезки лиц нет (решение с пользователем
     2026-08-04, второй заход после отката первой попытки). */
  height: auto;
  /* сброс глобального img{max-width:100%} из reset — без этого на узких брейкпоинтах (768px
     планшет, 390px мобильная) ширина капалась до ширины вьюпорта вместо утверждённых
     845px/552px из таблицы выше (обнаружено и исправлено 2026-08-04, тот же день) */
  max-width: none;
}

.page-backgrounds__animation {
  /* общий паттерн (design/layout-notes.md → "Общий паттерн секции"): на всю ширину, высота
     50% экрана, по центру. Hero — исключение (см. модификатор ниже) */
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.page-backgrounds__animation--hero {
  /* без flex-центрирования: сам pulse-rings уже центрируется через translateX(-25%),
     см. заметки к переносу в design/animations.md — двойное центрирование сдвигало кольца
     к левому краю. Решено 2026-07-22: у Hero зона анимации — на всю высоту секции, а не 50%,
     чтобы кольца не перекрывали лица на фото основателей */
  top: 0;
  height: 100%;
}

.page-backgrounds__overlay {
  position: absolute;
  left: 0;
  right: 0;
}

.page-backgrounds__overlay--top {
  top: 0;
}

.page-backgrounds__overlay--bottom {
  bottom: 0;
}

.page-backgrounds__overlay--hero.page-backgrounds__overlay--top {
  height: 150px;
  background: linear-gradient(rgba(42, 86, 115, 0.45) 0%, rgba(42, 86, 115, 0) 100%);
}

.page-backgrounds__overlay--hero.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(42, 86, 115, 0) 0%, rgba(42, 86, 115, 1) 100%);
}

/* Section 2 — тот же градиент, что у Hero (подтверждено, см. layout-notes.md), высота
   верхнего оверлея на мобильном другая (80px, не 105px) */
.page-backgrounds__overlay--2.page-backgrounds__overlay--top {
  height: 150px;
  background: linear-gradient(rgba(42, 86, 115, 0.45) 0%, rgba(42, 86, 115, 0) 100%);
}

.page-backgrounds__overlay--2.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(42, 86, 115, 0) 0%, rgba(42, 86, 115, 1) 100%);
}

/* Section 3 — та же схема, что у Hero/Section 2 (см. layout-notes.md) */
.page-backgrounds__overlay--3.page-backgrounds__overlay--top {
  height: 150px;
  background: linear-gradient(rgba(42, 86, 115, 0.45) 0%, rgba(42, 86, 115, 0) 100%);
}

.page-backgrounds__overlay--3.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(42, 86, 115, 0) 0%, rgba(42, 86, 115, 1) 100%);
}

/* Section 4 — та же схема высот, что у Hero/2/3, но свой оттенок оверлея
   (rgba(42,96,103,*) вместо rgba(42,86,115,*), см. layout-notes.md) */
.page-backgrounds__overlay--4.page-backgrounds__overlay--top {
  height: 150px;
  background: linear-gradient(rgba(42, 96, 103, 0.45) 0%, rgba(42, 96, 103, 0) 100%);
}

.page-backgrounds__overlay--4.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(42, 96, 103, 0) 0%, rgba(42, 96, 103, 1) 100%);
}

/* Section 5 — стандартный оттенок оверлея, та же формула, что у Hero/2/3 */
.page-backgrounds__overlay--5.page-backgrounds__overlay--top {
  height: 150px;
  background: linear-gradient(rgba(42, 86, 115, 0.45) 0%, rgba(42, 86, 115, 0) 100%);
}

.page-backgrounds__overlay--5.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(42, 86, 115, 0) 0%, rgba(42, 86, 115, 1) 100%);
}

/* Section 6 — светлая версия оверлея (alpha 0.1, не 0.45/1, см. layout-notes.md); высоты
   те же, что у остальных секций (своих значений для Section 6 не задокументировано) */
.page-backgrounds__overlay--6.page-backgrounds__overlay--top {
  height: 150px;
  background: linear-gradient(rgba(42, 96, 103, 0.1) 0%, rgba(42, 96, 103, 0) 100%);
}

.page-backgrounds__overlay--6.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(42, 96, 103, 0) 0%, rgba(42, 96, 103, 0.1) 100%);
}

/* Section 7 — свой оттенок оверлея (rgba(29,82,97,*)) и заметно более высокий
   верхний оверлей: 450px против 150px у всех остальных секций (120px против
   80px на мобильной) — так в layout-notes.md, подтверждается скриншотом:
   верх кадра затемнён гораздо глубже. Альфы стандартные (0.45→0 / 0→1). */
.page-backgrounds__overlay--7.page-backgrounds__overlay--top {
  height: 450px;
  background: linear-gradient(rgba(29, 82, 97, 0.45) 0%, rgba(29, 82, 97, 0) 100%);
}

.page-backgrounds__overlay--7.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(29, 82, 97, 0) 0%, rgba(29, 82, 97, 1) 100%);
}

/* Section 8 — светлая версия оверлея (alpha 0.1, как у Section 6), стандартный
   оттенок rgba(42,86,115,*); высоты те же, что у остальных секций (своих значений
   для Section 8 не задокументировано) */
.page-backgrounds__overlay--8.page-backgrounds__overlay--top {
  height: 150px;
  background: linear-gradient(rgba(42, 86, 115, 0.1) 0%, rgba(42, 86, 115, 0) 100%);
}

.page-backgrounds__overlay--8.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(42, 86, 115, 0) 0%, rgba(42, 86, 115, 0.1) 100%);
}

/* Section 9 — светлая версия оверлея, та же схема, что у Section 8 (layout-notes.md).
   ⚠️ В дереве слоёв у Section 9 указан только `bottom overlay`, верхнего нет; здесь
   оставлены оба — как задокументировано и как сделано у Section 8 (при alpha 0.1
   верхний практически не читается) */
.page-backgrounds__overlay--9.page-backgrounds__overlay--top {
  height: 150px;
  background: linear-gradient(rgba(42, 86, 115, 0.1) 0%, rgba(42, 86, 115, 0) 100%);
}

.page-backgrounds__overlay--9.page-backgrounds__overlay--bottom {
  height: 525px;
  background: linear-gradient(rgba(42, 86, 115, 0) 0%, rgba(42, 86, 115, 0.1) 100%);
}

/* pulse-rings — код из design/animations.md, обводка вынесена в токен --color-white-15 */
.pulse-rings {
  position: absolute;
  min-height: 200vh;
  height: 200vh;
  min-width: 200vw;
  overflow: visible;
  /* Горизонтальное центрирование — через left+translateX(-50%), а не через
     translateX(-25%) из исходного кода (см. design/animations.md). Тот вариант давал центр
     ровно посередине экрана, только пока фактическая ширина SVG = 200vw; на узких экранах
     (мобильная версия) ширина считается от высоты (200vh × 1:1 из viewBox) и оказывается
     БОЛЬШЕ 200vw — сдвиг на фиксированные 25% собственной ширины переставал совпадать с
     центром, и кольца уезжали вправо. left:50% + translateX(-50%) центрирует при любой
     фактической ширине. Вертикальное положение не трогаем — оно осталось прежним. */
  left: 50%;
  transform: translateX(-50%);
}

.pulse-rings__ring {
  fill: none;
  stroke: var(--color-white-15);
  stroke-width: var(--border-hairline);
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center center;
  animation: pulse-rings-animation 12s linear infinite;
}

.pulse-rings__ring:nth-of-type(1) { animation-delay: 0s; }
.pulse-rings__ring:nth-of-type(2) { animation-delay: -3s; }
.pulse-rings__ring:nth-of-type(3) { animation-delay: -6s; }
.pulse-rings__ring:nth-of-type(4) { animation-delay: -9s; }

@keyframes pulse-rings-animation {
  0% { transform: scale(0.1667); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: scale(0.7222); opacity: 1; }
  92% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* wave — код и координаты считает JS (assets/js/main.js → initWaveAnimation), см.
   design/animations.md → "Вариант 2 — синусоида (wave)". SVG расположен по центру
   родительского .page-backgrounds__animation (у него 50% высоты секции, overflow: hidden) —
   центр волны (centerY = window.innerHeight / 2 в JS) совмещается с центром видимой зоны. */
.wave {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}

/* ==========================================================================
   #smooth-wrapper / #smooth-content — обёртка ScrollSmoother
   ========================================================================== */

#smooth-wrapper {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   Section — общий паттерн (внутри лежит только Content, фон/оверлей — в
   .page-backgrounds, см. design/layout-notes.md → "Общий паттерн секции")
   ========================================================================== */

.section {
  position: relative;
}

.section__content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

/* ==========================================================================
   Паддинг Content-слоя — Тип A (Hero, 2, 4, 7), см. design/layout-notes.md
   ========================================================================== */

.section--type-a .section__content {
  padding: var(--spacing-132) var(--spacing-36) var(--spacing-36) var(--spacing-36) !important;
}

/* ==========================================================================
   Паддинг Content-слоя — Тип B (3, 5, 6, 8, 9), см. design/layout-notes.md
   ========================================================================== */

.section--type-b .section__content {
  padding: var(--spacing-132) var(--spacing-36) var(--spacing-132) var(--spacing-36) !important;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.section--hero {
  height: 100vh;
}

.section--hero .section__content {
  height: 100%;
  align-items: end;
}

.hero__intro {
  grid-column: 1 / 9;
  display: flex;
  flex-direction: column;
}

.hero__title {
  font: var(--text-heading-lg);
  text-transform: uppercase;
  color: var(--color-turquoiseblue);
  margin-top: var(--spacing-24) !important;
}

.hero__subtitle {
  font: var(--text-subheading-lg);
  text-transform: uppercase;
  color: var(--color-white-70);
  text-align: justify; /* по скриншоту — оба крыла текста выровнены по ширине блока */
  margin-top: var(--spacing-24) !important;
  overflow: hidden; /* маска для построчного GSAP-reveal (SplitText), см. main.js */
  /* 7 колонок основной 12-колоночной сетки, при том что .hero__intro (containing block для %)
     сам занимает 8 колонок. Пересчёт "N колонок из 12" в проценты от 8-колоночного родителя:
     width(7 кол.) = 7·col + 6·gap, где col = (intro_width − 7·gap) / 8 (из intro = 8·col + 7·gap)
     => width(7 кол.) = 0.875·intro_width − 0.125·gap = calc(87.5% − var(--grid-gap) / 8) */
  width: calc(87.5% - (var(--grid-gap) / 8));
}

.hero__mobile-cta {
  display: none;
  width: fit-content;
  margin-top: var(--spacing-48) !important;
}

.hero__card {
  grid-column: 10 / 13;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: var(--spacing-24) !important;
}

.hero__card .card__icon {
  width: 74px;
  height: 60px;
  /* верхняя граница текста ниже верхней границы иконки на 36px: иконка 60px высотой +
     gap карточки (--spacing-24 на этом брейкпоинте) дают 84px естественного расстояния до
     текста, нужно 36px => margin-bottom: -(60 + gap − 36); пересчитывается вместе с gap
     карточки на брейкпоинте 1024–1439px (см. медиазапросы ниже) */
  margin-bottom: -48px;
}

/* ==========================================================================
   Section 2 — общий паттерн блока 1 (title+subtitle) и блока 2 (tag+text)
   переиспользуется Section 4 и 7 (см. design/layout-notes.md)
   ========================================================================== */

.section--2 {
  height: 100vh;
  /* Зазор перед Section 3 (не паддинг Типа B — тот общий для ещё не свёрстанных 5/6/8/9,
     трогать его ради перехода 2→3 не нужно). За это расстояние после анпина: короткая пауза,
     затем угасает контент Section 2, фон кросс-фейдится на Section 3 — см. main.js. */
  margin-bottom: 33vh;
}

.section--2 .section__content {
  height: 100%;
  grid-template-rows: 1fr auto;
  column-gap: var(--grid-gap);
  row-gap: 0;
}

.section-titles {
  grid-column: 1 / 9;
  grid-row: 1;
}

.section-titles__title {
  font: var(--text-heading);
  text-transform: uppercase;
  color: var(--color-turquoiseblue);
  overflow: hidden; /* маска для построчного GSAP-reveal (SplitText), см. main.js */
}

.section-titles__subtitle {
  font: var(--text-subheading);
  color: var(--color-white-70);
  margin-top: var(--spacing-12) !important;
  overflow: hidden; /* маска для построчного GSAP-reveal (SplitText), см. main.js */
}

.section-texts {
  grid-column: 1 / 13;
  grid-row: 2;
  display: flex;
  justify-content: space-between;
  /* тег — на уровне верхней строки текста (не по низу блока — было
     align-items: flex-end, из-за чего тег на десктопе/планшете съезжал вниз
     к нижнему краю многострочного абзаца; исправлено 2026-08-04) */
  align-items: flex-start;
}

.section-texts__text {
  font: var(--text-body-lg);
  text-transform: uppercase;
  color: var(--color-white-50);
  text-align: justify;
  /* 8 из 12 колонок основной сетки, при том что .section-texts (containing block для %) сам
     занимает все 12 колонок (100% ширины Content). Пересчёт "8 колонок из 12" в проценты:
     width(8 кол.) = 8·col + 7·gap, где col = (block_width − 11·gap) / 12
     => width(8 кол.) = (2/3)·block_width − (1/3)·gap = calc(66.6667% − var(--grid-gap) / 3) */
  width: calc(66.6667% - (var(--grid-gap) / 3));
}

/* Слова текста Section 2 (SplitText, wordsClass: 'section-texts__word') — по умолчанию
   притушены (dim), GSAP во время pin-фазы доводит opacity до 1 word-by-word, см. main.js.
   Без JS слова не оборачиваются в этот класс — текст остаётся полностью читаемым. */
.section-texts__word {
  display: inline-block;
  opacity: 0.12;
}

/* ==========================================================================
   Section 3 — два вложенных уровня сетки: внешняя (12 колонок, контент занимает
   10 из них) и внутренняя, локальная 3-колоночная (под 3 карточки — 10 не делится
   на 3 без остатка, поэтому у карточек своя независимая сетка, см. обсуждение с
   пользователем 2026-08-04). Текстовые блоки берут по 2 из 3 колонок внутренней
   сетки — так их края совпадают с краями карточек.
   ========================================================================== */

.section--3 {
  height: auto; /* высота по контенту, не 100vh */
}

.section-3__grid {
  grid-column: 2 / 12; /* 10 из 12 внешних колонок, по центру */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* локальная 3-колоночная сетка */
  row-gap: var(--spacing-48);
  column-gap: var(--spacing-24); /* ⩾1440px; 12px на ⩽1439px, см. медиазапросы ниже */
}

.section-3__intro {
  grid-column: 1 / 3; /* 2 из 3 колонок внутренней сетки, левый край */
  grid-row: 1;
  font: var(--text-body-lg);
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-white-70);
}

.section-3__card {
  grid-row: 2;
  height: 540px; /* ⩾1440px, per breakpoint — см. медиазапросы ниже */
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-36) var(--spacing-24) !important;
}

.section-3__card--1 {
  grid-column: 1 / 2;
  /* 144px — не в шкале отступов (макс. токен 132px), это шаг ступеньки карточек
     (2×72px), не отступ между элементами — используем как есть */
  margin-top: 144px;
  /* самая нижняя из трёх */
}

.section-3__card--2 {
  grid-column: 2 / 3;
  margin-top: var(--spacing-72) !important;
}

.section-3__card--3 {
  grid-column: 3 / 4;
  margin-top: 0; /* самая верхняя из трёх */
}

.section-3__card .card__overlay {
  bottom: 0; /* градиент прибит к низу карточки */
  height: 230px; /* ⩾1440px, per breakpoint — см. медиазапросы ниже */
  /* цвет градиента — свой на каждую карточку (не токен), задаётся инлайн в HTML,
     см. design/layout-notes.md → "Компонент: карточка с фоновым фото" */
}

.section-3__card .card__tag {
  top: var(--spacing-24);
  left: var(--spacing-24);
}

.section-3__card .card__content {
  justify-content: flex-end; /* заголовок+текст прибиты к низу карточки */
}

.section-3__card .card__title {
  margin-bottom: var(--spacing-36) !important; /* ⩾1440px; 24px на ⩽1439px, см. медиазапросы ниже */
}

/* Слова верхнего/нижнего текста (SplitText, wordsClass) — тот же паттерн притушенного
   старта (0.12 → 1 на скролле), что и .section-texts__word у Section 2, см. main.js.
   Отдельный класс (не переиспользуем .section-texts__word) — разные блоки (БЭМ). */
.section-3__intro-word,
.section-3__footer-text-word,
.section-5__intro-word,
.section-5__footer-text-word,
.section-6__headline-word,
.section-6__outro-text-word,
.section-8__footer-text-word,
.section-9__text-word {
  display: inline-block;
  opacity: 0.12;
}

.section-3__footer {
  grid-column: 2 / 4; /* 2 из 3 колонок внутренней сетки, правый край */
  grid-row: 3;
}

.section-3__footer-text {
  font: var(--text-body-lg);
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-white-70);
}

.section-3__cta {
  margin-top: var(--spacing-36) !important;
}

/* ==========================================================================
   Section 4 — тот же паттерн блоков (title+subtitle / tag+text), что у
   Section 2 — .section-titles/.section-texts переиспользуются как есть, см.
   design/layout-notes.md. Своя только высота секции.
   ========================================================================== */

.section--4 {
  height: 100vh;
  /* Зазор перед будущей Section 5 — тот же приём и то же значение, что у
     .section--2 (см. main.js): угасание контента после анпина укладывается сюда. */
  margin-bottom: 33vh;
}

.section--4 .section__content {
  height: 100%;
  grid-template-rows: 1fr auto;
  column-gap: var(--grid-gap);
  row-gap: 0;
}

/* ==========================================================================
   Section 5 — локальная 10-колоночная сетка (тот же принцип центрирования,
   что у Section 3 — 10 из 12 внешних колонок), без вложенной под-сетки:
   карточки на всю ширину, текстовые блоки — по 6 из 10 локальных колонок.
   Карточки — обычные .card (не .card--photo): тег + заголовок в строку слева,
   текст фиксированной ширины справа (⩾769px), в столбец на мобильной.
   См. design/layout-notes.md → Section 5.
   ========================================================================== */

.section--5 {
  height: auto; /* высота по контенту, не 100vh */
}

.section-5__grid {
  /* 10 из 12 внешних колонок — ⩾1025px (оба тира); 12 из 12 на 769–1024px, на всю ширину
     секции на ⩽768px (как у Section 3) — см. медиазапросы ниже */
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  column-gap: var(--grid-gap);
}

.section-5__intro {
  grid-column: 1 / 7; /* 6 из 10 локальных колонок, левый край */
  font: var(--text-body-lg);
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-white-70);
}

.section-5__card {
  grid-column: 1 / 11; /* во всю ширину локальной сетки */
  display: flex;
  align-items: center;
  /* тег → тело (заголовок+текст) — ⩾1441px; 16px на 1025–1440px, 12px на ⩽1024px, см. ниже.
     Не justify-content:space-between на трёх элементах в ряд (тег/заголовок/текст) — тогда
     свободное место делится ПОРОВНУ между обоими промежутками, и заголовок "уплывает" к
     центру карточки вместо того, чтобы стоять близко к тегу (баг, найденный по ревью). Вместо
     этого заголовок+текст обёрнуты в .section-5__card-body (см. ниже) — gap здесь управляет
     только расстоянием тег→body, а требуемый большой отступ до текста создаётся
     justify-content:space-between уже ВНУТРИ body, между заголовком и текстом. */
  gap: var(--spacing-24);
  padding: var(--spacing-36) var(--spacing-24) var(--spacing-36) var(--spacing-24) !important; /* ⩾1441px */
  margin-top: var(--spacing-16) !important; /* гэп между карточками, ⩾1441px; 12px на ⩽1440px, см. ниже */
}

/* Составной селектор (не просто .section-5__card--1) — специфичность выше, чем у
   .section-5__card{margin-top:...} внутри медиазапросов ниже; при равной специфичности и
   более позднем (внутри @media) правиле margin-top:16/12px общего класса перебивал бы это
   значение по порядку каскада, как уже было найдено багом на Section 3 (row-gap/margin-top) */
.section-5__card.section-5__card--1 {
  /* !important обязателен: у общего .section-5__card margin-top тоже !important, а важное
     правило бьёт обычное независимо от специфичности — без этого составной селектор
     перестаёт работать и первая карточка получает гэп между карточками вместо отступа
     от текста */
  margin-top: 48px !important; /* от текста сверху, ⩾1025px (оба тира); 96px на ⩽1024px, см. ниже */
}

.section-5__card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-5__card .card__text {
  /* фиксированная ширина справа — точного значения нет ни в одном источнике
     (layout-notes.md описывает качественно, "текст фиксированной ширины"),
     подобрано по пропорциям эталонного скриншота — сверить визуально */
  flex: 0 0 33%;
  margin-top: 0;
}

.section-5__footer {
  grid-column: 5 / 11; /* 6 из 10 локальных колонок, правый край */
  margin-top: 48px; /* ⩾1025px (оба тира); 96px на ⩽1024px, см. ниже */
}

.section-5__footer-text {
  font: var(--text-body-lg);
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-white-70);
}

.section-5__cta {
  margin-top: var(--spacing-36) !important;
}

/* ==========================================================================
   Section 6 — единственная секция с явным CSS Grid 12×5 (не "колонки основной
   сетки", а прямая расстановка по grid-column/grid-row поверх той же
   12-колоночной сетки, что и .section__content — отдельного локального grid-
   контейнера не заводим), см. design/layout-notes.md → Section 6. Раскладка
   уточнена пользователем 2026-08-04 (точные grid-column/grid-row на каждый
   брейкпоинт, включая отдельную 4-колоночную сетку на ⩽768px, см. медиазапросы
   ниже) — базовые правила ниже соответствуют тиру ⩾1441px.
   Оба текста-заголовка ("Not once…"/"No drama…") — один грид-элемент
   (.section-6__headlines) с двумя параграфами внутри, не два самостоятельных
   грид-элемента (иначе при auto-строках между ними не остаётся гарантированного
   зазора). Оба портрета — независимые грид-элементы, каждый ближе к своей
   карточке в раскладке.
   Высота строк — auto (подстраивается под контент): при точной, без
   пересекающихся диапазонов расстановке блоков по строкам явная минимальная
   высота строк (как приходилось делать раньше) не нужна.
   ========================================================================== */

.section--6 {
  height: auto; /* высота по контенту, не 100vh */
}

.section--6 .section__content {
  grid-auto-rows: auto;
}

.section-6__intro {
  grid-column: 1 / 5;
  grid-row: 2 / 3;
}

.section-6__title {
  font: var(--text-heading);
  text-transform: uppercase;
  color: var(--color-turquoiseblue);
}

.section-6__subtitle {
  font: var(--text-subheading);
  color: var(--color-white-70);
  margin-top: var(--spacing-12) !important; /* ⩾1441px; 8px на 769–1440px, 16px на ⩽768px, см. ниже */
}

.section-6__video {
  grid-column: 5 / 9;
  grid-row: 1 / 5;
}

.section-6__video-media {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  background: rgba(255, 255, 255, 0.08); /* заглушка-фон, пока видео не загружено */
}

.section-6__video-link {
  margin-top: var(--spacing-16) !important; /* между видео и кнопкой-ссылкой, все брейкпоинты */
}

.section-6__headlines {
  grid-column: 9 / 13;
  grid-row: 3 / 4;
}

.section-6__headline {
  font: var(--text-body-lg);
  text-transform: uppercase;
  color: var(--color-turquoiseblue);
  text-align: justify;
}

/* "пустая строка" между двумя текстами — точного значения в источнике нет,
   подобрано по пропорциям эталонного скриншота, сверить визуально */
.section-6__headline + .section-6__headline {
  margin-top: var(--spacing-24) !important;
}

.section-6__portrait--1 {
  grid-column: 1 / 4;
  grid-row: 5 / 6;
}

.section-6__portrait--2 {
  grid-column: 10 / 13;
  grid-row: 6 / 7;
}

.section-6__portrait-media {
  /* "ширина 2 колонки" — здесь: 2 из 3 колонок, которые занимает сам блок карточки
     (grid-column 1/4 = 3 колонки); без учёта --grid-gap внутри этой пропорции
     (точной формулы в источнике нет) — сверить визуально */
  width: 66.6667%;
  aspect-ratio: 1 / 1;
  overflow: hidden; /* маска под параллакс-сдвиг картинки внутри, см. main.js */
  border-radius: var(--radius-card);
  position: relative;
}

.section-6__portrait--2 .section-6__portrait-media {
  /* вторая карточка (Инна) — фото прижато к правому краю блока, не к левому */
  margin-left: auto;
}

.section-6__portrait-img {
  /* выше/ниже границ контейнера — запас на параллакс-сдвиг (см. main.js), аналогично
     .card__bg у Section 3 */
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
}

.section-6__portrait-quote {
  margin-top: var(--spacing-16) !important; /* между картинкой и текстом, ⩾1025px (оба тира); 24px на ⩽1024px, см. ниже */
  font: var(--text-body);
  color: var(--color-white-50);
  text-align: justify;
}

.section-6__outro {
  grid-column: 1 / 4;
  grid-row: 7 / 8;
}

.section-6__outro-text {
  font: var(--text-heading-sm);
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-white-70);
}

.section-6__outro-text-accent {
  color: var(--color-turquoiseblue);
}

.section-6__cta {
  margin-top: var(--spacing-36) !important; /* между текстом и кнопкой блока 6, все брейкпоинты */
}

/* ==========================================================================
   Section 7 — тот же шаблон, что Section 2/4: .section-titles (title+subtitle,
   8 колонок) сверху и .section-texts (tag 4 + текст 8) снизу переиспользуются
   как есть, своих классов раскладки не требуется. Отличается только высотой
   секции и оттенком/высотой оверлея (см. выше). Расстояния внутри секции — те
   же значения, что у Section 2. См. design/layout-notes.md → Section 7.
   ========================================================================== */

.section--7 {
  height: 100vh;
  /* Зазор перед будущей Section 8 — тот же приём и то же значение, что у
     .section--2/.section--4 (см. main.js): угасание контента после анпина
     укладывается сюда. */
  margin-bottom: 33vh;
}

.section--7 .section__content {
  height: 100%;
  grid-template-rows: 1fr auto;
  column-gap: var(--grid-gap);
  row-gap: 0;
}

/* ==========================================================================
   Section 8 — тот же принцип вложенной сетки, что у Section 3: Content на 10
   из 12 внешних колонок, внутри — своя 3-колоночная сетка под 3 карточки, а
   нижний блок (текст + кнопка) занимает 2 из этих 3 локальных колонок (слева,
   в отличие от Section 3, где он справа). Карточки — тот же компонент
   .card--photo, но с другим наполнением: тег/заголовок/текст сверху (обёртка
   .card__top из дерева слоёв), кнопка-ссылка прибита к низу карточки, градиент
   идёт сверху вниз. См. design/layout-notes.md → Section 8.
   .card__top собственных стилей не требует — это чисто группирующий элемент
   (флекс-ребёнок .card__content), интервалы внутри заданы margin-top у
   заголовка и текста.
   ========================================================================== */

.section-8__grid {
  grid-column: 2 / 12; /* 10 из 12 внешних колонок, по центру */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* локальная 3-колоночная сетка */
  row-gap: var(--spacing-48); /* блок карточек → нижний блок */
  column-gap: var(--spacing-24); /* ⩾1441px; 12px на ⩽1440px, см. медиазапросы ниже */
}

.section-8__card {
  grid-row: 1;
  height: 540px; /* ⩾1441px, per breakpoint — см. медиазапросы ниже */
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-36) var(--spacing-24) !important;
}

/* Ступеньки: в Section 8 самая верхняя — левая (обратный порядок относительно
   Section 3). 72/144px — шаг ступеньки, не отступ между элементами, поэтому
   144px вне шкалы отступов используется как есть. */
.section-8__card--1 {
  grid-column: 1 / 2;
  margin-top: 0;
}

.section-8__card--2 {
  grid-column: 2 / 3;
  margin-top: var(--spacing-72) !important;
}

.section-8__card--3 {
  grid-column: 3 / 4;
  margin-top: 144px;
}

.section-8__card .card__overlay {
  top: 0; /* градиент прибит к ВЕРХНЕЙ границе карточки (в Section 3 — к нижней) */
  height: 360px; /* ⩾1441px, per breakpoint — см. медиазапросы ниже */
  /* цвет градиента — свой на каждую карточку, задаётся инлайн в HTML */
}

/* Наполнение карточки у Section 8 и Section 9 устроено одинаково (тег → заголовок →
   текст сверху, кнопка-ссылка прибита к низу) и интервалы внутри совпадают — общие
   правила на обе секции, чтобы не дублировать. Различаются только высота карточки,
   паддинг и градиент — они заданы отдельно у каждой секции. */
.section-8__card .card__content,
.section-9__card .card__content {
  justify-content: space-between; /* .card__top сверху, кнопка-ссылка снизу */
}

.section-8__card .card__title,
.section-9__card .card__title {
  margin-top: var(--spacing-36) !important; /* тег → заголовок; 24px на ⩽1440px, см. медиазапросы */
}

.section-8__card .card__text,
.section-9__card .card__text {
  margin-top: var(--spacing-12) !important; /* заголовок → текст, все брейкпоинты */
}

.section-8__footer {
  grid-column: 1 / 3; /* 2 из 3 колонок внутренней сетки, левый край */
  grid-row: 2;
}

.section-8__footer-text {
  font: var(--text-body-lg);
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-white-70);
}

.section-8__cta {
  margin-top: var(--spacing-36) !important;
}

/* ==========================================================================
   Section 9 — самая многоблочная секция: пять блоков друг под другом на общей
   12-колоночной сетке Content. Первые два — уже готовые .section-titles
   (title+subtitle, 8 кол.) и .section-texts (tag + текст 8 кол.), те же, что у
   Section 2/4/7 (у них в базовых правилах уже стоят grid-row 1 и 2, что здесь
   как раз совпадает с нужным порядком). Дальше — карточки (2 шт. по 6 кол.,
   ступенькой), текст, линия и контактный блок.
   Карточки — тот же .card--photo с .card__top, что у Section 8 (общие правила
   наполнения см. выше), отличаются высотой, паддингом и градиентом.
   Вертикальные интервалы между блоками одинаковые, поэтому заданы одним
   row-gap на Content, а не отдельными margin у каждого блока.
   См. design/layout-notes.md → Section 9.
   ========================================================================== */

.section--9 {
  height: auto; /* высота по контенту */
}

.section--9 .section__content {
  row-gap: var(--spacing-72); /* ⩾1441px; 48px на ⩽1440px, см. медиазапросы ниже */
}

.section-9__cards {
  grid-column: 1 / 13;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 карточки по 6 из 12 колонок */
  /* 12px на всех брейкпоинтах — не --grid-gap (тот 24/16/12 по тирам) */
  column-gap: var(--spacing-12);
}

.section-9__card {
  height: 500px; /* ⩾1441px, per breakpoint — см. медиазапросы ниже */
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-36) var(--spacing-24) !important;
}

.section-9__card--2 {
  margin-top: var(--spacing-72) !important; /* ступенька: вторая карточка ниже первой */
}

.section-9__card .card__overlay {
  top: 0; /* градиент прибит к верхней границе карточки */
  height: 280px; /* ⩾1441px, per breakpoint — см. медиазапросы ниже */
  /* цвет градиента — свой, нестандартная формула с точкой останова на 50%,
     задаётся инлайн в HTML (см. layout-notes.md) */
}

.section-9__text {
  grid-column: 1 / 9; /* 8 левых колонок */
  grid-row: 4;
  font: var(--text-body-lg);
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-white-70);
}

.section-9__line {
  grid-column: 1 / 13;
  grid-row: 5;
  height: var(--border-hairline);
  background: var(--color-white-30);
}

/* Контактный блок — две колонки по 5 из 6 колонок своей половины (левая 1–5,
   правая 7–11) на вложенной 12-колоночной сетке, чтобы они легли ровно на
   основную. Слева — заголовок "GET IN TOUCH" (решение пользователя 2026-08-07:
   он переехал сюда из отдельной строки над колонками, а текст, который был в
   левой колонке, убран), справа — контакты. */
.section-9__contact {
  grid-column: 1 / 13;
  grid-row: 6;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
}

.section-9__contact-title {
  grid-column: 1 / 6;
  /* те же характеристики, что у .section-titles__title (указание пользователя) —
     значения, а не сам класс: это другой БЭМ-блок */
  font: var(--text-heading);
  text-transform: uppercase;
  color: var(--color-turquoiseblue);
  overflow: hidden; /* маска для построчного GSAP-reveal (SplitText), как у .section-titles__title */
}

.section-9__contact-col {
  grid-column: 7 / 12;
  font: var(--text-body-lg);
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-white-70);
}

/* ==========================================================================
   Footer — единственный блок страницы со сплошным цветом фона вместо фото
   (`--color-astronautmid`), поэтому своего слоя в .page-backgrounds у него нет.
   Overlay из дерева слоёв (`rgba(39,87,116,0)`) полностью прозрачен и в CSS не
   переносится — см. design/layout-notes.md → Footer.
   Content — та же 12-колоночная сетка (.section__content), но свой, третий тип
   паддинга: верхний 0, чтобы декоративный wordmark прилегал к верхней границе.
   ========================================================================== */

.footer {
  position: relative;
  /* фон вынесен в ::before — его нужно маскировать, чтобы вырезать буквы */
}

/* Сплошная заливка футера с вырезанным из неё wordmark'ом.
   Маска из двух слоёв: сплошная заливка МИНУС SVG (`mask-composite: exclude`).
   Там, где в SVG альфа = 1, фон футера убирается насквозь — и видно то, что лежит
   позади: слой `.page-backgrounds` с фото Section 9 (у #smooth-content своего фона
   нет, поэтому дырка доходит именно до него). Альфа в самом SVG идёт сверху вниз
   от 1 к 0, поэтому вырез открыт у верхней границы и затухает к низу — буквы
   растворяются, футер становится сплошным.
   Цвета внутри SVG роли не играют: CSS-маска из картинки читает только альфа-канал. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-astronautmid);
  -webkit-mask-image: url('https://cdn.accelonline.io/WvaYseVrbU6sQ7CAXyHMPA/images/U1Ri_I6fwkO7QaGScDwdOg.svg'), linear-gradient(#000, #000);
  mask-image: url('https://cdn.accelonline.io/WvaYseVrbU6sQ7CAXyHMPA/images/U1Ri_I6fwkO7QaGScDwdOg.svg'), linear-gradient(#000, #000);
  /* wordmark выравнивается по колонке Content — отсюда боковой паддинг в position/size */
  -webkit-mask-position: var(--spacing-36) 0, 0 0;
  mask-position: var(--spacing-36) 0, 0 0;
  -webkit-mask-size: calc(100% - var(--spacing-36) * 2) auto, 100% 100%;
  mask-size: calc(100% - var(--spacing-36) * 2) auto, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor; /* легаси-эквивалент exclude в WebKit */
  mask-composite: exclude;
}

.footer .section__content {
  padding: 0 var(--spacing-36) var(--spacing-36) var(--spacing-36);
  row-gap: var(--spacing-24); /* между всеми блоками футера — 24px */
}

/* Только резервирует высоту под вырез — сам SVG рисуется маской в .footer::before.
   aspect-ratio — натуральные пропорции файла (1368×129), поэтому высота получается
   ровно та же, что была у <img> в потоке. */
.footer__wordmark {
  grid-column: 1 / 13;
  aspect-ratio: 1368 / 129;
}

.footer__columns {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* колонки ложатся на основную сетку */
  column-gap: var(--grid-gap);
  align-items: start;
}

.footer__logo {
  grid-column: 1 / 6;
}

.footer__logo-img {
  /* натуральная высота самого SVG (134×53) — в эталоне лого футера отрисовано
     1:1, а не подогнано под 45px, как лого навигации: доля от ширины Content
     совпадает со скриншотом (9.7% против замеренных 9.9%) */
  height: 53px;
}

.footer__menu-block {
  grid-column: 6 / 10;
  display: flex;
  gap: var(--spacing-24);
}

.footer__menu-line {
  flex: 0 0 auto;
  width: var(--border-hairline);
  background: var(--color-white-30);
}

.footer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.footer__menu-item a {
  font: var(--text-button) !important;
  text-transform: uppercase !important;
  color: var(--color-white-50) !important;
}

.footer__menu-item--active a {
  color: var(--color-turquoiseblue-70) !important;
}

/* Сетка 2×3 и на десктопе, и на мобильной (подтверждено обоими скриншотами).
   Колонки auto, а не 1fr — ширина пилюли по её тексту, весь блок прижат вправо. */
.footer__social {
  grid-column: 10 / 13;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--spacing-8);
  justify-content: end;
}

/* "Footer Small button" — тот же .button--small, но обводка/текст --color-white-50
   вместо --color-white-70 (см. design/style-guide.md → Small Button) */
.button--small-footer {
  border-color: var(--color-white-50) !important;
  color: var(--color-white-50) !important;
}

.footer__line {
  grid-column: 1 / 13;
  height: var(--border-hairline);
  background: var(--color-white-30);
}

/* space-between, а не колонки основной сетки: по замерам эталона средняя группа
   ссылок стоит ровно посередине между копирайтом и "Site by", и с колонками
   верхнего блока она не выравнивается */
.footer__bottom {
  grid-column: 1 / 13;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-24);
}

.footer__copyright {
  font: var(--text-body);
  text-transform: uppercase;
  color: var(--color-white-50);
}

.footer__links {
  display: flex;
  gap: var(--spacing-24);
}

/* "Footer Link Button" — заглавными, --color-white-50, нижняя граница-hairline
   вместо подчёркивания (см. design/style-guide.md → Link Button) */
.link-button--footer {
  text-transform: uppercase !important;
  color: var(--color-white-50) !important;
}

.link-button--footer .link-button__text {
  text-decoration: none !important;
  border-bottom: var(--border-hairline) solid currentColor !important;
}

/* ==========================================================================
   Брейкпоинты — desktop-first, см. design/design-tokens.md.
   База (без медиазапроса, :root выше) — брейкпоинт ⩾1440px.
   ========================================================================== */

@media (max-width: 1440px) {
  /* 1024–1439px — типографика совпадает с базой (единый масштаб ⩾1024px, отдельного
     варианта под 1440px в источнике нет), различаются grid-gap/паддинги/карточка/фото */
  :root {
    --grid-gap: var(--spacing-16);
    --text-link: 400 12px/1.35 var(--font-inter);
    --text-button: 400 12px/1.5 var(--font-inter);
    --text-body: 400 13px/1.3 var(--font-inter);
    --text-body-lg: 400 20px/1.05 var(--font-onest); /* uppercase */
    --text-subheading-lg: 300 18px/1.05 var(--font-onest);
    --text-heading-sm: 300 22px/1.05 var(--font-onest); /* uppercase */
    --text-heading: 300 42px/0.9 var(--font-onest); /* uppercase */
    --text-heading-lg: 300 54px/0.9 var(--font-onest); /* uppercase */
  }

  .section--type-a .section__content {
    padding: var(--spacing-108) var(--spacing-36) var(--spacing-36) var(--spacing-36) !important;
  }

  .section--type-b .section__content {
    padding: var(--spacing-108) var(--spacing-36) var(--spacing-108) var(--spacing-36) !important;
  }

  .section-titles__subtitle {
    margin-top: var(--spacing-8) !important;
  }

  .hero__card {
    gap: var(--spacing-20);
    padding: var(--spacing-20) !important;
  }

  .hero__card .card__icon {
    /* gap карточки на этом брейкпоинте — 20px, см. формулу в правиле выше */
    margin-bottom: -44px;
  }

  .page-backgrounds__photo {
    top: 50px;
    width: 778px;
  }

  .section-3__grid {
    column-gap: var(--spacing-12);
  }

  .section-3__card {
    height: 460px;
    padding: var(--spacing-20) var(--spacing-20) var(--spacing-36) var(--spacing-20) !important;
  }

  .section-3__card .card__overlay {
    height: 200px;
  }

  .section-3__card .card__title {
    margin-bottom: var(--spacing-24) !important;
  }

  .section-8__grid {
    column-gap: var(--spacing-12);
  }

  .section-8__card {
    height: 460px;
    padding: var(--spacing-20) var(--spacing-20) var(--spacing-36) var(--spacing-20) !important;
  }

  .section-8__card .card__overlay {
    height: 340px;
  }

  .section-8__card .card__title,
  .section-9__card .card__title {
    margin-top: var(--spacing-24) !important; /* тег → заголовок, 24px на всех тирах кроме ⩾1441px */
  }

  .section--9 .section__content {
    row-gap: var(--spacing-48); /* интервалы между блоками: 48px на ⩽1440px */
  }

  .section-9__card {
    height: 420px;
    padding: var(--spacing-20) var(--spacing-20) var(--spacing-36) var(--spacing-20) !important;
  }

  .section-5__card {
    gap: var(--spacing-16); /* тег → body, 16px на 1025–1440px (не 24px) */
    padding: var(--spacing-24) var(--spacing-16) var(--spacing-24) var(--spacing-16) !important;
    margin-top: var(--spacing-12) !important; /* гэп между карточками 12px на 769–1440px (не 16px) */
  }

  .section-6__subtitle {
    margin-top: var(--spacing-8) !important; /* тег→заголовок блока 1, 8px на 769–1440px (не 12px) */
  }
}

@media (max-width: 1024px) {
  :root {
    --grid-gap: var(--spacing-12);
    --text-link: 400 12px/1.35 var(--font-inter);
    --text-button: 400 12px/1.5 var(--font-inter);
    --text-body: 400 13px/1.3 var(--font-inter);
    --text-body-lg: 400 20px/1.05 var(--font-onest); /* uppercase */
    --text-subheading-lg: 300 16px/1.05 var(--font-onest);
    --text-heading-sm: 300 22px/1.05 var(--font-onest); /* uppercase */
    --text-heading: 300 38px/0.9 var(--font-onest); /* uppercase */
    --text-heading-lg: 300 54px/0.9 var(--font-onest); /* uppercase */
  }

  .nav {
    padding: var(--spacing-24) !important;
  }

  /* планшет — то же свёрнутое меню, что и на мобильном (только лого + линия + бургер);
     вторая линия (после ul) скрывается вместе с меню, первая остаётся и растягивается
     (flex: 1 1 auto), прижимая бургер к правому краю — тот же приём, что и на десктопе */
  .nav__menu,
  .nav__menu + .nav__line,
  .nav__button {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  /* планшет (769–1024px) — по решению пользователя (2026-08-04) ведёт себя как мобильная
     версия: карточка скрыта, кнопка — в общем блоке intro, блок прибит к низу секции;
     паддинг Content на этом брейкпоинте не меняется (тот же, что и в блоке 1439px выше) */
  .section--hero .section__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .hero__intro {
    grid-column: auto;
  }

  .hero__title,
  .hero__subtitle {
    margin-top: var(--spacing-8) !important;
  }

  .hero__subtitle {
    /* на десктопе подзаголовок уже 7 колонок из 12 (см. правило выше), но здесь и на
       мобильном раскладка не колоночная — на всю ширину, как по скриншоту */
    width: auto;
  }


  .hero__card {
    display: none;
  }

  .hero__mobile-cta {
    display: inline-flex;
    margin-top: var(--spacing-24) !important;
  }

  .page-backgrounds__photo {
    top: 50px;
    /* min-width вместо фиксированной width (решение с пользователем 2026-08-04): на узком
       краю диапазона (769px) даёт те же 845px, что и раньше, но на широком краю (ближе к
       1024px) фото растягивается на всю ширину экрана вместо того, чтобы оставлять просветы
       фона по бокам — 845px было заметно уже вьюпорта у верхней границы этого брейкпоинта */
    width: 106%;
    min-width: 845px;
  }

  .section-3__card {
    height: 380px;
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24) var(--spacing-16) !important;
  }

  .section-3__card .card__overlay {
    height: 200px;
  }

  /* планшет (769–1024px) — по решению пользователя (2026-08-04) Content на всю ширину
     (12 из 12 внешних колонок), а не 10 из 12, как на десктопе (⩾1024px) */
  .section-3__grid {
    grid-column: 1 / 13;
  }

  /* планшет (769–1024px) — Content тоже на всю ширину (12 из 12 внешних колонок), как у
     Section 3 на этом брейкпоинте */
  .section-5__grid {
    grid-column: 1 / 13;
  }

  .section-8__card {
    /* 440px, не 380px как у Section 3 — на этом тире высоты карточек Section 3 и 8
       расходятся (уточнено пользователем 2026-08-07) */
    height: 440px;
    /* !important обязателен: у того же селектора в @media (max-width: 1440px) выше padding
       тоже !important, и без него более раннее важное правило перебивало бы это по важности */
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24) var(--spacing-16) !important;
  }

  .section-8__card .card__overlay {
    height: 260px;
  }

  /* ⚠️ Планшет на всю ширину — по аналогии с Section 3 и 5, где это прямое решение
     пользователя (2026-08-04). Для Section 8 отдельно не задокументировано —
     сверить. */
  .section-8__grid {
    grid-column: 1 / 13;
  }

  .section-9__card {
    height: 440px;
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24) var(--spacing-16) !important;
  }

  .footer .section__content {
    padding: 0 var(--spacing-36) var(--spacing-48) var(--spacing-36);
  }

  .section-9__card .card__overlay {
    height: 300px;
  }

  .section-5__card {
    gap: var(--spacing-12); /* тег → body, 12px на 769–1024px */
  }

  /* От текста до первой карточки и от последней карточки до текста — 96px на ⩽1024px (не
     48px, как на ⩾1025px). Наследуется и на ⩽768px (мобильный медиазапрос ниже это не
     переопределяет) — там то же значение. */
  .section-5__card.section-5__card--1 {
    margin-top: 96px !important; /* см. комментарий у базового правила */
  }

  .section-5__footer {
    margin-top: 96px;
  }

  .section-6__portrait-quote {
    margin-top: var(--spacing-24) !important; /* между картинкой и текстом, 24px на ⩽1024px (не 16px) */
  }

  /* 769–1024px — карточки и аутро снова шире (4 колонки вместо 3), см. layout-notes.md */
  .section-6__portrait--1 {
    grid-column: 1 / 5;
  }

  .section-6__portrait--2 {
    grid-column: 9 / 13;
  }

  .section-6__outro {
    grid-column: 1 / 5;
  }

  .section-6__portrait-media {
    width: 50%; /* 2 из 4 колонок блока на этом брейкпоинте (не 3) */
  }
}

@media (max-width: 768px) {
  :root {
    --text-link: 400 13px/1.35 var(--font-inter);
    --text-button: 400 13px/1.5 var(--font-inter);
    --text-body: 400 14px/1.3 var(--font-inter);
    --text-body-lg: 400 18px/1.05 var(--font-onest); /* uppercase */
    --text-heading-sm: 300 24px/1.05 var(--font-onest); /* uppercase */
    --text-heading: 300 36px/0.9 var(--font-onest); /* uppercase */
    --text-heading-lg: 300 44px/0.9 var(--font-onest); /* uppercase */
  }

  .nav {
    padding: var(--spacing-12) !important;
  }

  .section--type-a .section__content {
    padding: var(--spacing-108) var(--spacing-12) var(--spacing-48) var(--spacing-12) !important;
  }

  .section--type-b .section__content {
    /* те же боковые отступы (12px), что у Типа A/Section 2 на этом брейкпоинте */
    padding: var(--spacing-108) var(--spacing-12) var(--spacing-108) var(--spacing-12) !important;
  }

  .page-backgrounds__overlay--hero.page-backgrounds__overlay--top {
    height: 105px;
  }

  .page-backgrounds__overlay--hero.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .page-backgrounds__overlay--2.page-backgrounds__overlay--top {
    height: 80px;
  }

  .page-backgrounds__overlay--2.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .page-backgrounds__overlay--3.page-backgrounds__overlay--top {
    height: 80px;
  }

  .page-backgrounds__overlay--3.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .page-backgrounds__overlay--4.page-backgrounds__overlay--top {
    height: 80px;
  }

  .page-backgrounds__overlay--4.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .page-backgrounds__overlay--5.page-backgrounds__overlay--top {
    height: 80px;
  }

  .page-backgrounds__overlay--5.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .page-backgrounds__overlay--6.page-backgrounds__overlay--top {
    height: 80px;
  }

  .page-backgrounds__overlay--6.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .page-backgrounds__overlay--7.page-backgrounds__overlay--top {
    height: 120px; /* не 80px, как у остальных секций — см. layout-notes.md */
  }

  .page-backgrounds__overlay--7.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .page-backgrounds__overlay--8.page-backgrounds__overlay--top {
    height: 80px;
  }

  .page-backgrounds__overlay--8.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .page-backgrounds__overlay--9.page-backgrounds__overlay--top {
    height: 80px;
  }

  .page-backgrounds__overlay--9.page-backgrounds__overlay--bottom {
    height: 560px;
  }

  .section-titles {
    /* на всю ширину (не "auto" — в CSS Grid это была бы всего одна колонка из 12, а не
       полная ширина; секция остаётся на grid, в отличие от Hero, которая на этом
       брейкпоинте переключается на flex) */
    grid-column: 1 / -1;
  }

  .section-titles__subtitle {
    margin-top: var(--spacing-16) !important;
  }

  .section-texts {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
  }

  .section-texts__text {
    width: auto;
  }

  .page-backgrounds__photo {
    top: 45px;
    /* min-width вместо фиксированной width — та же логика, что и на планшетном брейкпоинте
       выше (решение с пользователем 2026-08-04): 552px на узких телефонах, на всю ширину
       экрана на широком краю диапазона (ближе к 767px) */
    width: 104%;
    min-width: 520px;
  }

  /* Section 3 — карточки в столбец (не ступеньками), тексты на всю ширину; сама
     раскладка на мобильном не описана явно в источнике (см. layout-notes.md), но
     подтверждена мобильным скриншотом секции — карточки идут одна под другой.
     grid-column здесь уже не нужен — на всю ширину наследуется с планшетного
     брейкпоинта (см. @media max-width: 1024px выше) */
  .section-3__grid {
    display: flex;
    flex-direction: column;
    /* сброс row-gap:48px из базового (grid) правила — на flex-column оно тоже действует и
       складывалось с margin-top:12px карточек, давая 60px вместо документированных 12px;
       расстояния здесь целиком заданы margin-top на .section-3__card/--1 и .section-3__footer */
    row-gap: 0;
  }

  .section-3__card {
    height: 480px;
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-36) var(--spacing-24) !important;
    margin-top: var(--spacing-12) !important;
  }

  .section-3__card--1 {
    margin-top: var(--spacing-48) !important;
  }

  .section-3__card .card__overlay {
    height: 230px;
  }

  .section-3__footer {
    margin-top: var(--spacing-48) !important;
  }

  /* Section 8 — карточки в столбец на всю ширину, ступеньки не сохраняются.
     row-gap сбрасывается по той же причине, что и у Section 3: на flex-column
     базовый grid'овый row-gap продолжает действовать и складывался бы с margin-top. */
  .section-8__grid {
    display: flex;
    flex-direction: column;
    row-gap: 0;
  }

  .section-8__card {
    height: 480px;
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-36) var(--spacing-24) !important;
    margin-top: var(--spacing-12) !important; /* между карточками */
  }

  /* составной селектор — специфичность выше базового .section-8__card, иначе
     margin-top:12px выше перебил бы его по порядку каскада (та же ловушка, что
     была поймана на .section-5__card--1) */
  .section-8__card.section-8__card--1 {
    margin-top: 0 !important; /* первая карточка открывает секцию, отступ даёт паддинг Content */
  }

  .section-8__card .card__overlay {
    height: 300px;
  }

  .section-8__footer {
    margin-top: var(--spacing-48) !important;
  }

  /* Section 9 — карточки в столбец, текстовые блоки на всю ширину */
  .section-9__cards {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-12); /* между карточками */
  }

  .section-9__card {
    height: 480px;
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-36) var(--spacing-24) !important;
  }

  /* составной селектор — специфичность выше .section-9__card--2 из базы, иначе
     ступенька 72px осталась бы и в столбце (та же ловушка, что на Section 5/8) */
  .section-9__card.section-9__card--2 {
    margin-top: 0 !important; /* см. комментарий у .section-5__card--1 */
  }

  .section-9__card .card__overlay {
    height: 320px;
  }

  .section-9__text {
    grid-column: 1 / -1;
  }

  /* заголовок и контакты друг под другом */
  .section-9__contact {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-24); /* заголовок → текст */
  }

  /* Footer — лого отдельной строкой, под ним меню слева и соцсети справа
     (см. content.md → Footer, "Мобильная раскладка") */
  .footer .section__content {
    padding: 0 var(--spacing-12) var(--spacing-48) var(--spacing-12);
  }

  /* маска wordmark'а следует за боковым паддингом Content (12px вместо 36px) */
  .footer::before {
    -webkit-mask-position: var(--spacing-12) 0, 0 0;
    mask-position: var(--spacing-12) 0, 0 0;
    -webkit-mask-size: calc(100% - var(--spacing-12) * 2) auto, 100% 100%;
    mask-size: calc(100% - var(--spacing-12) * 2) auto, 100% 100%;
  }

  .footer__columns {
    grid-template-columns: 1fr auto;
    row-gap: var(--spacing-48); /* лого → блок меню+соцсети */
    column-gap: var(--spacing-12);
  }

  .footer__logo,
  .footer__menu-block,
  .footer__social {
    grid-column: auto;
  }

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

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
  }

  .section-9__contact-title,
  .section-9__contact-col {
    grid-column: 1 / -1;
  }

  /* Section 5 — карточки в столбец (тег/заголовок/текст друг под другом), текстовые
     блоки на всю ширину локальной сетки */
  .section-5__intro,
  .section-5__card,
  .section-5__footer {
    grid-column: 1 / 11;
  }

  .section-5__card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24); /* тег → body */
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-48) var(--spacing-24) !important;
  }

  .section-5__card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12); /* заголовок → текст */
    width: 100%;
  }

  .section-5__card .card__text {
    flex: 0 0 auto;
  }

  /* .section-5__card--1/.section-5__footer margin-top:96px наследуются с планшетного
     медиазапроса выше (max-width: 1024px) — на мобильной то же значение, переопределение
     не требуется */

  /* Section 6 — на ⩽768px своя 4-колоночная (не 12) сетка, см. layout-notes.md →
     Section 6, "391...768". Гэп между колонками 12px, между строками — 72px (не
     var(--grid-gap) — здесь он должен отличаться по осям, поэтому column-gap/row-gap
     заданы раздельно, а не через общий gap). */
  .section--6 .section__content {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--spacing-12);
    row-gap: 72px;
  }

  .section-6__intro {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
  }

  .section-6__video {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
  }

  .section-6__headlines {
    grid-column: 2 / 5;
    grid-row: 3 / 4;
  }

  .section-6__portrait--1 {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
  }

  .section-6__portrait--2 {
    grid-column: 2 / 5;
    grid-row: 5 / 6;
  }

  .section-6__outro {
    grid-column: 1 / 4;
    grid-row: 6 / 7;
  }

  .section-6__portrait-media {
    width: 66.6667%; /* 2 из 3 колонок блока карточки на этом брейкпоинте */
  }
}