/* Секции главной. Порядок – по карте в docs/design-system.md.
   Ритм поверхностей чередуется: тёмная – светлая – тёмная – светлая – тёмная.
   Решение клиента 2026-10-08: «один блок тёмный, следующий светлый». */

.section{position:relative;min-height:var(--screen-h);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--section-pad) var(--page-pad);overflow:hidden}
/* воздух между заголовком секции и её содержанием – один на весь сайт */
.section__inner > .grid,.section__inner{row-gap:var(--head-gap)}
.section--sheet{background:var(--color-sheet)}
.section--pure{background:var(--color-sheet-pure)}
.section__inner{position:relative;z-index:2;width:100%}

/* полноэкранный кадр под содержанием */
.bleed{position:absolute;inset:0;z-index:0;overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed::after{content:"";position:absolute;inset:0}

/* ---------- 1. hero – тёмная ---------- */
#hero{justify-content:flex-end;padding-bottom:var(--space-80)}
/* сцена первого экрана: фотография живёт внутри SVG и маскируется кластером знака.
   Маска двигается одним трансформом – это заметно плавнее, чем пересборка clip-path каждый кадр. */
.hero-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-stage svg{width:100%;height:100%;display:block}
.hero-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--color-ink) 0%,var(--veil-82) 30%,var(--veil-30) 62%,var(--veil-10) 100%),
             linear-gradient(0deg,var(--veil-82) 0%,var(--veil-10) 46%,var(--veil-30) 100%)}
.hero__copy{position:relative;z-index:3;display:flex;flex-direction:column;
  max-width:var(--measure-hero)}
.hero__copy h1 em{font-style:normal;color:var(--color-accent-40)}
.hero__sub{margin-top:var(--space-32);max-width:var(--measure-s)}
.hero__row{margin-top:var(--space-48);display:flex;align-items:center;
  gap:var(--space-32);flex-wrap:wrap}
.hero__credit{position:absolute;right:var(--page-pad);bottom:var(--space-24);z-index:3;
  text-align:right;color:var(--color-fg-dim)}


/* ---------- 2. problem – светлая, воздушная ----------
   Не таблица и не карточка: три числа в строку с тонкими линиями, как в редакционной полосе. */
.problem__head{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--space-20)}
.problem__lead{grid-column:8 / span 5;align-self:end}
.timeline{grid-column:1 / span 12;display:grid;
  grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);
  margin-top:var(--space-120)}
.timeline__step{grid-column:span 4;display:flex;flex-direction:column;gap:var(--space-12)}
.timeline__step--now .display-num{color:var(--color-alarm)}
.timeline__when{color:var(--color-ink-on-sheet-dim)}

/* ---------- 4. turn – светлая, перелом аргумента ---------- */
#turn{align-items:center;text-align:center}
.turn__copy{display:flex;flex-direction:column;align-items:center;gap:var(--space-24);
  max-width:var(--measure-l)}
.turn__copy h2{text-wrap:balance}
.turn__mark{width:calc(var(--shape) * 1.45);margin-bottom:var(--space-40);overflow:visible}
.turn__mark svg{overflow:visible}
.turn__mark svg{width:100%;height:100%}



/* =======================================================================
   Секции 3–10 переписаны 2026-10-08 по правкам клиента:
   таблиц и карточек нет, горизонтальных линеек-разделителей нет,
   выдуманных гексагонов нет – вместо них фотографии клиента.
   ======================================================================= */

/* ---------- 3. scale: тяжесть проблемы в цифрах клиента ---------- */
#scale .bleed img{object-position:46% 52%}
#scale .bleed::after{
  background:linear-gradient(90deg,var(--veil-94) 0%,var(--veil-82) 40%,var(--veil-78) 100%),
             linear-gradient(0deg,var(--veil-82) 0%,var(--veil-45) 56%,var(--veil-60) 100%)}
.scale__head{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--space-20)}
.scale__anchor{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--space-12);
  margin-top:var(--space-80)}
.scale__anchor .display-num{color:var(--color-alarm-soft)}
.scale__burden{grid-column:7 / span 6;display:flex;flex-direction:column;
  gap:var(--space-32);margin-top:var(--space-80)}
.burden{display:flex;flex-direction:column;gap:var(--space-4)}
.burden b{font-weight:var(--weight-bold);color:var(--color-fg)}
.on-sheet .burden b{color:var(--color-ink-on-sheet)}

/* ---------- 5. virulence: две половины на фотографиях клиента ---------- */
.virulence__head{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--space-20)}
.virulence__lead{grid-column:8 / span 5;align-self:end}
.virulence__pair{grid-column:1 / span 12;display:grid;
  grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);
  margin-top:var(--space-64)}
