/* ══════════════════════════════════════════════════════
   SEVEN v2 — семь секций
   ══════════════════════════════════════════════════════ */

/* ═══════════ 01 · ПРОЛОГ ═══════════ */

.frame {
  position: absolute;
  inset: clamp(14px, 2vw, 26px);
  border: 1px solid rgba(239, 237, 227, .12);
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, transparent 50%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, transparent 50%, #000 82%, transparent 100%);
}

.hud {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--micro);
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.hud i { color: var(--orange); font-style: normal; }
.hud--tl { top: calc(var(--pad) + 8px); left: calc(var(--pad) + 8px); }
.hud--tr { top: calc(var(--pad) + 8px); right: calc(var(--pad) + 8px); }
.hud--bl { bottom: calc(var(--pad) + 8px); left: calc(var(--pad) + 8px); }
.hud--br { bottom: calc(var(--pad) + 8px); right: calc(var(--pad) + 8px); }

.hud__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(255, 119, 0, .5); }
  50%      { opacity: .4; box-shadow: 0 0 0 6px rgba(255, 119, 0, 0); }
}

#clock { font-variant-numeric: tabular-nums; }

/* логотип */
.hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hero__ghost,
.hero__mark {
  font-size: clamp(64px, 16.6vw, 330px);
  /* гарнитура прежняя (Zalando Sans Expanded), но 500 на таком масштабе
     читался тонким штрихом рядом со сплошным залитым клином V — тяжелее
     начертание и чуть сжатый трекинг превращают набор в кастомный
     логотип, а не «просто текст крупным кеглем». 600 — конкретное
     начертание, реально подгружаемое Google Fonts (шаг весов там 100,
     произвольное число вроде 650 браузер просто округлил бы сам) */
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.015em;
  text-align: center;
  white-space: nowrap;
}

/* эхо логотипа: заметно крупнее, чтобы читалось как ореол, а не как промах приводки */
.hero__ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.24);
  color: transparent;
  -webkit-text-stroke: 1px var(--paper);
  opacity: .06;
  pointer-events: none;
}

.hero__mark {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--paper);
}
.hero__mark::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(110px, 16vw, 260px);
  height: clamp(90px, 11vw, 170px);
  background: var(--orange);
  opacity: .55;
  border-radius: 50%;
  filter: blur(clamp(45px, 6vw, 85px));
  z-index: -1;
}

/* было: кастомный SVG-клин поверх родного глифа V — родной глиф не сходится
   в точку (низ обрублен плоским срезом), клин должен был это перекрыть и
   удлинить. После нескольких раундов подгонки (ширина, высота входа,
   поправка горизонтального центрирования — align-items:center центрирует
   SVG по ширине бокса буквы, а не по фактическому центру чернил) шов
   пропадал в моих тестах, но возвращался у реального пользователя в другом
   браузере/масштабе — сама техника завязана на хинтинг шрифта, а он
   недетерминирован между рендерерами. Убрано: просто буква V родным
   глифом, без надстройки. Класс оставлен ради собственного цвета буквы */
.hero__v {
  color: var(--orange);
}

/* стоит отдельно от .hero — не в общем центрированном стеке с лого,
   иначе даже с отступом задевает блюр свечения за V (до 85px).
   в покое — почти невесомая надпись, не спорит с сиянием;
   рамка и заливка появляются только на наведении, тогда это и читается
   как кнопка. единственный элемент на сайте с заливкой при hover */
.hero__cta {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pad) + 74px);
  /* z-index обязателен: .hero — слой inset:0 с z-index:1 на весь экран,
     без него он ложится поверх кнопки и перехватывает клики */
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  font-size: var(--micro);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(239, 237, 227, .55);
  transition: translate .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  translate: -50% 0;
  box-shadow: 0 0 0 rgba(255, 119, 0, 0);
}
/* заливка идёт наискось, эхом клина в самой букве V логотипа —
   не мгновенная смена цвета, а видимое движение */
