/* Start:/local/templates/enercom/css/styles.css?179217762973093*/
/**
 * /local/templates/enercom/css/styles.css
 * Дизайн-система сайта АО «Энерком-СА».
 *
 * Портирована из утверждённого прототипа (docs/tasks/templates/, сборка
 * assets/main-DUdNPLCK.css) без изменения правил — только форматирование,
 * чтобы файл можно было сопровождать. Любая правка стиля делается здесь,
 * прототип остаётся историческим референсом.
 *
 * Палитра и типографика — по брендбуку ЭНЕРКОМ-СА 2026.4.1:
 *   Тёмный морской синий #001338  — фон;
 *   Яркий лазурный      #00A3E0  — логознак;
 *   Электрический зелёный #9AE78F — акцент (используется ограниченно);
 *   Молочно-белый       #F3F3F3  — текст на тёмном.
 * Шрифты: Coolvetica Rg — заголовки, Lato (Light/Regular/Bold) — текст.
 * Шрифты лежат в ../assets/, поэтому файл подключается именно из css/.
 */

@font-face {
  font-family:Coolvetica Rg;
  src:url(/local/templates/enercom/css/../assets/Coolvetica-Rg.woff2) format("woff2"),url(/local/templates/enercom/css/../assets/Coolvetica-Rg.woff) format("woff"),url(/local/templates/enercom/css/../assets/Coolvetica-Rg.otf) format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Coolvetica Rg;
  src:url(/local/templates/enercom/css/../assets/Coolvetica-Rg.woff2) format("woff2"),url(/local/templates/enercom/css/../assets/Coolvetica-Rg.woff) format("woff"),url(/local/templates/enercom/css/../assets/Coolvetica-Rg.otf) format("opentype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Lato;
  src:url(/local/templates/enercom/css/../assets/Lato-Light.woff2) format("woff2"),url(/local/templates/enercom/css/../assets/Lato-Light.woff) format("woff"),url(/local/templates/enercom/css/../assets/Lato-Light.ttf) format("truetype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Lato;
  src:url(/local/templates/enercom/css/../assets/Lato-Regular.woff2) format("woff2"),url(/local/templates/enercom/css/../assets/Lato-Regular.woff) format("woff"),url(/local/templates/enercom/css/../assets/Lato-Regular.ttf) format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Lato;
  src:url(/local/templates/enercom/css/../assets/Lato-Bold.woff2) format("woff2"),url(/local/templates/enercom/css/../assets/Lato-Bold.woff) format("woff"),url(/local/templates/enercom/css/../assets/Lato-Bold.ttf) format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

html {
  scroll-behavior:smooth;
}

html,
body {
  margin:0;
  padding:0;
  background:#001338;
}

body {
  /* Без этого iOS Safari «подкручивает» кегль при повороте в ландшафт, и
     страница выглядит иначе, чем в Chrome. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-family:var(--f-body);
  font-weight:var(--fw-body);
  -webkit-font-smoothing:antialiased;
  color:var(--fg);
  text-rendering:optimizeSpeed;
}

* {
  box-sizing:border-box;
}

strong,
b {
  font-weight:700;
}

:root {
  --bg:#001338;
  --surface:#08204F;
  --dark:#000C24;
  --dark2:#08204F;
  --fg:#F3F3F3;
  --accent:#9AE78F;
  --green:#9AE78F;
  --on-dark:#F3F3F3;
  --logo:#00A3E0;
  --line:rgba(243,243,243,.14);
  --line2:rgba(243,243,243,.07);
  --dline:rgba(243,243,243,.14);
  --dline2:rgba(243,243,243,.07);
  --dmute:rgba(243,243,243,.75);
  --green-hover:#C7F5C2;
  --shadow:rgba(0,12,36,.4);
  --f-head: "Coolvetica Rg", system-ui, sans-serif;
  --f-body: "Lato", system-ui, sans-serif;
  --f-mono: "Lato", system-ui, sans-serif;
  --fw-body: 300;
  --fw-medium: 500;
  --fw-bold: 700;
  --fs-xs: 10px;
  --fs-s: 16px;
  --fs-m: 19px;
  --fs-l: 22px;
  --fs-xl: 28px;
  --fs-body: clamp(15px, 1.6vw, 16px);
  --ls-label: .16em;
  --ls-caption: .1em;
  --ls-data: .06em;
  --ink: rgba(243,243,243,.9);
  --inkd: rgba(243,243,243,.92);
  /* Запас под шапку (73px) и строку основных цифр (до 185px): на столько
     первый экран главной ниже окна, чтобы цифры были видны сразу.
     Правка Заказчика от 11.09.2026: строку цифр сузили, и запас уменьшен
     вслед за ней — первый экран стал выше, а над названием компании
     прибавилось фона (содержимое прижато к низу экрана). */
  --hero-reserve: 258px;
}

a {
  color:var(--accent);
  text-decoration:none;
}

a:hover {
  color:#82c1e0;
}

a:focus-visible {
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:1px;
}

button:focus-visible {
  outline:2px solid var(--green);
  outline-offset:2px;
}

input:focus-visible,
textarea:focus-visible {
  outline:none;
  border-bottom-color:var(--green);
}

input,
textarea {
  font:inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color:inherit;
  font-family:var(--f-head);
  text-rendering:optimizeLegibility;
}

::selection {
  background:#9ae78f;
  color:#001338;
}

.t-display {
  font-family:var(--f-head);
  font-weight:var(--fw-medium);
  line-height:1;
  /* Правка Заказчика (Проект 2.0, п. 1.2): при отрицательном трекинге
     Coolvetica сливалась в крупных заголовках. Разводим знаки. */
  letter-spacing:.005em;
  text-wrap:balance;
}

.t-h1 {
  font-family:var(--f-head);
  font-weight:var(--fw-medium);
  line-height:1.02;
  letter-spacing:.005em;
  text-wrap:balance;
}

.t-h2 {
  font-family:var(--f-head);
  font-weight:var(--fw-medium);
  font-size:clamp(28px,3vw,44px);
  line-height:1.08;
  letter-spacing:.01em;
  text-wrap:balance;
}

.t-h3 {
  font-family:var(--f-head);
  font-weight:var(--fw-medium);
  font-size:var(--fs-xl);
  line-height:1.15;
}

.t-body {
  font-weight:var(--fw-body);
  font-size:var(--fs-s);
  line-height:1.6;
}

.t-lead {
  font-weight:var(--fw-body);
  font-size:var(--fs-l);
  line-height:1.55;
}

/* Правка Заказчика («Что дорабатываем», Главная): полоса текста под
   анимацией сужена и вытянута в длину, чтобы первый экран стал ниже
   и строка с основными цифрами попадала в него целиком. */
.t-hero-lead {
  font-weight:var(--fw-body);
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.5;
  color:var(--inkd);
  max-width:520px;
  text-wrap:pretty;
}

/* Первый экран главной. Ниже 820px строка цифр перестраивается в колонку —
   уместить её в окно уже нельзя и незачем, поэтому ограничение снимается. */
.hero-screen {
  /* vh — запасной вариант для Safari до 15.4, он не знает svh и отбросил бы
     правило целиком, оставив первый экран без высоты. */
  min-height:86vh;
  min-height:86svh;
}

@media (min-width: 821px) {
  .hero-screen {
    min-height:calc(100vh - var(--hero-reserve));
    min-height:calc(100svh - var(--hero-reserve));
  }
}

/* Ноутбучные экраны (768–900px по высоте): одной только высоты секции мало —
   содержимое первого экрана само по себе выше окна. Поджимаем заголовок,
   лид и отступы. !important — потому что размеры заданы инлайном в разметке
   страницы, как во всём перенесённом прототипе. */
@media (min-width: 821px) and (max-height: 900px) {
  .hero-screen [data-pad] {
    padding-bottom:40px!important;
  }
  .hero-screen h1 {
    font-size:clamp(44px,9vw,120px)!important;
    margin-bottom:16px!important;
  }
  .hero-screen .t-hero-lead {
    font-size:clamp(15px,1.2vw,18px);
    max-width:470px;
    margin-bottom:24px!important;
  }
}

.t-eyebrow {
  font-family:var(--f-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}

.t-label {
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}

.t-mono {
  font-family:var(--f-mono);
  letter-spacing:var(--ls-data);
}

.t-mono-caption {
  font-family:var(--f-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-label);
}

.t-mono-data {
  font-family:var(--f-mono);
  letter-spacing:var(--ls-data);
}

@keyframes scanY {
  0% {
    transform:translateY(-8%);
    opacity:0;
  }
  12% {
    opacity:.9;
  }
  88% {
    opacity:.9;
  }
  to {
    transform:translateY(760%);
    opacity:0;
  }
}

@keyframes bar {
  0%,
  to {
    transform:scaleY(.18);
  }
  50% {
    transform:scaleY(1);
  }
}

@keyframes drift {
  0%,
  to {
    transform:translateZ(0) scale(1);
  }
  50% {
    transform:translate3d(-4%,3%,0) scale(1.12);
  }
}

@keyframes riseIn {
  0% {
    opacity:0;
    transform:translateY(18px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes blink {
  0%,
  to {
    opacity:1;
  }
  50% {
    opacity:.15;
  }
}

@keyframes orbit {
  0% {
    transform:rotate(0) translate(6px) rotate(0);
  }
  to {
    transform:rotate(360deg) translate(6px) rotate(-360deg);
  }
}

@keyframes clipReveal {
  0% {
    -webkit-clip-path:inset(100% 0 0 0);
    clip-path:inset(100% 0 0 0);
  }
  to {
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
}

@keyframes lineGrow {
  0% {
    transform:scaleX(0);
    transform-origin:left center;
  }
  to {
    transform:scaleX(1);
    transform-origin:left center;
  }
}

@keyframes fadeUp {
  0% {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes shimmer {
  0% {
    left:-100%;
  }
  to {
    left:200%;
  }
}

@keyframes kenBurns {
  0% {
    transform:scale(1) translate(0);
  }
  to {
    transform:scale(1.1) translate(-1%,-.5%);
  }
}

@keyframes bootReveal {
  0% {
    opacity:1;
  }
  to {
    opacity:0;
  }
}

@keyframes dataScanX {
  0% {
    transform:translate(-100%);
  }
  to {
    transform:translate(200%);
  }
}

@keyframes statusPulse {
  0%,
  to {
    opacity:.5;
    transform:scale(.9);
  }
  50% {
    opacity:1;
    transform:scale(1.1);
  }
}

@keyframes cursorBlink {
  0%,
  to {
    opacity:1;
  }
  50% {
    opacity:0;
  }
}

[data-cta-primary] {
  position:relative;
  overflow:hidden;
}

[data-cta-primary]:after {
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  pointer-events:none;
}

[data-cta-primary]:hover:after {
  animation:shimmer .6s ease-out;
}

button:active:not(.burger) {
  transform:scale(.97);
}


[data-card-btn] {
  position:relative;
  overflow:hidden;
  transition:background .26s,color .26s,transform .26s,box-shadow .26s;
}

/* Правка Заказчика (Проект 2.0, п. 1.9): при наведении на карточке
   проявляется картинка. Адрес задаётся в самой карточке свойством
   --hover-img, поэтому контент-менеджер меняет картинку, не трогая стили;
   карточка без этого свойства ведёт себя как раньше. */
[data-card-btn]:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:var(--hover-img,none);
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .32s ease;
  pointer-events:none;
  z-index:0;
}


/* Текст держим над картинкой: дочерние элементы карточки статичные,
   а псевдоэлемент рисуется поверх них. */
[data-card-btn] > * {
  position:relative;
  z-index:1;
}

/* Правка Заказчика («Что дорабатываем», Наши возможности): у плашки, за
   которой стоит отдельная страница, внизу появляется кнопка «Подробнее».
   Плашка без вложенной страницы кнопку не несёт — по ней и видно, куда
   можно перейти. */
[data-card-more] {
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  border:1px solid var(--line);
  font-family:var(--f-head);
  font-size:14px;
  color:var(--fg);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}


.hero-boot {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:var(--dark);
  z-index:10;
  pointer-events:none;
  animation:bootReveal 1.2s ease-in-out forwards;
}

.hero-scan-bar {
  position:absolute;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  z-index:2;
  animation:dataScanX 8s linear infinite;
}

.hero-scan-data {
  position:absolute;
  top:-12px;
  left:0;
  font-family:var(--f-mono);
  font-size:9px;
  color:var(--green);
  white-space:nowrap;
  opacity:.8;
  letter-spacing:.1em;
}

.hero-status-dot {
  width:4px;
  height:4px;
  background:var(--green);
  border-radius:50%;
  display:inline-block;
  margin-right:8px;
  animation:statusPulse 2s ease-in-out infinite;
}

.type-cursor {
  display:inline-block;
  width:2px;
  height:1em;
  background:var(--green);
  margin-left:2px;
  animation:cursorBlink .8s step-end infinite;
  vertical-align:middle;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation:none!important;
    transition-duration:.01ms!important;
    -webkit-clip-path:none!important;
    clip-path:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

.topnav {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:40;
  background:var(--dark);
  color:var(--on-dark);
  border-bottom:1px solid var(--dline2);
  transition:background .2s,box-shadow .2s;
}

.topnav.scrolled {
  background:#000c24f2;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 12px #00000040;
}

.topnav-inner {
  max-width:1640px;
  margin:0 auto;
  padding:0 clamp(16px,2.5vw,48px);
  height:72px;
  display:flex;
  align-items:center;
  gap:clamp(12px,1.8vw,44px);
  position:relative;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  transition:opacity .2s ease;
}

.brand:hover {
  opacity:.85;
}

.brand svg {
  height:28px;
  width:auto;
  display:block;
  fill:var(--logo);
}

/* Правка Заказчика («Что дорабатываем», Общее): логознак и название
   компании выводятся одним цветом — фирменным голубым --logo. */
.brand span {
  font-family:var(--f-head);
  font-size:clamp(13px,1vw,18px);
  letter-spacing:.05em;
  color:var(--logo);
  white-space:nowrap;
}

.mainnav {
  display:flex;
  align-items:center;
  gap:0;
  min-width:0;
  flex-shrink:1;
  overflow:hidden;
}

.navitem {
  display:flex;
  align-items:center;
}

.navlink {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--f-body);
  font-weight:400;
  font-size:15px;
  letter-spacing:.02em;
  padding:8px clamp(4px,.55vw,14px);
  white-space:nowrap;
  color:var(--on-dark);
  border-radius:2px;
  transition:color .2s ease,background .2s ease;
  position:relative;
}

.navlink:hover,
.navlink:focus-visible {
  color:var(--green);
  background:transparent;
  text-decoration:none;
}

.navlink.active {
  color:var(--on-dark);
  text-decoration-line:underline;
  text-decoration-color:var(--green);
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  text-decoration-skip-ink:none;
}

.navlink .caret {
  display:inline-block;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid currentColor;
  opacity:.4;
  margin-top:1px;
  transition:transform .2s ease,opacity .2s ease;
}

.navitem:hover .caret,
.navitem:focus-within .caret {
  transform:rotate(180deg);
  opacity:.7;
}

.megapanel {
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:var(--dark2);
  border-top:1px solid var(--dline2);
  box-shadow:0 16px 40px var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .18s ease,visibility 0s .18s,transform .18s ease;
  z-index:50;
}

.megapanel:before {
  content:"";
  position:absolute;
  top:-16px;
  left:0;
  right:0;
  height:16px;
}

.navitem:hover .megapanel,
.navitem:focus-within .megapanel {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .16s ease 40ms,visibility 0s,transform .16s ease 40ms;
}

.megapanel-inner {
  max-width:1640px;
  margin:0 auto;
  padding:36px 48px 40px;
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:56px;
  align-items:start;
}

.megapanel-intro {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:4px;
}

.megapanel-intro .eyebrow {
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:.24em;
  color:var(--dmute);
}

.megapanel-intro .label {
  font-family:var(--f-head);
  font-size:22px;
  line-height:1.2;
  color:var(--ink);
}

.megapanel-intro .text {
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.6;
  color:var(--dmute);
  text-wrap:pretty;
}

.megapanel-list {
  display:flex;
  flex-direction:column;
}

.megapanel-list a {
  text-align:left;
  width:100%;
  border-top:1px solid var(--dline2);
  padding:16px 16px 16px 0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 20px;
  align-items:center;
  gap:16px;
  transition:background .2s,padding-left .2s;
}

.megapanel-list a:hover {
  background:#f3f3f30a;
  padding-left:8px;
}

.megapanel-list .n {
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--dmute);
}

.megapanel-list .titles {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.megapanel-list .titles strong {
  font-weight:500;
  font-family:var(--f-head);
  font-size:17px;
  line-height:1.25;
  color:var(--ink);
}

.megapanel-list .titles span {
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.45;
  color:var(--dmute);
}

.megapanel-list .arrow {
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--dmute);
  justify-self:end;
}

.topnav-right {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(6px,.7vw,16px);
  border-left:1px solid var(--dline);
  padding-left:clamp(8px,1.2vw,24px);
  margin-left:clamp(4px,.5vw,8px);
  min-width:0;
}

.phone {
  display:flex;
  align-items:baseline;
  gap:6px;
  color:var(--on-dark);
  white-space:nowrap;
  text-decoration:none;
  transition:color .18s ease;
}

.phone:hover {
  color:var(--on-dark);
  text-decoration:none;
}

.phone .lbl {
  font-family:var(--f-mono);
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.35;
}

.phone .num {
  font-family:var(--f-mono);
  font-weight:400;
  font-size:14px;
  letter-spacing:.04em;
}

.phone--email .num {
  letter-spacing:.02em;
}

.phone-sep {
  width:1px;
  height:14px;
  background:var(--dline2);
}

.cta-careers {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:8px 16px;
  background:transparent;
  color:var(--green);
  border:1px solid var(--green);
  white-space:nowrap;
  transition:color .2s,background .2s,border-color .2s;
}

.cta-careers:hover {
  color:#001338;
  background:var(--green);
  border-color:var(--green);
  text-decoration:none;
}

.lang-switch {
  display:flex;
  align-items:center;
  gap:4px;
}

.lang-switch-link {
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--dmute);
  padding:2px 6px;
  text-transform:uppercase;
  transition:color .2s ease;
}

.lang-switch-link:hover {
  color:var(--on-dark);
  text-decoration:none;
}

.lang-switch-link.active {
  color:var(--on-dark);
}

.mobile-menu {
  display:none;
}

.burger {
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  border:1px solid var(--dline);
  background:none;
  cursor:pointer;
  padding:0;
  list-style:none;
}

.burger::-webkit-details-marker {
  display:none;
}

.burger::marker {
  display:none;
  content:"";
}

.burger:focus-visible {
  outline:2px solid var(--green);
  outline-offset:2px;
}

.burger:before,
.burger:after,
.burger span {
  content:"";
  display:block;
  width:18px;
  height:1.5px;
  background:var(--on-dark);
  transition:transform .2s ease,opacity .2s ease;
}

.burger span {
  width:14px;
}

.mobile-menu[open] .burger:before {
  transform:translateY(6.5px) rotate(45deg);
}

.mobile-menu[open] .burger span {
  opacity:0;
}

.mobile-menu[open] .burger:after {
  transform:translateY(-6.5px) rotate(-45deg);
}

.mobilenav {
  display:none;
}

.mobile-menu[open] .mobilenav {
  display:flex;
  position:absolute;
  left:0;
  right:0;
  top:100%;
  border-top:1px solid var(--dline2);
  background:var(--dark);
  padding:8px 22px 22px;
  flex-direction:column;
  max-height:74vh;
  overflow:auto;
  animation:riseIn .2s ease-out both;
}

.mobilenav a {
  text-align:left;
  border-bottom:1px solid var(--dline2);
  padding:15px 4px;
}

.mobilenav a.top {
  padding-left:4px;
  font-family:var(--f-head);
  font-size:18px;
  color:var(--on-dark);
}

.mobilenav a.sub {
  padding-left:18px;
  font-family:var(--f-body);
  font-size:15px;
  color:var(--dmute);
}

.mobilenav .tel {
  padding:18px 4px 4px;
  font-family:var(--f-mono);
  font-size:15px;
  color:var(--on-dark);
  border-bottom:0;
}

a.skip-link {
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:10px 20px;
  background:var(--green);
  color:#001338;
  font-family:var(--f-head);
  font-weight:500;
  font-size:14px;
  letter-spacing:.02em;
  transition:left .2s;
}

a.skip-link:focus {
  left:48px;
}

.lab-feature-row {
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:32px;
  align-items:start;
  padding:36px 0;
  border-top:1px solid var(--line);
}

.lab-feature-row-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  align-items:start;
}

.lab-photo {
  position:relative;
  overflow:hidden;
  background:var(--surface);
}

/* Правка Заказчика («Что дорабатываем», Контакты): точка адреса на карте
   и лёгкое затемнение, чтобы карта не выбивалась из тёмного макета.
   Метку рисует сам виджет параметром pt в адресе; фильтр вешаем на iframe —
   виджет сторонний, внутрь не дотянуться. */
.contacts-map {
  position:relative;
  height:380px;
  border:1px solid var(--line);
  overflow:hidden;
}

.contacts-map iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
  filter:grayscale(.35) brightness(.72) contrast(1.08);
}

.lab-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}


/* ---------- Список документов ----------
   Раздел «Документы и сертификаты»: категория — плашка со ссылкой на свой
   блок ниже по странице, в блоке строки документов. Отдельных страниц под
   категории не заводим: файлов в каждой единицы, а лишние адреса пришлось бы
   потом переадресовывать.

   Строка живёт во включаемой области, поэтому оформление — классами, а не
   инлайном: контент-менеджер добавляет документ копированием строки.

   Строка без файла (`is-placeholder`) показывает состав раздела, пока
   Заказчик не прислал PDF: ссылки нет, вместо размера — пометка. */
.doc-list {
  border-top:1px solid var(--line);
}

.doc-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px 32px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}

.doc-row__name {
  font-family:var(--f-head);
  font-weight:var(--fw-medium);
  font-size:19px;
  line-height:1.25;
  margin:0;
}

.doc-row__meta {
  display:block;
  margin-top:6px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--dmute);
}

.doc-row__action {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  border:1px solid var(--line);
  font-family:var(--f-head);
  font-size:14px;
  color:var(--fg);
  white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}


.doc-row.is-placeholder .doc-row__name {
  color:var(--dmute);
}

.doc-row.is-placeholder .doc-row__action {
  opacity:.45;
}

@media (max-width: 640px) {
  .doc-row {
    grid-template-columns:minmax(0,1fr);
  }
  .doc-row__action {
    justify-self:start;
  }
}

/* ---------- Таблица характеристик ----------
   Первая таблица в контенте сайта: «Основные характеристики барокамеры»
   (текст Заказчика от 09.10.2026). Строится на тех же линиях и шрифтах,
   что список документов, — отдельной палитры не заводим.

   Настоящий <table>, а не сетка из div: так строку читает скринридер, а
   контент-менеджер правит её в визуальном редакторе как таблицу. */
.spec-table {
  width:100%;
  border-collapse:collapse;
  border-top:1px solid var(--line);
}

.spec-table th,
.spec-table td {
  text-align:left;
  vertical-align:top;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}

.spec-table th {
  width:34%;
  padding-right:32px;
  font-family:var(--f-head);
  font-weight:var(--fw-medium);
  font-size:var(--fs-s);
  /* Тот же интерлиньяж, что у значения: иначе базовые линии в строке
     расходятся на пару пикселей и таблица выглядит «дрожащей». */
  line-height:1.5;
  color:var(--fg);
}

.spec-table td {
  font-family:var(--f-body);
  font-weight:var(--fw-body);
  font-size:var(--fs-s);
  line-height:1.5;
  color:var(--ink);
}

/* На узком экране пара «параметр — значение» встаёт в две строки: при 34%
   на колонку параметра значение ужималось бы до двух-трёх слов в строке. */
@media (max-width: 640px) {
  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display:block;
    width:auto;
  }
  .spec-table tr {
    border-bottom:1px solid var(--line);
  }
  .spec-table th {
    padding:16px 0 2px;
    border-bottom:0;
  }
  .spec-table td {
    padding:0 0 16px;
    border-bottom:0;
  }
}

/* ---------- Места под материалы Заказчика ----------
   Снимки и тексты, которые Заказчик ещё не прислал (правки от 01.10.2026).
   Заглушку легко найти перед запуском: ячейки галерей помечены классом
   `is-placeholder`, временный текст — атрибутом `data-placeholder-text`.

   Ячейка галереи: заглушка Битрикса — иконка 160px, растягивать её нельзя,
   поэтому здесь object-fit не cover, а contain. */
.lab-photo.is-placeholder img {
  object-fit:contain;
  padding:24px;
}

.lab-photo.is-placeholder:hover img {
  transform:none;
}

@media (max-width: 1024px) {
  .lab-photo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width: 780px) {
  .lab-feature-row {
    grid-template-columns:36px minmax(0,1fr);
    gap:16px;
    padding:26px 0;
  }
  .lab-feature-row-inner {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  .lab-photo-grid {
    grid-auto-rows:140px!important;
  }
}

footer {
  background:var(--dark2);
  color:var(--on-dark);
  border-top:1px solid var(--dline2);
}

.footer-grid {
  max-width:1640px;
  margin:0 auto;
  padding:56px 48px 32px;
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:40px;
}

.footer-col {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer-col.links {
  gap:10px;
}

.footer-logo {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  transition:opacity .18s ease;
}

.footer-logo:hover {
  opacity:.85;
}

.footer-logo svg {
  height:22px;
  width:auto;
  display:block;
  fill:var(--logo);
}

.footer-company {
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--logo);
  line-height:1;
}

.footer-contacts {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

.footer-contacts a {
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--dmute);
  text-decoration:none;
  transition:color .18s ease;
}

.footer-contacts a:hover {
  color:var(--green);
}

.footer-label {
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dmute);
  opacity:.55;
  display:block;
  line-height:1;
  margin-bottom:2px;
}

.footer-col.links h3.heading {
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 4px;
}

.footer-col.links a {
  font-family:var(--f-body);
  font-size:14px;
  color:var(--dmute);
  text-decoration:none;
  transition:color .18s ease;
  padding:2px 0;
}

.footer-col.links a:hover {
  color:var(--on-dark);
}

.footer-bottom {
  max-width:1640px;
  margin:0 auto;
  padding:20px 48px 40px;
  border-top:1px solid var(--dline2);
}

.footer-bottom span {
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--dmute);
  opacity:.55;
}