.virulence__item{display:flex;flex-direction:column;gap:var(--space-16)}
.virulence__item--off{grid-column:1 / span 5}
.virulence__item--def{grid-column:7 / span 5}
.virulence__shot{width:100%;aspect-ratio:4 / 3;overflow:hidden}
.virulence__shot img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-l) var(--ease-out)}
.virulence__item:hover .virulence__shot img{transform:scale(1.04)}
.virulence__item--def{margin-top:var(--space-80)}

/* ---------- 6. dual-target: механизм, видео клиента ---------- */
.dual__head{grid-column:1 / span 7;display:flex;flex-direction:column;gap:var(--space-20)}
.dual__stage{grid-column:1 / span 12;max-width:var(--video-w);width:100%;
  margin:var(--space-64) auto 0;aspect-ratio:16 / 9;overflow:hidden;
  background:var(--color-ink)}
.dual__stage video,.dual__stage img{width:100%;height:100%;object-fit:cover}
.dual__steps{grid-column:1 / span 12;display:grid;
  grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);
  margin-top:var(--space-48)}
.dual__step{grid-column:span 3;display:flex;flex-direction:column;gap:var(--space-8)}
.dual__step .title-s{color:var(--color-accent)}

/* ---------- 7. pipeline ---------- */
.pipe__head{grid-column:1 / span 7;display:flex;flex-direction:column;gap:var(--space-20)}
.pipe__list{grid-column:1 / span 12;display:flex;flex-direction:column;
  gap:var(--space-48);margin-top:var(--space-64)}
.prog{display:grid;grid-template-columns:var(--stage-col) minmax(0,1fr);gap:var(--gutter);
  align-items:center}
.prog__name{display:flex;flex-direction:column;gap:var(--space-4)}
.prog__track{position:relative;height:var(--bar-h);background:var(--color-line-soft);
  overflow:hidden}
.prog__track i{position:absolute;inset:0;transform-origin:left;background:var(--color-accent)}
.prog--mid .prog__track i{background:var(--color-accent-60)}
.prog--early .prog__track i{background:var(--color-accent-40)}
.pipe__stages{grid-column:1 / span 12;display:grid;
  grid-template-columns:var(--stage-col) minmax(0,1fr);gap:var(--gutter);margin-top:var(--space-32)}
.pipe__stages ol{grid-column:2;display:grid;grid-template-columns:repeat(6,1fr);
  gap:var(--space-8);color:var(--color-fg-dim)}
.on-sheet .pipe__stages ol{color:var(--color-ink-on-sheet-dim)}

/* ---------- 8. evidence: публикации ---------- */
.ev__head{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--space-20)}
.ev__lead{grid-column:7 / span 6;align-self:end}
.ev__list{grid-column:1 / span 12;display:flex;flex-direction:column;
  gap:var(--space-48);margin-top:var(--space-80)}
.ev__item{display:grid;grid-template-columns:auto var(--stage-col) minmax(0,1fr);gap:var(--gutter);
  align-items:start;padding:var(--space-32) 0;position:relative;
  transition:transform var(--dur-m) var(--ease-out)}
.ev__item:hover{transform:translateX(var(--space-8))}
.ev__item .ev__link{display:inline-flex;align-items:baseline;gap:var(--space-8);flex-wrap:wrap}
.ev__item .ev__link svg{width:var(--space-12);height:var(--space-12);flex:0 0 auto;
  align-self:center;opacity:0;transform:translate(calc(var(--space-4) * -1),var(--space-4));
  transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-s) var(--ease-out)}
.ev__item:hover .ev__link svg{opacity:1;transform:translate(0,0)}
.ev__more{grid-column:1 / span 12;display:flex;justify-content:flex-start;
  margin-top:var(--space-48)}
.ev__item::before{content:"";position:absolute;left:0;right:0;top:0;
  height:var(--hairline);background:var(--color-line-on-sheet);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-l) var(--ease-out)}
.ev__item.is-in::before{transform:scaleX(1)}
.ev__no{color:var(--color-line-on-sheet);font-variant-numeric:tabular-nums;
  transition:color var(--dur-m) var(--ease-out)}
.ev__item:hover .ev__no{color:var(--color-accent)}
.ev__item .title-s{color:var(--color-ink-on-sheet);max-width:var(--measure-l)}
.ev__where{display:flex;flex-direction:column;gap:var(--space-4)}
.ev__where b{font-weight:var(--weight-bold);color:var(--color-ink-on-sheet)}
.ev__what{display:flex;flex-direction:column;gap:var(--space-8)}
.ev__who{color:var(--color-ink-on-sheet-dim)}
.ev__who em{font-style:normal;color:var(--color-ink-on-sheet-muted);
  font-weight:var(--weight-bold)}

