/* ============================================================
   layout.css — каркас страницы: контейнер, секции, hero,
   крупные блоки (кейсы, панели услуг, тёмная секция, цифры, footer)
   Брейкпоинты: desktop 1440+, tablet 768–1024, mobile 375–428
   ============================================================ */

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- секции ---------- */
.section {
  padding-block: var(--space-xl) 0;
}

.section:last-of-type {
  /* было var(--space-xl): вместе с новым верхним отступом футера
     (тоже var(--space-xl)) зазор перед футером задваивался */
  padding-bottom: var(--space-m);
}

/* строка заголовка: h2 слева, pill справа (как в референсе) */
.section__headrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

/* блок «Офис» на contacts.html — расстояние от заголовка до адреса
   было как у обычных секций (var(--space-l) = 48px), сокращаем */
#office .section__headrow {
  margin-bottom: var(--space-s);
}

.section__headrow h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  max-width: 16ch;
}

h2 .dim { color: var(--text-dim); }

/* ---------- сетки ---------- */
.grid {
  display: grid;
  gap: var(--space-s);
}

.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- header: плавающий pill ---------- */
.header {
  position: fixed;
  inset: 18px 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none; /* кликается только сам pill и контакт */
}

.header__pill {
  position: relative;
  z-index: 0; /* локальный stacking context для ::before ниже */
  pointer-events: auto;
  display: flex;
  align-items: center;
  /* без gap: схлопнутые логотип/разделитель не оставляют зазоров,
     интервалы задают сами элементы */
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 24px rgba(15, 18, 22, 0.08);
}

/* фон + блюр вынесены в ::before: backdrop-filter на самом .header__pill
   создаёт containing block для position: fixed-потомков — в него попадает
   .nav в развёрнутом мобильном меню, и его left/right резолвятся не от
   вьюпорта, а от крошечного pill (~60px), меню схлопывается в узкую
   нечитаемую полоску. У ::before нет position: fixed-потомков, поэтому
   он безопасен для containing block */
.header__pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(240, 242, 244, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* на первом блоке pill показывает только пункты меню; логотип и
   разделитель появляются после скролла за hero (.header--scrolled из JS) */
.header__pill .logo {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

.header__divider {
  width: 0;
  height: 18px;
  background: rgba(15, 18, 22, 0.18);
  opacity: 0;
  transition: width 0.4s ease, margin 0.4s ease, opacity 0.3s ease;
}

.header--scrolled .header__pill .logo {
  max-width: 160px;
  opacity: 1;
  margin-left: 12px; /* отступ от края pill только у видимого логотипа */
}

.header--scrolled .header__divider {
  width: 1px;
  /* справа у «Услуги» свой внутренний паддинг 14px — компенсируем,
     чтобы визуальные зазоры по обе стороны разделителя были равными */
  margin-inline: 16px 2px;
  opacity: 1;
}

/* .header__contact — «Связаться» на страницах БЕЗ hero, где он виден
   всегда (.header--contact-pill). На index.html та же роль у .header__cta
   ниже: то же место (уровень меню, правый край), но вид переключается по
   .header--scrolled, т.к. поверх тёмного hero нужен контурный вариант. */
.header__contact {
  pointer-events: auto;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 500;
  color: var(--on-dark);
  mix-blend-mode: difference; /* читается и на тёмном hero, и на светлых секциях */
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* на страницах без hero (.header--contact-pill) — та же полупрозрачная
   «таблетка», что у меню, и тот же тёмный текст без подчёркивания, что
   у пунктов навигации; фон сам держит контраст, mix-blend-mode не нужен */
.header--contact-pill .header__contact {
  background: rgba(240, 242, 244, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 24px rgba(15, 18, 22, 0.08);
  color: var(--text-primary);
  mix-blend-mode: normal;
}

/* ---------- hero (тёмный) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* пилюлю убрали — контент стал короче, поэтому снова якорим к низу
     (через padding-bottom у .hero__content), но с меньшим отступом,
     чем было изначально — блок чуть ниже центра, а не у самого края */
  align-items: flex-end;
  overflow: hidden;
  /* отдельная подложка (Figma-экспорт) под графом — сам граф теперь
     рисуется с прозрачным фоном (js/main.js), его собственные настройки
     (цвета/плотность/vignette) не менялись, так что «слом» из-за смены
     заливки канваса больше не повторится */
  background: var(--hero-bg) url("../assets/images/hero-bg-gradient.svg") center / cover no-repeat;
  color: var(--on-dark);
}

/* ПЛЕЙСХОЛДЕР (этап 2): canvas NodeGraph (пресет radial), линии справа */
.hero-canvas-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 30%, rgba(47, 185, 232, 0.07), transparent 55%),
    radial-gradient(ellipse at 95% 80%, rgba(124, 140, 255, 0.06), transparent 45%);
}

.hero__logo {
  position: absolute;
  top: 24px;
  /* левый край логотипа = левый край .container (текстовых блоков):
     отступ до контейнера + его внутренний паддинг */
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  z-index: 2;
}

.hero__logo img {
  height: 56px;
  width: auto;
}

/* угловой логотип на страницах без hero. По умолчанию — fixed (404.html:
   страница не скроллится вообще, логотип должен быть виден всегда). */
.corner-logo {
  position: fixed;
  top: 24px;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  z-index: 101; /* выше .header (100), логотип поверх pill-меню при необходимости */
}

.corner-logo img {
  height: 56px;
  width: auto;
}

/* privacy-policy.html: страница скроллится, поэтому логотип должен вести
   себя как hero__logo на index.html — уезжать вместе с контентом, а не
   висеть поверх него постоянно. .page-logo-anchor — узкая полоса в самом
   верху документа; когда она уходит из вьюпорта, main.js переключает
   header в .header--scrolled (мини-лого появляется в pill). */
.page-logo-anchor {
  position: relative;
  /* было 96px — вместе с padding-top секций ниже (.documents/.portfolio/
     .legal) давало слишком большой отступ до контента на второстепенных
     страницах */
  height: 76px;
}

.page-logo-anchor .corner-logo {
  position: absolute;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  /* низ якорит .hero (align-items: flex-end) — нижний отступ напрямую
     двигает блок вверх/вниз по экрану; увеличен, чтобы заголовок/кнопки
     не перекрывались фиксированным cookie-баннером при первом открытии */
  padding-block: 120px clamp(130px, 15vh, 170px);
}

.hero__content h1 {
  /* -40% от var(--fs-h1), затем +12pt (16px), затем -8px */
  font-size: clamp(27px, calc(3.24vw + 8px), 54px);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  /* было 17ch — при уменьшенном шрифте это давало узкий блок,
     из-за чего весь текст казался сдвинутым влево */
  max-width: 880px; /* было 760px */
  /* тот же отступ, что у .hero__note margin-top, — одинаковые зазоры
     заголовок→подзаголовок и подзаголовок→пилюля */
  margin-bottom: var(--space-m);
}

.hero__sub {
  max-width: 880px; /* было 760px */
  color: var(--on-dark-secondary);
  font-size: 20.4px; /* было 17px, +20% */
}

/* p.hero__note (а не просто .hero__note): components.css подключается
   ПОСЛЕ layout.css, и правило .pill (там) при равной специфичности
   перебивало бы font-size — поднимаем специфичность через селектор тега */
p.hero__note {
  max-width: 620px; /* было 880px — уже, чтобы перенос падал после тире */
  margin-top: var(--space-m);
  /* больше отступ и менее агрессивное скругление, чем у обычной .pill —
     иначе многострочный текст «вылезает» за скруглённые края капсулы */
  padding: 14px 20px;
  border-radius: var(--radius-l);
  font-size: 16px; /* было 19.6px */
  line-height: 1.5;
  /* .pill задаёт white-space: nowrap (нужно коротким тегам) — здесь текст
     длинный и должен переноситься, иначе вылезает за пределы пилюли */
  white-space: normal;
}

/* ряд кнопок-разделов под пилюлей: в одну строку на десктопе (ширина
   не ограничена контейнером в 880px — иначе 4 длинных лейбла не влезают),
   переносится на планшете/мобильных, где влезть в одну строку физически
   невозможно */
.hero__quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* тот же отступ, что у h1 margin-bottom — одинаковые зазоры
     заголовок→подзаголовок и подзаголовок→кнопки */
  margin-top: var(--space-m);
}