@media (max-width: 1640px) {
  .phone,
  .phone-sep {
    display:none!important;
  }
  .brand span {
    display:none;
  }
}

@media (max-width: 1336px) {
  .mainnav {
    display:none!important;
  }
  .topnav-right {
    border-left:none!important;
    padding-left:0!important;
  }
  .lang-switch {
    display:none!important;
  }
  .mobile-menu {
    display:block!important;
  }
  .burger {
    display:flex!important;
  }
  .topnav-inner {
    padding-left:20px!important;
    padding-right:20px!important;
    gap:16px!important;
  }
  [data-heroB] {
    grid-template-columns:minmax(0,1fr)!important;
  }
  [data-heroB] [data-viz] {
    min-height:300px!important;
  }
  [data-cards] {
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  }
}

@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .footer-brand {
    grid-column:1 / -1;
  }
}

@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns:1fr;
    padding:40px 22px 24px;
    gap:32px;
  }
  .footer-bottom {
    padding-left:22px;
    padding-right:22px;
  }
  [data-pad] {
    padding-left:22px!important;
    padding-right:22px!important;
  }
  [data-nums] {
    grid-template-columns:minmax(0,1fr)!important;
  }
  [data-nums]>div {
    border-right:0!important;
    border-bottom:1px solid var(--line2);
    padding-left:0!important;
    padding-right:0!important;
  }
  [data-cards],
  [data-split] {
    grid-template-columns:minmax(0,1fr)!important;
  }
  [data-cta-row] {
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .topnav-inner {
    padding-left:20px!important;
    padding-right:20px!important;
    gap:16px!important;
  }
  /* Правка Заказчика: на телефоне рядом со знаком выводим и название.
     Правило max-width:1640px прячет его ради тесной строки меню, но
     здесь меню уже свёрнуто в бургер и место есть: при 320px всё
     помещается без горизонтальной прокрутки. */
  .brand span {
    display:inline;
  }
  .topnav-right {
    gap:12px!important;
  }
  .cta-careers {
    padding:8px 14px!important;
    font-size:9px!important;
  }
  [data-pad] {
    padding-bottom:48px!important;
  }
}