/* ---------- 9. team: лента по прокрутке ---------- */
/* пинится только сцена с лентой: групповой кадр оставался внутри и выталкивал
   имена за нижнюю границу экрана – было видно только фотографии */
.team__stage{grid-column:1 / span 12;min-height:var(--screen-h);
  display:flex;flex-direction:column;justify-content:center;gap:var(--head-gap)}
.team__head{display:flex;flex-direction:column;gap:var(--space-20);max-width:var(--measure-hero)}
.team__strip{overflow:hidden;
  margin-left:calc(var(--page-pad) * -1);margin-right:calc(var(--page-pad) * -1);
  padding-left:var(--page-pad)}
.team__track{display:flex;gap:var(--gutter);width:max-content;
  padding-right:var(--page-pad);will-change:transform}
/* на узких экранах лента тянется пальцем: пин там отбирает жест */
.team__track.is-native{width:auto;overflow-x:auto;scrollbar-width:none}
.team__track.is-native::-webkit-scrollbar{display:none}
.person{flex:0 0 auto;width:var(--person-w);display:flex;flex-direction:column;
  gap:var(--space-12);text-align:left;
  transition:transform var(--dur-m) var(--ease-out)}
.person:hover{transform:translateY(calc(var(--space-8) * -1))}
.person__shot{position:relative;overflow:hidden}
.person__shot img{transition:transform var(--dur-l) var(--ease-out)}
.person:hover .person__shot img{transform:scale(1.05)}
.person .title-s{transition:color var(--dur-s) var(--ease-out)}
.person:hover .title-s{color:var(--color-accent-40)}
.person__shot{width:100%;aspect-ratio:1;overflow:hidden;background:var(--color-ink-soft)}
.person__shot img{width:100%;height:100%;object-fit:cover}
.team__group{grid-column:1 / span 12;aspect-ratio:21 / 9;overflow:hidden}
.team__group img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* ---------- 10. contact ---------- */
#contact .bleed img{object-position:50% 42%}
#contact .bleed::after{background:linear-gradient(90deg,var(--veil-94) 0%,var(--veil-82) 52%,var(--veil-60) 100%)}
.ct__head{grid-column:1 / span 7;display:flex;flex-direction:column;gap:var(--space-24)}
.ct__form{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--space-20)}
.ct__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-20)}
.ct__send{display:flex;align-items:center;gap:var(--space-24);flex-wrap:wrap;
  margin-top:var(--space-8)}
.ct__where{grid-column:8 / span 5;display:flex;flex-direction:column;gap:var(--space-24)}
.ct__block{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-16);
  align-items:start;padding:var(--space-20);border-radius:var(--radius-s);
  background:var(--color-hover-dark);
  transition:background var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out)}
.ct__block:hover{background:var(--color-ink-soft);transform:translateY(calc(var(--space-4) * -1))}
a.ct__block .ct__text b::after{content:"";display:inline-block;width:var(--space-12);height:var(--space-12);
  margin-left:var(--space-8);vertical-align:middle;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--dur-s) var(--ease-out)}
a.ct__block:hover .ct__text b::after{transform:translate(var(--space-2),calc(var(--space-2) * -1))}
.ct__ico{display:flex;align-items:center;justify-content:center;
  width:var(--space-40);height:var(--space-40);border-radius:var(--radius-pill);
  background:var(--color-accent);color:var(--color-fg)}
.ct__ico svg{width:var(--space-20);height:var(--space-20)}
.ct__text{display:flex;flex-direction:column;gap:var(--space-4)}
.ct__text b{font-weight:var(--weight-bold);color:var(--color-fg)}
.on-sheet .ct__text b{color:var(--color-ink-on-sheet)}
.ct__note{color:var(--color-fg-dim)}
.on-sheet .ct__note{color:var(--color-ink-on-sheet-dim)}

/* ---------- футер ---------- */
.foot{background:var(--color-ink-deep);color:var(--color-fg-dim);
  padding:var(--space-120) var(--page-pad) var(--space-40)}
/* Сетка футера: крупное обещание слева на половину листа, три равные колонки ссылок
   справа. Раньше колонки стояли на произвольных номерах и расходились. */
.foot__grid{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);
  gap:var(--gutter);row-gap:var(--space-80)}
.foot__brand{grid-column:1 / span 3;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--space-24)}
.foot__brand img{height:calc(var(--logo-h) * 1.2);width:auto;margin-left:0}
/* колонки стоят на тех же линиях сетки, что и содержание страницы,
   и начинаются сразу за знаком – без провала посередине */