.hero__quicklink {
  padding: 12px 20px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-dark);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--transition), border-color var(--transition);
}

.hero__quicklink:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

/* «Связаться» — на одном уровне с меню, у правого края экрана. Тот же
   приём, что у .header__contact выше: absolute внутри .header (а он сам
   position: fixed), поэтому кнопка закреплена на экране весь скролл, а
   top: 50% центрует её ровно по высоте pill-меню без магических чисел —
   какой бы ни была высота pill. Пока виден тёмный hero — контурная, как
   кнопки разделов под ней, текст белым по mix-blend-mode. */
.header__cta {
  pointer-events: auto; /* у .header он none — кликается только pill и эта кнопка */
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  padding: 12px 20px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  mix-blend-mode: difference;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.header__cta:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

/* после ухода из hero — та же светлая pill с тёмным текстом, что у
   пунктов меню/.header__contact на светлых страницах; mix-blend-mode
   больше не нужен (фон сам держит контраст на любой секции под кнопкой).
   Триггер — .header--scrolled (hero полностью ушёл из вьюпорта), тот же,
   что показывает логотип в pill: кнопка на уровне меню должна менять вид
   синхронно с ним. Прежний body.is-scrolled был рассчитан на кнопку у
   НИЖНЕГО края экрана и срабатывал заметно раньше — здесь это
   переключало бы цвет, пока кнопка ещё на тёмном hero.
   backdrop-filter держит читаемость, даже если под кнопкой окажется
   что-то контрастное (например, тёмная sticky-карточка «Проектов») */
.header--scrolled .header__cta {
  background: rgba(240, 242, 244, 0.72);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 24px rgba(15, 18, 22, 0.08);
  color: var(--text-primary);
  mix-blend-mode: normal;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header--scrolled .header__cta:hover {
  background: rgba(240, 242, 244, 0.9);
}

@media (max-width: 767px) {
  .hero__quicklink {
    white-space: normal;
    text-align: center;
    /* flex-basis: 100%, а не auto — иначе короткие подписи (например,
       «Электромонтаж») могли ужаться и встать по 2 в ряд вместо строго
       одной кнопки на строку */
    flex: 1 1 100%;
  }

  /* затемнение поверх canvas-паттерна — на мобилке текст читался плохо
     на фоне точек/линий; ::after красится после .hero-canvas-placeholder,
     но ниже .hero__content (z-index: 1) и .hero__logo (z-index: 2) */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 13, 0.35);
    pointer-events: none;
  }
}

/* контакт остаётся пунктом меню на планшете/мобильном — закреплённая
   кнопка там же мешала бы контенту */
@media (max-width: 1024px) {
  .header__cta {
    display: none;
  }
}

/* ---------- лента протоколов ---------- */
.partners {
  padding-block: var(--space-s);
}

/* карусель брендов идёт сразу за hero — нужен собственный отступ сверху,
   а не вплотную к тёмному блоку */
.partners--logos {
  padding-top: calc(var(--space-xl) * 0.7);
}

.partners__inner {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

.partners__label {
  flex: 0 0 300px;
  color: var(--text-dim);
  font-size: 16px; /* было var(--fs-small)/13px — крупнее, как текст пилюли hero */
}

/* сразу после карусели брендов идёт «Проекты» — свой (уменьшенный)
   верхний отступ вместо стандартного .section, чтобы блоки не расходились */
#cases {
  padding-top: calc(var(--space-xl) * 0.7);
}

/* ---------- кейсы: тёмная sticky-карточка + белые карточки ---------- */
/* картинка и кнопка снова вместе в одной sticky-обёртке — едут и
   «отпускаются» как единое целое, кнопка никогда не остаётся позади в
   потоке документа. containing block для sticky — грид-ячейка (высота
   всего ряда = по более высокой колонке), поэтому карточка «едет» и
   «отпускается» в конце списка независимо от align-items. */
.cases {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-s);
  align-items: start;
}

.cases__feature-wrap {
  position: sticky;
  top: 90px;
}

/* кнопка — position: absolute относительно sticky-обёртки: физически не
   участвует в высоте .cases__feature-wrap (а значит и в высоте грид-ряда,
   которая определяет, где sticky «отпускает» карточку) — поэтому
   выравнивание со списком идёт строго по нижнему краю картинки, а не
   картинки+кнопки. При этом визуально кнопка всегда «приклеена» прямо
   под картинкой и едет вместе с ней (top: 100% от sticky-предка = его
   же положение на экране в любой момент скролла) — не отстаёт и не
   остаётся одна в потоке документа. */
