@charset "UTF-8";
/* ============================================================
   ГЛУБИНА · креативная экосистема
   Концепция: «Лотлинь в частном собрании»
   Скролл = спуск. Золото живёт только в фотографиях (свет),
   изумруд — только в интерфейсе (среда), слоновая кость — посредник.
   ============================================================ */

/* ---------- Montserrat · самохостинг (сабсет кириллица+латиница, woff2) ---------- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/montserrat-200-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/montserrat-200-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/montserrat-300-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/montserrat-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  /* шкала глубины — ступени фона, сверху вниз */
  --bg-0: #131211;   /* 0 м · поверхность, тёплый уголь */
  --bg-1: #0E1412;   /* сумерки */
  --bg-2: #081310;   /* толща */
  --bg-3: #04100C;   /* дно */

  /* изумруд — только UI */
  --emerald-deep:  #0F3D30;
  --emerald:       #17614A;
  --emerald-light: #4E9C7F;

  /* текст */
  --ink:    #F5F1E8;
  --ink-70: rgba(245, 241, 232, .70);
  --ink-55: rgba(245, 241, 232, .55);
  --hairline: rgba(245, 241, 232, .16);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 7vw, 120px);
  --content: 1360px;

  --font: "Montserrat", "Segoe UI", Arial, sans-serif;

  /* —— партитура погружения: все ручки скролл-эффектов в одном месте —— */
  --plumb-line-h: 38vh;     /* лотлинь: высота волосяной вертикали */
  --plumb-run-dur: .35s;    /* лотлинь: инерция догона бегунка */
  --plumb-step: 10;         /* лотлинь: шаг счётчика, м (читает script.js) */
  --dive-thread-dur: .9s;   /* «почему»: длительность стекания нити */
  --dive-thread-lag: 200ms; /* «почему»: нить стартует после появления своей ступени */
  --dive-inv-dur: 1s;       /* инвентарь: длительность линии описи */
  --magnet-pull: 3;         /* магнит: притяжение кнопок к курсору, px (читает script.js) */
  --hero-drift: .12;        /* hero: доля скролла для кадра и кап −12% высоты (читает script.js) */
  --hero-text-drift: .05;   /* hero: доля скролла для текста (читает script.js) */
  --hero-fade-end: .8;      /* hero: контент гаснет к этой доле выхода (читает script.js) */
  --vignette-max: .2;       /* виньетка: максимум затемнения краёв на дне */
}

/* ---------- база ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* фиксированная шапка не накрывает якорные секции */
  scrollbar-color: var(--emerald-deep) var(--bg-2);
}

body {
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink-70);
  background: var(--bg-0);
  line-height: 1.8;
  letter-spacing: .02em;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* тач: вместо серой вспышки — свои :active */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

/* зерно — страховка от бандинга, лежит поверх всего */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../img/noise.png") repeat;
  background-size: 128px;
  opacity: .045;
  pointer-events: none;
  z-index: 90;
}

/* виньетка глубины: к дну едва темнеет по краям. Прогресс спуска подмешивает
   script.js через --dive-depth (0 поверхность → 1 дно), потолок — --vignette-max */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70; /* под глубиномером (74) и зерном (90) */
  background: radial-gradient(ellipse 130% 100% at 50% 50%, transparent 60%, rgba(2, 8, 6, .7) 100%);
  opacity: calc(var(--dive-depth, 0) * var(--vignette-max));
  pointer-events: none;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--emerald); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--emerald-light);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 200;
  padding: 11px 18px;
  background: var(--emerald-deep);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: top .3s var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* ---------- лотлинь-глубиномер: отметка спуска у правого края ---------- */

.plumb {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 74; /* над виньеткой (70), под зерном (90) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}
/* декор существует только при живом скрипте: без JS глубину никто не считает */
html:not(.js) .plumb { display: none; }
.plumb__line {
  position: relative;
  width: 1px;
  height: var(--plumb-line-h);
  background: var(--hairline);
}
.plumb__runner {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 14px;
  background: var(--emerald-light);
  transition: transform var(--plumb-run-dur) var(--ease);
}
.plumb__meter {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.4;
  color: var(--ink-55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plumb__unit { color: var(--ink-55); margin-left: .35em; }

/* ---------- ярлыки секций ---------- */
/* скобки [ ] и нумерация (01…07, каталожные индексы) сняты заказчиком
   19.07.2026 — удалены из разметки вместе со стилями */

.label {
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--ink);
  white-space: nowrap;
}
.label__t {
  display: inline-block;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: .15s;
}
html.js .label__t { opacity: 0; transform: translateY(5px); }
html.js .sec-in .label__t { opacity: 1; transform: none; }

/* ---------- горизонты секций ---------- */

.sec {
  position: relative;
  padding: clamp(64px, 9vh, 120px) var(--pad) clamp(80px, 12vh, 160px);
}

.horizon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--content);
  margin: 0 auto clamp(48px, 8vh, 96px);
  padding-top: 18px;
}
/* линия-горизонт прочерчивается при входе в секцию */
.horizon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline);
  transform-origin: left;
  transition: transform 1.3s var(--ease) .1s;
}
html.js .horizon::before { transform: scaleX(0); }
html.js .sec-in .horizon::before { transform: scaleX(1); }