.foot__col{display:flex;flex-direction:column;gap:var(--space-12);align-items:flex-start}
.foot__col--a{grid-column:5 / span 2}
.foot__col--b{grid-column:7 / span 2}
.foot__col--c{grid-column:9 / span 4}
.foot__col b{font-weight:var(--weight-bold);color:var(--color-fg);
  padding-bottom:var(--space-4)}
.foot__col a{position:relative;transition:color var(--dur-s) var(--ease-out)}
.foot__col a::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--hairline);background:currentColor;transform:scaleX(0);
  transform-origin:left;transition:transform var(--dur-s) var(--ease-out)}
.foot__col a:hover{color:var(--color-fg)}
.foot__col a:hover::after{transform:scaleX(1)}
.foot__base{grid-column:1 / span 12;display:flex;justify-content:space-between;
  align-items:center;gap:var(--space-24);flex-wrap:wrap;padding-top:var(--space-32);
  border-top:var(--hairline) solid var(--color-line-soft)}
.foot__base a:hover{color:var(--color-fg)}
/* кредит фотографа – служебная строка, он не должен спорить с остальным */
.foot__credit{color:var(--color-line)}



/* ---------- 4. broken-model: почему старая модель не работает ---------- */
.bm__head{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--space-20)}
.bm__lead{grid-column:8 / span 5;align-self:end}
.bm__pair{grid-column:1 / span 12;display:grid;
  grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);
  margin-top:var(--space-80)}
.bm__case{display:flex;flex-direction:column;gap:var(--space-16)}
.bm__case--a{grid-column:1 / span 5}
.bm__case--b{grid-column:7 / span 5}
.bm__figs{display:flex;gap:var(--space-40);flex-wrap:wrap;margin-top:var(--space-8)}
.bm__fig{display:flex;flex-direction:column;gap:var(--space-4)}

/* ---------- 8. future-proof: почему терапии держатся во времени ---------- */
.fp__head{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--space-20)}
.fp__lead{grid-column:7 / span 6;align-self:end}
.fp__pair{grid-column:1 / span 12;display:grid;
  grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);
  margin-top:var(--space-80)}
.fp__item{display:flex;flex-direction:column;gap:var(--space-12)}
.fp__item--a{grid-column:1 / span 5}
.fp__item--b{grid-column:7 / span 5}
.fp__shot{grid-column:1 / span 12;margin-top:var(--space-64);
  aspect-ratio:21 / 9;overflow:hidden}
.fp__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}

/* ---------- 12. momentum: экосистема и динамика ---------- */
.mo__head{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--space-20)}
.mo__lead{grid-column:8 / span 5;align-self:end}
.mo__shot{grid-column:1 / span 12;aspect-ratio:21 / 9;overflow:hidden}
.mo__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.mo__news{grid-column:1 / span 7;display:flex;flex-direction:column;gap:var(--space-8)}
.mo__item{display:grid;grid-template-columns:var(--space-120) minmax(0,1fr);gap:var(--gutter);
  align-items:baseline;padding:var(--space-24) 0;position:relative}
/* тонкая линия прочерчивается слева направо при появлении – данные, а не декор */
.mo__item::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--hairline);background:var(--color-line-on-sheet);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-l) var(--ease-out)}
.mo__item.is-in::after{transform:scaleX(1)}
.mo__item:hover .mo__year{color:var(--color-accent)}
.mo__year{display:block;font-variant-numeric:tabular-nums;
  color:var(--color-ink-on-sheet);transition:color var(--dur-s) var(--ease-out)}
.mo__when{display:block;color:var(--color-ink-on-sheet-dim)}
.mo__eco{grid-column:9 / span 4;display:flex;flex-direction:column;gap:var(--space-24)}
.mo__org{display:flex;flex-direction:column;gap:var(--space-12);
  padding:var(--space-24);border-radius:var(--radius-s);
  background:var(--color-sheet-pure);
  transition:transform var(--dur-m) var(--ease-out)}
.mo__org:hover{transform:translateY(calc(var(--space-4) * -1))}
.mo__org img{height:var(--space-40);width:auto;object-fit:contain;object-position:left}



/* ---------- статья ---------- */
.article{grid-column:3 / span 8;display:flex;flex-direction:column;gap:var(--space-32)}
.article p{max-width:var(--measure-l)}
.article__q{color:var(--color-ink-on-sheet);margin-top:var(--space-24)}
.article__quote{display:flex;flex-direction:column;gap:var(--space-12);
  padding-left:var(--space-32);border-left:var(--space-2) solid var(--color-accent);
  margin:var(--space-16) 0}