.cases__feature-cta {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-m);
}

.cases__feature {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.cases__feature h2 {
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  max-width: 15ch;
  position: relative;
  z-index: 1;
}

/* фоновая графика тёмной карточки кейсов: инженерная схема занимает нижние
   ~62% карточки — над ней остаётся сплошной тёмный фон .cases__feature,
   так пилюля и заголовок сидят на чистом чёрном, а не поверх линий схемы */
.cases__feature-visual {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/schema.png');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.cases__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* ---------- услуги: вступление сверху + панели во всю ширину ---------- */
.focus {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.focus__aside {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  color: var(--text-secondary);
  font-size: 15px;
}

.focus__aside p {
  max-width: 640px;
}

.focus__aside .btn { flex-shrink: 0; }

/* Аккордеон: три колонки, hover расширяет активную и схлопывает соседние.
   Реальное изменение ширины через flex-grow, без overlay/z-index. */
.focus__panels {
  display: flex;
  /* панели встык, без зазоров */
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* state machine на чистом CSS:
   - курсор вне контейнера → все панели в нейтрали (flex-grow: 1);
   - курсор в контейнере → все схлопываются (0.4), панель под курсором
     расширяется (3); переключение между панелями без «пустого» состояния */
@media (hover: hover) {
  .focus__panels:hover .focus-panel { flex-grow: 0.4; }
  .focus__panels .focus-panel:hover { flex-grow: 3; }
}

/* ---------- тёмная секция «что нас определяет» ---------- */
.defines {
  position: relative;
  margin-top: var(--space-xl);
  /* низ выше обычного: последний ряд карточек смещён лесенкой вниз */
  padding-block: var(--space-xl) calc(var(--space-xl) * 1.9);
  background: var(--bg-dark);
  color: var(--on-dark);
  overflow: hidden;
  /* тонкие вертикальные линии-разметка, как в референсе */
  background-image:
    repeating-linear-gradient(to right,
      transparent 0, transparent calc(25% - 1px),
      var(--border-dark) calc(25% - 1px), var(--border-dark) 25%);
}

/* SVG scroll-linked кривая (js/scroll-curve.js) — фоном под контентом */
.scroll-curve-placeholder {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scroll-curve-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible; /* заезды кривой за края обрезает сама секция */
}

.scroll-curve circle {
  transition: opacity 0.3s ease;
}

/* на мобильном кривая проходит прямо по тексту карточек (на десктопе она
   идёт сбоку от них), поэтому здесь приглушаем её.
   0.9 (то есть −10%) на ярком градиенте поверх чёрного фона глазом
   практически не читается — заметное приглушение начинается примерно
   отсюда. Это та самая ручка, которой регулируется яркость. */
@media (max-width: 767px) {
  .scroll-curve__line {
    opacity: 0.5;
  }
}

/* контент секции — поверх кривой */
.defines .container {
  position: relative;
}

.defines__head {
  max-width: 860px;
  margin-bottom: var(--space-xl);
}

.defines__head h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  margin-block: var(--space-m) var(--space-s);
}

.defines__head p {
  color: var(--on-dark-secondary);
  max-width: 540px;
}

/* 4 принципа диагональной лесенкой, как в референсе: каждый на своём
   уровне, с крупными вертикальными интервалами; кривая проходит через
   точку под каждой карточкой. Количество и порядок зафиксированы. */
.defines__grid {
  display: block;
}

.principle {
  width: min(380px, 100%);
}

.principle[data-principle="1"] { margin-left: 16%; }
.principle[data-principle="2"] { margin-left: 60%; margin-top: clamp(160px, 24vh, 300px); }
.principle[data-principle="3"] { margin-left: 26%; margin-top: clamp(160px, 24vh, 300px); }
.principle[data-principle="4"] { margin-left: 48%; margin-top: clamp(160px, 24vh, 300px); }

/* ---------- заявление + мини-форма (Feedback-блок) ---------- */
.statement {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-l);
  align-items: start;
  margin-bottom: var(--space-l);
}

.statement h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  max-width: 18ch;
}

.statement p {
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 46ch;
  padding-top: 10px;
}

/* ---------- цифры ---------- */
.numbers {
  display: grid;
  /* та же ширина первой колонки, что у .row__title в «Как мы работаем» —
     тёмные карточки в обеих секциях выглядят одной ширины */
  grid-template-columns: minmax(280px, 380px) 1fr 1fr;
  grid-auto-rows: minmax(220px, auto);
  gap: var(--space-s);
}

.numbers__feature {
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}

.numbers__feature .pill,
.numbers__feature h2 {
  position: relative;
  z-index: 1; /* поверх .numbers__visual, который теперь во всю карточку */
}

.numbers__feature h2 {
  font-size: clamp(34px, 3.4vw, 56px);
  letter-spacing: -0.02em;
  margin-top: var(--space-s);
}

/* фоновая графика тёмной карточки цифр: картинка во всю карточку;
   тёмный угол самого фото естественно уходит под пилюлю/заголовок,
   лёгкий градиент сверху добавляет запас контраста для текста */
.numbers__visual {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.55) 0%,
      rgba(11, 13, 16, 0.1) 30%,
      rgba(11, 13, 16, 0.3) 100%
    ),
    url('../assets/images/lower_schema.png');
  background-size: auto, cover;
  background-position: center, left top;
  background-repeat: no-repeat, no-repeat;
}

/* ---------- страница 404: помещается в экран целиком, без скролла ---------- */
.page-fit {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* гарантированно без скролла, даже на низких экранах */
}

.page-fit .footer {
  flex-shrink: 0;
  /* больше отступ сверху — футер выше (main сверху сжимается под flex:1);
     больше отступ снизу — воздух между текстом футера и краем экрана */
  padding-block: var(--space-l) var(--space-l);
}

/* main — прямой flex-child body.page-fit (header/corner-logo — fixed,
   в раскладке не участвуют); растягивается на всё, что не занял футер */
.page-fit > main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.error404 {
  flex: 1;
  min-height: 0; /* даёт блоку сжиматься, а не выталкивать футер за экран */
  padding-top: 96px;
  background: var(--bg-page);
  display: flex;
  align-items: center;
}