.hero__cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--orange);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path .5s var(--ease);
  z-index: -1;
}
.hero__cta:hover::before {
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.hero__cta span,
.hero__cta i {
  position: relative;
  transition: color .35s var(--ease) .08s, transform .4s var(--ease);
}
.hero__cta i { font-style: normal; letter-spacing: 0; color: var(--orange); }
.hero__cta:hover {
  border-color: var(--orange);
  box-shadow: 0 10px 28px rgba(255, 119, 0, .22);
  translate: -50% -2px;
}
.hero__cta:hover span,
.hero__cta:hover i { color: var(--asphalt); transform: translate(3px, -3px); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pad) + 6px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--dim);
}
.scroll-hint i {
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, var(--orange), transparent);
  animation: drop 2.2s var(--ease) infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* ═══════════ 06 · УСЛОВИЯ ═══════════ */

#s6 {
  display: flex;
  flex-direction: column;
  /* было center — пока контента было мало (только цена), лишний воздух
     от min-height:100svh делился поровну и смотрелся уместно. С фактами
     и блоком вопросов секция на типичном экране почти всегда выше своего
     контента, и та же центровка отдавала весь остаток одним провалом
     ПОД вопросами — контент как будто обрывался, не доходя до конца
     экрана. На мобиле эта проблема решена так же (см. responsive.css) */
  justify-content: flex-start;
  padding-top: clamp(8px, 2vh, 28px);
  /* базовый ритм между всеми блоками секции — минимум, ниже которого
     зазор не сожмётся. Тег и оффер держатся строго на нём (плотная пара
     сверху), а лента и вопросы добирают к нему ещё и margin-top:auto —
     см. ниже */
  gap: clamp(28px, 4.5vh, 48px);
  /* min-height:100svh из общего .sec сознательно оставлен: все 7 секций
     держат размер экрана, и «условия» короче соседей смотрелись бы
     нарушением ритма при перелистывании */
}

/* свободный остаток вместо одного провала под вопросами теперь делится
   между двумя auto-отступами поровну (так работают auto-margin в flex —
   весь излишек распределяется между ними равными долями): «офер → лента»
   и «лента → вопросы» становятся одинаковыми, а сам блок вопросов
   отъезжает вниз настолько, насколько на экране есть места, вместо того
   чтобы липнуть прямо под лентой. Тег и оффер в этом не участвуют —
   остаются на минимальном gap сверху */
.offer__ticker--b { margin-top: auto; }
.faq              { margin-top: auto; }

/* порядок задан явно, потому что в разметке лента идёт ПЕРЕД контентом
   (так было нужно, пока она лежала на absolute-подложке) — на экране же
   встаёт разделителем между ценой и вопросами, замещая собой волосяную
   линию: бегущая строка держит внимание не хуже границы, но не добавляет
   ещё одну тонкую деталь к и так плотному экрану */
#s6 > .sec__tag   { order: -4; }
.offer            { order: -3; }
.offer__ticker--b { order: -2; }
.faq              { order: -1; }

/* колонка цены — auto, а не фиксированная минмакс: сумма прописи в
   crupном кегле шире 360px уже на среднем десктопе, а с auto колонка
   растёт под контент вместо того чтобы обрезаться о соседнюю колонку.
   .offer__stat — единая обёртка над ценой и сроком: раньше это были два
   прямых потомка .offer, и auto-раскладка grid клала «срок» во вторую
   колонку рядом с ценой вместо места под ней, а тело съезжало в третий ряд */
.offer {
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.offer__stat { min-width: 0; display: flex; flex-direction: column; }

/* второй тариф — не отдельная карточка, а более тихая строка под первым:
   общая рамка .offer держит ритм страницы, а не превращается в прайс-лист */
.offer__tier + .offer__tier {
  margin-top: clamp(20px, 3vh, 32px);
  padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid var(--hair);
}

.offer__price--sm {
  gap: .1em;
}
.offer__price--sm .offer__sum { font-size: clamp(30px, 3.6vw, 52px); }
.offer__price--sm .offer__cur { font-size: clamp(16px, 1.8vw, 26px); }

.offer__price {
  display: flex;
  align-items: baseline;
  gap: .12em;
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--fg);
}
.offer__from {
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 300;
  color: var(--dim);
}
.offer__sum { font-size: clamp(52px, 7vw, 108px); }
.offer__cur {
  font-size: clamp(24px, 3vw, 46px);
  color: var(--orange);
  /* .12em общего gap хватало для «₽» — один узкий глиф. «дней» четыре
     буквы, тот же зазор читается как слипшееся «10дней» */
  margin-left: .12em;
}

