/* ============================================================================
   site.css — оформление сайта АО «СИБПРОЕКТНИИАВИАПРОМ»

   Фирменная палитра: акцентный оранжевый #EF5B25, основной синий #23447A
   (тон фирменного знака); самый тёмный синий на сайте — #174076.
   Графический язык: сетка-подложка 46px, контурные окружности, диагональ 24°,
   светлый подвал #F2F5F8.

   Оранжевый для НАДПИСЕЙ затемнён до порога читаемости (см. --orange-deep):
   белым по #EF5B25 всего 3,3:1.

   Сборки нет: файл отдаётся как есть, комментарии — его документация.
   Внешних зависимостей нет: шрифты и изображения локальные.
   ========================================================================== */

/* --- 0. Шрифты ------------------------------------------------------------------
   Geometria (700/800 — заголовки, знак, меню) и Roboto (300 — лиды,
   400/500 — текст). Подключены локально в WOFF2: у сайта ноль внешних
   запросов. Лицензия Roboto — assets/fonts/roboto-OFL.txt. */
@font-face { font-family: "Geometria"; src: url("../fonts/geometria-light.woff2?v=f43c62c8") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Geometria"; src: url("../fonts/geometria-medium.woff2?v=6ece98b1") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geometria"; src: url("../fonts/geometria-bold.woff2?v=54e240f7") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geometria"; src: url("../fonts/geometria-extrabold.woff2?v=2a7c56da") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-light.woff2?v=77d2b16b") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-regular.woff2?v=351e04cb") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-medium.woff2?v=1b699799") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-bold.woff2?v=be9ad5fe") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

/* --- 1. Токены ------------------------------------------------------------- */
:root {
  --blue:        #23447A;   /* синий фирменного знака — основной тон сайта   */
  --blue-grad-1: #174076;   /* самый тёмный синий сайта — темнее не берём    */
  --blue-grad-2: #2A5292;
  --orange:      #EF5B25;   /* акцент: черты, ромбы, знак, подчёркивания     */
  --orange-hov:  #D34A18;
  --orange-deep: #B54817;   /* оранжевые НАДПИСИ на светлом — 5,4:1           */
  --orange-btn:  #E26225;   /* фирменный оранжевый — заливка кнопок          */
  --orange-btn-svet: #EF5B25; /* светлый оранжевый — подсветка при наведении  */
  --ink:         #58595B;   /* основной текст                                */
  --ink-2:       #58595B;   /* ссылки подвала                                */
  --muted:       #6E6F71;   /* надзаголовки, подписи                         */
  --line:        #E1E7EE;
  --line-2:      #D7DEE6;
  --bg:          #FFFFFF;
  --bg-alt:      #F2F5F8;
  --bg-cold:     #EEF3F8;
  --bg-cold-1:   #F6F9FC;
  --bg-cold-2:   #E6EEF7;

  --font-display: "Geometria", "Manrope", "Onest", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Roboto", "Segoe UI", system-ui, Arial, sans-serif;

  /* Ширина: секции на весь экран, поля по краям 16–64px, потолок контента 1760px —
     на 2560 не расползается; текст держит свою меру строки (p — 34em). */
  --container: 1760px;
  --pole: clamp(16px, 4vw, 64px);
  /* Большие синие поверхности — подвал, мобильное меню: самый тёмный
     синий шмуцтитула; кнопки остаются --blue. Белый по нему — 10,34:1. */
  --blue-fon: #174076;
  --blue-navod: #1A3561;   /* наведение синих кнопок — белый по нему 12,17:1 */
  --radius: 0;
  --hair: 1px;

}