/* ступени глубины */
.sec--hero     { --sbg: var(--bg-0); }
.sec--about    { --sbg: var(--bg-1); }
.sec--services { --sbg: var(--bg-1); }
.sec--why      { --sbg: var(--bg-2); }
.sec--for      { --sbg: var(--bg-2); }
.sec--team     { --sbg: var(--bg-2); }
.sec--clients  { --sbg: var(--bg-3); }
.sec--contacts { --sbg: var(--bg-3); }
.sec { background: var(--sbg); }

/* ---------- появления ---------- */

/* всё скрытие — только при работающем JS (html.js ставит инлайн-скрипт в <head>);
   без JS страница остаётся полностью видимой */
html.js .reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
/* клавиатурный фокус не должен попадать на невидимое (WCAG 2.4.7) */
html.js .reveal:focus-within { opacity: 1; transform: none; transition: none; }

/* каскадные контейнеры: контейнер только фейд; дети всплывают АНИМАЦИЕЙ,
   чтобы задержки не прилипали к ховер-переходам */
html.js .cascade.reveal { transform: none; }
html.js .cascade.reveal > * { opacity: 0; }
html.js .cascade.reveal.is-in > * {
  opacity: 1;
  animation: rise-child .9s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes rise-child {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* словесный каскад крупных высказываний */
.words .w { display: inline-block; }
html.js .words .w { opacity: 0; }
html.js .words.is-in .w {
  opacity: 1;
  animation: rise-word .8s var(--ease) backwards;
  animation-delay: calc(var(--wi, 0) * 45ms);
}
@keyframes rise-word {
  from { opacity: 0; transform: translateY(.9em); }
  to   { opacity: 1; transform: none; }
}


/* ---------- шапка ---------- */

.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: baseline; /* кегли 12/11px — по базовой линии, не по центру */
  gap: 24px;
  padding: 18px var(--pad);
  transition: background .5s var(--ease), -webkit-backdrop-filter .5s var(--ease), backdrop-filter .5s var(--ease);
}
.site-head.scrolled {
  background: rgba(8, 19, 16, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}

/* кнопки: чистый текст без рамок и заливок (скобочный каркас снят заказчиком 19.07.2026) */
.btn-presentation,
.mobile-menu__pdf {
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--ink);
  padding: 12px 2px;
  white-space: nowrap;
}
/* пульс «событие впереди» — используется точкой афиши «Скоро старт» */
@keyframes ping {
  0%        { box-shadow: 0 0 0 0 rgba(78, 156, 127, .45); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(78, 156, 127, 0); }
}
/* магнит: класс и смещения (--mx/--my) ведёт script.js — только точный
   указатель, вне reduced-motion; transform не трогает baseline шапки */
.magnet { transform: translate(var(--mx, 0px), var(--my, 0px)); }

/* бургер — единственная навигация на всех экранах: открывает полноэкранное меню */
.burger {
  display: block;
  justify-self: end;
  align-self: center; /* кнопка без текста — вне baseline-раскладки шапки */
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 130;
}
.burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--ink);
  transition: transform .4s var(--ease), top .4s var(--ease), background .4s var(--ease);
}
.burger span:first-child { top: 18px; }
.burger span:last-child  { top: 26px; }
.burger.open span { background: var(--emerald-light); }
.burger.open span:first-child { top: 22px; transform: rotate(45deg); }
.burger.open span:last-child  { top: 22px; transform: rotate(-45deg); }

