/* Four editorial pages. Brandbook palette and Gilroy throughout.
   Scoped to .ala-editorial: the home, about and contact pages stay independent. */
.ala-editorial {
  --ed-ink: #00202d;
  --ed-blue: #00405a;
  --ed-mid: #074a65;
  --ed-steel: #7596a6;
  --ed-paper: #f2f5f6;
  --ed-line: #d4dfe3;
  /* Зазор трёхколоночной сетки «О компании»: им пользуются и
     .ed-principles, и .ed-about-manifest – колонки обязаны сходиться. */
  --ed-col-gap: 48px;
  /* ФОРМА КАДРА – в одном месте.
     Скруглённый угол у фотографий и плашек не описан в брендбуке:
     на странице «Фотостиль» там обычные прямоугольники с едва
     заметным радиусом. Этот приём добавлен вёрсткой. Держится
     токеном, чтобы форму можно было сменить одной правкой, а не
     ловить по восьми правилам. */
  --ed-photo-radius: 64px 4px 4px 4px;   /* один крупный угол сверху слева */
  --ed-photo-radius-flip: 4px 4px 64px 4px; /* зеркально – для лент */
  --ala-font-body: Gilroy, sans-serif;
  --ala-font-display: Gilroy, sans-serif;
  --ala-font-heading: Gilroy, sans-serif;
  font-family: Gilroy, sans-serif;
  color: var(--ed-ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}
/* Контейнеры наследуют общую сетку сайта: колонка 1440px и боковые
   поля по брейкпоинтам – см. design-system.css. */
.ala-editorial h1, .ala-editorial h2, .ala-editorial h3 { font-family: Gilroy, sans-serif; letter-spacing: -.035em; line-height: 1.06; font-weight: 700; text-wrap: balance; }
.ala-editorial h1 { font-size: clamp(38px, 4.7vw, 76px); font-weight: 800; }
.ala-editorial h2 { font-size: clamp(32px, 3.65vw, 58px); }
.ala-editorial h3 { font-size: clamp(23px, 2.2vw, 34px); }
.ala-editorial em { font-style: normal; color: var(--ed-steel); }
.ala-editorial p { text-wrap: pretty; }
.ala-editorial .ed-label { font-size: 14px; font-weight: 700; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; margin: 0 0 24px; }
.ala-editorial .ed-lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; max-width: 48ch; font-weight: 400; }
.ala-editorial .ed-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 16px 0; font-weight: 700; font-size: 16px; line-height: 1.4; text-decoration: none; border-bottom: 1px solid currentColor; transition: color .2s, background .2s; }
.ala-editorial .ed-button span { font-size: 24px; font-weight: 400; }
.ala-editorial .ed-button:hover { color: var(--ed-steel); }
.ala-editorial .ed-button--solid { border: 1px solid var(--ed-blue); padding: 17px 28px; border-radius: var(--ala-radius-pill); background: var(--ed-blue); color: #fff; }
.ala-editorial .ed-button--solid:hover { background: var(--ed-mid); color: #fff; }
.ala-editorial :is(a, summary, button):focus-visible { outline: 3px solid var(--ed-steel); outline-offset: 5px; }
.ala-editorial section[id] { scroll-margin-top: 120px; }
/* ---------------------------------------------------------------------
   Герой внутренних страниц – типографическая обложка
   ---------------------------------------------------------------------
   Раздел открывается словом, а не фотографией.

   До этого здесь сменились две схемы, и обе не сработали. Первая –
   «текст слева, карточка 5:4 справа»: дежурная композиция, в которой
   снимок висел в пустоте. Вторая – то же самое, но фотография уходила
   в правый край экрана: стало плотнее, но конструкция осталась той же,
   и половину первого экрана по-прежнему занимал сгенерированный сток,
   ничего не сообщающий о компании. Чем больше места ему отдано, тем
   заметнее, что это заглушка.

   Здесь фотографии на первом экране нет вообще:

     слева   – метка раздела и крупный заголовок; вторая строка набрана
               контуром, это фирменный приём из брендбука;
     справа  – лид и сразу оглавление страницы: по нему видно, что
               внутри, ещё до прокрутки;
     внизу   – строка состава раздела и главная кнопка.

   Что это даёт: конструкция одинакова на всех подстраницах и не
   зависит от того, есть ли под раздел удачный снимок. Когда придут
   настоящие фотографии объектов, герой не придётся переделывать –
   они лягут в ленты внутри страниц.

   Содержательные блоки, которые раньше жили в правой колонке (схема
   систем на «Технологиях», коридор на «Инфраструктуре», карточка
   WhatsApp на «Контактах»), не удалены – они перенесены ниже по
   странице, где им достаётся вся ширина, а не половина колонки.
   ------------------------------------------------------------------ */
.ed-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 140px;
  background: var(--ed-ink);
  color: #fff;
}

/* Фирменный диагональный штрих подложкой. */
.ed-hero-strokes {
  position: absolute;
  z-index: -1;
  right: -10%;
  top: -6%;
  width: min(72%, 1000px);
  aspect-ratio: 460 / 300;
  background: var(--ed-steel);
  opacity: 0.1;
  mask: url("../assets/img/brand-strokes.svg") center / contain no-repeat;
  -webkit-mask: url("../assets/img/brand-strokes.svg") center / contain no-repeat;
  pointer-events: none;
}

.ed-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 4.5vw, 72px);
  align-items: end;
  padding-block: 32px 56px;
}