.error404__container {
  max-width: 720px;
  text-align: center;
}

.error404 .pill {
  margin-bottom: var(--space-m);
}

.error404 h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-s);
}

.error404__container > p {
  color: var(--text-secondary);
  max-width: 46ch;
  margin-inline: auto;
}

.error404__countdown {
  margin-top: var(--space-m);
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.error404__countdown #countdown-num {
  color: var(--text-primary);
  font-weight: 600;
}

.error404__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-l);
  flex-wrap: wrap;
}

/* ---------- страница «Официальные документы» ---------- */
.documents {
  /* клиренс под header даёт .page-logo-anchor перед секцией (как .legal) */
  padding-top: var(--space-m);
  /* было var(--space-xl) — вместе с padding-top блока контактов ниже
     (тоже var(--space-xl)) давало вдвое больший разрыв, чем нужно;
     здесь и в .documents + #contact — по половине */
  padding-bottom: calc(var(--space-xl) / 2);
  background: var(--bg-page);
  min-height: 100vh;
}

.documents + #contact {
  padding-top: calc(var(--space-xl) / 2);
}

.documents h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--space-s);
}

.documents__intro {
  color: var(--text-secondary);
  /* во всю ширину контейнера — до правого края крайней карточки,
     без переноса в одну строку */
  max-width: none;
  margin-top: var(--space-s);
  margin-bottom: var(--space-l);
}

.documents__grid {
  margin-top: var(--space-l);
}

/* ---------- страница «Портфолио проектов» ---------- */
.portfolio {
  /* клиренс под header даёт .page-logo-anchor перед секцией (как .legal) */
  padding-top: var(--space-m);
  padding-bottom: var(--space-xl);
  background: var(--bg-page);
  min-height: 100vh;
}

.portfolio h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--space-s);
}

/* var(--space-l) = 48px было и до текста-интро, и после тегов —
   уменьшено на ~25% (48 → 36) с обеих сторон */
.portfolio .documents__intro {
  margin-bottom: 36px;
}

.portfolio__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  margin-bottom: var(--space-s);
}

.portfolio__filter-label {
  color: var(--text-dim);
  font-size: 15px;
  white-space: nowrap;
}

/* строка пилюль под дропдауном — набор вариантов зависит от того, что
   выбрано в .portfolio__mode (js/main.js переключает [hidden]) */
.portfolio__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
}

/* display:flex выше перебивает дефолтный [hidden]{display:none} —
   без этого правила скрытая js'ом строка пилюль оставалась видимой */
.portfolio__tags[hidden] {
  display: none;
}

/* пилюли-кнопки фильтра: неактивная — контурная, активная — залитая */
.portfolio__tag {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.portfolio__tag:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.portfolio__tag.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-card);
}

/* дропдаун режима фильтра — тот же UI-паттерн, что «Услуги» в шапке
   (.nav__dropdown-toggle/-menu), а не нативный select: пилюля-кнопка
   с шевроном + всплывающая карточка с вариантами. В отличие от навшапки
   (там hover) — здесь открытие по клику, чтобы одинаково работало и на
   тач-устройствах (js/main.js) */
.portfolio__mode {
  position: relative;
}

.portfolio__mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--transition);
}

.portfolio__mode-toggle:hover,
.portfolio__mode.is-open .portfolio__mode-toggle {
  border-color: var(--text-primary);
}

.portfolio__mode-toggle::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.portfolio__mode.is-open .portfolio__mode-toggle::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.portfolio__mode-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  padding-top: 8px;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition);
}

.portfolio__mode.is-open .portfolio__mode-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.portfolio__mode-menu__inner {
  padding: 8px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-m);
  background: rgba(240, 242, 244, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 24px rgba(15, 18, 22, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.portfolio__mode-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.portfolio__mode-option:hover {
  background: rgba(15, 18, 22, 0.06);
  color: var(--text-primary);
}

.portfolio__mode-option.is-selected {
  color: var(--text-primary);
  font-weight: 600;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
  /* align-items: stretch (по умолчанию) — карточки в одной строке
     равны по высоте, по самой высокой */
}

.portfolio__empty {
  color: var(--text-dim);
  margin-top: var(--space-l);
}

@media (max-width: 767px) {
  /* minmax(0, 1fr), а не просто 1fr — иначе колонка не сжимается ниже
     min-content содержимого карточки (номер/локация) и даёт
     горизонтальный скролл всей страницы */
  .portfolio__grid { grid-template-columns: minmax(0, 1fr); }

  .portfolio__mode-toggle {
    padding: 7px 14px;
    font-size: 13px;
  }

  /* было flex-wrap — с разноразмерными пилюлями («Все» рядом с длинной
     «Торговые и бизнес-центры») перенос давал рваную сетку с большими
     пустыми хвостами в конце строк. Одна прокручиваемая по горизонтали
     строка — компактнее и убирает пустое место */
  .portfolio__tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .portfolio__tags::-webkit-scrollbar {
    display: none;
  }

  .portfolio__tag {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 13px;
  }
}

/* заголовки страниц-категорий (equipment-honeywell/*) переиспользуют
   .portfolio.security-hero — некоторые названия длинные («Автоматика
   управления инженерными системами здания») и на мобилке разрывались
   на 2-3 строки. Сужаем боковые отступы именно у этой шапки (не трогая
   --gutter глобально) и слегка уменьшаем минимальный размер шрифта —
   вместе это даёт заголовку больше места в одну строку */
@media (max-width: 767px) {
  .security-hero .container {
    padding-inline: 12px;
  }
  .portfolio h1 {
    font-size: clamp(22px, 6.4vw, 26px);
  }
}

/* ---------- страница «Услуги»: меню разделов ---------- */
.services-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  background: var(--bg-card);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: var(--space-m);
  min-height: 140px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.services-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 18, 22, 0.1);
}

.services-link h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  max-width: 14ch;
}

.services-link__arrow {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 20px;
  transition: color var(--transition);
}

.services-link:hover .services-link__arrow {
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .services-link { min-height: auto; }
}

/* ---------- страница «Системы безопасности»: шапка ---------- */
/* .portfolio переиспользуется здесь только как шапка-тизер перед следующим
   блоком, а не как единственная секция страницы — сбрасываем min-height:
   100vh (иначе шапка растягивалась на весь экран) и уменьшаем нижний
   отступ, чтобы не складывался с верхним отступом следующей .section */