.article__quote cite{font-style:normal;color:var(--color-ink-on-sheet-dim)}
.article__list{display:flex;flex-direction:column;gap:var(--space-16)}
.article__list li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-16)}
.article__list li::before{content:"";width:var(--space-12);height:var(--space-12);
  margin-top:var(--space-8);background:var(--color-accent);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)}
.article__source{display:inline-flex;align-items:center;gap:var(--space-8);
  color:var(--color-ink-on-sheet-muted)}
.article__source:hover{color:var(--color-accent)}
.article__source svg{width:var(--space-12);height:var(--space-12)}

/* ---------- страница команды: человек строкой, а не карточкой ---------- */
.who-list{display:flex;flex-direction:column;gap:var(--space-80)}
.who{display:grid;grid-template-columns:var(--stage-col) minmax(0,1fr);gap:var(--space-48);
  align-items:start}
.who__shot{aspect-ratio:1;overflow:hidden;background:var(--color-sheet-deep)}
.who__shot img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-l) var(--ease-out)}
.who:hover .who__shot img{transform:scale(1.04)}
.who__text{display:flex;flex-direction:column;gap:var(--space-12);max-width:var(--measure-l)}
.who__role{color:var(--color-accent)}
.who__cv{color:var(--color-ink-on-sheet-dim)}
.band__logo{height:var(--space-64);width:auto;object-fit:contain;object-position:left}

/* ---------- список записей на внутренней странице ---------- */
.filter{grid-column:1 / span 12;display:flex;gap:var(--space-8);flex-wrap:wrap}
.filter button{padding:var(--space-8) var(--space-20);border-radius:var(--radius-pill);
  border:var(--hairline) solid var(--color-line-on-sheet);
  color:var(--color-ink-on-sheet-muted);
  transition:background var(--dur-s) var(--ease-out),color var(--dur-s) var(--ease-out),
             border-color var(--dur-s) var(--ease-out)}
.filter button:hover{border-color:var(--color-ink-on-sheet-dim)}
.filter button.is-on{background:var(--color-ink-on-sheet);color:var(--color-sheet);
  border-color:var(--color-ink-on-sheet)}
.list{grid-column:1 / span 12;display:flex;flex-direction:column}
.list__row{display:grid;grid-template-columns:auto var(--stage-col) minmax(0,1fr);gap:var(--gutter);
  align-items:start;padding:var(--space-32) 0;position:relative;
  border-top:var(--hairline) solid var(--color-line-on-sheet);
  transition:transform var(--dur-m) var(--ease-out)}
.list__row:last-child{border-bottom:var(--hairline) solid var(--color-line-on-sheet)}
.list__row:hover{transform:translateX(var(--space-8))}
.list__row[hidden]{display:none}
.list__no{color:var(--color-line-on-sheet);font-variant-numeric:tabular-nums;
  transition:color var(--dur-m) var(--ease-out)}
.list__row:hover .list__no{color:var(--color-accent)}
.list__meta{display:flex;flex-direction:column;gap:var(--space-4)}
.list__meta b{font-weight:var(--weight-bold);color:var(--color-ink-on-sheet)}
.list__body{display:flex;flex-direction:column;gap:var(--space-8)}
.list__who{color:var(--color-ink-on-sheet-dim)}
.list__who em{font-style:normal;color:var(--color-ink-on-sheet-muted);
  font-weight:var(--weight-bold)}
.list__link{display:inline-flex;align-items:baseline;gap:var(--space-8)}
.list__link svg{width:var(--space-12);height:var(--space-12);flex:0 0 auto;align-self:center;
  opacity:0;transform:translate(calc(var(--space-4) * -1),var(--space-4));
  transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-s) var(--ease-out)}
.list__row:hover .list__link svg{opacity:1;transform:translate(0,0)}
.list__empty{grid-column:1 / span 12;display:flex;flex-direction:column;
  gap:var(--space-24);align-items:flex-start;padding:var(--space-64) 0}
/* кнопка и адрес в одну строку: отдельная огромная кнопка выбивалась из полосы */
.open__cta{display:flex;align-items:center;gap:var(--space-24);flex-wrap:wrap;
  margin-top:var(--space-16)}

/* заголовок списка: фильтр справа от заголовка, а не отдельной строкой сверху */
.list-head{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--space-16)}
.list-lead{grid-column:7 / span 6;align-self:end}



/* =======================================================================
   Внутренние страницы. Общая оболочка: узкая колонка текста, крупный кадр,
   возврат на главную. Плотность движения ниже, чем на главной – это
   доказательный слой, он читается, а не смотрится (бриф, стр. 12).
   ======================================================================= */