/* ============================================================================
   Режим правки (быстрое редактирование)

   В режиме правки Битрикс оборачивает вывод каждого компонента и включаемой
   области в <div id="bx_incl_area_N">. Обёртка становится единственным
   ребёнком flex/grid-контейнера, и раскладка схлопывается: меню выстраивается
   в столбец, колонки подвала слипаются в одну.

   Важно: обёртку нельзя просто убрать через display: contents — вместе с
   боксом пропадает рамка и карандаш правки при наведении, то есть теряется
   само быстрое редактирование. Поэтому обёртка остаётся боксом и повторяет
   раскладку родителя. На боевом сайте этих обёрток нет, и правила ниже
   ни к чему не применяются.
   ========================================================================== */

/* Меню в шапке: обёртка повторяет флекс .mainnav */
.mainnav > [id^="bx_incl_area"] {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Контакты в шапке */
.topnav-right > [id^="bx_incl_area"] {
  display: flex;
  align-items: center;
  gap: clamp(6px, .7vw, 16px);
  min-width: 0;
}

/* Мобильное меню: колонка */
.mobilenav > [id^="bx_incl_area"] {
  display: flex;
  flex-direction: column;
}

/* Колонки разделов в подвале: обёртка занимает колонки 2…4 родительской
   сетки и передаёт их детям через subgrid — так каждая колонка остаётся
   на своём месте, а рамка правки рисуется по всей группе. */
.footer-grid > [id^="bx_incl_area"] {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: 40px;
}

@supports not (grid-template-columns: subgrid) {
  .footer-grid > [id^="bx_incl_area"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .footer-grid > [id^="bx_incl_area"] { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .footer-grid > [id^="bx_incl_area"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* Рамка правки не должна перекрывать «прилипающую» шапку и мегапанели */
.topnav [id^="bx_incl_area"] { position: static; }

/* ============================================================================
   Поиск по сайту (компонент Аспро `search.page/search`)

   Компонент даёт разметку, но рассчитан на общий CSS решения, который мы не
   подключаем. Описываем его классы в токенах дизайн-системы, чтобы выдача
   читалась как часть сайта: поле ввода — как в формах, результат — как
   карточка-строка с надзаголовком раздела, совпадения подсвечены акцентом.
   ========================================================================== */

.search-page {
  max-width: 900px;
}

/* ---------- Поле ввода ---------- */

.search-page .searchinput {
  margin-bottom: 8px;
}

.search-page .searchinput form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--line);
  transition: border-color .2s;
}

.search-page .searchinput form:focus-within {
  border-bottom-color: var(--green);
}

.search-page .searchinput iframe {
  display: none;
}

.search-page input[type="text"],
.search-page .search-suggest {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  padding: 18px 2px;
  font-family: var(--f-body);
  font-weight: var(--fw-body);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.3;
  color: var(--fg);
  outline: none;
}

.search-page input::placeholder {
  color: rgba(243, 243, 243, .35);
}

.search-page .btn-search {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  border: 0;
  background: none;
  color: var(--dmute);
  cursor: pointer;
  transition: color .2s;
}

.search-page .btn-search:hover {
  color: var(--green);
}

.search-page .btn-search svg {
  width: 20px;
  height: 20px;
}

.search-page .btn-search svg path {
  fill: currentColor;
}

/* ---------- Результаты ----------
   Компонент разделяет результаты тегами <hr>, а перед первым ставит <br>.
   Прятать их и рисовать границу на самом результате нельзя: у результата нет
   общей обёртки. Поэтому <hr> и превращается в разделитель. */

.search-page br {
  display: none;
}

.search-page hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line2);
}

.search-page hr + a {
  display: block;
  margin-top: 30px;
  font-family: var(--f-head);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  color: var(--fg);
  text-wrap: balance;
}

.search-page hr + a:hover {
  color: var(--green);
  text-decoration: none;
}

/* Раздел, в котором найдена страница — надзаголовком над сниппетом */
.search-page ul.path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.search-page ul.path li::after {
  content: "/";
  margin-left: 8px;
  color: var(--dmute);
  opacity: .5;
}

.search-page ul.path li:last-child::after {
  content: none;
}

.search-page ul.path a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.search-page ul.path a:hover {
  color: var(--green);
}

.search-page .text {
  font-weight: var(--fw-body);
  font-size: var(--fs-s);
  line-height: 1.65;
  color: var(--ink);
  margin: 12px 0 30px;
  text-wrap: pretty;
}

/* Подсветка совпадений */
.search-page b {
  color: var(--green);
  font-weight: 700;
}

/* ---------- Сортировка и пустая выдача ---------- */

.search-page .search-sort,
.search-page > p:last-of-type {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dmute);
  margin-top: 30px;
}