.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 96; /* ниже шапки (100): бургер-крестик остаётся кликабельным */
  background: rgba(4, 16, 12, .96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  overflow-y: auto;
  padding: 0 var(--pad);
  animation: fadein .45s var(--ease) both; /* display:none → flex перезапускает при каждом открытии */
}
.mobile-menu nav {
  display: grid;
  gap: clamp(15px, 2vw, 24px);
  margin-block: auto;
  padding-block: 88px calc(44px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu a {
  font-size: clamp(12px, 3.5vw, 34px); /* мобайл: «Почему это работает» в строку (320px+); десктоп — крупно, влезает и на 768px */
  line-height: 1.15; /* однострочные пункты: без раздутия от body line-height 1.8 */
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink);
  padding-block: 4px; /* тап-зона ≥44px и на 320px */
}
/* десктоп-указатель: пункт мягко сдвигается к курсору */
@media (hover: hover) {
  .mobile-menu nav a { transition: transform .4s var(--ease); }
  .mobile-menu nav a:hover { transform: translateX(20px); }
}
/* пункты всплывают каскадом при каждом открытии */
.mobile-menu nav > a { animation: rise-child .75s var(--ease) backwards; }
.mobile-menu nav > a:nth-child(1) { animation-delay: .06s; }
.mobile-menu nav > a:nth-child(2) { animation-delay: .11s; }
.mobile-menu nav > a:nth-child(3) { animation-delay: .16s; }
.mobile-menu nav > a:nth-child(4) { animation-delay: .21s; }
.mobile-menu nav > a:nth-child(5) { animation-delay: .26s; }
.mobile-menu nav > a:nth-child(6) { animation-delay: .31s; }
.mobile-menu nav > a:nth-child(7) { animation-delay: .36s; }
.mobile-menu nav > a:nth-child(8) { animation-delay: .41s; }
.mobile-menu nav > a:nth-child(9) { animation-delay: .49s; }
/* специфичность (0,2,1) бьёт и групповое правило кнопок, и .mobile-menu a — без !important */
.mobile-menu a.mobile-menu__pdf {
  margin-top: 18px;
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 300;
  letter-spacing: .26em;
}
/* пункт «Скоро старт»: два белых треугольника ⏬, мягко зовущих вниз */
.mobile-menu__soon { display: inline-flex; align-items: center; }
.soon-mark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-right: .5em;
}
.soon-mark i {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor; /* белый: наследует цвет пункта */
}
html.js .soon-mark i { animation: soon-beckon 2.2s var(--ease) infinite; }
html.js .soon-mark i:last-child { animation-delay: .28s; }
@keyframes soon-beckon {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

/* ---------- экспонаты: фото без рамок, нижний край сведён в фон секции ---------- */
/* паспарту и музейный свет сняты заказчиком 19.07.2026. Глубина среза —
   --fade-start на конкретном фрейме (по умолчанию 60%); mask-image на img
   не использовать — даёт серые артефакты */

.exhibit { max-width: 100%; }
.exhibit__frame {
  position: relative;
  overflow: hidden;
  /* подложки НЕТ: маска уводит пиксели в прозрачность, и под ними должна быть
     живая секция (зерно, виньетка, фон «для кого»), а не плоский прямоугольник.
     Шва не будет — у маски нет жёсткой кромки, ею он и лечится */
}
.exhibit__frame img { width: 100%; }
/* Кадр растворяется НАСТОЯЩЕЙ маской по альфа-каналу, а не заливкой краёв цветом
   фона поверх фото: пиксели уходят в прозрачность, и кадр тает в том, что за ним
   (зерно, виньетка секции) — поэтому выглядит живым, а не «замазанным».
   mask-composite: intersect перемножает слои — углы feather'ятся плавно, шва нет
   (у наложенных градиентов плотность складывалась и давала «рамку»).
   Ручки: --m-side (бока), --m-top (верх), --m-bot (докуда кадр живой снизу). */
.exhibit__frame img {
  --m-side: 9%;
  --m-top: 8%;
  --m-bot: 76%;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--m-top), #000 var(--m-bot), transparent 100%),
    linear-gradient(to right,  transparent 0, #000 var(--m-side), #000 calc(100% - var(--m-side)), transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--m-top), #000 var(--m-bot), transparent 100%),
    linear-gradient(to right,  transparent 0, #000 var(--m-side), #000 calc(100% - var(--m-side)), transparent 100%);
  -webkit-mask-composite: source-in; /* старый вебкит */
  mask-composite: intersect;         /* стандарт */
}
/* оверлей больше не красит края — фон под фото совпадает с секцией,
   поэтому прозрачные пиксели маски садятся ровно в неё */
.exhibit__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------- hero · 0 м ---------- */

.sec--hero {
  min-height: 100vh;  /* фолбэк для старых Safari */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(.95);
}
/* луч света медленно дышит (синус — без видимой точки цикла) */
.hero__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 42% at 60% -4%, rgba(216, 190, 140, .14), transparent 62%);
  animation: breathe 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes breathe {
  from { opacity: .45; }
  to   { opacity: 1; }
}
/* глазурь: слева — постель для текста, сверху и снизу — сшивка со средой */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--sbg) 10%, rgba(19, 18, 17, .85) 44%, transparent 72%),
    linear-gradient(to top, var(--sbg) 8%, transparent 35%),
    linear-gradient(to bottom, rgba(19, 18, 17, .65), transparent 22%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--content);
  width: 100%;
  margin: 0 auto;
}
.hero__label {
  margin-bottom: clamp(24px, 4vh, 44px);
}
.hero__label .label__t { opacity: 0; }
.hero__wordmark { margin: 0 0 clamp(28px, 5vh, 52px) -8px; }
.hero__wordmark img {
  width: clamp(300px, 46vw, 660px);
  height: auto;
}
.hero__manifesto {
  font-size: clamp(14px, 1.6vw, 19px);
  text-transform: uppercase;
  letter-spacing: .26em;
  line-height: 1.85;
  color: var(--ink);
  max-width: 26em;
}
/* загрузочная секвенция: сцена «проявляется из глубины» — размытие→резкость + всплытие */
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle {
  from { opacity: 0; transform: scale(1.09); filter: blur(16px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@keyframes emerge {
  from { opacity: 0; transform: translateY(30px); filter: blur(10px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* плавный ход входа (не фирменный front-loaded ease — чтобы проявление читалось) */
.site-head .btn-presentation { animation: fadein 1.1s cubic-bezier(.4, 0, .2, 1) 1.25s both; }
.site-head .burger { animation: fadein 1.1s cubic-bezier(.4, 0, .2, 1) 1.35s both; }

/* кадр фокусируется из глубины, следом всплывают: ярлык → вордмарк → манифест */
.hero__photo        { animation: settle 2.4s cubic-bezier(.4, 0, .2, 1) .1s both; }
.hero__label .label__t { animation: emerge 1.1s cubic-bezier(.4, 0, .2, 1) .55s both; }
.hero__wordmark     { animation: emerge 1.5s cubic-bezier(.4, 0, .2, 1) .8s both; }
.hero__manifesto    { animation: emerge 1.3s cubic-bezier(.4, 0, .2, 1) 1.15s both; }

/* ---------- о нас · −180 м ---------- */

.about__grid {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: var(--content);
  margin: 0 auto;
  align-items: stretch;
}
.about__thesis {
  font-size: clamp(24px, 3.2vw, 46px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .03em;
  color: var(--ink);
  margin-bottom: clamp(36px, 6vh, 64px);
}
/* .u в разметке — опорные слова тезиса (бизнес/искусство/образование);
   подчёркивания-нити сняты заказчиком 19.07.2026, стилей не имеют */
.about__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
}
.about__photo {
  display: flex;
  flex-direction: column;
}
.about__photo .exhibit__frame img { --m-bot: 72%; }
.about__photo .exhibit__frame {
  flex: 1;
  display: flex;
  /* низ у about чуть глубже: фото стоит в колонке рядом с текстом */
}
.about__photo .exhibit__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 380px;
  filter: saturate(.85) brightness(.80);
}

/* ---------- что мы делаем · −640 м ---------- */

.services__intro {
  max-width: var(--content);
  margin: 0 auto clamp(40px, 7vh, 72px);
}
.services__intro p {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.65;
  color: var(--ink);
  max-width: 46em;
}
.services__intro p + p { margin-top: 1em; color: var(--ink-70); font-size: clamp(16px, 1.6vw, 19px); }

.inventory {
  position: relative; /* якорь нижней линии описи */
  max-width: var(--content);
  margin: 0 auto;
  border-bottom: 1px solid var(--hairline);
}
.inventory__row {
  position: relative; /* якорь своей линии описи */
  padding: clamp(20px, 3.2vh, 34px) 0;
  border-top: 1px solid var(--hairline);
  transition: transform .35s var(--ease);
}
/* акцент секции: при живом JS границы гаснут, линии описи прочерчиваются
   на псевдоэлементах каскадом — в такт появлению строк */
html.js .inventory { border-bottom-color: transparent; }
html.js .inventory__row { border-top-color: transparent; }
html.js .inventory__row::before,
html.js .inventory::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline);
  transform: scaleX(0);
  transform-origin: left;
}
html.js .inventory__row::before { top: -1px; }
html.js .inventory::after { bottom: -1px; }
html.js .inventory.is-in .inventory__row::before {
  transform: scaleX(1);
  animation: draw-line var(--dive-inv-dur) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
html.js .inventory.is-in::after {
  transform: scaleX(1);
  animation: draw-line var(--dive-inv-dur) var(--ease) backwards;
  animation-delay: calc(6 * 110ms); /* нижняя граница — последней, после шести строк */
}
@keyframes draw-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.inventory__name {
  position: relative; /* якорь черточки-марки */
  padding-left: clamp(26px, 3.2vw, 48px);
  font-size: clamp(18px, 2.4vw, 31px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.45;
  color: var(--ink-70);
  transition: color .35s var(--ease);
}
/* марка пункта: короткая черточка вместо номера — список читается перечнем,
   но нумерации нет (снята заказчиком). Ровняем по центру ПЕРВОЙ строки */
.inventory__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: .725em; /* по центру первой строки (половина line-height: 1.45) */
  margin-top: -.5px;
  width: clamp(16px, 1.8vw, 24px);
  height: 1px;
  background: var(--ink-70); /* ровно цвет текста пункта — марка не должна быть ярче */
  transition: opacity .35s var(--ease), width .35s var(--ease);
}
/* марка прочерчивается вслед за своей линией описи — как отметка в реестре */
html.js .inventory__name::before { transform: scaleX(0); transform-origin: left; }
html.js .inventory.is-in .inventory__name::before {
  transform: scaleX(1);
  animation: draw-line var(--dive-inv-dur) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 110ms + 90ms);
}
@media (hover: hover) {
  .inventory__row:hover { transform: translateX(10px); }
  .inventory__row:hover .inventory__name { color: var(--ink); }
  .inventory__row:hover .inventory__name::before { opacity: 1; width: clamp(18px, 2.1vw, 30px); }
}

.strip {
  max-width: var(--content);
  margin: clamp(48px, 8vh, 88px) auto 0;
}
/* широкая лента: срез в фон — базовые 60% */
.strip__frame img {
  width: 100%;
  height: min(46vh, 520px);
  object-fit: cover;
  object-position: 50% 58%;
  filter: brightness(.88) saturate(.88);
}

/* ---------- почему это работает · −1 240 м ---------- */

/* принципы — ступени погружения: лесенка вправо-вниз, связанная нитью */
.principles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: clamp(64px, 10vh, 120px);
  max-width: var(--content);
  margin: 0 auto;
}
.principles__item {
  position: relative;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
.principles__item:nth-child(1) { grid-column: 1 / 8;  grid-row: 1; }
.principles__item:nth-child(2) { grid-column: 3 / 10; grid-row: 2; }
.principles__item:nth-child(3) { grid-column: 6 / 13; grid-row: 3; }
/* нить, стекающая с предыдущей ступени */
.principles__item:nth-child(n+2)::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 1px;
  height: clamp(64px, 10vh, 120px);
  background: linear-gradient(to bottom, transparent, var(--emerald-light));
  opacity: .55;
  transform-origin: top;
}
/* акцент секции: при живом JS нить в покое собрана и «стекает» после появления
   своей ступени (задержка каскада + отставание) */
html.js .principles__item:nth-child(n+2)::before { transform: scaleY(0); }
html.js .principles.is-in .principles__item:nth-child(n+2)::before {
  transform: scaleY(1);
  animation: thread-down var(--dive-thread-dur) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 110ms + var(--dive-thread-lag));
}
@keyframes thread-down {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.principles__item h3 {
  /* min(…, 7vw): на ≤371px «ЭМОЦИОНАЛЬНЫЙ» иначе шире колонки (min-content > трека) */
  font-size: min(clamp(26px, 3.4vw, 48px), 7vw);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink);
  line-height: 1.35;
}
.principles__item p {
  font-size: clamp(15px, 1.3vw, 17px);
  max-width: 36em;
  color: var(--ink-55);
}

/* ---------- для кого · −1 980 м ---------- */

.sec--for { overflow: hidden; }
.for__bg {
  position: absolute;
  inset: -12% 0;
  background: url("../img/gallery.webp") center 30% / cover no-repeat;
  opacity: .3;
  filter: saturate(.85);
}
.sec--for::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--sbg) 6%, transparent 38%, transparent 62%, var(--sbg) 96%),
    linear-gradient(to right, var(--sbg), transparent 55%);
}
.sec--for .horizon, .sec--for .registry { position: relative; }