/* герой внутренней страницы ниже, чем на главной: здесь человек пришёл читать,
   а не смотреть – содержание должно начинаться раньше.
   Сетка та же, что на главной: кикер и заголовок слева, лид в правой колонке. */
.page-hero{position:relative;min-height:var(--page-hero-h);display:flex;
  flex-direction:column;justify-content:flex-end;
  padding:var(--section-pad) var(--page-pad) var(--space-80);overflow:hidden}
/* Кикер, заголовок и лид начинаются с одной горизонтальной линии: лид выравнивается
   по верху колонки, а не висит выше заголовка. */
.page-hero__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);
  row-gap:var(--space-32);width:100%;align-items:start}
.page-hero__title{grid-column:1 / span 7;display:flex;flex-direction:column;gap:var(--space-16)}
.page-hero__lead{grid-column:9 / span 4}

/* ---------- содержание внутренней страницы ---------- */
/* Полоса: заголовок раздела слева, текст справа. Так же, как блоки на главной –
   не колонка по центру, которая на широком экране читается как документ. */
.band{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);
  row-gap:var(--space-32);grid-column:1 / span 12}
.band + .band{margin-top:var(--space-120)}
/* sticky здесь уводил заголовок вниз на высоту экрана – обычное выравнивание по верху */
.band__head{grid-column:1 / span 4;display:flex;flex-direction:column;gap:var(--space-16);
  align-self:start}
.band__body{grid-column:6 / span 7;display:flex;flex-direction:column;gap:var(--space-24)}
.band__body p{max-width:var(--measure-l)}
.band--wide .band__body{grid-column:1 / span 12}
.band--lead .band__body{grid-column:3 / span 8}

/* числа внутри полосы – редакционный ряд без рамок */
.band__figs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  margin-top:var(--space-24)}
.band__fig{display:flex;flex-direction:column;gap:var(--space-8)}
.band__fig .display-num-s{color:var(--color-accent)}
.on-sheet .band__fig .display-num-s{color:var(--color-accent)}

/* список с гексагональным маркером – тот же модуль бренда */
.band__list{display:flex;flex-direction:column;gap:var(--space-16)}
.band__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-16);
  align-items:start}
.band__list li::before{content:"";width:var(--space-12);height:var(--space-12);
  margin-top:var(--space-8);background:var(--color-accent);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)}

/* кадр во всю ширину полосы */
.band__shot{grid-column:1 / span 12;aspect-ratio:21 / 9;overflow:hidden;
  margin-top:var(--space-48)}
.band__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.band__shot--tall{aspect-ratio:3 / 2}
.band__cap{grid-column:1 / span 12;color:var(--color-ink-on-sheet-dim)}

/* пара кадров разной высоты */
.band__pair{grid-column:1 / span 12;display:grid;
  grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);
  margin-top:var(--space-48)}
.band__pair figure{display:flex;flex-direction:column;gap:var(--space-12)}
.band__pair figure:nth-child(1){grid-column:1 / span 7}
.band__pair figure:nth-child(2){grid-column:9 / span 4;margin-top:var(--space-80)}
.band__pair img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
.band__pair figcaption{color:var(--color-ink-on-sheet-dim)}

/* врезка-цитата */
.band__quote{grid-column:3 / span 8;display:flex;flex-direction:column;gap:var(--space-12);
  padding-left:var(--space-32);border-left:var(--space-2) solid var(--color-accent);
  margin:var(--space-32) 0}
.band__quote cite{font-style:normal;color:var(--color-ink-on-sheet-dim)}
.page-hero .bleed::after{
  background:linear-gradient(0deg,var(--veil-94) 0%,var(--veil-78) 38%,var(--veil-30) 72%,var(--veil-45) 100%)}
.page-hero .bleed img{transform:scale(1.04)}
.page-hero__copy{position:relative;z-index:2;max-width:var(--measure-hero);
  display:flex;flex-direction:column;gap:var(--space-24)}
.page-back{display:inline-flex;align-items:center;gap:var(--space-8);
  color:var(--color-fg-dim);transition:color var(--dur-s) var(--ease-out)}
.page-back:hover{color:var(--color-fg)}
.page-back svg{width:var(--space-16);height:var(--space-16)}
.prose{grid-column:3 / span 8;display:flex;flex-direction:column;gap:var(--space-32)}
.prose h2{margin-top:var(--space-48)}
.prose h2:first-child{margin-top:0}
.prose__figs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  margin:var(--space-24) 0}
.prose__fig{display:flex;flex-direction:column;gap:var(--space-8)}
.page-shot{grid-column:1 / span 12;aspect-ratio:21 / 9;overflow:hidden}
.page-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.page-next{grid-column:1 / span 12;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-24);flex-wrap:wrap}