/* ОДИНАКОВАЯ ВЫСОТА ГЕРОЯ НА ВСЕХ ПОДСТРАНИЦАХ.
   Высота набегала из содержимого и гуляла: 600px на «Решениях» и
   «Бизнесу» (два пункта оглавления), 661px на «Технологиях» и
   «Инфраструктуре» (три), 722px на «О компании» (четыре). При переходе
   между разделами шапка оставалась на месте, а контент под ней
   прыгал.

   730px берёт с запасом самый высокий случай – четыре пункта. Герой
   становится флекс-столбцом, сетка занимает всё свободное место и
   центрирует в нём свою строку, полоса с кнопкой прижата к низу.
   На узком экране ограничение снимается: там высоту диктует контент. */
/* 901, а не 900: одноколоночная раскладка героя объявлена как
   max-width:900px, и на ровно 900px оба правила применялись разом. */
@media (min-width: 901px) {
  .ed-hero {
    display: flex;
    flex-direction: column;
    min-height: 730px;
  }
  .ed-hero > .ala-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  /* Строка прижата к НИЗУ свободного места, а не центрирована.
     С центрированием низ содержимого гулял по страницам: 485px на
     «Решениях», 499 на «Контактах», 515 на «Технологиях», 545 на
     «О компании» – строка-то разной высоты, а центрируется она внутри
     одинаковых 730px. Прижатая к низу, она у всех заканчивается на
     одной отметке, и при переходе между разделами низ героя стоит
     на месте.

     align-items: end при этом остаётся на самой сетке: он равняет по
     низу две колонки внутри строки. Это разные вещи – items равняет
     колонки между собой, content ставит саму строку. */
  .ed-hero-grid {
    flex: 1;
    align-content: end;
  }
}

.ed-hero-copy .ed-label { color: #b3c8d1; margin: 0; }

.ala-editorial .ed-hero h1 {
  margin: 20px 0 0;
  /* Было clamp(46px, 6.4vw, 112px) – на 1440 это 92px, и заголовок
     давил всё остальное на первом экране. Здесь верх ограничен 72px,
     на 1440 выходит ~63px: обложка остаётся крупной, но перестаёт
     перекрикивать лид и оглавление рядом. */
  font-size: clamp(38px, 4.4vw, 72px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
/* Вторая строка – контуром. Заливка убирается только там, где обводка
   реально поддерживается: без @supports текст с color:transparent и
   неотрисованной обводкой просто исчезал бы. */
.ala-editorial .ed-hero h1 em {
  display: block;
  font-style: normal;
  color: var(--ed-steel);
}
@supports (-webkit-text-stroke: 1px #000) {
  .ala-editorial .ed-hero h1 em {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ed-steel);
  }
}

.ed-hero-aside { min-width: 0; }
.ed-hero-aside .ed-lead { margin: 0 0 28px; color: #d6e2e7; max-width: none; }

/* Оглавление страницы. Не сноска под героем, а часть первого экрана. */
.ed-hero-index { border-top: 1px solid #ffffff33; }
.ed-hero-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid #ffffff1a;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  color: #fff;
  transition: color .2s;
}
.ed-hero-index a:hover { color: var(--ed-steel); }
.ed-hero-index span[aria-hidden] { color: var(--ed-steel); }
.ed-jump-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--ed-steel);
}

/* Нижняя строка героя: состав раздела и главная кнопка. */
.ed-hero-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  border-top: 1px solid #ffffff33;
  padding-block: 22px 32px;
}
.ala-editorial .ed-hero .ed-button--solid { background: #fff; color: var(--ed-ink); border-color: #fff; }
.ala-editorial .ed-hero .ed-button--solid:hover { background: #dce6eb; color: var(--ed-ink); }

/* Строка состава раздела. Перечисляет, из чего раздел состоит; цифр
   здесь нет – только то, что подтверждено ТЗ. */
.ed-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cddbe1;
}
/* Разделителей-символов между пунктами нет намеренно. Точка между ними –
   хоть отдельным span, хоть псевдоэлементом – при переносе строки всегда
   оказывается сиротой: либо висит в конце строки, либо открывает
   следующую. Вместо неё каждый пункт несёт собственную левую линейку:
   она переносится вместе с пунктом. */
.ed-hero-meta__item {
  padding-left: 14px;
  border-left: 1px solid #ffffff33;
  line-height: 1.35;
}
/* «Китай → Казахстан → СНГ» – не перечисление, а маршрут: порядок несёт
   смысл, поэтому стрелка остаётся. Пунктов три, они помещаются в строку
   даже на узком экране. */
.ed-hero-meta--arrow { gap: 6px 10px; }
.ed-hero-meta--arrow .ed-hero-meta__item { padding-left: 0; border-left: 0; }
.ed-hero-meta--arrow .ed-hero-meta__item + .ed-hero-meta__item::before {
  content: "→";
  margin-inline: 10px;
  color: var(--ed-steel);
  font-weight: 400;
}

/* ---------------------------------------------------------------------
   Резервный вариант героя: фотография во весь экран
   ---------------------------------------------------------------------
   Не применён ни на одной странице – держится наготове на случай, если
   какой-то раздел захочется подать фотографией (уместнее всего на
   «О компании», когда придут настоящие снимки объектов).

   Разметка отличается от основного варианта: вместо .ed-hero-grid /
   .ed-hero-bar – фоновая картинка и один столбец текста.

     <section class="ed-hero ed-hero--photo">
       <img class="ed-hero-bg" src="…" alt="" />
       <div class="ala-container">
         <div class="ed-hero-copy">
           <p class="ed-label">ALA INTERNATIONAL / РАЗДЕЛ</p>
           <h1>Заголовок.<br /><em>Вторая строка.</em></h1>
           <p class="ed-lead">…</p>
           <a class="ed-button ed-button--solid" href="…">…</a>
         </div>
         <nav class="ed-hero-index ed-hero-index--row">…</nav>
       </div>
     </section>
   ------------------------------------------------------------------ */
.ed-hero--photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 140px;
}
.ed-hero--photo .ed-hero-strokes { display: none; }
.ed-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Двойное затемнение: по горизонтали – чтобы читался текст слева,
   по вертикали – чтобы нижняя строка оглавления не тонула в снимке. */