.security-hero {
  min-height: 0;
  padding-bottom: 0;
}

/* .documents__intro тянет свой обычный margin-bottom: var(--space-l) —
   это и есть основной вклад в разрыв перед следующей секцией, а не
   паддинг самой .section (тот уже сведён к минимуму выше). У
   .documents__intro в остальных случаях ещё и max-width:none
   (растягивается во всю ширину контейнера) — на всех страницах-услугах
   это выглядело растянутым; сужаем и оставляем по левому краю, как
   большинство текстовых блоков на сайте. Проценты у max-width считаются
   от content-box .container (паддинги-gutter уже не входят). */
.security-hero .documents__intro {
  margin-bottom: 0;
  max-width: 85%;
}

/* следующая секция (#composition) идёт сразу за шапкой — обычный верхний
   отступ .section (var(--space-xl)) оставлял между ними слишком большой
   разрыв */
#composition {
  padding-top: 24px;
}

/* services.html: та же логика — секция идёт сразу за шапкой */
#menu {
  padding-top: 24px;
}

/* contacts.html: тот же приём — секция идёт сразу за шапкой */
#team {
  padding-top: 24px;
}

/* карта (виджет Яндекс.Карт вставляет свой iframe сам) — во всю ширину
   контейнера, скруглённая, как остальные крупные карточки на сайте */
.contacts-map {
  margin-top: var(--space-l);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  line-height: 0;
}

.contacts-map iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 480px;
}

@media (max-width: 767px) {
  /* виджет Яндекс.Карт (конструктор) рендерит контент под фиксированные
     600×400 из query-параметров скрипта (width/height) — растягивая
     iframe в 100% ширины при ЗАФИКСИРОВАННОЙ высоте 480px, мы меняли
     видимое соотношение сторон, и точка на карте (привязанная к
     исходным 600×400) уезжала за пределы видимой области на узких
     экранах. aspect-ratio вместо фикс. height сохраняет пропорции
     600:400, точка остаётся по центру при любой ширине контейнера */
  .contacts-map iframe {
    height: auto;
    aspect-ratio: 600 / 400;
  }

  /* блок «Офис»: на мобилке сокращаем два вертикальных зазора —
     заголовок→адрес и адрес→карта (были по var(--space-l) = 48px) */
  #office .section__headrow { margin-bottom: var(--space-s); }
  #office .documents__intro { margin-bottom: var(--space-s); }
  #office .contacts-map { margin-top: 0; }
}

/* заголовок «Полный цикл» здесь длиннее обычного — стандартных 16ch
   (.section__headrow h2) не хватало, текст рвался на 3-4 строки */
#pipeline .section__headrow h2 {
  max-width: 30ch;
}

/* service.html: «Концепция сервисного обслуживания» не помещалась в
   стандартных 16ch (.section__headrow h2) */
#concept .section__headrow h2 {
  max-width: 24ch;
}

/* колонки .row здесь 1:1, а не узкая фикс-колонка + широкое описание —
   только на десктопе/планшете: без min-width это правило (ID, выше
   специфичность) перебивало общий мобильный фикс .row{grid-template-
   columns:1fr}, и на мобильном здесь оставались 2 колонки в ряд вместо
   блок-за-блоком, как в остальных разделах */
@media (min-width: 768px) {
  #concept .row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- страница «Системы безопасности»: состав направления ---------- */
/* та же пара «тёмная карточка-фича + список» что у .cases/.numbers на
   главной: картинка с пилюлей и заголовком слева, подразделы — справа */
.security-comp {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-s);
  align-items: stretch;
}

/* automation.html: здесь картинка и список ближе к пропорции 1:2, а не
   узкая фикс-колонка + всё остальное (на глаз читалось как 1:3) */
.security-comp--automation {
  grid-template-columns: 1fr 1fr;
}

.security-comp__feature {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.security-comp__feature .pill,
.security-comp__feature h2 {
  position: relative;
  z-index: 1;
}

.security-comp__feature h2 {
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin-top: var(--space-s);
  max-width: 14ch;
}

/* фоновая графика: нижняя часть карточки, как у .cases__feature-visual.
   Картинка на каждой странице услуги своя — модификатор
   .security-comp__feature-visual--<страница> переопределяет
   background-image целиком (а не только url через var()) ниже по файлу,
   чтобы не зависеть от особенностей парсинга var() внутри составного
   свойства background-image в разных браузерах. */
.security-comp__feature-visual {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/image_systems.png');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* automation.html: та же тонировка, другая картинка */
.security-comp__feature-visual--automation {
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/image_auto.png');
}

/* electrical.html: та же тонировка, другая картинка */
.security-comp__feature-visual--electrical {
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/image_montage.png');
}

/* service.html: та же тонировка, другая картинка */
.security-comp__feature-visual--service {
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/image_service.png');
}

/* ---------- страница «Сервисное обслуживание»: состав, сетка 2×2 ---------- */
/* здесь 4 равные ячейки (картинка + 3 текстовых блока), а не узкая
   колонка-картинка + широкий список, как на security/automation/
   electrical.html — тут по смыслу все 4 блока равнозначны */
.service-comp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
}

.service-comp .security-comp__feature {
  min-height: 0;
}

@media (max-width: 767px) {
  .service-comp { grid-template-columns: 1fr; }
}

.security-comp__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.security-comp__card {
  position: relative;
  flex: 1;
  background: var(--bg-dark-soft);
  color: var(--on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}

.security-comp__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-s);
}

.security-comp__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.security-comp__card h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

/* прямой child-селектор — только для карточек БЕЗ .security-comp__card-head
   (например, карточки объектов на automation.html): там заголовок не в
   одной строке с точкой, ему нужен собственный отступ снизу */
.security-comp__card > h3 {
  margin-bottom: var(--space-s);
}