.search-page .search-sort a {
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
}

/* ============================================================================
   Чертежи барокамеры (страница «Барокамера», блок «Конструкция стенда»)

   Это не фотографии, а виды 3D-модели на белом фоне, поэтому приём галереи
   лаборатории здесь не годится: белые прямоугольники на тёмной странице
   выглядели бы браком вёрстки. Показываем их как листы чертежа — на
   молочно-белой плашке из палитры бренда, с подписью вида.

   Картинку не кадрируем (object-fit: contain): у чертежа нельзя срезать края.
   ========================================================================== */

.scheme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Вид сверху горизонтальный — отдаём ему всю ширину и больше высоты,
   иначе в широкой плашке чертёж тонет в пустом поле. */
.scheme-grid > figure:last-child {
  grid-column: 1 / -1;
}

.scheme-grid > figure:last-child img {
  height: 520px;
}

/* Правка Заказчика («Что дорабатываем», Барокамера): плашка со снимками
   приведена к фону сайта. Сами снимки — рендеры на белом фоне, поэтому
   белый лист под изображением остаётся: без него на тёмной карточке
   получился бы белый прямоугольник вразрез с макетом. Когда Заказчик
   пришлёт изображения с прозрачным фоном, белый лист можно будет убрать. */
.scheme-grid figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: zoom-in;
}