.offer__terms {
  margin-top: clamp(10px, 1.6vh, 18px);
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .08em;
  color: var(--dim);
}
.offer__terms sup { color: var(--orange); }

.offer__body {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.4vh, 44px);
  /* лид не должен казаться подписью к цифре, а отдельным блоком —
     чуть смещаем вниз, чтобы верх колонки не совпадал с верхом цены */
  padding-top: clamp(4px, .6vh, 10px);
}

/* сан-сериф, не курсив Playfair — тон здесь деловой, а не как у
   поэтичных слоганов на других экранах (тот же приём, что у lab__invite) */
.offer__lead {
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 26px);
  line-height: 1.5;
  color: var(--fg);
  max-width: 48ch;
}

.offer__facts { max-width: 62ch; }
/* здесь дт и дд с общей .facts читались почти одним весом — рядом с
   огромными цифрами тарифа мелкая разница в 2-3px не считывается.
   Не трогаем .facts целиком (тот же компонент держит факты на 02 и 05,
   там своя, уже сбалансированная композиция) — правим только тут:
   подпись плотнее и заметно тише, значение остаётся тем же */
.offer__facts dt { font-weight: 500; letter-spacing: .24em; }
.offer__facts dd { font-size: clamp(13px, 1.05vw, 15.5px); }

/* обе строки — сноски одного порядка, держим их рядом друг с другом;
   отступ от фактов задаёт общий gap .offer__body, как и раньше */
.offer__notes { display: flex; flex-direction: column; gap: 8px; }
.offer__note {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--dim);
}
.offer__note sup { color: var(--orange); margin-right: .15em; }


/* ── частые вопросы ──
   строки-аккордеон в том же ключе, что «направления» на 03: номер слева,
   вопрос крупно, волосяная линия между строками. Свёрнуты по умолчанию.
   Разделяет с ценой уже не своя линия, а лента выше по разметке (общий
   gap #s6) — второй границы того же смысла тут не нужно */
/* без max-width: .offer выше занимает всю ширину секции (grid на две
   колонки), а вопросы на 900px обрывались на середине широкого экрана —
   справа оставалось пустое поле, будто блоку не хватает контента.
   .faq__text ниже стоит на flex:1 — строка сама растягивается на всю
   доступную ширину, а плюс/минус уезжает к правому краю вместе с ней,
   как в направлениях на 03 (там та же схема: подпись слева, знак у края) */
.faq { width: 100%; }

/* крупнее и плотнее обычного sec__tag: тот открывает пустой в меру
   экран сверху, а этот — уже плотную секцию, среди офера и фактов та же
   var(--micro) терялась и читалась мельче остального текста вокруг,
   а не как заголовок нового блока */
.faq__tag {
  font-size: clamp(11px, .95vw, 13px);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: clamp(10px, 1.6vh, 20px);
}

/* дальше от ленты, чем сама лента от офера над ней: у ленты уже две линии
   (верх/низ), и старая рамка первого вопроса сразу под тегом «частые
   вопросы» вставала третьей на том же малом участке — читалось частоколом.
   Линия между вопросами по-прежнему есть (+ .faq__item), просто не перед
   первым: тег и так достаточно отделяет заголовок от списка сам по себе.
   Замыкающей линии после последнего вопроса тоже больше нет — список и
   так читается блоком за счёт внутренних разделителей, а закрывать его
   снизу нечем: следом идёт просто пустое поле секции, не другой блок,
   которому нужна была бы граница */
.faq__item + .faq__item { border-top: 1px solid var(--hair); }

.faq__q {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(13px, 1.9vh, 20px) 0;
  cursor: pointer;
  list-style: none;
  transition: padding-left .45s var(--ease), color .35s var(--ease);
}
/* маркер-треугольник у <summary> убирается только так — в Safari своим
   псевдоэлементом, в остальных через list-style у самого элемента */
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { padding-left: clamp(6px, 1vw, 16px); }

.faq__n {
  flex: none;
  font-size: var(--micro);
  letter-spacing: .28em;
  color: var(--dim);
  transition: color .35s var(--ease);
}
.faq__q:hover .faq__n,
.faq__item[open] .faq__n { color: var(--orange); }