.security-comp__card > p {
  color: var(--on-dark-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.security-comp__card ul {
  list-style: none;
}

.security-comp__card li {
  color: var(--on-dark-secondary);
  font-size: 15px;
  padding-block: 8px;
  border-top: 1px solid var(--border-dark);
}

.security-comp__card li:first-child {
  border-top: none;
}

.security-comp__card li strong {
  color: var(--on-dark-secondary);
  font-weight: 600;
}

@media (max-width: 767px) {
  .security-comp { grid-template-columns: 1fr; }
}

/* ---------- страница «Системы безопасности»: объекты ---------- */
.objects__intro-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  /* было на самом .documents__intro (margin-bottom: var(--space-l)) —
     перенесли на обёртку, раз параграф больше не единственный элемент */
  margin-bottom: var(--space-l);
}

.objects__intro-row .documents__intro {
  /* было none (во всю ширину контейнера) — сузили, чтобы рядом
     поместилась кнопка «Смотреть портфолио» */
  max-width: 760px;
  margin-bottom: 0;
}

.objects__intro-cta {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .objects__intro-row { flex-direction: column; align-items: flex-start; }
  .objects__intro-row .documents__intro { max-width: none; }
}

.objects__grid {
  margin-top: var(--space-l);
}

/* блок «Объекты» (security/automation/electrical/service.html, общий id):
   отступ заголовок→подзаголовок был заметно больше, чем подзаголовок→
   карточки — выравниваем оба до одного меньшего значения явно (margin-top
   у сетки обнулён), а не полагаемся на схлопывание соседних margin */
#objects .section__headrow {
  margin-bottom: var(--space-m);
}

#objects .objects__intro-row {
  margin-bottom: var(--space-m);
}

#objects .objects__grid {
  margin-top: 0;
}

.object-card__thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-s);
  margin-bottom: var(--space-s);
  background:
    linear-gradient(135deg, rgba(47, 185, 232, 0.14), rgba(124, 140, 255, 0.1)),
    var(--bg-panel-light);
  background-size: cover;
  background-position: center;
}

.object-card h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.object-card p {
  color: var(--text-dim);
  font-size: var(--fs-small);
  margin-top: 4px;
}

/* ---------- страница «Системы безопасности»: сервисное обслуживание ---------- */
/* инвертирован — как .feedback (белая карточка), а не тёмная, как раньше;
   текст слева, сетка логотипов справа (аналог .feedback__inner) */
.security-service {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: var(--space-l);
  background: var(--bg-card);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(32px, 5vw, 72px);
}

.security-service__text > .pill {
  margin-bottom: var(--space-m);
}

.security-service h2 {
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin-bottom: var(--space-s);
}

.security-service p {
  color: var(--text-secondary);
  max-width: 48ch;
  margin-bottom: var(--space-m);
}

.security-service__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-s);
  row-gap: 32px;
}

.security-service__logos img {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-s);
}

@media (max-width: 1024px) {
  .security-service { grid-template-columns: 1fr; }
  .security-service__logos { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
  .security-service__logos { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- юридические страницы (политика конфиденциальности и т.п.) ---------- */
.legal {
  /* клиренс под фиксированный header теперь даёт .page-logo-anchor
     (76px) перед этой секцией — здесь только обычный отступ секции */
  padding-top: var(--space-m);
  padding-bottom: var(--space-xl);
  background: var(--bg-page);
  min-height: 100vh;
}

.legal__container {
  max-width: 920px;
}

.legal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

/* на документах и портфолио отступ до заголовка меньше (-40%+),
   чем на privacy-policy.html, где .legal__top не переопределяется */
.documents .legal__top,
.portfolio .legal__top {
  margin-bottom: calc(var(--space-l) * 0.6);
}

.legal__back {
  display: inline-block;
  color: var(--text-secondary);
  font-size: 15px; /* чуть крупнее var(--fs-small) = 13px */
  transition: color var(--transition);
}

.legal__back:hover {
  color: var(--text-primary);
}

.legal h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--space-s);
}

.legal__updated {
  color: var(--text-dim);
  font-size: var(--fs-small);
  margin-top: var(--space-m);
  margin-bottom: var(--space-xl);
}

.legal h2 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}

.legal p {
  color: var(--text-secondary);
  margin-bottom: var(--space-s);
}

.legal ul {
  list-style: disc;
  padding-left: 1.3em;
  color: var(--text-secondary);
  margin-bottom: var(--space-s);
}

.legal li + li {
  margin-top: 6px;
}

.legal strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* .legal a (класс+тег) специфичнее, чем просто .legal__back (один
   класс) — обычный .legal__back{text-decoration:none} проигрывал
   .legal a{text-decoration:underline} независимо от порядка в файле */
.legal a.legal__back {
  text-decoration: none;
}

/* ---------- footer ---------- */
.footer {
  padding-block: var(--space-xl);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 0;
  /* stretch (не start) — нужно, чтобы «О нас» мог прижать последнюю
     ссылку к низу колонки через justify-content: space-between,
     на высоту самой длинной колонки («Услуги»), независимо от того,
     где именно из-за переносов текста окажется её нижняя граница */
  align-items: stretch;
}

.footer__nav-col--main {
  margin-left: var(--space-l);
}

.footer__nav-col--services {
  margin-left: calc(var(--space-s) * -1);
}

.footer__nav-col--about {
  margin-left: var(--space-m);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  /* верх лого — вровень с верхом email в колонке «О нас» (обе колонки
     растянуты на высоту самой длинной — align-items: stretch на гриде) */
  justify-content: flex-start;
}

.footer__brand .logo--footer {
  margin-bottom: var(--space-m);
}

.footer__brand-addr {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__brand-addr .footer__addr {
  font-size: var(--fs-small);
  line-height: 1.5;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* прижимаем ссылки к низу ячейки (align-items: stretch на родителе),
     чтобы последняя строка всех колонок футера была на одной линии */
  justify-content: flex-end;
}

/* колонка «О нас» растянута на всю высоту грид-ячейки (align-items:
   stretch на .footer__grid); email прижат к верху, блок ссылок — к
   низу, вровень с последней ссылкой самой длинной колонки («Услуги»),
   без хардкода пикселей и независимо от переносов текста */
.footer__nav-col--about {
  justify-content: space-between;
}

.footer__nav-col--about .footer__email {
  text-align: left;
  font-size: clamp(26px, 2.6vw, 38px);
}

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

.footer__nav-heading {
  color: var(--text-dim);
  font-size: var(--fs-small);
  margin-bottom: 4px;
}

.footer__nav-col a {
  color: var(--text-secondary);
  font-size: 15px;
  transition: color var(--transition);
}

.footer__nav-col a:hover { color: var(--text-primary); }

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-m);
  row-gap: var(--space-s);
  align-items: start;
}