.scheme-grid img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: contain;
  background: #fff;
  padding: 22px;
  box-sizing: border-box;
}

.scheme-grid figcaption {
  padding: 14px 22px 18px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: var(--ls-data);
  text-transform: uppercase;
  color: var(--ink);
  opacity: .8;
}

@media (max-width: 820px) {
  .scheme-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .scheme-grid img {
    height: 300px;
  }
}
/* Барокамера в фотографиях — мобильная лента */
@media (max-width: 780px) {
  .lab-photo-grid.lab-photo-grid--stack {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 8px;
    margin-left: -22px;   /* выходим за боковой отступ контейнера */
    margin-right: -22px;  /* → фото на всю ширину экрана */
  }
  .lab-photo-grid--stack > .lab-photo {
    grid-column: auto !important;  /* сбрасываем inline span 2 у второго фото */
    grid-row: auto !important;
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================================
   Открытые вакансии на странице «Карьера»

   Разметка — наш шаблон `news.list/enercom_vacancies`, повторяющий
   утверждённый прототип: строка на вакансию, слева название и подпись,
   справа кнопка «Откликнуться».

   В прототипе разделители между строками давал фон контейнера, просвечивающий
   в gap. Здесь линию рисует сама строка — тем же приёмом, что у [data-cards]:
   вакансии заводит Заказчик, их число заранее не известно, и лишний фон под
   пустым местом не появится.
   ========================================================================== */

.vacancies {
  display: flex;
  flex-direction: column;
}

.vacancies__item {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 28px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

/* Правка Заказчика от 06.10.2026: «на кнопку наводишь — она зеленеет, можем
   и на вакансиях это повторить». Повторяем приём плашек разделов: строка
   подсвечивается, кнопка заливается акцентом.

   Подсветку даёт псевдоэлемент поверх фона, а не смена background — так же,
   как у [data-card-btn]: цвет берётся из токена, отдельный оттенок заводить
   не нужно. Карточки при наведении ещё и приподнимаются, здесь этого нет:
   строки идут сплошным списком с разделителями, и всплывающая строка рвала
   бы его. */
.vacancies__item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  opacity: 0;
  transition: opacity .26s ease;
  pointer-events: none;
}


/* Содержимое держим над подсветкой. */
.vacancies__item > * {
  position: relative;
  z-index: 1;
}

/* Последняя строка нижнюю линию не рисует: в прототипе контур списка
   не замкнут, разделители только между строками. */
.vacancies__item:last-child {
  border-bottom: 0;
}

.vacancies__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vacancies__name {
  font-family: var(--f-head);
  font-size: 23px;
  color: var(--fg);
}

/* Подпись приводим к верхнему регистру здесь, а не в данных: контент-менеджер
   пишет «Промышленное ПО» как обычно, а выглядит это как в прототипе. */
.vacancies__meta {
  font-family: var(--f-mono);
  font-size: 12px;
  opacity: .7;
  text-transform: uppercase;
}

.vacancies__cta {
  border: 1px solid currentColor;
  color: inherit;
  font-family: var(--f-head);
  font-size: 14px;
  padding: 12px 22px;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* Зеленеет и при наведении на строку целиком, и при наведении на саму
   кнопку: цель у посетителя одна, а попасть он может в любое место строки.
   Цвета те же, что у кнопки «Подробнее» на плашках разделов. */

/* На узком экране строка переносится — кнопка встаёт под подписью, как в
   прототипе. Отдельных правил для неё не нужно, только отступы поменьше. */
@media (max-width: 640px) {
  .vacancies__item {
    padding: 24px 22px;
    align-items: flex-start;
  }
}

/* ============================================================================
   Переключатель языковых версий (компонент Аспро `main.site.selector`)

   Компонент даёт разметку и поведение — иконку глобуса, выпадающий список,
   подпись из кода языка. Его собственные стили рассчитаны на общий CSS
   решения, который мы не подключаем, поэтому описываем нужные классы в
   токенах нашей дизайн-системы.
   ========================================================================== */

.lang-switch {
  flex: 0 0 auto;
}

.lang-switch .sites {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-switch .sites__select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--dmute);
  transition: color .2s;
}

.lang-switch .sites:hover .sites__select {
  color: var(--on-dark);
}

.lang-switch .sites__select svg,
.lang-switch .sites__select i svg {
  width: 15px;
  height: 15px;
}

.lang-switch .sites__select svg path {
  fill: currentColor;
}

.lang-switch .sites__current {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lang-switch .more-arrow {
  display: none;
}

/* Выпадающий список версий */
.lang-switch .sites .sites__dropdown {
  position: absolute;
  top: 100%;
  /* left: auto обязателен: собственный style.css компонента Аспро
     подключается после наших стилей и задаёт левую привязку — без сброса
     список уезжает за правый край и появляется горизонтальная прокрутка. */
  left: auto;
  right: 0;
  min-width: 96px;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s ease, visibility 0s .18s, transform .18s ease;
  z-index: 60;
}

/* :hover здесь только для мыши — он тоже залипает на тач-устройствах и
   оставил бы список версий раскрытым поверх страницы. Касанию достаточно
   :focus-within: тап открывает, тап мимо закрывает. */
@media (hover: hover) and (pointer: fine) {
  .lang-switch .sites:hover .sites__dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .16s ease, visibility 0s, transform .16s ease;
  }
}

.lang-switch .sites:focus-within .sites__dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .16s ease, visibility 0s, transform .16s ease;
}

.lang-switch .sites__dropdown .dropdown {
  display: flex;
  flex-direction: column;
  background: var(--dark2);
  border: 1px solid var(--dline2);
  box-shadow: 0 16px 40px var(--shadow);
}

.lang-switch .sites__option {
  display: block;
  padding: 10px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dmute);
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.lang-switch a.sites__option:hover {
  background: rgba(243, 243, 243, .06);
  color: var(--green);
  text-decoration: none;
}

.lang-switch .sites__option--current {
  color: var(--on-dark);
}

/* В мобильном меню переключатель — свой шаблон (заголовок и два кода языка),
   потому что разметку решения оформляет его общий CSS, которого у нас нет.
   Прежние правила здесь были написаны под классы `sites__*` из шаблона для
   шапки — мобильный шаблон их не отдаёт, и панель оставалась без стилей. */
.mobilenav-lang {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--dline2);
}