.faq__text {
  flex: 1;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 300;
  line-height: 1.35;
  /* приглушённый тон в закрытом состоянии — вопросы читаются вторым
     планом рядом с ценой. Полный контраст возвращается на hover/open,
     тем же приёмом, что уже держит .dir__n на экране направлений */
  color: var(--dim);
  transition: color .35s var(--ease);
}
.faq__q:hover .faq__text,
.faq__item[open] .faq__text { color: var(--fg); }

/* плюс из двух линий: вертикальная гаснет при раскрытии и остаётся минус */
.faq__sign {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); opacity: 0; }

/* ответ раскрывается через grid-строку 0fr → 1fr: единственный способ
   анимировать высоту «до auto» без замера в JS. Кривая по умолчанию —
   var(--ease): резкий старт, почти плоский хвост — она же для открытия.
   На закрытие js/faq.js подставляет зеркальную (см. EASE_CLOSE): у
   var(--ease) весь путь пройден уже к трети времени, а остаток анимация
   почти не двигается — на сжатие это читалось как «доехало почти до
   нуля и зависло», а потом рывком захлопывалось */
/* колонки те же, что в .faq__q (авто-ширина маркера + gap + остальное) —
   grid-template-rows отдельно отвечает за схлопывание высоты, columns за
   горизонтальную раскладку, друг другу не мешают */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: auto 1fr;
  /* тот же clamp, что и gap у .faq__q — иначе отступ совпадает не точно */
  column-gap: clamp(12px, 2vw, 28px);
  overflow: hidden;
  transition: grid-template-rows .45s var(--ease);
}
/* тот же класс, что и буллет вопроса — берёт его ширину автоматически,
   так что текст ответа встаёт ровно под текстом вопроса на любом экране,
   без подбора чисел. visibility, не display:none: элемент должен остаться
   в раскладке и держать место, просто не быть видимым.
   overflow:hidden обязателен и здесь: без него спейсер (в отличие от
   абзаца, у которого overflow уже был) давал строке грида минимальную
   высоту по своему line-height, и на 0fr оставался «хвост» в 11px —
   блок не долистывал закрытие до конца */
.faq__a > .faq__n { visibility: hidden; overflow: hidden; }
.faq__a > p {
  overflow: hidden;
  /* было 68ch — рядом со строкой вопроса, которая теперь идёт во всю
     ширину секции, тот же абзац смотрелся обрубком, зажатым в узкую
     колонку. 92ch держит комфортную длину строки на обычных экранах
     (там ограничивает именно оно), а на очень широких — уже сама секция
     через 78% ширины, а не голое число символов */
  max-width: min(92ch, 78%);
  font-size: clamp(13px, 1.15vw, 15.5px);
  line-height: 1.6;
  color: var(--dim);
}
/* отступ живёт на самом абзаце, а не на .faq__a: на обёртке он не
   схлопывался бы вместе со строкой грида и закрытый ответ оставлял бы
   пустую полосу под вопросом */
.faq__item[open] .faq__a > p { padding-bottom: clamp(14px, 2vh, 22px); }

/* без JS раскрытие мгновенное, но рабочее */
html:not(.faq-js) .faq__item[open] .faq__a { grid-template-rows: 1fr; }
/* с JS состоянием управляет класс: [open] снимается только ПОСЛЕ того,
   как анимация свёртывания доиграет, иначе контент исчезает рывком */
html.faq-js .faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* фоновые ленты вместо гигантской цифры заполняют пустое поле снизу.
   Разъезжаются в разные стороны при скролле (scenes.js) — эффект глубины,
   а не плоская подпись. Рамка (border) и движение разведены по разным
   узлам: .offer__ticker — неподвижный контейнер с волосяными линиями
   и обрезкой, .offer__ticker__track внутри — то, что реально едет.
   Раньше transform стоял прямо на контейнере с рамкой, и на сдвиге линия
   уезжала вместе с текстом, открывая пустой край с той стороны, откуда
   лента ушла */