.registry {
  max-width: var(--content);
  margin: 0 auto;
  border-bottom: 1px solid var(--hairline);
}
.registry__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: baseline;
  padding: clamp(28px, 4.4vh, 52px) 0;
  border-top: 1px solid var(--hairline);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
@media (hover: hover) {
  .registry__row:hover {
    background: rgba(15, 61, 48, .22);
    transform: translateX(10px);
  }
}
.registry__who {
  position: relative; /* якорь марки */
  padding-left: clamp(26px, 3.2vw, 48px);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.3;
  color: var(--ink);
}
/* та же марка перечня, что и в описи «Что мы делаем» — один язык у обоих списков */
.registry__who::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em; /* по центру первой строки (половина line-height: 1.3) */
  margin-top: -.5px;
  width: clamp(16px, 1.8vw, 24px);
  height: 1px;
  background: var(--ink-70); /* не ярче текста */
}
.registry__what {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--ink-70);
  max-width: 34em;
}

/* ---------- кто мы · −2 740 м ---------- */

.team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 88px);
  max-width: var(--content);
  margin: 0 auto;
  align-items: start;
}
.person__photo { margin-bottom: 26px; }
.person__photo .exhibit__frame img { --m-bot: 82%; --m-side: 7%; } /* портрет: лицо не трогаем, края мягче */
.person__photo .exhibit__frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(.88) brightness(.83);
}
.person:nth-child(1) .exhibit__frame img { object-position: 50% 14%; }
.person:nth-child(2) .exhibit__frame img { object-position: 50% 35%; }
.person__name {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .26em;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 14px;
}
.person__bio { margin-bottom: 18px; max-width: 52ch; }
.person__creds { display: grid; gap: 10px; }
.person__creds li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--ink-55);
  line-height: 1.65;
}
.person__creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 14px;
  height: 1px;
  background: var(--ink-55); /* цвет своего текста, не ярче */
}