.mobilenav-lang__title {
  font-family: var(--f-head);
  font-size: 18px;
  color: var(--on-dark);
}

.mobilenav-lang__options {
  display: flex;
  gap: 8px;
}

/* Отступы и подчёркивание задаёт общее правило `.mobilenav a` — коду языка
   они не нужны, он выводится отдельной плашкой. */
.mobilenav-lang__option {
  padding: 8px 18px;
  border: 1px solid var(--dline2);
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: var(--ls-data);
  color: var(--dmute);
}

.mobilenav-lang__option.is-current {
  color: var(--on-dark);
  border-color: var(--green);
}

/* ============================================================================
   Поиск в шапке

   Только иконка: в строке уже телефон, почта и переключатель языка, а подпись
   словом переполняла бы её на средних экранах и давала горизонтальную
   прокрутку. Смысл иконки очевиден, для скринридеров есть aria-label и
   визуально скрытая подпись.
   ========================================================================== */

.header-search {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--dmute);
  transition: color .2s;
}

.header-search:hover {
  color: var(--green);
  text-decoration: none;
}

.header-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.header-search svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Переключатель языка не растягивается по высоте строки */
.lang-switch {
  flex: 0 0 auto;
}

/* ============================================================================
   Колонки с цифрами и нумерованными тезисами

   Отступы и разделители заданы здесь, а не в файлах элементов: раньше первый
   и последний элемент несли особые значения прямо в разметке, и добавление
   или удаление элемента через админку ломало края блока.

   Селектор нацелен на прямого потомка сетки. В режиме правки им становится
   обёртка включаемой области, поэтому правила работают одинаково и на
   боевом сайте, и при редактировании.
   ========================================================================== */

/* Правка Заказчика от 11.09.2026: «нижнее поле с цифрами надо сделать уже». */
[data-nums="stats"] > * {
  padding: 34px 40px;
  border-right: 1px solid var(--line2);
}

[data-nums="steps"] > * {
  padding: 48px 32px;
  border-right: 1px solid var(--line2);
}

[data-nums] > *:first-child {
  padding-left: 0;
}

[data-nums] > *:last-child {
  padding-right: 0;
  border-right: 0;
}

@media (max-width: 820px) {
  [data-nums] > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line2);
  }

  [data-nums] > *:last-child {
    border-bottom: 0;
  }
}