/* верхняя строка: лого / название организации / email — начинаются
   на одной высоте (строка 1 грида) */
.footer__col--logo { grid-column: 1; grid-row: 1 / span 2; }
.footer__addr--org { grid-column: 2; grid-row: 1; }
.footer__email { grid-column: 3; grid-row: 1; justify-self: end; }

/* нижняя строка: адрес и «Политика конфиденциальности» на одном уровне */
.footer__addr--city { grid-column: 2; grid-row: 2; }
.footer__policy { grid-column: 3; grid-row: 2; justify-self: end; }

.footer__addr {
  color: var(--text-secondary);
  font-size: 14px;
}

/* на десктопе ИНН/КПП в одну строку через точку; на мобилке (ниже)
   переставляем: точка скрыта, КПП переносится на новую строку */
.footer__addr-break-kpp {
  display: none;
}

/* line-height: 1 — у email при крупном шрифте (clamp до 32px) даже
   небольшой множитель (1.1) даёт заметный «воздух» над буквами, из-за
   которого верх текста визуально съезжает ниже верха лого/org-строки,
   хотя сами CSS-боксы уже выровнены по grid-строке */
.footer__addr--org,
.footer__email {
  line-height: 1;
}

.footer__email {
  display: block;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: -0.01em;
  text-align: right;
  /* ручная оптическая коррекция: даже при line-height:1 крупный шрифт
     сохраняет built-in отступ над засечками (ascent-метрика шрифта) —
     подвинуть ещё выше, если понадобится, можно увеличив это значение */
  margin-top: -6px;
  transition: color var(--transition);
}

.footer__email:hover { color: var(--text-primary); }

.footer__policy {
  display: inline-block;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Адаптив: tablet 768–1024
   ============================================================ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .cases { grid-template-columns: 1fr; }
  /* .cases__feature-cta — position: absolute относительно sticky-обёртки
     (см. комментарий выше). Как только обёртка становится position: static,
     кнопка ищет следующего spositioned-предка вверх по дереву и улетает
     из потока (визуально — «наверх» страницы). display: contents убирает
     обёртку из компоновки, её дети (.cases__feature и .cases__feature-cta)
     становятся прямыми грид-элементами .cases наравне с .cases__list —
     тогда порядок задаётся через order: карточка → список кейсов → кнопка,
     то есть кнопка встаёт после последней карточки (БЦ «Тринити») */
  .cases__feature-wrap { display: contents; }
  .cases__feature { order: 1; min-height: 320px; }
  .cases__list { order: 2; }
  .cases__feature-cta {
    order: 3;
    position: static;
    margin-top: var(--space-s);
    /* justify-self, не align-self — .cases это grid, а не flex; align-self
       там управляет высотой строки, а не шириной элемента, из-за чего
       кнопка растягивалась на всю ширину колонки (justify-items: stretch
       по умолчанию) */
    justify-self: start;
  }

  .focus__aside { flex-direction: column; align-items: flex-start; }
  .focus__aside p { max-width: none; }

  .principle[data-principle="2"],
  .principle[data-principle="3"],
  .principle[data-principle="4"] { margin-top: clamp(110px, 15vh, 180px); }

  .numbers { grid-template-columns: repeat(2, 1fr); }

  /* планшет: жёсткая 2-строчная раскладка тесновата — сбрасываем явные
     grid-column/row, элементы идут в порядке DOM (лого, орг., город,
     email, политика), выравнивание по левому краю */
  .footer__inner { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .footer__col--logo,
  .footer__addr--org,
  .footer__addr--city,
  .footer__email,
  .footer__policy {
    grid-column: auto;
    grid-row: auto;
  }
  .footer__email,
  .footer__policy { justify-self: start; text-align: left; }

  /* планшет: 2×2 — сверху лого/адрес и почта/«О нас», снизу оба меню */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--space-l);
    column-gap: var(--space-m);
    align-items: start;
  }
  .footer__brand { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .footer__nav-col--about { grid-column: 2; grid-row: 1; }
  .footer__nav-col--main { grid-column: 1; grid-row: 2; }
  .footer__nav-col--services { grid-column: 2; grid-row: 2; }
  .footer__nav-col--main,
  .footer__nav-col--services,
  .footer__nav-col--about { margin-left: 0; }
  .footer__nav-col--about { justify-content: flex-start; }
  .footer__nav-col--about .footer__email { margin-bottom: var(--space-m); }

  .header__contact { display: none; } /* контакт остаётся пунктом меню */
}

/* ============================================================
   Адаптив: mobile до 767
   ============================================================ */