/* ---------- наши клиенты · −3 420 м ---------- */

/* река логотипов: две встречные ленты — чистые знаки, без плашек и рамок */
.river {
  margin: 0 calc(-1 * var(--pad));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
/* с JS река берётся рукой: клик — стоп, дальше листаем ленты (вертикальный скролл страницы не трогаем) */
html.js .river { cursor: grab; touch-action: pan-y; }
/* без этого браузер утаскивает сам логотип нативным drag-and-drop и жест листания теряется */
html.js .river img { -webkit-user-drag: none; user-drag: none; }
html.js .river { user-select: none; -webkit-user-select: none; }
html.js .river.is-dragging { cursor: grabbing; }
html.js .river:focus-visible { outline: 2px solid var(--emerald-light); outline-offset: 8px; }
.river__row {
  display: flex;
  width: max-content;
  will-change: transform;
}
.river__row + .river__row { margin-top: clamp(20px, 4vh, 48px); }
.river__set { display: flex; align-items: center; }
.river__cell {
  width: clamp(215px, 20vw, 320px);
  height: clamp(104px, 9.6vw, 150px);
  flex: none;
  display: grid;
  place-items: center;
  margin: 0;
}
.river__cell img {
  width: 78%;
  height: 80%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.35);
  opacity: .55;
  transition: opacity .4s var(--ease), filter .4s var(--ease);
}