.offer__ticker {
  position: relative;
  left: 0;
  /* во всю ширину секции, мимо её боковых полей: рамка ленты идёт от края
     до края экрана, как было на absolute-позиционировании */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.offer__ticker__track {
  white-space: nowrap;
  font-size: clamp(13px, 1.6vw, 19px);
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
/* лента стоит в потоке, а не на absolute с фиксированным bottom: с
   появлением блока вопросов высота контента перестала быть постоянной
   (ответ раскрывается — колонка растёт на сотню-другую пикселей), и любое
   фиксированное bottom рано или поздно оказывалось под текстом. Ритм
   вокруг неё теперь держит общий gap на #s6, отдельный margin не нужен */
.offer__ticker--b .offer__ticker__track { color: var(--orange); opacity: .4; }


/* ═══════════ 02 · КОД РЕГИОНА ═══════════ */

#s2 { display: flex; flex-direction: column; }
/* ярлык секции — единственный текст здесь не внутри .region, поэтому z-index
   на слой фото/скрима ему не наследуется автоматически */
#s2 > .sec__tag { position: relative; z-index: 2; }

.region {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(14px, 2.5vh, 30px);
}

/* настоящее фото Эльбруса, дуотон под палитру сайта — заменяет и изолинии,
   и число-фон. cover + object-position подобраны так, чтобы вершины не
   срезались краем на узких экранах (см. адаптив) */
/* верх/низ на 8% шире секции — запас хода для параллакса в scenes.js, без
   него translateY при скролле открывал бы пустую полосу снизу */
.region__photo {
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: 0;
  right: 0;
  z-index: 0;
  background-image: url('../img/elbrus-duotone.jpg');
  background-size: cover;
  background-position: center 68%;
}
/* ровное затемнение по всему кадру плюс более сильный градиент снизу:
   заголовок в три строки перекрывает и тёмное небо, и светлый снег вершины —
   ровного тона недостаточно только под .facts, светлый текст на снегу без
   общей подложки почти терялся.
   Было заметно светлее (.22/.3/.68) — недостаточно именно там, где стоит
   .region__copy: самая яркая, заснеженная часть кадра. Фото ещё и едет
   параллаксом при скролле (scenes.js), так что нельзя подгадать плёнку
   под одно застывшее положение — плотность поднята по всей высоте с
   запасом, а не только там, где текст стоит на первом кадре */
.region__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(28,26,23,.42) 0%, rgba(28,26,23,.5) 45%, rgba(28,26,23,.78) 100%);
  pointer-events: none;
}

/* текст поверх числа — на всю ширину колонки, а не узким столбиком:
   узкая мера читалась как цитата поверх обоев, широкая — как сама секция */
.region__copy {
  grid-row: 1;
  align-self: center;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 26px);
}

.region__lead {
  font-family: var(--ffd);
  font-size: clamp(22px, 3.4vw, 54px);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--fg);
  max-width: 31ch;
  /* мягкая тёмная подложка под сами буквы — независимо от того, какой
     участок фото окажется под текстом на момент прочтения (фото едёт
     параллаксом при скролле, см. scenes.js), контраст не проседает.
     Без offset и почти без размытия — тень, а не эффект глубины */
  text-shadow: 0 1px 16px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
/* тёмный, как и был изначально — не оранжевый. Сам по себе на тёмной
   теме секции это по-прежнему низкий контраст (то же самое, из-за чего
   фраза терялась и до правки), поэтому вместо тёмной подложки, как у
   остального .region__lead, здесь светлый мягкий ореол — приподнимает
   тёмные буквы над фото, а не наоборот, и цвет при этом не меняется */
.region__lead em {
  color: var(--asphalt);
  font-style: italic;
  text-shadow: 0 0 18px rgba(239, 237, 227, .55), 0 0 4px rgba(239, 237, 227, .5);
}

/* было var(--dim) с более лёгкой буквой — на пёстром фото, а не на ровной
   заливке, этого не хватало: полный .region__sub { color: var(--fg) },
   плюс та же тень, что у .region__lead, держат строку читаемой на любом
   участке кадра */
.region__sub {
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--fg);
  opacity: .85;
  max-width: 52ch;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
}