.ed-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,32,45,.96) 0%, rgba(0,32,45,.82) 42%,
      rgba(0,32,45,.28) 78%, rgba(0,32,45,.1) 100%),
    linear-gradient(0deg, rgba(0,32,45,.85) 0%, rgba(0,32,45,0) 45%);
}
.ed-hero--photo .ed-hero-copy { max-width: 52ch; padding-bottom: 48px; }
.ala-editorial .ed-hero--photo h1 {
  font-size: clamp(38px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-transform: none;
}
.ala-editorial .ed-hero--photo h1 em {
  color: var(--ed-steel);
  -webkit-text-stroke: 0;
}
.ed-hero--photo .ed-lead { margin-top: 24px; color: #d6e2e7; }
.ed-hero--photo .ed-button { margin-top: 32px; }

/* Оглавление в строку – для фотоварианта, где вертикальный список
   занял бы половину снимка. */
.ed-hero-index--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
}
.ed-hero-index--row a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 0;
  font-size: 16px;
}

/* Перенесённые из героя блоки: схема систем, коридор, карточка
   контактов. Ниже по странице им достаётся вся ширина колонки. */
.ed-lead-block { margin-bottom: clamp(40px, 4vw, 64px); }

@media (max-width: 900px) {
  .ed-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ala-editorial .ed-hero h1 { font-size: clamp(34px, 8vw, 54px); }
  .ed-hero-bar { align-items: flex-start; flex-direction: column; }
  .ed-hero--photo { min-height: 520px; }
}

/* Мёртвого набора .ed-cover* здесь больше нет: он остался от раннего
   захода на обложки разделов и ни разу не встречался в разметке. Роль
   обложки теперь играет сам .ed-hero. .ed-brand-lines сохранён – им
   пользуется карточка контактов. */