@media (hover: hover) {
  .river__cell:hover img { opacity: 1; filter: grayscale(0) brightness(1.1); }
}
/* тач: логотип проявляется под пальцем */
.river__cell:active img { opacity: 1; filter: grayscale(0) brightness(1.1); }

.river__wordlogo {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 23px);
  letter-spacing: .04em;
  color: var(--ink);
  opacity: .55;
  text-align: center;
  display: grid;
  gap: 4px;
  transition: opacity .4s var(--ease);
  padding: 0 8px;
}
.river__wordlogo em {
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--ink-55);
}
@media (hover: hover) {
  .river__cell--text:hover .river__wordlogo { opacity: 1; }
}
.river__cell--text:active .river__wordlogo { opacity: 1; }

/* ---------- скоро старт · афиша ближайших событий · −3 720 м ---------- */

.sec--soon { --sbg: var(--bg-3); }
.agenda {
  max-width: var(--content);
  margin: 0 auto;
  border-bottom: 1px solid var(--hairline);
}
.agenda__item {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap: clamp(20px, 4vw, 72px);
  align-items: baseline;
  padding: clamp(28px, 4.4vh, 52px) 0;
  border-top: 1px solid var(--hairline);
}
.agenda__date {
  position: relative;
  padding-left: 24px;
  font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* единственный акцент секции: изумрудная точка-пульс «событие впереди» */
.agenda__date::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-light);
  animation: ping 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.agenda__name {
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--ink);
}
.agenda__meta {
  margin-top: 14px;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 44em;
}
@media (max-width: 700px) {
  .agenda__item { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- контакты · −4 000 м · дно ---------- */

.sec--contacts {
  padding-bottom: 44px;
}
/* собственное свечение дна */
.sec--contacts::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46vh;
  background: radial-gradient(ellipse 70% 90% at 50% 115%, rgba(15, 61, 48, .5), transparent 70%);
  pointer-events: none;
}
.sec--contacts > * { position: relative; z-index: 1; }
.sec--contacts .horizon { width: 100%; }

/* визитная карточка дна: вордмарк слева, контакты диптихом справа */
.contacts__card {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: var(--content);
  margin: 0 auto clamp(64px, 10vh, 128px);
}
.contacts__brand img { width: clamp(220px, 24vw, 330px); opacity: .95; }

.contacts__people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 56px);
}
.contact-card { display: grid; gap: 12px; justify-items: start; align-content: start; }
.contact-card + .contact-card {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(28px, 3vw, 56px);
}
.contact-card__name {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ink-55);
  margin-bottom: 8px;
}
.contact-card__phone {
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 200;
  letter-spacing: .06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.contact-card__mail {
  font-size: clamp(14px, 1.2vw, 16px);
  letter-spacing: .02em;
  color: var(--ink-70);
  overflow-wrap: anywhere;
  transition: color .3s var(--ease);
}
@media (hover: hover) {
  .contact-card__mail:hover { color: var(--ink); }
}
.contact-card__mail:active { color: var(--ink); }

.footer {
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  max-width: var(--content);
  margin-inline: auto;
}
.footer > span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.footer .btn-presentation { padding-block: 4px; }
.footer__made {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-55);
  transition: color .3s var(--ease);
}
.footer__made b {
  font-weight: 400;
  color: var(--ink-55);
  transition: color .3s var(--ease);
}
@media (hover: hover) {
  .footer__made:hover, .footer__made:hover b { color: var(--ink); }
}
.footer__made:active, .footer__made:active b { color: var(--ink); }

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