/* ============================================================================
   Сетки-таблицы: разделители рисует ячейка, а не фон контейнера

   Раньше 1px-линии между карточками давал фон самой сетки, просвечивающий
   в gap. Число карточек задаёт контент-менеджер, число колонок меняется на
   брейкпоинтах — и как только карточек не хватало на полный ряд, пустые
   ячейки заливались этим фоном: под блоком появлялся светлый прямоугольник
   во всю недостающую ячейку. Ровно та же беда, что была у [data-nums].

   Теперь линию рисует сама ячейка своей рамкой, а внешний контур замыкает
   сетка: пустая ячейка не рисует ничего и остаётся прозрачной при любом
   числе карточек и любой ширине экрана.

   Цвет линии приходит из разметки свойством --grid-line: блоки на светлой
   и тёмной подложке разводят линию по --line и --dline2, механика общая.
   Так же в блоке задаётся --hover-img у [data-card-btn].
   ========================================================================== */

/* Сетка без --grid-line линий не рисует: [data-cards] используется и для
   карточек с обычным отступом (документация решений, gap: 14px). */
[data-cards] {
  --grid-line: transparent;
}

[data-split] {
  --grid-line: var(--line);
  /* Прежний приём гасим здесь, а не только в разметке: включаемые области
     деплой лишь добавляет, и правит их контент-менеджер в админке, поэтому
     старый инлайн `gap: 1px; background: var(--line)` переживает релиз —
     без этого к рамкам добавился бы фон и линии удвоились. */
  gap: 0 !important;
  background: none !important;
}

[data-cards],
[data-split] {
  border-top: 1px solid var(--grid-line);
  border-left: 1px solid var(--grid-line);
}

/* Рамку ячейки задаём целиком и с !important: карточка — это <a> со сбросом
   `border: 0` в инлайне, а файлы элементов лежат во включаемых областях,
   которые деплой не переписывает. Верх и левый край гасим, чтобы карточка
   с собственной рамкой (такие пишут в админке) не удвоила линию соседа. */
[data-cards] > *,
[data-split] > * {
  border: 0 !important;
  border-right: 1px solid var(--grid-line) !important;
  border-bottom: 1px solid var(--grid-line) !important;
}

/* ============================================================================
   Просмотрщик фотографий и видео (js/media-viewer.js)
   ========================================================================== */

.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Скрытое состояние задаётся атрибутом hidden, но браузерное правило
   [hidden] { display: none } слабее любого авторского: display: flex выше
   перебивал его, и просмотрщик висел поверх страницы с самого открытия.
   Поэтому скрываем явно. */
.media-viewer[hidden] {
  display: none;
}

.media-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 12, 36, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.media-viewer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(1200px, 92vw);
  max-height: 90vh;
  background: var(--dark);
}

.media-viewer__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
  background: var(--surface);
}

.media-viewer__stage img,
.media-viewer__stage video {
  max-width: 100%;
  max-height: 78vh;
  display: block;
  object-fit: contain;
}

/* В полноэкранном режиме панель занимает весь экран */
.media-viewer__panel:fullscreen {
  width: 100vw;
  max-height: 100vh;
  padding: 0;
  justify-content: center;
}

.media-viewer__panel:fullscreen .media-viewer__stage img,
.media-viewer__panel:fullscreen .media-viewer__stage video {
  max-height: 92vh;
}

.media-viewer__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 4px 4px;
}

.media-viewer__counter {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--green);
}

.media-viewer__caption {
  flex: 1 1 auto;
  font-weight: var(--fw-body);
  font-size: var(--fs-s);
  color: var(--ink);
}

.media-viewer__btn {
  border: 1px solid var(--dline);
  background: none;
  color: var(--on-dark);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.media-viewer__btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: #001338;
}

.media-viewer__nav,
.media-viewer__close {
  position: absolute;
  border: 1px solid var(--dline);
  background: rgba(0, 19, 56, .6);
  color: var(--on-dark);
  font-family: var(--f-mono);
  cursor: pointer;
  transition: background .2s, color .2s;
}

/* Центрируем по вертикали автоматическими полями, а не translateY(-50%).
   Общее правило нажатия (button:active — transform: scale(.97)) заменяет
   значение transform целиком, и кнопка, центрированная трансформом,
   при нажатии проваливалась вниз на половину своей высоты. */
.media-viewer__nav {
  top: 0;
  bottom: 0;
  margin-block: auto;
  width: 46px;
  height: 46px;
  font-size: 18px;
}

.media-viewer__nav--prev { left: 2vw; }
.media-viewer__nav--next { right: 2vw; }

.media-viewer__close {
  top: 2vh;
  right: 2vw;
  width: 42px;
  height: 42px;
  font-size: 22px;
  line-height: 1;
}

.media-viewer__nav:hover,
.media-viewer__close:hover {
  background: var(--green);
  border-color: var(--green);
  color: #001338;
}

/* Подсказка, что медиа кликабельно */
.lab-photo,
[data-video-strip] > div {
  transition: outline-color .2s;
  outline: 1px solid transparent;
}

.lab-photo:hover,
[data-video-strip] > div:hover {
  outline-color: var(--green);
}

@media (max-width: 780px) {
  .media-viewer__nav { display: none; }
  .media-viewer__panel { width: 96vw; }
}

/* ---------- Текстовая статья ----------
   Длинные тексты страниц («О нас» и подобные): колонка ограниченной ширины,
   чтобы строка оставалась читаемой, и единые отступы между абзацами.
   Класс, а не инлайновые стили: абзацев много, и контент-менеджер, добавляя
   новый в визуальном редакторе, получает то же оформление без правки стилей. */
.prose {
  /* Правка Заказчика от 15.09.2026: «текст как будто не отсюда, отличается
     от общей канвы». Так и было — статья единственная на сайте шла своим
     кеглем (--fs-m, 19px, больше нигде не используется) и своим интерлиньяжем.
     Возвращаем её на общую шкалу: те же 16px Lato Light 1.6, что у текста
     в плашках и блоках. */

  /* Правка Заказчика от 17.09.2026: текст «О нас» должен идти во всю ширину
     колонки. Здесь стояла мера в 88 знаков — типографское ограничение длины
     строки; теперь строку задаёт сам контейнер (1640px минус поля, то есть
     до ~1540px, около 190 знаков при 16px).

     Компромисс осознанный и на стороне заказчика: такая строка читается
     тяжелее — на возврате к началу следующей глаз теряет место. Если это
     станет заметно, средний вариант — вернуть меру, но широкую (110–120ch):
     текст выглядит полосой во всю колонку, а строка остаётся удержимой. */
  /* Правка Заказчика от 06.10.2026: «межстрочный чуть меньше, шрифт чуть
     больше, выровнять по ширине». Кегль задан числом, а не токеном: между
     --fs-s (16px) и --fs-m (19px) ступени нет, а просили промежуточную.

     Выключка по формату требует переносов — без них в русском тексте
     расползаются межсловные пробелы. lang проставляет Битрикс по языку
     сайта, поэтому словарь переносов берётся правильный. */
  max-width:none;
  font-weight:var(--fw-body);
  font-size:17px;
  line-height:1.5;
  text-align:justify;
  -webkit-hyphens:auto;
  hyphens:auto;
  color:var(--ink);
}

/* Пауза между абзацами — чуть меньше строки, чтобы абзацы читались
   раздельно, но не рассыпались. Пересчитана вместе с кеглем. */
.prose p {
  margin:0 0 22px;
  text-wrap:pretty;
}