#s2 .facts {
  grid-row: 2;
  position: relative;
  z-index: 2;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(14px, 2vw, 30px);
  border-top: 1px solid var(--hair);
  padding-top: 16px;
}
.facts dt {
  font-size: var(--micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}
.facts dd {
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: .08em;
  color: var(--fg);
}
.facts dd i { color: var(--orange); font-style: normal; }


/* ═══════════ 03 · НАПРАВЛЕНИЯ ═══════════ */

#s3 { display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 48px); }

.dirs { border-top: 1px solid var(--hair); }

/* каждый <li> — свой отдельный грид (общего грида на всём .dirs нет),
   поэтому колонка автоширины считается для каждой строки заново. Пока
   в ней были «01/02/03» одинаковой длины, это совпадало случайно; «0 М» /
   «2500 М» / «5642 М» — разной длины, и заголовок съезжал влево вслед за
   более короткой меткой. Фиксируем минимальную ширину под самую длинную */
.dir {
  position: relative;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr 40px minmax(0, 38ch);
  align-items: center;
  gap: clamp(16px, 3vw, 54px);
  padding: clamp(20px, 3.4vh, 42px) 0;
  border-bottom: 1px solid var(--hair);
  transition: padding-left .5s var(--ease);
}
.dir:hover { padding-left: clamp(10px, 1.6vw, 26px); }

.dir__n {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--micro);
  letter-spacing: .28em;
  color: var(--dim);
  transition: color .4s var(--ease);
}
.dir:hover .dir__n { color: var(--orange); }

/* шкала уровня — три чёрточки читаются как индикатор сигнала без
   подписи: закрашенные горят, пустые остаются на dim. На верхнем пункте
   («впечатление») все три оранжевые — это вершина, а не просто hover-акцент */
.dir__bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dir__bars i {
  width: 14px;
  height: 2px;
  background: var(--dim);
  opacity: .5;
}
.dir__bars i.on { background: var(--fg); opacity: 1; }
.dir--peak .dir__bars i.on { background: var(--orange); }

.dir__title {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--ffd);
  font-size: clamp(24px, 4.4vw, 68px);
  font-weight: 300;
  letter-spacing: -.01em;
}

.dir__desc {
  grid-row: 1;
  grid-column: 4;
  font-size: clamp(11px, 1.05vw, 15px);
  line-height: 1.75;
  letter-spacing: .06em;
  color: var(--dim);
}

/* орнаментальный модуль в собственной колонке грида — растёт при наведении
   между заголовком и описанием, поэтому никогда не наезжает на текст */
.dir__orn {
  grid-row: 1;
  grid-column: 3;
  justify-self: center;
  width: 40px; height: 40px;
  transform: scale(.4) rotate(-45deg);
  opacity: 0;
  background: var(--orn-tile) center / contain no-repeat;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.dir:hover .dir__orn { opacity: .85; transform: scale(1) rotate(0deg); }


/* ═══════════ 04 · РАБОТА ═══════════ */

#s4 { display: flex; align-items: center; }

.work__num {
  position: absolute;
  right: -4vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(112vh, 86vw);
  height: auto;
  color: var(--asphalt);
  opacity: .05;
  pointer-events: none;
  user-select: none;
}

.work {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.4vh, 40px);
}

/* бывший манифест: теперь подводка к доказательству, а не отдельный экран */
.work__lead {
  font-family: var(--ffd);
  font-size: clamp(21px, 2.9vw, 44px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.015em;
  max-width: 26ch;
}
.work__lead span { display: block; }
.work__lead em { font-style: italic; font-weight: 600; }

/* .work__head теперь просто оборачивает .work__lead — своих стилей ему
   не нужно, max-width уже на самом заголовке. Раньше здесь ещё стояли
   стрелки, было: в шапке рядом с заголовком, прижаты к правому краю секции —
   а там, начиная с ~1024px, уже стоит индикатор 01…07 (.rail,
   position:fixed). У его пунктов есть невидимый (opacity:0, но не
   display:none) текст-подпись, который расширяет кликабельную область
   ссылки далеко влево от самой цифры, и на этой ширине она перекрывала
   стрелку «вперёд» — клик срывался на рельсу под ней. Перенесены под
   ленту: там же, где начинается скриншот первого кейса, так что стрелки
   визуально стоят «под картинкой», а не тянутся ни к какому краю */
.work__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}
.work__count {
  font-size: var(--micro);
  letter-spacing: .2em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.work__count b { color: var(--fg); font-weight: 500; }
.work__count i { font-style: normal; opacity: .6; }

.work__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--fg);
  font-size: 15px;
  line-height: 1;
  transition: border-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.work__arrow:hover { border-color: var(--orange); color: var(--orange); }