/* =======================================================================
   Адаптив. ВСЕ медиазапросы держим в конце файла: при равной специфичности
   выигрывает то, что ниже, и мобильные правила, стоящие выше десктопных,
   молча перебивались ими. Из-за этого блок virulence на телефоне оставался
   двухколоночным и заголовок вставал по слову в строку.
   ======================================================================= */
@media (max-width:768px){
  .section{justify-content:flex-start;
    padding:var(--section-pad-s) var(--page-pad)}
  .section__inner > .grid,.section__inner{row-gap:var(--head-gap-s)}
  #hero{justify-content:flex-end}
  .hero-stage::after{
    background:linear-gradient(0deg,var(--veil-94) 12%,var(--veil-60) 48%,var(--veil-30) 100%)}
  .hero__row{margin-top:var(--space-32);gap:var(--space-24)}
  .hero__credit{display:none}
  .problem__head,.problem__lead,.timeline,
  .virulence__head,.virulence__lead,.virulence__pair{grid-column:1 / span 4}
  .problem__lead{margin-top:var(--space-24)}
  .timeline{grid-template-columns:repeat(4,1fr);margin-top:var(--space-48);gap:var(--space-32)}
  .timeline__step{grid-column:span 4}
  .virulence__pair{grid-template-columns:repeat(4,1fr);margin-top:var(--space-40);
    gap:var(--space-48)}
  .virulence__item--off,.virulence__item--def{grid-column:1 / span 4;margin-top:0}
  .virulence__lead{margin-top:var(--space-24)}
}
@media (max-width:768px){
  .scale__head,.scale__anchor,.scale__burden,
  .dual__head,.dual__stage,.dual__steps,
  .pipe__head,.pipe__list,.pipe__stages,
  .ev__head,.ev__lead,.ev__list,
  .team__stage,.team__group,
  .ct__head,.ct__form,.ct__where{grid-column:1 / span 4}
  .team__strip{margin-right:calc(var(--page-pad) * -1)}
  .foot{padding:var(--space-48) var(--page-pad) var(--space-32)}
  .foot__grid{grid-template-columns:repeat(4,1fr)}
  .foot{padding-top:var(--space-64)}
  .foot__grid{row-gap:var(--space-40)}
  .foot__brand,.foot__base{grid-column:1 / span 4}
  .foot__col--a{grid-column:1 / span 2}
  .foot__col--b{grid-column:3 / span 2}
  .foot__col--c{grid-column:1 / span 4}
  .ev__item{grid-template-columns:minmax(0,1fr)}
  .ev__no{display:none}
  .ct__pair{grid-template-columns:1fr}
  .scale__anchor,.scale__burden{margin-top:var(--space-40)}
  .dual__steps{grid-template-columns:repeat(4,1fr);gap:var(--space-32)}
  .dual__step{grid-column:span 4}
  .prog{grid-template-columns:minmax(0,1fr);gap:var(--space-12)}
  /* шкалу стадий на телефоне оставляем: без неё непонятно, относительно чего растёт полоса */
  .pipe__stages{grid-template-columns:1fr;margin-top:var(--space-16)}
  .pipe__stages ol{grid-column:1;grid-template-columns:repeat(3,1fr);
    gap:var(--space-4)}
  .pipe__stages ol li:nth-child(n+4){display:none}
  .pipe__list{gap:var(--space-32)}
  .team__group{aspect-ratio:16 / 10;margin-top:var(--space-40)}
}
@media (max-width:768px){
  .bm__head,.bm__lead,.bm__pair,
  .fp__head,.fp__lead,.fp__pair,.fp__shot,
  .mo__head,.mo__lead,.mo__news,.mo__eco,.mo__shot{grid-column:1 / span 4}
  .mo__shot{aspect-ratio:16 / 10}
  .bm__pair,.fp__pair{grid-template-columns:repeat(4,1fr);margin-top:var(--space-40);
    gap:var(--space-48)}
  .bm__case--a,.bm__case--b,.fp__item--a,.fp__item--b{grid-column:1 / span 4}
  .bm__lead,.mo__lead{margin-top:var(--space-24)}
  .fp__shot{aspect-ratio:16 / 10;margin-top:var(--space-40)}
  .mo__item{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
}
@media (max-width:768px){
  .filter,.list,.list__empty,.article,.list-head,.list-lead{grid-column:1 / span 4}
  .open__cta{gap:var(--space-16)}
  .who{grid-template-columns:minmax(0,1fr);gap:var(--space-20)}
  .who__shot{max-width:var(--stage-col)}
  .who-list{gap:var(--space-48)}
  .list__row{grid-template-columns:minmax(0,1fr);gap:var(--space-12)}
  .list__no{display:none}
}
@media (max-width:768px){
  .page-hero{padding:var(--section-pad-s) var(--page-pad)}
  .prose,.page-shot,.page-next{grid-column:1 / span 4}
  .prose__figs{grid-template-columns:1fr;gap:var(--space-24)}
  .page-hero__grid{grid-template-columns:repeat(4,1fr)}
  .page-hero__title,.page-hero__lead{grid-column:1 / span 4}
  .band{grid-template-columns:repeat(4,1fr)}
  .band + .band{margin-top:var(--space-64)}
  .band__head{grid-column:1 / span 4;position:static}
  .band__body,.band--lead .band__body{grid-column:1 / span 4}
  .band__figs{grid-template-columns:1fr;gap:var(--space-24)}
  .band__shot,.band__cap,.band__pair,.band__quote{grid-column:1 / span 4}
  .band__pair{grid-template-columns:1fr;gap:var(--space-32);margin-top:var(--space-32)}
  .band__pair figure:nth-child(1),.band__pair figure:nth-child(2){grid-column:1 / span 4;margin-top:0}
  .band__shot{aspect-ratio:16 / 10;margin-top:var(--space-32)}
  .band__quote{padding-left:var(--space-20);margin:var(--space-16) 0}
}

@media (max-width:768px){
  /* Мобильная доводка. Правила стоят последними, поэтому перебивают десктопные. */

  /* virulence: заголовок и текст во всю ширину, кадры один под другим */
  .virulence__head,.virulence__lead{grid-column:1 / span 4}
  .virulence__head .display-l{text-wrap:wrap}
  .virulence__lead{margin-top:var(--space-16)}
  .virulence__pair{grid-column:1 / span 4;grid-template-columns:1fr;
    margin-top:var(--space-40);gap:var(--space-48)}
  .virulence__item--off,.virulence__item--def{grid-column:1 / span 1;margin-top:0}
  .virulence__shot{aspect-ratio:16 / 10}

  /* перелом: знак не должен отстоять от текста так же, как секция от края */
  .turn__mark{width:var(--shape);margin-bottom:var(--space-24)}
  #turn{padding-top:var(--space-64);padding-bottom:var(--space-64)}

  /* полосы внутренних страниц: воздух между разделами больше, чем внутри раздела */
  .band + .band{margin-top:var(--space-80)}
  .band__body{gap:var(--space-20)}
  .band__shot,.band__pair{margin-top:var(--space-24)}

  /* заголовки на телефоне переносятся по словам, а не рвутся по одному слову в строку */
  .display-l,.display-m,.display-xl{text-wrap:wrap;overflow-wrap:break-word}
}

/* Стрелки ленты команды: на десктопе лента едет пином, стрелки не нужны;
   на телефоне она листается пальцем, и без стрелок не видно, что там есть ещё люди. */
.team__nav{display:none}
.team__arrow{width:var(--tap);height:var(--tap);display:flex;align-items:center;
  justify-content:center;border:var(--hairline) solid var(--color-line);
  border-radius:var(--radius-pill);color:var(--color-fg);
  transition:background var(--dur-s) var(--ease-out),opacity var(--dur-s) var(--ease-out)}
.team__arrow:hover{background:var(--color-hover-dark)}
.team__arrow[disabled]{opacity:.3}
.team__arrow svg{width:var(--space-20);height:var(--space-20)}
.prog__stage{color:var(--color-accent-40)}
.on-sheet .prog__stage{color:var(--color-accent)}

@media (max-width:768px){
  .team__nav{grid-column:1 / span 4;display:flex;justify-content:flex-end;
    gap:var(--space-12);margin-bottom:var(--space-16)}

  /* Внутри блока воздуха меньше, чем между блоками: 24 внутри против 80 снаружи.
     Раньше внутренний отступ был равен внешнему и блоки сливались. */
  .section__inner > .grid,.section__inner{row-gap:var(--space-32)}
  .virulence__pair{gap:var(--space-64)}
  .virulence__item{gap:var(--space-12)}
  .virulence__shot{margin-bottom:var(--space-4)}

  /* Контакты: форма и адреса – разные по смыслу части, им нужен явный разрыв */
  .ct__where{margin-top:var(--space-64);padding-top:var(--space-32);
    border-top:var(--hairline) solid var(--color-line)}
  .ct__form{gap:var(--space-16)}
  .ct__send{margin-top:var(--space-16)}

  /* Кнопка не должна рваться на две строки */
  .btn{white-space:nowrap}
  .btn--l{padding:var(--space-12) var(--space-20)}
}