/* Маркеры списка — та же зелёная черта, что стоит над заголовками разделов,
   вместо браузерных точек: список перестаёт выпадать из оформления сайта.

   Замечание от 07.10.2026: «маркеры списка легли поверх картинки». Строки
   списка обтекали плавающий снимок и уходили вправо, а сам блок списка
   оставался во всю ширину — чёрточки рисовались у левого края, прямо на
   снимке. overflow: hidden делает из списка отдельный контекст форматирования:
   он целиком встаёт рядом со снимком, а не затекает под него. */
.prose ul {
  margin:0 0 22px;
  padding-left:0;
  list-style:none;
  overflow:hidden;
}

.prose li {
  position:relative;
  margin:0 0 12px;
  padding-left:28px;
}

.prose li:before {
  content:"";
  position:absolute;
  left:0;
  top:.8em;
  width:14px;
  height:1px;
  background:var(--green);
}

.prose > :last-child {
  margin-bottom:0;
}

/* ---------- Фотографии внутри статьи ----------
   Правка Заказчика от 02.10.2026: «фотография, вокруг неё текст, змейкой
   обтекать» — текст на «О нас» не должен быть «расползшимся».

   Снимки ещё не прислали, поэтому в разметке стоит штатная заглушка
   Битрикса (noimage.png решения Аспро). Контент-менеджер заменит src
   на реальное фото, не трогая стили; размеры держит сама рамка, поэтому
   подойдёт снимок любой пропорции.

   Заглушка — иконка 160px, растягивать её нельзя, поэтому она лежит по
   центру плашки в натуральную величину; настоящее фото заполнит рамку
   целиком (object-fit: cover). */
.prose figure {
  float:right;
  width:360px;
  max-width:100%;
  margin:6px 0 26px 36px;
  padding:0;
}

.prose figure.is-left {
  float:left;
  margin:6px 36px 26px 0;
}

.prose figure img {
  display:block;
  width:100%;
  height:270px;
  object-fit:contain;
  object-position:center;
  /* Выбор Заказчика от 07.10.2026: «растворение мне больше нравится».
     Рамка и подложка убраны, края снимка мягко уходят в фон. */
  -webkit-mask-image:radial-gradient(ellipse 88% 88% at 50% 50%, #000 72%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 88% 88% at 50% 50%, #000 72%, rgba(0,0,0,0) 100%);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* У настоящего снимка пропорции свои — он заполняет рамку, а не висит
   иконкой по центру. Отличаем по классу, его ставит контент-менеджер
   вместе с заменой src. */
.prose figure.has-photo img {
  object-fit:cover;
}

/* Правка Заказчика от 07.10.2026: «последний абзац сдвинем влево».
   Он обтекал нижний снимок справа и начинался с отступом; теперь встаёт под
   снимком, от левого края полосы. */
.prose p.starts-left {
  clear:left;
}

/* Плавающие блоки не удлиняют родителя — без этого следующий за статьёй
   блок наезжал бы на снимок. */
.prose:after {
  content:"";
  display:block;
  clear:both;
}

/* На узком экране обтекание бессмысленно: снимок во всю ширину, текст
   под ним. */
@media (max-width: 820px) {
  .prose figure,
  .prose figure.is-left {
    float:none;
    width:100%;
    margin:0 0 22px;
  }
}

/* Наведение — только там, где есть настоящий курсор.

   На тач-устройствах iOS эмулирует :hover по касанию и НЕ снимает его: после
   прокрутки пальцем по плашкам на них остаётся проявленная картинка и зелёная
   кнопка. На «Документах» это делало заголовки нечитаемыми — снимок сертификатов
   светлый, и даже на 16% он забивал белый текст. Воспроизводится прокруткой
   пальцем по карточкам.

   Поэтому все эффекты наведения заводим под (hover: hover) and (pointer: fine):
   мышь их получает, палец — нет. Переход по ссылке на тач-устройстве работает
   как работал, меняется только оформление. */
@media (hover: hover) and (pointer: fine) {
  [data-card-btn]:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 24px var(--shadow);
  }

  [data-card-btn]:hover:after {
    opacity:.16;
  }

  [data-card-btn]:hover [data-card-more] {
    background:var(--green);
    border-color:var(--green);
    color:#001338;
  }

  .vacancies__item:hover:after {
    opacity: .04;
  }

  .vacancies__item:hover .vacancies__cta,
  .vacancies__cta:hover {
    background: var(--green);
    border-color: var(--green);
    color: #001338;
  }

  a.doc-row__action:hover {
    background:var(--green);
    border-color:var(--green);
    color:#001338;
  }

  .lab-photo:hover img {
    transform:scale(1.06);
  }

}
/* Три вида в ряд, как фото на странице «Карьера» */
.scheme-grid.scheme-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.scheme-grid.scheme-grid--3 > figure:last-child {
  grid-column: auto;               /* отменяем растяжку на всю ширину */
}
.scheme-grid.scheme-grid--3 img,
.scheme-grid.scheme-grid--3 > figure:last-child img {
  height: auto;
  aspect-ratio: 3 / 2;             /* та же пропорция, что у .lab-photo */
  padding: 16px;
}
@media (max-width: 1024px) {
  .scheme-grid.scheme-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .scheme-grid.scheme-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* End */


/* Start:/local/templates/enercom/components/bitrix/main.site.selector/main/style.min.css?17817710151066*/
.sites{display:flex;align-items:center;position:relative}.sites__select{display:flex;align-items:center;cursor:pointer}.sites__option{padding:6.5px 0;cursor:pointer;display:block;text-transform:capitalize}.sites__option--first{padding-top:0}.sites__option--last{padding-bottom:0}.sites__option--current{font-weight:700;cursor:default}.sites__dropdown{position:absolute;top:100%;left:11px;padding-top:13px;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.sites__dropdown--top{top:auto;bottom:100%;padding-bottom:10px;padding-top:0}.sites__dropdown--top .dropdown{display:flex;flex-direction:column-reverse}.sites__dropdown--top .sites__option--first{padding-top:6.5px;padding-bottom:0}.sites__dropdown--top .sites__option--last{padding-top:0;padding-bottom:6.5px}.sites:hover .sites__dropdown{opacity:1;visibility:visible}.sites__dropdown .dropdown{padding:14px 19px 15px}.sites__icon{margin-right:12px;margin-top:-1px}.sites__arrow{display:flex;margin-left:7px;margin-top:1px}.sites__current--upper{text-transform:uppercase}
/* End */


/* Start:/local/templates/enercom/components/bitrix/main.site.selector/mobile/style.min.css?1781771015209*/
.mobilemenu__menu--sites .mobilemenu__menu-item>.link-wrapper>a{text-transform:capitalize}.mobilemenu__menu--sites .mobilemenu__menu-item--parent>.link-wrapper>a.link-sites--uppercase{text-transform:uppercase}
/* End */


/* Start:/local/templates/enercom/styles.css?179155903066*/
/* пусто намеренно: стили в css/styles.css */

/* End */


/* Start:/local/templates/enercom/template_styles.css?179155903066*/
/* пусто намеренно: стили в css/styles.css */

/* End */
/* /local/templates/enercom/css/styles.css?179217762973093 */
/* /local/templates/enercom/components/bitrix/main.site.selector/main/style.min.css?17817710151066 */
/* /local/templates/enercom/components/bitrix/main.site.selector/mobile/style.min.css?1781771015209 */
/* /local/templates/enercom/styles.css?179155903066 */
/* /local/templates/enercom/template_styles.css?179155903066 */