@media (max-width: 767px) {
  .grid--4, .grid--3 { grid-template-columns: 1fr; }

  /* раздел "Документы" на главной — 2×2 вместо общего для .grid--4
     мобильного стека в 1 колонку (карточки короткие, в 1 колонку выходит
     слишком длинный скролл); scoped к #audience, чтобы не задеть другие
     страницы, использующие тот же класс .grid--4 */
  /* minmax(0, 1fr), а не просто 1fr — иначе колонка не сжимается ниже
     min-content содержимого карточки и даёт горизонтальный скролл страницы */
  #audience .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* тот же min-content-overflow во flex-строке .card__head: заголовок не
     сжимался в узкой колонке и выталкивал иконку за край экрана */
  #audience .card--doc h3 { min-width: 0; }
  /* при 2 колонках на карточку остаётся слишком мало ширины, чтобы значок
     и заголовок помещались в одну строку без переноса посреди слова —
     переставляем в колонку (значок сверху, как в большинстве карточек) */
  #audience .card--doc .card__head {
    flex-direction: column-reverse;
    align-items: flex-start;
    /* было var(--space-xs) = 8px — впритык между иконкой и заголовком */
    gap: var(--space-s);
  }
  /* описание убираем только на мобилке и только в этой секции (главная) —
     на desktop и на отдельной странице documents.html текст остаётся */
  #audience .card--doc p {
    display: none;
  }
  /* без описания карточка — это просто иконка+заголовок, а базовые
     .card{min-height:220px; padding: var(--space-m); justify-content:
     space-between} были рассчитаны на card__head + p и оставляли
     карточку почти пустой снизу */
  #audience .card--doc {
    min-height: 0;
    padding: var(--space-s);
    justify-content: flex-start;
  }

  /* h2 в этой секции наследовал общий max-width: 16ch — на узком экране
     это давало заголовок на пол-экрана шириной с длинными переносами */
  #audience .section__headrow h2,
  #services .section__headrow h2 { max-width: none; }

  /* отступ под заголовком (унаследованный var(--space-l), 48px) на узком
     экране визуально выглядел как лишний разрыв перед вступительным
     текстом */
  #services .section__headrow { margin-bottom: var(--space-s); }

  /* .corner-logo (внутренние страницы) на мобилке показываем красный
     логотип, как .hero__logo на главной: уменьшаем до 40px и выравниваем
     по центру с pill-меню (тот же приём, что у hero__logo ниже), чтобы
     не пересекался с ним */
  .corner-logo img { height: 40px; }
  .corner-logo { top: 25px; }

  /* .hero__logo (главная) раньше тоже прятался целиком по той же причине,
     но так лого пропадало полностью до первого скролла — вместо этого
     уменьшаем: при height ~32px (было 56px) wordmark укладывается в
     ширину до начала pill-меню и больше не пересекается с ним */
  .hero__logo img { height: 40px; }
  /* центр логотипа (top + height/2) вровень с центром pill-меню
     (top:18px, height:54px → центр 45px): top = 45 - 40/2 */
  .hero__logo { top: 25px; }

  .section__headrow {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  /* на мобильном clamp() у заголовка упирался в минимум (27px) — почти
     вровень с подзаголовком (20.4px), слабая иерархия; увеличиваем
     заголовок и уменьшаем подзаголовок для контраста */
  .hero__content h1 { font-size: 34px; margin-bottom: 20px; }
  .hero__sub { font-size: 17px; }

  /* на мобильных кнопки cookie-баннера складываются в столбец и он
     становится выше — оставляем запас снизу, но заметно меньше, чем
     раньше (было 230px — слишком много пустого места после кнопок) */
  .hero__content { padding-bottom: 110px; }

  .partners__inner { flex-direction: column; align-items: flex-start; gap: var(--space-s); }
  .partners__label { flex: none; }
  .partners .marquee { width: 100%; }

  /* на узких экранах аккордеон не работает (нет hover) — колонка,
     панели во всю ширину, описания видны всегда */
  .focus__panels { flex-direction: column; }

  /* mobile: лесенка не нужна — карточки колонкой */
  .principle { width: 100%; }
  .principle[data-principle="1"],
  .principle[data-principle="2"],
  .principle[data-principle="3"],
  .principle[data-principle="4"] { margin-left: 0; margin-top: var(--space-l); }
  .principle[data-principle="1"] { margin-top: 0; }

  /* было minmax(220px, auto) — на мобильном (1 колонка) карточки .stat
     растягивались до 220px минимум, а .stat__label (margin-top: auto)
     заполнял остаток пустым местом между значением и подписью */
  .numbers { grid-template-columns: 1fr; grid-auto-rows: minmax(0, auto); }
  /* та же высота, что у .cases__feature на мобильном («Где уже работают
     наши системы») — для визуального единообразия карточек-фич */
  .numbers__feature { min-height: 320px; }

  .footer__inner { grid-template-columns: 1fr; }

  /* мобилка: один столбец, порядок блоков 1-4-2-3 (лого/адрес → почта/
     «О нас» → «Главная» → «Услуги»); сбрасываем grid-column/row,
     унаследованные от планшетной 2×2-раскладки — иначе колонки 2 и 4
     остаются в «столбце 2» несуществующей второй колонки и наезжают
     друг на друга */
  /* было 1 колонка на всю ширину — короткие списки ссылок («Главная»,
     «Услуги», «Проекты»...) занимали от силы половину строки, и справа
     оставалось много пустого места. Бренд и email — на всю ширину
     (как и раньше), а два коротких списка — «Основные страницы» и
     «Услуги» — ставим рядом в 2 колонки, это использует ширину экрана
     и заодно сокращает футер по высоте. */
  .footer__grid {
    /* равные колонки (не auto/1fr) — иначе «О нас»/ссылки слева и
       «Услуги» справа получаются разной ширины */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: var(--space-m);
    row-gap: 8px;
    align-items: start;
  }
  .footer__nav-col--main,
  .footer__nav-col--services,
  .footer__nav-col--about { margin-left: 0; }

  /* порядок сверху вниз: лого+почта → «О нас»/реквизиты →
     «Основные страницы»/«Услуги» */
  .footer__nav-col--main { grid-column: 1; grid-row: 3; margin-top: var(--space-l); }
  .footer__nav-col--services { grid-column: 2; grid-row: 3; margin-top: var(--space-l); }
  .footer__addr-break { display: none; }
  /* КПП на мобилке переносим на новую строку с номером, точку убираем */
  .footer__addr-break-kpp { display: inline; }
  .footer__addr-sep { display: none; }

  .footer__brand,
  .footer__brand-addr,
  .footer__nav-col--about { display: contents; }

  /* логотип на мобилке был почти не виден рядом с крупным desktop-
     размером email — заметно увеличиваем прежние 28px */
  .footer__brand .logo--footer img {
    height: 44px;
  }
  .footer__brand .logo--footer {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    align-self: center;
    min-width: 0;
  }
  /* .footer__nav-col--about .footer__email (два класса) специфичнее
     простого .footer__email — без явного переопределения именно этим
     селектором на мобилке продолжал бы применяться десктопный
     clamp(26px, 2.6vw, 38px), из-за чего email не влезал в колонку
     и переносился на 3 строки.
     grid-column: 1 / -1 + justify-self: end — email прижат к правому
     краю экрана, не привязан к границе второй колонки (которая
     совпадает с колонкой «Услуги» ниже); margin-left:54px раньше давал
     наезд на лого при 44px-логотипе — вместо этого просто уводим email
     вправо, подальше от лого */
  .footer__nav-col--about .footer__email {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 18px;
    text-align: right;
    justify-self: end;
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .footer__about-links {
    grid-column: 1;
    grid-row: 2;
    margin-top: var(--space-m);
    min-width: 0;
  }
  .footer__brand-org {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--space-m);
    min-width: 0;
  }

  /* ООО/ИНН/адрес — тем же размером, что и «О нас» (nav-heading),
     чтобы блок был компактнее и не вылезал за пределы колонки */
  .footer__brand-addr .footer__addr {
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
  }
}