@media (max-width: 900px) {
  body { font-size: 16px; }

  /* компактнее вертикальный ритм на мобильном — меньше пустот между секциями */
  .sec { padding: clamp(52px, 7vh, 96px) var(--pad) clamp(56px, 8vh, 104px); }
  .horizon { margin-bottom: clamp(32px, 5vh, 60px); }

  /* глубиномер: линию прячем, счётчик — в правый нижний угол */
  .plumb { top: auto; bottom: 20px; right: 20px; transform: none; }
  .plumb__line { display: none; }
  .plumb__meter { margin-top: 0; }

  .label { letter-spacing: .3em; }

  .sec--hero { padding-top: 96px; align-items: flex-end; padding-bottom: clamp(76px, 12vh, 120px); }
  /* сцену не глушим opacity целиком — темним глазурью: постель для текста
     снизу, кадр наверху остаётся живым */
  .hero__photo img { object-position: 60% 30%; }
  .hero__photo::after {
    background:
      linear-gradient(to top, var(--sbg) 12%, rgba(19, 18, 17, .82) 48%, transparent 78%),
      linear-gradient(to bottom, rgba(19, 18, 17, .68), transparent 32%);
  }
  .hero__wordmark img { width: min(88vw, 520px); }
  .hero__manifesto { letter-spacing: .2em; }

  /* узкий экран режет широкий кадр: уводим точку кадрирования вправо,
     иначе подсвеченное полотно уходит за границу и фон пустеет */
  .for__bg { background-position: 74% 38%; opacity: .22; }

  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 420px; }
  .about__cols { grid-template-columns: 1fr; gap: 1.2em; }

  .registry__row { grid-template-columns: 1fr; gap: 14px; }
  /* на мобильном марка весомее: 2px и длиннее — иначе теряется и читается «палочкой» */
  .inventory__name, .registry__who { padding-left: 32px; }
  .inventory__name::before, .registry__who::before {
    width: 22px;
    height: 2px;
    margin-top: -1px; /* половина высоты 2px */
  }
  .registry__what { padding-left: 32px; } /* описание встаёт под текстом, а не под маркой */

  .principles { grid-template-columns: 1fr; row-gap: 48px; }
  .principles__item:nth-child(1),
  .principles__item:nth-child(2),
  .principles__item:nth-child(3) { grid-column: 1 / -1; grid-row: auto; }
  .principles__item:nth-child(n+2)::before { height: 48px; }

  .team__grid { grid-template-columns: 1fr; }
  .person { max-width: 480px; }

  .contacts__card { grid-template-columns: 1fr; gap: 40px; margin-bottom: clamp(40px, 6vh, 72px); }
  .contacts__people { grid-template-columns: 1fr; gap: 28px; }
  /* тап-таргеты ≥44px (растёт только зона нажатия, не вид) */
  .contact-card__phone { padding-block: 5px; }
  .contact-card__mail { padding-block: 10px; }
  .footer .btn-presentation { padding-block: 13px; }
  .footer__made { padding-block: 13px; }
  .contact-card + .contact-card {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
    padding-top: 28px;
  }
  .footer { flex-direction: column; gap: 10px; align-items: flex-start; }
}