.ed-brand-lines { position: absolute; z-index: -1; right: -40px; top: 35px; width: 85%; aspect-ratio: 460/300; background: currentColor; opacity: .14; mask: url('../assets/img/brand-strokes.svg') center/contain no-repeat; -webkit-mask: url('../assets/img/brand-strokes.svg') center/contain no-repeat; transform: rotate(-7deg); pointer-events: none; }
/* Section rhythm and whitespace. */
.ed-section { padding-block: clamp(64px, 7vw, 112px); }
.ed-section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.ed-section-head .ed-label { color: var(--ed-mid); }
.ed-section-head > .ed-lead { color: #3d5864; }
/* Тёмная секция – самый глубокий цвет брендбука #00202D, а не #00405A.
   На #00405A фотографии внутри .ed-story-split почти сливались с
   фоном: снимки сняты в том же сине-стальном тоне, и крупный
   скруглённый угол – единственная форма кадра – переставал читаться.
   На #00202D снимок отделяется, угол виден, а тёмные плоскости
   сходятся с героем и футером в один тон.

   #00405A при этом никуда не делся: на нём стоят плашки – схема
   систем, коридор, карточка WhatsApp, подложка под фото. */
.ed-dark { background: var(--ed-ink); color: #fff; }
.ed-dark .ed-section-head .ed-label { color: #b9cdd6; }
.ed-dark .ed-section-head > .ed-lead { color: #d6e2e7; }
.ed-dark em { color: #aec6d2; }
.ed-num { color: var(--ed-steel); font-weight: 500; font-size: 20px; font-variant-numeric: tabular-nums; }
.ala-editorial .ed-list { list-style: none; padding: 0; margin: 0; }
.ed-list li { padding-block: 8px; font-size: 16px; line-height: 1.4; }
/* Solutions */
.ed-service { display: grid; grid-template-columns: 54px 1fr 1fr; gap: 32px; padding-block: 40px; border-top: 1px solid var(--ed-line); align-items: start; }
.ed-service:last-child { border-bottom: 1px solid var(--ed-line); }
.ed-service p { max-width: 36ch; margin-top: 20px; color: #3d5864; }
.ed-service .ed-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; }
.ed-service .ed-list li { padding: 12px 0; border-bottom: 1px solid var(--ed-line); }
.ed-import { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; }
.ed-import .ed-lead { margin-block: 28px 20px; color: #d6e2e7; }
.ed-timeline { list-style: none; padding: 0; margin: 0; }
.ed-timeline li { display: grid; grid-template-columns: 40px 1fr; gap: 24px; padding-block: 32px; border-top: 1px solid #ffffff40; }
.ed-timeline li > span { color: #aec6d2; }
.ed-timeline p { margin-top: 16px; color: #d6e2e7; }
.ed-audience-band { display: grid; grid-template-columns: 160px 1fr; gap: 32px; border-top: 1px solid #ffffff40; margin-top: 64px; padding-top: 32px; }
.ed-audience-band p { font-size: 16px; line-height: 1.8; }
.ed-audience-band .ed-label { color: #aec6d2; }
/* Technology. Functional system diagram, no fictional app interface. */
/* СХЕМА ЦИФРОВОЙ ИНФРАСТРУКТУРЫ.
   Раньше это была белая плита во всю ширину с надписью TMS и тремя
   рамками под ней – на 1328px она читалась как пустой прямоугольник,
   а не как схема. Плюс после переезда из героя в светлую секцию блок
   потерял унаследованный белый текст: подписи стали тёмными на тёмном.

   Теперь это три именованных слоя: ядро, системы вокруг него и то,
   чем пользуется клиент. Названия слоёв стоят слева и держат
   вертикаль, ядро ограничено по ширине и не расползается. Состав
   систем приведён к ТЗ – добавлены AI Agents, а нижний слой называет
   кабинет, калькулятор и трекинг вместо расплывчатого «Заявки ,
   Статусы, Документы». Цвет объявлен на самом блоке: от родителя он
   больше не зависит. */
.ed-system {
  padding: clamp(24px, 3vw, 40px);
  border-radius: 4px 72px 4px 4px;
  background: var(--ed-ink);
  color: #fff;
}
.ed-system > .ed-label { color: #b9cdd6; margin-bottom: 32px; }

/* Слой: подпись слева, содержимое справа. */
.ed-system-tier {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  align-items: center;
  padding-block: 24px;
  border-top: 1px solid #ffffff1f;
}
.ed-system-tier:first-of-type { border-top: 0; padding-top: 0; }
.ed-system-tier__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-steel);
}

/* Ядро. */
.ed-system-core {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 420px;
  padding: 22px 28px;
  border-radius: 4px 28px 4px 4px;
  background: #fff;
  color: var(--ed-ink);
}
.ed-system-core > span { font-size: 14px; font-weight: 700; letter-spacing: .18em; }
.ed-system-core strong { font-size: clamp(38px, 4vw, 52px); line-height: 1.05; letter-spacing: -.04em; }
.ed-system-core small { font-size: 15px; color: #3d5864; }

/* Системы. */
.ed-system-nodes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.ed-system-nodes > span {
  display: block;
  padding: 16px 18px;
  border: 1px solid #ffffff33;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.ed-system-nodes small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: #b9cdd6;
}

/* Слой клиента – не рамки, а метки: он стоит уровнем ближе к человеку. */
.ed-system-client { display: flex; flex-wrap: wrap; gap: 10px; }
.ed-system-client > span {
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff14;
  font-size: 15px;
  font-weight: 500;
}
.ed-modules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.ed-module { display: flex; flex-direction: column; background: var(--ed-paper); padding: 32px; min-height: 240px; border-radius: 4px; }
.ed-module .ed-label { color: #48636f; font-size: 14px; }
.ed-module h3 { margin-top: auto; }
.ed-module p { margin-top: 16px; color: #3d5864; }
.ed-module--large { grid-row: span 2; color: #fff; background: var(--ed-blue); position: relative; isolation: isolate; overflow: hidden; border-radius: 4px 4px 72px 4px; }
.ed-module--large::before { content: ''; position: absolute; inset: 20% -15% 10% 15%; z-index: -1; opacity: .12; background: #fff; mask: url('../assets/img/brand-strokes.svg') center/contain no-repeat; -webkit-mask: url('../assets/img/brand-strokes.svg') center/contain no-repeat; }
.ed-module--large h3 { font-size: clamp(40px,5vw,72px); }
.ed-module--large p, .ed-module--large .ed-label { color: #d6e2e7; }
#cabinet { background: var(--ed-paper); }
.ed-cabinet { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 4px; }
.ed-cabinet-title { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px,4vw,56px); color: #fff; background: var(--ed-ink); display: flex; align-items: start; flex-direction: column; gap: 32px; border-radius: 64px 4px 4px 4px; }
.ed-cabinet-title .ed-label { margin: 0; }
.ed-cabinet-title h3 { margin-block: auto; font-size: clamp(30px,3vw,44px); }
.ed-cabinet-title .ed-button--solid { background: #fff; color: var(--ed-ink); border-color: #fff; }
.ed-cabinet-details { padding: 16px 32px; }
.ed-cabinet-details article { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding-block: 24px; }
.ed-cabinet-details article + article { border-top: 1px solid var(--ed-line); }
.ed-cabinet-details article > span { color: #48636f; }
.ed-cabinet-details h3 { font-size: 24px; }
.ed-cabinet-details p { margin-top: 12px; color: #3d5864; }
.ed-tool-links { display: flex; flex-wrap: wrap; gap: 24px 56px; margin-top: 32px; }
.ed-split .ed-section-head { margin-bottom: 24px; }
.ed-dark .ed-button--solid { background: #fff; color: var(--ed-ink); border-color: #fff; }
/* Infrastructure: schematic corridor, then geography and operations. */
.ed-route-cover {
  padding: 36px;
  background: var(--ed-ink);
  color: #fff;
  border-radius: 4px 72px 4px 4px;
}
.ed-route-cover .ed-label { color: #b9cdd6; }
.ed-route-cover ol { list-style: none; margin: 0; padding: 0; }
.ed-route-cover li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 20px 0; }
.ed-route-cover li:not(:last-child)::after { content:''; position:absolute; left:15px; top:54px; bottom:-20px; border-left:1px solid #7596a6; }
.ed-route-cover li > span { grid-row: span 2; border: 1px solid #7596a6; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; font-size: 14px; }
.ed-route-cover strong { font-size: clamp(28px,3vw,42px); font-weight: 500; line-height: 1.1; }
.ed-route-cover small { font-size: 16px; color: #b9cdd6; }
.ed-regions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.ed-regions article { border-top: 1px solid var(--ed-line); padding-top: 24px; }
.ed-region-code { display: block; font-weight: 800; color: var(--ed-steel); font-size: clamp(68px,8vw,112px); letter-spacing: -.055em; line-height: 1.1; margin-bottom: 32px; }
.ed-regions p { color: #3d5864; margin-block: 16px 24px; max-width: 32ch; }
.ed-regions .ed-list { border-top: 1px solid var(--ed-line); padding-top: 16px; }
.ed-operations { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px 32px; }
.ed-operations article { border-top: 1px solid #ffffff40; padding-top: 20px; }
.ed-operations .ed-num { color: #b9cdd6; }
.ed-operations h3 { margin-top: 32px; font-size: clamp(21px,1.9vw,28px); }
.ed-operations p { color: #d6e2e7; margin-top: 16px; }
.ed-network { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding:0; margin:0; }
.ed-network li { position: relative; padding-right: 32px; }
.ed-network li::before { content:''; position:absolute; top:22px; left:0; right:0; border-top:1px solid var(--ed-line); }
.ed-network li > span { position:relative; display:grid; place-items:center; background:var(--ed-blue); color:#fff; border-radius:50%; width:44px; height:44px; margin-bottom:32px; }
.ed-network h3 { font-size:24px; }
.ed-network p { color:#3d5864; margin-top:16px; }
/* Business: readable disclosure rows instead of tall cards. */
.ed-audiences details { border-top:1px solid var(--ed-line); }
.ed-audiences details:last-child { border-bottom:1px solid var(--ed-line); }
.ed-audiences summary { display:grid; grid-template-columns:48px 1fr 1fr 32px; gap:24px; align-items:center; list-style:none; cursor:pointer; padding-block:32px; }
.ed-audiences summary::-webkit-details-marker { display:none; }
.ed-audiences summary h3 { font-size:clamp(23px,2.2vw,32px); }
.ed-audience-note { color:#3d5864; font-size:16px; line-height:1.5; }
.ed-toggle { font-size:32px; font-weight:400; transition:transform .2s; }
.ed-audiences details[open] .ed-toggle { transform:rotate(45deg); }
.ed-audiences details[open] summary h3 { color:var(--ed-mid); }
.ed-audience-body { padding:0 56px 32px 72px; max-width:900px; }
.ed-audience-body p { font-size:18px; color:#3d5864; max-width:58ch; }
/* Ссылка в раскрытой аудитории была бледной: серый текст .ed-button на
   светлом фоне читался как служебная сноска, хотя это единственный
   выход из блока. Теперь фирменный цвет и линия под ним заметны, а
   подпись называет, куда ведёт, вместо шести одинаковых «Подробнее». */
.ed-audience-body .ed-button {
  margin-top: 16px;
  gap: 16px;
  color: var(--ed-blue);
  border-bottom-width: 2px;
}
.ed-audience-body .ed-button:hover { color: var(--ed-ink); }
.ed-terms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.ed-terms article { border-top:1px solid #ffffff40; padding-top:28px; }
.ed-terms .ed-label { color:#b9cdd6; }
.ed-terms h3 { margin-bottom:24px; }
.ed-terms .ed-list li { color:#d6e2e7; padding-block:12px; border-top:1px solid #ffffff20; }
/* Final call to action, intentionally separate from the old card component. */
/* Закрывающий блок.
   На «О компании» он идёт сразу за «Развитием», которое залито тем же
   --ed-paper: две секции стыковались встык, без единой линии между
   ними, и читались как одна серая плита с текстом в два этажа.

   Теперь у блока есть собственная граница сверху и фирменный штрих
   подложкой – он читается как отдельная, закрывающая плоскость.
   На страницах, где перед ним стоит тёмная секция, линия приходится
   на стык тёмного и светлого и не мозолит глаз. */
.ed-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ed-paper);
  border-top: 1px solid var(--ed-line);
  padding-block: clamp(64px, 7vw, 104px);
}
.ed-close::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -30%;
  width: min(46%, 620px);
  aspect-ratio: 460 / 300;
  background: var(--ed-blue);
  opacity: .07;
  mask: url("../assets/img/brand-strokes.svg") center / contain no-repeat;
  -webkit-mask: url("../assets/img/brand-strokes.svg") center / contain no-repeat;
  pointer-events: none;
}
.ed-close-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:center; }
.ed-close .ed-lead { margin-top:24px; color:#3d5864; }
.ed-close-actions .ed-button { gap:16px; }
/* Кнопки в закрывающем блоке стоят в строку и прижаты к правому краю.
   Раньше они шли столбиком от левого края своей колонки и висели
   посреди пустоты. Выравнивание сделано флексом (justify-content:
   flex-end), а не text-align: кнопки – блочные элементы, text-align
   на них не действует.

   flex-wrap оставлен: на промежуточных ширинах вторая кнопка
   переносится под первую, оставаясь прижатой вправо. */
/* Зазор 32px: залитая кнопка и текстовая ссылка рядом с ней при 16px
   почти касались, и подчёркивание ссылки читалось как продолжение
   кнопки. */
.ed-close-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 20px 32px;
}
/* Правила .ala-editorial .ala-header__cta здесь больше нет: оно
   заливало кнопку шапки цветом --ed-blue поверх её собственных
   состояний, и на тёмном герое кнопка почти пропадала. Шапка теперь
   сама переключает заливку по состоянию (см. landing.css). */
.ala-editorial .ala-nav a[aria-current='page'] { text-decoration:underline; text-underline-offset:6px; }
/* Responsive composition, no clipped rows or tiny body copy. */
@media (max-width:1100px) {
  .ed-hero { padding-top:144px; }
  .ed-hero-grid { gap:32px; }
  .ed-system, .ed-route-cover { padding:28px; }
  .ed-system-nodes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ed-service { grid-template-columns:40px 1fr 1fr; gap:24px; }
  .ed-service .ed-list { grid-template-columns:1fr; }
  .ed-operations { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ed-modules { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ed-module--large { grid-row:auto; grid-column:1 / -1; min-height:280px; }
}
@media (max-width:767px) {
  .ed-hero-grid, .ed-section-head, .ed-import, .ed-cabinet, .ed-close-grid { grid-template-columns:1fr; gap:32px; }
  .ed-hero { padding-top:120px; }
  .ed-hero-index--row { gap:16px 24px; }
  .ed-hero-index--row a { gap:12px; }
  .ed-section-head { margin-bottom:40px; }
  .ed-service { grid-template-columns:32px 1fr; gap:16px; padding-block:32px; }
  .ed-service .ed-list { grid-column:2; }
  .ed-service p { margin-top:16px; }
  .ed-audience-band { grid-template-columns:1fr; gap:8px; margin-top:40px; }
  .ed-audience-band .ed-label { margin-bottom:0; }
  .ed-modules, .ed-regions, .ed-terms { grid-template-columns:1fr; }
  .ed-module { min-height:220px; padding:28px; }
  .ed-module--large { min-height:280px; }
  .ed-cabinet-title { min-height:320px; padding:32px; }
  .ed-cabinet-details { padding:8px 24px; }
  .ed-regions { gap:32px; }
  .ed-region-code { font-size:68px; margin-bottom:16px; }
  .ed-regions .ed-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
  .ed-network { grid-template-columns:1fr; gap:32px; }
  .ed-network li { display:grid; grid-template-columns:44px 1fr; gap:0 24px; padding-right:0; }
  .ed-network li::before { top:22px; bottom:-32px; left:22px; right:auto; border-top:0; border-left:1px solid var(--ed-line); }
  .ed-network li:last-child::before { display:none; }
  .ed-network li > span { grid-row:span 2; margin:0; }
  .ed-network h3 { align-self:center; }
  .ed-network p { grid-column:2; margin-top:12px; }
  .ed-audiences summary { grid-template-columns:28px 1fr 24px; gap:12px; padding-block:24px; }
  .ed-audience-note { grid-column:2; grid-row:2; }
  .ed-toggle { grid-column:3; grid-row:1; }
  .ed-audience-body { padding:0 0 24px 40px; }
  .ed-terms { gap:32px; }
  .ed-close-actions { justify-content:stretch; align-items:stretch; flex-direction:column; }
  .ed-system-tier { grid-template-columns:1fr; gap:12px; align-items:start; }
  .ed-system-core { max-width:none; }
}
@media (max-width:380px) {
  .ala-editorial h1 { font-size:34px; }
  .ed-system, .ed-route-cover { padding:24px 18px; }
  .ed-operations { grid-template-columns:1fr; gap:28px; }
  .ed-operations h3 { margin-top:16px; }
  .ed-system-nodes { grid-template-columns:1fr; gap:6px; }
}
@media (prefers-reduced-motion:reduce) { .ala-editorial *, .ala-editorial *::before { transition:none !important; } }
/* Photography and company story, on the original shared site grid. */
.ed-photo { position:relative; margin:0; min-width:0; }
.ed-photo img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; background:var(--ed-blue); }
/* Правил для figcaption здесь больше нет: подписи вида
   «AI-иллюстрация логистических операций» удалены со всех страниц.
   Они признавались в том, что фотографии не настоящие, и делали это
   мелким кеглем под каждым снимком – на пяти страницах подряд. Когда
   придут реальные фотографии объектов, подпись вернётся уже как
   содержательная (город, объект), а не как дисклеймер. */
/* Правил .ed-hero-photo здесь больше нет: фотографии на первом экране
   подстраниц не осталось. Снимки, стоявшие в героях «Решений» и
   «Бизнесу», перенесены в ленты .ed-photo-banner внутри страниц. */
.ed-photo-banner { padding-top:0; }
.ed-photo-banner img { aspect-ratio: 2.8/1; border-radius: var(--ed-photo-radius-flip); }
/* Лента между двумя тёмными секциями («Инфраструктура»: карта сети -> операции в Китае).
   Белая полоса между тёмными блоками выглядела разрывом, а фото прилипало к верхнему:
   здесь фон продолжает тёмный, отступы сверху и снизу дают соседние секции – поровну. */
.ed-dark + .ed-photo-banner:has(+ .ed-dark) { background: var(--ed-ink); padding-bottom: 0; }
.ed-photo-intro { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:32px; }
/* Собственного героя у «О компании» больше нет: правила .ed-about-hero
   и .ed-about-intro удалены. Страница открывается той же обложкой, что
   и остальные подстраницы (.ed-hero), а панорама терминала вынесена
   лентой .ed-photo-banner сразу под герой. Дескриптор из ТЗ остался на
   первом экране – он стоит под заголовком. */
.ed-hero .ed-about-descriptor {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b9cdd6;
}
/* Фотография в блоке «Кто мы»: занимает всю левую колонку – ту же,
   что и карточка «01 Полный цикл» под ней. Раньше здесь стоял
   фирменный штрих, а панорама шла отдельной лентой сразу под героем;
   лента убрана, снимок работает внутри содержательного блока. */
/* Высота фотографии НЕ задаётся пропорцией: она равна высоте текста
   справа. Пропорция 4:5 давала кадр 513px при тексте в 250px – снимок
   торчал вниз почти вдвое и тянул на себя весь блок.

   Механика: ячейки грида растягиваются по высоте строки (align-items
   по умолчанию stretch), левая колонка – флекс-столбец, фотография в
   нём занимает всё оставшееся место, а кадр подрезается по object-fit.
   Строку задаёт текстовая колонка, поэтому высота подгоняется сама.

   min-height – страховка на случай очень короткого текста. */
.ed-about-manifest > div:first-child {
  display: flex;
  flex-direction: column;
}
.ed-manifest-photo {
  flex: 1;
  min-height: 300px;
}
.ed-manifest-photo img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: var(--ed-photo-radius);
}
/* Блок «Кто мы» и три принципа под ним стоят на ОДНОЙ сетке из трёх
   колонок. Раньше манифест делился как .55fr / 1.45fr с зазором 64px,
   а принципы – на три равные с зазором 48px: левый столбец манифеста
   выходил 348px против 411px у карточки «01 Полный цикл», и колонки
   не сходились ни по одной вертикали.

   Ширина колонки считается из той же формулы, что и у .ed-principles,
   поэтому левый блок ровно равен первой карточке, а текст справа
   начинается там же, где «02 Контроль операций». */
.ed-about-manifest {
  display: grid;
  grid-template-columns: calc((100% - 2 * var(--ed-col-gap)) / 3) 1fr;
  gap: var(--ed-col-gap);
}
.ed-about-manifest .ed-lead { margin-top:28px; max-width:62ch; }
.ed-about-manifest em { color:var(--ed-mid); }

/* Правил .ed-brand-emblem здесь больше нет: в левой колонке «Кто мы»
   теперь стоит фотография, а не фирменный штрих. Сам штрих остался
   подложкой в героях (.ed-hero-strokes) и в футере. */

.ed-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ed-col-gap);
  margin-top: 56px;
}
.ed-principles article { border-top:1px solid var(--ed-line); padding-top:24px; }
.ed-principles h3 { margin:20px 0 16px; font-size:clamp(24px,2vw,32px); }
.ed-principles p { color:#3d5864; font-size:18px; max-width:42ch; }
.ed-principles .ed-button { margin-top:20px; }
.ed-story-split { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(32px,5vw,88px); }
.ed-story-split .ed-photo img { aspect-ratio:4/5; border-radius: var(--ed-photo-radius); }
.ed-story-copy .ed-lead { margin-top:28px; }
.ed-story-copy > p:not(.ed-label) { color:#d6e2e7; }
.ed-story-copy .ed-list { margin-block:24px; }
.ed-story-copy .ed-list li { border-bottom:1px solid #ffffff30; padding-block:16px; }
.ed-story-copy .ed-button { margin-top:24px; }
.ed-about-directions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 56px; }
.ed-about-directions > a { display:grid; grid-template-columns:40px 1fr 24px; gap:24px; border-top:1px solid var(--ed-line); padding-block:32px; text-decoration:none; }
.ed-about-directions h3 { font-size:clamp(24px,2vw,32px); }
.ed-about-directions p { margin-top:16px; color:#3d5864; max-width:42ch; }
.ed-about-directions a:hover h3 { color:var(--ed-mid); }
.ala-about #geography { background:var(--ed-paper); }
.ed-about-corridor { display:grid; grid-template-columns:1fr 48px 1fr 48px 1fr; gap:24px; align-items:start; margin-bottom:32px; }
.ed-about-corridor article { border-top:2px solid var(--ed-steel); padding-top:24px; }
.ed-about-corridor .ed-label { font-size:14px; color:#48636f; min-height:42px; }
.ed-about-corridor h3 { font-size:clamp(30px,3.3vw,52px); }
.ed-about-corridor p { color:#3d5864; margin-top:24px; font-size:18px; }
.ed-corridor-arrow { font-size:36px; color:var(--ed-steel); margin-top:66px; }
.ed-system-tags { display:flex; flex-wrap:wrap; gap:12px; margin-block:28px; }
.ed-system-tags span { font-size:18px; border:1px solid #ffffff50; padding:10px 16px; }
.ala-about #roadmap { background:var(--ed-paper); }
.ed-development { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; }
.ed-development .ed-lead { margin-top:24px; color:#3d5864; }
.ed-future { display:grid; gap:32px; }
.ed-future article { border-top:1px dashed var(--ed-steel); padding-top:24px; }
.ed-future .ed-label { color:#48636f; margin-bottom:16px; }
/* Колонка контента теперь 1440px, поэтому «широкая» ветка начинается
   там, где герой действительно получает запас, а не с 1920px. */
@media(min-width:1440px) {
  .ed-hero-grid { gap:80px; }
}
@media(max-width:1023px) {
  .ed-about-manifest { grid-template-columns:1fr; gap:24px; }
  .ed-about-corridor { gap:16px; grid-template-columns:1fr 24px 1fr 24px 1fr; }
}
@media(max-width:767px) {
  .ed-story-split, .ed-about-directions, .ed-development, .ed-photo-intro { grid-template-columns:1fr; gap:32px; }
  .ed-manifest-photo { min-height:0; }
  .ed-manifest-photo img { height:auto; aspect-ratio:4/3; }
  .ed-principles { grid-template-columns:1fr; gap:32px; margin-top:40px; }
  .ed-story-split .ed-photo img { aspect-ratio:4/3; }
  .ed-story-split--reverse .ed-photo { order:-1; }
  .ed-about-corridor { grid-template-columns:1fr; gap:24px; }
  .ed-about-corridor .ed-label { min-height:0; }
  .ed-corridor-arrow { transform:rotate(90deg); margin:0; justify-self:start; line-height:1; }
  .ed-about-directions > a { grid-template-columns:28px 1fr 20px; gap:16px; }
  .ed-photo-banner img { aspect-ratio:4/3; }
}

/* Wide editorial photographs belong to their section, inside the shared grid. */
.ed-section-photo { margin: 0 0 48px; }
.ed-section-photo img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; border-radius: 0 0 64px 0; }
@media (max-width: 767px) {
  .ed-section-photo { margin-bottom: 32px; }
  .ed-section-photo img { border-bottom-right-radius: 40px; }
}