.work__arrow:disabled { opacity: .3; pointer-events: none; }

/* карусель вместо вертикального стека: список кейсов растёт, а с ним не
   должна расти высота секции — новый кейс добавляется вбок, а не сдвигает
   все экраны ниже вниз по странице. overflow-x нативно понимает touch-свайп;
   колёсико мыши без shift по умолчанию его не крутит — это чинит JS (scenes.js) */
.work__carousel {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1px;
  scrollbar-width: none;
}
.work__carousel::-webkit-scrollbar { display: none; }
/* лента ловит фокус с клавиатуры (стрелки ←/→ листают кейсы) — но своей
   рамки не рисует: её и так очерчивает фокус на ссылке внутри карточки */
.work__carousel:focus { outline: none; }
.work__carousel:focus-visible { outline: 1px solid var(--orange); outline-offset: 6px; }
.work__carousel.is-dragging { cursor: grabbing; scroll-behavior: auto; }
/* пока тащим ленту мышью, картинка не должна перехватывать жест своим
   нативным драгом изображения */
.work__carousel.is-dragging img { pointer-events: none; }

.work__case {
  flex: 0 0 min(920px, 86vw);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 68px);
  /* соседний кейс виден краем как обещание «дальше есть ещё», но приглушён:
     иначе два кейса в кадре спорят за внимание и ни один не читается главным */
  opacity: .32;
  transition: opacity .55s var(--ease);
}
.work__case.is-active { opacity: 1; }

.work__idx {
  font-size: var(--micro);
  letter-spacing: .28em;
  color: var(--dim);
}
.work__idx span { opacity: .5; margin-left: .2em; }

/* скриншот приглушён, чтобы не спорить со стерильной графикой сайта,
   и доводится до полного цвета только при наведении */
.work__shot {
  display: block;
  position: relative;
  border: 1px solid var(--hair);
  overflow: hidden;
  background: var(--bg);
}
.work__shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.55) contrast(.96);
  opacity: .82;
  transition: filter .5s var(--ease), opacity .5s var(--ease), transform .8s var(--ease);
}
.work__case.is-active:hover .work__shot img {
  filter: none;
  opacity: 1;
  transform: scale(1.015);
}

.work__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.6vh, 18px);
}

.work__name {
  font-family: var(--ffd);
  font-size: clamp(24px, 3.2vw, 48px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1;
}
.work__kind {
  font-size: var(--micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
}

.rule {
  position: relative;
  width: clamp(120px, 16vw, 220px);
  border-bottom: 1px solid var(--orange);
}
.rule i {
  position: absolute;
  left: 0; bottom: -2px;
  width: 4px; height: 4px;
  background: var(--orange);
}

.work__desc {
  font-size: clamp(11px, 1.05vw, 15px);
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--dim);
  max-width: 42ch;
}

.work__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(11px, 1.05vw, 15px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 3px;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.work__link i { font-style: normal; color: var(--orange); }
.work__link:hover { color: var(--orange); border-color: var(--orange); }


/* ═══════════ 05 · ПРОЦЕСС ═══════════ */

.sec--pin { padding: 0; }

.proc {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 5vh, 58px);
  overflow: hidden;
}

.proc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 var(--pad-r) 0 var(--pad);
}
.proc__count {
  font-size: var(--micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
}
.proc__count b {
  font-size: calc(var(--micro) * 1.6);
  font-weight: 500;
  color: var(--orange);
  margin-right: 8px;
}

.proc__track { position: relative; }

.proc__line {
  position: absolute;
  left: var(--pad);
  right: 0;
  top: 34px;
  height: 2px;
  background: var(--hair);
}
.proc__line i {
  position: relative;
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
}
/* маркер-ромб едет на кончике заливки — единая точка вместо семи
   независимых ромбов на карточках, которые расходились с линией на
   старте и в конце пиннинга */
.proc__line i::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  width: 9px; height: 9px;
  border: 1px solid var(--orange);
  background: var(--bg);
  transform: translateY(-50%) rotate(45deg);
}