@media (max-width: 560px) {
  .plumb { display: none; } /* на узком экране глубиномеру нет места */
  .btn-presentation { letter-spacing: .26em; padding-block: 13px; } /* тап ≥44px */
  .horizon { flex-wrap: wrap; row-gap: 10px; }
  .label { font-size: clamp(12px, 1.4vw, 14px); letter-spacing: .26em; }

  .registry__row { gap: 10px; }

  /* одна лента и ОДИН крупный знак на экран: вторую ленту JS вливает в первую,
     чтобы ни один клиент не потерялся. Соседние знаки чуть выглядывают —
     видно, что ленту можно листать */
  .river__cell { width: 76vw; height: 152px; }
  .river__cell img { width: 86%; height: 76%; }
  .river__wordlogo { font-size: 22px; }

  /* контакты: телефон — главная цель для тапа */
  .contact-card__phone { font-size: 22px; }
  .footer { gap: 14px; }
}



@media (max-width: 1020px) and (min-width: 901px) {
  .contacts__card { grid-template-columns: 1fr; gap: 44px; }
}

/* ============================================================
   режим скриншотов (?shot=1) — финальные состояния без анимаций
   ============================================================ */

html.shot *, html.shot *::before, html.shot *::after {
  animation: none !important;
  transition: none !important;
}
html.shot .reveal { opacity: 1; transform: none; }
html.shot .cascade.reveal > *, html.shot .words .w { opacity: 1; transform: none; }
html.shot .horizon::before { transform: scaleX(1); }
html.shot .label__t { opacity: 1; transform: none; }
/* hero без параллакса выхода: страница снимается целиком (скрипт в shot его и не ведёт) */
html.shot .hero__photo, html.shot .hero__content, html.shot .hero__wordmark, html.shot .hero__manifesto,
html.shot .hero__label .label__t { opacity: 1; transform: none; }
/* нейтрализуем вьюпорт-единицы для съёмки одним высоким окном */
html.shot .sec--hero { min-height: 860px; }
/* глубиномер показан, значение ведёт script.js по текущей позиции; бегунок без инерции;
   высота линии без вьюпорт-единиц — для съёмки одним высоким окном */
html.shot .plumb__runner { transition: none; }
html.shot .plumb__line { height: 340px; }
/* нити принципов стекли */
html.shot .principles__item:nth-child(n+2)::before { transform: scaleY(1); }
/* линии описи инвентаря прочерчены */
html.shot .inventory__row::before, html.shot .inventory::after { transform: scaleX(1); }
html.shot .inventory__name::before { transform: scaleX(1); }
/* виньетка глубины — статичное состояние спуска: в кадре остаётся по текущей позиции */

/* ============================================================
   reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .cascade.reveal > *, html.js .words .w { opacity: 1; transform: none; }
  html.js .horizon::before { transform: scaleX(1); }
  html.js .label__t { opacity: 1; transform: none; }
  /* hero статичен: параллакс выхода скрипт в reduced не ведёт */
  .hero__photo, .hero__content, .hero__wordmark, .hero__manifesto,
  .hero__label .label__t {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .agenda__date::before { animation: none; }
  html.js .soon-mark i { animation: none; }
  /* глубиномер: значение обновляется мгновенно, бегунок без транзишна */
  .plumb__runner { transition: none; }
  /* нити принципов сразу стекли */
  html.js .principles__item:nth-child(n+2)::before { transform: scaleY(1); }
  /* линии описи инвентаря сразу прочерчены */
  html.js .inventory__row::before, html.js .inventory::after { transform: scaleX(1); }
  html.js .inventory__name::before { transform: scaleX(1); }
  /* магнит выключен (скрипт его не включает; правило — страховка при живом переключении) */
  .magnet { transform: none !important; }
  /* виньетка глубины — не движение, а состояние спуска: обновляется мгновенно, остаётся */
}