/* --- 2. База --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 86px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;            /* как текст обложки: Roboto Light */
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-deep); text-decoration: none; text-underline-offset: .18em; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 2px; }
.na-temnom :focus-visible, .geroy :focus-visible { outline-color: #FFFFFF; }

h1, h2, h3, h4 {
  font-family: var(--font-display);   /* заголовки — Geometria */
  color: var(--blue);
  margin: 0 0 20px;
  line-height: 1.1;
}
h1, h2 { font-weight: 500; }
h1 { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.08; }
h2 { font-size: clamp(28px, 2.6vw, 40px); }
h3 { font-size: 20px; font-weight: 500; line-height: 1.25; }
p { margin: 0 0 18px; max-width: 34em; color: var(--ink); font-size: 17px; }
ul, ol { max-width: 34em; color: var(--ink); }

.obolochka { width: 100%; max-width: calc(var(--container) + 2 * var(--pole)); margin: 0 auto; padding: 0 var(--pole); }

/* --- 3. Секции ------------------------------------------------------------- */
.sekciya { padding: 64px 0 56px; position: relative; }
/* После шмуцтитула первая секция начинается выше на величину среза
   (margin-bottom: -58px), и на телефоне текст оказывался в 6px от диагонали.
   Возвращаем воздух ровно там, где он съеден. */
@media (max-width: 899px) { .shapka-razdela + .sekciya { padding-top: 118px; } }
@media (min-width: 900px) { .sekciya { padding: 88px 0 76px; } }
.sekciya--fon { background: var(--bg-alt); }
.sekciya--holod { background: var(--bg-cold); }
.sekciya--temnaya, .na-temnom { background: var(--blue); color: #FFFFFF; }
.sekciya--temnaya p, .na-temnom p { color: rgba(255, 255, 255, .86); }
.sekciya--temnaya h2, .na-temnom h2, .na-temnom h3 { color: #FFFFFF; }

/* Метка раздела: номер, черта, надпись — базовый приём оформления */
.metka { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; max-width: none; flex-wrap: wrap; }
.metka__nomer { font-weight: 300; font-size: 14px; color: var(--orange-deep); }
.metka__cherta { width: 44px; height: 2px; background: var(--orange); flex: none; }
.metka__tekst {
  font-family: var(--font-body); font-weight: 300; font-size: 14px; color: var(--muted);
}
.na-temnom .metka__tekst, .geroy .metka__tekst { color: var(--orange); }
.geroy .metka__cherta { width: 54px; }

.zagolovok-sekcii { margin-bottom: 44px; }
/* Заголовок с кнопкой в одной строке */
.zagolovok-sekcii--s-knopkoy { display: grid; gap: 20px; align-items: start; }
@media (min-width: 860px) {
  .zagolovok-sekcii--s-knopkoy { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .zagolovok-sekcii--s-knopkoy .knopka { justify-self: end; }
}
.zagolovok-sekcii--s-knopkoy h2 { margin-bottom: 12px; }
.zagolovok-sekcii--s-knopkoy p { margin: 0; }
.zagolovok-sekcii p { color: var(--ink); max-width: 34em; }
.na-temnom .zagolovok-sekcii p { color: rgba(255, 255, 255, .86); }

/* Название института — одно длинное неразрывное слово шириной 300px при
   колонке 280px на 320-м экране. Разрыв внутри слова оставлял на строке
   одинокую «М», поэтому на совсем узких экранах лид набирается на два пункта
   мельче: слово укладывается целиком. break-word — страховка на случай
   ещё более узкого экрана или другого длинного названия. */
.lid {
  font-family: var(--font-body); font-weight: 300; font-size: 19px; line-height: 1.6;
  color: var(--ink); max-width: 32em; overflow-wrap: break-word;
}
@media (max-width: 359px) { .lid { font-size: 17px; } }
.na-temnom .lid { color: rgba(255, 255, 255, .86); }
.podpis { font-size: 14px; color: var(--muted); }

/* Ромб-маркер и контурный декор */
.romb { display: block; width: 14px; height: 14px; background: var(--orange); transform: rotate(45deg); flex: none; }
.romb--maly { width: 11px; height: 11px; }
.para__tekst > .romb { margin-bottom: 18px; }
.krug { position: absolute; border: 1px solid rgba(35, 68, 122, .12); border-radius: 50%; pointer-events: none; }
.na-temnom .krug, .geroy .krug { border-color: rgba(255, 255, 255, .14); }
.krug--pravo-verh { top: -200px; right: -120px; width: 600px; height: 600px; }
.krug--levo-niz { left: -80px; bottom: -180px; width: 520px; height: 520px; }
.diagonal {
  position: absolute; top: -60px; right: 280px;
  width: 2px; height: 520px; background: var(--orange);
  transform: rotate(24deg); opacity: .9; pointer-events: none;
  display: none;
}
@media (min-width: 1000px) { .diagonal { display: block; } }

/* --- 4. Кнопки ------------------------------------------------------------- */
.knopka {
  display: inline-block;
  font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.2;
  padding: 16px 28px; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.knopka--osnovnaya { background: var(--orange-btn); color: #FFFFFF; font-size: 17px; font-weight: 500; }
/* Стрелка — маской по currentColor: цвет подписи и стрелки всегда совпадает */
.knopka--osnovnaya::after {
  content: "";
  display: inline-block;
  width: .82em; height: .82em;
  margin-left: .7em;
  vertical-align: -.06em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .18s ease;
}
.knopka--osnovnaya:hover::after { transform: translate(3px, -3px); }
/* Наведение осветляет заливку, а не затемняет её */
.knopka--osnovnaya:hover { background: var(--orange-btn-svet); color: #FFFFFF; }
.knopka--ramka { border-color: var(--blue); color: var(--blue); background: transparent; }
/* Стрелка той же маской, что у основной кнопки: цвет всегда равен подписи */
.knopka--strelka::after {
  content: "";
  display: inline-block;
  width: .82em; height: .82em;
  margin-left: .7em;
  vertical-align: -.06em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .18s ease;
}
.knopka--strelka:hover::after { transform: translate(3px, -3px); }
.knopka--ramka:hover { background: var(--blue); color: #FFFFFF; }
.knopka--temnaya { background: var(--blue); color: #FFFFFF; }
.knopka--temnaya:hover { background: var(--orange-btn-svet); color: #FFFFFF; }
/* Узкий экран: длинная подпись переносится по строкам, а не выезжает за край */
@media (max-width: 560px) {
  .knopka { white-space: normal; max-width: 100%; text-align: center; }
  /* Кнопки обложки — в одну строку: подпись длинная, поэтому на телефоне
     кегль и поля меньше. Перенос остаётся страховкой у остальных кнопок. */
  .geroy .knopka { font-size: 15px; padding: 15px 18px; white-space: nowrap; }
}
/* На обложке главное действие — белой плашкой: по тёмному снимку она заметнее
   оранжевой и держит контраст 15:1 синим по белому */
.geroy .knopka--osnovnaya { background: #FFFFFF; color: var(--blue); font-size: 16px; }
/* Пара кнопок должна стоять в строку внутри суженной колонки обложки */
.geroy .knopka--ramka { font-size: 16px; }
/* Наведение — холодная светлая плашка: синий по #E6EEF7 держит AA */
.geroy .knopka--osnovnaya:hover { background: var(--bg-cold-2); color: var(--blue); }
.geroy .knopka--ramka, .na-temnom .knopka--ramka {
  border-color: #FFFFFF; color: #FFFFFF;
  font-size: 17px; font-weight: 500;      /* в пару к соседней кнопке */
}
.geroy .knopka--ramka:hover, .na-temnom .knopka--ramka:hover { background: #FFFFFF; color: var(--blue); border-color: #FFFFFF; }

/* --- 5. Шапка -------------------------------------------------------------
   Одна шапка в двух фазах. Наверху страницы (--sh:0) плашки нет: логотип, меню
   и кнопка стоят прямо на обложке — на главной вывороткой по тёмному снимку,
   на внутренних тёмным по светлой шапке раздела. После 140px прокрутки
   (--sh:1) шапка садится на белое стекло и сжимается с 88 до 66px.
   Сжатие ведёт scroll-driven анимация --sh. Там, где её нет (старый браузер,
   prefers-reduced-motion), --sh остаётся 1 — компактная шапка. Цвета фаз — не здесь,
   а переменными --shapka-* в разделе 19. Все элементы выровнены по
   оптической линии 44px, поэтому ховер ничего не сдвигает. */

@property --sh { syntax: "<number>"; inherits: true; initial-value: 1; }

.shapka {
  --sh: 1;
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, calc(var(--sh) * .82));
  -webkit-backdrop-filter: blur(calc(var(--sh) * 22px)) saturate(calc(100% + var(--sh) * 60%));
          backdrop-filter: blur(calc(var(--sh) * 22px)) saturate(calc(100% + var(--sh) * 60%));
  border-bottom: var(--hair) solid rgba(35, 68, 122, calc(var(--sh) * .10));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shapka { background: rgba(255, 255, 255, calc(var(--sh) * .97)); }
}
@keyframes shapka-fazy { from { --sh: 0; } to { --sh: 1; } }
@supports (animation-timeline: scroll()) {
  .shapka {
    animation: shapka-fazy linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 140px;
  }
}

.shapka__ryad {
  display: flex; align-items: center;
  gap: clamp(18px, 2.2vw, 36px);
  min-height: calc(88px - var(--sh) * 22px);
  padding: 0 var(--pole); flex-wrap: nowrap;
}
/* Шапка — на всю ширину экрана: логотип у левого поля, справа вплотную
   к краю — кнопка заявки сплошным блоком во всю высоту шапки */
.shapka__ryad.obolochka { max-width: none; }
@media (min-width: 1300px) { .shapka__ryad.obolochka { padding-right: 0; } .shapka__svyaz { align-self: stretch; } }
@media (max-width: 767px) { .shapka__ryad { min-height: calc(76px - var(--sh) * 8px); } }

/* Логотип. Высота выбрана так, чтобы PNG 433×96 в обеих фазах оставался в
   двойной плотности (46×2 = 92 < 96): вектора у знака нет, выше 48px он
   начнёт мылить. */
.shapka__logotip {
  position: relative; flex: none;
  display: flex; align-items: center;
  text-decoration: none; margin-right: auto;
}
/* flex: none обязателен обоим: без него переполненный ряд ужимал ширину
   картинки, и знак ехал по горизонтали (было на всех ширинах от 1440px). */
/* Логотип вертикальной компоновки (знак над названием): название читается от ~13px
   высоты букв, поэтому знак выше прежнего горизонтального — 60px, на телефоне 50px */
.shapka__logo { flex: none; height: 60px; width: auto; object-fit: contain; }
@media (max-width: 767px) { .shapka__logo { height: 50px; } }
/* 320px: ряд из логотипа, звонка и меню должен уложиться без прокрутки —
   поджимаем поля, промежутки и знак, а не переносим ряд. */
@media (max-width: 359px) {
  .shapka__ryad { gap: 12px; }
  .shapka__logo { height: 44px; }
}

/* Выворотка знака: логотип одноцветный (#23447A), поэтому белая версия — это он
   же под filter: brightness(0) invert(1), фоном псевдоэлемента. Именно фоном, а
   не mask-image: маска при открытии сайта из папки (file://) считается чужим
   источником и молча не грузится, а сайт должен работать офлайн. Когда появится
   векторный логотип с белой версией, фильтр можно заменить файлом. Видна только
   в верхней фазе (.shapka--verh, раздел 19). */
.shapka__logotip::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/logo-gap-shapka.png?v=cd13ee93") no-repeat left center / contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  pointer-events: none;
}

.shapka__nav { display: none; }
.shapka__nav ul {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: clamp(16px, 1.8vw, 26px); list-style: none; margin: 0; padding: 0; max-width: none;
}
.shapka__nav a {
  position: relative;
  display: inline-flex; align-items: center;
  height: 44px; padding: 0;
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  color: var(--shapka-punkt);
  white-space: nowrap;
  transition: color .18s ease;
}
.shapka__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 8px;
  height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.shapka__nav a:hover { color: var(--shapka-punkt-navod); }
.shapka__nav a:hover::after,
.shapka__nav a[aria-current="page"]::after { transform: scaleX(1); }
.shapka__nav a[aria-current="page"] { color: var(--shapka-punkt); }
/* Страницы услуг подсвечивают родительский раздел — приглушённее, чем текущую страницу */
.shapka__nav a[data-razdel="tekushchiy"]::after {
  transform: scaleX(1); background: color-mix(in srgb, var(--orange) 42%, transparent);
}

/* Зона «связаться»: телефон и кнопка одной группой */
.shapka__svyaz { display: flex; align-items: center; gap: 18px; flex: none; }

/* Связь одной иконкой 48×48 — она есть на всех ширинах: номер текстом рядом
   с меню и кнопкой в ряд шапки не помещается. */
.shapka__zvonok {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;          /* в размер кнопки заявки */
  color: var(--shapka-menyu);
  border: 2px solid var(--shapka-menyu);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.shapka__zvonok svg { width: 20px; height: 20px; fill: currentColor; }
.shapka__zvonok:hover { background: var(--orange-btn-svet); color: #FFFFFF; border-color: var(--orange-btn-svet); }

.shapka .knopka {
  display: none;
  align-self: stretch; height: auto; padding: 0 clamp(28px, 2.6vw, 48px);
  align-items: center;
  font-size: 15px; font-weight: 500;
  background: var(--blue); border: 0; color: #FFFFFF;     /* сплошной блок в обеих фазах шапки */
}
/* Наведение и фокус — глубже синий: белый по #EF5B25 был бы 3,39:1 */
.shapka .knopka:hover, .shapka .knopka:focus-visible { background: var(--blue-navod); color: #FFFFFF; }

@media (min-width: 1024px) { .shapka__nav { display: block; } }
/* Кнопка заявки появляется только там, где ряд шапки её вмещает: при 1240px
   логотип, меню на Geometria, звонок и кнопка в сумме шире контейнера, и ряд
   переполнялся на 8px, давая горизонтальную прокрутку. */
@media (min-width: 1300px) { .shapka .knopka { display: inline-flex; } }

/* --- 5.1. Меню на узком экране --------------------------------------------
   Кнопка 48×48 (тач-цель), панель — на весь экран фирменным синим: на телефоне
   разделы читаются кеглем 21px, а не строчками по 13. Открытие и закрытие —
   штатным <details>, без JS; фон под панелью придерживается через :has. */
.mobmenu { position: relative; flex: none; }
/* Кнопка меню — тот же квадрат и та же обводка, что у значка телефона рядом:
   44×44 и 2px, чтобы две кнопки читались парой. */
.mobmenu__knopka {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  list-style: none; cursor: pointer;
  color: var(--shapka-menyu);
  border: 2px solid var(--shapka-menyu);
}
.mobmenu__knopka::-webkit-details-marker { display: none; }
.mobmenu__knopka::marker { content: ""; }
.mobmenu__burger, .mobmenu__burger::before, .mobmenu__burger::after {
  display: block; width: 22px; height: 2px;
  background: currentColor;
  transition: transform .22s ease, background-color .16s ease;
}
.mobmenu__burger { position: relative; }
.mobmenu__burger::before, .mobmenu__burger::after { content: ""; position: absolute; left: 0; }
.mobmenu__burger::before { top: -7px; }
.mobmenu__burger::after  { top: 7px; }

.mobmenu[open] .mobmenu__knopka {
  position: fixed; top: 14px; right: 16px; z-index: 80;
  color: #FFFFFF; border-color: rgba(255, 255, 255, .32);
}
.mobmenu[open] .mobmenu__burger { background: transparent; }
.mobmenu[open] .mobmenu__burger::before { top: 0; transform: rotate(45deg); }
.mobmenu[open] .mobmenu__burger::after  { top: 0; transform: rotate(-45deg); }

/* Стекло шапки — containing block для fixed-потомков, поэтому на время
   открытой панели размытие снимается: иначе панель прижимается к шапке. */
.shapka:has(.mobmenu[open]) {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
html:has(.mobmenu[open]) { overflow: hidden; }

.mobmenu__panel {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  padding: 88px var(--pole) 28px;
  background: var(--blue-fon);         /* было #23447A — стало #174076, как у подвала */
  overflow-y: auto;
  animation: mobmenu-vhod .22s ease both;
}
@keyframes mobmenu-vhod { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobmenu__spisok { list-style: none; margin: 0; padding: 0; }
.mobmenu__spisok li + li { border-top: var(--hair) solid rgba(255, 255, 255, .14); }
.mobmenu__spisok a {
  display: flex; align-items: center;
  min-height: 58px; padding: 6px 0 6px 16px;
  border-left: 2px solid transparent;
  font-family: var(--font-display); font-weight: 500; font-size: 21px;
  color: #FFFFFF;
}
.mobmenu__spisok a[aria-current="page"] { border-left-color: var(--orange); }
.mobmenu__spisok a[data-razdel="tekushchiy"] { border-left-color: color-mix(in srgb, var(--orange) 42%, transparent); }
.mobmenu__spisok a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.mobmenu__niz { margin-top: auto; padding-top: 32px; }
.mobmenu__telefon {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: 500; font-size: 19px;
  color: #FFFFFF; margin-bottom: 14px;
}
.mobmenu__panel .knopka {
  display: flex; justify-content: center; align-items: center;
  /* своя высота: правило кнопки шапки (блок во всю высоту ряда) сюда не относится */
  align-self: auto; min-height: 52px; padding: 14px 22px;
  width: 100%; background: #FFFFFF; border: 2px solid #FFFFFF; color: var(--blue);
}
.mobmenu__panel .knopka:hover, .mobmenu__panel .knopka:focus-visible { background: var(--blue-navod); border-color: #FFFFFF; color: #FFFFFF; }
@media (min-width: 1024px) { .mobmenu { display: none; } }

/* --- 6. Первый экран -------------------------------------------------------
   Первый экран и шапка раздела заходят под шапку сайта: полупрозрачное стекло
   имеет смысл только тогда, когда под ним что-то есть. */
.geroy { margin-top: -88px; padding-top: 88px; }
.shapka-razdela { margin-top: -88px; }
.geroy {
  position: relative; overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;          /* на мобильных — без учёта адресной строки */
  display: grid; align-items: center;
  /* Градиента нет. Фон — ровный тон подложки
     самого кадра, снимок стоит правым слоем: текст всегда на плоском синем,
     а картинка остаётся в полную силу. Равномерное приглушение не годится:
     чтобы белый прошёл порог на светлых местах ангара, нужна opacity 0,14 —
     снимок при этом практически исчезает. */
  background: #014786;
  color: #FFFFFF;
}
.geroy__setka {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 56px; align-items: center;
  padding-top: 40px; padding-bottom: 64px;
}
@media (min-width: 900px) { .geroy__setka { padding-top: 72px; padding-bottom: 72px; } }
.geroy h1 { color: #FFFFFF; font-weight: 500; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.06; margin-bottom: 26px; }
.geroy__lid { font-size: 21px; line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 34em; margin-bottom: 38px; }
/* На 320px название института шире колонки: лид обложки набирается мельче,
   и слово укладывается целиком, без разрыва на одинокую букву. */
@media (max-width: 359px) { .geroy__lid { font-size: 17px; } }
.geroy__knopki { display: flex; flex-wrap: wrap; gap: 14px; }
/* --- 7. Шапка внутренней страницы ------------------------------------------
   Шмуцтитул раздела: тёмный разворот фирменным синим, из-под которого белый
   контент выходит по диагонали — той же 24°, что режет снимки в блоках «текст
   + изображение». Слева метка раздела и крупный заголовок вывороткой, справа
   лид на общей базовой линии. Фон держат чертёжная сетка 46px и контурные
   окружности. Шапка сайта над таким блоком идёт без плашки — ровно как над
   обложкой главной. */
.shapka-razdela {
  position: relative; overflow: hidden; z-index: 1;
  background: var(--blue-grad-1);
  background-image: linear-gradient(118deg, var(--blue-grad-1) 0%, var(--blue-grad-2) 100%);
  color: #FFFFFF;
  padding: 140px 0 96px;
  margin-bottom: -58px;                       /* срез не должен съедать воздух */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 58px), 0 100%);
}
@media (min-width: 900px) { .shapka-razdela { padding: 168px 0 118px; } }

/* Шапка раздела — чистая градиентная плашка со срезом, без рисунка справа:
   рисунок спорил с заголовком и утяжелял первый экран. */
.shapka-razdela .krug--pravo-verh { display: none; }

.shapka-razdela > .obolochka { position: relative; z-index: 2; }

.shapka-razdela h1 {
  margin: 0; color: #FFFFFF;
  font-size: clamp(36px, 4.8vw, 62px);
  line-height: 1.06;
  text-wrap: balance;
}
.shapka-razdela .lid { margin: 22px 0 0; color: rgba(255, 255, 255, .82); }
/* 320–359px: слово «Конструкторское» в 36px шире колонки (288px) и срезалось справа на 7px
   — кегль заголовка 32px */
@media (max-width: 359px) { .shapka-razdela h1 { font-size: 32px; } }

@media (min-width: 1000px) {
  .shapka-razdela .hlebnye-kroshki { margin-bottom: 40px; }
  /* Графики справа больше нет, но строка заголовка не должна тянуться
     во всю ширину: длинная строка хуже читается. */
  .shapka-razdela h1, .shapka-razdela .lid { max-width: 72%; }
}

.hlebnye-kroshki {
  font-size: 14px; font-weight: 300; color: var(--muted);
  margin-bottom: 26px; max-width: none;
}
.hlebnye-kroshki a, .hlebnye-kroshki b { color: var(--muted); font-weight: 300; }
/* Единственная ссылка крошек не дотягивала до цели нажатия 24px — добавляем поле */
.hlebnye-kroshki a { display: inline-block; padding: 5px 0; }
.hlebnye-kroshki a:hover { color: var(--blue); }
/* На тёмном шмуцтитуле крошки идут вывороткой */
.shapka-razdela .hlebnye-kroshki,
.shapka-razdela .hlebnye-kroshki a,
.shapka-razdela .hlebnye-kroshki b { color: rgba(255, 255, 255, .62); }
.shapka-razdela .hlebnye-kroshki a:hover { color: #FFFFFF; }

/* --- 7.1. Карта контактов ---------------------------------------------------
   Тёмная зона страницы контактов: шмуцтитул без среза перетекает в карту во всю
   ширину, из-под карты выходит светлая часть с формой. Карточка адреса стоит
   рядом с меткой Новосибирска — метка на карте в точке 42,9 % × 73,1 %. */
.shapka-razdela--slitno { clip-path: none; margin-bottom: 0; padding-bottom: 40px; }
@media (min-width: 900px) { .shapka-razdela--slitno { padding-bottom: 48px; } }

.karta-blok {
  position: relative;
  background: var(--blue-grad-1);
  background-image: linear-gradient(118deg, var(--blue-grad-1) 0%, var(--blue-grad-2) 100%);
  padding: 0 0 24px;
}
.karta-blok__polotno { position: relative; max-width: 1560px; margin: 0 auto; }
.karta-blok__polotno img { width: 100%; height: auto; display: block; }

.karta-blok__kartochka {
  background: #FFFFFF;
  padding: 26px 30px 28px;
  box-shadow: 0 18px 44px rgba(6, 18, 38, .28);
  border-top: 3px solid var(--orange);
}
.karta-blok__gorod {
  font-family: var(--font-display); font-weight: 500; font-size: 20px;
  color: var(--blue); margin: 0 0 12px;
}
.karta-blok__kartochka p { margin: 0 0 8px; font-size: 16.5px; color: var(--ink); max-width: none; }
.karta-blok__kartochka p:last-child { margin-bottom: 0; }
.karta-blok__kartochka a { color: var(--blue); }
.karta-blok__kartochka a:hover { color: var(--orange-deep); }

@media (max-width: 899px) {
  .karta-blok { padding-bottom: 32px; }
  .karta-blok__kartochka { margin: -28px 20px 0; position: relative; z-index: 2; }
}
@media (min-width: 900px) {
  .karta-blok__kartochka {
    position: absolute; left: 44%; top: 68%;
    width: min(320px, 26%);
  }
}

/* Страница контактов — один синий холст. Градиент лежит на самой странице,
   а шмуцтитул, карта и форма идут прозрачными: иначе на стыках блоков видны
   ступени, даже когда градиенты одинаковые — каждый начинает отсчёт заново. */
body.stranica-sinyaya {
  background: var(--blue-grad-1);
  background-image: linear-gradient(146deg, var(--blue-grad-1) 0%, var(--blue-grad-2) 100%);
  background-attachment: fixed;
  background-size: cover;
}
.stranica-sinyaya .shapka-razdela,
.stranica-sinyaya .karta-blok,
.stranica-sinyaya .sekciya--temnaya {
  background: transparent;
  background-image: none;
  border-bottom: 0;
}

/* --- 7.2. Контакты ----------------------------------------------------------
   Адрес, телефон и почта строками: подпись слева, значение справа. Крупнее
   обычного текста — на этой странице они и есть содержание. */
.kontakty-spisok { margin: 0; max-width: 760px; }
.kontakty-spisok__stroka {
  display: grid; gap: 4px 32px;
  padding: 22px 0;
  border-bottom: var(--hair) solid var(--line-2);
}
@media (min-width: 700px) { .kontakty-spisok__stroka { grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; } }
.kontakty-spisok dt {
  font-family: var(--font-body); font-weight: 300; font-size: 14px;
  color: var(--muted);
}
.kontakty-spisok dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 500; font-size: 20px;
  color: var(--blue);
}
.kontakty-spisok dd a { color: var(--blue); }
.kontakty-spisok dd a:hover { color: var(--orange-deep); }
/* Блок короткий, поэтому нижнее поле секции ужато: иначе между списком контактов
   и формой провисает пустая полоса в четверть экрана. */
.sekciya--kontakty { padding-bottom: 40px; }
@media (min-width: 900px) { .sekciya--kontakty { padding-bottom: 56px; } }

/* --- 8. Блок ключевых цифр ------------------------------------------------- */
.cifry__setka { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 8px; }
@media (min-width: 1100px) { .cifry__setka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Плитка цифры — строка: иконка слева, число и подпись справа. Полосок-границ
   нет: их роль взяла на себя иконка. */
.plitka {
  padding: 0; border: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px; row-gap: 6px; align-items: start;
}
/* Иконка направления над цифрой: линейная графика, фирменный оранжевый */
.plitka__ikonka { grid-row: 1 / 3; width: 62px; height: 56px; margin: 2px 0 0; }
.plitka__ikonka path { fill: var(--orange); }
@media (max-width: 700px) { .plitka__ikonka { width: 52px; height: 48px; } }

.plitka__cifra {
  display: block; grid-column: 2;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; color: var(--blue);
}
.plitka__edinica { font-size: .42em; }
.plitka__podpis { grid-column: 2;
  margin: 12px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--ink);
  max-width: none; hyphens: auto; overflow-wrap: break-word;
}
.na-temnom .plitka { border-left-color: rgba(255, 255, 255, .2); }
.na-temnom .plitka:first-child { border-left-color: var(--orange); }
.na-temnom .plitka__cifra { color: #FFFFFF; }
.na-temnom .plitka__podpis { grid-column: 2; color: rgba(255, 255, 255, .8); }
.cifry__period {
  display: inline-block; background: var(--orange-btn); color: #FFFFFF;
  font-family: var(--font-body); font-weight: 300; font-size: 14px;
  padding: 10px 20px; margin-bottom: 24px;
}
.cifry__snoska { margin-top: 32px; font-size: 15px; color: var(--muted); max-width: 48em; }

/* --- 8.1. Наши преимущества ---------------------------------------------------
   Один блок с единственным заголовком: сверху белая полоса с четырьмя
   преимуществами, снизу синяя с показателями. Заголовка «Институт в цифрах»
   нет намеренно — показатели читаются как нижняя часть того же блока. */
.preim { position: relative; }
.preim__verh { background: #FFFFFF; padding: 104px 0 96px; }
@media (min-width: 900px) { .preim__verh { padding: 132px 0 124px; } }

.preim__setka { display: grid; gap: 52px 0; }
@media (min-width: 720px) { .preim__setka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .preim__setka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Три карточки «О компании» — та же раскладка, только колонок три.
   Разделители и поля берутся из правил ниже: они опираются на порядок
   элементов, а не на число колонок. */
@media (min-width: 1100px) { .preim__setka--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Разделители — волоски между колонками, без карточек и теней */
.preim__punkt { padding: 0 40px; }
.preim__punkt:first-child { padding-left: 0; }
/* Одна колонка на узком экране: боковые поля даёт оболочка, свои — лишние */
@media (max-width: 719px) { .preim__punkt { padding: 0; } }
@media (min-width: 720px) { .preim__punkt + .preim__punkt { border-left: var(--hair) solid var(--line); } }
@media (min-width: 720px) and (max-width: 1099px) { .preim__punkt:nth-child(odd) { border-left: 0; padding-left: 0; } }
@media (min-width: 1100px) { .preim__punkt:nth-child(odd) { border-left: var(--hair) solid var(--line); } .preim__punkt:first-child { border-left: 0; } }
.preim__ikonka { width: auto; height: clamp(64px, 5vw, 88px); display: block; margin-bottom: 32px; }
.preim__ikonka path { fill: var(--orange); }
.preim__punkt h3 { margin: 0 0 16px; font-size: 21px; }
.preim__punkt p {
  margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink);
  hyphens: auto; overflow-wrap: break-word;   /* «высококвалифицированных» шире узкой колонки */
}

/* --- Нижняя, синяя часть ---------------------------------------------------- */
.preim__niz {
  position: relative; overflow: hidden;
  background: var(--blue-grad-1);
  background-image: linear-gradient(118deg, var(--blue-grad-1) 0%, var(--blue-grad-2) 100%);
  color: #FFFFFF;
  padding: 96px 0 88px;
  /* Диагональ по верхней кромке — тот же приём, что режет шапки разделов */
  clip-path: polygon(0 58px, 100% 0, 100% 100%, 0 100%);
  margin-top: -58px;
}
@media (min-width: 1000px) { .preim__niz { padding: 168px 0 168px; } }
@media (min-width: 900px) and (max-width: 999px) { .preim__niz { padding: 112px 0 100px; } }
.preim__niz > .obolochka { position: relative; z-index: 3; }

.preim__blueprint, .preim__klin, .preim__diagonali {
  position: absolute; pointer-events: none; user-select: none;
}
.preim__blueprint { left: -60px; bottom: 0; width: min(620px, 42%); opacity: .16; z-index: 1; }
.preim__klin {
  right: 0; top: 0; height: 100%; width: min(300px, 20%);
  object-fit: cover; opacity: .26; z-index: 1;
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  /* Левый край растворяется, иначе граница клина режет подпись показателя */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 62%);
          mask-image: linear-gradient(90deg, transparent, #000 62%);
}
/* Пропорции диагоналей сохраняем: растянутые по блоку, они ломают угол 24° */
.preim__diagonali { inset: 0; width: 100%; height: 100%; z-index: 2; opacity: .9; object-fit: cover; }
@media (max-width: 899px) { .preim__klin { display: none; } .preim__blueprint { opacity: .1; } }

/* Показатели стоят ровными рядами: слева иконка, справа сверху число, справа
   снизу подпись. Ломаная траектория убрана — ряд читается с одного взгляда,
   а подписи разной длины больше не спорят за место между узлами. */
.preim__lenta { position: relative; }

.preim__cifry {
  position: relative; z-index: 2;
  display: grid; gap: 54px 48px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
/* Шесть показателей: два ряда по три. Ниже 1000px — два, на телефоне — один. */
@media (min-width: 1000px) { .preim__cifry { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.preim__pokazatel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ikonka cifra"
                       "ikonka podpis";
  align-content: start; column-gap: 24px; row-gap: 10px;
}


.preim__ikonka-stat {
  grid-area: ikonka; align-self: start;
  width: auto; height: clamp(58px, 4.4vw, 70px); display: block; margin-top: 2px;
}
.preim__ikonka-stat path { fill: #FFFFFF; }
.preim__cifra {
  grid-area: cifra; display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 3.6vw, 56px); line-height: 1.05; color: #FFFFFF;
  white-space: nowrap;
}
/* «более» стоит в строке с числом: отдельной строкой оно опускало число вниз,
   и соседи по ряду переставали читаться как ряд. Колонка ряда широкая —
   приписка помещается. */
.preim__edinica {
  display: inline; margin-right: .3em;
  font-family: var(--font-body); font-weight: 300; font-size: 17px;
  color: rgba(255, 255, 255, .7);
}
.preim__podpis {
  grid-area: podpis; margin: 0; font-size: 16px; line-height: 1.5;
  color: rgba(255, 255, 255, .82); hyphens: auto; overflow-wrap: break-word;
}

/* Преимущества проявляются, когда блок входит в кадр. Без поддержки
   scroll-driven анимаций и при prefers-reduced-motion они видны сразу. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .preim__punkt {
      animation: preim-punkt linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes preim-punkt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
}

/* --- 8.2. Об институте и полоса цифр ------------------------------------- */
/* «Об институте. Наши преимущества»:
   слева — заголовок, лид и фото; колонка липнет к верху, пока справа листаются шесть
   полосок-преимуществ. Отступ липкой колонки — от высоты сжатой шапки (66px) с воздухом.
   Высота левой колонки рассчитана на 1280×720 (без шапки — 654px), иначе sticky не держит.
   Ниже 1024px — колонки друг под другом, без липкости. */
.institut__setka { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .institut__setka { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
  .institut__lev { position: sticky; top: calc(66px + 32px); }
}
.institut h2 { margin: 0 0 24px; }
.institut__lid {
  margin: 0 0 28px; max-width: 18em;
  font-family: var(--font-display); font-weight: 500; color: var(--blue);
  font-size: clamp(22px, 1.9vw, 30px); line-height: 1.25; letter-spacing: -0.01em;
}
.institut__snimok { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
/* Полоски: иконка и заголовок в строку, текст ниже от левого
   края полоски; между полосками линия 1px */
.polosa { padding: 32px 0; }
.polosa:first-child { padding-top: 0; }
.polosa + .polosa { border-top: var(--hair) solid var(--line); }
.polosa__verh { display: flex; align-items: flex-start; gap: 16px; }
/* иконка в коробке 52×44, прижата влево (preserveAspectRatio xMinYMid) — заголовки начинаются
   с одной линии; заголовок в 2 строки — иконка по центру первой строки (отступ сверху) */
.polosa .preim__ikonka { flex: none; width: 52px; height: 44px; margin: 0; }
.polosa h3 {
  margin: 0; padding-top: calc((44px - 1.3em) / 2);
  font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--blue);
}
.polosa p { margin: 16px 0 0; max-width: none; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
/* Новые иконки (экология, гибкость, отрасль) — обводкой; буклетные три — заливкой */
.preim__ikonka--liniya { stroke: var(--orange); }
.preim__ikonka--liniya path, .preim__ikonka--liniya circle, .preim__ikonka--liniya polygon { fill: none; }

/* Институт в цифрах: белый фон, разделители между пунктами, без иконок —
   цифры читаются сами. Блок подтянут к предыдущему: сверху отступа почти нет. */
/* Полоса стоит сразу под обложкой: сверху нужен воздух, снизу — меньше,
   чтобы она читалась вместе со следующим блоком, а не висела сама по себе. */
.cifry { padding: 56px 0 40px; }
@media (min-width: 900px) { .cifry { padding: 72px 0 48px; } }
.cifry__ryad { display: grid; gap: 40px 0; }
@media (min-width: 700px) { .cifry__ryad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cifry__ryad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Разделители — волоски между колонками */
.cifry__punkt { padding: 0 40px; }
.cifry__punkt:first-child { padding-left: 0; }
@media (min-width: 700px) {
  .cifry__punkt + .cifry__punkt { border-left: var(--hair) solid var(--line); }
  .cifry__punkt:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1100px) {
  .cifry__punkt:nth-child(odd) { border-left: var(--hair) solid var(--line); padding-left: 40px; }
  .cifry__punkt:first-child, .cifry__punkt:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 699px) { .cifry__punkt { padding: 0; } }
.cifry__znachenie {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 4.2vw, 62px); line-height: 1.02; color: var(--blue);
}
.cifry__edinica {
  font-family: var(--font-body); font-weight: 300; font-size: 19px; color: var(--muted);
  margin-right: .3em;
}
.cifry__podpis { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: none; }

/* --- 9. Карточки ----------------------------------------------------------- */
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
/* Три колонки: карточке направления нужна ширина под заголовок в две строки
   и квадрат со стрелкой справа. */
@media (min-width: 1000px) { .karty--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karta {
  background: var(--bg); border: var(--hair) solid var(--line);
  padding: 36px 30px 34px; display: flex; flex-direction: column; gap: 16px;
}
/* Узкий телефон: при полях 30px на 320 оставалось 226px — меньше «СИБПРОЕКТНИИАВИАПРОМ», слово рвалось */
@media (max-width: 399px) { .karta { padding-left: 20px; padding-right: 20px; } }
.karta__ikonka { width: auto; height: 52px; align-self: flex-start; margin-right: auto; }
.karta__ikonka path, .karta__ikonka rect { fill: var(--orange); }
.karta h3 { margin: 0; }
.karta p { margin: 0; font-size: 16.5px; line-height: 1.68; color: var(--ink); hyphens: auto; overflow-wrap: break-word; }
.karta__ssylka {
  margin-top: auto; font-family: var(--font-body); font-weight: 300;
  font-size: 14px; color: var(--orange-deep);
}
.karta__ssylka::after {
  content: "";
  display: inline-block;
  width: .85em; height: .85em;
  margin-left: .55em;
  vertical-align: -.06em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .18s ease;
}
.karta__ssylka:hover { color: var(--blue); }
.karta__ssylka:hover::after { transform: translate(2px, -2px); }
.karta > img { margin: -36px -30px 0; width: calc(100% + 60px); max-width: none; }
/* до 400px поля карточки 20px — картинка в край по ним, иначе выступала на 10px с каждой стороны */
@media (max-width: 399px) { .karta > img { margin: -36px -20px 0; width: calc(100% + 40px); } }

/* Карточка направления: заголовок и текст слева, действие — квадратом со
   стрелкой в правом верхнем углу. Кликается вся карточка (ссылка растянута
   псевдоэлементом), при наведении квадрат заливается оранжевым. */
.karta--napravlenie { position: relative; padding-right: 88px; }
.karta--napravlenie h3 { margin: 0; }
.karta--napravlenie h3 a { color: var(--blue); }
.karta--napravlenie h3 a::after { content: ""; position: absolute; inset: 0; }
.karta__strelka {
  position: absolute; top: 30px; right: 30px;
  width: 42px; height: 42px;
  border: 2px solid var(--orange);
  display: grid; place-items: center;
  transition: background-color .18s ease, border-color .18s ease;
}
/* Стрелка — та же фигура и та же маска, что у стрелок на кнопках сайта.
   Размер 15px подобран так, чтобы её штрих (16,25 % от размера) читался в одну
   толщину с рамкой квадрата: 2,4px против 2px — глазом не различить. */
.karta__strelka::before {
  content: ""; width: 15px; height: 15px;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: background-color .18s ease;
}
.karta--napravlenie:hover .karta__strelka,
.karta--napravlenie:focus-within .karta__strelka { background: var(--orange); }
.karta--napravlenie:hover .karta__strelka::before,
.karta--napravlenie:focus-within .karta__strelka::before { background: #FFFFFF; }

/* Карточка-строка: иконка слева, заголовок и текст справа, без подложки */
.karty--stroki { gap: 44px 56px; }
@media (min-width: 700px) { .karty--stroki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Тот же формат строки, но на три колонки — когда карточек три, а не четыре */
@media (min-width: 1000px) { .karty--stroki-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
@media (min-width: 1000px) { .karty--stroki-3 .karta__ikonka { width: 76px; height: 68px; } }
@media (min-width: 1000px) { .karty--stroki-3 .karta--stroka { column-gap: 20px; } }
.karta--stroka {
  background: none; border: 0; padding: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 26px; row-gap: 10px; align-items: start;
}
/* Всё содержимое от верхней кромки: иначе в ряду из карточек разной высоты
   иконки и заголовки соседей стоят на разных уровнях. */
.karta--stroka { align-items: start; }
.karta--stroka .karta__ikonka {
  grid-row: 1 / 3; grid-column: 1; align-self: start; margin-top: -4px;
  /* Ширина колонки фиксирована: иконки разной пропорции иначе сдвигают
     заголовки соседних карточек по горизонтали. */
  width: 96px; height: 84px; margin: 0;
}
@media (max-width: 600px) {
  .karta--stroka { column-gap: 18px; }
  .karta--stroka .karta__ikonka { width: 72px; height: 66px; }
}
.karta--stroka h3 { grid-column: 2; align-self: start; margin: 0; }
.karta--stroka p { grid-column: 2; }

/* --- 10. Ступени и процесс ------------------------------------------------- */
.stupeni { display: grid; gap: 16px; }
@media (min-width: 900px) { .stupeni { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 84px; } }
.stupen { border: 2px solid var(--orange); padding: 24px; background: var(--bg); }
@media (min-width: 900px) {
  .stupen { margin-left: -2px; }
  .stupen:nth-child(2) { transform: translateY(28px); }
  .stupen:nth-child(3) { transform: translateY(56px); }
  .stupen:nth-child(4) { transform: translateY(84px); }
}
.stupen__nomer {
  font-family: var(--font-body); font-weight: 300; font-size: 14px;
  color: #FFFFFF; background: var(--orange-btn);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.stupen p { font-size: 16.5px; color: var(--ink); margin: 0; }

.process { display: grid; gap: 24px; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 72px; } }
@media (min-width: 900px) {
  .process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .process--4 .etap:nth-child(5) { transform: none; }
}
.etap { position: relative; padding-top: 60px; }
.etap__nomer {
  position: absolute; top: 0; left: 0; width: 44px; height: 44px;
  background: var(--blue); color: #FFFFFF;
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
/* Номер 18px/500 — не «крупный» текст по WCAG: заливка глубоким оранжевым, белый 5,4:1 */
.etap--akcent .etap__nomer { background: var(--orange-deep); }
.etap::after {
  content: ""; position: absolute; top: 21px; left: 52px; right: -8px;
  border-top: 2px dashed rgba(35, 68, 122, .18); display: none;
}
@media (min-width: 900px) {
  .etap::after { display: block; }
  .etap:last-child::after { display: none; }
  .etap:nth-child(2) { transform: translateY(18px); }
  .etap:nth-child(3) { transform: translateY(36px); }
  .etap:nth-child(4) { transform: translateY(54px); }
  .etap:nth-child(5) { transform: translateY(72px); }
}
.etap h3 { font-size: 17px; margin-bottom: 8px; }
.etap p { font-size: 16.5px; color: var(--ink); margin: 0; }
.na-temnom .etap p { color: rgba(255, 255, 255, .8); }
.na-temnom .etap__nomer { background: var(--orange-btn); }

/* --- 11. Списки, документы, врезка, матрица -------------------------------- */
/* Списки: маркер — синий номер [01], [02]… Geometria Medium; счёт заново в каждом списке */
.spisok-galki { list-style: none; padding: 0; margin: 0; counter-reset: punkt; }
.spisok-galki li { position: relative; padding-left: 50px; margin-bottom: 16px; color: var(--ink); counter-increment: punkt; }
.spisok-galki li::before {
  content: "[" counter(punkt, decimal-leading-zero) "]";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 500; color: var(--blue);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.na-temnom .spisok-galki li::before { color: #FFFFFF; }
.na-temnom .spisok-galki li { color: rgba(255, 255, 255, .86); }

/* Документы — те же плашки, что «Обучение и статус»: во всю ширину колонки,
   заголовок акцидентным шрифтом, текст в один кегль с остальным на странице. */
.dokumenty { display: grid; gap: 24px; }
@media (min-width: 700px) { .dokumenty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dokument {
  background: var(--bg); border: var(--hair) solid var(--line);
  padding: 32px 28px; font-size: 16.5px; line-height: 1.55; color: var(--ink);
}
.dokument b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 18px; color: var(--blue); margin-bottom: 8px;
}
/* Узкий телефон: «СИБПРОЕКТНИИАВИАПРОМ» в заголовке плашки неразрывно (~285px при 18px),
   с полями 28px плашка выходила за экран до 362px. Колонка — minmax(0, 1fr), чтобы сетку
   не распирало; название не рвём — уменьшаем кегль и поля. */
@media (max-width: 699px) { .dokumenty { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 399px) {
  .dokument { padding-left: 18px; padding-right: 18px; }
  .dokument b { font-size: 15px; }
}

.vrezka { background: var(--blue); color: #FFFFFF; padding: 40px; }
.vrezka p { color: rgba(255, 255, 255, .92); margin: 0; font-size: 17px; line-height: 1.6; max-width: none; }

.matrica { display: grid; gap: 24px; }
@media (min-width: 700px) { .matrica { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.matrica > div { background: var(--bg); border: var(--hair) solid var(--line); padding: 32px 28px; }
.matrica h3 { font-size: 18px; }
/* Вместо заголовка плашки — иконка: подпись живёт в alt, поэтому смысл
   сохраняется и для программы чтения. */
.plashka__ikonka { display: block; width: auto; height: 80px; margin: 0 0 20px; }
.matrica p { font-size: 16.5px; color: var(--ink); margin: 0; }

/* --- 12. Пара «текст + изображение» ---------------------------------------- */
.para { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .para { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 56px; } }
.para img { width: 100%; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
/* Схемы идут на прозрачном фоне: диагональный срез отрезал бы часть рисунка,
   а рисовать его поверх линий незачем — фигура и так строится по диагоналям. */
.para img.infografika, .bez-skosa { clip-path: none; }
@media (min-width: 1000px) { .para--obratno .para__tekst { order: 2; } }

/* --- 13. Форма ------------------------------------------------------------- */
.forma { display: grid; gap: 22px; max-width: 640px; }
@media (min-width: 700px) { .forma__ryad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.pole { display: block; }
.pole > span {
  display: block; font-family: var(--font-body); font-weight: 300;
  font-size: 14px;
  color: var(--muted); margin-bottom: 8px;
}
.pole > span span { display: inline; color: var(--orange-deep); }
.pole input, .pole textarea {
  width: 100%; font-family: var(--font-body); font-size: 16.5px;
  color: var(--blue); background: var(--bg);
  border: var(--hair) solid #8593A6; border-radius: var(--radius); padding: 14px 16px;
}
.pole textarea { min-height: 130px; resize: vertical; }
.soglasie { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink); max-width: 640px; }
.soglasie input { margin-top: .25em; width: 20px; height: 20px; flex: none; }

/* Самолёт у формы заявки — чертёж фоном секции. Он существует в
   двух вариантах, синим по светлому и белым по тёмному, поэтому выворотка
   фильтром не нужна: берётся нужный файл. Оба кадрированы одинаково, и на
   светлой и тёмной странице самолёт стоит в одном и том же месте.
   Мелкие маркеры сняты: с чертежом во всю высоту они спорили за внимание и
   налезали на заголовок секции. */
.sekciya--samolet { position: relative; overflow: hidden; }
.sekciya--samolet::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: min(54%, 640px); height: 100%;
  background: url("../img/samolet-svetlyi.svg?v=0b762178") no-repeat right bottom / contain;
  pointer-events: none;                      /* без приглушения: чертёж — часть картинки блока */
  z-index: 0;                                /* под формой, а не поверх неё */
}
.sekciya--samolet > .obolochka { position: relative; z-index: 1; }
.na-temnom.sekciya--samolet::after, .sekciya--temnaya.sekciya--samolet::after {
  background-image: url("../img/samolet-temnyi.svg?v=77fbe379");
}
@media (max-width: 1099px) { .sekciya--samolet::after { display: none; } }

/* --- 14. Подвал — синий ---------------------------------------------------------
   Сплошной --blue-fon на всю ширину. Наверху — полный логотип белым; пока нет вектора, это
   растр logo-gap-podval.png (1340×608). Размер логотипа и отступ сетки задаёт компактный вариант
   (раздел 19, п. 12) — он на всех страницах.
   Ниже: лид (из «Структуры сайта»), две группы меню, контакты; внизу — полоса с названием
   и политикой. Разделители — линии 1px. */
.podval {
  --podval-tekst: rgba(255, 255, 255, .78);       /* по #174076 — 6,97:1 */
  --podval-liniya: rgba(255, 255, 255, .22);
  background: var(--blue-fon); color: #FFFFFF;
  padding: clamp(48px, 6vw, 96px) 0 0;
}
.podval__logotip { display: block; width: 100%; }
.podval__logo { display: block; width: 100%; height: auto; }
.podval__setka {
  display: grid; gap: 36px 40px; align-items: start;
  padding: 40px 0 clamp(40px, 4vw, 64px);
  border-top: var(--hair) solid var(--podval-liniya);
}
@media (min-width: 700px) { .podval__setka { grid-template-columns: repeat(3, minmax(0, 1fr)); } .podval__lid { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .podval__setka { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 56px; }
  .podval__lid { grid-column: auto; }
}
.podval__menyu { display: contents; }
.podval__lid { margin: 0; max-width: 30em; font-size: 18px; line-height: 1.55; color: #FFFFFF; }
.podval__zag {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0; color: var(--podval-tekst);
}
.podval__gruppa ul, .podval__svyaz ul { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 10px; }
.podval__gruppa a, .podval__svyaz li, .podval__svyaz a {
  font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.4; color: #FFFFFF; text-decoration: none;
}
/* Наведение — как в шапке: снизу вырастает оранжевая черта */
.podval__gruppa a, .podval__svyaz a { position: relative; display: inline-block; padding-bottom: 3px; }
.podval__gruppa a::after, .podval__svyaz a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: center; transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.podval__gruppa a:hover::after, .podval__svyaz a:hover::after,
.podval__gruppa a:focus-visible::after, .podval__svyaz a:focus-visible::after { transform: scaleX(1); }
.podval :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.podval__niz {
  border-top: var(--hair) solid var(--podval-liniya);
  padding: 22px 0 26px; display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between; font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--podval-tekst);
}
/* Ссылка политики недотягивала до цели нажатия 24px — добавляем поле */
.podval__niz a { display: inline-block; padding: 3px 0; color: var(--podval-tekst); }
.podval__niz a:hover { color: #FFFFFF; text-decoration: underline; }

/* --- 15. Служебное --------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  /* Затемнённый оранжевый: белым по фирменному #E26225 всего 3,5:1,
     по #C75019 — 4,6:1 (WCAG 1.4.3). */
  background: #C75019; color: #FFFFFF; padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 0; }
.vizualno-skryto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Смена фаз шапки — не движение, а перекраска: её глушитель выше отключать не
   должен, иначе шапка навсегда остаётся белой плашкой. Возвращаем фазы, но без
   сжатия: высота и логотип фиксируются на компактных значениях. */
@media (prefers-reduced-motion: reduce) and (min-width: 1px) {
  @supports (animation-timeline: scroll()) {
    .shapka {
      animation: shapka-fazy linear both !important;
      animation-timeline: scroll(root block) !important;
      animation-range: 0 140px !important;
    }
  }
  .shapka__ryad { min-height: 72px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .shapka__ryad { min-height: 68px; }
}

/* --- 15. Карта, галереи, документы, награды, видео ------------------------- */
/* Блок цифр: вторая группа под плашкой периода «С 2019 года».
   Плашка стоит внутри той же группы, что и цифры, — период не отрывается от показателей. */
.cifry__gruppa { margin-top: 56px; padding-top: 48px; border-top: var(--hair) solid var(--line); }
/* Плашка периода — чистый фирменный оранжевый и Geometria Medium. Белый по #E26225 — 3,50:1:
   это AA только для крупного текста, поэтому кегль 24px (порог крупного для обычного начертания). */
.cifry__gruppa .cifry__period {
  margin: 0 0 32px; background: var(--orange-btn);
  font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.2; padding: 10px 20px;
}
.cifry__gruppa .cifry__znachenie { font-size: clamp(34px, 3.4vw, 52px); white-space: nowrap; }
@media (max-width: 899px) { .cifry__gruppa { margin-top: 40px; padding-top: 36px; } }


/* Карта объектов — без среза. На компьютере в 1,5 раза меньше контейнера (67 %) и по центру,
   вокруг воздух; на телефоне во всю колонку, иначе регионы не различить */
.karta-obektov img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .karta-obektov__ramka { width: 67%; margin: clamp(24px, 3vw, 56px) auto; }
}

/* Видео облёта модели: постер до прокрутки, плеер без звука. Чёрные поля записи срезаны
   в самом файле; на компьютере ролик вдвое уже колонки, на телефоне во всю ширину */
.video-blok { max-width: 100%; }
@media (min-width: 900px) { .video-blok { width: 50%; } }
.video-blok__rolik { display: block; width: 100%; height: auto; }

/* Галереи изображений: подпись под кадром, тонкая рамка как у карточек */
.galereya { display: grid; gap: 32px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .galereya--2, .galereya--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .galereya--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galereya figure { margin: 0; }
.galereya img { display: block; width: 100%; height: auto; border: var(--hair) solid var(--line); background: #FFFFFF; }
/* Кадры галереи моделей приведены к 16:9 без обрезки: исходники 1,8–2,2:1 */
.galereya--3 img { aspect-ratio: 16 / 9; object-fit: contain; }
.galereya figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: none; }
.galereya__zagolovok { margin: 56px 0 24px; font-size: 20px; color: var(--blue); }

/* Сканы документов: миниатюры листов в разрешении показа. Без увеличения, без ссылки на
   оригинал; выделение, перетаскивание и меню удержания пальцем на телефоне сняты
   (контекстное меню и перетаскивание гасит скрипт страницы) */
.galereya--dokumenty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
@media (min-width: 700px) { .galereya--dokumenty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .galereya--dokumenty { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galereya--dokumenty img, .nagrada img {
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
}
.galereya--dokumenty figcaption { font-size: 14.5px; }

/* Награды: скан диплома рядом с описанием */
.nagrady { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.nagrada { display: grid; gap: 24px 40px; background: var(--bg); padding: 32px 28px; align-items: start; grid-template-columns: minmax(0, 1fr); }
/* Окно 320 с обычной полосой прокрутки (305px): карточка 292px в колонке 273px — элемент сетки
   не ужимался (min-width: auto); находка стенда после №81. Колонки minmax(0, 1fr), поля на узком — 20px */
@media (max-width: 359px) { .nagrada { padding-left: 20px; padding-right: 20px; } }
@media (min-width: 800px) { .nagrada { grid-template-columns: 260px minmax(0, 1fr); padding: 40px; } }
.nagrada figure { margin: 0; }
.nagrada img { display: block; width: 100%; height: auto; border: var(--hair) solid var(--line); }
.nagrada figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.nagrada__tekst h3 { margin: 0 0 16px; color: var(--blue); }
.nagrada__tekst p { font-size: 16.5px; color: var(--ink); }

/* Вводный абзац страницы контактов */
.kontakty__vvod { margin: 0 0 40px; max-width: 46em; }

/* Поле «Прикрепить файл» в форме заявки */
.pole--fayl input[type="file"] { padding: 10px 14px; font-size: 16.5px; cursor: pointer; }
/* Кнопка выбора файла — белая, синий текст #00417A (10,3:1), шрифт и рамка как у полей формы */
.pole--fayl input[type="file"]::file-selector-button {
  font-family: var(--font-body); font-size: 16.5px; font-weight: 400; margin-right: 14px; padding: 8px 16px;
  border: var(--hair) solid #8593A6; border-radius: var(--radius); background: #FFFFFF; color: #00417A; cursor: pointer;
}
.pole--fayl input[type="file"]::file-selector-button:hover { background: var(--bg-cold-2); }

/* Обозначения нормативов не разрываются переносом строки: «ГОСТ / 31937-2011» */
.bez-perenosa { white-space: nowrap; }

/* Текстовая плашка документа без скана */
.dokument-tekst { margin: 40px 0 0; padding: 24px 28px; background: var(--bg); border-left: 3px solid var(--orange); font-size: 16.5px; line-height: 1.6; color: var(--ink); max-width: none; }
.dokument-tekst b { color: var(--blue); }

/* Основная кнопка в глубоком оранжевом: белый 5,4:1, наведение 6,4:1 (WCAG AA для 17px) */
.knopka--glubokaya { background: var(--orange-deep); }
.knopka--glubokaya:hover { background: #A33F12; }

/* --- 16. Отправка формы заявки ------------------------------------------------
   Поле-ловушка для ботов убрано за экран, а не display:none: часть ботов пропускает
   скрытые поля, но заполняет невидимые. Человек его не видит и не достаёт Tab-ом
   (tabindex=-1), программа чтения пропускает (aria-hidden). */
.forma__lovushka { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }


/* Строка статуса: «Отправляем», «Отправлено», ошибка. На синем фоне формы —
   белый текст на затемнённой подложке, вид задаёт цвет черты слева. */
.forma__status {
  margin: 0; padding: 14px 18px; font-size: 16px; line-height: 1.5;
  border-left: 3px solid var(--blue); background: var(--bg-alt); color: var(--ink); max-width: 640px;
}
.forma__status--gotovo { border-left-color: #2E7D4F; }
.forma__status--oshibka { border-left-color: var(--orange-deep); }
.forma__status--test { border-left-color: var(--muted); }
.knopka:disabled { opacity: .7; cursor: progress; }
/* Поле, которое обработчик вернул с ошибкой (fields в ответе) */
.pole input[aria-invalid="true"], .pole textarea[aria-invalid="true"] { border-color: var(--orange-deep); box-shadow: 0 0 0 1px var(--orange-deep); }

/* --- 17. Появление и движение ------------------------------------------------
   Сдержанный набор в духе графического языка: проявление снизу, прорисовка дуг
   и диагоналей, выезд оранжевой диагонали обложки, проявление карты.
   Правила:
   - скрытое начальное состояние — только под html.anim, класс ставит скрипт в <head>
     и только при поддержке IntersectionObserver и без prefers-reduced-motion;
     без JS и при «уменьшить движение» всё видно сразу;
   - только opacity, transform и clip-path — раскладка не меняется (нет CLS);
   - 300–700 мс, без циклов; страховка: если основной скрипт не запустился за 3 с,
     скрипт в <head> снимает html.anim и всё становится видно;
   - начальное состояние — :where(), нулевая специфичность: .vidno всегда его перебивает. */
:root { --poyav-dlit: .55s; --poyav-krivaya: cubic-bezier(.2, .7, .3, 1); }

/* Проявление снизу; лесенка — переменная --i (номер среди соседей, ставит скрипт) */
html.anim :where(.zagolovok-sekcii, .institut > .obolochka > h2, .karty > *, .galereya > *, .galereya__zagolovok,
  .cifry__ryad > *, .cifry__period, .process > *, .dokumenty > *, .dokument-tekst, .nagrady > *, .partnery > *,
  .institut__lev > *, .institut__prav > .polosa, .spisok-galki > li, .kontakty-spisok > *, .kontakty__vvod, .video-blok, .matrica > *,
  .para > *, .sekciya > .obolochka > .lid) {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--poyav-dlit) var(--poyav-krivaya), transform var(--poyav-dlit) var(--poyav-krivaya);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.anim .spisok-galki > li { transition-delay: calc(var(--i, 0) * 55ms); }
html.anim .vidno { opacity: 1; transform: none; }

/* Карта объектов: проявление косым срезом слева направо, под углом диагонали 24° */
html.anim .karta-obektov img {
  clip-path: polygon(0 0, 0 0, -48% 100%, -48% 100%);
  transition: clip-path .7s var(--poyav-krivaya);
}
html.anim .karta-obektov img.vidno { clip-path: polygon(0 0, 148% 0, 100% 100%, -48% 100%); }

/* Перелив оранжевых треугольников — объектов института. Слой SVG повторяет ячейки растра
   (tools/karta_perelivy.py), маска — сам растр (img.currentSrc, ставит скрипт): берег, реки
   и озёра совпадают с картой; подпись «Новосибирск» вырезана из растра и лежит поверх слоя.
   Каждый треугольник непрозрачно проходит три оттенка оранжевой гаммы карты — от персикового
   до кирпичного #B54817, #E26225 посередине — и возвращается к своему цвету (--c0 = цвет
   ячейки растра, поэтому на старте и в конце скачка нет). Шаг 0,65–0,85 с, волна от Новосибирска
   со случайной добавкой: соседи не синхронно. Проход ≤ 5 с при входе карты в экран и при
   наведении (WCAG 2.2.2); каждая ячейка меняется реже раза в секунду (2.3.1).
   Вне экрана и при «уменьшить движение» не играет. */
.karta-obektov__ramka { position: relative; }
.karta-obektov__perelivy {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.karta-obektov__perelivy polygon { fill: var(--c0); }
@keyframes perelivy {
  0%, 100% { fill: var(--c0); }
  25% { fill: var(--c1); }
  50% { fill: var(--c2); }
  75% { fill: var(--c3); }
}
@media (prefers-reduced-motion: no-preference) {
  .karta-obektov__ramka.igraet .karta-obektov__perelivy { visibility: visible; }
  .karta-obektov__ramka.igraet polygon { animation: perelivy var(--d, 3s) ease-in-out var(--z, 0s) 1 both; }
}

/* Пунктир между этапами процесса прорисовывается после появления этапа */
html.anim .process > .etap::after { transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--poyav-krivaya) .25s; }
html.anim .process > .etap.vidno::after { transform: none; }

/* Обложка главной: текст проявляется лесенкой, оранжевая диагональ выезжает,
   дуга прорисовывается, снимок мягко садится на место — один раз при загрузке */
@keyframes poyav-snizu { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes diagonal-vyezd { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes snimok-sadka { from { transform: scale(1.035); } to { transform: none; } }
html.anim .geroy__setka > div > * { animation: poyav-snizu .6s var(--poyav-krivaya) both; }
html.anim .geroy__setka > div > :nth-child(2) { animation-delay: .12s; }
html.anim .geroy__setka > div > :nth-child(3) { animation-delay: .24s; }
html.anim .shapka-razdela .obolochka > * { animation: poyav-snizu .5s var(--poyav-krivaya) both; }
html.anim .shapka-razdela .obolochka > :nth-child(2) { animation-delay: .08s; }
html.anim .shapka-razdela .obolochka > :nth-child(3) { animation-delay: .16s; }

/* Прорисовка контурных окружностей: маска-сектор раскрывается от 0 до 360°.
   Без поддержки @property окружность просто видна целиком. */
@property --ugol { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@keyframes krug-risovanie { from { --ugol: 0deg; } to { --ugol: 360deg; } }
html.anim .krug {
  -webkit-mask: conic-gradient(from -90deg, #000 var(--ugol), transparent 0);
          mask: conic-gradient(from -90deg, #000 var(--ugol), transparent 0);
  animation: krug-risovanie .7s var(--poyav-krivaya) .15s both;
}

/* Лёгкая реакция на наведение: карточки приподнимаются на 3px, основная кнопка — на 1px */
.karta { transition: transform .25s var(--poyav-krivaya, ease), background-color .18s ease, border-color .18s ease; }
.karta:hover, .karta:focus-within { transform: translateY(-3px); }
html.anim .karty > .karta.vidno:hover, html.anim .karty > .karta.vidno:focus-within { transform: translateY(-3px); }
.knopka--osnovnaya { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .2s ease; }
.knopka--osnovnaya:hover { transform: translateY(-1px); }

/* --- 18. Общая подача — все страницы -------------------------------------------
   Плотные заголовки, прямоугольные кнопки капслоком со стрелкой,
   карточки и цифры ровной сеткой из линий 1px без теней, пары «подпись — значение» в блоке заявки.
   Тексты, палитра, шрифты и «воздух» прежние. */


/* Плотные заголовки */
h2 { line-height: 1.06; letter-spacing: -0.02em; }
.zagolovok-sekcii--s-knopkoy h2 { max-width: 22em; font-size: clamp(26px, 2.4vw, 38px); }
.geroy h1, .shapka-razdela h1 { line-height: 1.04; }


/* Кнопки: прямоугольные, капслоком, со стрелкой; на телефоне переносятся.
   Обложка и шапка перечислены отдельно: у их правил своя специфичность и свой кегль.
   Межбуквенное расстояние у всего прописного текста — 0;
   страж — tools/proverka_propisnyh.py. */
.knopka, .shapka .knopka, .geroy .knopka, .geroy .knopka--osnovnaya, .geroy .knopka--ramka {
  text-transform: uppercase; letter-spacing: 0; font-size: 14px;
}
/* Рамочная кнопка без своей стрелки получает «→» */
.knopka--ramka:not(.knopka--strelka)::after {
  content: "\2192"; display: inline-block; margin-left: .7em; transition: transform .18s ease;
}
.knopka--ramka:not(.knopka--strelka):hover::after { transform: translateX(3px); }
@media (max-width: 479px) { .geroy .knopka { white-space: normal; text-align: left; } }


/* Цифры: ровная сетка, как у карточек. Общая рамка сверху и слева, у каждой ячейки —
   справа и снизу: линии одной толщины сходятся на углах без зазоров и двойных линий.
   Ячейки ряда одной высоты (stretch), отступы одинаковые; телефон — одна колонка. */
.cifry__ryad {
  gap: 0; border-top: var(--hair) solid var(--line); border-left: var(--hair) solid var(--line);
  grid-template-columns: minmax(0, 1fr); align-items: stretch;
}
@media (min-width: 700px) { .cifry__ryad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cifry__ryad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cifry__punkt,
.cifry__punkt:first-child,
.cifry__punkt + .cifry__punkt,
.cifry__punkt:nth-child(odd),
.cifry__punkt:nth-child(4) {
  padding: 28px 28px 26px; border: 0;
  border-right: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line);
}
@media (max-width: 699px) {
  .cifry__punkt,
  .cifry__punkt:first-child,
  .cifry__punkt + .cifry__punkt,
  .cifry__punkt:nth-child(odd),
  .cifry__punkt:nth-child(4) { padding: 22px 20px 20px; }
}
/* Первая группа — три цифры: от 700px всегда три колонки, иначе в двух колонках
   остаётся пустая клетка и обрывок линии */
@media (min-width: 700px) { .cifry > .obolochka > .cifry__ryad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cifry__gruppa { border-top: 0; margin-top: 48px; padding-top: 0; }
.cifry__gruppa .cifry__period { margin-bottom: 24px; }
.cifry__znachenie { white-space: nowrap; }

/* Плашки документов, «Обучение и статус» и плитки цифр — той же сеткой из линий */
.dokumenty, .matrica, .cifry__setka {
  gap: 0; border-top: var(--hair) solid var(--line); border-left: var(--hair) solid var(--line); align-items: stretch;
}
.dokumenty > .dokument, .matrica > div, .cifry__setka > .plitka {
  border: 0; border-right: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line); box-shadow: none;
}
.cifry__setka > .plitka { padding: 28px 28px 26px; }
/* Три плитки — три колонки: в сетке на четыре верхняя линия уходила в пустую четвёртую клетку */
@media (min-width: 1100px) { .cifry__setka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sekciya--fon .dokumenty > .dokument { background: var(--bg-alt); }

/* Карточки: без теней и рамок у каждой — общая сетка, разделённая линиями */
.karty { gap: 0; border-top: var(--hair) solid var(--line); border-left: var(--hair) solid var(--line); }
.karty > .karta {
  border: 0; border-right: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line);
  background: transparent; box-shadow: none;
}
.sekciya--fon .karty > .karta { background: var(--bg-alt); }
.karty > .karta:hover, .karty > .karta:focus-within,
html.anim .karty > .karta.vidno:hover, html.anim .karty > .karta.vidno:focus-within {
  transform: none; background: #FFFFFF;
}
/* На белой секции белая подсветка не видна — там карточка при наведении светло-серая */
.sekciya:not(.sekciya--fon) .karty > .karta:hover, .sekciya:not(.sekciya--fon) .karty > .karta:focus-within,
html.anim .sekciya:not(.sekciya--fon) .karty > .karta.vidno:hover, html.anim .sekciya:not(.sekciya--fon) .karty > .karta.vidno:focus-within { background: var(--bg-alt); }

/* --- Блок заявки (главная и «Контакты»): фото, текст слева, белая карточка формы справа
   Тонировка фото — равномерный слой фирменного синего,
   без градиентов, диагоналей и самолёта. Углы карточки и полей прямые (2px). */
/* Фото отражено по горизонтали: тёмный пустой пролёт цеха оказывается под белым текстом
   слева, светлые конструкции с окнами — под белой карточкой справа. Без отражения белый
   текст ложился на окна (3,18:1), а слой тонировки по ТЗ — не плотнее 0,30. */
.zayavka-m {
  position: relative; isolation: isolate; color: #FFFFFF; overflow: hidden;
  background: #00417A;
  padding: 72px 0;
}
.zayavka-m::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/zayavka-fon-1672.webp?v=3fe056d7") center / cover no-repeat;
  transform: scaleX(-1);
}
@media (max-width: 767px) { .zayavka-m { padding: 56px 0; } .zayavka-m::after { background-image: url("../img/zayavka-fon-960.webp?v=1be3ea96"); } }
@media (min-width: 1024px) { .zayavka-m { padding: 96px 0; } }
.zayavka-m::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 65, 122, .28); }
.zayavka-m__setka { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) {
  .zayavka-m__setka { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 56px; align-items: center; }
}
.zayavka-m h2 { color: #FFFFFF; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.08; margin: 0 0 20px; max-width: 12em; }
.zayavka-m__lid { color: #FFFFFF; font-size: 18px; line-height: 1.55; max-width: 28em; margin: 0 0 32px; }
@media (max-width: 767px) { .zayavka-m__lid { font-size: 17px; } }
.zayavka-m__pary { display: grid; gap: 16px 40px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(180px, max-content)); }
.zayavka-m__pary div { border-top: var(--hair) solid rgba(255, 255, 255, .45); padding-top: 12px; }
.zayavka-m__pary dt {
  font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; color: rgba(255, 255, 255, .86); margin-bottom: 6px;
}
.zayavka-m__pary dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.zayavka-m__pary a { color: #FFFFFF; text-decoration: none; }
.zayavka-m__pary a:hover { text-decoration: underline; }
.zayavka-m :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

.zayavka-m__karta { background: #FFFFFF; color: #1D2939; border-radius: 2px; padding: 40px; }
@media (max-width: 767px) { .zayavka-m__karta { padding: 24px 20px; } }
.zayavka-m__karta :focus-visible { outline: 3px solid #00417A; outline-offset: 2px; }
.forma--karta { max-width: none; gap: 20px; }
.forma--karta .pole > span, .forma--karta .pole > label > span {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; color: #475467;
}
.forma--karta .pole > span span, .forma--karta .pole > label > span span { color: #B54817; }
.forma--karta .pole > .pole__oshibka { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: #B54817; margin: 6px 0 0; }
/* Рамка полей #8593A6 (3,3:1 к белому) вместо #D6DFE7 из ТЗ: граница поля — элемент
   интерфейса, WCAG 1.4.11 требует от неё 3:1 */
.forma--karta input[type="text"], .forma--karta input[type="tel"], .forma--karta input[type="email"], .forma--karta textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: var(--hair) solid #8593A6; border-radius: 2px;
  background: #FFFFFF; color: #1D2939; font-family: var(--font-body); font-size: 16.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.forma--karta textarea { min-height: 128px; resize: vertical; }
.forma--karta input:focus, .forma--karta textarea:focus { border-color: #00417A; box-shadow: 0 0 0 3px rgba(0, 65, 122, .22); outline: none; }
.forma--karta input:focus-visible, .forma--karta textarea:focus-visible { outline: 2px solid #00417A; outline-offset: 1px; }
.forma--karta [aria-invalid="true"] { border-color: #B54817 !important; box-shadow: 0 0 0 1px #B54817; }
.pole__oshibka { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: #B54817; }
.pole__oshibka[hidden] { display: none; }
.pole__oshibka--soglasie { margin-top: -10px; }
/* Поле файла — как остальные поля: та же рамка, высота и фон. Настоящий input type=file
   прозрачным слоем растянут на всё поле: клик в любой точке и перетаскивание файла
   работают средствами браузера. Видимая часть — скрепка и подсказка (#475467, 7,6:1),
   после выбора — имя и размер файла и кнопка «Убрать» поверх слоя input. */
/* min-width: 0 — иначе длинное имя файла (nowrap) распирает колонку сетки формы шире экрана */
.pole--fayl, .fayl-zona { min-width: 0; }
.fayl-zona {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 8px 14px; border: var(--hair) solid #8593A6; border-radius: 2px;
  background: #FFFFFF; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pole .fayl-zona__vvod {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: pointer; font-size: 0;
}
.fayl-zona__vid {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0;
  pointer-events: none; color: #475467; font-family: var(--font-body); font-size: 15px; line-height: 1.35; text-align: center;
}
.fayl-zona__skrepka { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fayl-zona__imya { display: flex; min-width: 0; color: #1D2939; white-space: nowrap; }
/* обрезается только имя, размер виден всегда */
.fayl-zona__nazvanie { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fayl-zona__razmer { flex: none; white-space: pre; }
.fayl-zona__imya[hidden], .fayl-zona__tekst[hidden] { display: none; }
.fayl-zona--vybran { justify-content: space-between; }
.fayl-zona--vybran .fayl-zona__vid { justify-content: flex-start; text-align: left; }
.fayl-zona:has(.fayl-zona__vvod:focus) { border-color: #00417A; box-shadow: 0 0 0 3px rgba(0, 65, 122, .22); }
.fayl-zona:has(.fayl-zona__vvod:focus-visible) { outline: 2px solid #00417A; outline-offset: 1px; }
.fayl-zona--nad { border-color: #00417A; border-style: dashed; background: #F2F6FB; }
.fayl-zona:has(.fayl-zona__vvod[aria-invalid="true"]) { border-color: #B54817; box-shadow: 0 0 0 1px #B54817; }
.pole__ubrat {
  position: relative; z-index: 1; flex: none;
  font-family: var(--font-body); font-size: 14px; padding: 6px 12px; cursor: pointer;
  background: #FFFFFF; color: #00417A; border: var(--hair) solid #8593A6; border-radius: 2px;
}
.pole__ubrat[hidden] { display: none; }
.pole__ubrat:hover { background: var(--bg-cold-2); }
.forma--karta .soglasie { color: #1D2939; max-width: none; }
.forma--karta .soglasie a { color: #00417A; }
.forma--karta .soglasie input { accent-color: #00417A; }
/* Кнопка отправки — фирменный синий, подпись как у кнопок обложки и шапки: Geometria 500,
   14px, капслоком, трекинг 0; стрелка сохраняется; во всю ширину карточки.
   Белый по #23447A — 9,64:1. Наведение — глубже синий (12,17:1), а не оранжевый, как у шапки:
   белый по #EF5B25 — 3,39:1, ниже 4,5 для 14px. Фокус — контур карточки #00417A. */
.zayavka-m__knopka.knopka--osnovnaya {
  width: 100%; min-height: 54px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #FFFFFF; border-color: var(--blue); border-radius: 2px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0;
}
.zayavka-m__knopka.knopka--osnovnaya:hover, .zayavka-m__knopka.knopka--osnovnaya:focus-visible {
  background: #1A3561; border-color: #1A3561; color: #FFFFFF;
}
.forma--karta .forma__status { max-width: none; }

/* Появление блока заявки: заголовок, лид и контакты въезжают
   снизу по очереди, следом поднимается карточка формы, поля — лесенкой. Один раз при входе
   в экран (класс .zayavka-m--vidno ставит скрипт), всё укладывается в 1,2 с. Только под
   html.anim: без JS и при «уменьшить движение» всё видно сразу. Раскладка не меняется. */
html.anim .zayavka-m :where(.zayavka-m__tekst > *, .zayavka-m__karta, .forma--karta > :not(.forma__lovushka)) {
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s var(--poyav-krivaya), transform .5s var(--poyav-krivaya);
}
html.anim .zayavka-m :where(.zayavka-m__karta) { transform: translateY(36px); transition-duration: .6s; transition-delay: .25s; }
html.anim .zayavka-m :where(.forma--karta > *) {
  transform: translateY(12px); transition-duration: .4s;
  transition-delay: calc(.4s + var(--i, 0) * 50ms);
}
html.anim .zayavka-m :where(.zayavka-m__tekst > :nth-child(2)) { transition-delay: .1s; }
html.anim .zayavka-m :where(.zayavka-m__tekst > :nth-child(3)) { transition-delay: .2s; }
html.anim .zayavka-m.zayavka-m--vidno :where(.zayavka-m__tekst > *, .zayavka-m__karta, .forma--karta > *) { opacity: 1; transform: none; }
/* Фото — медленное приближение при прокрутке через секцию (scroll-driven, без цикла);
   отражение scaleX(-1) сохраняется. Без поддержки animation-timeline фото неподвижно. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes zayavka-foto { from { transform: scaleX(-1) scale(1.08); } to { transform: scaleX(-1) scale(1); } }
    .zayavka-m::after { animation: zayavka-foto linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
/* Фокус полей — плавно; стрелка основной кнопки сдвигается и при фокусе с клавиатуры */
.forma--karta input, .forma--karta textarea, .fayl-zona { transition-duration: .2s; }
.knopka--osnovnaya:focus-visible::after { transform: translate(3px, -3px); }

/* --- 19. Шапка, подвал, «Лицензии», «Карьера», «Награды» ----------------------------
   Размещение и оформление. */

/* (1) Две фазы шапки. Цвета — готовыми значениями в переменных, без color-mix с вычисляемым
   процентом: если браузер такое смешивание не посчитает, надпись унаследует серый текст
   страницы и на синем не прочтётся. Верхнюю фазу включает класс
   .shapka--verh: его ставит скрипт сразу после шапки, пока прокрутка меньше 140px, и только
   у шапки с data-temnyy-verh (обложка главной, синие шмуцтитулы). Без класса (нет скрипта,
   сбой) шапка в светлой фазе и читается всегда. Сжатие 88 → 66px — по-прежнему по --sh.
   Пункты меню после прокрутки серые (--shapka-punkt), наведение синее;
   контраст обеих фаз сторожит tests/test_shapka_kontrast.py. */
.shapka {
  /* светлая фаза: после прокрутки и по умолчанию */
  --shapka-fon: #FFFFFF;
  --shapka-liniya: #E1E7EE;
  --shapka-menyu: #23447A;          /* телефон и кнопка мобильного меню */
  --shapka-punkt: #58595B;          /* буквы пунктов меню, серый текста сайта, 7,0:1 */
  --shapka-punkt-navod: #23447A;    /* наведение на пункт — фирменный синий */
  --shapka-knopka-fon: #23447A;
  --shapka-knopka-tekst: #FFFFFF;
  --shapka-knopka-ramka: #23447A;
  --shapka-knopka-navod: #1A3561;
  background: var(--shapka-fon); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: var(--hair) solid var(--shapka-liniya);
}
/* верхняя фаза: прозрачная поверх тёмного верха, логотип, меню, телефон и кнопка белые */
.shapka.shapka--verh {
  --shapka-fon: transparent;
  --shapka-liniya: transparent;
  --shapka-menyu: #FFFFFF;
  --shapka-punkt: #FFFFFF;
  --shapka-punkt-navod: #FFFFFF;
  --shapka-knopka-fon: #FFFFFF;
  --shapka-knopka-tekst: #23447A;
  --shapka-knopka-ramka: #FFFFFF;
  --shapka-knopka-navod: #23447A;
}
.shapka--verh .shapka__logo { opacity: 0; }
.shapka--verh .shapka__logotip::after { opacity: 1; }
.shapka__nav a, .shapka__nav a[aria-current="page"] { color: var(--shapka-punkt); }
.shapka__nav a:hover { color: var(--shapka-punkt-navod); }

/* (4) Логотип не касается краёв шапки ни в одной фазе: 56px в шапке 88px, 44px в сжатой 66px */
.shapka__logo { height: calc(56px - var(--sh) * 12px); }
@media (max-width: 767px) { .shapka__logo { height: calc(50px - var(--sh) * 6px); } }
@media (max-width: 359px) { .shapka__logo { height: 40px; } }

/* (5) Меню прописными (трекинг 0), ближе к логотипу; связь — к правому полю.
   Кегль 13px: прописные шире строчных, в 15px ряд на 1300 не помещал кнопку заявки. */
.shapka__logotip { margin-right: 0; }
.shapka__ryad { gap: clamp(16px, 1.6vw, 32px); }
.shapka__nav ul { gap: clamp(14px, 1.4vw, 24px); }
.shapka__nav a { text-transform: uppercase; letter-spacing: 0; font-size: 13px; }
.shapka__svyaz { margin-left: auto; }

/* (3) Кнопка заявки — обычная кнопка высотой с квадрат телефона (44px), по центру с ним;
   справа поле. */
@media (min-width: 1300px) {
  .shapka__ryad.obolochka { padding-right: var(--pole); }
  .shapka__svyaz { align-self: auto; }
}
/* (2) Наверху — белая заливка, синий текст и стрелка, обводка 1px, наведение — синяя #23447A.
   После прокрутки — синяя с белой подписью, наведение #1A3561. Фаза меняется скачком, классом. */
.shapka__svyaz > .knopka {
  align-self: center; height: 44px; padding: 0 18px; font-size: 14px;
  border: var(--hair) solid var(--shapka-knopka-ramka);
  background: var(--shapka-knopka-fon);
  color: var(--shapka-knopka-tekst);
}
.shapka__svyaz > .knopka:hover, .shapka__svyaz > .knopka:focus-visible {
  background: var(--shapka-knopka-navod); border-color: var(--shapka-knopka-navod); color: #FFFFFF;
}

/* Квадрат телефона и кнопка меню — обводка 1px (рамки сайта — 1px): белая наверху, синяя после прокрутки */
.shapka__zvonok, .mobmenu__knopka { border: var(--hair) solid var(--shapka-menyu); color: var(--shapka-menyu); }
.mobmenu[open] .mobmenu__knopka { border-color: rgba(255, 255, 255, .5); color: #FFFFFF; }
.shapka__zvonok:hover { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }

/* (6) Плашка «С 2019 года»: прозрачная, синий текст и обводка 1px, прописными */
.cifry__gruppa .cifry__period {
  background: transparent; color: var(--blue); border: var(--hair) solid var(--blue);
  display: inline-block; font-size: 16px; line-height: 1.2; padding: 9px 16px;
  text-transform: uppercase; letter-spacing: 0;
}

/* (7) Плитки цифр при наведении — как карточки: светло-серая заливка за 0,18 с */
.cifry__punkt { transition: background-color .18s ease; }
.cifry__punkt:hover { background: var(--bg-alt); }

/* (8) Стрелка рамочной кнопки — тот же значок, что у основной (маска), повёрнутый на 45°: «→» */
.knopka--ramka:not(.knopka--strelka)::after {
  content: ""; display: inline-block; width: .82em; height: .82em; margin-left: .7em; vertical-align: -.06em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 0H24v21.8h-3.9V6.66L3.33 23.43.57 20.67 17.34 3.9H2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(45deg); transition: transform .18s ease;
}
.knopka--ramka:not(.knopka--strelka):hover::after { transform: translateX(3px) rotate(45deg); }

/* (9) Лид «Об институте» — в правой колонке над полосками, обычным абзацем */
.institut__prav > .institut__lid {
  margin: 0 0 32px; max-width: none;
  font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.6; letter-spacing: 0; color: var(--ink);
}
.institut__lid + .polosa { padding-top: 32px; border-top: var(--hair) solid var(--line); }

/* (10) Карта появляется мягко — проявление с подъёмом и масштабом 0,98 → 1 за 0,8 с, без
   диагонали; перелив стартует после (пауза 0,8 с в #karta-perelivy) */
html.anim .karta-obektov img {
  clip-path: none; opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .8s var(--poyav-krivaya), transform .8s var(--poyav-krivaya);
}
html.anim .karta-obektov img.vidno { clip-path: none; opacity: 1; transform: none; }

/* (11) Кнопка отправки — ровно по краям полей: абзац-обёртка не ограничен мерой строки */
.forma--karta > p { max-width: none; margin: 0; }

/* (12) Компактный подвал — на всех страницах: тот же синий, логотип 265px (высота ~120px) */
.podval--kompakt .podval__logotip { max-width: 265px; }
.podval--kompakt .podval__setka { margin-top: 36px; }

/* (13) «Лицензия ФСБ»: синяя плашка, белый Geometria Medium, без оранжевой полоски (9,64:1) */
.dokument-tekst {
  background: var(--blue); color: #FFFFFF; border-left: 0;
  font-family: var(--font-display); font-weight: 500;
}
.dokument-tekst b { color: #FFFFFF; }

/* (14) «Обучение и статус» («Карьера»): заголовок слева, справа список — иконка и текст
   в строку, между строками линия 1px, как полоски «Об институте» */
@media (min-width: 1024px) {
  .razdel-dva { display: grid; grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
  .razdel-dva > .zagolovok-sekcii { margin: 0; }
}
.matrica.matrica--stroki { display: block; border: 0; gap: 0; }
.matrica.matrica--stroki > div {
  display: flex; align-items: center; gap: 16px; padding: 24px 0;
  border: 0; background: transparent;
}
.matrica.matrica--stroki > div:first-child { padding-top: 0; }
.matrica.matrica--stroki > div + div { border-top: var(--hair) solid var(--line); }
.matrica--stroki .plashka__ikonka { flex: none; width: 52px; height: 52px; margin: 0; object-fit: contain; }
.matrica--stroki p { margin: 0; }

/* (15) «Награды» — по две в ряд сеткой из линий 1px по контуру и между карточками,
   без теней; в карточке — изображение награды и подпись; телефон — по одной */
.nagrady { gap: 0; border-top: var(--hair) solid var(--line); border-left: var(--hair) solid var(--line); }
@media (min-width: 800px) { .nagrady { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nagrady > .nagrada {
  grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start;
  background: transparent; box-shadow: none; padding: clamp(20px, 2.4vw, 40px);
  border-right: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line);
}
.nagrady > .nagrada .nagrada__skan { display: flex; justify-content: center; background: var(--bg-alt); padding: clamp(16px, 2vw, 28px); }
.nagrady > .nagrada img { width: auto; max-width: 100%; height: clamp(260px, 22vw, 360px); object-fit: contain; }

/* --- 20. Обложка главной --------------------------------------------------------------
   Фон — снимок цеха под затемнением --blue-fon: слева плотнее,
   справа снимок угадывается. Поверх — сетка линий 1px (белые 15 %): вертикали на 55 % и 84 %
   ширины, горизонтали на 27 % и 84 % высоты обложки. Вставка стоит ровно в ячейке между ними —
   её края заданы теми же переменными, что и линии, поэтому совпадают до пикселя. Соседние
   ячейки пустые. Обложка — от верха экрана под прозрачной шапкой
   (верхняя горизонталь сетки проходит под шапкой), высота — полный экран, 640…960px;
   контент сдвинут на высоту шапки, чтобы H1 не уходил под меню. Ниже 1024px — текст и сразу
   под кнопками вставка 4:3 на ширину колонки, без линий сетки. */
.geroy {
  --x1: 55%; --x2: 84%; --y1: 27%; --y2: 84%;
  --geroy-liniya: rgba(255, 255, 255, .15);
  margin-top: -89px; padding-top: 0;            /* под прозрачной шапкой: 88px + её граница 1px */
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 0; display: block;
  background: var(--blue-fon); color: #FFFFFF;
}
/* Шмуцтитул внутренних страниц — тоже под прозрачной шапкой целиком (с её границей 1px):
   при −88px над шапкой оставалась белая строка в 1px */
.shapka-razdela { margin-top: -89px; }
/* На телефоне шапка ниже (76px + граница) — обложка и шмуцтитул уходят под неё ровно на её высоту */
@media (max-width: 767px) { .geroy, .shapka-razdela { margin-top: -77px; } }
/* При «уменьшить движение» шапка сразу сжатая (72/68px + граница), без фаз — сдвиг на её высоту,
   иначе верх обложки и шмуцтитула уходил за край экрана на 16/8px (находка стенда после №84).
   Без scroll-driven анимаций фазы ведёт скрипт, и наверху шапка полная — там сдвиг прежний. */
@media (prefers-reduced-motion: reduce) { .geroy, .shapka-razdela { margin-top: -73px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 767px) { .geroy, .shapka-razdela { margin-top: -69px; } }
.geroy__fon { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* Затемнение: ровный слой фирменного тёмно-синего, слева плотнее; снизу — подложка
   (там светлый пол цеха) */
.geroy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(23, 64, 118, .6) 0, rgba(23, 64, 118, 0) 180px),   /* под белым меню */
    linear-gradient(0deg, rgba(23, 64, 118, .55) 0%, rgba(23, 64, 118, 0) 32%),
    linear-gradient(90deg, rgba(23, 64, 118, .94) 0%, rgba(23, 64, 118, .90) 45%, rgba(23, 64, 118, .80) 70%, rgba(23, 64, 118, .74) 100%);
}
.geroy__liniya { position: absolute; z-index: 1; background: var(--geroy-liniya); pointer-events: none; }
.geroy__liniya--v1, .geroy__liniya--v2 { top: 0; bottom: 0; width: 1px; }
.geroy__liniya--v1 { left: var(--x1); }
.geroy__liniya--v2 { left: var(--x2); }
.geroy__liniya--g1, .geroy__liniya--g2 { left: 0; right: 0; height: 1px; }
.geroy__liniya--g1 { top: var(--y1); }
.geroy__liniya--g2 { top: var(--y2); }
.geroy__setka { position: relative; z-index: 2; display: block; padding-top: calc(88px + 40px); padding-bottom: 56px; }
.geroy__tekst > * { position: relative; }
.geroy h1 { font-size: clamp(32px, 3.4vw, 56px); margin-bottom: 24px; }
.geroy__lid { font-size: clamp(17px, 1.35vw, 21px); color: rgba(255, 255, 255, .88); margin-bottom: 36px; }
.geroy__vstavka img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
  .geroy { height: clamp(640px, 100svh, 960px); }
  .geroy__setka { position: static; height: 100%; display: flex; align-items: center; padding-top: 88px; padding-bottom: 0; }
  /* текст слева по вертикальному центру, правее первой вертикали не заходит */
  .geroy__tekst { position: relative; z-index: 2; width: calc(var(--x1) - var(--pole) - clamp(40px, 4vw, 72px)); max-width: 680px; }
  .geroy__vstavka {
    position: absolute; z-index: 0;
    left: var(--x1); right: calc(100% - var(--x2)); top: var(--y1); bottom: calc(100% - var(--y2));
  }
  /* окна кабины и нос в кадре при любой высоте ячейки */
  .geroy__vstavka img { object-position: 50% 22%; }
}
@media (max-width: 1023px) {
  /* без сетки и подписей: вставка сразу под кнопками */
  .geroy__liniya { display: none; }
  .geroy__vstavka { margin-top: 40px; aspect-ratio: 4 / 3; }
  .geroy__vstavka img { object-position: 50% 24%; }
}

/* Появление: текст въезжает мягко лесенкой, вставка проявляется, линии «прорисовываются» 0,6 с.
   Один раз при загрузке, только под html.anim (при reduced-motion статично). */
@keyframes geroy-v { from { transform: scaleY(0); } to { transform: none; } }
@keyframes geroy-g { from { transform: scaleX(0); } to { transform: none; } }
@keyframes geroy-vstavka { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
html.anim .geroy__setka > div > * { animation: none; }
html.anim .geroy__setka > .geroy__tekst > * { animation: poyav-snizu .6s var(--poyav-krivaya) both; }
html.anim .geroy__setka > .geroy__tekst > :nth-child(2) { animation-delay: .1s; }
html.anim .geroy__setka > .geroy__tekst > :nth-child(3) { animation-delay: .2s; }
html.anim .geroy__liniya--v1, html.anim .geroy__liniya--v2 { transform-origin: top; animation: geroy-v .6s var(--poyav-krivaya) .15s both; }
html.anim .geroy__liniya--g1, html.anim .geroy__liniya--g2 { transform-origin: left; animation: geroy-g .6s var(--poyav-krivaya) .15s both; }
html.anim .geroy__vstavka { animation: geroy-vstavka .7s var(--poyav-krivaya) .3s both; }

/* --- 21. Меню, этапы, увеличение картинок ------------------------------------------------ */
/* Обложка: название — меткой над H1 (в документе — «СИБПРОЕКТНИИАВИАПРОМ: Проектирование…») */
.geroy__metka {
  font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.3;
  letter-spacing: 0; color: rgba(255, 255, 255, .78); margin: 0 0 18px;
}
/* Блок цифр: «с 1951 года», «более 75 лет» — слово после числа тем же приглушённым кеглем */
.cifry__edinica--posle { margin-right: 0; }   /* отступ — сам неразрывный пробел перед словом */
/* Две карточки примеров на «Промышленном проектировании» — две колонки, без пустой третьей */
@media (min-width: 1000px) { .karty--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Меню шапки — по центру между логотипом и блоком «телефон + кнопка» */
@media (min-width: 1024px) {
  .shapka__nav { flex: 1 1 auto; min-width: 0; }
  .shapka__nav ul { justify-content: center; }
}
/* Увеличение при наведении — только у снимков и моделей объектов: модели, скриншоты
   и рендеры BIM, 3D-модели и фото стендов;
   картинка растёт внутри своей рамки. Сгенерированные и стилизованные иллюстрации (схемы услуг
   примеры объектов, фото «Об институте», фото стенда, обложка), документы, награды,
   письма, логотипы, иконки и карта — без эффекта. При «уменьшить движение» и на сенсорных экранах
   эффекта нет. Рамка 1px галереи переехала с картинки на обёртку — иначе росла бы с картинкой. */
.zum { display: block; overflow: hidden; }
.zum > img { display: block; }
.galereya .zum { border: var(--hair) solid var(--line); background: #FFFFFF; }
.galereya .zum > img { border: 0; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .zum > img { transition: transform .5s ease; }
  .zum:hover > img { transform: scale(1.05); }
}

/* --- 22. Блок цифр и лид «Об институте» ------------------------------------------------- */
/* Обложка без лида: метка, H1 и кнопки. Пункт «Сложность» блока «Наши преимущества» docx
   переехал в «Институт в цифрах»; отступ H1 → кнопки вырос, чтобы кнопки не липли к заголовку */
.geroy__tekst h1 { margin-bottom: clamp(32px, 3vw, 44px); }
/* Текстовая плитка «Ключевая компетенция…» — во всю ширину первой сетки цифр, под тремя числами:
   те же линии сетки, текст крупным начертанием заголовков, без числа */
.cifry__punkt--tekst { grid-column: 1 / -1; }
.cifry__utverzhdenie {
  margin: 0; max-width: 40em;
  font-family: var(--font-display); font-weight: 500; color: var(--blue);
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.35; letter-spacing: 0;
}
/* Лид «Об институте» — тем же начертанием и кеглем, что тексты полосок, без выделения */
.institut__prav > .institut__lid { font-weight: 300; font-size: 16.5px; line-height: 1.6; }

/* --- 23. «Испытательные стенды» ---------------------------------------------------------- */
/* По стенду — подпись и ряд кадров: чертёж → 3D-модель
   → фото (→ экраны). На компьютере кадры одной высоты: доля ширины = отношение сторон кадра (--a),
   ничего не обрезается. Планшет — по два, телефон — столбиком */
.stendy { display: grid; gap: clamp(48px, 5vw, 80px); }
.stend { margin: 0; }
.stend__podpis { margin: 0 0 20px; max-width: 46em; font-size: 18px; line-height: 1.5; color: var(--ink); }
.stend__ryad { display: grid; gap: 24px 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 600px) { .stend__ryad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .stend__ryad { display: flex; gap: 20px; align-items: flex-start; }
  .stend__kadr { flex: var(--a) 1 0; min-width: 0; }
}
.stend__kadr { margin: 0; }
.stend__kadr .zum { border: var(--hair) solid var(--line); background: #FFFFFF; }
.stend__kadr img { width: 100%; height: auto; }
.stend__kadr figcaption { margin-top: 8px; font-size: 14.5px; color: var(--muted); }