.proc__steps {
  display: flex;
  gap: clamp(24px, 4vw, 72px);
  padding: 0 var(--pad);
  width: max-content;
}

.step {
  width: clamp(230px, 26vw, 360px);
  flex: none;
  padding-top: 68px;
  position: relative;
}
.step__n {
  display: block;
  font-size: var(--micro);
  letter-spacing: .3em;
  color: var(--orange);
  margin-bottom: 12px;
}
.step h3 {
  font-family: var(--ffd);
  font-size: clamp(21px, 2.4vw, 36px);
  font-weight: 300;
  margin-bottom: 14px;
}
.step p {
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--dim);
}


/* ═══════════ 07 · ЛАБИРИНТ · КОНТАКТЫ ═══════════ */

#s7 { display: flex; }

.lab {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2vh, 24px);
  min-height: 0;
}

.lab__bottom {
  font-size: var(--micro);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: right;
}

.lab__top { display: flex; flex-direction: column; gap: 10px; }

/* единый слоган секции — вместо двух обрывков по разным углам */
.lab__slogan {
  font-family: var(--ffd);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 2vw, 22px);
  letter-spacing: 0;
  color: var(--fg);
}

/* приглашение и цифра-подложка живут только на узких экранах — раскладку
   задаёт responsive.css */
.lab__invite { display: none; }
.lab__num { display: none; }

/* flex:1 (=flex-basis:0%) ломает aspect-ratio в колоночном flex-контейнере —
   на широких экранах формула ширины и так даёт нужную высоту, а на портретных
   планшетах, где по вертикали свободного места много, flex-grow растягивал
   поле намного выше пропорции. SVG (preserveAspectRatio) сжимался и оставался
   маленьким по центру раздутой коробки, а CSS-сетка с контактами растягивалась
   на всю коробку — подписи отрывались от стен и «плавали» отдельно от рисунка */
.lab__field {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  width: min(100%, calc((100svh - 190px) * 22 / 15));
  aspect-ratio: 22 / 15;
  margin: 0 auto;
}

.lab__svg { position: absolute; inset: 0; }
.lab__svg svg { width: 100%; height: 100%; }
.lab__svg .lab-walls { color: var(--paper); }
/* начальное состояние линии пути ставит JS — без скрипта путь виден целиком */

/* сетка 22×15 повторяет модуль лабиринта — контакты садятся в коридоры */
.lab__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(22, 1fr);
  grid-template-rows: repeat(15, 1fr);
  pointer-events: none;
}
.lab__grid > * { pointer-events: auto; }

.lab__center {
  grid-column: 7 / 17;
  grid-row: 7 / 10;
  place-self: center;
  font-size: clamp(15px, 3.4vh, 34px);
  font-weight: 400;
  letter-spacing: clamp(6px, 1vw, 18px);
  text-indent: clamp(6px, 1vw, 18px);
  color: rgba(239, 237, 227, .55);
  /* нулевой blur/альфа того же формата, что и целевое свечение в scenes.js —
     GSAP интерполирует text-shadow только между значениями одинаковой формы */
  text-shadow: 0 0 0 rgba(255, 119, 0, 0);
}

.lab__c {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: clamp(8px, 1.25vh, 12px);
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(239, 237, 227, .38);
  transition: color .35s var(--ease);
  white-space: nowrap;
}
/* диагональная стрелка вместо подчёркивания — тот же язык, что у hero__cta
   и work__link, не спорит с линиями лабиринта */
.lab__c i {
  font-style: normal;
  color: var(--orange);
  transition: transform .35s var(--ease);
  display: inline-block;
}
.lab__c:hover { color: rgba(239, 237, 227, .85); }
.lab__c:hover i { transform: translate(2px, -2px); }

/* отступ от края поля — иначе текст ложится прямо на линию лабиринта */
.lab__c--inst{ grid-column: 14 / 21; grid-row: 2;  place-self: center end;   padding-right: clamp(10px, 1.6vw, 22px); }
.lab__c--tg  { grid-column: 4 / 12;  grid-row: 13; place-self: center start; padding-left:  clamp(10px, 1.6vw, 22px); }
.lab__c--mail{ grid-column: 13 / 21; grid-row: 14; place-self: center end;   padding-right: clamp(10px, 1.6vw, 22px); }